From d8f61e40d0e75167dabc6005d27e5c5aa1b42878 Mon Sep 17 00:00:00 2001
From: Arild Matsson <arild.matsson@gu.se>
Date: Thu, 14 Mar 2024 18:00:34 +0100
Subject: [PATCH] More info on admin view

---
 src/components/TextData.vue          | 11 +---
 src/i18n/locales/en.yaml             |  4 +-
 src/i18n/locales/sv.yaml             |  4 +-
 src/library/AdminResourcePreview.vue | 83 +++++++++++++++++++++++++++
 src/library/AdminResourcesView.vue   | 86 ++++++++++++++++++++++++----
 src/store/resource.store.ts          |  8 +--
 src/user/AdminModeBanner.vue         |  8 ++-
 7 files changed, 177 insertions(+), 27 deletions(-)
 create mode 100644 src/library/AdminResourcePreview.vue

diff --git a/src/components/TextData.vue b/src/components/TextData.vue
index a20ffee..cb36e9b 100644
--- a/src/components/TextData.vue
+++ b/src/components/TextData.vue
@@ -3,18 +3,13 @@ import TerminalOutput from "./TerminalOutput.vue";
 
 defineProps<{
   text: string;
-  height?: number;
 }>();
 </script>
 
 <template>
-  <div
-    class="relative bg-zinc-700 dark:bg-zinc-600 rounded shadow-inner text-sm"
-  >
-    <TerminalOutput class="h-fit max-h-40 resize-y">
-      {{ text }}
-    </TerminalOutput>
-  </div>
+  <TerminalOutput class="h-fit max-h-40 resize-y">
+    {{ text }}
+  </TerminalOutput>
 </template>
 
 <style scoped>
diff --git a/src/i18n/locales/en.yaml b/src/i18n/locales/en.yaml
index 20e8fc6..472a839 100644
--- a/src/i18n/locales/en.yaml
+++ b/src/i18n/locales/en.yaml
@@ -128,7 +128,7 @@ files: No files | 1 file | {count} files
 none: None
 new_corpus: New corpus
 fileName: Name
-fileType: Type
+type: Type
 uploaded: Uploaded
 lastModify: Last modified
 fileSize: Size
@@ -175,6 +175,7 @@ docx: Microsoft Word
 odt: OpenDocument Text
 pdf: PDF
 load: Load
+not_loaded: Not loaded
 file.archive: Archive
 file.singles: Single files
 name: Name
@@ -223,6 +224,7 @@ annotations.info: |
   </p>
 admin.page.subtitle: Administration
 admin.goto: Shortcuts
+admin.resources.help: In this administrative listing, you need to load detailed information manually, because loading everything takes a long time.
 accessdenied: Access denied
 accessdenied.contact: If you have questions, or you want to report a bug, please contact sb-info{'@'}svenska.gu.se. Thank you!
 notfound: Page not found
diff --git a/src/i18n/locales/sv.yaml b/src/i18n/locales/sv.yaml
index 66341a0..3c5a05c 100644
--- a/src/i18n/locales/sv.yaml
+++ b/src/i18n/locales/sv.yaml
@@ -129,7 +129,7 @@ files: Inga filer | 1 fil | {count} filer
 none: Inget
 new_corpus: Ny korpus
 fileName: Filnamn
-fileType: Typ
+type: Typ
 uploaded: Uppladdad
 lastModify: Senast ändrad
 fileSize: Storlek
@@ -176,6 +176,7 @@ docx: Microsoft Word
 odt: OpenDocument Text
 pdf: PDF
 load: Ladda in
+not_loaded: Ej laddad
 file.archive: Arkivfil
 file.singles: Enskilda filer
 name: Namn
@@ -225,6 +226,7 @@ annotations.info: |
   </p>
 admin.page.subtitle: Administration
 admin.goto: Genvägar
+admin.resources.help: I denna administrativa resurslista behöver du ladda in detaljerad resursinformation manuellt, eftersom det tar lång tid att ladda allt.
 accessdenied: Åtkomst nekad
 accessdenied.contact: Om du har frågor eller vill rapportera en bugg, kontakta gärna sb-info{'@'}svenska.gu.se. Tack!
 notfound: Sidan kan inte hittas
diff --git a/src/library/AdminResourcePreview.vue b/src/library/AdminResourcePreview.vue
new file mode 100644
index 0000000..10b8bf0
--- /dev/null
+++ b/src/library/AdminResourcePreview.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { isCorpus, type Resource } from "@/store/resource.store";
+import TerminalOutput from "@/components/TerminalOutput.vue";
+import useConfig from "@/corpus/config/config.composable";
+import PendingContent from "@/spin/PendingContent.vue";
+
+const props = defineProps<{
+  resourceId: string;
+  resource: Resource;
+}>();
+
+const { loadConfig } = useConfig(props.resourceId);
+
+onMounted(() => {
+  if (isCorpus(props.resource) && !props.resource.config) loadConfig();
+});
+</script>
+
+<template>
+  <div class="flex flex-wrap items-stretch text-sm">
+    <table v-if="resource" class="flex-1 flex">
+      <tbody>
+        <tr>
+          <th>{{ $t("type") }}</th>
+          <td>{{ $t(resource.type) }}</td>
+        </tr>
+
+        <template v-if="isCorpus(resource)">
+          <tr>
+            <th>{{ $t("texts") }}</th>
+            <td>
+              <div
+                v-for="source in resource.sources.slice(0, 3)"
+                :key="source.name"
+              >
+                {{ source.name }}
+              </div>
+              <div v-if="resource.sources.length > 3">
+                ... ({{ $t("files", resource.sources.length) }})
+              </div>
+            </td>
+          </tr>
+          <tr>
+            <th>{{ $t("job.status") }}</th>
+            <td>
+              <table>
+                <tr
+                  v-for="(status, jobType) in resource.status.status"
+                  :key="jobType"
+                >
+                  <th>{{ jobType }}</th>
+                  <td>{{ $t(`job.status.${status}`) }}</td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+    <PendingContent
+      v-if="isCorpus(resource)"
+      :on="`corpus/${resourceId}/config`"
+      class="flex-1"
+    >
+      <h3 class="font-bold">{{ $t("configuration") }}</h3>
+      <TerminalOutput class="max-h-80">
+        {{ resource.config }}
+      </TerminalOutput>
+    </PendingContent>
+  </div>
+</template>
+
+<style scoped>
+* + tr > th,
+* + tr > td {
+  @apply pt-2;
+}
+td th,
+td td {
+  @apply pt-0;
+}
+</style>
diff --git a/src/library/AdminResourcesView.vue b/src/library/AdminResourcesView.vue
index 08a4630..3acead5 100644
--- a/src/library/AdminResourcesView.vue
+++ b/src/library/AdminResourcesView.vue
@@ -1,20 +1,24 @@
 <script setup lang="ts">
-import { watch } from "vue";
+import { reactive, watch } from "vue";
 import { useRouter } from "vue-router";
 import LayoutSection from "@/components/LayoutSection.vue";
 import PendingContent from "@/spin/PendingContent.vue";
 import useResources from "./resources.composable";
 import { useAuth } from "@/auth/auth.composable";
 import PageTitle from "@/components/PageTitle.vue";
-import { useResourceStore } from "@/store/resource.store";
+import { isCorpus, useResourceStore } from "@/store/resource.store";
 import useAdmin from "@/user/admin.composable";
-import RouteButton from "@/components/RouteButton.vue";
+import HelpBox from "@/components/HelpBox.vue";
+import ActionButton from "@/components/ActionButton.vue";
+import AdminResourcePreview from "./AdminResourcePreview.vue";
 
 const router = useRouter();
 const resourceStore = useResourceStore();
 const { requireAuthentication, isAuthenticated } = useAuth();
 const { adminMode } = useAdmin();
-const { loadResourceIds } = useResources();
+const { loadResourceIds, loadResource } = useResources();
+
+const previewToggles = reactive<Record<string, boolean>>({});
 
 requireAuthentication();
 
@@ -26,23 +30,81 @@ watch(adminMode, () => {
     loadResourceIds();
   }
 });
+
+async function load(resourceId: string) {
+  await loadResource(resourceId);
+  previewToggles[resourceId] = true;
+}
 </script>
 
 <template>
   <div v-if="adminMode">
     <PageTitle subtitle="admin.page.subtitle">{{ $t("resources") }}</PageTitle>
+
+    <HelpBox>
+      {{ $t("admin.resources.help") }}
+    </HelpBox>
+
     <LayoutSection v-if="isAuthenticated">
-      <PendingContent on="corpora" class="my-4 flex flex-col gap-3">
-        <RouteButton
+      <PendingContent on="corpora" class="my-4 flex flex-col gap-6">
+        <PendingContent
           v-for="(resource, resourceId) of resourceStore.resources"
           :key="resourceId"
-          :to="`/library/resource/${resourceId}`"
-          class="flex items-baseline gap-2"
+          :on="`corpus/${resourceId}/job`"
         >
-          <header class="text-lg font-bold font-mono">
-            {{ resourceId }}
-          </header>
-        </RouteButton>
+          <div class="flex items-baseline gap-2">
+            <router-link :to="`/library/resource/${resourceId}`">
+              <header class="text-lg font-bold font-mono">
+                {{ resourceId }}
+              </header>
+            </router-link>
+
+            <ActionButton
+              v-if="!('type' in resource)"
+              @click.stop="load(resourceId)"
+            >
+              {{ $t("load") }}
+            </ActionButton>
+            <ActionButton
+              v-else-if="previewToggles[resourceId]"
+              @click.stop="previewToggles[resourceId] = false"
+            >
+              {{ $t("expand.close") }}
+            </ActionButton>
+            <ActionButton
+              v-else
+              @click.stop="previewToggles[resourceId] = true"
+            >
+              {{ $t("expand.open") }}
+            </ActionButton>
+
+            <!-- Show a few selected details if loaded -->
+            <div class="ml-4">
+              <div v-if="'type' in resource" class="flex gap-4">
+                {{ $t(resource.type) }}
+                <span
+                  v-if="
+                    isCorpus(resource) &&
+                    Object.values(resource.status.status).some(
+                      (status) => status == 'error',
+                    )
+                  "
+                >
+                  {{ $t("job.status.error") }}
+                </span>
+              </div>
+              <div v-else class="italic opacity-75">
+                {{ $t("not_loaded") }}
+              </div>
+            </div>
+          </div>
+
+          <AdminResourcePreview
+            v-if="previewToggles[resourceId] && 'type' in resource"
+            :resource-id="resourceId"
+            :resource="resource"
+          />
+        </PendingContent>
       </PendingContent>
     </LayoutSection>
   </div>
diff --git a/src/store/resource.store.ts b/src/store/resource.store.ts
index 9f757b4..5b14b93 100644
--- a/src/store/resource.store.ts
+++ b/src/store/resource.store.ts
@@ -19,9 +19,9 @@ export type Resource = {
 export type Corpus = Resource & {
   type: "corpus";
   sources: FileMeta[];
-  config: ConfigOptions;
+  config?: ConfigOptions;
   status: CorpusStatus;
-  exports: FileMeta[];
+  exports?: FileMeta[];
 };
 
 export type Metadata = Resource & {
@@ -31,9 +31,9 @@ export type Metadata = Resource & {
 
 // User-defined type guards to help inform TypeScript
 // See https://www.typescriptlang.org/docs/handbook/advanced-types.html#user-defined-type-guards
-const isCorpus = (resource: Partial<Resource>): resource is Corpus =>
+export const isCorpus = (resource: Partial<Resource>): resource is Corpus =>
   resource.type == "corpus";
-const isMetadata = (resource: Partial<Resource>): resource is Metadata =>
+export const isMetadata = (resource: Partial<Resource>): resource is Metadata =>
   resource.type == "metadata";
 
 export const useResourceStore = defineStore("resource", () => {
diff --git a/src/user/AdminModeBanner.vue b/src/user/AdminModeBanner.vue
index c33132a..50882de 100644
--- a/src/user/AdminModeBanner.vue
+++ b/src/user/AdminModeBanner.vue
@@ -28,9 +28,15 @@ function disable() {
         {{ $t("disable") }}
       </ActionButton>
       {{ $t("admin.goto") }}:
-      <router-link to="/admin/resources" class="text-indigo-600">
+      <router-link to="/admin/resources">
         {{ $t("resources") }}
       </router-link>
     </div>
   </div>
 </template>
+
+<style scoped>
+a {
+  @apply text-indigo-600;
+}
+</style>