ui: use ssh keypair uuid for listing (#6616)

Addresses #6569

Use uuid to list SSH keypair wherever uuid is available.

Signed-off-by: Abhishek Kumar <abhishek.mrt22@gmail.com>

ui/src/components/view/ListView.vue

@@ -98,7 +98,7 @@
         </span>
 
         <span v-if="record.hasannotations">
-          <span v-if="record.id && $route.path !== '/ssh'">
+          <span v-if="record.id">
             <router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>
             <router-link :to="{ path: $route.path + '/' + record.id, query: { tab: 'comments' } }"><message-filled style="padding-left: 10px" size="small"/></router-link>
           </span>
@@ -110,7 +110,7 @@
           <router-link :to="{ path: $route.path + '/' + record.name }" v-else>{{ $t(text.toLowerCase()) }}</router-link>
         </span>
         <span v-else>
-          <router-link :to="{ path: $route.path + '/' + record.id }" v-if="record.id && $route.path !== '/ssh'">{{ text }}</router-link>
+          <router-link :to="{ path: $route.path + '/' + record.id }" v-if="record.id">{{ text }}</router-link>
           <router-link :to="{ path: $route.path + '/' + record.name }" v-else>{{ text }}</router-link>
         </span>
       </span>

ui/src/main.js

@@ -34,6 +34,7 @@ import {
   showIconPlugin,
   resourceTypePlugin,
   fileSizeUtilPlugin,
+  genericUtilPlugin,
   localesPlugin
 } from './utils/plugins'
 import { VueAxios } from './utils/request'
@@ -49,6 +50,7 @@ vueApp.use(showIconPlugin)
 vueApp.use(resourceTypePlugin)
 vueApp.use(fileSizeUtilPlugin)
 vueApp.use(localesPlugin)
+vueApp.use(genericUtilPlugin)
 vueApp.use(extensions)
 vueApp.use(directives)
 

ui/src/utils/plugins.js

@@ -464,3 +464,12 @@ export const fileSizeUtilPlugin = {
     }
   }
 }
+
+export const genericUtilPlugin = {
+  install (app) {
+    app.config.globalProperties.$isValidUuid = function (uuid) {
+      const regexExp = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/gi
+      return regexExp.test(uuid)
+    }
+  }
+}

ui/src/views/AutogenView.vue

@@ -851,8 +851,10 @@ export default {
       if (this.$route.params && this.$route.params.id) {
         params.id = this.$route.params.id
         if (['listSSHKeyPairs'].includes(this.apiName)) {
-          delete params.id
-          params.name = this.$route.params.id
+          if (!this.$isValidUuid(params.id)) {
+            delete params.id
+            params.name = this.$route.params.id
+          }
         }
         if (['listPublicIpAddresses'].includes(this.apiName)) {
           params.allocatedonly = false

ui/tests/common/index.js

@@ -30,7 +30,8 @@ import {
   apiMetaUtilPlugin,
   showIconPlugin,
   resourceTypePlugin,
-  fileSizeUtilPlugin
+  fileSizeUtilPlugin,
+  genericUtilPlugin
 } from '@/utils/plugins'
 
 function createMockRouter (newRoutes = []) {
@@ -86,6 +87,7 @@ function createFactory (component, options) {
         showIconPlugin,
         resourceTypePlugin,
         fileSizeUtilPlugin,
+        genericUtilPlugin,
         StoragePlugin
       ],
       mocks