Merge branch '4.20' of https://github.com/apache/cloudstack

server/src/main/java/com/cloud/user/AccountManagerImpl.java

@@ -1579,16 +1579,20 @@ public class AccountManagerImpl extends ManagerBase implements AccountManager, M
     public void verifyCallerPrivilegeForUserOrAccountOperations(Account userAccount) {
         logger.debug(String.format("Verifying whether the caller has the correct privileges based on the user's role type and API permissions: %s", userAccount));
 
-        checkCallerRoleTypeAllowedForUserOrAccountOperations(userAccount, null);
+        if (!Account.Type.PROJECT.equals(userAccount.getType())) {
-        checkCallerApiPermissionsForUserOrAccountOperations(userAccount);
+            checkCallerRoleTypeAllowedForUserOrAccountOperations(userAccount, null);
+            checkCallerApiPermissionsForUserOrAccountOperations(userAccount);
+        }
     }
 
     protected void verifyCallerPrivilegeForUserOrAccountOperations(User user) {
         logger.debug(String.format("Verifying whether the caller has the correct privileges based on the user's role type and API permissions: %s", user));
 
         Account userAccount = getAccount(user.getAccountId());
-        checkCallerRoleTypeAllowedForUserOrAccountOperations(userAccount, user);
+        if (!Account.Type.PROJECT.equals(userAccount.getType())) {
-        checkCallerApiPermissionsForUserOrAccountOperations(userAccount);
+            checkCallerRoleTypeAllowedForUserOrAccountOperations(userAccount, user);
+            checkCallerApiPermissionsForUserOrAccountOperations(userAccount);
+        }
     }
 
     protected void checkCallerRoleTypeAllowedForUserOrAccountOperations(Account userAccount, User user) {
@@ -1597,7 +1601,7 @@ public class AccountManagerImpl extends ManagerBase implements AccountManager, M
         RoleType userAccountRoleType = getRoleType(userAccount);
 
         if (RoleType.Unknown == callerRoleType || RoleType.Unknown == userAccountRoleType) {
-            String errMsg = String.format("The role type of account [%s, %s] or [%s, %s] is unknown",
+            String errMsg = String.format("The role type of caller account [%s, %s] or target account [%s, %s] is unknown",
                     callingAccount.getName(), callingAccount.getUuid(), userAccount.getName(), userAccount.getUuid());
             throw new PermissionDeniedException(errMsg);
         }
@@ -2707,10 +2711,8 @@ public class AccountManagerImpl extends ManagerBase implements AccountManager, M
             }
         }
 
-        if (!Account.Type.PROJECT.equals(accountType)) {
+        AccountVO newAccount = new AccountVO(accountName, domainId, networkDomain, accountType, roleId, uuid);
-            AccountVO newAccount = new AccountVO(accountName, domainId, networkDomain, accountType, roleId, uuid);
+        verifyCallerPrivilegeForUserOrAccountOperations(newAccount);
-            verifyCallerPrivilegeForUserOrAccountOperations(newAccount);
-        }
 
         // Create the account
         return Transaction.execute(new TransactionCallback<>() {

tools/appliance/systemvmtemplate/template-base_aarch64-target_aarch64.json

@@ -32,8 +32,8 @@
       "format": "qcow2",
       "headless": true,
       "http_directory": "http",
-      "iso_checksum": "sha512:022895e699231c94abf7012f86cabc587dc576f07f856c87609d5d40c1f921d805a5a862cba94c1a47d09aaa565ec445222e338e73d1fa1affc4fc5908bb50ad",
+      "iso_checksum": "sha512:892cf1185a214d16ff62a18c6b89cdcd58719647c99916f6214bfca6f9915275d727b666c0b8fbf022c425ef18647e9759974abf7fc440431c39b50c296a98d3",
-      "iso_url": "https://cdimage.debian.org/mirror/cdimage/release/12.10.0/arm64/iso-cd/debian-12.10.0-arm64-netinst.iso",
+      "iso_url": "https://cdimage.debian.org/mirror/cdimage/release/12.11.0/arm64/iso-cd/debian-12.11.0-arm64-netinst.iso",
       "net_device": "virtio-net",
       "output_directory": "../dist",
       "qemu_binary": "qemu-system-aarch64",

tools/appliance/systemvmtemplate/template-base_x86_64-target_aarch64.json

@@ -31,8 +31,8 @@
       "format": "qcow2",
       "headless": true,
       "http_directory": "http",
-      "iso_checksum": "sha512:022895e699231c94abf7012f86cabc587dc576f07f856c87609d5d40c1f921d805a5a862cba94c1a47d09aaa565ec445222e338e73d1fa1affc4fc5908bb50ad",
+      "iso_checksum": "sha512:892cf1185a214d16ff62a18c6b89cdcd58719647c99916f6214bfca6f9915275d727b666c0b8fbf022c425ef18647e9759974abf7fc440431c39b50c296a98d3",
-      "iso_url": "https://cdimage.debian.org/mirror/cdimage/release/12.10.0/arm64/iso-cd/debian-12.10.0-arm64-netinst.iso",
+      "iso_url": "https://cdimage.debian.org/mirror/cdimage/release/12.11.0/arm64/iso-cd/debian-12.11.0-arm64-netinst.iso",
       "net_device": "virtio-net",
       "output_directory": "../dist",
       "qemu_binary": "qemu-system-aarch64",

tools/appliance/systemvmtemplate/template-base_x86_64-target_x86_64.json

@@ -27,8 +27,8 @@
       "format": "qcow2",
       "headless": true,
       "http_directory": "http",
-      "iso_checksum": "sha512:cb089def0684fd93c9c2fbe45fd16ecc809c949a6fd0c91ee199faefe7d4b82b64658a264a13109d59f1a40ac3080be2f7bd3d8bf3e9cdf509add6d72576a79b",
+      "iso_checksum": "sha512:0921d8b297c63ac458d8a06f87cd4c353f751eb5fe30fd0d839ca09c0833d1d9934b02ee14bbd0c0ec4f8917dde793957801ae1af3c8122cdf28dde8f3c3e0da",
-      "iso_url": "https://cdimage.debian.org/mirror/cdimage/release/12.10.0/amd64/iso-cd/debian-12.10.0-amd64-netinst.iso",
+      "iso_url": "https://cdimage.debian.org/mirror/cdimage/release/12.11.0/amd64/iso-cd/debian-12.11.0-amd64-netinst.iso",
       "net_device": "virtio-net",
       "output_directory": "../dist",
       "qemuargs": [

ui/src/components/view/InfoCard.vue

@@ -14,20 +14,47 @@
 // KIND, either express or implied.  See the License for the
 // specific language governing permissions and limitations
 // under the License.
-// $message.success(`${$t('label.copied.clipboard')} : ${name}`)
 <template>
   <a-spin :spinning="loading">
     <a-card class="spin-content" :bordered="bordered" :title="title">
-      <div>
+      <div class="card-body">
-        <div class="resource-details">
+        <div class="card-content">
-          <div class="resource-details__name">
+          <div>
-            <div
+            <div class="resource-details">
-              class="avatar"
+              <div class="resource-details__name">
-              @click="showUploadModal(true)"
+                <div
-              v-clipboard:copy="name" >
+                  class="avatar"
-              <upload-resource-icon v-if="'uploadResourceIcon' in $store.getters.apis" :visible="showUpload" :resource="resource" @handle-close="showUpload(false)"/>
+                  @click="showUploadModal(true)"
-              <div class="ant-upload-preview" v-if="$showIcon() && !$route.path.includes('zones')">
+                  v-clipboard:copy="name" >
-                <edit-outlined class="upload-icon"/>
+                  <upload-resource-icon v-if="'uploadResourceIcon' in $store.getters.apis" :visible="showUpload" :resource="resource" @handle-close="showUpload(false)"/>
+                  <div class="ant-upload-preview" v-if="$showIcon() && !$route.path.includes('zones')">
+                    <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])">
+                      <resource-icon :image="getImage(resource.icon && resource.icon.base64image || images.template || images.iso || 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>
+                <slot name="name">
+                  <div v-if="['USER.LOGIN', 'USER.LOGOUT', 'ROUTER.HEALTH.CHECKS', 'FIREWALL.CLOSE', 'ALERT.SERVICE.DOMAINROUTER'].includes(resource.name)">{{ $t(resource.name.toLowerCase()) }}</div>
+                  <div v-else>
+                    <h4 class="name">
+                      {{ name }}
+                    </h4>
+                  </div>
+                </slot>
               </div>
               <slot name="avatar">
                 <span v-if="resourceIcon && !['router', 'systemvm', 'volume'].includes($route.path.split('/')[1])">
@@ -46,12 +73,31 @@
                 </span>
               </slot>
             </div>
-            <slot name="name">
+
-              <div v-if="['USER.LOGIN', 'USER.LOGOUT', 'ROUTER.HEALTH.CHECKS', 'FIREWALL.CLOSE', 'ALERT.SERVICE.DOMAINROUTER'].includes(resource.name)">{{ $t(resource.name.toLowerCase()) }}</div>
+            <a-divider/>
-              <div v-else>
+
-                <h4 class="name">
+            <div class="resource-detail-item" v-if="(resource.state || resource.status) && $route.meta.name !== 'zone'">
-                  {{ name }}
+              <div class="resource-detail-item__label">{{ $t('label.status') }}</div>
-                </h4>
+              <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>
@@ -111,8 +157,6 @@
                 />
               </a-tooltip>
             </div>
-          </slot>
-        </div>
 
         <a-divider/>
 
@@ -319,126 +363,192 @@
                 <bulb-outlined />{{ resource.memorytotal + ' ' + $t('label.memory') }}
               </div>
               <div>
-                <span
+                <span v-if="resource.cpuused">
-                  v-if="resource.memoryused">
+                  <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">
+                <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="parseFloat(resource.memoryused)"
+                    :percent="Number(parseFloat(100.0 * (resource.memorykbs - resource.memoryintfreekbs) / resource.memorykbs).toFixed(2))"
-                    :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('label.used')" />
+                    :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('label.used')"
+                  />
                 </span>
-                <span
+              </div>
-                  v-if="resource.memoryallocated">
+            </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"
-                    :percent="parseFloat(resource.memoryallocated)"
+                    status="active"
-                    :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('label.allocated')" />
+                    :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.memoryused">
+                      <a-progress
+                        class="progress-bar"
+                        size="small"
+                        status="active"
+                        :percent="parseFloat(resource.memoryused)"
+                        :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('label.used')" />
+                    </span>
+                    <span
+                      v-if="resource.memoryallocated">
+                      <a-progress
+                        class="progress-bar"
+                        size="small"
+                        :percent="parseFloat(resource.memoryallocated)"
+                        :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('label.allocated')" />
+                    </span>
+                  </div>
+                </div>
 
-          </div>
-        </div>
-        <div class="resource-detail-item" v-if="resource.volumes || resource.sizegb">
-          <div class="resource-detail-item__label" v-if="$route.meta.name === 'backup'">{{ $t('label.size') }}</div>
-          <div class="resource-detail-item__label" v-else>{{ $t('label.disksize') }}</div>
-          <div class="resource-detail-item__details">
-            <hdd-outlined />
-            <span style="width: 100%;" v-if="$route.meta.name === 'vm' && resource.volumes">{{ (resource.volumes.reduce((total, item) => total += item.size, 0) / (1024 * 1024 * 1024.0)).toFixed(2) }} GB Storage</span>
-            <span style="width: 100%;" v-else-if="$route.meta.name === 'backup'">
-              {{ $bytesToHumanReadableSize(resource.size) }}
-              <a-tooltip placement="right">
-                <template #title>
-                  {{ resource.size }} bytes
-                </template>
-                <QuestionCircleOutlined />
-              </a-tooltip>
-            </span>
-            <span style="width: 100%;" v-else-if="resource.sizegb || resource.size">{{ resource.sizegb || (resource.size/1024.0) }}</span>
-          </div>
-          <div style="margin-left: 25px; margin-top: 5px" v-if="resource.diskkbsread && resource.diskkbswrite && resource.diskioread && resource.diskiowrite">
-            <a-tag style="margin-bottom: 5px;">{{ $t('label.read') + ' ' + toSize(resource.diskkbsread) }}</a-tag>
-            <a-tag style="margin-bottom: 5px;">{{ $t('label.write') + ' ' + toSize(resource.diskkbswrite) }}</a-tag><br/>
-            <a-tag style="margin-bottom: 5px;">{{ $t('label.read.io') + ' ' + resource.diskioread }}</a-tag>
-            <a-tag>{{ $t('label.writeio') + ' ' + resource.diskiowrite }}</a-tag>
-          </div>
-        </div>
-        <div class="resource-detail-item" v-else-if="resource.disksizetotalgb">
-          <div class="resource-detail-item__label">{{ $t('label.disksize') }}</div>
-          <div class="resource-detail-item__details">
-            <database-outlined />{{ resource.disksizetotalgb }}
-          </div>
-          <div>
-            <span v-if="resource.disksizeusedgb">
-              <a-progress
-                class="progress-bar"
-                size="small"
-                status="active"
-                :percent="Number(parseFloat(100.0 * parseFloat(resource.disksizeusedgb) / parseFloat(resource.disksizetotalgb)).toFixed(2))"
-                :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('label.disksizeusedgb')" />
-            </span>
-            <span v-if="resource.disksizeallocatedgb">
-              <a-progress
-                class="progress-bar"
-                size="small"
-                :percent="Number(parseFloat(100.0 * parseFloat(resource.disksizeallocatedgb) / (parseFloat(resource.disksizetotalgb) *
-                  (parseFloat(resource.overprovisionfactor) || 1.0))).toFixed(2))"
-                :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('label.disksizeallocatedgb')" />
-            </span>
-          </div>
-        </div>
-        <div class="resource-detail-item" v-if="resource.nic || ('networkkbsread' in resource && 'networkkbswrite' in resource)">
-          <div class="resource-detail-item__label">{{ $t('label.network') }}</div>
-          <div class="resource-detail-item__details resource-detail-item__details--start">
-            <wifi-outlined />
-            <div>
-              <div v-if="'networkkbsread' in resource && 'networkkbswrite' in resource">
-                <a-tag><ArrowDownOutlined />RX {{ toSize(resource.networkkbsread) }}</a-tag>
-                <a-tag><ArrowUpOutlined />TX {{ toSize(resource.networkkbswrite) }}</a-tag>
               </div>
-              <div v-else>{{ resource.nic.length }} NIC(s)</div>
+            </div>
-              <div
+            <div class="resource-detail-item" v-if="resource.volumes || resource.sizegb">
-                v-for="(eth, index) in resource.nic"
+              <div class="resource-detail-item__label" v-if="$route.meta.name === 'backup'">{{ $t('label.size') }}</div>
-                :key="eth.id"
+              <div class="resource-detail-item__label" v-else>{{ $t('label.disksize') }}</div>
-                style="margin-left: -24px; margin-top: 5px;">
+              <div class="resource-detail-item__details">
-                <font-awesome-icon
+                <hdd-outlined />
-                  :icon="['fa-solid', 'fa-ethernet']"
+                <span style="width: 100%;" v-if="$route.meta.name === 'vm' && resource.volumes">{{ (resource.volumes.reduce((total, item) => total += item.size, 0) / (1024 * 1024 * 1024.0)).toFixed(2) }} GB Storage</span>
-                  class="anticon"
+                <span style="width: 100%;" v-else-if="$route.meta.name === 'backup'">
-                  :style="[$store.getters.darkMode ? { color: 'rgba(255, 255, 255, 0.65)' } : { color: '#888' }]" />
+                  {{ $bytesToHumanReadableSize(resource.size) }}
-                <strong>eth{{ index }}</strong>&nbsp;
+                  <a-tooltip placement="right">
-                <copy-label :label="eth.ip6address ? eth.ipaddress + ', ' + eth.ip6address : eth.ipaddress" />&nbsp;
+                    <template #title>
-                <a-tag v-if="eth.isdefault">
+                      {{ resource.size }} bytes
-                  {{ $t('label.default') }}
+                    </template>
-                </a-tag ><br/>
+                    <QuestionCircleOutlined />
-                <span v-if="!isStatic && eth.networkname && eth.networkid">
+                  </a-tooltip>
-                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                </span>
-                  <apartment-outlined/>
+                <span style="width: 100%;" v-else-if="resource.sizegb || resource.size">{{ resource.sizegb || (resource.size/1024.0) }}</span>
-                  <router-link :to="{ path: '/guestnetwork/' + eth.networkid      }">
+              </div>
-                    {{ eth.networkname }}
+              <div style="margin-left: 25px; margin-top: 5px" v-if="resource.diskkbsread && resource.diskkbswrite && resource.diskioread && resource.diskiowrite">
-                  </router-link>
+                <a-tag style="margin-bottom: 5px;">{{ $t('label.read') + ' ' + toSize(resource.diskkbsread) }}</a-tag>
+                <a-tag style="margin-bottom: 5px;">{{ $t('label.write') + ' ' + toSize(resource.diskkbswrite) }}</a-tag><br/>
+                <a-tag style="margin-bottom: 5px;">{{ $t('label.read.io') + ' ' + resource.diskioread }}</a-tag>
+                <a-tag>{{ $t('label.writeio') + ' ' + resource.diskiowrite }}</a-tag>
+              </div>
+            </div>
+            <div class="resource-detail-item" v-else-if="resource.disksizetotalgb">
+              <div class="resource-detail-item__label">{{ $t('label.disksize') }}</div>
+              <div class="resource-detail-item__details">
+                <database-outlined />{{ resource.disksizetotalgb }}
+              </div>
+              <div>
+                <span v-if="resource.disksizeusedgb">
+                  <a-progress
+                    class="progress-bar"
+                    size="small"
+                    status="active"
+                    :percent="Number(parseFloat(100.0 * parseFloat(resource.disksizeusedgb) / parseFloat(resource.disksizetotalgb)).toFixed(2))"
+                    :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('label.disksizeusedgb')" />
+                </span>
+                <span v-if="resource.disksizeallocatedgb">
+                  <a-progress
+                    class="progress-bar"
+                    size="small"
+                    :percent="Number(parseFloat(100.0 * parseFloat(resource.disksizeallocatedgb) / (parseFloat(resource.disksizetotalgb) *
+                      (parseFloat(resource.overprovisionfactor) || 1.0))).toFixed(2))"
+                    :format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('label.disksizeallocatedgb')" />
                 </span>
               </div>
             </div>
-          </div>
+            <div class="resource-detail-item" v-if="resource.nic || ('networkkbsread' in resource && 'networkkbswrite' in resource)">
-        </div>
+              <div class="resource-detail-item__label">{{ $t('label.network') }}</div>
-        <div class="resource-detail-item" v-if="resource.networks && resource.networks.length > 0">
+              <div class="resource-detail-item__details resource-detail-item__details--start">
-          <div class="resource-detail-item__label">{{ $t('label.networks') }}</div>
+                <wifi-outlined />
-          <div class="resource-detail-item__details resource-detail-item__details--start">
+                <div>
-            <div>
+                  <div v-if="'networkkbsread' in resource && 'networkkbswrite' in resource">
-              <div
+                    <a-tag><ArrowDownOutlined />RX {{ toSize(resource.networkkbsread) }}</a-tag>
-                v-for="network in resource.networks"
+                    <a-tag><ArrowUpOutlined />TX {{ toSize(resource.networkkbswrite) }}</a-tag>
-                :key="network.id"
+                  </div>
-                style="margin-top: 5px;">
+                  <div v-else>{{ resource.nic.length }} NIC(s)</div>
-                <font-awesome-icon
+                  <div
-                  :icon="['fa-solid', 'fa-ethernet']"
+                    v-for="(eth, index) in resource.nic"
-                  class="anticon"
+                    :key="eth.id"
-                  :style="[$store.getters.darkMode ? { color: 'rgba(255, 255, 255, 0.65)' } : { color: '#888' }]" />
+                    style="margin-left: -24px; margin-top: 5px;">
-                {{ network.name }}
+                    <font-awesome-icon
-                <span v-if="resource.defaultnetworkid === network.id">
+                      :icon="['fa-solid', 'fa-ethernet']"
-                  ({{ $t('label.default') }})
+                      class="anticon"
-                </span>
+                      :style="[$store.getters.darkMode ? { color: 'rgba(255, 255, 255, 0.65)' } : { color: '#888' }]" />
+                    <strong>eth{{ index }}</strong>&nbsp;
+                    <copy-label :label="eth.ip6address ? eth.ipaddress + ', ' + eth.ip6address : eth.ipaddress" />&nbsp;
+                    <a-tag v-if="eth.isdefault">
+                      {{ $t('label.default') }}
+                    </a-tag ><br/>
+                    <span v-if="!isStatic && eth.networkname && eth.networkid">
+                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                      <apartment-outlined/>
+                      <router-link :to="{ path: '/guestnetwork/' + eth.networkid      }">
+                        {{ eth.networkname }}
+                      </router-link>
+                    </span>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -708,7 +818,128 @@
                   <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>
+                <project-outlined v-else />
+                <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>
@@ -876,15 +1107,312 @@
                 <tooltip-button :tooltip="$t('label.cancel')" icon="CloseOutlined" size="small" @onClick="inputVisible=false" />
               </a-input-group>
             </div>
-            <a-tag
+            <div class="resource-detail-item" v-if="resource.templateid">
-              @click="showInput"
+              <div class="resource-detail-item__label">{{ resource.templateformat === 'ISO'? $t('label.iso') : $t('label.templatename') }}</div>
-              class="btn-add-tag"
+              <div class="resource-detail-item__details">
-              style="borderStyle: dashed;"
+                <resource-icon v-if="resource.icon" :image="getImage(resource.icon.base64image)" size="1x" style="margin-right: 5px"/>
-              v-else-if="isAdminOrOwner() && 'createTags' in $store.getters.apis">
+                <SaveOutlined v-else />
-              <plus-outlined  /> {{ $t('label.new.tag') }}
+                <router-link :to="{ path: (resource.templateformat === 'ISO' ? '/iso/' : '/template/') + resource.templateid }">{{ resource.templatedisplaytext || resource.templatename || resource.templateid }} </router-link>
-            </a-tag>
+              </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>
-        </a-spin>
+
+          <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">
+              <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>
+                <a-tag
+                  @click="showInput"
+                  class="btn-add-tag"
+                  style="borderStyle: dashed;"
+                  v-else-if="isAdminOrOwner() && 'createTags' in $store.getters.apis">
+                  <plus-outlined  /> {{ $t('label.new.tag') }}
+                </a-tag>
+              </div>
+            </a-spin>
+          </div>
+        </div>
+        <div class="card-footer" v-if="footerVisible">
+          <slot name="footer-content"></slot>
+        </div>
       </div>
     </a-card>
   </a-spin>
@@ -938,6 +1466,10 @@ export default {
     isStatic: {
       type: Boolean,
       default: false
+    },
+    footerVisible: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -1273,6 +1805,25 @@ export default {
 
 <style lang="scss" scoped>
 :deep(.ant-card-body) {
+  padding: 0;
+}
+
+.card-body {
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  display: flex;
+}
+
+.card-content {
+  width: 100%;
+  flex-grow: 1;
+  overflow-y: auto;
+  padding: 30px;
+}
+
+.card-footer {
+  width: 100%;
   padding: 30px;
 }
 

ui/src/views/compute/CreateAutoScaleVmGroup.vue

@@ -947,21 +947,27 @@
                 </template>
               </a-step>
             </a-steps>
-            <div class="card-footer">
+            <div class="card-footer" v-if="isMobile()">
-              <!-- ToDo extract as component -->
+              <deploy-buttons
-              <a-button @click="() => $router.back()" :disabled="loading.deploy">
+                :loading="loading.deploy"
-                {{ $t('label.cancel') }}
+                :deployButtonText="$t('label.create')"
-              </a-button>
+                @handle-cancel="() => $router.back()"
-              <a-button style="margin-left: 10px" type="primary" ref="submit" @click="handleSubmit" :loading="loading.deploy">
+                @handle-deploy="handleSubmit" />
-                {{ $t('label.create') }}
-              </a-button>
             </div>
           </a-form>
         </a-card>
       </a-col>
       <a-col :md="24" :lg="7" v-if="!isMobile()">
         <a-affix :offsetTop="75" class="vm-info-card">
-          <info-card :resource="vm" :title="$t('label.your.autoscale.vmgroup')" @change-resource="(data) => resource = data" />
+          <info-card :footerVisible="true" :resource="vm" :title="$t('label.your.autoscale.vmgroup')" @change-resource="(data) => resource = data">
+            <template #footer-content>
+              <deploy-buttons
+                :loading="loading.deploy"
+                :deployButtonText="$t('label.create')"
+                @handle-cancel="() => $router.back()"
+                @handle-deploy="handleSubmit" />
+            </template>
+          </info-card>
         </a-affix>
       </a-col>
     </a-row>
@@ -1031,6 +1037,7 @@ import store from '@/store'
 import eventBus from '@/config/eventBus'
 
 import InfoCard from '@/components/view/InfoCard'
+import DeployButtons from '@views/compute/wizard/DeployButtons'
 import ResourceIcon from '@/components/view/ResourceIcon'
 import ZoneBlockRadioGroupSelect from '@views/compute/wizard/ZoneBlockRadioGroupSelect.vue'
 import BlockRadioGroupSelect from '@/components/widgets/BlockRadioGroupSelect'

ui/src/views/compute/DeployVM.vue

@@ -846,36 +846,31 @@
                 </template>
               </a-step>
             </a-steps>
-            <div class="card-footer">
+            <div class="card-footer" v-if="isMobile()">
-              <a-form-item name="stayonpage" ref="stayonpage">
+              <deploy-buttons
-                <a-switch
+                :loading="loading.deploy"
-                  class="form-item-hidden"
+                :deployButtonText="form.startvm ? $t('label.launch.vm') : $t('label.create.vm')"
-                  v-model:checked="form.stayonpage" />
+                :deployButtonMenuOptions="deployMenuOptions"
-              </a-form-item>
+                @handle-cancel="() => $router.back()"
-              <!-- ToDo extract as component -->
+                @handle-deploy="handleSubmit"
-              <a-button @click="() => $router.back()" :disabled="loading.deploy">
+                @handle-deploy-menu="handleSubmitAndStay" />
-                {{ $t('label.cancel') }}
-              </a-button>
-              <a-dropdown-button style="margin-left: 10px" type="primary" ref="submit" @click="handleSubmit" :loading="loading.deploy">
-                <rocket-outlined />
-                {{ this.form.startvm ? $t('label.launch.vm') : $t('label.create.vm') }}
-                <template #icon><down-outlined /></template>
-                <template #overlay>
-                  <a-menu type="primary" @click="handleSubmitAndStay" theme="dark" class="btn-stay-on-page">
-                    <a-menu-item type="primary" key="1">
-                      <rocket-outlined />
-                      {{ this.form.startvm ? $t('label.launch.vm.and.stay') : $t('label.create.vm.and.stay') }}
-                    </a-menu-item>
-                  </a-menu>
-                </template>
-              </a-dropdown-button>
             </div>
           </a-form>
         </a-card>
       </a-col>
       <a-col :md="24" :lg="7" v-if="!isMobile()">
         <a-affix :offsetTop="75" class="vm-info-card">
-          <info-card :resource="vm" :title="$t('label.yourinstance')" @change-resource="(data) => resource = data" />
+          <info-card :footerVisible="true" :resource="vm" :title="$t('label.yourinstance')" @change-resource="(data) => resource = data">
+            <template #footer-content>
+              <deploy-buttons
+                :loading="loading.deploy"
+                :deployButtonText="form.startvm ? $t('label.launch.vm') : $t('label.create.vm')"
+                :deployButtonMenuOptions="deployMenuOptions"
+                @handle-cancel="() => $router.back()"
+                @handle-deploy="handleSubmit"
+                @handle-deploy-menu="handleSubmitAndStay" />
+            </template>
+          </info-card>
         </a-affix>
       </a-col>
     </a-row>
@@ -893,6 +888,7 @@ import eventBus from '@/config/eventBus'
 
 import OwnershipSelection from '@views/compute/wizard/OwnershipSelection'
 import InfoCard from '@/components/view/InfoCard'
+import DeployButtons from '@views/compute/wizard/DeployButtons'
 import ResourceIcon from '@/components/view/ResourceIcon'
 import ZoneBlockRadioGroupSelect from '@views/compute/wizard/ZoneBlockRadioGroupSelect'
 import BlockRadioGroupSelect from '@/components/widgets/BlockRadioGroupSelect'
@@ -3126,10 +3122,6 @@ export default {
   .card-footer {
     text-align: right;
     margin-top: 2rem;
-
-    button + button {
-      margin-left: 8px;
-    }
   }
 
   .ant-list-item-meta-avatar {
@@ -3181,12 +3173,4 @@ export default {
   .form-item-hidden {
     display: none;
   }
-
-  .btn-stay-on-page {
-    &.ant-dropdown-menu-dark {
-      .ant-dropdown-menu-item:hover {
-        background: transparent !important;
-      }
-    }
-  }
 </style>

ui/src/views/compute/DeployVnfAppliance.vue

@@ -803,36 +803,31 @@
                 </template>
               </a-step>
             </a-steps>
-            <div class="card-footer">
+            <div class="card-footer" v-if="isMobile()">
-              <a-form-item name="stayonpage" ref="stayonpage">
+              <deploy-buttons
-                <a-switch
+                :loading="loading.deploy"
-                  class="form-item-hidden"
+                :deployButtonText="$t('label.launch.vnf.appliance')"
-                  v-model:checked="form.stayonpage" />
+                :deployButtonMenuOptions="deployMenuOptions"
-              </a-form-item>
+                @handle-cancel="() => $router.back()"
-              <!-- ToDo extract as component -->
+                @handle-deploy="handleSubmit"
-              <a-button @click="() => $router.back()" :disabled="loading.deploy">
+                @handle-deploy-menu="handleSubmitAndStay" />
-                {{ $t('label.cancel') }}
-              </a-button>
-              <a-dropdown-button style="margin-left: 10px" type="primary" ref="submit" @click="handleSubmit" :loading="loading.deploy">
-                <rocket-outlined />
-                {{ $t('label.launch.vnf.appliance') }}
-                <template #icon><down-outlined /></template>
-                <template #overlay>
-                  <a-menu type="primary" @click="handleSubmitAndStay" theme="dark" class="btn-stay-on-page">
-                    <a-menu-item type="primary" key="1">
-                      <rocket-outlined />
-                      {{ $t('label.launch.vnf.appliance.and.stay') }}
-                    </a-menu-item>
-                  </a-menu>
-                </template>
-              </a-dropdown-button>
             </div>
           </a-form>
         </a-card>
       </a-col>
       <a-col :md="24" :lg="7" v-if="!isMobile()">
         <a-affix :offsetTop="75" class="vm-info-card">
-          <info-card :resource="vm" :title="$t('label.vnf.appliance')" @change-resource="(data) => resource = data" />
+          <info-card :footerVisible="true" :resource="vm" :title="$t('label.vnf.appliance')" @change-resource="(data) => resource = data">
+            <template #footer-content>
+              <deploy-buttons
+                :loading="loading.deploy"
+                :deployButtonText="$t('label.launch.vnf.appliance')"
+                :deployButtonMenuOptions="deployMenuOptions"
+                @handle-cancel="() => $router.back()"
+                @handle-deploy="handleSubmit"
+                @handle-deploy-menu="handleSubmitAndStay" />
+            </template>
+          </info-card>
         </a-affix>
       </a-col>
     </a-row>
@@ -848,6 +843,7 @@ import store from '@/store'
 import eventBus from '@/config/eventBus'
 
 import InfoCard from '@/components/view/InfoCard'
+import DeployButtons from '@views/compute/wizard/DeployButtons'
 import ResourceIcon from '@/components/view/ResourceIcon'
 import ZoneBlockRadioGroupSelect from '@views/compute/wizard/ZoneBlockRadioGroupSelect.vue'
 import BlockRadioGroupSelect from '@/components/widgets/BlockRadioGroupSelect'
@@ -2963,7 +2959,7 @@ export default {
   .vm-info-card {
     .ant-card-body {
       min-height: 250px;
-      max-height: calc(100vh - 150px);
+      max-height: calc(100vh - 258px);
       overflow-y: auto;
       scroll-behavior: smooth;
     }
@@ -2984,12 +2980,4 @@ export default {
   .form-item-hidden {
     display: none;
   }
-
-  .btn-stay-on-page {
-    &.ant-dropdown-menu-dark {
-      .ant-dropdown-menu-item:hover {
-        background: transparent !important;
-      }
-    }
-  }
 </style>

ui/src/views/compute/wizard/DeployButtons.vue

@@ -0,0 +1,130 @@
+// 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.
+
+<template>
+  <div class="button-container">
+    <a-button
+      v-if="cancekButtonAllowed"
+      @click="handleCancelBtn"
+      :disabled="loading"
+      class="equal-size-button">
+      {{ $t('label.cancel') }}
+    </a-button>
+    <a-dropdown-button
+      v-if="deployButtonMenuOptions"
+      type="primary"
+      ref="submit"
+      @click="handleDeployBtn"
+      :loading="loading"
+      class="equal-size-button">
+      <rocket-outlined />
+      {{ deployButtonText }}
+      <template #icon><down-outlined /></template>
+      <template #overlay>
+          <a-menu type="primary" @click="handleMenu" theme="dark" class="btn-stay-on-page">
+            <a-menu-item type="primary" v-for="(menuOpt, index) in deployButtonMenuOptions" :key="index + 1">
+                <rocket-outlined />
+                {{ menuOpt }}
+            </a-menu-item>
+          </a-menu>
+      </template>
+    </a-dropdown-button>
+    <a-button
+      v-else
+      class="equal-size-button"
+      type="primary"
+      :loading="loading"
+      @click="handleDeployBtn">
+      {{ deployButtonText }}
+    </a-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DeployButtons',
+  components: {
+  },
+  props: {
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    deployButtonText: {
+      type: String,
+      default: () => this.$t('label.create')
+    },
+    deployButtonMenuOptions: {
+      type: Array,
+      default: null
+    },
+    cancekButtonAllowed: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['handle-cancel', 'handle-deploy', 'handle-deploy-menu'],
+  methods: {
+    handleCancelBtn () {
+      this.$emit('handle-cancel')
+    },
+    handleDeployBtn (e) {
+      this.$emit('handle-deploy', e)
+    },
+    handleMenu (e) {
+      this.$emit('handle-deploy-menu', e.key - 1)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+.button-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: flex-start;
+}
+
+.equal-size-button {
+  flex-grow: 1; /* Make each button grow equally */
+  min-width: 120px; /* Set a minimum width so that the buttons don't shrink too much */
+}
+
+@media (max-width: 600px) {
+  .button-container {
+    flex-direction: column;
+  }
+
+}
+
+.btn-stay-on-page {
+  &.ant-dropdown-menu-dark {
+    .ant-dropdown-menu-item:hover {
+      background: transparent !important;
+    }
+  }
+}
+</style>
+
+<style lang="less">
+
+.ant-btn-group > .ant-btn:first-child:not(:last-child) {
+  flex-grow: 1; /* Make each button grow equally */
+}
+</style>