From 98410504cba8e06ec01409977217d355f0aa9c6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Stypi=C5=84ski?= <adrian.stypinski@gmail.com>
Date: Thu, 12 Dec 2024 18:08:42 +0100
Subject: [PATCH 1/2] Changed main navigation UI

---
 hermes-console/src/App.vue                    |  5 +-
 .../components/console-alert/ConsoleAlert.vue |  2 +-
 .../console-footer/ConsoleFooter.vue          |  2 +-
 .../console-header/ConsoleHeader.vue          | 16 +++-
 .../src/components/costs-card/CostsCard.vue   |  2 +-
 .../key-value-card/KeyValueCard.vue           |  2 +-
 .../navigation-drawer/NavigationDrawer.vue    | 78 +++++++++++++++++++
 hermes-console/src/main.ts                    |  3 +-
 .../views/subscription/SubscriptionView.vue   | 22 ++++--
 .../subscription/filters-card/FiltersCard.vue |  2 +-
 .../subscription/headers-card/HeadersCard.vue |  2 +-
 .../ManageMessagesCard.vue                    |  2 +-
 .../SubscriptionMetadata.vue                  |  2 +-
 .../UndeliveredMessagesCard.vue               | 11 +--
 14 files changed, 122 insertions(+), 29 deletions(-)
 create mode 100644 hermes-console/src/components/navigation-drawer/NavigationDrawer.vue

diff --git a/hermes-console/src/App.vue b/hermes-console/src/App.vue
index cc14e88436..91c976feb8 100644
--- 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
index 8b71ad7936..596365518a 100644
--- 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
index 63ecbb6910..e9dae62fbd 100644
--- 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
index f03dd11218..531bf3e377 100644
--- 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
index 0526ba9d62..a4fae72dd6 100644
--- 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
index 5033e5efb4..573297ddd4 100644
--- 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
new file mode 100644
index 0000000000..e41b13778b
--- /dev/null
+++ 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
index ab1307eeee..fd0aa40752 100644
--- 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
index f5bd73b56f..15387384a7 100644
--- 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
index 2dea862e30..55aa0b9953 100644
--- 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
index 8e891f07e3..8c1b468607 100644
--- 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
index 77dd672aef..9ecc2a57ae 100644
--- 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
index d74866a21c..edceffc1a4 100644
--- 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
index 54956c8f1b..79928bab0c 100644
--- 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>

From c781e6ed09a0261372c5e276056c335f8e21e4b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Stypi=C5=84ski?= <adrian.stypinski@gmail.com>
Date: Wed, 8 Jan 2025 09:54:19 +0100
Subject: [PATCH 2/2] Fixed non higlighting correct navigation tab

---
 .../console-header/ConsoleHeader.vue          | 11 ---
 hermes-console/src/router/index.ts            | 93 +++++++++++--------
 2 files changed, 52 insertions(+), 52 deletions(-)

diff --git a/hermes-console/src/components/console-header/ConsoleHeader.vue b/hermes-console/src/components/console-header/ConsoleHeader.vue
index 531bf3e377..515a4d70cc 100644
--- a/hermes-console/src/components/console-header/ConsoleHeader.vue
+++ b/hermes-console/src/components/console-header/ConsoleHeader.vue
@@ -58,17 +58,6 @@
           "
         />
       </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
diff --git a/hermes-console/src/router/index.ts b/hermes-console/src/router/index.ts
index 50603c1e2b..491cb69e63 100644
--- a/hermes-console/src/router/index.ts
+++ b/hermes-console/src/router/index.ts
@@ -16,8 +16,35 @@ const router = createRouter({
     },
     {
       path: '/ui/groups',
-      name: 'groups',
-      component: () => import('@/views/groups/GroupsView.vue'),
+      children: [
+        {
+          path: '',
+          name: 'groups',
+          component: () => import('@/views/groups/GroupsView.vue'),
+        },
+        {
+          path: ':groupId',
+          name: 'groupTopics',
+          component: () => import('@/views/group-topics/GroupTopicsView.vue'),
+        },
+        {
+          path: ':groupId/topics/:topicName',
+          name: 'topic',
+          component: () => import('@/views/topic/TopicView.vue'),
+        },
+        {
+          path: ':groupId/topics/:topicId/subscriptions/:subscriptionId',
+          name: 'subscription',
+          component: () =>
+            import('@/views/subscription/SubscriptionView.vue'),
+        },
+        {
+          path: ':groupId/topics/:topicId/subscriptions/:subscriptionId/diagnostics/',
+          name: 'consumerGroups',
+          component: () =>
+            import('@/views/admin/consumer-groups/ConsumerGroupsView.vue'),
+        },
+      ],
     },
     {
       path: '/ui/favorite-topics',
@@ -30,21 +57,6 @@ const router = createRouter({
       component: () =>
         import('@/views/favorite/subscriptions/FavoriteSubscriptionsView.vue'),
     },
-    {
-      path: '/ui/groups/:groupId',
-      name: 'groupTopics',
-      component: () => import('@/views/group-topics/GroupTopicsView.vue'),
-    },
-    {
-      path: '/ui/groups/:groupId/topics/:topicName',
-      name: 'topic',
-      component: () => import('@/views/topic/TopicView.vue'),
-    },
-    {
-      path: '/ui/groups/:groupId/topics/:topicId/subscriptions/:subscriptionId',
-      name: 'subscription',
-      component: () => import('@/views/subscription/SubscriptionView.vue'),
-    },
     {
       path: '/ui/readiness',
       name: 'readiness',
@@ -57,30 +69,29 @@ const router = createRouter({
     },
     {
       path: '/ui/consistency',
-      name: 'consistency',
-      component: () => import('@/views/admin/consistency/ConsistencyView.vue'),
-    },
-    {
-      path: '/ui/consistency/:groupId',
-      name: 'groupConsistency',
-      component: () =>
-        import(
-          '@/views/admin/consistency/inconsistent-group/InconsistentGroup.vue'
-        ),
-    },
-    {
-      path: '/ui/consistency/:groupId/topics/:topicId',
-      name: 'topicConsistency',
-      component: () =>
-        import(
-          '@/views/admin/consistency/inconsistent-topic/InconsistentTopic.vue'
-        ),
-    },
-    {
-      path: '/ui/groups/:groupId/topics/:topicId/subscriptions/:subscriptionId/diagnostics/',
-      name: 'consumerGroups',
-      component: () =>
-        import('@/views/admin/consumer-groups/ConsumerGroupsView.vue'),
+      children: [
+        {
+          path: '',
+          name: 'consistency',
+          component: () => import('@/views/admin/consistency/ConsistencyView.vue'),
+        },
+        {
+          path: ':groupId',
+          name: 'groupConsistency',
+          component: () =>
+            import(
+              '@/views/admin/consistency/inconsistent-group/InconsistentGroup.vue'
+            ),
+        },
+        {
+          path: ':groupId/topics/:topicId',
+          name: 'topicConsistency',
+          component: () =>
+            import(
+              '@/views/admin/consistency/inconsistent-topic/InconsistentTopic.vue'
+            ),
+        },
+      ],
     },
     {
       path: '/ui/stats',