From 70242846aeff2ba01178935c16e58cf33d748092 Mon Sep 17 00:00:00 2001
From: simon987 <me@simon987.net>
Date: Fri, 14 Jul 2023 21:19:59 -0400
Subject: [PATCH] Rework sist2-admin UI

---
 .../src/components/JobCheckboxGroup.vue       |  76 ++++++----
 .../frontend/src/components/WebOptions.vue    |  51 +++----
 sist2-admin/frontend/src/i18n/messages.js     |  10 +-
 sist2-admin/frontend/src/views/Frontend.vue   |  44 +++---
 sist2-admin/frontend/src/views/Home.vue       | 142 +++++++++---------
 sist2-admin/frontend/src/views/Job.vue        |  14 +-
 6 files changed, 175 insertions(+), 162 deletions(-)

diff --git a/sist2-admin/frontend/src/components/JobCheckboxGroup.vue b/sist2-admin/frontend/src/components/JobCheckboxGroup.vue
index eb7818e..4896a65 100644
--- a/sist2-admin/frontend/src/components/JobCheckboxGroup.vue
+++ b/sist2-admin/frontend/src/components/JobCheckboxGroup.vue
@@ -1,42 +1,54 @@
 <template>
-  <div>
-    <h5>{{ $t("selectJobs") }}</h5>
-    <b-progress v-if="loading" striped animated value="100"></b-progress>
-    <b-form-group v-else>
-      <b-form-checkbox-group
-          v-if="jobs.length > 0"
-          :checked="frontend.jobs"
-          @input="frontend.jobs = $event; $emit('input')"
-      >
-        <div v-for="job in jobs" :key="job.name">
-          <b-form-checkbox :disabled="job.status !== 'indexed'" :value="job.name">[{{ job.name }}]</b-form-checkbox>
-          <br/>
-        </div>
-      </b-form-checkbox-group>
-      <div v-else>
-        <span class="text-muted">{{ $t('jobOptions.noJobAvailable') }}</span>
-        &nbsp;<router-link to="/">{{$t("create")}}</router-link>
-      </div>
-    </b-form-group>
-  </div>
+    <div>
+        <h5>{{ $t("selectJobs") }}</h5>
+        <b-progress v-if="loading" striped animated value="100"></b-progress>
+        <b-form-group v-else>
+            <b-form-checkbox-group
+                    v-if="jobs.length > 0"
+                    :checked="frontend.jobs"
+                    @input="frontend.jobs = $event; $emit('input')"
+            >
+                <div v-for="job in jobs" :key="job.name">
+                    <b-form-checkbox :disabled="job.status !== 'indexed'"
+                                     :value="job.name">
+                        <template #default><span
+                                :title="job.status !== 'indexed' ? $t('jobOptions.notIndexed') : ''"
+                        >[{{ job.name }}]</span></template>
+                    </b-form-checkbox>
+                    <br/>
+                </div>
+            </b-form-checkbox-group>
+            <div v-else>
+                <span class="text-muted">{{ $t('jobOptions.noJobAvailable') }}</span>
+                <router-link to="/">{{ $t("create") }}</router-link>
+            </div>
+        </b-form-group>
+    </div>
 </template>
 
 <script>
 import Sist2AdminApi from "@/Sist2AdminApi";
 
 export default {
-  name: "JobCheckboxGroup",
-  props: ["frontend"],
-  mounted() {
-    Sist2AdminApi.getJobs().then(resp => {
-      this.jobs = resp.data;
-      this.loading = false;
-    });
-  },
-  data() {
-    return {
-      loading: true,
+    name: "JobCheckboxGroup",
+    props: ["frontend"],
+    mounted() {
+        Sist2AdminApi.getJobs().then(resp => {
+            this._jobs = resp.data;
+            this.loading = false;
+        });
+    },
+    computed: {
+        jobs() {
+            return this._jobs
+                .filter(job => job.index_options.search_backend === this.frontend.web_options.search_backend)
+        }
+    },
+    data() {
+        return {
+            loading: true,
+            _jobs: null
+        }
     }
-  }
 }
 </script>
\ No newline at end of file
diff --git a/sist2-admin/frontend/src/components/WebOptions.vue b/sist2-admin/frontend/src/components/WebOptions.vue
index ced1e61..d0471cb 100644
--- a/sist2-admin/frontend/src/components/WebOptions.vue
+++ b/sist2-admin/frontend/src/components/WebOptions.vue
@@ -1,41 +1,44 @@
 <template>
     <div>
+        <h4>{{ $t("webOptions.title") }}</h4>
+        <b-card>
+            <label>{{ $t("webOptions.lang") }}</label>
+            <b-form-select v-model="options.lang" :options="['en', 'fr', 'zh-CN', 'pl', 'de']"
+                           @change="update()"></b-form-select>
 
-        <label>{{ $t("webOptions.lang") }}</label>
-        <b-form-select v-model="options.lang" :options="['en', 'fr', 'zh-CN']" @change="update()"></b-form-select>
+            <label>{{ $t("webOptions.bind") }}</label>
+            <b-form-input v-model="options.bind" @change="update()"></b-form-input>
 
-        <label>{{ $t("webOptions.bind") }}</label>
-        <b-form-input v-model="options.bind" @change="update()"></b-form-input>
+            <label>{{ $t("webOptions.tagline") }}</label>
+            <b-form-textarea v-model="options.tagline" @change="update()"></b-form-textarea>
 
-        <label>{{ $t("webOptions.tagline") }}</label>
-        <b-form-textarea v-model="options.tagline" @change="update()"></b-form-textarea>
+            <label>{{ $t("webOptions.auth") }}</label>
+            <b-form-input v-model="options.auth" @change="update()"></b-form-input>
 
-        <label>{{ $t("webOptions.auth") }}</label>
-        <b-form-input v-model="options.auth" @change="update()"></b-form-input>
-
-        <label>{{ $t("webOptions.tagAuth") }}</label>
-        <b-form-input v-model="options.tag_auth" @change="update()"></b-form-input>
+            <label>{{ $t("webOptions.tagAuth") }}</label>
+            <b-form-input v-model="options.tag_auth" @change="update()"></b-form-input>
+        </b-card>
 
         <br>
-        <h5>Auth0 options</h5>
-        <label>{{ $t("webOptions.auth0Audience") }}</label>
-        <b-form-input v-model="options.auth0_audience" @change="update()"></b-form-input>
+        <h4>Auth0 options</h4>
+        <b-card>
+            <label>{{ $t("webOptions.auth0Audience") }}</label>
+            <b-form-input v-model="options.auth0_audience" @change="update()"></b-form-input>
 
-        <label>{{ $t("webOptions.auth0Domain") }}</label>
-        <b-form-input v-model="options.auth0_domain" @change="update()"></b-form-input>
+            <label>{{ $t("webOptions.auth0Domain") }}</label>
+            <b-form-input v-model="options.auth0_domain" @change="update()"></b-form-input>
 
-        <label>{{ $t("webOptions.auth0ClientId") }}</label>
-        <b-form-input v-model="options.auth0_client_id" @change="update()"></b-form-input>
+            <label>{{ $t("webOptions.auth0ClientId") }}</label>
+            <b-form-input v-model="options.auth0_client_id" @change="update()"></b-form-input>
 
-        <label>{{ $t("webOptions.auth0PublicKey") }}</label>
-        <b-textarea rows="10" v-model="options.auth0_public_key" @change="update()"></b-textarea>
+            <label>{{ $t("webOptions.auth0PublicKey") }}</label>
+            <b-textarea rows="10" v-model="options.auth0_public_key" @change="update()"></b-textarea>
+        </b-card>
     </div>
 </template>
 
 <script>
 
-import sist2AdminApi from "@/Sist2AdminApi";
-
 export default {
     name: "WebOptions",
     props: ["options", "frontendName"],
@@ -48,10 +51,6 @@ export default {
     },
     methods: {
         update() {
-            if (!this.options.es_url.startsWith("https")) {
-                this.options.es_insecure_ssl = false;
-            }
-
             this.$emit("change", this.options);
         },
     }
diff --git a/sist2-admin/frontend/src/i18n/messages.js b/sist2-admin/frontend/src/i18n/messages.js
index 610c1bc..3de6a01 100644
--- a/sist2-admin/frontend/src/i18n/messages.js
+++ b/sist2-admin/frontend/src/i18n/messages.js
@@ -52,7 +52,10 @@ export default {
         searchBackendTitle: "search backend configuration",
         newBackendName: "New search backend name",
 
-        selectJobs: "Select jobs",
+        frontendTab: "Frontend",
+        backendTab: "Backend",
+
+        selectJobs: "Available jobs",
         webOptions: {
             title: "Web options",
             lang: "UI Language",
@@ -109,12 +112,13 @@ export default {
             keepNLogs: "Keep last N log files. Set to -1 to keep all logs.",
             deleteNow: "Delete now",
             scheduleEnabled: "Enable scheduled re-scan",
-            noJobAvailable: "No jobs available.",
+            noJobAvailable: "No jobs available for this search backend.",
+            notIndexed: "Has not been indexed yet",
             noBackendError: "You must select a search backend to run this job",
             desktopNotifications: "Desktop notifications"
         },
         frontendOptions: {
-            title: "Frontend options",
+            title: "Advanced options",
             noJobSelectedWarning: "You must select at least one job to start this frontend"
         },
         notifications: {
diff --git a/sist2-admin/frontend/src/views/Frontend.vue b/sist2-admin/frontend/src/views/Frontend.vue
index 33a61d2..e0662af 100644
--- a/sist2-admin/frontend/src/views/Frontend.vue
+++ b/sist2-admin/frontend/src/views/Frontend.vue
@@ -8,6 +8,7 @@
             </small>
         </b-card-title>
 
+        <!-- Action buttons-->
         <div class="mb-3" v-if="!loading">
             <b-button class="mr-1" :disabled="frontend.running || !valid" variant="success" @click="start()">{{
                 $t("start")
@@ -23,10 +24,26 @@
             <b-button variant="danger" @click="deleteFrontend()">{{ $t("delete") }}</b-button>
         </div>
 
-
         <b-progress v-if="loading" striped animated value="100"></b-progress>
         <b-card-body v-else>
 
+            <h4>{{ $t("backendOptions.title") }}</h4>
+            <b-card>
+                <b-alert v-if="!valid" variant="warning" show>{{ $t("frontendOptions.noJobSelectedWarning") }}</b-alert>
+
+                <SearchBackendSelect :value="frontend.web_options.search_backend"
+                                     @change="onBackendSelect($event)"></SearchBackendSelect>
+
+                <br>
+                <JobCheckboxGroup :frontend="frontend" @input="update()"></JobCheckboxGroup>
+            </b-card>
+
+            <br/>
+
+            <WebOptions :options="frontend.web_options" :frontend-name="$route.params.name"
+                        @change="update()"></WebOptions>
+            <br/>
+
             <h4>{{ $t("frontendOptions.title") }}</h4>
             <b-card>
                 <b-form-checkbox v-model="frontend.auto_start" @change="update()">
@@ -38,32 +55,8 @@
 
                 <label>{{ $t("customUrl") }}</label>
                 <b-form-input v-model="frontend.custom_url" @change="update()" placeholder="http://"></b-form-input>
-
-                <br/>
-
-                <b-alert v-if="!valid" variant="warning" show>{{ $t("frontendOptions.noJobSelectedWarning") }}</b-alert>
-
-                <JobCheckboxGroup :frontend="frontend" @input="update()"></JobCheckboxGroup>
-            </b-card>
-
-            <br/>
-
-            <h4>{{ $t("webOptions.title") }}</h4>
-            <b-card>
-                <WebOptions :options="frontend.web_options" :frontend-name="$route.params.name"
-                            @change="update()"></WebOptions>
-            </b-card>
-
-            <br>
-
-            <h4>{{ $t("backendOptions.title") }}</h4>
-            <b-card>
-                <SearchBackendSelect :value="frontend.web_options.search_backend"
-                                     @change="onBackendSelect($event)"></SearchBackendSelect>
             </b-card>
         </b-card-body>
-
-
     </b-card>
 </template>
 
@@ -137,6 +130,7 @@ export default {
         },
         onBackendSelect(backend) {
             this.frontend.web_options.search_backend = backend;
+            this.frontend.jobs = [];
             this.update();
         }
     }
diff --git a/sist2-admin/frontend/src/views/Home.vue b/sist2-admin/frontend/src/views/Home.vue
index ab51625..b8182b8 100644
--- a/sist2-admin/frontend/src/views/Home.vue
+++ b/sist2-admin/frontend/src/views/Home.vue
@@ -1,88 +1,92 @@
 <template>
     <div>
-        <b-card>
-            <b-card-title>{{ $t("jobs") }}</b-card-title>
-            <b-row>
-                <b-col>
-                    <b-input id="new-job" v-model="newJobName" :placeholder="$t('newJobName')"></b-input>
-                    <b-popover
-                            :show.sync="showHelp"
-                            target="new-job"
-                            placement="top"
-                            triggers="manual"
-                            variant="primary"
-                            :content="$t('newJobHelp')"
-                    ></b-popover>
-                </b-col>
-                <b-col>
-                    <b-button variant="primary" @click="createJob()" :disabled="!jobNameValid(newJobName)">
-                        {{ $t("create") }}
-                    </b-button>
-                </b-col>
-            </b-row>
+        <b-tabs content-class="mt-3">
+            <b-tab :title="$t('backendTab')">
 
-            <hr/>
+                <b-card>
+                    <b-card-title>{{ $t("searchBackends") }}</b-card-title>
 
-            <b-progress v-if="jobsLoading" striped animated value="100"></b-progress>
-            <b-list-group v-else>
-                <JobListItem v-for="job in jobs" :key="job.name" :job="job"></JobListItem>
-            </b-list-group>
-        </b-card>
+                    <b-row>
+                        <b-col>
+                            <b-input v-model="newBackendName" :placeholder="$t('newBackendName')"></b-input>
+                        </b-col>
+                        <b-col>
+                            <b-button variant="primary" @click="createBackend()"
+                                      :disabled="!backendNameValid(newBackendName)">
+                                {{ $t("create") }}
+                            </b-button>
+                        </b-col>
+                    </b-row>
 
-        <br/>
+                    <hr/>
 
-        <b-card>
+                    <b-progress v-if="backendsLoading" striped animated value="100"></b-progress>
+                    <b-list-group v-else>
+                        <SearchBackendListItem v-for="backend in backends"
+                                               :key="backend.name" :backend="backend"></SearchBackendListItem>
+                    </b-list-group>
 
-            <b-card-title>{{ $t("frontends") }}</b-card-title>
+                </b-card>
 
-            <b-row>
-                <b-col>
-                    <b-input v-model="newFrontendName" :placeholder="$t('newFrontendName')"></b-input>
-                </b-col>
-                <b-col>
-                    <b-button variant="primary" @click="createFrontend()"
-                              :disabled="!frontendNameValid(newFrontendName)">
-                        {{ $t("create") }}
-                    </b-button>
-                </b-col>
-            </b-row>
+                <br/>
 
-            <hr/>
+                <b-card>
+                    <b-card-title>{{ $t("jobs") }}</b-card-title>
+                    <b-row>
+                        <b-col>
+                            <b-input id="new-job" v-model="newJobName" :placeholder="$t('newJobName')"></b-input>
+                            <b-popover
+                                :show.sync="showHelp"
+                                target="new-job"
+                                placement="top"
+                                triggers="manual"
+                                variant="primary"
+                                :content="$t('newJobHelp')"
+                            ></b-popover>
+                        </b-col>
+                        <b-col>
+                            <b-button variant="primary" @click="createJob()" :disabled="!jobNameValid(newJobName)">
+                                {{ $t("create") }}
+                            </b-button>
+                        </b-col>
+                    </b-row>
 
-            <b-progress v-if="frontendsLoading" striped animated value="100"></b-progress>
-            <b-list-group v-else>
-                <FrontendListItem v-for="frontend in frontends"
-                                  :key="frontend.name" :frontend="frontend"></FrontendListItem>
-            </b-list-group>
+                    <hr/>
 
-        </b-card>
+                    <b-progress v-if="jobsLoading" striped animated value="100"></b-progress>
+                    <b-list-group v-else>
+                        <JobListItem v-for="job in jobs" :key="job.name" :job="job"></JobListItem>
+                    </b-list-group>
+                </b-card>
+            </b-tab>
+            <b-tab :title="$t('frontendTab')">
+                <b-card>
 
-        <br/>
+                    <b-card-title>{{ $t("frontends") }}</b-card-title>
 
-        <b-card>
-            <b-card-title>{{ $t("searchBackends") }}</b-card-title>
+                    <b-row>
+                        <b-col>
+                            <b-input v-model="newFrontendName" :placeholder="$t('newFrontendName')"></b-input>
+                        </b-col>
+                        <b-col>
+                            <b-button variant="primary" @click="createFrontend()"
+                                      :disabled="!frontendNameValid(newFrontendName)">
+                                {{ $t("create") }}
+                            </b-button>
+                        </b-col>
+                    </b-row>
 
-            <b-row>
-                <b-col>
-                    <b-input v-model="newBackendName" :placeholder="$t('newBackendName')"></b-input>
-                </b-col>
-                <b-col>
-                    <b-button variant="primary" @click="createBackend()"
-                              :disabled="!backendNameValid(newBackendName)">
-                        {{ $t("create") }}
-                    </b-button>
-                </b-col>
-            </b-row>
+                    <hr/>
 
-            <hr/>
+                    <b-progress v-if="frontendsLoading" striped animated value="100"></b-progress>
+                    <b-list-group v-else>
+                        <FrontendListItem v-for="frontend in frontends"
+                                          :key="frontend.name" :frontend="frontend"></FrontendListItem>
+                    </b-list-group>
 
-            <b-progress v-if="backendsLoading" striped animated value="100"></b-progress>
-            <b-list-group v-else>
-                <SearchBackendListItem v-for="backend in backends"
-                                  :key="backend.name" :backend="backend"></SearchBackendListItem>
-            </b-list-group>
-
-        </b-card>
+                </b-card>
+            </b-tab>
+        </b-tabs>
     </div>
 </template>
 
diff --git a/sist2-admin/frontend/src/views/Job.vue b/sist2-admin/frontend/src/views/Job.vue
index d1bfa06..6e7487d 100644
--- a/sist2-admin/frontend/src/views/Job.vue
+++ b/sist2-admin/frontend/src/views/Job.vue
@@ -24,13 +24,6 @@
 
             <br/>
 
-            <h4>{{ $t("scanOptions.title") }}</h4>
-            <b-card>
-                <ScanOptions :options="job.scan_options" @change="update()"></ScanOptions>
-            </b-card>
-
-            <br/>
-
             <h4>{{ $t("backendOptions.title") }}</h4>
             <b-card>
                 <b-alert v-if="!valid" variant="warning" show>{{ $t("jobOptions.noBackendError") }}</b-alert>
@@ -38,6 +31,13 @@
                                      @change="onBackendSelect($event)"></SearchBackendSelect>
             </b-card>
 
+            <br/>
+
+            <h4>{{ $t("scanOptions.title") }}</h4>
+            <b-card>
+                <ScanOptions :options="job.scan_options" @change="update()"></ScanOptions>
+            </b-card>
+
         </b-card-body>
 
     </b-card>