cloudstack/ui/src/views/tools/ManageInstances.vue

// 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>
  <a-row :gutter="12" v-if="isPageAllowed">
    <a-col :md="24">
      <a-card class="breadcrumb-card">
      <a-row>
        <a-col
          :span="device === 'mobile' ? 24 : 12"
          style="padding-left: 12px; margin-top: 10px"
        >
          <breadcrumb :resource="resource">
            <template #end>
              <a-tooltip placement="bottom">
                <template #title>{{ $t('label.refresh') }}</template>
                <a-button
                  style="margin-top: 4px"
                  :loading="viewLoading"
                  shape="round"
                  size="small"
                  @click="fetchData()"
                >
                  <template #icon>
                    <ReloadOutlined />
                  </template>
                  {{ $t('label.refresh') }}
                </a-button>
              </a-tooltip>
            </template>
          </breadcrumb>
        </a-col>
      </a-row>
    </a-card>
    </a-col>
    <a-col
      :md="24">
      <div>
        <a-card>
          <a-alert
            type="info"
            :showIcon="true"
            :message="wizardTitle"
          >
            <template #description>
              <span v-html="wizardDescription" />
            </template>
          </a-alert>
          <br />
          <a-row :gutter="12">
            <a-card class="source-dest-card">
              <a-col :md="24" :lg="48">
                <a-form
                  style="min-width: 170px"
                  :ref="formRef"
                  :model="form"
                  :rules="rules"
                  layout="vertical"
                >
                  <a-col :md="24" :lg="24">
                    <a-form-item name="sourcehypervisor" ref="sourcehypervisor" :label="$t('label.source')">
                      <a-radio-group
                        style="text-align: center; width: 100%"
                        v-model:value="form.sourceHypervisor"
                        @change="selected => { onSelectHypervisor(selected.target.value) }"
                        buttonStyle="solid">
                        <a-radio-button value="vmware" style="width: 50%; text-align: center">
                          VMware
                        </a-radio-button>
                        <a-radio-button value="kvm" style="width: 50%; text-align: center">
                          KVM
                        </a-radio-button>
                      </a-radio-group>
                    </a-form-item>
                    <a-form-item name="sourceaction" ref="sourceaction" :label="$t('label.action')" v-if="sourceActions">
                      <a-select
                        v-model:value="form.sourceAction"
                        showSearch
                        optionFilterProp="label"
                        :filterOption="(input, option) => {
                          return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }"
                        @change="onSelectSourceAction"
                        :loading="optionLoading.sourcehypervisor"
                        v-focus="true"
                      >
                        <a-select-option v-for="opt in sourceActions" :key="opt.name" :label="opt.label">
                          <span>
                            {{ opt.label }}
                          </span>
                        </a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                    <a-col v-if="showExtHost" :md="24" :lg="12">
                        <a-form-item
                                name="hostname"
                                ref="hostname">
                          <template #label>
                            <tooltip-label
                              :title="$t('label.hostname')"
                              :tooltip="$t('label.ext.hostname.tooltip')"/>
                          </template>
                            <a-input
                                    v-model:value="form.hostname"
                            ></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col v-if="showExtHost" :md="24" :lg="12">
                        <a-form-item
                                name="username"
                                ref="username">
                          <template #label>
                            <tooltip-label
                              :title="$t('label.username')"
                              :tooltip="$t('label.username.tooltip')"/>
                          </template>
                            <a-input
                                    v-model:value="form.username"
                            ></a-input>
                        </a-form-item>
                    </a-col>
                    <a-col v-if="showExtHost" :md="24" :lg="12">
                        <a-form-item
                                name="password"
                                ref="password">
                          <template #label>
                            <tooltip-label
                              :title="$t('label.password')"
                              :tooltip="$t('label.password.tooltip')"/>
                          </template>
                            <a-input-password
                                    v-model:value="form.password"
                            ></a-input-password>
                        </a-form-item>
                    </a-col>
                    <a-col v-if="showExtHost" :md="24" :lg="12">
                        <a-form-item
                                name="tmppath"
                                ref="tmppath">
                          <template #label>
                            <tooltip-label
                              :title="$t('label.tmppath')"
                              :tooltip="$t('label.tmppath.tooltip')"/>
                          </template>
                            <a-input
                                    v-model:value="form.tmppath"
                            ></a-input>
                        </a-form-item>
                    </a-col>
                </a-form>
              </a-col>
            </a-card>
            <!-- ------------ -->
            <!-- RIGHT COLUMN -->
            <!-- ------------ -->
            <a-card class="source-dest-card">
              <template #title>
                Destination
              </template>
              <a-col :md="24" :lg="48">
                <a-form
                  style="min-width: 170px"
                  :ref="formRef"
                  :model="form"
                  :rules="rules"
                  layout="vertical"
                >
                <a-form-item v-if="showPool" name="scope" ref="scope">
                  <template #label>
                    <tooltip-label :title="$t('label.scope')" :tooltip="$t('label.scope.tooltip')"/>
                  </template>
                  <a-select
                    v-model:value="this.poolscope"
                    @change="onSelectPoolScope"
                    showSearch
                    optionFilterProp="label"
                    :filterOption="(input, option) => {
                      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    }" >
                    <a-select-option :value="'cluster'" :label="$t('label.clusterid')"> {{ $t('label.clusterid') }} </a-select-option>
                    <a-select-option :value="'zone'" :label="$t('label.zoneid')"> {{ $t('label.zoneid') }} </a-select-option>
                  </a-select>
                </a-form-item>
                  <a-form-item
                    name="zoneid"
                    ref="zoneid"
                    :label="isMigrateFromVmware ? $t('label.destination.zone') : $t('label.zoneid')"
                  >
                    <a-select
                      v-model:value="form.zoneid"
                      showSearch
                      optionFilterProp="label"
                      :filterOption="(input, option) => {
                        return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                      }"
                      @change="onSelectZoneId"
                      :loading="optionLoading.zones"
                    >
                      <a-select-option v-for="zoneitem in zoneSelectOptions" :key="zoneitem.value" :label="zoneitem.label">
                        <span>
                          <resource-icon v-if="zoneitem.icon" :image="zoneitem.icon" size="1x" style="margin-right: 5px"/>
                          <global-outlined v-else style="margin-right: 5px" />
                          {{ zoneitem.label }}
                        </span>
                      </a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item
                    v-if="showPod"
                    name="podid"
                    ref="podid"
                    :label="isMigrateFromVmware ? $t('label.destination.pod') : $t('label.podid')">
                    <a-select
                      v-model:value="form.podid"
                      showSearch
                      optionFilterProp="label"
                      :filterOption="filterOption"
                      :options="podSelectOptions"
                      :loading="optionLoading.pods"
                      @change="onSelectPodId"
                    ></a-select>
                  </a-form-item>
                  <a-form-item
                    v-if="showCluster"
                    name="clusterid"
                    ref="clusterid"
                    :label="isMigrateFromVmware ? $t('label.destination.cluster') : $t('label.clusterid')">
                    <a-select
                      v-model:value="form.clusterid"
                      showSearch
                      optionFilterProp="label"
                      :filterOption="filterOption"
                      :options="clusterSelectOptions"
                      :loading="optionLoading.clusters"
                      @change="onSelectClusterId"
                    ></a-select>
                  </a-form-item>
                  <a-form-item v-if="isDestinationKVM && isMigrateFromVmware && clusterId != undefined">
                    <SelectVmwareVcenter
                      @onVcenterTypeChanged="updateVmwareVcenterType"
                      @loadingVmwareUnmanagedInstances="() => this.unmanagedInstancesLoading = true"
                      @listedVmwareUnmanagedInstances="($e) => onListUnmanagedInstancesFromVmware($e)"
                    />
                  </a-form-item>
                  <a-form-item
                    v-if="showHost"
                    name="hostid"
                    ref="hostid">
                    <template #label>
                      <tooltip-label
                        :title="$t('label.hostname')"
                        :tooltip="$t('label.hostname.tooltip')"/>
                    </template>
                      <a-select
                        v-model:value="form.hostid"
                        showSearch
                        optionFilterProp="label"
                        :filterOption="filterOption"
                        :options="hostSelectOptions"
                        :loading="optionLoading.hosts"
                        @change="onSelectHostId"
                      ></a-select>
                  </a-form-item>
                  <a-form-item
                    v-if="isDiskImport"
                    name="poolid"
                    ref="poolid">
                    <template #label>
                      <tooltip-label
                        :title="$t('label.storagepool')"
                        :tooltip="$t('label.storagepool.tooltip')"/>
                    </template>
                      <a-select
                        v-model:value="form.poolid"
                        showSearch
                        optionFilterProp="label"
                        :filterOption="filterOption"
                        :options="poolSelectOptions"
                        :loading="optionLoading.pools"
                        @change="onSelectPoolId"
                      ></a-select>
                  </a-form-item>
                  <a-form-item
                    v-if="showDiskPath"
                    name="diskpath"
                    ref="diskpath">
                    <template #label>
                          <tooltip-label
                            :title="$t('label.disk')"
                            :tooltip="$t('label.disk.tooltip')"/>
                    </template>
                    <a-input
                      v-model:value="form.diskpath"
                    ></a-input>
                  </a-form-item>
                  <a-col v-if="showDiskPath" :md="24" :lg="8">
                    <a-button
                        type="primary"
                        @click="onImportInstanceAction">
                      <template #icon><import-outlined /></template>
                      {{ $t('label.import.instance') }}
                    </a-button>
                  </a-col>
                </a-form>
              </a-col>
            </a-card>
          </a-row>
          <a-row v-if="showExtHost">
            <a-col class="fetch-instances-column">
              <div>
                <a-button
                  shape="round"
                  type="primary"
                  @click="() => { fetchExtKVMInstances() }">
                  {{ $t('label.fetch.instances') }}
                </a-button>
              </div>
            </a-col>
          </a-row>
          <a-divider />
          <a-row :gutter="12">
            <a-col v-if="!isDiskImport" :md="24" :lg="(!isMigrateFromVmware && showManagedInstances) ? 12 : 24">
              <a-card class="instances-card">
                <template #title>
                  {{ (isMigrateFromVmware && vmwareVcenterType === 'existing') ? $t('label.instances') : $t('label.unmanaged.instances') }}
                  <a-tooltip :title="(isMigrateFromVmware && vmwareVcenterType === 'existing') ? $t('message.instances.migrate.vmware') : $t('message.instances.unmanaged')">
                    <info-circle-outlined />
                  </a-tooltip>
                  <a-button
                    style="margin-left: 12px; margin-top: 4px"
                    :loading="unmanagedInstancesLoading"
                    size="small"
                    shape="round"
                    @click="fetchUnmanagedInstances()" >
                    <template #icon><reload-outlined /></template>
                  </a-button>
                  <span style="float: right; width: 50%">
                    <search-view
                      :searchFilters="searchFilters.unmanaged"
                      :searchParams="searchParams.unmanaged"
                      :apiName="listInstancesApi.unmanaged"
                      @search="searchUnmanagedInstances"
                    />
                  </span>
                </template>
                <a-table
                  v-if="!isExternal"
                  class="instances-card-table"
                  :loading="unmanagedInstancesLoading"
                  :rowSelection="unmanagedInstanceSelection"
                  :rowKey="(record, index) => index"
                  :columns="unmanagedInstancesColumns"
                  :data-source="unmanagedInstances"
                  :pagination="false"
                  size="middle"
                  :rowClassName="getRowClassName"
                >
                  <template #bodyCell="{ column, text }">
                    <template v-if="column.key === 'state'">
                      <status :text="text ? text : ''" displayText />
                    </template>
                  </template>
                </a-table>
                <a-table
                  v-if="isExternal"
                  class="instances-card-table"
                  :loading="unmanagedInstancesLoading"
                  :rowSelection="unmanagedInstanceSelection"
                  :rowKey="(record, index) => index"
                  :columns="externalInstancesColumns"
                  :data-source="unmanagedInstances"
                  :pagination="false"
                  size="middle"
                  :rowClassName="getRowClassName"
                >
                  <template #bodyCell="{ column, text }">
                      <template v-if="column.key === 'state'">
                          <status :text="text ? text : ''" displayText />
                      </template>
                  </template>
                </a-table>
                <div class="instances-card-footer">
                  <a-pagination
                    class="row-element"
                    size="small"
                    :current="page.unmanaged"
                    :pageSize="pageSize.unmanaged"
                    :total="itemCount.unmanaged"
                    :showTotal="total => `${$t('label.showing')} ${Math.min(total, 1+((page.unmanaged-1)*pageSize.unmanaged))}-${Math.min(page.unmanaged*pageSize.unmanaged, total)} ${$t('label.of')} ${total} ${$t('label.items')}`"
                    @change="fetchUnmanagedInstances"
                    showQuickJumper>
                    <template #buildOptionText="props">
                      <span>{{ props.value }} / {{ $t('label.page') }}</span>
                    </template>
                  </a-pagination>
                  <div :span="24" class="action-button-right">
                    <a-button
                      :loading="importUnmanagedInstanceLoading"
                      :disabled="!(('importUnmanagedInstance' in $store.getters.apis) && unmanagedInstancesSelectedRowKeys.length > 0)"
                      type="primary"
                      @click="onManageInstanceAction">
                      <template #icon><import-outlined /></template>
                      {{ $t('label.import.instance') }}
                    </a-button>
                  </div>
                </div>
              </a-card>
            </a-col>
            <a-col :md="24" :lg="12" v-if="!isMigrateFromVmware && showManagedInstances">
              <a-card class="instances-card">
                <template #title>
                  {{ $t('label.managed.instances') }}
                  <a-tooltip :title="$t('message.instances.managed')">
                    <info-circle-outlined />
                  </a-tooltip>
                  <a-button
                    style="margin-left: 12px; margin-top: 4px"
                    :loading="managedInstancesLoading"
                    size="small"
                    shape="round"
                    @click="fetchManagedInstances()" >
                    <template #icon><reload-outlined /></template>
                  </a-button>
                  <span style="float: right; width: 50%">
                    <search-view
                      :searchFilters="searchFilters.managed"
                      :searchParams="searchParams.managed"
                      :apiName="listInstancesApi.managed"
                      @search="searchManagedInstances"
                    />
                  </span>
                </template>
                <a-table
                  class="instances-card-table"
                  :loading="managedInstancesLoading"
                  :rowSelection="managedInstanceSelection"
                  :rowKey="(record, index) => index"
                  :columns="managedInstancesColumns"
                  :data-source="managedInstances"
                  :pagination="false"
                  size="middle"
                  :rowClassName="getRowClassName"
                >
                  <template #bodyCell="{ column, text, record }">
                    <template v-if="column.key === 'name'">
                      <router-link :to="{ path: '/vm/' + record.id }">{{ text }}</router-link>
                    </template>
                    <template v-if="column.key === 'state'">
                      <status :text="text ? text : ''" displayText />
                    </template>
                  </template>
                </a-table>
                <div class="instances-card-footer">
                  <a-pagination
                    class="row-element"
                    size="small"
                    :current="page.managed"
                    :pageSize="pageSize.managed"
                    :total="itemCount.managed"
                    :showTotal="total => `${$t('label.showing')} ${Math.min(total, 1+((page.managed-1)*pageSize.managed))}-${Math.min(page.managed*pageSize.managed, total)} ${$t('label.of')} ${total} ${$t('label.items')}`"
                    @change="fetchManagedInstances"
                    showQuickJumper>
                    <template #buildOptionText="props">
                      <span>{{ props.value }} / {{ $t('label.page') }}</span>
                    </template>
                  </a-pagination>
                  <div :span="24" class="action-button-right">
                    <a-button

                      :disabled="!(('unmanageVirtualMachine' in $store.getters.apis) && managedInstancesSelectedRowKeys.length > 0)"
                      type="primary"
                      @click="onUnmanageInstanceAction">
                      <template #icon><disconnect-outlined /></template>
                      {{ managedInstancesSelectedRowKeys.length > 1 ? $t('label.action.unmanage.instances') : $t('label.action.unmanage.instance') }}
                    </a-button>
                  </div>
                </div>
              </a-card>
            </a-col>
          </a-row>
        </a-card>

        <a-modal
          v-if="showUnmanageForm"
          :visible="showUnmanageForm"
          :title="$t('label.import.instance')"
          :closable="true"
          :maskClosable="false"
          :footer="null"
          :cancelText="$t('label.cancel')"
          @cancel="showUnmanageForm = false"
          centered
          ref="importModal"
          width="auto">
          <import-unmanaged-instances
            class="importform"
            :resource="selectedUnmanagedInstance"
            :cluster="selectedCluster"
            :host="selectedHost"
            :pool="selectedPool"
            :importsource="selectedSourceAction"
            :zoneid="this.zoneId"
            :hypervisor="this.destinationHypervisor"
            :exthost="this.values?.hostname || ''"
            :username="this.values?.username || ''"
            :password="this.values?.password || ''"
            :tmppath="this.values?.tmppath || ''"
            :diskpath="this.values?.diskpath || ''"
            :isOpen="showUnmanageForm"
            :selectedVmwareVcenter="selectedVmwareVcenter"
            @refresh-data="fetchInstances"
            @close-action="closeImportUnmanagedInstanceForm"
            @loading-changed="updateManageInstanceActionLoading"
            @track-import-jobid="trackImportJobId"
          />
        </a-modal>
      </div>
    </a-col>
  </a-row>
</template>

<script>
import { message } from 'ant-design-vue'
import { ref, reactive, toRaw } from 'vue'
import { api } from '@/api'
import _ from 'lodash'
import Breadcrumb from '@/components/widgets/Breadcrumb'
import Status from '@/components/widgets/Status'
import SearchView from '@/components/view/SearchView'
import ImportUnmanagedInstances from '@/views/tools/ImportUnmanagedInstance'
import ResourceIcon from '@/components/view/ResourceIcon'
import SelectVmwareVcenter from '@/views/tools/SelectVmwareVcenter'
import TooltipLabel from '@/components/widgets/TooltipLabel.vue'

export default {
  components: {
    TooltipLabel,
    Breadcrumb,
    Status,
    SearchView,
    ImportUnmanagedInstances,
    ResourceIcon,
    SelectVmwareVcenter
  },
  name: 'ManageVms',
  data () {
    const AllSourceActions = [
      {
        name: 'unmanaged',
        label: 'Manage/Unmanage existing instances',
        sourceDestHypervisors: {
          vmware: 'vmware',
          kvm: 'kvm'
        },
        wizardTitle: this.$t('label.desc.importexportinstancewizard'),
        wizardDescription: this.$t('message.desc.importexportinstancewizard')
      },
      {
        name: 'vmware',
        label: 'Migrate existing instances to KVM',
        sourceDestHypervisors: {
          vmware: 'kvm'
        },
        wizardTitle: this.$t('label.desc.importmigratefromvmwarewizard'),
        wizardDescription: this.$t('message.desc.importmigratefromvmwarewizard')
      },
      {
        name: 'external',
        label: 'Import Instance from remote KVM host',
        sourceDestHypervisors: {
          kvm: 'kvm'
        },
        wizardTitle: this.$t('label.desc.import.ext.kvm.wizard'),
        wizardDescription: this.$t('message.desc.import.ext.kvm.wizard')
      },
      {
        name: 'local',
        label: 'Import QCOW2 image from Local Storage',
        sourceDestHypervisors: {
          kvm: 'kvm'
        },
        wizardTitle: this.$t('label.desc.import.local.kvm.wizard'),
        wizardDescription: this.$t('message.desc.import.local.kvm.wizard')
      },
      {
        name: 'shared',
        label: 'Import QCOW2 image from Shared Storage',
        sourceDestHypervisors: {
          kvm: 'kvm'
        },
        wizardTitle: this.$t('label.desc.import.shared.kvm.wizard'),
        wizardDescription: this.$t('message.desc.import.shared.kvm.wizard')
      }
    ]
    const unmanagedInstancesColumns = [
      {
        title: this.$t('label.name'),
        dataIndex: 'name',
        width: 100
      },
      {
        key: 'state',
        title: this.$t('label.state'),
        dataIndex: 'powerstate'
      },
      {
        title: this.$t('label.hostname'),
        dataIndex: 'hostname'
      },
      {
        title: this.$t('label.clustername'),
        dataIndex: 'clustername'
      },
      {
        title: this.$t('label.ostypename'),
        dataIndex: 'osdisplayname'
      }
    ]
    const externalInstancesColumns = [
      {
        title: this.$t('label.name'),
        dataIndex: 'name',
        width: 200
      },
      {
        key: 'state',
        title: this.$t('label.state'),
        dataIndex: 'powerstate'
      }
    ]
    const managedInstancesColumns = [
      {
        key: 'name',
        title: this.$t('label.name'),
        dataIndex: 'name',
        width: 100
      },
      {
        title: this.$t('label.instancename'),
        dataIndex: 'instancename'
      },
      {
        key: 'state',
        title: this.$t('label.state'),
        dataIndex: 'state'
      },
      {
        title: this.$t('label.hostname'),
        dataIndex: 'hostname'
      },
      {
        title: this.$t('label.templatename'),
        dataIndex: 'templatedisplaytext'
      }
    ]
    return {
      options: {
        hypervisors: [],
        zones: [],
        pods: [],
        clusters: [],
        hosts: [],
        pools: []
      },
      rowCount: {},
      optionLoading: {
        sourceaction: false,
        hypervisors: false,
        zones: false,
        pods: false,
        clusters: false,
        hosts: false,
        pools: false
      },
      page: {
        unmanaged: 1,
        managed: 1
      },
      pageSize: {
        unmanaged: 10,
        managed: 10
      },
      searchFilters: {
        unmanaged: [],
        managed: []
      },
      searchParams: {
        unmanaged: {},
        managed: {}
      },
      itemCount: {},
      hypervisors: [],
      sourceHypervisor: 'vmware',
      destinationHypervisor: 'vmware',
      sourceActions: undefined,
      selectedSourceAction: undefined,
      wizardTitle: this.$t('label.desc.importexportinstancewizard'),
      wizardDescription: this.$t('message.desc.importexportinstancewizard'),
      zone: {},
      pod: {},
      cluster: {},
      values: undefined,
      zoneId: undefined,
      podId: undefined,
      clusterId: undefined,
      hostname: undefined,
      username: undefined,
      password: undefined,
      hostId: undefined,
      poolId: undefined,
      diskpath: undefined,
      tmppath: undefined,
      poolscope: 'cluster',
      listInstancesApi: {
        unmanaged: 'listUnmanagedInstances',
        managed: 'listVirtualMachines',
        migratefromvmware: 'listVmwareDcVms',
        external: 'listVmsForImport'
      },
      unmanagedInstancesColumns,
      externalInstancesColumns,
      AllSourceActions,
      unmanagedInstancesLoading: false,
      unmanagedInstances: [],
      unmanagedInstancesSelectedRowKeys: [],
      importUnmanagedInstanceLoading: false,
      managedInstancesColumns,
      managedInstancesLoading: false,
      managedInstances: [],
      managedInstancesSelectedRowKeys: [],
      showUnmanageForm: false,
      selectedUnmanagedInstance: {},
      query: {},
      vmwareVcenterType: undefined,
      selectedVmwareVcenter: undefined
    }
  },
  created () {
    this.page.unmanaged = parseInt(this.$route.query.unmanagedpage || 1)
    this.page.managed = parseInt(this.$route.query.managedpage || 1)
    this.initForm()
    this.fetchData()
  },
  computed: {
    isPageAllowed () {
      if (this.$route.meta.permission) {
        for (var apiName of this.$route.meta.permission) {
          if (!(apiName in this.$store.getters.apis)) {
            return false
          }
        }
      }
      return true
    },
    isUnmanaged () {
      return this.selectedSourceAction === 'unmanaged'
    },
    isExternal () {
      return this.selectedSourceAction === 'external'
    },
    isMigrateFromVmware () {
      return this.selectedSourceAction === 'vmware'
    },
    isDestinationKVM () {
      return this.destinationHypervisor === 'kvm'
    },
    showPod () {
      if (this.selectedSourceAction === 'shared') {
        return this.poolscope !== 'zone'
      }
      return (this.selectedSourceAction !== 'external')
    },
    showCluster () {
      if (this.selectedSourceAction === 'shared') {
        return this.poolscope !== 'zone'
      }
      return (this.selectedSourceAction !== 'external')
    },
    showHost () {
      return (this.selectedSourceAction === 'local')
    },
    showPool () {
      return (this.selectedSourceAction === 'shared')
    },
    showExtHost () {
      return (this.selectedSourceAction === 'external')
    },
    showDiskPath () {
      return ((this.selectedSourceAction === 'local') || (this.selectedSourceAction === 'shared'))
    },
    showManagedInstances () {
      return ((this.selectedSourceAction !== 'local') && (this.selectedSourceAction !== 'shared') && (this.selectedSourceAction !== 'external'))
    },
    isDiskImport () {
      return ((this.selectedSourceAction === 'local') || (this.selectedSourceAction === 'shared'))
    },
    getPoolScope () {
      if (this.selectedSourceAction === 'local') {
        return 'host'
      } else {
        return this.poolscope
      }
    },
    params () {
      return {
        zones: {
          list: 'listZones',
          isLoad: false,
          field: 'zoneid',
          options: {
            showicon: true
          }
        },
        pods: {
          list: 'listPods',
          isLoad: false,
          options: {
            zoneid: _.get(this.zone, 'id')
          },
          field: 'podid'
        },
        clusters: {
          list: 'listClusters',
          isLoad: false,
          options: {
            zoneid: _.get(this.zone, 'id'),
            podid: this.podId,
            hypervisor: this.destinationHypervisor,
            allocationstate: 'Enabled'
          },
          field: 'clusterid'
        },
        hosts: {
          list: 'listHosts',
          isLoad: false,
          options: {
            zoneid: _.get(this.zone, 'id'),
            podid: this.podId,
            clusterid: this.clusterId
          },
          field: 'hostid'
        },
        pools: {
          list: 'listStoragePools',
          isLoad: false,
          options: {
            zoneid: _.get(this.zone, 'id'),
            podid: this.podId,
            clusterid: this.clusterId,
            hostid: this.hostId,
            scope: this.getPoolScope
          },
          field: 'poolid'
        }
      }
    },
    viewLoading () {
      for (var key in this.optionLoading) {
        if (this.optionLoading[key]) {
          return true
        }
      }
      return this.unmanagedInstancesLoading || this.managedInstancesLoading
    },
    zoneSelectOptions () {
      return this.options.zones.map((zone) => {
        return {
          label: zone.name,
          value: zone.id,
          icon: zone?.icon?.base64image || ''
        }
      })
    },
    podSelectOptions () {
      const options = this.options.pods.map((pod) => {
        return {
          label: pod.name,
          value: pod.id
        }
      })
      return options
    },
    clusterSelectOptions () {
      const options = this.options.clusters.map((cluster) => {
        return {
          label: cluster.name,
          value: cluster.id
        }
      })
      return options
    },
    hostSelectOptions () {
      const options = this.options.hosts.map((host) => {
        return {
          label: host.name,
          value: host.id
        }
      })
      return options
    },
    poolSelectOptions () {
      const options = this.options.pools.map((pool) => {
        return {
          label: pool.name,
          value: pool.id
        }
      })
      return options
    },
    unmanagedInstanceSelection () {
      return {
        type: 'radio',
        selectedRowKeys: this.unmanagedInstancesSelectedRowKeys || [],
        onChange: this.onUnmanagedInstanceSelectRow
      }
    },
    managedInstanceSelection () {
      return {
        type: 'checkbox',
        selectedRowKeys: this.managedInstancesSelectedRowKeys || [],
        onChange: this.onManagedInstanceSelectRow
      }
    },
    selectedCluster () {
      if (this.options.clusters &&
        this.options.clusters.length > 0 &&
        this.clusterId) {
        return _.find(this.options.clusters, (option) => option.id === this.clusterId)
      }
      return {}
    },
    selectedHost () {
      if (this.options.hosts &&
          this.options.hosts.length > 0 &&
          this.hostId) {
        return _.find(this.options.hosts, (option) => option.id === this.hostId)
      }
      return {}
    },
    selectedPool () {
      if (this.options.pools &&
          this.options.pools.length > 0 &&
          this.poolId) {
        return _.find(this.options.pools, (option) => option.id === this.poolId)
      }
      return {}
    }
  },
  methods: {
    initForm () {
      this.formRef = ref()
      this.form = reactive({
        sourceHypervisor: this.sourceHypervisor
      })
      this.rules = reactive({
        hostname: [{ required: true, message: this.$t('message.error.input.value') }],
        username: [{ required: true, message: this.$t('message.error.input.value') }],
        password: [{ required: true, message: this.$t('message.error.input.value') }]
      })
    },
    fetchData () {
      this.unmanagedInstances = []
      this.managedInstances = []
      this.onSelectHypervisor(this.sourceHypervisor)
      _.each(this.params, (param, name) => {
        if (param.isLoad) {
          this.fetchOptions(param, name)
        }
      })
    },
    filterOption (input, option) {
      return (
        option.label.toUpperCase().indexOf(input.toUpperCase()) >= 0
      )
    },
    fetchOptions (param, name, exclude) {
      if (exclude && exclude.length > 0) {
        if (exclude.includes(name)) {
          return
        }
      }
      this.optionLoading[name] = true
      param.loading = true
      param.opts = []
      const options = param.options || {}
      if (!('listall' in options) && !['zones', 'pods', 'clusters', 'hosts', 'pools'].includes(name)) {
        options.listall = true
      }
      api(param.list, options).then((response) => {
        param.loading = false
        _.map(response, (responseItem, responseKey) => {
          if (Object.keys(responseItem).length === 0) {
            this.rowCount[name] = 0
            this.options[name] = []
            return
          }
          if (!responseKey.includes('response')) {
            return
          }
          _.map(responseItem, (response, key) => {
            if (key === 'count') {
              this.rowCount[name] = response
              return
            }
            param.opts = response
            this.options[name] = response
          })
          this.handleFetchOptionsSuccess(name, param)
        })
      }).catch(function (error) {
        console.log(error.stack)
        param.loading = false
      }).finally(() => {
        this.optionLoading[name] = false
      })
    },
    getRowClassName (record, index) {
      if (index % 2 === 0) {
        return 'light-row'
      }
      return 'dark-row'
    },
    handleFetchOptionsSuccess (name, param) {
      if (['zones', 'pods', 'clusters', 'hosts', 'pools'].includes(name)) {
        let paramid = ''
        const query = Object.assign({}, this.$route.query)
        if (query[param.field] && _.find(this.options[name], (option) => option.id === query[param.field])) {
          paramid = query[param.field]
        }
        if (!paramid && this.options[name].length > 0) {
          paramid = (this.options[name])[0].id
        }
        if (paramid) {
          this.form[param.field] = paramid
          if (name === 'zones') {
            this.onSelectZoneId(paramid)
          } else if (name === 'pods') {
            this.form.podid = paramid
            this.onSelectPodId(paramid)
          } else if (name === 'clusters') {
            this.form.clusterid = paramid
            this.onSelectClusterId(paramid)
          } else if (name === 'hosts') {
            this.form.hostid = paramid
            this.onSelectHostId(paramid)
          } else if (name === 'pools') {
            this.form.poolid = paramid
            this.onSelectPoolId(paramid)
          }
        }
      }
    },
    updateQuery (field, value) {
      const query = Object.assign({}, this.$route.query)
      if (query[field] === value + '') {
        return
      }
      query[field] = value
      if (['zoneid', 'podid', 'clusterid'].includes(field)) {
        query.managedpage = 1
        query.unmanagedpage = 1
      }
      this.$router.push({ query })
    },
    resetLists () {
      this.page.unmanaged = 1
      this.unmanagedInstances = []
      this.unmanagedInstancesSelectedRowKeys = []
      this.page.managed = 1
      this.managedInstances = []
      this.managedInstancesSelectedRowKeys = []
    },
    onSelectHypervisor (value) {
      this.sourceHypervisor = value
      this.sourceActions = this.AllSourceActions.filter(x => x.sourceDestHypervisors[value])
      this.form.sourceAction = this.sourceActions[0].name || ''
      this.selectedVmwareVcenter = undefined
      this.onSelectSourceAction(this.form.sourceAction)
    },
    onSelectSourceAction (value) {
      this.selectedSourceAction = value
      const selectedAction = _.find(this.AllSourceActions, (option) => option.name === value)
      this.destinationHypervisor = selectedAction.sourceDestHypervisors[this.sourceHypervisor]
      this.wizardTitle = selectedAction.wizardTitle
      this.wizardDescription = selectedAction.wizardDescription
      this.form.zoneid = undefined
      this.form.podid = undefined
      this.form.clusterid = undefined
      this.fetchOptions(this.params.zones, 'zones')
      this.resetLists()
    },
    onSelectZoneId (value) {
      this.zoneId = value
      this.podId = null
      this.clusterId = null
      this.hostId = null
      this.poolId = null
      this.zone = _.find(this.options.zones, (option) => option.id === value)
      this.resetLists()
      this.form.clusterid = undefined
      this.form.podid = undefined
      this.form.poolid = undefined
      this.updateQuery('zoneid', value)
      this.fetchOptions(this.params.pods, 'pods')
    },
    onSelectPodId (value) {
      this.podId = value
      this.pod = _.find(this.options.pods, (option) => option.id === value)
      this.resetLists()
      this.clusterId = null
      this.form.clusterid = undefined
      this.updateQuery('podid', value)
      this.fetchOptions(this.params.clusters, 'clusters', value)
    },
    onSelectClusterId (value) {
      this.clusterId = value
      this.cluster = _.find(this.options.clusters, (option) => option.id === value)
      this.resetLists()
      this.updateQuery('clusterid', value)
      if (this.isUnmanaged) {
        this.fetchInstances()
      } else if (this.showHost) {
        this.fetchOptions(this.params.hosts, 'hosts', value)
      } else if (this.showPool) {
        this.fetchOptions(this.params.pools, 'pools', value)
      }
    },
    onSelectHostId (value) {
      this.hostId = value
      this.updateQuery('scope', 'local')
      this.fetchOptions(this.params.pools, 'pools', value)
    },
    onSelectPoolId (value) {
      this.poolId = value
    },
    onSelectPoolScope (value) {
      this.poolscope = value
      this.poolId = null
      this.updateQuery('scope', value)
      this.fetchOptions(this.params.pools, 'pools', value)
    },
    fetchInstances () {
      this.fetchUnmanagedInstances()
      if (this.isUnmanaged) {
        this.fetchManagedInstances()
      } else if (this.kvmOption === 'external') {
        this.fetchExternalInstances()
      }
    },
    fetchUnmanagedInstances (page, pageSize) {
      if (this.isExternal) {
        this.fetchExtKVMInstances(page, pageSize)
        return
      }
      const params = {
        clusterid: this.clusterId
      }
      const query = Object.assign({}, this.$route.query)
      this.page.unmanaged = page || parseInt(query.unmanagedpage) || this.page.unmanaged
      this.updateQuery('unmanagedpage', this.page.unmanaged)
      params.page = this.page.unmanaged
      this.pageSize.unmanaged = pageSize || this.pageSize.unmanaged
      params.pagesize = this.pageSize.unmanaged
      this.unmanagedInstances = []
      this.unmanagedInstancesSelectedRowKeys = []
      if (this.searchParams.unmanaged.keyword) {
        params.keyword = this.searchParams.unmanaged.keyword
      }
      if (!this.clusterId) {
        return
      }
      this.unmanagedInstancesLoading = true
      this.searchParams.unmanaged = params

      let apiName = this.listInstancesApi.unmanaged
      if (this.isMigrateFromVmware && this.selectedVmwareVcenter) {
        apiName = this.listInstancesApi.migratefromvmware
        if (this.selectedVmwareVcenter.vcenter) {
          params.datacentername = this.selectedVmwareVcenter.datacentername
          params.vcenter = this.selectedVmwareVcenter.vcenter
          params.username = this.selectedVmwareVcenter.username
          params.password = this.selectedVmwareVcenter.password
        } else {
          params.existingvcenterid = this.selectedVmwareVcenter.existingvcenterid
        }
      }

      api(apiName, params).then(json => {
        const response = this.isMigrateFromVmware ? json.listvmwaredcvmsresponse : json.listunmanagedinstancesresponse
        const listUnmanagedInstances = response.unmanagedinstance
        if (this.arrayHasItems(listUnmanagedInstances)) {
          this.unmanagedInstances = this.unmanagedInstances.concat(listUnmanagedInstances)
        }
        this.itemCount.unmanaged = response.count
      }).finally(() => {
        this.unmanagedInstancesLoading = false
      })
    },
    fetchExtKVMInstances (page, pageSize) {
      const params = {
        zoneid: this.zoneid
      }
      const query = Object.assign({}, this.$route.query)
      this.page.unmanaged = page || parseInt(query.unmanagedpage) || this.page.unmanaged
      this.updateQuery('unmanagedpage', this.page.unmanaged)
      params.page = this.page.unmanaged
      this.pageSize.unmanaged = pageSize || this.pageSize.unmanaged
      params.pagesize = this.pageSize.unmanaged
      this.unmanagedInstances = []
      this.unmanagedInstancesSelectedRowKeys = []
      if (this.searchParams.unmanaged.keyword) {
        params.keyword = this.searchParams.unmanaged.keyword
      }
      this.values = toRaw(this.form)
      this.unmanagedInstancesLoading = true
      params.zoneid = this.zoneId
      params.host = this.values.hostname
      params.username = this.values.username
      params.password = this.values.password
      params.hypervisor = this.destinationHypervisor
      var details = ['host', 'username', 'password']
      for (var detail of details) {
        if (!params[detail]) {
          this.$notification.error({
            message: this.$t('message.request.failed'),
            description: this.$t('message.please.enter.valid.value') + ': ' + this.$t('label.' + detail.toLowerCase())
          })
          return
        }
      }
      this.searchParams.unmanaged = params
      api(this.listInstancesApi.external, params).then(json => {
        const listUnmanagedInstances = json.listvmsforimportresponse.unmanagedinstance
        if (this.arrayHasItems(listUnmanagedInstances)) {
          this.unmanagedInstances = this.unmanagedInstances.concat(listUnmanagedInstances)
        }
        this.itemCount.unmanaged = json.listvmsforimportresponse.count
      }).catch(error => {
        this.$notifyError(error)
      }).finally(() => {
        this.unmanagedInstancesLoading = false
      })
    },
    searchUnmanagedInstances (params) {
      this.searchParams.unmanaged.keyword = params.searchQuery
      this.fetchUnmanagedInstances()
    },
    fetchManagedInstances (page, pageSize) {
      const params = {
        listall: true,
        clusterid: this.clusterId
      }
      const query = Object.assign({}, this.$route.query)
      this.page.managed = page || parseInt(query.managedpage) || this.page.managed
      this.updateQuery('managedpage', this.page.managed)
      params.page = this.page.managed
      this.pageSize.managed = pageSize || this.pageSize.managed
      params.pagesize = this.pageSize.managed
      this.managedInstances = []
      this.managedInstancesSelectedRowKeys = []
      if (this.searchParams.managed.keyword) {
        params.keyword = this.searchParams.managed.keyword
      }
      if (!this.clusterId) {
        return
      }
      this.managedInstancesLoading = true
      this.searchParams.managed = params
      api(this.listInstancesApi.managed, params).then(json => {
        const listManagedInstances = json.listvirtualmachinesresponse.virtualmachine
        if (this.arrayHasItems(listManagedInstances)) {
          this.managedInstances = this.managedInstances.concat(listManagedInstances)
        }
        this.itemCount.managed = json.listvirtualmachinesresponse.count
      }).finally(() => {
        this.managedInstancesLoading = false
      })
    },
    searchManagedInstances (params) {
      this.searchParams.managed.keyword = params.searchQuery
      this.fetchManagedInstances()
    },
    onUnmanagedInstanceSelectRow (value) {
      this.unmanagedInstancesSelectedRowKeys = value
    },
    onManagedInstanceSelectRow (value) {
      this.managedInstancesSelectedRowKeys = value
    },
    isValidValueForKey (obj, key) {
      return key in obj && obj[key] != null
    },
    arrayHasItems (array) {
      return array !== null && array !== undefined && Array.isArray(array) && array.length > 0
    },
    isObjectEmpty (obj) {
      return !(obj !== null && obj !== undefined && Object.keys(obj).length > 0 && obj.constructor === Object)
    },
    updateManageInstanceActionLoading (value) {
      this.importUnmanagedInstanceLoading = value
      if (!value) {
        this.fetchInstances()
      }
    },
    fetchVmwareInstanceForKVMMigration (vmname, hostname) {
      const params = {}
      if (this.isMigrateFromVmware && this.selectedVmwareVcenter) {
        if (this.selectedVmwareVcenter.vcenter) {
          params.datacentername = this.selectedVmwareVcenter.datacentername
          params.vcenter = this.selectedVmwareVcenter.vcenter
          params.username = this.selectedVmwareVcenter.username
          params.password = this.selectedVmwareVcenter.password
        } else {
          params.existingvcenterid = this.selectedVmwareVcenter.existingvcenterid
        }
        params.instancename = vmname
        params.hostname = hostname
      }
      api('listVmwareDcVms', params).then(json => {
        const response = json.listvmwaredcvmsresponse
        this.selectedUnmanagedInstance = response.unmanagedinstance[0]
        this.selectedUnmanagedInstance.ostypename = this.selectedUnmanagedInstance.osdisplayname
        this.selectedUnmanagedInstance.state = this.selectedUnmanagedInstance.powerstate
      }).catch(error => {
        this.$notifyError(error)
      }).finally(() => {
        this.loading = false
      })
    },
    onManageInstanceAction () {
      this.selectedUnmanagedInstance = {}
      if (this.unmanagedInstances.length > 0 &&
        this.unmanagedInstancesSelectedRowKeys.length > 0) {
        this.selectedUnmanagedInstance = this.unmanagedInstances[this.unmanagedInstancesSelectedRowKeys[0]]
        this.selectedUnmanagedInstance.ostypename = this.selectedUnmanagedInstance.osdisplayname
        this.selectedUnmanagedInstance.state = this.selectedUnmanagedInstance.powerstate
      }
      if (this.isMigrateFromVmware && this.selectedUnmanagedInstance.state === 'PowerOn' && this.selectedUnmanagedInstance.ostypename.toLowerCase().includes('windows')) {
        message.error({
          content: () => 'Cannot import Running Windows VMs, please gracefully shutdown the source VM before importing',
          style: {
            marginTop: '20vh',
            color: 'red'
          }
        })
        this.showUnmanageForm = false
      } else if (this.isMigrateFromVmware) {
        this.fetchVmwareInstanceForKVMMigration(this.selectedUnmanagedInstance.name, this.selectedUnmanagedInstance.hostname)
        this.showUnmanageForm = true
      } else {
        this.showUnmanageForm = true
      }
    },
    onImportInstanceAction () {
      this.selectedUnmanagedInstance = {}
      this.values = toRaw(this.form)
      if (!this.values.diskpath) {
        this.$notification.error({
          message: this.$t('message.request.failed'),
          description: this.$t('message.please.enter.valid.value') + ': ' + this.$t('label.disk.path')
        })
        return
      }
      if (this.showPool && !this.values.poolid) {
        this.$notification.error({
          message: this.$t('message.request.failed'),
          description: this.$t('message.please.enter.valid.value') + ': ' + this.$t('label.storagepool')
        })
        return
      }
      this.showUnmanageForm = true
    },
    closeImportUnmanagedInstanceForm () {
      this.selectedUnmanagedInstance = {}
      this.showUnmanageForm = false
    },
    onUnmanageInstanceAction () {
      const self = this
      const title = this.managedInstancesSelectedRowKeys.length > 1
        ? this.$t('message.action.unmanage.instances')
        : this.$t('message.action.unmanage.instance')
      var vmNames = []
      for (var index of this.managedInstancesSelectedRowKeys) {
        vmNames.push(this.managedInstances[index].name)
      }
      const content = vmNames.join(', ')
      this.$confirm({
        title: title,
        okText: this.$t('label.ok'),
        okType: 'danger',
        content: content,
        cancelText: this.$t('label.cancel'),
        onOk () {
          self.unmanageInstances()
        }
      })
    },
    trackImportJobId (details) {
      const jobId = details[0]
      const name = details[1]
      this.$pollJob({
        jobId,
        title: this.$t('label.import.instance'),
        description: this.$t('label.import.instance'),
        loadingMessage: `${this.$t('label.import.instance')} ${name} ${this.$t('label.in.progress')}`,
        catchMessage: this.$t('error.fetching.async.job.result'),
        successMessage: this.$t('message.success.import.instance') + ' ' + name,
        successMethod: (result) => {
          this.fetchInstances()
        }
      })
    },
    unmanageInstances () {
      for (var index of this.managedInstancesSelectedRowKeys) {
        const vm = this.managedInstances[index]
        var params = { id: vm.id }
        api('unmanageVirtualMachine', params).then(json => {
          const jobId = json.unmanagevirtualmachineresponse.jobid
          this.$pollJob({
            jobId,
            title: this.$t('label.unmanage.instance'),
            description: vm.name,
            loadingMessage: `${this.$t('label.unmanage.instance')} ${vm.name} ${this.$t('label.in.progress')}`,
            catchMessage: this.$t('error.fetching.async.job.result'),
            successMessage: this.$t('message.success.unmanage.instance') + ' ' + vm.name,
            successMethod: result => {
              if (index === this.managedInstancesSelectedRowKeys[this.managedInstancesSelectedRowKeys.length - 1]) {
                this.fetchInstances()
              }
            }
          })
        }).catch(error => {
          this.$notifyError(error)
        }).finally(() => {
          this.loading = false
        })
      }
    },
    onListUnmanagedInstancesFromVmware (obj) {
      this.selectedVmwareVcenter = obj.params
      this.unmanagedInstances = obj.response.unmanagedinstance
      this.itemCount.unmanaged = obj.response.count
      this.unmanagedInstancesLoading = false
    },
    updateVmwareVcenterType (type) {
      this.vmwareVcenterType = type
    }
  }
}
</script>

<style scoped lang="less">
:deep(.ant-table-small) > .ant-table-content > .ant-table-body {
  margin: 0;
}

.importform {
  width: 80vw;
}
.instances-card {
  height: 100%;
}
.source-dest-card {
  width: 50%;
  height: 100%;
}
.instances-card-table {
  overflow-y: auto;
  margin-bottom: 100px;
}
.instances-card-footer {
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
  margin-left: 10px;
  right: 0;
  margin-right: 10px;
}
.row-element {
  margin-top: 10px;
  margin-bottom: 10px;
}
.action-button-left {
  text-align: left;
}
.action-button-right {
  text-align: right;
}
.fetch-instances-column {
  width: 50%;
  margin-left: 50%;
  padding-left: 24px;
}

.breadcrumb-card {
  margin-left: -24px;
  margin-right: -24px;
  margin-top: -16px;
  margin-bottom: 12px;
}

.ant-breadcrumb {
  vertical-align: text-bottom;
}

</style>