mirror of
https://github.com/apache/cloudstack.git
synced 2025-10-26 08:42:29 +01:00
Merge branch '4.20' of https://github.com/apache/cloudstack
This commit is contained in:
Pearl Dsilva
commit
875223c5b4
@ -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);
|
||||
checkCallerApiPermissionsForUserOrAccountOperations(userAccount);
|
||||
if (!Account.Type.PROJECT.equals(userAccount.getType())) {
|
||||
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);
|
||||
checkCallerApiPermissionsForUserOrAccountOperations(userAccount);
|
||||
if (!Account.Type.PROJECT.equals(userAccount.getType())) {
|
||||
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);
|
||||
verifyCallerPrivilegeForUserOrAccountOperations(newAccount);
|
||||
}
|
||||
AccountVO newAccount = new AccountVO(accountName, domainId, networkDomain, accountType, roleId, uuid);
|
||||
verifyCallerPrivilegeForUserOrAccountOperations(newAccount);
|
||||
|
||||
// Create the account
|
||||
return Transaction.execute(new TransactionCallback<>() {
|
||||
|
||||
@ -32,8 +32,8 @@
|
||||
"format": "qcow2",
|
||||
"headless": true,
|
||||
"http_directory": "http",
|
||||
"iso_checksum": "sha512:022895e699231c94abf7012f86cabc587dc576f07f856c87609d5d40c1f921d805a5a862cba94c1a47d09aaa565ec445222e338e73d1fa1affc4fc5908bb50ad",
|
||||
"iso_url": "https://cdimage.debian.org/mirror/cdimage/release/12.10.0/arm64/iso-cd/debian-12.10.0-arm64-netinst.iso",
|
||||
"iso_checksum": "sha512:892cf1185a214d16ff62a18c6b89cdcd58719647c99916f6214bfca6f9915275d727b666c0b8fbf022c425ef18647e9759974abf7fc440431c39b50c296a98d3",
|
||||
"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",
|
||||
|
||||
@ -31,8 +31,8 @@
|
||||
"format": "qcow2",
|
||||
"headless": true,
|
||||
"http_directory": "http",
|
||||
"iso_checksum": "sha512:022895e699231c94abf7012f86cabc587dc576f07f856c87609d5d40c1f921d805a5a862cba94c1a47d09aaa565ec445222e338e73d1fa1affc4fc5908bb50ad",
|
||||
"iso_url": "https://cdimage.debian.org/mirror/cdimage/release/12.10.0/arm64/iso-cd/debian-12.10.0-arm64-netinst.iso",
|
||||
"iso_checksum": "sha512:892cf1185a214d16ff62a18c6b89cdcd58719647c99916f6214bfca6f9915275d727b666c0b8fbf022c425ef18647e9759974abf7fc440431c39b50c296a98d3",
|
||||
"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",
|
||||
|
||||
@ -27,8 +27,8 @@
|
||||
"format": "qcow2",
|
||||
"headless": true,
|
||||
"http_directory": "http",
|
||||
"iso_checksum": "sha512:cb089def0684fd93c9c2fbe45fd16ecc809c949a6fd0c91ee199faefe7d4b82b64658a264a13109d59f1a40ac3080be2f7bd3d8bf3e9cdf509add6d72576a79b",
|
||||
"iso_url": "https://cdimage.debian.org/mirror/cdimage/release/12.10.0/amd64/iso-cd/debian-12.10.0-amd64-netinst.iso",
|
||||
"iso_checksum": "sha512:0921d8b297c63ac458d8a06f87cd4c353f751eb5fe30fd0d839ca09c0833d1d9934b02ee14bbd0c0ec4f8917dde793957801ae1af3c8122cdf28dde8f3c3e0da",
|
||||
"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": [
|
||||
|
||||
@ -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="resource-details">
|
||||
<div class="resource-details__name">
|
||||
<div
|
||||
class="avatar"
|
||||
@click="showUploadModal(true)"
|
||||
v-clipboard:copy="name" >
|
||||
<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 class="card-body">
|
||||
<div class="card-content">
|
||||
<div>
|
||||
<div class="resource-details">
|
||||
<div class="resource-details__name">
|
||||
<div
|
||||
class="avatar"
|
||||
@click="showUploadModal(true)"
|
||||
v-clipboard:copy="name" >
|
||||
<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>
|
||||
<div v-else>
|
||||
<h4 class="name">
|
||||
{{ name }}
|
||||
</h4>
|
||||
|
||||
<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>
|
||||
@ -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
|
||||
v-if="resource.memoryused">
|
||||
<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">
|
||||
<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)"
|
||||
:format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('label.used')" />
|
||||
:percent="Number(parseFloat(100.0 * (resource.memorykbs - resource.memoryintfreekbs) / resource.memorykbs).toFixed(2))"
|
||||
:format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('label.used')"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
v-if="resource.memoryallocated">
|
||||
</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"
|
||||
:percent="parseFloat(resource.memoryallocated)"
|
||||
:format="(percent, successPercent) => parseFloat(percent).toFixed(2) + '% ' + $t('label.allocated')" />
|
||||
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.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
|
||||
v-for="(eth, index) in resource.nic"
|
||||
:key="eth.id"
|
||||
style="margin-left: -24px; 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' }]" />
|
||||
<strong>eth{{ index }}</strong>
|
||||
<copy-label :label="eth.ip6address ? eth.ipaddress + ', ' + eth.ip6address : eth.ipaddress" />
|
||||
<a-tag v-if="eth.isdefault">
|
||||
{{ $t('label.default') }}
|
||||
</a-tag ><br/>
|
||||
<span v-if="!isStatic && eth.networkname && eth.networkid">
|
||||
|
||||
<apartment-outlined/>
|
||||
<router-link :to="{ path: '/guestnetwork/' + eth.networkid }">
|
||||
{{ eth.networkname }}
|
||||
</router-link>
|
||||
</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>
|
||||
</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 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
|
||||
v-for="(eth, index) in resource.nic"
|
||||
:key="eth.id"
|
||||
style="margin-left: -24px; 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' }]" />
|
||||
<strong>eth{{ index }}</strong>
|
||||
<copy-label :label="eth.ip6address ? eth.ipaddress + ', ' + eth.ip6address : eth.ipaddress" />
|
||||
<a-tag v-if="eth.isdefault">
|
||||
{{ $t('label.default') }}
|
||||
</a-tag ><br/>
|
||||
<span v-if="!isStatic && eth.networkname && eth.networkid">
|
||||
|
||||
<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
|
||||
@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 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"> | </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;
|
||||
}
|
||||
|
||||
|
||||
@ -947,21 +947,27 @@
|
||||
</template>
|
||||
</a-step>
|
||||
</a-steps>
|
||||
<div class="card-footer">
|
||||
<!-- ToDo extract as component -->
|
||||
<a-button @click="() => $router.back()" :disabled="loading.deploy">
|
||||
{{ $t('label.cancel') }}
|
||||
</a-button>
|
||||
<a-button style="margin-left: 10px" type="primary" ref="submit" @click="handleSubmit" :loading="loading.deploy">
|
||||
{{ $t('label.create') }}
|
||||
</a-button>
|
||||
<div class="card-footer" v-if="isMobile()">
|
||||
<deploy-buttons
|
||||
:loading="loading.deploy"
|
||||
:deployButtonText="$t('label.create')"
|
||||
@handle-cancel="() => $router.back()"
|
||||
@handle-deploy="handleSubmit" />
|
||||
</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'
|
||||
|
||||
@ -846,36 +846,31 @@
|
||||
</template>
|
||||
</a-step>
|
||||
</a-steps>
|
||||
<div class="card-footer">
|
||||
<a-form-item name="stayonpage" ref="stayonpage">
|
||||
<a-switch
|
||||
class="form-item-hidden"
|
||||
v-model:checked="form.stayonpage" />
|
||||
</a-form-item>
|
||||
<!-- ToDo extract as component -->
|
||||
<a-button @click="() => $router.back()" :disabled="loading.deploy">
|
||||
{{ $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 class="card-footer" v-if="isMobile()">
|
||||
<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" />
|
||||
</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>
|
||||
|
||||
@ -803,36 +803,31 @@
|
||||
</template>
|
||||
</a-step>
|
||||
</a-steps>
|
||||
<div class="card-footer">
|
||||
<a-form-item name="stayonpage" ref="stayonpage">
|
||||
<a-switch
|
||||
class="form-item-hidden"
|
||||
v-model:checked="form.stayonpage" />
|
||||
</a-form-item>
|
||||
<!-- ToDo extract as component -->
|
||||
<a-button @click="() => $router.back()" :disabled="loading.deploy">
|
||||
{{ $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 class="card-footer" v-if="isMobile()">
|
||||
<deploy-buttons
|
||||
:loading="loading.deploy"
|
||||
:deployButtonText="$t('label.launch.vnf.appliance')"
|
||||
:deployButtonMenuOptions="deployMenuOptions"
|
||||
@handle-cancel="() => $router.back()"
|
||||
@handle-deploy="handleSubmit"
|
||||
@handle-deploy-menu="handleSubmitAndStay" />
|
||||
</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>
|
||||
|
||||
130
ui/src/views/compute/wizard/DeployButtons.vue
Normal file
130
ui/src/views/compute/wizard/DeployButtons.vue
Normal file
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user