Changed main navigation UI

allegro · Dec 12, 2024 · 9841050 · 9841050
1 parent 1b730c2
commit 9841050
Show file tree

Hide file tree

Showing 14 changed files with 122 additions and 29 deletions.
diff --git a/hermes-console/src/App.vue b/hermes-console/src/App.vue
@@ -4,6 +4,7 @@
   import AppNotificationProvider from '@/components/app-notification/AppNotificationProvider.vue';
   import ConsoleFooter from '@/components/console-footer/ConsoleFooter.vue';
   import ConsoleHeader from '@/components/console-header/ConsoleHeader.vue';
+  import NavigationDrawer from './components/navigation-drawer/NavigationDrawer.vue';
 
   const configStore = useAppConfigStore();
   configStore.loadConfig();
@@ -14,6 +15,8 @@
     <div v-if="configStore.loadedConfig">
       <console-header />
 
+      <navigation-drawer />
+
       <v-main class="main">
         <app-notification-provider>
           <router-view />
@@ -28,7 +31,7 @@
 <style scoped lang="scss">
   .main {
     margin: 0 auto;
-    max-width: 1300px;
+    max-width: 1800px;
     width: 100%;
   }
 </style>
diff --git a/hermes-console/src/components/console-alert/ConsoleAlert.vue b/hermes-console/src/components/console-alert/ConsoleAlert.vue
@@ -13,9 +13,9 @@
   <v-alert
     :title="props.title ?? ''"
     :text="props.text"
-    variant="elevated"
     :type="props.type"
     border="start"
+    variant="flat"
     :icon="icon ?? `\$${type}`"
   >
     <a

diff --git a/hermes-console/src/components/console-footer/ConsoleFooter.vue b/hermes-console/src/components/console-footer/ConsoleFooter.vue
@@ -13,7 +13,7 @@
 </script>
 
 <template>
-  <v-footer app absolute>
+  <v-footer app absolute color="background">
     <v-row justify="center" no-gutters>
       <v-btn
         v-for="link in links"

diff --git a/hermes-console/src/components/console-header/ConsoleHeader.vue b/hermes-console/src/components/console-header/ConsoleHeader.vue
@@ -29,7 +29,7 @@
 </script>
 
 <template>
-  <v-app-bar :elevation="2" density="compact">
+  <v-app-bar :elevation="0" density="compact" color="background">
     <div class="header">
       <!-- TODO: navigate to home -->
       <div class="header-left">
@@ -58,7 +58,18 @@
           "
         />
       </div>
-      <div>
+      <div class="d-flex flex-grow-1 align-center justify-center">
+        <v-btn
+          variant="outlined"
+          rounded
+          prepend-icon="mdi-magnify"
+          color="medium-emphasis"
+          min-width="400px"
+          class="text-capitalize"
+          >Press / to search
+        </v-btn>
+      </div>
+      <div class="d-flex align-center ga-2 pr-2">
         <theme-switch />
         <v-btn
           v-if="configStore.loadedConfig.auth.oauth.enabled && !isLoggedIn"
@@ -76,6 +87,7 @@
         >
           {{ t('header.logout') }}
         </v-btn>
+        <v-avatar color="grey" size="small"><span>G</span></v-avatar>
       </div>
     </div>
   </v-app-bar>

diff --git a/hermes-console/src/components/costs-card/CostsCard.vue b/hermes-console/src/components/costs-card/CostsCard.vue
@@ -6,7 +6,7 @@
 </script>
 
 <template>
-  <v-card>
+  <v-card border flat>
     <template #title>
       <div class="d-flex justify-space-between">
         <p class="font-weight-bold">

diff --git a/hermes-console/src/components/key-value-card/KeyValueCard.vue b/hermes-console/src/components/key-value-card/KeyValueCard.vue
@@ -7,7 +7,7 @@
 </script>
 
 <template>
-  <v-card>
+  <v-card border flat>
     <template #title>
       <div class="d-flex justify-space-between">
         <p class="font-weight-bold">

diff --git a/hermes-console/src/components/navigation-drawer/NavigationDrawer.vue b/hermes-console/src/components/navigation-drawer/NavigationDrawer.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+  const navigationGroups = [
+    {
+      group: 'Console',
+      items: [
+        { title: 'Home', icon: 'mdi-home', to: '/ui' },
+        { title: 'Groups', icon: 'mdi-file-tree', to: '/ui/groups' },
+        {
+          title: 'Favorite Topics',
+          icon: 'mdi-file-table-box-outline',
+          to: '/ui/favorite-topics',
+        },
+        {
+          title: 'Favorite Subscriptions',
+          icon: 'mdi-account-arrow-down-outline',
+          to: '/ui/favorite-subscriptions',
+        },
+      ],
+    },
+    {
+      group: 'Monitoring',
+      items: [
+        { title: 'Statistics', icon: 'mdi-chart-box-outline', to: '/ui/stats' },
+        { title: 'Runtime', icon: 'mdi-chart-multiple', to: '/ui/runtime' },
+        { title: 'Costs', icon: 'mdi-finance', to: '/ui/costs' },
+      ],
+    },
+    {
+      group: 'Admin',
+      items: [
+        {
+          title: 'Consistency',
+          icon: 'mdi-chart-histogram',
+          to: '/ui/consistency',
+        },
+        { title: 'Constraints', icon: 'mdi-cogs', to: '/ui/constraints' },
+        {
+          title: 'Readiness',
+          icon: 'mdi-arrow-right-drop-circle-outline',
+          to: '/ui/readiness',
+        },
+      ],
+    },
+  ];
+</script>
+
+<template>
+  <v-navigation-drawer floating color="background">
+    <v-list density="compact" nav slim active-color="accent">
+      <template
+        v-for="(navigationGroup, navigationGroupIndex) in navigationGroups"
+        :key="navigationGroupIndex"
+      >
+        <v-list-subheader class="text-subtitle-2 font-weight-bold">{{
+          navigationGroup.group
+        }}</v-list-subheader>
+
+        <v-list-item
+          v-for="(item, itemIndex) in navigationGroup.items"
+          :key="itemIndex"
+          :to="item.to"
+        >
+          <template v-slot:prepend>
+            <v-icon :icon="item.icon" />
+          </template>
+
+          <v-list-item-title>{{ item.title }}</v-list-item-title>
+        </v-list-item>
+        <v-divider
+          v-if="navigationGroupIndex + 1 < navigationGroups.length"
+          class="mt-3 mb-3"
+        />
+      </template>
+    </v-list>
+  </v-navigation-drawer>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/hermes-console/src/main.ts b/hermes-console/src/main.ts
@@ -19,7 +19,7 @@ const vuetify = createVuetify({
           secondary: '#144c71',
           accent: '#1c65a1',
           error: '#ff5252',
-          background: '#f5f5f5',
+          background: '#ffffff',
         },
       },
       dark: {
@@ -28,6 +28,7 @@ const vuetify = createVuetify({
           secondary: '#144c71',
           accent: '#0a3040',
           error: '#ff5252',
+          background: '#212121',
         },
       },
     },

diff --git a/hermes-console/src/views/subscription/SubscriptionView.vue b/hermes-console/src/views/subscription/SubscriptionView.vue
@@ -124,6 +124,7 @@
     },
     {
       title: subscriptionId,
+      active: true,
     },
   ];
 
@@ -229,13 +230,6 @@
             @retransmit="onRetransmit"
             @skipAllMessages="skipAllMessages"
           />
-          <last-undelivered-message
-            v-if="
-              subscriptionLastUndeliveredMessage &&
-              isSubscriptionOwnerOrAdmin(roles)
-            "
-            :last-undelivered="subscriptionLastUndeliveredMessage"
-          />
         </v-col>
         <v-col md="6">
           <properties-card v-if="subscription" :subscription="subscription" />
@@ -253,6 +247,11 @@
             v-if="!!subscription && subscription.headers.length > 0"
             :headers="subscription?.headers"
           />
+        </v-col>
+      </v-row>
+
+      <v-row dense>
+        <v-col md="7">
           <undelivered-messages-card
             v-if="
               subscriptionUndeliveredMessages &&
@@ -262,6 +261,15 @@
             :undelivered-messages="subscriptionUndeliveredMessages"
           />
         </v-col>
+        <v-col md="5">
+          <last-undelivered-message
+            v-if="
+              subscriptionLastUndeliveredMessage &&
+              isSubscriptionOwnerOrAdmin(roles)
+            "
+            :last-undelivered="subscriptionLastUndeliveredMessage"
+          />
+        </v-col>
       </v-row>
     </template>
   </v-container>

diff --git a/hermes-console/src/views/subscription/filters-card/FiltersCard.vue b/hermes-console/src/views/subscription/filters-card/FiltersCard.vue
@@ -25,7 +25,7 @@
 </script>
 
 <template>
-  <v-card class="mb-2">
+  <v-card class="mb-2" border flat>
     <template #title>
       <p class="font-weight-bold">
         {{ $t('subscription.filtersCard.title') }}

diff --git a/hermes-console/src/views/subscription/headers-card/HeadersCard.vue b/hermes-console/src/views/subscription/headers-card/HeadersCard.vue
@@ -7,7 +7,7 @@
 </script>
 
 <template>
-  <v-card class="mb-2">
+  <v-card class="mb-2" border flat>
     <template #title>
       <p class="font-weight-bold">
         {{ $t('subscription.headersCard.title') }}

diff --git a/hermes-console/src/views/subscription/manage-messages-card/ManageMessagesCard.vue b/hermes-console/src/views/subscription/manage-messages-card/ManageMessagesCard.vue
@@ -87,7 +87,7 @@
     @action="skipMessages"
     @cancel="closeSkipAllMessagesDialog"
   />
-  <v-card>
+  <v-card border flat>
     <template #title>
       <p class="font-weight-bold">
         {{ $t('subscription.manageMessagesCard.title') }}

diff --git a/hermes-console/src/views/subscription/subscription-metadata/SubscriptionMetadata.vue b/hermes-console/src/views/subscription/subscription-metadata/SubscriptionMetadata.vue
@@ -56,7 +56,7 @@
 </script>
 
 <template>
-  <v-card density="compact">
+  <v-card density="compact" border flat>
     <div class="d-flex justify-end mr-4 mb-1">
       <v-dialog
         v-model="showSubscriptionEditForm"

diff --git a/hermes-console/src/views/subscription/undelivered-messages-card/UndeliveredMessagesCard.vue b/hermes-console/src/views/subscription/undelivered-messages-card/UndeliveredMessagesCard.vue
@@ -8,7 +8,7 @@
 </script>
 
 <template>
-  <v-card class="mb-2">
+  <v-card class="mb-2" border flat>
     <template #title>
       <p class="font-weight-bold">
         {{ $t('subscription.undeliveredMessagesCard.title') }}
@@ -32,7 +32,6 @@
           <th class="text-left">
             {{ $t('subscription.undeliveredMessagesCard.timestamp') }}
           </th>
-          <th class="text-left"></th>
         </tr>
       </thead>
       <tbody>
@@ -45,14 +44,6 @@
           <td>{{ message.status }}</td>
           <td>{{ message.reason }}</td>
           <td>{{ formatTimestampMillis(message.timestamp) }}</td>
-          <td>
-            <v-btn
-              density="compact"
-              icon="mdi-magnify"
-              size="small"
-              variant="flat"
-            />
-          </td>
         </tr>
       </tbody>
     </v-table>