Navigation side bar (#1904)

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();
@@ -13,7 +14,7 @@
   <v-app class="fill-height">
     <div v-if="configStore.loadedConfig">
       <console-header />
-
+      <navigation-drawer v-if="$route.name !== 'home'" />
       <v-main class="main">
         <app-notification-provider>
           <router-view />

hermes-console/src/components/navigation-drawer/NavigationDrawer.vue

@@ -0,0 +1,130 @@
+<script setup lang="ts">
+  import { isAdmin } from '@/utils/roles-util';
+  import { useAppConfigStore } from '@/store/app-config/useAppConfigStore';
+  import { useAuthStore } from '@/store/auth/useAuthStore';
+  import { useRoles } from '@/composables/roles/use-roles/useRoles';
+  import { useRoute } from 'vue-router';
+
+  import { computed, ref } from 'vue';
+  import NavigationItem from '@/components/navigation-drawer/NavigationItem.vue';
+  const authStore = useAuthStore();
+  const isLoggedIn = computed(() => authStore.isUserAuthorized);
+  const userData = computed(() => authStore.userData);
+  const route = useRoute();
+  const routeName = computed(() => route.name);
+
+  const configStore = useAppConfigStore();
+  const roles = useRoles(null, null)?.roles;
+  const rail = ref(false);
+</script>
+
+<template>
+  <v-navigation-drawer :rail="rail" permanent @click="rail = false">
+    <template v-if="!isLoggedIn">
+      <v-list>
+        <v-list-item
+          :prepend-avatar="`https://alleavatar.allegrogroup.com/${userData.user_name}.jpg`"
+          :title="isLoggedIn ? userData.full_name : 'Logged out'"
+        >
+          <template v-slot:append>
+            <v-btn
+              icon="mdi-chevron-left"
+              variant="text"
+              @click.stop="rail = !rail"
+            ></v-btn>
+          </template>
+        </v-list-item>
+      </v-list>
+
+      <v-divider></v-divider>
+    </template>
+    <v-list density="compact" nav>
+      <navigation-item
+        icon="mdi-cog"
+        translation-key="homeView.links.console"
+        name="groups"
+        :current-route-name="routeName"
+      />
+
+      <v-list-group value="Favorites">
+        <template v-slot:activator="{ props }">
+          <navigation-item
+            v-bind="props"
+            prepend-icon="mdi-star"
+            translation-key="homeView.links.favorites"
+            name="favorites"
+            :readonly="true"
+          />
+        </template>
+
+        <navigation-item
+          translation-key="homeView.links.subscriptions"
+          name="favoriteSubscriptions"
+          :current-route-name="routeName"
+        />
+        <navigation-item
+          translation-key="homeView.links.topics"
+          name="favoriteTopics"
+          :current-route-name="routeName"
+        />
+      </v-list-group>
+      <navigation-item
+        icon="mdi-chart-bar"
+        translation-key="homeView.links.statistics"
+        name="stats"
+        :current-route-name="routeName"
+      />
+      <navigation-item
+        icon="mdi-magnify"
+        translation-key="homeView.links.search"
+        name="search"
+        :current-route-name="routeName"
+      />
+      <navigation-item
+        icon="mdi-chart-multiple"
+        translation-key="homeView.links.runtime"
+        name="runtime"
+        :external-url="configStore.loadedConfig.dashboard.metrics"
+      />
+      <navigation-item
+        icon="mdi-book-open-variant"
+        translation-key="homeView.links.documentation"
+        name="docs"
+        :external-url="configStore.loadedConfig.dashboard.docs"
+      />
+      <navigation-item
+        icon="mdi-currency-usd"
+        translation-key="homeView.links.costs"
+        name="costs"
+        :external-url="configStore.loadedConfig.costs.globalDetailsUrl"
+      />
+      <v-list-group value="Admin" v-if="isAdmin(roles)">
+        <template v-slot:activator="{ props }">
+          <navigation-item
+            v-bind="props"
+            translation-key="homeView.links.adminTools"
+            name="adminTools"
+            icon="mdi-security"
+            :readonly="true"
+          />
+        </template>
+
+        <navigation-item
+          translation-key="homeView.links.readiness"
+          name="readiness"
+          :current-route-name="routeName"
+        />
+        <navigation-item
+          translation-key="homeView.links.constraints"
+          name="constraints"
+          :current-route-name="routeName"
+        />
+        <navigation-item
+          translation-key="homeView.links.consistency"
+          name="consistency"
+          :current-route-name="routeName"
+        />
+      </v-list-group>
+    </v-list>
+  </v-navigation-drawer>
+</template>

hermes-console/src/components/navigation-drawer/NavigationItem.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+  import { defineProps } from 'vue';
+  import { useRouter } from 'vue-router';
+  const router = useRouter();
+
+  const props = defineProps<{
+    icon?: string;
+    translationKey: string;
+    name: string;
+    currentRouteName?: string;
+    readonly?: boolean;
+    externalUrl?: string;
+  }>();
+
+  function navigateToRoute() {
+    if (props.readonly || props.externalUrl) {
+      return;
+    }
+    router.push({ name: props.name });
+  }
+</script>
+
+<template>
+  <v-list-item
+    :prepend-icon="icon"
+    :title="!externalUrl ? $t(translationKey) : ''"
+    :active="currentRouteName === name"
+    :value="name"
+    @click="navigateToRoute"
+  >
+    <a v-if="externalUrl" :href="externalUrl" target="_blank">
+      <v-list-item-title>{{ $t(translationKey) }}</v-list-item-title>
+    </a>
+  </v-list-item>
+</template>
+
+<style scoped lang="scss">
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+</style>

hermes-console/src/i18n/en-US/index.ts

@@ -7,12 +7,18 @@ const en_US = {
       console: 'Console',
       favoriteTopics: 'Favorite topics',
       favoriteSubscriptions: 'Favorite subs',
+      topics: 'Topics',
+      subscriptions: 'Subscriptions',
       runtime: 'Runtime',
       statistics: 'Stats',
       search: 'Search',
       documentation: 'Docs',
       costs: 'Costs',
       adminTools: 'Admin tools',
+      favorites: 'Favorites',
+      readiness: 'Readiness',
+      constraints: 'Constraints',
+      consistency: 'Consistency',
     },
   },
   header: {

hermes-console/src/store/auth/useAuthStore.ts

@@ -78,8 +78,14 @@ export const useAuthStore = defineStore('auth', {
     },
   },
   getters: {
-    userData(state: AuthStoreState): { exp: number } {
-      return state.accessToken ? jwtDecode(state.accessToken) : { exp: 0 };
+    userData(state: AuthStoreState): {
+      exp: number;
+      full_name: string;
+      user_name: string;
+    } {
+      return state.accessToken
+        ? jwtDecode(state.accessToken)
+        : { exp: 0, full_name: '', user_name: '' };
     },
     isUserAuthorized(state: AuthStoreState): boolean {
       const expiresAt = this.userData.exp * 1000;