Browse Source

[frontend] Add support for showing versions and warehouse name in the left sidebar footer

This will show the warehouse name, image version and hue version if the corresponding attributes are set in the get_config API response ("vw_name", 'img_version" and "hue_version")

When any text is too long it'll hide the overflow and show an ellipsis, the complete value is shown on hover via the title attribute. The image version will take precedence over the hue version when both are set, the hue version will then be shown on hover.
Johan Åhlén 2 years ago
parent
commit
9b90d3f083

+ 23 - 10
desktop/core/src/desktop/js/components/sidebar/HueSidebar.vue

@@ -18,16 +18,19 @@
 
 
 <template>
 <template>
   <Sidebar
   <Sidebar
+    :active-item-name="activeItemName"
+    :drawer-topic="drawerTopic"
+    :help-drawer-children="helpDrawerChildren"
+    :help-drawer-item="helpDrawerItem"
+    :hue-version="hueVersion"
+    :img-version="imgVersion"
+    :is-collapsed="isCollapsed"
     :sidebar-items="sidebarItems"
     :sidebar-items="sidebarItems"
+    :use-drawer-for-help="false"
     :use-drawer-for-user="false"
     :use-drawer-for-user="false"
-    :user-drawer-item="userDrawerItem"
     :user-drawer-children="userDrawerChildren"
     :user-drawer-children="userDrawerChildren"
-    :use-drawer-for-help="false"
-    :help-drawer-item="helpDrawerItem"
-    :help-drawer-children="helpDrawerChildren"
-    :active-item-name="activeItemName"
-    :is-collapsed="isCollapsed"
-    :drawer-topic="drawerTopic"
+    :user-drawer-item="userDrawerItem"
+    :warehouse-name="warehouseName"
     @toggle-collapsed="toggleCollapsed"
     @toggle-collapsed="toggleCollapsed"
     @header-click="onHeaderClick"
     @header-click="onHeaderClick"
   />
   />
@@ -236,14 +239,20 @@
     data(): {
     data(): {
       sidebarItems: SidebarItem[];
       sidebarItems: SidebarItem[];
       activeItemName: string;
       activeItemName: string;
-      isCollapsed: boolean;
       drawerTopic: string | null;
       drawerTopic: string | null;
+      hueVersion: string | null;
+      imgVersion: string | null;
+      isCollapsed: boolean;
+      warehouseName: string | null;
     } {
     } {
       return {
       return {
-        sidebarItems: [],
         activeItemName: '',
         activeItemName: '',
+        drawerTopic: null,
+        hueVersion: null,
+        imgVersion: null,
         isCollapsed: getFromLocalStorage('hue.sidebar.collapse', true),
         isCollapsed: getFromLocalStorage('hue.sidebar.collapse', true),
-        drawerTopic: null
+        sidebarItems: [],
+        warehouseName: null
       };
       };
     },
     },
 
 
@@ -376,6 +385,10 @@
       hueConfigUpdated(clusterConfig: HueConfig): void {
       hueConfigUpdated(clusterConfig: HueConfig): void {
         const items: SidebarItem[] = [];
         const items: SidebarItem[] = [];
 
 
+        this.hueVersion = clusterConfig?.hue_version || null;
+        this.imgVersion = clusterConfig?.img_version || null;
+        this.warehouseName = clusterConfig?.vw_name || null;
+
         if (clusterConfig && clusterConfig.app_config) {
         if (clusterConfig && clusterConfig.app_config) {
           const favourite = clusterConfig.main_button_action;
           const favourite = clusterConfig.main_button_action;
           const appsItems: SidebarItem[] = [];
           const appsItems: SidebarItem[] = [];

+ 26 - 1
desktop/core/src/desktop/js/components/sidebar/Sidebar.vue

@@ -74,6 +74,14 @@
         :active-item-name="activeItemName"
         :active-item-name="activeItemName"
       />
       />
       <div class="sidebar-footer-bottom-row">
       <div class="sidebar-footer-bottom-row">
+        <div
+          v-if="!isCollapsed && (hueVersion || imgVersion || warehouseName)"
+          class="sidebar-footer-version-number"
+        >
+          <div v-if="warehouseName" :title="warehouseName">{{ warehouseName }}</div>
+          <div v-if="imgVersion" :title="footerVersionTitle">{{ imgVersion }}</div>
+          <div v-if="hueVersion && !imgVersion">{{ hueVersion }}</div>
+        </div>
         <BaseNavigationItem
         <BaseNavigationItem
           :css-classes="'sidebar-footer-collapse-btn'"
           :css-classes="'sidebar-footer-collapse-btn'"
           :item="{
           :item="{
@@ -155,7 +163,18 @@
         type: Array as PropType<SidebarAccordionSubItem[]>,
         type: Array as PropType<SidebarAccordionSubItem[]>,
         default: () => []
         default: () => []
       },
       },
-
+      hueVersion: {
+        type: String,
+        default: null
+      },
+      imgVersion: {
+        type: String,
+        default: null
+      },
+      warehouseName: {
+        type: String,
+        default: null
+      },
       activeItemName: {
       activeItemName: {
         type: String,
         type: String,
         required: true
         required: true
@@ -182,6 +201,12 @@
     },
     },
 
 
     computed: {
     computed: {
+      footerVersionTitle(): string | null {
+        if (this.imgVersion && this.hueVersion) {
+          return `${this.imgVersion} - ${this.hueVersion}`;
+        }
+        return null;
+      },
       helpItem(): SidebarAccordionItem | SidebarNavigationItem | null {
       helpItem(): SidebarAccordionItem | SidebarNavigationItem | null {
         if (this.helpDrawerItem != null) {
         if (this.helpDrawerItem != null) {
           const sharedProps = {
           const sharedProps = {

+ 6 - 0
desktop/core/src/desktop/js/components/sidebar/sidebar.scss

@@ -15,6 +15,7 @@
 // limitations under the License.
 // limitations under the License.
 
 
 @import '../styles/colors';
 @import '../styles/colors';
+@import '../styles/mixins';
 @import '../styles/variables';
 @import '../styles/variables';
 @import './variables';
 @import './variables';
 
 
@@ -376,8 +377,13 @@
   margin-left: $fluid-spacing-m;
   margin-left: $fluid-spacing-m;
   color: $sidebar-default-text-color;
   color: $sidebar-default-text-color;
   flex-grow: 1;
   flex-grow: 1;
+  font-family: Roboto Mono, Menlo, Monaco, Consolas, "Courier New", monospace;
   font-size: $font-size-sm;
   font-size: $font-size-sm;
   overflow: hidden;
   overflow: hidden;
+
+  > div {
+    @include nowrap-ellipsis;
+  }
 }
 }
 
 
 .sidebar-footer-collapse-btn {
 .sidebar-footer-collapse-btn {

+ 3 - 0
desktop/core/src/desktop/js/config/types.ts

@@ -83,6 +83,9 @@ export interface HueConfig extends GenericApiResponse {
     enable_sharing: boolean;
     enable_sharing: boolean;
     collect_usage: boolean;
     collect_usage: boolean;
   };
   };
+  hue_version?: string;
+  img_version?: string;
+  vw_name?: string;
 }
 }
 
 
 export interface Interpreter {
 export interface Interpreter {