Merge pull request #122 from ezpaarse-project/feature/sushi-overview

Feature/sushi overview
ezpaarse-project · Nov 8, 2023 · 0aaf7fd · 0aaf7fd
2 parents 464257a + 1c6a4f9
commit 0aaf7fd
Show file tree

Hide file tree

Showing 5 changed files with 212 additions and 50 deletions.
diff --git a/front/components/DropdownSelector.vue b/front/components/DropdownSelector.vue
@@ -7,20 +7,31 @@
     left
     v-bind="$attrs"
   >
-    <template #activator="{ on, attrs }">
-      <v-btn
-        text
-        small
-        v-bind="attrs"
-        v-on="on"
-      >
-        <v-icon>
-          {{ icon }}
-        </v-icon>
-        <v-icon>
-          mdi-chevron-down
-        </v-icon>
-      </v-btn>
+    <template #activator="props">
+      <slot name="activator" v-bind="props">
+        <v-badge
+          color="primary"
+          :content="nbSelected"
+          :value="badge && nbSelected"
+          overlap
+          small
+        >
+          <v-btn
+            :text="!iconButton"
+            :icon="iconButton"
+            small
+            v-bind="props.attrs"
+            v-on="props.on"
+          >
+            <v-icon small>
+              {{ icon }}
+            </v-icon>
+            <v-icon v-if="!iconButton">
+              mdi-chevron-down
+            </v-icon>
+          </v-btn>
+        </v-badge>
+      </slot>
     </template>
 
     <v-card>
@@ -81,9 +92,22 @@ export default {
       type: String,
       default: () => 'mdi-form-select',
     },
+    iconButton: {
+      type: Boolean,
+      default: () => false,
+    },
+    badge: {
+      type: Boolean,
+      default: () => false,
+    },
   },
   data() {
     return {};
   },
+  computed: {
+    nbSelected() {
+      return this.value?.length;
+    },
+  },
 };
 </script>
diff --git a/front/components/SimpleMetric.vue b/front/components/SimpleMetric.vue
@@ -0,0 +1,34 @@
+<template>
+  <v-sheet
+    v-bind="$attrs"
+    class="d-flex justify-start flex-column text-center"
+    style="gap: 10px"
+  >
+    <v-icon large :color="color">
+      {{ icon }}
+    </v-icon>
+
+    <div>{{ text }}</div>
+
+    <slot name="actions" />
+  </v-sheet>
+</template>
+
+<script>
+export default {
+  props: {
+    text: {
+      type: String,
+      default: () => '',
+    },
+    icon: {
+      type: String,
+      default: () => '',
+    },
+    color: {
+      type: String,
+      default: () => '',
+    },
+  },
+};
+</script>
diff --git a/front/locales/en.json b/front/locales/en.json
@@ -507,7 +507,10 @@
     "latestImport": "Latest import",
     "unableToGetLockStatus": "Failed to retrieve credentials lock status",
     "managementIsLocked": "SUSHI credentials management is currently locked.",
-    "youHaveUntestedCredentials": "You have untested credentials | You have {count} untested credentials",
+    "nUntestedCredentials": "{count} untested credentials",
+    "nInvalidCredentials": "{count} invalid credentials",
+    "nOperationalCredentials": "{count} operational credentials",
+    "nProblematicEndpoints": "1 problematic endpoint | {count} problematic endpoints",
     "deleteNbCredentials": "You are about to delete {number} SUSHI credentials.",
     "scope": "Scope",
     "unchangeableParam": "Unchangeable parameter defined at the access point level.",
@@ -718,6 +721,7 @@
   "leaveIt": "Leave it as is",
   "nSelected": "{count} selected",
   "deselect": "Deselect",
+  "show": "Show",
   "requiredFields": "* required fields",
   "formSendingFailed": "Sending the form failed",
   "searchFailed": "Oops! The search failed.",

diff --git a/front/locales/fr.json b/front/locales/fr.json
@@ -508,7 +508,10 @@
     "latestImport": "Dernier import",
     "unableToGetLockStatus": "Impossible de récupérer l'état de verrouillage des identifiants",
     "managementIsLocked": "La gestion des identifiants SUSHI est actuellement verrouillée.",
-    "youHaveUntestedCredentials": "Vous avez 1 identifiant non testé | Vous avez {count} identifiants non testés",
+    "nUntestedCredentials": "1 identifiant non testé | {count} identifiants non testés",
+    "nInvalidCredentials": "1 identifiant invalide | {count} identifiants invalides",
+    "nOperationalCredentials": "1 identifiant fonctionnel | {count} identifiants fonctionnels",
+    "nProblematicEndpoints": "1 point d'accès problématique | {count} points d'accès problématiques",
     "deleteNbCredentials": "Vous allez supprimer {number} identifiants SUSHI.",
     "scope": "Périmètre",
     "unchangeableParam": "Paramètre non modifiable défini au niveau du point d'accès.",
@@ -718,6 +721,7 @@
   "leaveIt": "Laisser tel quel",
   "nSelected": "{count} sélectionné(s)",
   "deselect": "Désélectionner",
+  "show": "Afficher",
   "requiredFields": "* champs obligatoires",
   "formSendingFailed": "L'envoi du formulaire a échoué",
   "searchFailed": "Oups! La recherche a échoué.",

diff --git a/front/pages/institutions/_id/sushi.vue b/front/pages/institutions/_id/sushi.vue
@@ -62,39 +62,73 @@
         </v-col>
       </v-row>
 
-      <v-row v-if="hasUntestedItems" justify="center" class="mt-2">
-        <v-col style="max-width: 1000px">
-          <v-alert
-            outlined
-            type="info"
-            prominent
-            icon="mdi-bell-alert"
-          >
-            <div v-if="lockReason">
-              {{ $t('reason', { reason: lockReason }) }}
+      <div class="d-flex justify-center align-stretch pa-2" style="gap: 10px">
+        <SimpleMetric
+          width="250"
+          :text="$tc('sushi.nOperationalCredentials', operationalItems.length)"
+          icon="mdi-check"
+          color="success"
+        />
+
+        <SimpleMetric
+          width="250"
+          :text="$tc('sushi.nUntestedCredentials', untestedItems.length)"
+          icon="mdi-bell-alert"
+          color="info"
+        >
+          <template #actions>
+            <div>
+              <v-btn
+                small
+                outlined
+                :disabled="!hasUntestedItems"
+                :loading="testingConnection"
+                @click="checkUntestedItems"
+              >
+                {{ $t('institutions.sushi.checkCredentials') }}
+              </v-btn>
             </div>
+          </template>
+        </SimpleMetric>
 
-            <v-row align="center">
-              <v-col class="grow">
-                <div
-                  class="text-h6"
-                >
-                  {{ $tc('sushi.youHaveUntestedCredentials', untestedItems.length) }}
-                </div>
-              </v-col>
-              <v-col class="shrink">
-                <v-btn
-                  color="info"
-                  :loading="testingConnection"
-                  @click="checkUntestedItems"
-                >
-                  {{ $t('institutions.sushi.checkCredentials') }}
-                </v-btn>
-              </v-col>
-            </v-row>
-          </v-alert>
-        </v-col>
-      </v-row>
+        <SimpleMetric
+          width="250"
+          :text="$tc('sushi.nInvalidCredentials', unauthorizedItems.length)"
+          icon="mdi-key-alert-outline"
+          color="warning"
+        >
+          <template #actions>
+            <div>
+              <v-btn
+                small
+                outlined
+                @click="filterByStatus('unauthorized')"
+              >
+                {{ $t('show') }}
+              </v-btn>
+            </div>
+          </template>
+        </SimpleMetric>
+
+        <SimpleMetric
+          width="250"
+          :text="$tc('sushi.nProblematicEndpoints', failedItems.length)"
+          icon="mdi-alert-circle"
+          color="error"
+        >
+          <template #actions>
+            <div>
+              <v-btn
+                small
+                outlined
+                @click="filterByStatus('failed')"
+              >
+                {{ $t('show') }}
+              </v-btn>
+            </div>
+          </template>
+        </SimpleMetric>
+      </div>
     </v-container>
 
     <SushiForm
@@ -298,6 +332,18 @@
         </v-tooltip>
       </template>
 
+      <template #[`header.connection`]="{ header }">
+        {{ header.text }}
+
+        <DropdownSelector
+          v-model="filters.sushiStatuses"
+          :items="availableSushiStatuses"
+          icon="mdi-filter"
+          icon-button
+          badge
+        />
+      </template>
+
       <template #[`item.updatedAt`]="{ item }">
         <LocalDate :date="item.updatedAt" />
       </template>
@@ -392,6 +438,8 @@ import ReportsDialog from '~/components/ReportsDialog.vue';
 import HarvestMatrixDialog from '~/components/HarvestMatrixDialog.vue';
 import ConfirmDialog from '~/components/ConfirmDialog.vue';
 import LocalDate from '~/components/LocalDate.vue';
+import DropdownSelector from '~/components/DropdownSelector.vue';
+import SimpleMetric from '~/components/SimpleMetric.vue';
 
 export default {
   layout: 'space',
@@ -407,6 +455,8 @@ export default {
     HarvestMatrixDialog,
     ConfirmDialog,
     LocalDate,
+    DropdownSelector,
+    SimpleMetric,
   },
   async asyncData({
     $axios,
@@ -445,6 +495,9 @@ export default {
       institution,
       sushiItems: [],
       selected: [],
+      filters: {
+        sushiStatuses: [],
+      },
       refreshing: false,
       deleting: false,
       search: '',
@@ -487,6 +540,14 @@ export default {
 
       return this.$dateFunctions.format(localDate, 'P');
     },
+    availableSushiStatuses() {
+      return [
+        { text: this.$t('institutions.sushi.untested'), value: 'untested' },
+        { text: this.$t('institutions.sushi.operational'), value: 'success' },
+        { text: this.$t('institutions.sushi.invalidCredentials'), value: 'unauthorized' },
+        { text: this.$t('error'), value: 'failed' },
+      ];
+    },
     tableHeaders() {
       return [
         {
@@ -510,6 +571,13 @@ export default {
           value: 'connection',
           align: 'right',
           width: '160px',
+          filter: (value) => {
+            if (this.filters.sushiStatuses.length === 0) {
+              return true;
+            }
+
+            return this.filters.sushiStatuses.includes(value?.status || 'untested');
+          },
         },
         {
           text: this.$t('institutions.sushi.updatedAt'),
@@ -538,10 +606,35 @@ export default {
     hasUntestedItems() {
       return this.untestedItems.length > 0;
     },
+    hasUnauthorizedItems() {
+      return this.unauthorizedItems.length > 0;
+    },
+    hasFailedItems() {
+      return this.failedItems.length > 0;
+    },
     untestedItems() {
-      return this.sushiItems.filter((item) => (
-        typeof item?.connection?.status !== 'string'
-      ));
+      return this.itemsByStatus.untested || [];
+    },
+    unauthorizedItems() {
+      return this.itemsByStatus.unauthorized || [];
+    },
+    failedItems() {
+      return this.itemsByStatus.failed || [];
+    },
+    operationalItems() {
+      return this.itemsByStatus.success || [];
+    },
+    itemsByStatus() {
+      return this.sushiItems.reduce((acc, item) => {
+        const status = item?.connection?.status || 'untested';
+
+        if (!Array.isArray(acc[status])) {
+          acc[status] = [];
+        }
+
+        acc[status].push(item);
+        return acc;
+      }, {});
     },
     testingConnection() {
       return Object.keys(this.loadingItems).length > 0;
@@ -640,6 +733,9 @@ export default {
     showSushiItemFiles(item) {
       this.$refs.sushiFiles.showFiles(item);
     },
+    filterByStatus(status) {
+      this.filters.sushiStatuses = [status];
+    },
     async refreshSushiItems() {
       if (!this.hasInstitution) { return; }