| // 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> |
| <span :style="styleSearch"> |
| <span v-if="!searchFilters || searchFilters.length === 0" style="display: flex;"> |
| <a-input-search |
| v-model:value="searchQuery" |
| :placeholder="$t('label.search')" |
| allowClear |
| @search="onSearch" |
| /> |
| </span> |
| |
| <span |
| v-else |
| class="filter-group"> |
| <a-input-search |
| allowClear |
| class="input-search" |
| :placeholder="$t('label.search')" |
| v-model:value="searchQuery" |
| @search="onSearch"> |
| <template #addonBefore> |
| <a-popover |
| placement="bottomRight" |
| trigger="click" |
| v-model:visible="visibleFilter"> |
| <template #content v-if="visibleFilter"> |
| <a-form |
| style="min-width: 170px" |
| :ref="formRef" |
| :model="form" |
| :rules="rules" |
| layout="vertical" |
| @finish="handleSubmit" |
| v-ctrl-enter="handleSubmit"> |
| <a-form-item |
| v-for="(field, index) in fields" |
| :ref="field.name" |
| :name="field.name" |
| :key="index" |
| :label="retrieveFieldLabel(field.name)"> |
| <a-select |
| allowClear |
| v-if="field.type==='list'" |
| v-model:value="form[field.name]" |
| showSearch |
| :dropdownMatchSelectWidth="false" |
| optionFilterProp="label" |
| :filterOption="(input, option) => { |
| return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 |
| }" |
| :loading="field.loading" |
| @input="onchange($event, field.name)" |
| @change="onSelectFieldChange(field.name)"> |
| <a-select-option |
| v-for="(opt, idx) in field.opts" |
| :key="idx" |
| :value="['account'].includes(field.name) ? opt.name : opt.id" |
| :label="$t((['storageid'].includes(field.name) || !opt.path) ? opt.name : opt.path)"> |
| <div> |
| <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('domain') || field.name === 'account' || field.name.startsWith('associatednetwork'))"> |
| <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> |
| <span v-if="(field.name.startsWith('managementserver'))"> |
| <status :text="opt.state" /> |
| </span> |
| {{ $t((['storageid'].includes(field.name) || !opt.path) ? opt.name : opt.path) }} |
| </div> |
| </a-select-option> |
| </a-select> |
| <a-input |
| v-else-if="field.type==='input'" |
| v-model:value="form[field.name]" /> |
| <div v-else-if="field.type==='tag'"> |
| <a-input-group |
| type="text" |
| size="small" |
| compact> |
| <a-input ref="input" v-model:value="inputKey" style="width: 50px; text-align: center" :placeholder="$t('label.key')" /> |
| <a-input |
| class="tag-disabled-input" |
| style=" width: 20px; border-left: 0; pointer-events: none; text-align: center" |
| placeholder="=" |
| disabled /> |
| <a-input v-model:value="inputValue" style="width: 50px; text-align: center; border-left: 0" :placeholder="$t('label.value')" /> |
| <tooltip-button :tooltip="$t('label.clear')" icon="close-outlined" size="small" @onClick="inputKey = inputValue = ''" /> |
| </a-input-group> |
| </div> |
| <a-switch |
| v-else-if="field.type==='boolean'" |
| v-model:checked="form[field.name]" |
| /> |
| <a-auto-complete |
| v-else-if="field.type==='autocomplete'" |
| v-model:value="form[field.name]" |
| :placeholder="$t('message.error.input.value')" |
| :options="field.opts" |
| :filterOption="(inputValue, option) => { |
| return option.value.toLowerCase().indexOf(inputValue.toLowerCase()) !== -1 |
| }" /> |
| </a-form-item> |
| <div class="filter-group-button"> |
| <a-button |
| class="filter-group-button-clear" |
| type="default" |
| size="small" |
| @click="onClear"> |
| <template #icon><stop-outlined /></template> |
| {{ $t('label.reset') }} |
| </a-button> |
| <a-button |
| class="filter-group-button-search" |
| type="primary" |
| size="small" |
| ref="submit" |
| html-type="submit"> |
| <template #icon><search-outlined /></template> |
| {{ $t('label.search') }} |
| </a-button> |
| </div> |
| </a-form> |
| </template> |
| <a-button |
| class="filter-button" |
| size="small" |
| @click="() => { searchQuery = null }"> |
| <filter-two-tone v-if="isFiltered" /> |
| <filter-outlined v-else /> |
| </a-button> |
| </a-popover> |
| </template> |
| </a-input-search> |
| </span> |
| </span> |
| </template> |
| |
| <script> |
| import { ref, reactive, toRaw } from 'vue' |
| import { api } from '@/api' |
| import { isAdmin } from '@/role' |
| import TooltipButton from '@/components/widgets/TooltipButton' |
| import ResourceIcon from '@/components/view/ResourceIcon' |
| import Status from '@/components/widgets/Status' |
| import { i18n } from '@/locales' |
| |
| export default { |
| name: 'SearchView', |
| components: { |
| TooltipButton, |
| ResourceIcon, |
| Status |
| }, |
| props: { |
| searchFilters: { |
| type: Array, |
| default: () => [] |
| }, |
| apiName: { |
| type: String, |
| default: () => '' |
| }, |
| searchParams: { |
| type: Object, |
| default: () => {} |
| } |
| }, |
| data () { |
| return { |
| searchQuery: null, |
| paramsFilter: {}, |
| visibleFilter: false, |
| fields: [], |
| inputKey: null, |
| inputValue: null, |
| fieldValues: {}, |
| isFiltered: false, |
| alertTypes: [] |
| } |
| }, |
| created () { |
| this.formRef = ref() |
| this.form = reactive({}) |
| this.rules = reactive({}) |
| }, |
| watch: { |
| visibleFilter (newValue, oldValue) { |
| if (newValue) { |
| this.initFormFieldData() |
| } |
| }, |
| '$route' (to, from) { |
| this.searchQuery = '' |
| if (to && to.query && 'q' in to.query) { |
| this.searchQuery = to.query.q |
| } |
| this.updateIsFiltered() |
| } |
| }, |
| mounted () { |
| this.searchQuery = '' |
| if (this.$route && this.$route.query && 'q' in this.$route.query) { |
| this.searchQuery = this.$route.query.q |
| } |
| this.updateIsFiltered() |
| }, |
| computed: { |
| styleSearch () { |
| if (!this.searchFilters || this.searchFilters.length === 0) { |
| return { |
| width: '100%', |
| display: 'table-cell' |
| } |
| } |
| |
| return { |
| width: '100%', |
| display: 'table-cell', |
| lineHeight: '31px' |
| } |
| } |
| }, |
| methods: { |
| onchange: async function (event, fieldname) { |
| this.fetchDynamicFieldData(fieldname, event.target.value) |
| }, |
| onSelectFieldChange (fieldname) { |
| const fetchAccountOptions = fieldname === 'domainid' && this.fields.some((field) => field.name === 'account') |
| if (fetchAccountOptions) { |
| this.fetchDynamicFieldData('account') |
| } |
| }, |
| onVisibleForm () { |
| this.visibleFilter = !this.visibleFilter |
| if (!this.visibleFilter) return |
| this.initFormFieldData() |
| }, |
| retrieveFieldLabel (fieldName) { |
| if (fieldName === 'groupid') { |
| fieldName = 'group' |
| } |
| if (fieldName === 'keyword') { |
| if ('listAnnotations' in this.$store.getters.apis) { |
| return this.$t('label.annotation') |
| } else { |
| return this.$t('label.name') |
| } |
| } |
| return this.$t('label.' + fieldName) |
| }, |
| initFields () { |
| const arrayField = [] |
| this.fields = [] |
| this.searchFilters.forEach(item => { |
| let type = 'input' |
| |
| if (item === 'domainid' && !('listDomains' in this.$store.getters.apis)) { |
| return true |
| } |
| if (item === 'account' && !('listAccounts' in this.$store.getters.apis)) { |
| return true |
| } |
| if (item === 'account' && !('addAccountToProject' in this.$store.getters.apis || 'createAccount' in this.$store.getters.apis)) { |
| return true |
| } |
| if (item === 'podid' && !('listPods' in this.$store.getters.apis)) { |
| return true |
| } |
| if (item === 'clusterid' && !('listClusters' in this.$store.getters.apis)) { |
| return true |
| } |
| if (item === 'groupid' && !('listInstanceGroups' in this.$store.getters.apis)) { |
| return true |
| } |
| if (item === 'associatednetworkid' && this.$route.meta.name === 'asnumbers') { |
| item = 'networkid' |
| } |
| if (item === 'usagetype' && !('listUsageTypes' in this.$store.getters.apis)) { |
| return true |
| } |
| if (item === 'isencrypted' && !('listVolumes' in this.$store.getters.apis)) { |
| return true |
| } |
| if (item === 'displaynetwork' && this.$store.getters.userInfo.roletype !== 'Admin') { |
| return true |
| } |
| if (['zoneid', 'domainid', 'imagestoreid', 'storageid', 'state', 'account', 'hypervisor', 'level', |
| 'clusterid', 'podid', 'groupid', 'entitytype', 'accounttype', 'systemvmtype', 'scope', 'provider', |
| 'type', 'scope', 'managementserverid', 'serviceofferingid', |
| 'diskofferingid', 'networkid', 'usagetype', 'restartrequired', |
| 'displaynetwork', 'arch'].includes(item) |
| ) { |
| type = 'list' |
| } else if (item === 'tags') { |
| type = 'tag' |
| } else if (['resourcetype', 'apikeyaccess'].includes(item)) { |
| type = 'autocomplete' |
| } else if (item === 'isencrypted') { |
| type = 'boolean' |
| } |
| |
| this.fields.push({ |
| type: type, |
| name: item, |
| opts: [], |
| loading: false |
| }) |
| arrayField.push(item) |
| }) |
| return arrayField |
| }, |
| fetchStaticFieldData (arrayField) { |
| if (arrayField.includes('displaynetwork')) { |
| const typeIndex = this.fields.findIndex(item => item.name === 'displaynetwork') |
| this.fields[typeIndex].loading = true |
| this.fields[typeIndex].opts = this.fetchBoolean() |
| this.fields[typeIndex].loading = false |
| } |
| if (arrayField.includes('type')) { |
| if (this.$route.path === '/guestnetwork' || this.$route.path.includes('/guestnetwork/')) { |
| const typeIndex = this.fields.findIndex(item => item.name === 'type') |
| this.fields[typeIndex].loading = true |
| this.fields[typeIndex].opts = this.fetchGuestNetworkTypes() |
| this.fields[typeIndex].loading = false |
| } else if (this.$route.path === '/role' || this.$route.path.includes('/role/')) { |
| const typeIndex = this.fields.findIndex(item => item.name === 'type') |
| this.fields[typeIndex].loading = true |
| this.fields[typeIndex].opts = this.fetchRoleTypes() |
| this.fields[typeIndex].loading = false |
| } |
| } |
| |
| if (arrayField.includes('scope')) { |
| const scopeIndex = this.fields.findIndex(item => item.name === 'scope') |
| this.fields[scopeIndex].loading = true |
| this.fields[scopeIndex].opts = this.fetchScope() |
| this.fields[scopeIndex].loading = false |
| } |
| |
| if (arrayField.includes('state')) { |
| const stateIndex = this.fields.findIndex(item => item.name === 'state') |
| this.fields[stateIndex].loading = true |
| this.fields[stateIndex].opts = this.fetchState() |
| this.fields[stateIndex].loading = false |
| } |
| |
| if (arrayField.includes('level')) { |
| const levelIndex = this.fields.findIndex(item => item.name === 'level') |
| this.fields[levelIndex].loading = true |
| this.fields[levelIndex].opts = this.fetchLevel() |
| this.fields[levelIndex].loading = false |
| } |
| |
| if (arrayField.includes('entitytype')) { |
| const entityTypeIndex = this.fields.findIndex(item => item.name === 'entitytype') |
| this.fields[entityTypeIndex].loading = true |
| this.fields[entityTypeIndex].opts = this.fetchEntityType() |
| this.fields[entityTypeIndex].loading = false |
| } |
| |
| if (arrayField.includes('accounttype')) { |
| const accountTypeIndex = this.fields.findIndex(item => item.name === 'accounttype') |
| this.fields[accountTypeIndex].loading = true |
| this.fields[accountTypeIndex].opts = this.fetchAccountTypes() |
| this.fields[accountTypeIndex].loading = false |
| } |
| |
| if (arrayField.includes('systemvmtype')) { |
| const systemVmTypeIndex = this.fields.findIndex(item => item.name === 'systemvmtype') |
| this.fields[systemVmTypeIndex].loading = true |
| this.fields[systemVmTypeIndex].opts = this.fetchSystemVmTypes() |
| this.fields[systemVmTypeIndex].loading = false |
| } |
| |
| if (arrayField.includes('scope')) { |
| const scopeIndex = this.fields.findIndex(item => item.name === 'scope') |
| this.fields[scopeIndex].loading = true |
| this.fields[scopeIndex].opts = this.fetchStoragePoolScope() |
| this.fields[scopeIndex].loading = false |
| } |
| |
| if (arrayField.includes('provider')) { |
| const providerIndex = this.fields.findIndex(item => item.name === 'provider') |
| this.fields[providerIndex].loading = true |
| this.fields[providerIndex].opts = this.fetchImageStoreProviders() |
| this.fields[providerIndex].loading = false |
| } |
| |
| if (arrayField.includes('restartrequired')) { |
| const restartRequiredIndex = this.fields.findIndex(item => item.name === 'restartrequired') |
| this.fields[restartRequiredIndex].loading = true |
| this.fields[restartRequiredIndex].opts = [ |
| { id: 'true', name: 'label.yes' }, |
| { id: 'false', name: 'label.no' } |
| ] |
| this.fields[restartRequiredIndex].loading = false |
| } |
| |
| if (arrayField.includes('resourcetype')) { |
| const resourceTypeIndex = this.fields.findIndex(item => item.name === 'resourcetype') |
| this.fields[resourceTypeIndex].loading = true |
| this.fields[resourceTypeIndex].opts = [ |
| { value: 'Account' }, |
| { value: 'Domain' }, |
| { value: 'Iso' }, |
| { value: 'Network' }, |
| { value: 'Template' }, |
| { value: 'User' }, |
| { value: 'VirtualMachine' }, |
| { value: 'Volume' }, |
| { value: 'QuotaTariff' } |
| ] |
| this.fields[resourceTypeIndex].loading = false |
| } |
| |
| if (arrayField.includes('apikeyaccess')) { |
| const apiKeyAccessIndex = this.fields.findIndex(item => item.name === 'apikeyaccess') |
| this.fields[apiKeyAccessIndex].loading = true |
| this.fields[apiKeyAccessIndex].opts = [ |
| { value: 'Disabled' }, |
| { value: 'Enabled' }, |
| { value: 'Inherit' } |
| ] |
| this.fields[apiKeyAccessIndex].loading = false |
| } |
| |
| if (arrayField.includes('arch')) { |
| const typeIndex = this.fields.findIndex(item => item.name === 'arch') |
| this.fields[typeIndex].loading = true |
| this.fields[typeIndex].opts = this.$fetchCpuArchitectureTypes() |
| this.fields[typeIndex].loading = false |
| } |
| }, |
| async fetchDynamicFieldData (arrayField, searchKeyword) { |
| const promises = [] |
| let typeIndex = -1 |
| let zoneIndex = -1 |
| let domainIndex = -1 |
| let accountIndex = -1 |
| let hypervisorIndex = -1 |
| let imageStoreIndex = -1 |
| let storageIndex = -1 |
| let podIndex = -1 |
| let clusterIndex = -1 |
| let groupIndex = -1 |
| let managementServerIdIndex = -1 |
| let serviceOfferingIndex = -1 |
| let diskOfferingIndex = -1 |
| let networkIndex = -1 |
| let usageTypeIndex = -1 |
| let volumeIndex = -1 |
| |
| if (arrayField.includes('type')) { |
| if (this.$route.path === '/alert') { |
| typeIndex = this.fields.findIndex(item => item.name === 'type') |
| this.fields[typeIndex].loading = true |
| promises.push(await this.fetchAlertTypes()) |
| } else if (this.$route.path === '/affinitygroup') { |
| typeIndex = this.fields.findIndex(item => item.name === 'type') |
| this.fields[typeIndex].loading = true |
| promises.push(await this.fetchAffinityGroupTypes()) |
| } |
| } |
| |
| if (arrayField.includes('zoneid')) { |
| zoneIndex = this.fields.findIndex(item => item.name === 'zoneid') |
| this.fields[zoneIndex].loading = true |
| promises.push(await this.fetchZones(searchKeyword)) |
| } |
| |
| if (arrayField.includes('domainid')) { |
| domainIndex = this.fields.findIndex(item => item.name === 'domainid') |
| this.fields[domainIndex].loading = true |
| promises.push(await this.fetchDomains(searchKeyword)) |
| } |
| |
| if (arrayField.includes('account')) { |
| accountIndex = this.fields.findIndex(item => item.name === 'account') |
| this.fields[accountIndex].loading = true |
| promises.push(await this.fetchAccounts(searchKeyword)) |
| } |
| |
| if (arrayField.includes('hypervisor')) { |
| hypervisorIndex = this.fields.findIndex(item => item.name === 'hypervisor') |
| this.fields[hypervisorIndex].loading = true |
| promises.push(await this.fetchHypervisors()) |
| } |
| |
| if (arrayField.includes('imagestoreid')) { |
| imageStoreIndex = this.fields.findIndex(item => item.name === 'imagestoreid') |
| this.fields[imageStoreIndex].loading = true |
| promises.push(await this.fetchImageStores(searchKeyword)) |
| } |
| |
| if (arrayField.includes('storageid')) { |
| storageIndex = this.fields.findIndex(item => item.name === 'storageid') |
| this.fields[storageIndex].loading = true |
| promises.push(await this.fetchStoragePools(searchKeyword)) |
| } |
| |
| if (arrayField.includes('podid')) { |
| podIndex = this.fields.findIndex(item => item.name === 'podid') |
| this.fields[podIndex].loading = true |
| promises.push(await this.fetchPods(searchKeyword)) |
| } |
| |
| if (arrayField.includes('clusterid')) { |
| clusterIndex = this.fields.findIndex(item => item.name === 'clusterid') |
| this.fields[clusterIndex].loading = true |
| promises.push(await this.fetchClusters(searchKeyword)) |
| } |
| |
| if (arrayField.includes('groupid')) { |
| groupIndex = this.fields.findIndex(item => item.name === 'groupid') |
| this.fields[groupIndex].loading = true |
| promises.push(await this.fetchInstanceGroups(searchKeyword)) |
| } |
| |
| if (arrayField.includes('managementserverid')) { |
| managementServerIdIndex = this.fields.findIndex(item => item.name === 'managementserverid') |
| this.fields[managementServerIdIndex].loading = true |
| promises.push(await this.fetchManagementServers(searchKeyword)) |
| } |
| |
| if (arrayField.includes('serviceofferingid')) { |
| serviceOfferingIndex = this.fields.findIndex(item => item.name === 'serviceofferingid') |
| this.fields[serviceOfferingIndex].loading = true |
| promises.push(await this.fetchServiceOfferings(searchKeyword)) |
| } |
| |
| if (arrayField.includes('diskofferingid')) { |
| diskOfferingIndex = this.fields.findIndex(item => item.name === 'diskofferingid') |
| this.fields[diskOfferingIndex].loading = true |
| promises.push(await this.fetchDiskOfferings(searchKeyword)) |
| } |
| |
| if (arrayField.includes('networkid')) { |
| networkIndex = this.fields.findIndex(item => item.name === 'networkid') |
| this.fields[networkIndex].loading = true |
| promises.push(await this.fetchNetworks(searchKeyword)) |
| } |
| |
| if (arrayField.includes('usagetype')) { |
| usageTypeIndex = this.fields.findIndex(item => item.name === 'usagetype') |
| this.fields[usageTypeIndex].loading = true |
| promises.push(await this.fetchUsageTypes()) |
| } |
| |
| if (arrayField.includes('isencrypted')) { |
| volumeIndex = this.fields.findIndex(item => item.name === 'isencrypted') |
| this.fields[volumeIndex].loading = true |
| promises.push(await this.fetchVolumes(searchKeyword)) |
| } |
| |
| Promise.all(promises).then(response => { |
| if (typeIndex > -1) { |
| const types = response.filter(item => item.type === 'type') |
| if (types && types.length > 0) { |
| this.fields[typeIndex].opts = this.sortArray(types[0].data) |
| } |
| } |
| if (zoneIndex > -1) { |
| const zones = response.filter(item => item.type === 'zoneid') |
| if (zones && zones.length > 0) { |
| this.fields[zoneIndex].opts = this.sortArray(zones[0].data) |
| } |
| } |
| if (domainIndex > -1) { |
| const domain = response.filter(item => item.type === 'domainid') |
| if (domain && domain.length > 0) { |
| this.fields[domainIndex].opts = this.sortArray(domain[0].data, 'path') |
| } |
| } |
| if (accountIndex > -1) { |
| const account = response.filter(item => item.type === 'account') |
| if (account && account.length > 0) { |
| this.fields[accountIndex].opts = this.sortArray(account[0].data, 'name') |
| } |
| } |
| if (hypervisorIndex > -1) { |
| const hypervisor = response.filter(item => item.type === 'hypervisor') |
| if (hypervisor && hypervisor.length > 0) { |
| this.fields[hypervisorIndex].opts = this.sortArray(hypervisor[0].data, 'name') |
| } |
| } |
| if (imageStoreIndex > -1) { |
| const imageStore = response.filter(item => item.type === 'imagestoreid') |
| if (imageStore && imageStore.length > 0) { |
| this.fields[imageStoreIndex].opts = this.sortArray(imageStore[0].data, 'name') |
| } |
| } |
| if (storageIndex > -1) { |
| const storagePool = response.filter(item => item.type === 'storageid') |
| if (storagePool && storagePool.length > 0) { |
| this.fields[storageIndex].opts = this.sortArray(storagePool[0].data, 'name') |
| } |
| } |
| if (podIndex > -1) { |
| const pod = response.filter(item => item.type === 'podid') |
| if (pod && pod.length > 0) { |
| this.fields[podIndex].opts = this.sortArray(pod[0].data) |
| } |
| } |
| if (clusterIndex > -1) { |
| const cluster = response.filter(item => item.type === 'clusterid') |
| if (cluster && cluster.length > 0) { |
| this.fields[clusterIndex].opts = this.sortArray(cluster[0].data) |
| } |
| } |
| if (groupIndex > -1) { |
| const groups = response.filter(item => item.type === 'groupid') |
| if (groups && groups.length > 0) { |
| this.fields[groupIndex].opts = this.sortArray(groups[0].data) |
| } |
| } |
| |
| if (managementServerIdIndex > -1) { |
| const managementServers = response.filter(item => item.type === 'managementserverid') |
| if (managementServers && managementServers.length > 0) { |
| this.fields[managementServerIdIndex].opts = this.sortArray(managementServers[0].data) |
| } |
| } |
| |
| if (serviceOfferingIndex > -1) { |
| const serviceOfferings = response.filter(item => item.type === 'serviceofferingid') |
| if (serviceOfferings && serviceOfferings.length > 0) { |
| this.fields[serviceOfferingIndex].opts = this.sortArray(serviceOfferings[0].data) |
| } |
| } |
| |
| if (diskOfferingIndex > -1) { |
| const diskOfferings = response.filter(item => item.type === 'diskofferingid') |
| if (diskOfferings && diskOfferings.length > 0) { |
| this.fields[diskOfferingIndex].opts = this.sortArray(diskOfferings[0].data) |
| } |
| } |
| |
| if (networkIndex > -1) { |
| const networks = response.filter(item => item.type === 'networkid') |
| if (networks && networks.length > 0) { |
| this.fields[networkIndex].opts = this.sortArray(networks[0].data) |
| } |
| } |
| |
| if (usageTypeIndex > -1) { |
| const usageTypes = response.filter(item => item.type === 'usagetype') |
| if (usageTypes?.length > 0) { |
| this.fields[usageTypeIndex].opts = this.sortArray(usageTypes[0].data) |
| } |
| } |
| }).finally(() => { |
| if (typeIndex > -1) { |
| this.fields[typeIndex].loading = false |
| } |
| if (zoneIndex > -1) { |
| this.fields[zoneIndex].loading = false |
| } |
| if (domainIndex > -1) { |
| this.fields[domainIndex].loading = false |
| } |
| if (accountIndex > -1) { |
| this.fields[accountIndex].loading = false |
| } |
| if (hypervisorIndex > -1) { |
| this.fields[hypervisorIndex].loading = false |
| } |
| if (imageStoreIndex > -1) { |
| this.fields[imageStoreIndex].loading = false |
| } |
| if (storageIndex > -1) { |
| this.fields[storageIndex].loading = false |
| } |
| if (podIndex > -1) { |
| this.fields[podIndex].loading = false |
| } |
| if (clusterIndex > -1) { |
| this.fields[clusterIndex].loading = false |
| } |
| if (groupIndex > -1) { |
| this.fields[groupIndex].loading = false |
| } |
| if (managementServerIdIndex > -1) { |
| this.fields[managementServerIdIndex].loading = false |
| } |
| if (serviceOfferingIndex > -1) { |
| this.fields[serviceOfferingIndex].loading = false |
| } |
| if (diskOfferingIndex > -1) { |
| this.fields[diskOfferingIndex].loading = false |
| } |
| if (networkIndex > -1) { |
| this.fields[networkIndex].loading = false |
| } |
| if (usageTypeIndex > -1) { |
| this.fields[usageTypeIndex].loading = false |
| } |
| if (Array.isArray(arrayField)) { |
| this.fillFormFieldValues() |
| } |
| }) |
| }, |
| initFormFieldData () { |
| const arrayField = this.initFields() |
| |
| this.fetchStaticFieldData(arrayField) |
| |
| this.fetchDynamicFieldData(arrayField) |
| }, |
| sortArray (data, key = 'name') { |
| if (!data) { |
| return [] |
| } |
| return data.sort(function (a, b) { |
| if (a[key] < b[key]) { return -1 } |
| if (a[key] > b[key]) { return 1 } |
| |
| return 0 |
| }) |
| }, |
| fillFormFieldValues () { |
| this.fieldValues = {} |
| if (Object.keys(this.$route.query).length > 0) { |
| this.fieldValues = this.$route.query |
| } |
| if (this.$route.meta.params) { |
| Object.assign(this.fieldValues, this.$route.meta.params) |
| } |
| this.fields.forEach(field => { |
| this.form[field.name] = this.fieldValues[field.name] |
| }) |
| this.inputKey = this.fieldValues['tags[0].key'] || null |
| this.inputValue = this.fieldValues['tags[0].value'] || null |
| }, |
| fetchZones (searchKeyword) { |
| return new Promise((resolve, reject) => { |
| api('listZones', { showicon: true, keyword: searchKeyword }).then(json => { |
| const zones = json.listzonesresponse.zone |
| resolve({ |
| type: 'zoneid', |
| data: zones |
| }) |
| }).catch(error => { |
| reject(error.response.headers['x-description']) |
| }) |
| }) |
| }, |
| fetchDomains (searchKeyword) { |
| return new Promise((resolve, reject) => { |
| api('listDomains', { listAll: true, details: 'min', showicon: true, keyword: searchKeyword }).then(json => { |
| const domain = json.listdomainsresponse.domain |
| resolve({ |
| type: 'domainid', |
| data: domain |
| }) |
| }).catch(error => { |
| reject(error.response.headers['x-description']) |
| }) |
| }) |
| }, |
| fetchAccounts (searchKeyword) { |
| return new Promise((resolve, reject) => { |
| const params = { listAll: true, isrecursive: false, showicon: true, keyword: searchKeyword } |
| if (this.form.domainid) { |
| params.domainid = this.form.domainid |
| } |
| api('listAccounts', params).then(json => { |
| let account = json?.listaccountsresponse?.account || [] |
| if (this.form.domainid) { |
| account = account.filter(a => a.domainid === this.form.domainid) |
| } |
| resolve({ |
| type: 'account', |
| data: account |
| }) |
| }).catch(error => { |
| reject(error.response.headers['x-description']) |
| }) |
| }) |
| }, |
| fetchHypervisors () { |
| return new Promise((resolve, reject) => { |
| api('listHypervisors').then(json => { |
| const hypervisor = json.listhypervisorsresponse.hypervisor.map(a => { return { id: a.name, name: a.name } }) |
| resolve({ |
| type: 'hypervisor', |
| data: hypervisor |
| }) |
| }).catch(error => { |
| reject(error.response.headers['x-description']) |
| }) |
| }) |
| }, |
| fetchImageStores (searchKeyword) { |
| return new Promise((resolve, reject) => { |
| api('listImageStores', { listAll: true, showicon: true, keyword: searchKeyword }).then(json => { |
| const imageStore = json.listimagestoresresponse.imagestore |
| resolve({ |
| type: 'imagestoreid', |
| data: imageStore |
| }) |
| }).catch(error => { |
| reject(error.response.headers['x-description']) |
| }) |
| }) |
| }, |
| fetchStoragePools (searchKeyword) { |
| return new Promise((resolve, reject) => { |
| api('listStoragePools', { listAll: true, showicon: true, keyword: searchKeyword }).then(json => { |
| const storagePool = json.liststoragepoolsresponse.storagepool |
| resolve({ |
| type: 'storageid', |
| data: storagePool |
| }) |
| }).catch(error => { |
| reject(error.response.headers['x-description']) |
| }) |
| }) |
| }, |
| fetchPods (searchKeyword) { |
| return new Promise((resolve, reject) => { |
| api('listPods', { keyword: searchKeyword }).then(json => { |
| const pods = json.listpodsresponse.pod |
| resolve({ |
| type: 'podid', |
| data: pods |
| }) |
| }).catch(error => { |
| reject(error.response.headers['x-description']) |
| }) |
| }) |
| }, |
| fetchClusters (searchKeyword) { |
| return new Promise((resolve, reject) => { |
| api('listClusters', { keyword: searchKeyword }).then(json => { |
| const clusters = json.listclustersresponse.cluster |
| resolve({ |
| type: 'clusterid', |
| data: clusters |
| }) |
| }).catch(error => { |
| reject(error.response.headers['x-description']) |
| }) |
| }) |
| }, |
| fetchInstanceGroups (searchKeyword) { |
| return new Promise((resolve, reject) => { |
| api('listInstanceGroups', { listAll: true, keyword: searchKeyword }).then(json => { |
| const instancegroups = json.listinstancegroupsresponse.instancegroup |
| resolve({ |
| type: 'groupid', |
| data: instancegroups |
| }) |
| }).catch(error => { |
| reject(error.response.headers['x-description']) |
| }) |
| }) |
| }, |
| fetchServiceOfferings (searchKeyword) { |
| return new Promise((resolve, reject) => { |
| api('listServiceOfferings', { listAll: true, keyword: searchKeyword }).then(json => { |
| const serviceOfferings = json.listserviceofferingsresponse.serviceoffering |
| resolve({ |
| type: 'serviceofferingid', |
| data: serviceOfferings |
| }) |
| }).catch(error => { |
| reject(error.response.headers['x-description']) |
| }) |
| }) |
| }, |
| fetchDiskOfferings (searchKeyword) { |
| return new Promise((resolve, reject) => { |
| api('listDiskOfferings', { listAll: true, keyword: searchKeyword }).then(json => { |
| const diskOfferings = json.listdiskofferingsresponse.diskoffering |
| resolve({ |
| type: 'diskofferingid', |
| data: diskOfferings |
| }) |
| }).catch(error => { |
| reject(error.response.headers['x-description']) |
| }) |
| }) |
| }, |
| fetchNetworks (searchKeyword) { |
| return new Promise((resolve, reject) => { |
| api('listNetworks', { listAll: true, keyword: searchKeyword }).then(json => { |
| const networks = json.listnetworksresponse.network |
| resolve({ |
| type: 'networkid', |
| data: networks |
| }) |
| }).catch(error => { |
| reject(error.response.headers['x-description']) |
| }) |
| }) |
| }, |
| fetchAlertTypes () { |
| if (this.alertTypes.length > 0) { |
| return new Promise((resolve, reject) => { |
| resolve({ |
| type: 'type', |
| data: this.alertTypes |
| }) |
| }) |
| } else { |
| return new Promise((resolve, reject) => { |
| api('listAlertTypes').then(json => { |
| const alerttypes = json.listalerttypesresponse.alerttype.map(a => { return { id: a.alerttypeid, name: a.name } }) |
| this.alertTypes = alerttypes |
| resolve({ |
| type: 'type', |
| data: alerttypes |
| }) |
| }).catch(error => { |
| reject(error.response.headers['x-description']) |
| }) |
| }) |
| } |
| }, |
| fetchAffinityGroupTypes () { |
| if (this.alertTypes.length > 0) { |
| return new Promise((resolve, reject) => { |
| resolve({ |
| type: 'type', |
| data: this.alertTypes |
| }) |
| }) |
| } else { |
| return new Promise((resolve, reject) => { |
| api('listAffinityGroupTypes').then(json => { |
| const alerttypes = json.listaffinitygrouptypesresponse.affinityGroupType.map(a => { |
| let name = a.type |
| if (a.type === 'host anti-affinity') { |
| name = 'host anti-affinity (Strict)' |
| } else if (a.type === 'host affinity') { |
| name = 'host affinity (Strict)' |
| } else if (a.type === 'non-strict host anti-affinity') { |
| name = 'host anti-affinity (Non-Strict)' |
| } else if (a.type === 'non-strict host affinity') { |
| name = 'host affinity (Non-Strict)' |
| } |
| return { id: a.type, name: name } |
| }) |
| this.alertTypes = alerttypes |
| resolve({ |
| type: 'type', |
| data: alerttypes |
| }) |
| }).catch(error => { |
| reject(error.response.headers['x-description']) |
| }) |
| }) |
| } |
| }, |
| fetchVolumes (searchKeyword) { |
| return new Promise((resolve, reject) => { |
| api('listVolumes', { listAll: true, isencrypted: searchKeyword }).then(json => { |
| const volumes = json.listvolumesresponse.volume |
| resolve({ |
| type: 'isencrypted', |
| data: volumes |
| }) |
| }).catch(error => { |
| reject(error.response.headers['x-description']) |
| }) |
| }) |
| }, |
| fetchManagementServers (searchKeyword) { |
| return new Promise((resolve, reject) => { |
| api('listManagementServers', { listAll: true, keyword: searchKeyword }).then(json => { |
| const managementservers = json.listmanagementserversresponse.managementserver |
| resolve({ |
| type: 'managementserverid', |
| data: managementservers |
| }) |
| }).catch(error => { |
| reject(error.response.headers['x-description']) |
| }) |
| }) |
| }, |
| fetchGuestNetworkTypes () { |
| const types = [] |
| if (this.apiName.indexOf('listNetworks') > -1) { |
| types.push({ |
| id: 'Isolated', |
| name: 'label.isolated' |
| }) |
| types.push({ |
| id: 'Shared', |
| name: 'label.shared' |
| }) |
| types.push({ |
| id: 'L2', |
| name: 'label.l2' |
| }) |
| } |
| return types |
| }, |
| fetchBoolean () { |
| const types = [] |
| types.push({ |
| id: 'true', |
| name: 'label.true' |
| }) |
| types.push({ |
| id: 'false', |
| name: 'label.false' |
| }) |
| return types |
| }, |
| fetchAccountTypes () { |
| const types = [] |
| if (this.apiName.indexOf('listAccounts') > -1) { |
| types.push({ |
| id: '1', |
| name: 'Admin' |
| }) |
| types.push({ |
| id: '2', |
| name: 'DomainAdmin' |
| }) |
| types.push({ |
| id: '3', |
| name: 'User' |
| }) |
| } |
| return types |
| }, |
| fetchSystemVmTypes () { |
| const types = [] |
| if (this.apiName.indexOf('listSystemVms') > -1) { |
| types.push({ |
| id: 'consoleproxy', |
| name: 'label.console.proxy.vm' |
| }) |
| types.push({ |
| id: 'secondarystoragevm', |
| name: 'label.secondary.storage.vm' |
| }) |
| } |
| return types |
| }, |
| fetchStoragePoolScope () { |
| const types = [] |
| if (this.apiName.indexOf('listStoragePools') > -1) { |
| types.push({ |
| id: 'HOST', |
| name: 'label.hostname' |
| }) |
| types.push({ |
| id: 'CLUSTER', |
| name: 'label.cluster' |
| }) |
| types.push({ |
| id: 'ZONE', |
| name: 'label.zone' |
| }) |
| types.push({ |
| id: 'REGION', |
| name: 'label.region' |
| }) |
| types.push({ |
| id: 'GLOBAL', |
| name: 'label.global' |
| }) |
| } |
| return types |
| }, |
| fetchImageStoreProviders () { |
| const types = [] |
| if (this.apiName.indexOf('listImageStores') > -1) { |
| types.push({ |
| id: 'NFS', |
| name: 'NFS' |
| }) |
| types.push({ |
| id: 'SMB/CIFS', |
| name: 'SMB/CIFS' |
| }) |
| types.push({ |
| id: 'S3', |
| name: 'S3' |
| }) |
| types.push({ |
| id: 'Swift', |
| name: 'Swift' |
| }) |
| } |
| return types |
| }, |
| fetchRoleTypes () { |
| const types = [] |
| if (this.apiName.indexOf('listRoles') > -1) { |
| types.push({ |
| id: 'Admin', |
| name: 'Admin' |
| }) |
| types.push({ |
| id: 'ResourceAdmin', |
| name: 'ResourceAdmin' |
| }) |
| types.push({ |
| id: 'DomainAdmin', |
| name: 'DomainAdmin' |
| }) |
| types.push({ |
| id: 'User', |
| name: 'User' |
| }) |
| } |
| return types |
| }, |
| fetchScope () { |
| const scope = [] |
| if (this.apiName.indexOf('listWebhooks') > -1) { |
| scope.push({ |
| id: 'Local', |
| name: 'label.local' |
| }) |
| scope.push({ |
| id: 'Domain', |
| name: 'label.domain' |
| }) |
| if (isAdmin()) { |
| scope.push({ |
| id: 'Global', |
| name: 'label.global' |
| }) |
| } |
| } |
| return scope |
| }, |
| fetchState () { |
| var state = [] |
| if (this.apiName.includes('listVolumes')) { |
| state = [ |
| { |
| id: 'Allocated', |
| name: 'label.allocated' |
| }, |
| { |
| id: 'Ready', |
| name: 'label.isready' |
| }, |
| { |
| id: 'Destroy', |
| name: 'label.destroy' |
| }, |
| { |
| id: 'Expunging', |
| name: 'label.expunging' |
| }, |
| { |
| id: 'Expunged', |
| name: 'label.expunged' |
| }, |
| { |
| id: 'Migrating', |
| name: 'label.migrating' |
| } |
| ] |
| } else if (this.apiName.includes('listKubernetesClusters')) { |
| state = [ |
| { |
| id: 'Created', |
| name: 'label.created' |
| }, |
| { |
| id: 'Starting', |
| name: 'label.starting' |
| }, |
| { |
| id: 'Running', |
| name: 'label.running' |
| }, |
| { |
| id: 'Stopping', |
| name: 'label.stopping' |
| }, |
| { |
| id: 'Stopped', |
| name: 'label.stopped' |
| }, |
| { |
| id: 'Scaling', |
| name: 'label.scaling' |
| }, |
| { |
| id: 'Upgrading', |
| name: 'label.upgrading' |
| }, |
| { |
| id: 'Alert', |
| name: 'label.alert' |
| }, |
| { |
| id: 'Recovering', |
| name: 'label.recovering' |
| }, |
| { |
| id: 'Destroyed', |
| name: 'label.destroyed' |
| }, |
| { |
| id: 'Destroying', |
| name: 'label.destroying' |
| }, |
| { |
| id: 'Error', |
| name: 'label.error' |
| } |
| ] |
| } else if (this.apiName.indexOf('listWebhooks') > -1) { |
| state = [ |
| { |
| id: 'Enabled', |
| name: 'label.enabled' |
| }, |
| { |
| id: 'Disabled', |
| name: 'label.disabled' |
| } |
| ] |
| } |
| return state |
| }, |
| fetchEntityType () { |
| const entityType = [] |
| if (this.apiName.indexOf('listAnnotations') > -1) { |
| const allowedTypes = { |
| VM: 'Virtual Machine', |
| HOST: 'Host', |
| VOLUME: 'Volume', |
| SNAPSHOT: 'Snapshot', |
| VM_SNAPSHOT: 'VM Snapshot', |
| INSTANCE_GROUP: 'Instance Group', |
| NETWORK: 'Network', |
| VPC: 'VPC', |
| PUBLIC_IP_ADDRESS: 'Public IP Address', |
| VPN_CUSTOMER_GATEWAY: 'VPC Customer Gateway', |
| TEMPLATE: 'Template', |
| ISO: 'ISO', |
| SSH_KEYPAIR: 'SSH Key Pair', |
| DOMAIN: 'Domain', |
| SERVICE_OFFERING: 'Service Offfering', |
| DISK_OFFERING: 'Disk Offering', |
| NETWORK_OFFERING: 'Network Offering', |
| POD: 'Pod', |
| ZONE: 'Zone', |
| CLUSTER: 'Cluster', |
| PRIMARY_STORAGE: 'Primary Storage', |
| SECONDARY_STORAGE: 'Secondary Storage', |
| VR: 'Virtual Router', |
| SYSTEM_VM: 'System VM', |
| KUBERNETES_CLUSTER: 'Kubernetes Cluster' |
| } |
| for (var key in allowedTypes) { |
| entityType.push({ |
| id: key, |
| name: allowedTypes[key] |
| }) |
| } |
| } |
| return entityType |
| }, |
| fetchLevel () { |
| const levels = [] |
| levels.push({ |
| id: 'INFO', |
| name: 'label.info.upper' |
| }) |
| levels.push({ |
| id: 'WARN', |
| name: 'label.warn.upper' |
| }) |
| levels.push({ |
| id: 'ERROR', |
| name: 'label.error.upper' |
| }) |
| return levels |
| }, |
| fetchUsageTypes () { |
| return new Promise((resolve, reject) => { |
| api('listUsageTypes') |
| .then(json => { |
| const usageTypes = json.listusagetypesresponse.usagetype.map(entry => { |
| return { |
| id: entry.id, |
| name: i18n.global.t(entry.name) |
| } |
| }) |
| |
| resolve({ |
| type: 'usagetype', |
| data: usageTypes |
| }) |
| }) |
| .catch(error => { |
| reject(error.response.headers['x-description']) |
| }) |
| }) |
| }, |
| onSearch (value) { |
| this.paramsFilter = {} |
| this.searchQuery = value |
| this.$emit('search', { searchQuery: this.searchQuery }) |
| }, |
| async onClear () { |
| this.formRef.value.resetFields() |
| this.form = reactive({}) |
| this.isFiltered = false |
| this.inputKey = null |
| this.inputValue = null |
| this.searchQuery = null |
| this.paramsFilter = {} |
| |
| const refreshAccountOptions = ['account', 'domainid'].every((field) => { |
| return this.fields.some((searchViewField) => searchViewField.name === field) |
| }) |
| if (refreshAccountOptions) { |
| await this.fetchDynamicFieldData('account') |
| } |
| |
| this.$emit('search', this.paramsFilter) |
| }, |
| handleSubmit () { |
| this.paramsFilter = {} |
| this.formRef.value.validate().then(() => { |
| const values = toRaw(this.form) |
| this.isFiltered = true |
| for (const key in values) { |
| const input = values[key] |
| if (input === '' || input === null || input === undefined) { |
| continue |
| } |
| this.paramsFilter[key] = input |
| } |
| if (this.searchFilters.includes('tags')) { |
| if (this.inputKey) { |
| this.paramsFilter['tags[0].key'] = this.inputKey |
| this.paramsFilter['tags[0].value'] = this.inputValue |
| } |
| } |
| this.$emit('search', this.paramsFilter) |
| }) |
| }, |
| changeFilter (filter) { |
| this.$emit('change-filter', filter) |
| }, |
| updateIsFiltered () { |
| this.isFiltered = this.searchFilters.some(item => { |
| if (this.searchParams[item]) { |
| return true |
| } |
| }) |
| } |
| } |
| } |
| </script> |
| |
| <style scoped lang="less"> |
| .input-search { |
| margin-left: 10px; |
| } |
| |
| .filter-group { |
| :deep(.ant-input-group-addon) { |
| padding: 0 5px; |
| } |
| |
| &-button { |
| background: inherit; |
| border: 0; |
| padding: 0; |
| } |
| |
| &-button { |
| position: relative; |
| display: block; |
| min-height: 25px; |
| |
| &-clear { |
| position: absolute; |
| left: 0; |
| } |
| |
| &-search { |
| position: absolute; |
| right: 0; |
| } |
| } |
| } |
| |
| .filter-button { |
| background: inherit; |
| border: 0; |
| padding: 0; |
| position: relative; |
| display: block; |
| min-height: 25px; |
| width: 20px; |
| } |
| </style> |
