Hermes console redesign

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>

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

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"

hermes-console/src/components/console-header/ConsoleHeader.vue

@@ -33,7 +33,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">
@@ -64,7 +64,7 @@
         <v-divider vertical v-if="knownEnvironments.length > 0"></v-divider>
         <environment-switch :known-environments="knownEnvironments" />
       </div>
-      <div>
+      <div class="d-flex align-center ga-2 pr-2">
         <theme-switch />
         <v-btn
           v-if="configStore.loadedConfig.auth.oauth.enabled && !isLoggedIn"
@@ -82,6 +82,7 @@
         >
           {{ t('header.logout') }}
         </v-btn>
+        <v-avatar color="grey" size="small"><span>G</span></v-avatar>
       </div>
     </div>
   </v-app-bar>

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">

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">

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>

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',
         },
       },
     },

hermes-console/src/router/index.ts

@@ -16,8 +16,35 @@
     },
     {
       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 @@
       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',
@@ -63,30 +75,29 @@
     },
     {
       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',

hermes-console/src/views/subscription/SubscriptionView.vue

@@ -125,6 +125,7 @@
     },
     {
       title: subscriptionId,
+      active: true,
     },
   ];
 
@@ -231,13 +232,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" />
@@ -256,6 +250,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 &&
@@ -265,6 +264,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>

hermes-console/src/views/subscription/filters-card/FiltersCard.vue

@@ -27,7 +27,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') }}

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') }}

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') }}

hermes-console/src/views/subscription/subscription-metadata/SubscriptionMetadata.vue

@@ -57,7 +57,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"