浏览代码

[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 年之前
父节点
当前提交
9b90d3f083

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

@@ -18,16 +18,19 @@
 
 <template>
   <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"
+    :use-drawer-for-help="false"
     :use-drawer-for-user="false"
-    :user-drawer-item="userDrawerItem"
     :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"
     @header-click="onHeaderClick"
   />
@@ -236,14 +239,20 @@
     data(): {
       sidebarItems: SidebarItem[];
       activeItemName: string;
-      isCollapsed: boolean;
       drawerTopic: string | null;
+      hueVersion: string | null;
+      imgVersion: string | null;
+      isCollapsed: boolean;
+      warehouseName: string | null;
     } {
       return {
-        sidebarItems: [],
         activeItemName: '',
+        drawerTopic: null,
+        hueVersion: null,
+        imgVersion: null,
         isCollapsed: getFromLocalStorage('hue.sidebar.collapse', true),
-        drawerTopic: null
+        sidebarItems: [],
+        warehouseName: null
       };
     },
 
@@ -376,6 +385,10 @@
       hueConfigUpdated(clusterConfig: HueConfig): void {
         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) {
           const favourite = clusterConfig.main_button_action;
           const appsItems: SidebarItem[] = [];

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

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

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

@@ -15,6 +15,7 @@
 // limitations under the License.
 
 @import '../styles/colors';
+@import '../styles/mixins';
 @import '../styles/variables';
 @import './variables';
 
@@ -376,8 +377,13 @@
   margin-left: $fluid-spacing-m;
   color: $sidebar-default-text-color;
   flex-grow: 1;
+  font-family: Roboto Mono, Menlo, Monaco, Consolas, "Courier New", monospace;
   font-size: $font-size-sm;
   overflow: hidden;
+
+  > div {
+    @include nowrap-ellipsis;
+  }
 }
 
 .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;
     collect_usage: boolean;
   };
+  hue_version?: string;
+  img_version?: string;
+  vw_name?: string;
 }
 
 export interface Interpreter {