UI: Keyboard label shortcut

ui/package.json

@@ -42,6 +42,8 @@
     "antd-theme-webpack-plugin": "^1.3.9",
     "axios": "^0.21.1",
     "babel-plugin-require-context-hook": "^1.0.0",
+    "custom-event-polyfill": "^1.0.7",
+    "element-matches": "^0.1.2",
     "core-js": "^3.21.1",
     "enquire.js": "^2.1.6",
     "js-cookie": "^2.2.1",

ui/public/locales/en.json

@@ -48,7 +48,6 @@
 "label.access": "Access",
 "label.acess.kubernetes.nodes": "Access Kubernetes nodes",
 "label.accesskey": "Access key",
-"label.acess.kubernetes.nodes": "Access Kubernetes Nodes",
 "label.account": "Account",
 "label.account.and.security.group": "Account - security group",
 "label.account.details": "Account details",
@@ -1288,6 +1287,7 @@
 "label.key": "Key",
 "label.keyboard": "Keyboard language",
 "label.keyboardtype": "Keyboard type",
+"label.keyboard.show": "Show shortkeys [F]",
 "label.keypair": "SSH key pair",
 "label.keypairs": "SSH key pair(s)",
 "label.kubeconfig.cluster": "Kubernetes cluster config",

ui/src/components/header/Logo.vue

@@ -24,7 +24,10 @@
         height: $config.theme['@logo-height']
       }"
       :src="$config.logo"
+      v-shortkey="['f']"
+      @shortkey="toggleShowShortkey"
       class="logo-image" />
+    <span class="none" v-shortkey="['backspace']" @shortkey="goBack"></span>
   </div>
 </template>
 
@@ -45,6 +48,16 @@ export default {
       default: true,
       required: false
     }
+  },
+  methods: {
+    toggleShowShortkey () {
+      this.$store.dispatch('SetShowKeyboardShortkeys', !this.$store.getters.showshortkeys)
+    },
+    goBack () {
+      if (this.$route.path.includes('/')) {
+        this.$router.go(-1)
+      }
+    }
   }
 }
 </script>
@@ -67,5 +80,8 @@ export default {
   display: inline-block;
   vertical-align: middle;
 }
+.none {
+  display: none;
+}
 
 </style>

ui/src/components/header/UserMenu.vue

@@ -17,7 +17,6 @@
 
 <template>
   <div class="user-menu">
-
     <translation-menu class="action"/>
     <header-notice class="action"/>
     <label class="user-menu-server-info action" v-if="$config.multipleServer">
@@ -52,15 +51,23 @@
                 <a-switch :checked="$store.getters.usebrowsertimezone" />
             </a-menu-item>
           </a>
-          <a :href="$config.docBase" target="_blank">
+          <a @click="toggleShowShortkey">
             <a-menu-item class="user-menu-item" key="2">
+              <a-icon v-if="$store.getters.showshortkeys" class="user-menu-item-icon" type="eye"/>
+              <a-icon v-else class="user-menu-item-icon" type="eye-invisible"/>
+              <span class="user-menu-item-name" style="margin-right: 5px">{{ $t('label.keyboard.show') }}</span>
+              <a-switch :checked="$store.getters.showshortkeys"/>
+            </a-menu-item>
+          </a>
+          <a :href="$config.docBase" target="_blank">
+            <a-menu-item class="user-menu-item" key="3">
               <QuestionCircleOutlined class="user-menu-item-icon" />
               <span class="user-menu-item-name">{{ $t('label.help') }}</span>
             </a-menu-item>
           </a>
           <a-menu-divider/>
           <a href="javascript:;" @click="handleLogout">
-            <a-menu-item class="user-menu-item" key="3">
+            <a-menu-item class="user-menu-item" key="4">
               <LogoutOutlined class="user-menu-item-icon" />
               <span class="user-menu-item-name">{{ $t('label.logout') }}</span>
             </a-menu-item>
@@ -124,6 +131,9 @@ export default {
     toggleUseBrowserTimezone () {
       this.$store.dispatch('SetUseBrowserTimezone', !this.$store.getters.usebrowsertimezone)
     },
+    toggleShowShortkey () {
+      this.$store.dispatch('SetShowKeyboardShortkeys', !this.$store.getters.showshortkeys)
+    },
     async getIcon () {
       await this.fetchResourceIcon(this.$store.getters.userInfo.id)
     },

ui/src/components/menu/SideMenu.vue

@@ -18,7 +18,7 @@
 <template>
   <a-layout-sider
     :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
-    width="256px"
+    width="265px"
     collapsible
     v-model:collapsed="isCollapsed"
     :trigger="null">

ui/src/components/menu/index.js

@@ -15,5 +15,6 @@
 // specific language governing permissions and limitations
 // under the License.
 
+// import SMenu from './menu.vue'
 import SMenu from './SMenu.vue'
 export default SMenu

ui/src/components/menu/menu.vue

@@ -0,0 +1,270 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+<script>
+
+import Menu from 'ant-design-vue/es/menu'
+import Icon from 'ant-design-vue/es/icon'
+
+const { Item, SubMenu } = Menu
+
+export default {
+  name: 'SMenu',
+  props: {
+    menu: {
+      type: Array,
+      required: true
+    },
+    theme: {
+      type: String,
+      required: false,
+      default: 'dark'
+    },
+    mode: {
+      type: String,
+      required: false,
+      default: 'inline'
+    },
+    collapsed: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  data () {
+    return {
+      openKeys: [],
+      selectedKeys: [],
+      cachedOpenKeys: [],
+      cachedPath: null
+    }
+  },
+  computed: {
+    rootSubmenuKeys: vm => {
+      const keys = []
+      vm.menu.forEach(item => keys.push(item.path))
+      return keys
+    }
+  },
+  created () {
+    this.updateMenu()
+  },
+  watch: {
+    collapsed (val) {
+      if (val) {
+        this.cachedOpenKeys = this.openKeys.concat()
+        this.openKeys = []
+      } else {
+        this.openKeys = this.cachedOpenKeys
+      }
+    },
+    $route: function () {
+      this.updateMenu()
+    }
+  },
+  methods: {
+    // select menu item
+    onOpenChange (openKeys) {
+      if (this.mode === 'horizontal') {
+        this.openKeys = openKeys
+        return
+      }
+      const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key))
+      if (!this.rootSubmenuKeys.includes(latestOpenKey)) {
+        this.openKeys = openKeys
+      } else {
+        this.openKeys = latestOpenKey ? [latestOpenKey] : []
+      }
+    },
+    updateMenu () {
+      const routes = this.$route.matched.concat()
+
+      if (routes.length >= 4 && this.$route.meta.hidden) {
+        routes.pop()
+        this.selectedKeys = [routes[2].path]
+      } else {
+        this.selectedKeys = [routes.pop().path]
+      }
+
+      const openKeys = []
+      if (this.mode === 'inline') {
+        routes.forEach(item => {
+          openKeys.push(item.path)
+        })
+      }
+
+      this.cachedPath = this.selectedKeys[0]
+      this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
+    },
+
+    // render
+    renderItem (menu) {
+      if (!menu.hidden) {
+        return menu.children && !menu.hideChildrenInMenu ? this.renderSubMenu(menu) : this.renderMenuItem(menu)
+      }
+      return null
+    },
+    renderMenuItem (menu) {
+      const target = menu.meta.target || null
+      const props = {
+        to: { name: menu.name },
+        target: target
+      }
+      const on = {
+        shortkey: () => {
+          const show = this.$store.getters.showshortkeys
+          if (this.cachedPath === menu.path) {
+            return
+          }
+
+          if (menu.path) {
+            this.cachedPath = menu.path
+            setTimeout(() => {
+              this.$store.dispatch('SetShowKeyboardShortkeys', false)
+              this.$router.push({ path: menu.path })
+            })
+          }
+          setTimeout(() => this.$store.dispatch('SetShowKeyboardShortkeys', show), 500)
+        }
+      }
+      return (
+        <Item vShortkey={menu.meta.shortKey} {...{ key: menu.path, on: on }} >
+          <router-link {...{ props }}>
+            {this.renderIcon(menu.meta.icon, menu)}
+            <span>{this.$t(menu.meta.title)}</span>
+            {
+              this.$store.getters.showshortkeys ? (
+                menu.meta.shortKey ? (
+                  <span class="show-shortkey">
+                    {menu.meta.shortKey[0]}{menu.meta.shortKey[1] ? '+' + menu.meta.shortKey[1] : ''}
+                  </span>
+                ) : (
+                  ''
+                )
+              ) : (
+                ''
+              )
+            }
+          </router-link>
+        </Item>
+      )
+    },
+    renderSubMenu (menu) {
+      const itemArr = []
+      const on = {
+        click: () => {
+          this.handleClickParentMenu(menu)
+        },
+        shortkey: () => {
+          this.handleClickParentMenu(menu)
+        }
+      }
+      if (!menu.hideChildrenInMenu) {
+        menu.children.forEach(item => itemArr.push(this.renderItem(item)))
+      }
+      return (
+        <SubMenu {...{ key: menu.path }}>
+          <span slot="title">
+            {this.renderIcon(menu.meta.icon, menu)}
+            <span vShortkey={menu.meta.shortKey} {...{ on: on }}>{this.$t(menu.meta.title)}</span>
+            {
+              this.$store.getters.showshortkeys ? (
+                menu.meta.shortKey ? (
+                  <span class="show-shortkey">
+                    {menu.meta.shortKey[0]}{menu.meta.shortKey[1] ? '+' + menu.meta.shortKey[1] : ''}
+                  </span>
+                ) : (
+                  ''
+                )
+              ) : (
+                ''
+              )
+            }
+          </span>
+          {itemArr}
+        </SubMenu>
+      )
+    },
+    renderIcon (icon, menuItem) {
+      if (icon === 'none' || icon === undefined) {
+        return null
+      }
+      const props = {}
+      const on = {
+        click: () => {
+          this.handleClickParentMenu(menuItem)
+        }
+      }
+      typeof (icon) === 'object' ? props.component = icon : props.type = icon
+      return (
+        <Icon {... { props, on } } />
+      )
+    },
+    handleClickParentMenu (menuItem) {
+      if (this.cachedPath === menuItem.redirect) {
+        return
+      }
+      if (menuItem.redirect) {
+        this.cachedPath = menuItem.redirect
+        setTimeout(() => this.$router.push({ path: menuItem.path }))
+      }
+    }
+  },
+  render () {
+    const { mode, theme, menu } = this
+    const props = {
+      mode: mode,
+      theme: theme,
+      openKeys: this.openKeys
+    }
+    const on = {
+      select: obj => {
+        this.selectedKeys = obj.selectedKeys
+        this.$emit('select', obj)
+      },
+      openChange: this.onOpenChange
+    }
+    const menuTree = menu.map(item => {
+      if (item.hidden) {
+        return null
+      }
+      return this.renderItem(item)
+    })
+    // {...{ props, on: on }}
+    return (
+      <Menu vModel={this.selectedKeys} {...{ props, on }} >
+        {menuTree}
+      </Menu>
+    )
+  }
+}
+</script>
+<style scoped>
+  .show-shortkey {
+    font-size: 10px;
+    background-color: rgba(0, 0, 0, 0.9);
+    padding: 2px 6px 2px 6px;
+    border-radius: 4px;
+    color: #e9e9e9;
+    margin: 5px;
+    border: solid .1em transparent;
+    text-shadow: 2px 2px 2px rgba(255,255,255,0.1);
+    box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.8), -1px -1px 1px  rgba(0, 0, 0, 0.9);
+  }
+  .none {
+    display: none;
+  }
+</style>