ui: fix build after forward merge (#11010)

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

ui/src/components/view/InfoCard.vue

@@ -31,8 +31,8 @@
                     <edit-outlined class="upload-icon"/>
                   </div>
                   <slot name="avatar">
-                    <span v-if="(resource.icon && resource.icon.base64image || images.template || images.iso || resourceIcon) && !['router', 'systemvm', 'volume'].includes($route.path.split('/')[1])">
+                    <span v-if="resourceIcon && !['router', 'systemvm', 'volume'].includes($route.path.split('/')[1])">
-                      <resource-icon :image="getImage(resource.icon && resource.icon.base64image || images.template || images.iso || resourceIcon)" size="4x" style="margin-right: 5px"/>
+                      <resource-icon :image="resourceIcon" size="4x" style="margin-right: 5px"/>
                     </span>
                     <span v-else>
                       <os-logo v-if="resource.ostypeid || resource.ostypename || ['guestoscategory'].includes($route.path.split('/')[1])" :osId="resource.ostypeid" :osName="resource.ostypename || resource.name" size="3x" @update-osname="setResourceOsType"/>
@@ -56,51 +56,6 @@
                   </div>
                 </slot>
               </div>
-              <slot name="avatar">
-                <span v-if="resourceIcon && !['router', 'systemvm', 'volume'].includes($route.path.split('/')[1])">
-                  <resource-icon :image="resourceIcon" size="4x" style="margin-right: 5px"/>
-                </span>
-                <span v-else>
-                  <os-logo v-if="resource.ostypeid || resource.ostypename || ['guestoscategory'].includes($route.path.split('/')[1])" :osId="resource.ostypeid" :osName="resource.ostypename || resource.name" size="3x" @update-osname="setResourceOsType"/>
-                  <render-icon v-else-if="typeof $route.meta.icon ==='string'" style="font-size: 36px" :icon="$route.meta.icon" />
-                  <font-awesome-icon
-                    v-else-if="$route.meta.icon && Array.isArray($route.meta.icon)"
-                    :icon="$route.meta.icon"
-                    size="3x"
-                    class="anticon"
-                    :style="[$store.getters.darkMode ? { color: 'rgba(255, 255, 255, 0.65)' } : { color: '#888' }]" />
-                  <render-icon v-else style="font-size: 36px" :svgIcon="$route.meta.icon" />
-                </span>
-              </slot>
-            </div>
-
-            <a-divider/>
-
-            <div class="resource-detail-item" v-if="(resource.state || resource.status) && $route.meta.name !== 'zone'">
-              <div class="resource-detail-item__label">{{ $t('label.status') }}</div>
-              <div class="resource-detail-item__details">
-                <status class="status" :text="resource.state || resource.status" displayText/>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.allocationstate">
-              <div class="resource-detail-item__label">{{ $t('label.allocationstate') }}</div>
-              <div class="resource-detail-item__details">
-                <status class="status" :text="resource.allocationstate" displayText/>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.resourcestate">
-              <div class="resource-detail-item__label">{{ $t('label.resourcestate') }}</div>
-              <div class="resource-detail-item__details">
-                <status class="status" :text="resource.resourcestate" displayText/>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="('success' in resource) && $route.meta.name === 'webhookdeliveries'">
-              <div class="resource-detail-item__label">{{ $t('label.success') }}</div>
-              <div class="resource-detail-item__details">
-                <status class="status" :text="resource.success ? 'success' : 'error'"/>
-              </div>
-            </slot>
-          </div>
               <slot name="actions">
                 <div class="tags">
                   <a-tag v-if="resource.instancename">
@@ -142,9 +97,6 @@
                   <a-tag v-if="resource.archived" :color="this.$config.theme['@warning-color']">
                     {{ $t('label.archived') }}
                   </a-tag>
-              <a-tag v-if="resource.leaseduration != undefined">
-                {{ $t('label.remainingdays') + ': ' + (resource.leaseduration > -1 ? resource.leaseduration + 'd' : 'Over') }}
-              </a-tag>
                   <a-tooltip placement="right" >
                     <template #title>
                       <span>{{ $t('label.view.console') }}</span>
@@ -157,6 +109,8 @@
                     />
                   </a-tooltip>
                 </div>
+              </slot>
+            </div>
 
             <a-divider/>
 
@@ -278,111 +232,6 @@
                 </span>
               </div>
             </div>
-        <div class="resource-detail-item" v-if="'leaseduration' in resource && resource.leaseduration !== undefined">
-          <div class="resource-detail-item__label">{{ $t('label.leaseduration') }}</div>
-          <div class="resource-detail-item__details">
-            <field-time-outlined
-                  :style="{
-                    color: $store.getters.darkMode ? { color: 'rgba(255, 255, 255, 0.65)' } : { color: '#888' },
-                    fontSize: '20px'
-                  }"/>
-            {{ resource.leaseduration + ' ' + $t('label.days') }}
-          </div>
-        </div>
-        <div class="resource-detail-item" v-if="'leaseexpiryaction' in resource && resource.leaseexpiryaction !== undefined">
-          <div class="resource-detail-item__label">{{ $t('label.leaseexpiryaction') }}</div>
-          <div class="resource-detail-item__details">
-            <font-awesome-icon
-              :icon="['fa-solid', 'fa-circle-xmark']"
-              class="anticon"
-              :style="[$store.getters.darkMode ? { color: 'rgba(255, 255, 255, 0.65)' } : { color: '#888' }]" />
-            {{ resource.leaseexpiryaction }}
-          </div>
-        </div>
-        <div class="resource-detail-item" v-if="'memory' in resource">
-          <div class="resource-detail-item__label">{{ $t('label.memory') }}</div>
-          <div class="resource-detail-item__details">
-            <font-awesome-icon
-              :icon="['fa-solid', 'fa-memory']"
-              class="anticon"
-              :style="[$store.getters.darkMode ? { color: 'rgba(255, 255, 255, 0.65)' } : { color: '#888' }]" />
-            {{ resource.memory + ' ' + $t('label.mb.memory') }}
-          </div>
-          <div>
-            <span v-if="resource.memorykbs && resource.memoryintfreekbs">
-              <a-progress
-                class="progress-bar"
-                size="small"
-                status="active"
-                :percent="Number(parseFloat(100.0 * (resource.memorykbs - resource.memoryintfreekbs) / resource.memorykbs).toFixed(2))"
-                :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('label.used')"
-              />
-            </span>
-          </div>
-        </div>
-        <div class="resource-detail-item" v-else-if="resource.memorytotalgb">
-          <div class="resource-detail-item__label">{{ $t('label.memory') }}</div>
-          <div class="resource-detail-item__details">
-            <bulb-outlined />
-            <span>
-              {{ resource.memorytotalgb + ' ' + $t('label.memory') }}
-              <a-tooltip placement="top">
-                <template #title>
-                  {{ (resource.memorytotal/(1024**2)).toFixed(3) }} MB
-                </template>
-                <QuestionCircleOutlined />
-              </a-tooltip>
-            </span>
-          </div>
-          <div>
-            <span v-if="resource.memoryusedgb">
-              <a-progress
-                class="progress-bar"
-                size="small"
-                status="active"
-                :percent="Number(parseFloat(100.0 * parseFloat(resource.memoryusedgb) / parseFloat(resource.memorytotalgb)).toFixed(2))"
-                :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('label.used')"
-              />
-            </span>
-            <span v-if="resource.memoryallocatedgb">
-              <a-progress
-                class="progress-bar"
-                size="small"
-                :percent="Number(parseFloat(100.0 * parseFloat(resource.memoryallocatedgb) / parseFloat(resource.memorytotalgb)).toFixed(2))"
-                :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('label.allocated')"
-              />
-            </span>
-          </div>
-        </div>
-        <div class="resource-detail-item" v-else-if="resource.memorytotal">
-          <div class="resource-detail-item__label">{{ $t('label.memory') }}</div>
-          <div class="resource-detail-item__details">
-
-            <div style="display: flex; flex-direction: column; width: 100%;">
-              <div>
-                <bulb-outlined />{{ resource.memorytotal + ' ' + $t('label.memory') }}
-              </div>
-              <div>
-                <span v-if="resource.cpuused">
-                  <a-progress
-                    v-if="resource.cpuused"
-                    class="progress-bar"
-                    size="small"
-                    status="active"
-                    :percent="parseFloat(resource.cpuused)"
-                    :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('label.used')"
-                  />
-                </span>
-                <span v-if="resource.cpuallocated">
-                  <a-progress
-                    class="progress-bar"
-                    size="small"
-                    :percent="parseFloat(resource.cpuallocated)"
-                    :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('label.allocated')"
-                  />
-                </span>
-              </div>
-            </div>
             <div class="resource-detail-item" v-if="'memory' in resource">
               <div class="resource-detail-item__label">{{ $t('label.memory') }}</div>
               <div class="resource-detail-item__details">
@@ -551,6 +400,24 @@
                 </div>
               </div>
             </div>
+            <div class="resource-detail-item" v-if="resource.networks && resource.networks.length > 0">
+              <div class="resource-detail-item__label">{{ $t('label.networks') }}</div>
+              <div class="resource-detail-item__details resource-detail-item__details--start">
+                <div>
+                  <div
+                    v-for="network in resource.networks"
+                    :key="network.id"
+                    style="margin-top: 5px;">
+                    <font-awesome-icon
+                      :icon="['fa-solid', 'fa-ethernet']"
+                      class="anticon"
+                      :style="[$store.getters.darkMode ? { color: 'rgba(255, 255, 255, 0.65)' } : { color: '#888' }]" />
+                    {{ network.name }}
+                    <span v-if="resource.defaultnetworkid === network.id">
+                      ({{ $t('label.default') }})
+                    </span>
+                  </div>
+                </div>
               </div>
             </div>
             <div class="resource-detail-item" v-if="resource.loadbalancer">
@@ -818,128 +685,7 @@
                       <router-link v-if="!isStatic && 'user' in item" :to="{ path: '/accountuser', query: { username: item.user, domainid: resource.domainid }}">{{ item.account + '(' + item.user + ')' }}</router-link>
                       <router-link v-else :to="{ path: '/account', query: { name: item.account, domainid: resource.domainid } }">{{ item.account }}</router-link>
                     </span>
-                <project-outlined v-else />
+                    <span v-else>{{ item.user ? item.account + '(' + item.user + ')' : item.account }}</span>
-                <router-link v-if="!isStatic && resource.projectid" :to="{ path: '/project/' + resource.projectid }">{{ resource.project || resource.projectname || resource.projectid }}</router-link>
-                <router-link v-else :to="{ path: '/project', query: { name: resource.projectname }}">{{ resource.projectname }}</router-link>
-              </div>
-            </div>
-
-            <div class="resource-detail-item">
-              <slot name="details">
-              </slot>
-            </div>
-
-            <div class="resource-detail-item" v-if="resource.groupid">
-              <div class="resource-detail-item__label">{{ $t('label.group') }}</div>
-              <div class="resource-detail-item__details">
-                <gold-outlined />
-                <router-link :to="{ path: '/vmgroup/' + resource.groupid }">{{ resource.group || resource.groupid }}</router-link>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.autoscalevmgroupid">
-              <div class="resource-detail-item__label">{{ $t('label.autoscalevmgroupname') }}</div>
-              <div class="resource-detail-item__details">
-                <gold-outlined />
-                <router-link :to="{ path: '/autoscalevmgroup/' + resource.autoscalevmgroupid }">{{ resource.autoscalevmgroupname || resource.autoscalevmgroupid }}</router-link>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.keypairs && resource.keypairs.length > 0">
-              <div class="resource-detail-item__label">{{ $t('label.keypairs') }}</div>
-              <div class="resource-detail-item__details">
-                <div>
-                  <div
-                    v-for="keypair in keypairs"
-                    :key="keypair"
-                    style="margin-top: 5px;">
-                    <key-outlined />
-                    <router-link :to="{ path: '/ssh/' + keypair }" style="margin-right: 5px">{{ keypair }}</router-link>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.resourcetype && resource.resourceid && routeFromResourceType">
-              <div class="resource-detail-item__label">{{ $t('label.resource') }}</div>
-              <div class="resource-detail-item__details">
-                <resource-label :resourceType="resource.resourcetype" :resourceId="resource.resourceid" :resourceName="resource.resourcename" />
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.virtualmachineid">
-              <div class="resource-detail-item__label">{{ $t('label.vmname') }}</div>
-              <div class="resource-detail-item__details">
-                <desktop-outlined />
-                <router-link :to="{ path: createPathBasedOnVmType(resource.vmtype, resource.virtualmachineid) }">{{ resource.vmname || resource.vm || resource.virtualmachinename || resource.virtualmachineid }} </router-link>
-                <status class="status status--end" :text="resource.vmstate" v-if="resource.vmstate"/>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.volumeid">
-              <div class="resource-detail-item__label">{{ $t('label.volume') }}</div>
-              <div class="resource-detail-item__details">
-                <hdd-outlined />
-                <router-link v-if="validLinks.volume" :to="{ path: '/volume/' + resource.volumeid }">{{ resource.volumename || resource.volume || resource.volumeid }} </router-link>
-                <span v-else>{{ resource.volumename || resource.volume || resource.volumeid }}</span>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.associatednetworkid">
-              <div class="resource-detail-item__label">{{ $t('label.associatednetwork') }}</div>
-              <div class="resource-detail-item__details">
-                <wifi-outlined />
-                <router-link :to="{ path: '/guestnetwork/' + resource.associatednetworkid }">{{ resource.associatednetworkname || resource.associatednetwork || resource.associatednetworkid }} </router-link>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.sourceipaddressnetworkid">
-              <div class="resource-detail-item__label">{{ $t('label.network') }}</div>
-              <div class="resource-detail-item__details">
-                <wifi-outlined />
-                <router-link :to="{ path: '/guestnetwork/' + resource.sourceipaddressnetworkid }">{{ resource.sourceipaddressnetworkname || resource.sourceipaddressnetworkid }} </router-link>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.guestnetworkid">
-              <div class="resource-detail-item__label">{{ $t('label.guestnetwork') }}</div>
-              <div class="resource-detail-item__details">
-                <gateway-outlined />
-                <router-link :to="{ path: '/guestnetwork/' + resource.guestnetworkid }">{{ resource.guestnetworkname || resource.guestnetworkid }} </router-link>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.publicip">
-              <div class="resource-detail-item__label">{{ $t('label.public.ip') }}</div>
-              <div class="resource-detail-item__details">
-                <gateway-outlined />
-                <router-link v-if="resource.publicipid" :to="{ path: '/publicip/' + resource.publicipid }">{{ resource.publicip }} </router-link>
-                <copy-label v-if="resource.publicipid" :copyValue="resource.publicip" :showIcon=true />
-                <copy-label v-else :label="resource.publicip" />
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.vpcid">
-              <div class="resource-detail-item__label">{{ $t('label.vpcname') }}</div>
-              <div class="resource-detail-item__details">
-                <span v-if="images.vpc">
-                  <resource-icon :image="getImage(images.vpc)" size="1x" style="margin-right: 5px"/>
-                </span>
-                <deployment-unit-outlined v-else />
-                <router-link :to="{ path: '/vpc/' + resource.vpcid }">{{ resource.vpcname || resource.vpcid }}</router-link>
-              </div>
-            </div>
-
-            <div class="resource-detail-item" v-if="resource.aclid">
-              <div class="resource-detail-item__label">{{ $t('label.aclid') }}</div>
-              <div class="resource-detail-item__details">
-                <span v-if="images.acl">
-                  <resource-icon :image="getImage(images.acl)" size="1x" style="margin-right: 5px"/>
-                </span>
-                <deployment-unit-outlined v-else />
-                <router-link :to="{ path: '/acllist/' + resource.aclid }">{{ resource.aclname || resource.aclid }}</router-link>
-              </div>
-            </div>
-
-            <div class="resource-detail-item" v-if="resource.affinitygroup && resource.affinitygroup.length > 0">
-              <div class="resource-detail-item__label">{{ $t('label.affinitygroup') }}</div>
-              <SwapOutlined />
-              <span
-                v-for="(group, index) in resource.affinitygroup"
-                :key="group.id"
-              >
-                <router-link :to="{ path: '/affinitygroup/' + group.id }">{{ group.name }}</router-link>
-                <span v-if="index + 1 < resource.affinitygroup.length">, </span>
                   </span>
                 </template>
               </div>
@@ -1078,298 +824,6 @@
             </div>
           </div>
 
-      <div class="account-center-tags" v-if="!isStatic && resourceType && tagsSupportingResourceTypes.includes(this.resourceType) && 'listTags' in $store.getters.apis">
-        <a-divider/>
-        <a-spin :spinning="loadingTags">
-          <div class="title">{{ $t('label.tags') }}</div>
-          <div>
-            <template v-for="(tag, index) in tags" :key="index">
-              <a-tag :closable="isAdminOrOwner() && 'deleteTags' in $store.getters.apis" @close="() => handleDeleteTag(tag)">
-                {{ tag.key }} = {{ tag.value }}
-              </a-tag>
-            </template>
-
-            <div v-if="inputVisible">
-              <a-input-group
-                type="text"
-                size="small"
-                @blur="handleInputConfirm"
-                @keyup.enter="handleInputConfirm"
-                compact>
-                <a-input ref="input" :value="inputKey" @change="handleKeyChange" style="width: 30%; text-align: center" :placeholder="$t('label.key')" />
-                <a-input
-                  class="tag-disabled-input"
-                  style="width: 30px; border-left: 0; pointer-events: none; text-align: center"
-                  placeholder="="
-                  disabled />
-                <a-input :value="inputValue" @change="handleValueChange" style="width: 30%; text-align: center; border-left: 0" :placeholder="$t('label.value')" />
-                <tooltip-button :tooltip="$t('label.ok')" icon="CheckOutlined" size="small" @onClick="handleInputConfirm" />
-                <tooltip-button :tooltip="$t('label.cancel')" icon="CloseOutlined" size="small" @onClick="inputVisible=false" />
-              </a-input-group>
-            </div>
-            <div class="resource-detail-item" v-if="resource.templateid">
-              <div class="resource-detail-item__label">{{ resource.templateformat === 'ISO'? $t('label.iso') : $t('label.templatename') }}</div>
-              <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>
-              </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>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.serviceofferingname && resource.serviceofferingid">
-              <div class="resource-detail-item__label" v-if="$route.meta.name === 'router' || $route.meta.name === 'systemvm'">{{ $t('label.system.offering') }}</div>
-              <div class="resource-detail-item__label" v-else >{{ $t('label.serviceofferingname') }}</div>
-              <div class="resource-detail-item__details">
-                <cloud-outlined />
-                <router-link v-if="!isStatic && ($route.meta.name === 'router' || $route.meta.name === 'systemvm')" :to="{ path: '/systemoffering/' + resource.serviceofferingid}">{{ resource.serviceofferingname || resource.serviceofferingid }} </router-link>
-                <router-link v-else-if="$router.resolve('/computeoffering/' + resource.serviceofferingid).matched[0].redirect !== '/exception/404'" :to="{ path: '/computeoffering/' + resource.serviceofferingid }">{{ resource.serviceofferingname || resource.serviceofferingid }} </router-link>
-                <span v-else>{{ resource.serviceofferingname || resource.serviceofferingid }}</span>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.rootdiskofferingid && resource.rootdiskofferingdisplaytext || resource.datadiskofferingid && resource.datadiskofferingdisplaytext">
-              <div class="resource-detail-item__label">{{ $t('label.diskoffering') }}</div>
-              <div class="resource-detail-item__details">
-                <hdd-outlined />
-                <div v-if="resource.rootdiskofferingid">
-                  <router-link v-if="!isStatic && $router.resolve('/diskoffering/' + resource.rootdiskofferingid).matched[0].redirect !== '/exception/404'" :to="{ path: '/diskoffering/' + resource.rootdiskofferingid }">{{ resource.rootdiskofferingdisplaytext }}</router-link>
-                  <span v-else>{{ resource.rootdiskofferingdisplaytext }}</span>
-                </div>
-                <span v-if="resource.rootdiskofferingid && resource.datadiskofferingid">&nbsp;|&nbsp;</span>
-                <div v-if="resource.datadiskofferingid">
-                  <router-link v-if="!isStatic && $router.resolve('/diskoffering/' + resource.datadiskofferingid).matched[0].redirect !== '/exception/404'" :to="{ path: '/diskoffering/' + resource.datadiskofferingid }">{{ resource.datadiskofferingdisplaytext }}</router-link>
-                  <span v-else>{{ resource.datadiskofferingdisplaytext }}</span>
-                </div>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.backupofferingid">
-              <div class="resource-detail-item__label">{{ $t('label.backupofferingid') }}</div>
-              <cloud-upload-outlined />
-              <router-link v-if="!isStatic && $router.resolve('/backupoffering/' + resource.backupofferingid).matched[0].redirect !== '/exception/404'" :to="{ path: '/backupoffering/' + resource.backupofferingid }">{{ resource.backupofferingname || resource.backupofferingid }} </router-link>
-              <span v-else>{{ resource.backupofferingname || resource.backupofferingid }}</span>
-            </div>
-            <div class="resource-detail-item" v-if="resource.networkofferingid">
-              <div class="resource-detail-item__label">{{ $t('label.networkofferingid') }}</div>
-              <div class="resource-detail-item__details">
-                <wifi-outlined />
-                <router-link v-if="!isStatic && $router.resolve('/networkoffering/' + resource.networkofferingid).matched[0].redirect !== '/exception/404'" :to="{ path: '/networkoffering/' + resource.networkofferingid }">{{ resource.networkofferingname || resource.networkofferingid }} </router-link>
-                <span v-else>{{ resource.networkofferingname || resource.networkofferingid }}</span>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.vpcofferingid">
-              <div class="resource-detail-item__label">{{ $t('label.vpcoffering') }}</div>
-              <div class="resource-detail-item__details">
-                <DeploymentUnitOutlined />
-                <router-link v-if="!isStatic && $router.resolve('/vpcoffering/' + resource.vpcofferingid).matched[0].redirect !== '/exception/404'" :to="{ path: '/vpcoffering/' + resource.vpcofferingid }">{{ resource.vpcofferingname || resource.vpcofferingid }} </router-link>
-                <span v-else>{{ resource.vpcofferingname || resource.vpcofferingid }}</span>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.storageid">
-              <div class="resource-detail-item__label">{{ $t('label.storagepool') }}</div>
-              <div class="resource-detail-item__details">
-                <database-outlined />
-                <router-link v-if="!isStatic && $router.resolve('/storagepool/' + resource.storageid).matched[0].redirect !== '/exception/404'" :to="{ path: '/storagepool/' + resource.storageid }">{{ resource.storage || resource.storageid }} </router-link>
-                <span v-else>{{ resource.storage || resource.storageid }}</span>
-                <a-tag style="margin-left: 5px;" v-if="resource.storagetype">
-                  {{ resource.storagetype }}
-                </a-tag>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.hostid">
-              <div class="resource-detail-item__label">{{ $t('label.hostname') }}</div>
-              <div class="resource-detail-item__details">
-                <desktop-outlined />
-                <router-link v-if="!isStatic && $router.resolve('/host/' + resource.hostid).matched[0].redirect !== '/exception/404'" :to="{ path: '/host/' + resource.hostid }">{{ resource.hostname || resource.hostid }} </router-link>
-                <span v-else>{{ resource.hostname || resource.hostid }}</span>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.clusterid">
-              <div class="resource-detail-item__label">{{ $t('label.clusterid') }}</div>
-              <div class="resource-detail-item__details">
-                <cluster-outlined />
-                <router-link v-if="!isStatic && $router.resolve('/cluster/' + resource.clusterid).matched[0].redirect !== '/exception/404'" :to="{ path: '/cluster/' + resource.clusterid }">{{ resource.clustername || resource.cluster || resource.clusterid }}</router-link>
-                <span v-else>{{ resource.clustername || resource.cluster || resource.clusterid }}</span>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.podid">
-              <div class="resource-detail-item__label">{{ $t('label.podid') }}</div>
-              <div class="resource-detail-item__details">
-                <appstore-outlined />
-                <router-link v-if="!isStatic && $router.resolve('/pod/' + resource.podid).matched[0].redirect !== '/exception/404'" :to="{ path: '/pod/' + resource.podid }">{{ resource.podname || resource.pod || resource.podid }}</router-link>
-                <span v-else>{{ resource.podname || resource.pod || resource.podid }}</span>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.zoneid && !['template', 'iso'].includes($route.path.split('/')[1])">
-              <div class="resource-detail-item__label">{{ $t('label.zone') }}</div>
-              <div class="resource-detail-item__details">
-                <span v-if="images.zone">
-                  <resource-icon :image="getImage(images.zone)" size="1x" style="margin-right: 5px"/>
-                </span>
-                <global-outlined v-else />
-                <router-link v-if="!isStatic && $router.resolve('/zone/' + resource.zoneid).matched[0].redirect !== '/exception/404'" :to="{ path: '/zone/' + resource.zoneid }">{{ resource.zone || resource.zonename || resource.zoneid }}</router-link>
-                <router-link v-else-if="$router.resolve('/zones/' + resource.zoneid).matched[0].redirect !== '/exception/404'" :to="{ path: '/zones/' + resource.zoneid }">{{ resource.zone || resource.zonename || resource.zoneid }}</router-link>
-                <span v-else>{{ resource.zone || resource.zonename || resource.zoneid }}</span>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.userdataname">
-              <div class="resource-detail-item__label">{{ $t('label.userdata') }}</div>
-              <div class="resource-detail-item__details">
-                <solution-outlined />
-                <router-link v-if="!isStatic && $router.resolve('/userdata/' + resource.userdataid).matched[0].redirect !== '/exception/404'" :to="{ path: '/userdata/' + resource.userdataid }">{{ resource.userdataname || resource.userdataid }}</router-link>
-                <span v-else>{{ resource.userdataname || resource.userdataid }}</span>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.owner">
-              <div class="resource-detail-item__label">{{ $t('label.owners') }}</div>
-              <div class="resource-detail-item__details">
-                <user-outlined />
-                <template v-for="(item, idx) in resource.owner" :key="idx">
-                  <span style="margin-right:5px">
-                    <span v-if="$store.getters.userInfo.roletype !== 'User'">
-                      <router-link v-if="!isStatic && 'user' in item" :to="{ path: '/accountuser', query: { username: item.user, domainid: resource.domainid }}">{{ item.account + '(' + item.user + ')' }}</router-link>
-                      <router-link v-else :to="{ path: '/account', query: { name: item.account, domainid: resource.domainid } }">{{ item.account }}</router-link>
-                    </span>
-                    <span v-else>{{ item.user ? item.account + '(' + item.user + ')' : item.account }}</span>
-                  </span>
-                </template>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.account && !resource.account.startsWith('PrjAcct-')">
-              <div class="resource-detail-item__label">{{ $t('label.account') }}</div>
-              <div class="resource-detail-item__details">
-                <span v-if="images.account">
-                  <resource-icon :image="getImage(images.account)" size="1x" style="margin-right: 5px"/>
-                </span>
-                <user-outlined v-else />
-                <router-link v-if="!isStatic && $store.getters.userInfo.roletype !== 'User'" :to="{ path: '/account', query: { name: resource.account, domainid: resource.domainid } }">{{ resource.account }}</router-link>
-                <span v-else>{{ resource.account }}</span>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.roleid">
-              <div class="resource-detail-item__label">{{ $t('label.role') }}</div>
-              <div class="resource-detail-item__details">
-                <idcard-outlined />
-                <router-link v-if="!isStatic && $router.resolve('/role/' + resource.roleid).matched[0].redirect !== '/exception/404'" :to="{ path: '/role/' + resource.roleid }">{{ resource.rolename || resource.role || resource.roleid }}</router-link>
-                <span v-else>{{ resource.rolename || resource.role || resource.roleid }}</span>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.domainid">
-              <div class="resource-detail-item__label">{{ $t('label.domain') }}</div>
-              <div class="resource-detail-item__details">
-                <resource-icon v-if="images.domain" :image="getImage(images.domain)" size="1x" style="margin-right: 5px"/>
-                <block-outlined v-else />
-                <router-link v-if="!isStatic && $store.getters.userInfo.roletype !== 'User'" :to="{ path: '/domain/' + resource.domainid, query: { tab: 'details'}  }">{{ resource.domain || resource.domainid }}</router-link>
-                <span v-else>{{ resource.domain || resource.domainid }}</span>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.payloadurl">
-              <div class="resource-detail-item__label">{{ $t('label.payloadurl') }}</div>
-              <div class="resource-detail-item__details">
-              <link-outlined/>
-                <a v-if="!isStatic" :href="resource.payloadurl">{{ resource.payloadurl }}</a>
-                <span v-else>{{ resource.payloadurl }}</span>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.webhookid">
-              <div class="resource-detail-item__label">{{ $t('label.webhook') }}</div>
-              <div class="resource-detail-item__details">
-                <node-index-outlined />
-                <router-link v-if="!isStatic && $router.resolve('/webhook/' + resource.webhookid).matched[0].redirect !== '/exception/404'" :to="{ path: '/webhook/' + resource.webhookid }">{{ resource.webhookname || resource.webhookid }}</router-link>
-                <span v-else>{{ resource.webhookname || resource.webhookid }}</span>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.managementserverid">
-              <div class="resource-detail-item__label">{{ $t('label.management.servers') }}</div>
-              <div class="resource-detail-item__details">
-                <rocket-outlined />
-                <router-link v-if="!isStatic && $router.resolve('/managementserver/' + resource.managementserverid).matched[0].redirect !== '/exception/404'" :to="{ path: '/managementserver/' + resource.managementserverid }">{{ resource.managementserver || resource.managementserverid }}</router-link>
-                <span v-else>{{ resource.managementserver || resource.managementserverid }}</span>
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.created && !['template', 'iso'].includes($route.path.split('/')[1])">
-              <div class="resource-detail-item__label">{{ $t('label.created') }}</div>
-              <div class="resource-detail-item__details">
-                <calendar-outlined />{{ $toLocaleDate(resource.created) }}
-              </div>
-            </div>
-            <div class="resource-detail-item" v-if="resource.lastupdated">
-              <div class="resource-detail-item__label">{{ $t('label.last.updated') }}</div>
-              <div class="resource-detail-item__details">
-                <calendar-outlined />{{ $toLocaleDate(resource.lastupdated) }}
-              </div>
-            </div>
-          </div>
-
-          <div class="account-center-tags" v-if="$route.meta.related">
-            <a-divider/>
-            <div v-for="item in $route.meta.related" :key="item.path">
-              <router-link
-                v-if="(item.show === undefined || item.show(resource)) && $router.resolve('/' + item.name).matched[0].redirect !== '/exception/404'"
-                :to="{ name: item.name, query: getRouterQuery(item) }">
-                <a-button style="margin-right: 10px">
-                  <template #icon>
-                    <render-icon :icon="$router.resolve('/' + item.name).meta.icon" />
-                  </template>
-                  {{ $t('label.view') + ' ' + $t(item.title) }}
-                </a-button>
-              </router-link>
-            </div>
-          </div>
-
-          <div class="account-center-tags" v-if="showKeys || resource.apikeyaccess">
-            <a-divider/>
-          </div>
-          <div class="account-center-tags" v-if="resource.apikeyaccess && resource.account">
-            <div class="resource-detail-item">
-              <div class="resource-detail-item__label">{{ $t('label.apikeyaccess') }}</div>
-              <div class="resource-detail-item__details">
-                <status class="status" :text="resource.apikeyaccess" displayText/>
-              </div>
-            </div>
-          </div>
-          <div class="account-center-tags" v-if="showKeys">
-            <div class="user-keys">
-              <key-outlined />
-              <strong>
-                {{ $t('label.apikey') }}
-                <tooltip-button
-                  tooltipPlacement="right"
-                  :tooltip="$t('label.copy') + ' ' + $t('label.apikey')"
-                  icon="CopyOutlined"
-                  type="dashed"
-                  size="small"
-                  @onClick="$message.success($t('label.copied.clipboard'))"
-                  :copyResource="resource.apikey" />
-              </strong>
-              <div>
-                {{ resource.apikey.substring(0, 20) }}...
-              </div>
-            </div> <br/>
-            <div class="user-keys">
-              <lock-outlined />
-              <strong>
-                {{ $t('label.secretkey') }}
-                <tooltip-button
-                  tooltipPlacement="right"
-                  :tooltip="$t('label.copy') + ' ' + $t('label.secretkey')"
-                  icon="CopyOutlined"
-                  type="dashed"
-                  size="small"
-                  @onClick="$message.success($t('label.copied.clipboard'))"
-                  :copyResource="resource.secretkey" />
-              </strong>
-              <div>
-                {{ resource.secretkey.substring(0, 20) }}...
-              </div>
-            </div>
-          </div>
-
           <div class="account-center-tags" v-if="!isStatic && resourceType && tagsSupportingResourceTypes.includes(this.resourceType) && 'listTags' in $store.getters.apis">
             <a-divider/>
             <a-spin :spinning="loadingTags">
@@ -1431,7 +885,7 @@ import UploadResourceIcon from '@/components/view/UploadResourceIcon'
 import eventBus from '@/config/eventBus'
 import ResourceIcon from '@/components/view/ResourceIcon'
 import ResourceLabel from '@/components/widgets/ResourceLabel'
-import ImageDeployInstanceButton from '@/components/view/ImageDeployInstanceButton.vue'
+import ImageDeployInstanceButton from '@/components/view/ImageDeployInstanceButton'
 
 export default {
   name: 'InfoCard',
@@ -1570,9 +1024,6 @@ export default {
     },
     routeFromResourceType () {
       return this.$getRouteFromResourceType(this.resource.resourcetype)
-    },
-    isModernImageSelection () {
-      return this.$config.imageSelectionInterface === undefined || this.$config.imageSelectionInterface === 'modern'
     }
   },
   methods: {
@@ -1587,6 +1038,10 @@ export default {
           this.getTags()
         }
       }
+      this.fetchOsCategoryAndIcon()
+      this.getIcons()
+    },
+    fetchOsCategoryAndIcon () {
       const osId = this.resource.guestosid || this.resource.ostypeid
       if (osId && 'listOsTypes' in this.$store.getters.apis) {
         api('listOsTypes', { id: osId }).then(json => {
@@ -1596,7 +1051,6 @@ export default {
           }
         })
       }
-      this.getIcons()
     },
     showUploadModal (show) {
       if (show) {
@@ -1783,9 +1237,6 @@ export default {
         if (item.name === 'template') {
           query.templatefilter = 'self'
           query.filter = 'self'
-        } else if (item.name === 'iso') {
-          query.isofilter = 'self'
-          query.filter = 'self'
         }
 
         if (item.param === 'account') {