ui: fix info card showing invalid template, iso link

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

Author: shwstppr

ui/src/components/view/InfoCard.vue

@@ -560,15 +560,17 @@
               <div class="resource-detail-item__details">
                 <resource-icon v-if="resource.icon" :image="getImage(resource.icon.base64image)" size="1x" style="margin-right: 5px"/>
                 <SaveOutlined v-else />
-                <router-link :to="{ path: (resource.templateformat === 'ISO' ? '/iso/' : '/template/') + resource.templateid }">{{ resource.templatedisplaytext || resource.templatename || resource.templateid }} </router-link>
+                <router-link v-if="validLinks.template" :to="{ path: (resource.templateformat === 'ISO' ? '/iso/' : '/template/') + resource.templateid }">{{ resource.templatedisplaytext || resource.templatename || resource.templateid }} </router-link>
+                <span v-else>{{ resource.templatedisplaytext || resource.templatename || resource.templateid }}</span>
               </div>
             </div>
             <div class="resource-detail-item" v-if="resource.isoid">
               <div class="resource-detail-item__label">{{ $t('label.isoname') }}</div>
               <div class="resource-detail-item__details">
                 <resource-icon v-if="resource.icon" :image="getImage(resource.icon.base64image)" size="1x" style="margin-right: 5px"/>
                 <UsbOutlined v-else />
-                  <router-link :to="{ path: '/iso/' + resource.isoid }">{{ resource.isodisplaytext || resource.isoname || resource.isoid }} </router-link>
+                <router-link v-if="validLinks.iso" :to="{ path: '/iso/' + resource.isoid }">{{ resource.isodisplaytext || resource.isoname || resource.isoid }} </router-link>
+                <span v-else>{{ resource.isodisplaytext || resource.isoname || resource.isoid }}</span>
               </div>
             </div>
             <div class="resource-detail-item" v-if="resource.serviceofferingname && resource.serviceofferingid">
@@ -881,7 +883,7 @@
 <script>
 import { api } from '@/api'
 import { createPathBasedOnVmType } from '@/utils/plugins'
-import { validateLinks } from '@/utils/links'
+import { validateLinksAsync } from '@/utils/links'
 import Console from '@/components/widgets/Console'
 import OsLogo from '@/components/widgets/OsLogo'
 import Status from '@/components/widgets/Status'
@@ -966,12 +968,12 @@ export default {
     },
     resource: {
       deep: true,
-      handler (newData, oldData) {
+      async handler (newData, oldData) {
         if (newData === oldData) return
         this.newResource = newData
         this.showKeys = false
         this.setData()
-        this.validLinks = validateLinks(this.$router, this.isStatic, this.resource)
+        this.validLinks = await validateLinksAsync(this.$router, this.isStatic, this.resource)
 
         if ('apikey' in this.resource) {
           this.getUserKeys()

ui/src/utils/links.js

@@ -15,6 +15,27 @@
 // specific language governing permissions and limitations
 // under the License.
 
+import { api } from '@/api'
+
+async function isValidObject (apiName, id, params) {
+  try {
+    const allParams = { ...params, listAll: true, id }
+    const json = await api(apiName, allParams)
+    const responseName = Object.keys(json).find(key => key.endsWith('response')) || apiName.toLowerCase() + 'response'
+    const response = json?.[responseName]
+    if (!response) {
+      return false
+    }
+    const objectName = Object.keys(response).find(key => key !== 'count')
+    if (!objectName || !Array.isArray(response[objectName])) {
+      return false
+    }
+    return response[objectName].some(item => item.id === id)
+  } catch (e) {
+    return false
+  }
+}
+
 export function validateLinks (router, isStatic, resource) {
   const validLinks = {
     volume: false
@@ -34,3 +55,54 @@ export function validateLinks (router, isStatic, resource) {
 
   return validLinks
 }
+
+export async function validateLinksAsync (router, isStatic, resource) {
+  const validLinks = {
+    volume: false,
+    template: false,
+    iso: false
+  }
+  const pendingChecks = []
+
+  if (isStatic) {
+    return validLinks
+  }
+
+  if (resource.volumeid && router.resolve('/volume/' + resource.volumeid).matched[0].redirect !== '/exception/404') {
+    if (resource.volumestate) {
+      validLinks.volume = resource.volumestate !== 'Expunged'
+    } else {
+      validLinks.volume = true
+    }
+  }
+
+  if (resource.templateid) {
+    const templatePath = (resource.templateformat === 'ISO' ? '/iso/' : '/template/') + resource.templateid
+    if (router.resolve(templatePath).matched[0].redirect !== '/exception/404') {
+      pendingChecks.push(
+        isValidObject('listTemplates', resource.templateid, { templatefilter: 'executable' }).then(result => {
+          validLinks.template = result
+        })
+      )
+    }
+  }
+
+  if (resource.isoid) {
+    const isoPath = '/iso/' + resource.isoid
+    if (router.resolve(isoPath).matched[0].redirect !== '/exception/404') {
+      pendingChecks.push(
+        isValidObject('listIsos', resource.isoid, { isofilter: 'executable' }).then(result => {
+          validLinks.iso = result
+        })
+      )
+    }
+  }
+
+  if (pendingChecks.length) {
+    await Promise.all(pendingChecks).catch(error => {
+      console.error('Error validating links:', error)
+    })
+  }
+
+  return validLinks
+}