// 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>

<a-affix

:key="'affix-' + showSearchFilters"

:offsetTop="this.$store.getters.shutdownTriggered ? 103 : 78"

>

<a-card class="breadcrumb-card" style="z-index: 10">

<a-row>

<a-col :span="device === 'mobile' ? 24 : 12" style="padding-left: 12px; margin-top: 10px">

<breadcrumb :resource="resource">

<template #end>

<a-button

:loading="loading"

style="margin-bottom: 5px"

shape="round"

size="small"

@click="fetchData({ irefresh: true })">

<template #icon><reload-outlined /></template>

{{ $t('label.refresh') }}

</a-button>

<a-tooltip placement="right">

<template #title>

{{ $t('label.filterby') }}

</template>

<a-select

v-if="!dataView && filters && filters.length > 0"

:placeholder="$t('label.filterby')"

:value="filterValue"

style="min-width: 100px; margin-left: 10px; margin-bottom: 5px"

size=small

@change="changeFilter"

showSearch

optionFilterProp="label"

:filterOption="(input, option) => {

return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0

}" >

<template #suffixIcon><filter-outlined class="ant-select-suffix" /></template>

<a-select-option

v-if="['Admin', 'DomainAdmin'].includes($store.getters.userInfo.roletype) &&

['vm', 'iso', 'template', 'pod', 'cluster', 'host', 'systemvm', 'router', 'storagepool', 'kubernetes', 'computeoffering', 'systemoffering', 'diskoffering', 'sharedfs'].includes($route.name) ||

['account'].includes($route.name)"

key="all"

:label="$t('label.all')">

{{ $t('label.all') }}

</a-select-option>

<a-select-option

v-for="filter in filters"

:key="filter"

:label="$t('label.' + (['comment'].includes($route.name) ? 'filter.annotations.' : '') + filter)">

{{ $t('label.' + (['comment'].includes($route.name) ? 'filter.annotations.' : '') + filter) }}

<clock-circle-outlined v-if="['comment'].includes($route.name) && !['Admin'].includes($store.getters.userInfo.roletype) && filter === 'all'" />

</a-select-option>

</a-select>

</a-tooltip>

<a-switch

v-if="!dataView && ['vm', 'volume', 'zone', 'cluster', 'host', 'storagepool', 'managementserver', 'sharedfs'].includes($route.name)"

style="margin-left: 8px; min-height: 23px; margin-bottom: 4px"

:checked-children="$t('label.metrics')"

:un-checked-children="$t('label.metrics')"

:checked="$store.getters.metrics"

@change="(checked, event) => { $store.dispatch('SetMetrics', checked) }"/>

<a-switch

v-if="!projectView && hasProjectId"

style="margin-left: 8px; min-height: 23px; margin-bottom: 4px"

:checked-children="$t('label.projects')"

:un-checked-children="$t('label.projects')"

:checked="$store.getters.listAllProjects"

@change="(checked, event) => { $store.dispatch('SetListAllProjects', checked) }"/>

</template>

</breadcrumb>

</a-col>

<a-col

:span="device === 'mobile' ? 24 : 12"

:style="device === 'mobile' ? { float: 'right', 'margin-top': '12px', 'margin-bottom': '-6px', display: 'table' } : { float: 'right', display: 'table', 'margin-top': '6px' }" >

<slot name="action" v-if="dataView && $route.path.startsWith('/publicip')"></slot>

<action-button

v-else

:style="dataView ? { float: device === 'mobile' ? 'left' : 'right' } : { 'margin-right': '10px', display: getStyle() }"

:loading="loading"

:actions="actions"

:selectedRowKeys="selectedRowKeys"

:selectedItems="selectedItems"

:dataView="dataView"

:resource="resource"

@exec-action="(action) => execAction(action, action.groupAction && !dataView)"/>

<search-view

v-if="!dataView"

:searchFilters="searchFilters"

:searchParams="searchParams"

:apiName="apiName"

@search="onSearch"

@change-filter="changeFilter"/>

</a-col>

</a-row>

<a-row

v-if="showSearchFilters"

style="min-height: 36px; padding-top: 12px; padding-left: 12px;"

>

<search-filter

:filters="activeFiltersList"

:apiName="apiName"

@removeFilter="removeFilter"

/>

</a-row>

</a-card>

</a-affix>

<div v-show="showAction">

<keep-alive v-if="currentAction.component && (!currentAction.groupAction || selectedRowKeys.length === 0 || (this.selectedRowKeys.length > 0 && currentAction.api === 'destroyVirtualMachine'))">

<a-modal

:visible="showAction"

:closable="true"

:maskClosable="false"

:cancelText="$t('label.cancel')"

style="top: 20px;"

@cancel="cancelAction"

:confirmLoading="actionLoading"

:footer="null"

centered

width="auto"

>

<template #title>

<span v-if="currentAction.label">{{ $t(currentAction.label) }}</span>

<a

v-if="currentAction.docHelp || $route.meta.docHelp"

style="margin-left: 5px"

:href="$config.docBase + '/' + (currentAction.docHelp || $route.meta.docHelp)"

target="_blank">

<question-circle-outlined />

</a>

</template>

<keep-alive>

<component

:is="currentAction.component"

:resource="resource"

:loading="loading"

:action="{currentAction}"

:selectedRowKeys="selectedRowKeys"

:selectedItems="selectedItems"

:chosenColumns="chosenColumns"

v-bind="{currentAction}"

@refresh-data="fetchData"

@poll-action="pollActionCompletion"

@close-action="closeAction"

@cancel-bulk-action="handleCancel"/>

</keep-alive>

</a-modal>

</keep-alive>

<a-modal

v-else

:visible="showAction"

:closable="true"

:maskClosable="false"

:footer="null"

style="top: 20px;"

:width="modalWidth"

:ok-button-props="getOkProps()"

:cancel-button-props="getCancelProps()"

:confirmLoading="actionLoading"

@cancel="cancelAction"

centered

>

<template #title>

<span v-if="currentAction.label">{{ $t(currentAction.label) }}</span>

<a

v-if="currentAction.docHelp || $route.meta.docHelp"

style="margin-left: 5px"

:href="$config.docBase + '/' + (currentAction.docHelp || $route.meta.docHelp)"

target="_blank">

<question-circle-outlined />

</a>

</template>

<a-spin :spinning="actionLoading" v-ctrl-enter="handleSubmit">

<span v-if="currentAction.message">

<div v-if="selectedRowKeys.length > 0">

<a-alert

v-if="['delete-outlined', 'DeleteOutlined', 'poweroff-outlined', 'PoweroffOutlined'].includes(currentAction.icon)"

type="error">

<template #message>

<exclamation-circle-outlined style="color: red; fontSize: 30px; display: inline-flex" />

<span style="padding-left: 5px" v-html="`<b>${selectedRowKeys.length} ` + $t('label.items.selected') + `. </b>`" />

<span v-html="currentAction.message" />

</template>

</a-alert>

<a-alert v-else type="warning">

<template #message>

<span v-if="selectedRowKeys.length > 0" v-html="`<b>${selectedRowKeys.length} ` + $t('label.items.selected') + `. </b>`" />

<span v-html="currentAction.message" />

</template>

</a-alert>

</div>

<div v-else>

<a-alert type="warning">

<template #message>

<span v-html="currentAction.message" />

</template>

</a-alert>

</div>

<div v-if="selectedRowKeys.length > 0">

<a-divider />

<a-table

v-if="selectedRowKeys.length > 0"

size="middle"

:columns="chosenColumns"

:dataSource="selectedItems"

:rowKey="(record, idx) => record.id || record.name || record.usageType || idx + '-' + Math.random()"

:pagination="true"

style="overflow-y: auto"

>

<template #bodyCell="{ column, text }">

<template v-if="column.key === 'allocated' && ['asnumbers', 'publicip'].includes($route.meta.name)">

{{ $toLocaleDate(text) }}

</template>

</template>

</a-table>

</div>

<br v-if="currentAction.paramFields.length > 0"/>

</span>

<a-form

:ref="formRef"

:model="form"

:rules="rules"

@finish="handleSubmit"

layout="vertical">

<div v-for="(field, fieldIndex) in currentAction.paramFields" :key="fieldIndex">

<a-form-item

:name="field.name"

:ref="field.name"

:v-bind="field.name"

v-if="!(currentAction.mapping && field.name in currentAction.mapping && currentAction.mapping[field.name].value)"

>

<template #label>

<tooltip-label

v-if="['domain', 'guestcidraddress'].includes(field.name) && ['createZone', 'updateZone'].includes(currentAction.api)"

:title="$t('label.default.network.' + field.name + '.isolated.network')"

:tooltip="field.description"/>

<tooltip-label v-else :title="$t('label.' + field.name)" :tooltip="field.description"/>

</template>

<a-switch

v-if="field.type==='boolean'"

v-model:checked="form[field.name]"

:placeholder="field.description"

v-focus="fieldIndex === firstIndex"

/>

<a-select

v-else-if="currentAction.mapping && field.name in currentAction.mapping && currentAction.mapping[field.name].options"

:loading="field.loading"

v-model:value="form[field.name]"

:placeholder="field.description"

v-focus="fieldIndex === firstIndex"

showSearch

optionFilterProp="label"

:filterOption="(input, option) => {

return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0

}"

>

<a-select-option key="" label="">{{ }}</a-select-option>

<a-select-option

v-for="(opt, optIndex) in currentAction.mapping[field.name].options"

:key="optIndex"

:label="opt">

{{ opt }}

</a-select-option>

</a-select>

<a-select

v-else-if="field.name==='keypair' ||

(field.name==='account' && !['addAccountToProject', 'createAccount'].includes(currentAction.api))"

showSearch

optionFilterProp="label"

v-model:value="form[field.name]"

:loading="field.loading"

:placeholder="field.description"

:filterOption="(input, option) => {

return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0

}"

v-focus="fieldIndex === firstIndex"

>

<a-select-option key="" label="">{{ }}</a-select-option>

<a-select-option

v-for="(opt, optIndex) in field.opts"

:key="optIndex"

:label="opt.name || opt.description || opt.traffictype || opt.publicip">

{{ opt.name || opt.description || opt.traffictype || opt.publicip }}

</a-select-option>

</a-select>

<a-select

v-else-if="field.type==='uuid'"

showSearch

optionFilterProp="label"

v-model:value="form[field.name]"

:loading="field.loading"

:placeholder="field.description"

:filterOption="(input, option) => {

return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0

}"

v-focus="fieldIndex === firstIndex"

>

<a-select-option key="" label="">{{ }}</a-select-option>

<a-select-option v-for="opt in field.opts" :key="opt.id" :label="opt.name || opt.description || opt.traffictype || opt.publicip">

<div>

<span v-if="(field.name.startsWith('template') || field.name.startsWith('iso'))">

<span v-if="opt.icon">

<resource-icon :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>

</span>

<os-logo v-else :osId="opt.ostypeid" :osName="opt.ostypename" size="lg" style="margin-left: -1px" />

</span>

<span v-if="(field.name.startsWith('zone'))">

<span v-if="opt.icon">

<resource-icon :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>

</span>

<global-outlined v-else style="margin-right: 5px" />

</span>

<span v-if="(field.name.startsWith('project'))">

<span v-if="opt.icon">

<resource-icon :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>

</span>

<project-outlined v-else style="margin-right: 5px" />

</span>

<span v-if="(field.name.startsWith('account') || field.name.startsWith('user'))">

<span v-if="opt.icon">

<resource-icon :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>

</span>

<user-outlined v-else style="margin-right: 5px"/>

</span>

<span v-if="(field.name.startsWith('network'))">

<span v-if="opt.icon">

<resource-icon :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>

</span>

<apartment-outlined v-else style="margin-right: 5px"/>

</span>

<span v-if="(field.name.startsWith('domain'))">

<span v-if="opt.icon">

<resource-icon :image="opt.icon.base64image" size="1x" style="margin-right: 5px"/>

</span>

<block-outlined v-else style="margin-right: 5px"/>

</span>

{{ opt.name || opt.description || opt.traffictype || opt.publicip }}

</div>

</a-select-option>

</a-select>

<a-select

v-else-if="field.type==='list'"

:loading="field.loading"

mode="multiple"

v-model:value="form[field.name]"

:placeholder="field.description"

v-focus="fieldIndex === firstIndex"

showSearch

optionFilterProp="label"

:filterOption="(input, option) => {

return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0

}"

>

<a-select-option

v-for="(opt, optIndex) in field.opts"

:key="optIndex"

:label="opt.name && opt.type ? opt.name + ' (' + opt.type + ')' : opt.name || opt.description">

{{ opt.name && opt.type ? opt.name + ' (' + opt.type + ')' : opt.name || opt.description }}

</a-select-option>

</a-select>

<a-input-number

v-else-if="field.type==='long'"

v-focus="fieldIndex === firstIndex"

style="width: 100%;"

v-model:value="form[field.name]"

:placeholder="field.description"

/>

<a-input-password

v-else-if="field.name==='password' || field.name==='currentpassword' || field.name==='confirmpassword'"

v-model:value="form[field.name]"

:placeholder="field.description"

@blur="($event) => handleConfirmBlur($event, field.name)"

v-focus="fieldIndex === firstIndex"

/>

<a-textarea

v-else-if="field.name==='certificate' || field.name==='privatekey' || field.name==='certchain'"

rows="2"

v-model:value="form[field.name]"

:placeholder="field.description"

v-focus="fieldIndex === firstIndex"

/>

<a-input

v-else

v-focus="fieldIndex === firstIndex"

v-model:value="form[field.name]"

:placeholder="field.description" />

</a-form-item>

</div>

<div :span="24" class="action-button">

<a-button @click="closeAction">{{ $t('label.cancel') }}</a-button>

<a-button type="primary" @click="handleSubmit" ref="submit">{{ $t('label.ok') }}</a-button>

</div>

</a-form>

</a-spin>

<br />

</a-modal>

</div>

<div :style="this.$store.getters.shutdownTriggered ? 'margin-top: 24px; margin-bottom: 12px' : null">

<div v-if="dataView">

<slot name="resource" v-if="$route.path.startsWith('/quotasummary') || $route.path.startsWith('/publicip')"></slot>

<resource-view

v-else

:resource="resource"

:loading="loading"

:tabs="$route.meta.tabs" />

</div>

<div class="row-element" v-else>

<list-view

:loading="loading"

:columns="columns"

:items="items"

:actions="actions"

:currentPage="page"

:pageSize="pageSize"

:columnKeys="columnKeys"

:selectedColumns="selectedColumns"

ref="listview"

@update-selected-columns="updateSelectedColumns"

@selection-change="onRowSelectionChange"

@refresh="fetchData"

/>

<a-pagination

class="row-element"

style="margin-top: 10px"

size="small"

:current="page"

:pageSize="pageSize"

:total="itemCount"

:showTotal="total => `${$t('label.showing')} ${Math.min(total, 1+((page-1)*pageSize))}-${Math.min(page*pageSize, total)} ${$t('label.of')} ${total} ${$t('label.items')}`"

:pageSizeOptions="pageSizeOptions"

@change="changePage"

@showSizeChange="changePageSize"

showSizeChanger

showQuickJumper>

<template #buildOptionText="props">

<span>{{ props.value }} / {{ $t('label.page') }}</span>

</template>

</a-pagination>

</div>

</div>

<bulk-action-progress

:showGroupActionModal="showGroupActionModal"

:selectedItems="selectedItems"

:selectedColumns="bulkColumns"

:message="modalInfo"

@handle-cancel="handleCancel" />

</div>

</template>

<script>

import { ref, reactive, toRaw, h } from 'vue'

import { Button } from 'ant-design-vue'

import { api } from '@/api'

import { mixinDevice } from '@/utils/mixin.js'

import { genericCompare } from '@/utils/sort.js'

import { sourceToken } from '@/utils/request'

import store from '@/store'

import eventBus from '@/config/eventBus'

import Breadcrumb from '@/components/widgets/Breadcrumb'

import ListView from '@/components/view/ListView'

import ResourceView from '@/components/view/ResourceView'

import ActionButton from '@/components/view/ActionButton'

import SearchView from '@/components/view/SearchView'

import SearchFilter from '@/components/view/SearchFilter'

import OsLogo from '@/components/widgets/OsLogo'

import ResourceIcon from '@/components/view/ResourceIcon'

import BulkActionProgress from '@/components/view/BulkActionProgress'

import TooltipLabel from '@/components/widgets/TooltipLabel'

export default {

name: 'Resource',

components: {

Breadcrumb,

ResourceView,

ListView,

ActionButton,

SearchView,

SearchFilter,

BulkActionProgress,

TooltipLabel,

OsLogo,

ResourceIcon

},

mixins: [mixinDevice],

provide: function () {

return {

parentFetchData: this.fetchData,

parentToggleLoading: this.toggleLoading,

parentStartLoading: this.startLoading,

parentFinishLoading: this.finishLoading,

parentSearch: this.onSearch,

parentChangeFilter: this.changeFilter,

parentChangeResource: this.changeResource,

parentPollActionCompletion: this.pollActionCompletion

}

},

data () {

return {

apiName: '',

loading: false,

actionLoading: false,

columnKeys: [],

allColumns: [],

columns: [],

bulkColumns: [],

selectedColumns: [],

chosenColumns: [],

customColumnsDropdownVisible: false,

showGroupActionModal: false,

selectedItems: [],

items: [],

modalInfo: {},

itemCount: 0,

page: 1,

pageSize: this.$store.getters.defaultListViewPageSize,

resource: {},

selectedRowKeys: [],

currentAction: {},

showAction: false,

dataView: false,

projectView: false,

hasProjectId: false,

selectedFilter: '',

filters: [],

searchFilters: [],

searchParams: {},

actions: [],

confirmDirty: false,

firstIndex: 0,

modalWidth: '30vw',

promises: []

}

},

beforeUnmount () {

eventBus.off('vm-refresh-data')

eventBus.off('async-job-complete')

eventBus.off('exec-action')

},

mounted () {

eventBus.on('exec-action', (args) => {

const { action, isGroupAction } = args

this.execAction(action, isGroupAction)

})

},

created () {

this.formRef = ref()

this.form = reactive({})

this.rules = reactive({})

eventBus.on('vm-refresh-data', () => {

if (this.$route.path === '/vm' || this.$route.path.includes('/vm/')) {

this.fetchData()

}

})

eventBus.on('refresh-icon', () => {

if (this.$showIcon()) {

this.fetchData()

}

})

eventBus.on('async-job-complete', (action) => {

if (this.$route.path.includes('/vm/')) {

if (action && 'api' in action && ['destroyVirtualMachine'].includes(action.api)) {

return

}

}

if ((this.$route.path.includes('/publicip/') && ['firewall', 'portforwarding', 'loadbalancing'].includes(this.$route.query.tab)) ||

(this.$route.path.includes('/guestnetwork/') && (this.$route.query.tab === 'egress.rules' || this.$route.query.tab === 'public.ip.addresses'))) {

return

}

if (this.$route.path.includes('/template/') || this.$route.path.includes('/iso/')) {

return

}

this.fetchData()

})

eventBus.on('update-bulk-job-status', (args) => {

var { items, action } = args

for (const item of items) {

this.$store.getters.headerNotices.map(function (j) {

if (j.jobid === item.jobid) {

j.bulkAction = action

}

})

}

})

eventBus.on('update-resource-state', (args) => {

var {

selectedItems,

resource,

state,

jobid

} = args

if (selectedItems.length === 0) {

return

}

var tempResource = []

this.selectedItems = selectedItems

if (selectedItems && resource) {

if (resource.includes(',')) {

resource = resource.split(',')

tempResource = resource

} else {

tempResource.push(resource)

}

for (var r = 0; r < tempResource.length; r++) {

var objIndex = 0

if (this.$route.path.includes('/template') || this.$route.path.includes('/iso')) {

objIndex = selectedItems.findIndex(obj => (obj.zoneid === tempResource[r]))

} else if (this.$route.path.includes('/router')) {

objIndex = selectedItems.findIndex(obj => (obj.guestnetworkid === tempResource[r]))

} else {

objIndex = selectedItems.findIndex(obj => (obj.id === tempResource[r] || obj.username === tempResource[r] || obj.name === tempResource[r]))

}

if (state && objIndex !== -1) {

this.selectedItems[objIndex].status = state

}

if (jobid && objIndex !== -1) {

this.selectedItems[objIndex].jobid = jobid

}

}

}

})

this.currentPath = this.$route.fullPath

this.fetchData()

if ('projectid' in this.$route.query) {

this.switchProject(this.$route.query.projectid)

}

this.setModalWidthByScreen()

},

beforeRouteUpdate (to, from, next) {

this.currentPath = this.$route.fullPath

next()

},

beforeRouteLeave (to, from, next) {

console.log('DEBUG - Due to route change, ignoring results for any on-going API request', this.apiName)

sourceToken.cancel()

sourceToken.init()

this.currentPath = this.$route.fullPath

next()

},

watch: {

'$route' (to, from) {

if (to.fullPath !== from.fullPath && !to.fullPath.includes('action/') && to?.query?.tab !== 'browser') {

if ('page' in to.query) {

this.page = Number(to.query.page)

this.pageSize = Number(to.query.pagesize)

} else {

this.page = 1

}

this.itemCount = 0

this.fetchData()

if ('projectid' in to.query) {

this.switchProject(to.query.projectid)

}

}

},

'$i18n.locale' (to, from) {

if (to !== from) {

this.fetchData()

}

},

'$store.getters.metrics' (oldVal, newVal) {

this.fetchData()

},

'$store.getters.listAllProjects' (oldVal, newVal) {

this.fetchData()

}

},

computed: {

activeFiltersList () {

const queryParams = Object.assign({}, this.$route.query)

const activeFilters = []

for (const filter in queryParams) {

if (this.$route.name === 'host' && filter === 'type') {

continue

}

if (!filter.startsWith('tags[')) {

activeFilters.push({

key: filter,

value: queryParams[filter],

isTag: false

})

} else if (filter.endsWith('].key')) {

const tagIdx = filter.split('[')[1].split(']')[0]

const tagKey = queryParams[`tags[${tagIdx}].key`]

const tagValue = queryParams[`tags[${tagIdx}].value`]

activeFilters.push({

key: tagKey,

value: tagValue,

isTag: true,

tagIdx: tagIdx

})

}

}

return activeFilters

},

showSearchFilters () {

const excludedKeys = ['page', 'pagesize', 'q', 'keyword', 'tags', 'projectid']

return !this.dataView && this.$config.showSearchFilters && this.activeFiltersList.some(f => !excludedKeys.includes(f.key))

},

hasSelected () {

return this.selectedRowKeys.length > 0

},

pageSizeOptions () {

var sizes = [20, 50, 100, 200, this.$store.getters.defaultListViewPageSize]

if (this.device !== 'desktop') {

sizes.unshift(10)

}

return [...new Set(sizes)].sort(function (a, b) {

return a - b

}).map(String)

},

filterValue () {

if (this.$route.query.filter) {

return this.$route.query.filter

}

const routeName = this.$route.name

if ((this.projectView && routeName === 'vm') || (['Admin', 'DomainAdmin'].includes(this.$store.getters.userInfo.roletype) && ['vm', 'iso', 'template', 'pod', 'cluster', 'host', 'systemvm', 'router', 'storagepool'].includes(routeName)) || ['account', 'guestnetwork', 'guestvlans', 'oauthsetting', 'guestos', 'guestoshypervisormapping', 'kubernetes', 'asnumbers'].includes(routeName)) {

return 'all'

}

if (['publicip'].includes(routeName)) {

return 'allocated'

}

if (['volume'].includes(routeName)) {

return 'user'

}

if (['event', 'computeoffering', 'systemoffering', 'diskoffering', 'quotatariff'].includes(routeName)) {

return 'active'

}

return 'self'

}

},

methods: {

getStyle () {

if (['snapshot', 'vmsnapshot', 'publicip'].includes(this.$route.name)) {

return 'table-cell'

}

return 'inline-flex'

},

getOkProps () {

if (this.selectedRowKeys.length > 0 && this.currentAction?.groupAction) {

} else {

return { props: { type: 'primary' } }

}

},

getCancelProps () {

if (this.selectedRowKeys.length > 0 && this.currentAction?.groupAction) {

return { props: { type: 'primary' } }

} else {

return { props: { type: 'default' } }

}

},

switchProject (projectId) {

if (!projectId || !projectId.length || projectId.length !== 36) {

return

}

api('listProjects', { id: projectId, listall: true, details: 'min' }).then(json => {

if (!json || !json.listprojectsresponse || !json.listprojectsresponse.project) return

const projects = json.listprojectsresponse.project

const project = json.listprojectsresponse.project[0]

this.$store.dispatch('SetProject', project)

this.$store.commit('RELOAD_ALL_PROJECTS', projects)

this.$store.dispatch('ToggleTheme', project.id === undefined ? 'light' : 'dark')

this.$message.success(`${this.$t('message.switch.to')} "${project.name}"`)

const query = Object.assign({}, this.$route.query)

delete query.projectid

this.$router.replace({ query })

})

},

fetchData (params = {}) {

if (['deployVirtualMachine', 'usage'].includes(this.$route.name)) {

return

}

if (this.routeName !== this.$route.name) {

this.routeName = this.$route.name

this.items = []

}

if (!this.routeName) {

this.routeName = this.$route.matched[this.$route.matched.length - 1].meta.name

}

this.apiName = ''

this.actions = []

this.columns = []

this.columnKeys = []

this.selectedColumns = []

const refreshed = ('irefresh' in params)

params.listall = true

if (this.$route.meta.params) {

const metaParams = this.$route.meta.params

if (typeof metaParams === 'function') {

Object.assign(params, metaParams())

} else {

Object.assign(params, metaParams)

}

}

if (['Admin', 'DomainAdmin'].includes(this.$store.getters.userInfo.roletype) &&

'templatefilter' in params && (['template'].includes(this.routeName))) {

params.templatefilter = 'all'

}

if (['Admin', 'DomainAdmin'].includes(this.$store.getters.userInfo.roletype) &&

'isofilter' in params && this.routeName === 'iso') {

params.isofilter = 'all'

}

if (['Admin', 'DomainAdmin'].includes(this.$store.getters.userInfo.roletype) && ['computeoffering', 'systemoffering', 'diskoffering'].includes(this.routeName) && this.$route.params.id) {

params.state = 'all'

}

if (Object.keys(this.$route.query).length > 0) {

if ('page' in this.$route.query) {

this.page = Number(this.$route.query.page)

}

if ('pagesize' in this.$route.query) {

this.pagesize = Number(this.$route.query.pagesize)

}

Object.assign(params, this.$route.query)

}

delete params.q

delete params.filter

delete params.irefresh

this.searchFilters = this.$route && this.$route.meta && this.$route.meta.searchFilters

this.filters = this.$route && this.$route.meta && this.$route.meta.filters

if (typeof this.filters === 'function') {

this.filters = this.filters()

}

if (typeof this.searchFilters === 'function') {

this.searchFilters = this.searchFilters()

}

this.projectView = Boolean(store.getters.project && store.getters.project.id)

this.hasProjectId = ['vm', 'vmgroup', 'ssh', 'affinitygroup', 'userdata', 'volume', 'snapshot', 'buckets', 'vmsnapshot', 'guestnetwork',

'vpc', 'securitygroups', 'publicip', 'vpncustomergateway', 'template', 'iso', 'event', 'kubernetes', 'sharedfs',

'autoscalevmgroup', 'vnfapp', 'webhook'].includes(this.$route.name)

if ((this.$route && this.$route.params && this.$route.params.id) || this.$route.query.dataView) {

this.dataView = true

if (!refreshed) {

this.resource = {}

this.$emit('change-resource', this.resource)

}

} else {

this.dataView = false

}

if (this.dataView && ['Admin'].includes(this.$store.getters.userInfo.roletype) && this.routeName === 'volume') {

params.listsystemvms = true

}

if ('listview' in this.$refs && this.$refs.listview) {

this.$refs.listview.resetSelection()

}

if (this.$route && this.$route.meta && this.$route.meta.permission) {

this.apiName = this.$route.meta.permission[0]

if (!store.getters.metrics && !this.dataView &&

this.apiName && this.apiName.endsWith('Metrics') &&

store.getters.apis[this.apiName.replace(/Metrics$/, '')]) {

this.apiName = this.apiName.replace(/Metrics$/, '')

}

if (this.$route.meta.columns) {

const columns = this.$route.meta.columns

if (columns && typeof columns === 'function') {

this.columnKeys = columns(this.$store.getters)

} else {

this.columnKeys = columns

}

}

if (this.$route.meta.actions) {

this.actions = this.$route.meta.actions

}

}

if (this.apiName === '' || this.apiName === undefined) {

return

}

if (!this.columnKeys || this.columnKeys.length === 0) {

for (const field of store.getters.apis[this.apiName].response) {

this.columnKeys.push(field.name)

}

this.columnKeys = [...new Set(this.columnKeys)]

this.columnKeys.sort(function (a, b) {

if (a === 'name' && b !== 'name') { return -1 }

if (a < b) { return -1 }

if (a > b) { return 1 }

return 0

})

}

const customRender = {}

for (var columnKey of this.columnKeys) {

let key = columnKey

let title = columnKey === 'cidr' && this.columnKeys.includes('ip6cidr') ? 'ipv4.cidr' : columnKey

if (typeof columnKey === 'object') {

if ('customTitle' in columnKey && 'field' in columnKey) {

key = columnKey.field

title = columnKey.customTitle

customRender[key] = columnKey[key]

} else {

key = Object.keys(columnKey)[0]

title = Object.keys(columnKey)[0]

customRender[key] = columnKey[key]

}

}

this.columns.push({

key: key,

title: this.$t('label.' + String(title).toLowerCase()),

dataIndex: key,

sorter: (a, b) => genericCompare(a[key] || '', b[key] || '')

})

this.selectedColumns.push(key)

}

this.allColumns = this.columns

if (!store.getters.metrics) {

if (!this.$store.getters.customColumns[this.$store.getters.userInfo.id]) {

this.$store.getters.customColumns[this.$store.getters.userInfo.id] = {}

this.$store.getters.customColumns[this.$store.getters.userInfo.id][this.$route.path] = this.selectedColumns

} else {

this.selectedColumns = this.$store.getters.customColumns[this.$store.getters.userInfo.id][this.$route.path] || this.selectedColumns

if (this.$store.getters.listAllProjects && !this.projectView) {

this.selectedColumns.push('project')

}

this.updateSelectedColumns()

}

}

this.chosenColumns = this.columns.filter(column => {

return ![this.$t('label.state'), this.$t('label.hostname'), this.$t('label.hostid'), this.$t('label.zonename'),

this.$t('label.zone'), this.$t('label.zoneid'), this.$t('label.ip'), this.$t('label.ipaddress'), this.$t('label.privateip'),

this.$t('label.linklocalip'), this.$t('label.size'), this.$t('label.sizegb'), this.$t('label.current'),

this.$t('label.created'), this.$t('label.order')].includes(column.title)

})

this.chosenColumns.splice(this.chosenColumns.length - 1, 1)

if (['listTemplates', 'listIsos'].includes(this.apiName) && this.dataView) {

delete params.showunique

}

if (['listVirtualMachinesMetrics'].includes(this.apiName) && this.dataView) {

delete params.details

delete params.isvnf

params.details = 'group,nics,secgrp,tmpl,servoff,diskoff,iso,volume,affgrp,backoff'

}

this.loading = true

if (this.$route.params && this.$route.params.id) {

params.id = this.$route.params.id

if (['listNetworks'].includes(this.apiName) && 'displaynetwork' in this.$route.query) {

params.displaynetwork = this.$route.query.displaynetwork

}

if (['listSSHKeyPairs'].includes(this.apiName)) {

if (!this.$isValidUuid(params.id)) {

delete params.id

params.name = this.$route.params.id

}

}

if (['listPublicIpAddresses'].includes(this.apiName)) {

params.allocatedonly = false

}

if (this.$route.path.startsWith('/vmsnapshot/')) {

params.vmsnapshotid = this.$route.params.id

} else if (this.$route.path.startsWith('/ldapsetting/')) {

params.hostname = this.$route.params.id

}

if (this.$route.path.startsWith('/tungstenpolicy/')) {

params.policyuuid = this.$route.params.id

}

if (this.$route.path.startsWith('/tungstenpolicyset/')) {

params.applicationpolicysetuuid = this.$route.params.id

}

if (this.$route.path.startsWith('/tungstennetworkroutertable/')) {

params.tungstennetworkroutetableuuid = this.$route.params.id

}

if (this.$route.path.startsWith('/tungsteninterfaceroutertable/')) {