apache · yadvr · Mar 29, 2021 · Mar 8, 2021 · Mar 8, 2021 · Mar 23, 2021
diff --git a/ui/src/components/view/ListResourceTable.vue b/ui/src/components/view/ListResourceTable.vue
@@ -22,7 +22,8 @@
      style="width: 25vw;float: right;margin-bottom: 10px; z-index: 8"
      :placeholder="$t('label.search')"
      v-model="filter"
-      @search="handleSearch" />
+      @search="handleSearch"
+      autoFocus />

    <a-table
      size="small"

diff --git a/ui/src/components/view/ResourceLimitTab.vue b/ui/src/components/view/ResourceLimitTab.vue
@@ -34,6 +34,7 @@
          v-decorator="[item.resourcetype, {
            initialValue: item.max
          }]"
+          :autoFocus="index === 0"
        />
      </a-form-item>
      <div class="card-footer">

diff --git a/ui/src/views/AutogenView.vue b/ui/src/views/AutogenView.vue
@@ -173,7 +173,7 @@
                  }]"
                  v-model="formModel[field.name]"
                  :placeholder="field.description"
-                  :autoFocus="fieldIndex === 0"
+                  :autoFocus="fieldIndex === firstIndex"
                />
              </span>
              <span v-else-if="currentAction.mapping && field.name in currentAction.mapping && currentAction.mapping[field.name].options">
@@ -183,6 +183,7 @@
                    rules: [{ required: field.required, message: `${$t('message.error.select')}` }]
                  }]"
                  :placeholder="field.description"
+                  :autoFocus="fieldIndex === firstIndex"
                >
                  <a-select-option key="" >{{ }}</a-select-option>
                  <a-select-option v-for="(opt, optIndex) in currentAction.mapping[field.name].options" :key="optIndex">
@@ -204,6 +205,7 @@
                  :filterOption="(input, option) => {
                    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }"
+                  :autoFocus="fieldIndex === firstIndex"
                >
                  <a-select-option key="">{{ }}</a-select-option>
                  <a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex">
@@ -224,6 +226,7 @@
                  :filterOption="(input, option) => {
                    return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                  }"
+                  :autoFocus="fieldIndex === firstIndex"
                >
                  <a-select-option key="">{{ }}</a-select-option>
                  <a-select-option v-for="opt in field.opts" :key="opt.id">
@@ -239,6 +242,7 @@
                    rules: [{ required: field.required, message: `${$t('message.error.select')}` }]
                  }]"
                  :placeholder="field.description"
+                  :autoFocus="fieldIndex === firstIndex"
                >
                  <a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex">
                    {{ opt.name && opt.type ? opt.name + ' (' + opt.type + ')' : opt.name || opt.description }}
@@ -247,7 +251,7 @@
              </span>
              <span v-else-if="field.type==='long'">
                <a-input-number
-                  :autoFocus="fieldIndex === 0"
+                  :autoFocus="fieldIndex === firstIndex"
                  style="width: 100%;"
                  v-decorator="[field.name, {
                    rules: [{ required: field.required, message: `${$t('message.validate.number')}` }]
@@ -270,6 +274,7 @@
                  }]"
                  :placeholder="field.description"
                  @blur="($event) => handleConfirmBlur($event, field.name)"
+                  :autoFocus="fieldIndex === firstIndex"
                />
              </span>
              <span v-else-if="field.name==='certificate' || field.name==='privatekey' || field.name==='certchain'">
@@ -279,11 +284,12 @@
                    rules: [{ required: field.required, message: `${$t('message.error.required.input')}` }]
                  }]"
                  :placeholder="field.description"
+                  :autoFocus="fieldIndex === firstIndex"
                />
              </span>
              <span v-else>
                <a-input
-                  :autoFocus="fieldIndex === 0"
+                  :autoFocus="fieldIndex === firstIndex"
                  v-decorator="[field.name, {
                    rules: [{ required: field.required, message: `${$t('message.error.required.input')}` }]
                  }]"
@@ -394,7 +400,8 @@ export default {
      searchParams: {},
      actions: [],
      formModel: {},
-      confirmDirty: false
+      confirmDirty: false,
+      firstIndex: 0
    }
  },
  beforeCreate () {
@@ -755,6 +762,7 @@ export default {
          })
        }
      }
+      this.getFirstIndexFocus()

      this.showAction = true
      for (const param of this.currentAction.paramFields) {
@@ -770,6 +778,16 @@ export default {
        this.fillEditFormFieldValues()
      }
    },
+    getFirstIndexFocus () {
+      this.firstIndex = 0
+      for (let fieldIndex = 0; fieldIndex < this.currentAction.paramFields.length; fieldIndex++) {
+        const field = this.currentAction.paramFields[fieldIndex]
+        if (!(this.currentAction.mapping && field.name in this.currentAction.mapping && this.currentAction.mapping[field.name].value)) {
+          this.firstIndex = fieldIndex
+          break
+        }
+      }
+    },
    listUuidOpts (param) {
      if (this.currentAction.mapping && param.name in this.currentAction.mapping && !this.currentAction.mapping[param.name].api) {
        return

diff --git a/ui/src/views/compute/AssignInstance.vue b/ui/src/views/compute/AssignInstance.vue
@@ -29,7 +29,7 @@

      <div class="form__item">
        <p class="form__label">{{ $t('label.accounttype') }}</p>
-        <a-select v-model="selectedAccountType" defaultValue="account">
+        <a-select v-model="selectedAccountType" defaultValue="account" autoFocus>
          <a-select-option :value="$t('label.account')">{{ $t('label.account') }}</a-select-option>
          <a-select-option :value="$t('label.project')">{{ $t('label.project') }}</a-select-option>
        </a-select>

diff --git a/ui/src/views/compute/AttachIso.vue b/ui/src/views/compute/AttachIso.vue
@@ -26,7 +26,8 @@
            v-decorator="['id', {
              initialValue: this.selectedIso,
              rules: [{ required: true, message: `${this.$t('label.required')}`}]
-            }]" >
+            }]"
+            autoFocus>
            <a-select-option v-for="iso in isos" :key="iso.id">
              {{ iso.displaytext || iso.name }}
            </a-select-option>

diff --git a/ui/src/views/compute/ChangeAffinity.vue b/ui/src/views/compute/ChangeAffinity.vue
@@ -29,7 +29,8 @@
        style="margin-bottom: 10px;"
        :placeholder="$t('label.search')"
        v-model="filter"
-        @search="handleSearch" />
+        @search="handleSearch"
+        autoFocus />
    </div>

    <div class="form__item">

diff --git a/ui/src/views/compute/CreateKubernetesCluster.vue b/ui/src/views/compute/CreateKubernetesCluster.vue
@@ -33,7 +33,8 @@
            v-decorator="['name', {
              rules: [{ required: true, message: $t('message.error.kubecluster.name') }]
            }]"
-            :placeholder="apiParams.name.description"/>
+            :placeholder="apiParams.name.description"
+            autoFocus />
        </a-form-item>
        <a-form-item>
          <span slot="label">

diff --git a/ui/src/views/compute/CreateSSHKeyPair.vue b/ui/src/views/compute/CreateSSHKeyPair.vue
@@ -28,7 +28,8 @@
            v-decorator="['name', {
              rules: [{ required: true, message: $t('message.error.name') }]
            }]"
-            :placeholder="apiParams.name.description"/>
+            :placeholder="apiParams.name.description"
+            autoFocus />
        </a-form-item>
        <a-form-item :label="$t('label.publickey')">
          <a-input

diff --git a/ui/src/views/compute/CreateSnapshotWizard.vue b/ui/src/views/compute/CreateSnapshotWizard.vue
@@ -36,7 +36,8 @@
              rules: [{ required: true, message: $t('message.error.select') }]
            }]"
            @change="onChangeVolume"
-            :placeholder="apiParams.volumeid.description">
+            :placeholder="apiParams.volumeid.description"
+            autoFocus>
            <a-select-option
              v-for="volume in listVolumes"
              :key="volume.id">

diff --git a/ui/src/views/compute/DeployVM.vue b/ui/src/views/compute/DeployVM.vue
@@ -41,6 +41,7 @@
                        :options="zoneSelectOptions"
                        @change="onSelectZoneId"
                        :loading="loading.zones"
+                        autoFocus
                      ></a-select>
                    </a-form-item>
                    <a-form-item
@@ -477,6 +478,7 @@
                      v-if="vm.templateid && ['KVM', 'VMware'].includes(hypervisor) && !template.deployasis">
                      <a-form-item :label="$t('label.boottype')">
                        <a-select
+                          :autoFocus="vm.templateid && ['KVM', 'VMware'].includes(hypervisor) && !template.deployasis"
                          v-decorator="['boottype']"
                          @change="fetchBootModes"
                        >

diff --git a/ui/src/views/compute/DestroyVM.vue b/ui/src/views/compute/DestroyVM.vue
@@ -44,7 +44,8 @@
            v-decorator="['volumeids']"
            :placeholder="$t('label.delete.volumes')"
            mode="multiple"
-            :loading="loading">
+            :loading="loading"
+            :autoFocus="$store.getters.userInfo.roletype !== 'Admin' && !$store.getters.features.allowuserexpungerecovervm">
            <a-select-option v-for="volume in volumes" :key="volume.id">
              {{ volume.name }}
            </a-select-option>

diff --git a/ui/src/views/compute/EditVM.vue b/ui/src/views/compute/EditVM.vue
@@ -30,7 +30,8 @@
          </a-tooltip>
        </span>
        <a-input
-          v-decorator="['name', { initialValue: resource.name || '' }]" />
+          v-decorator="['name', { initialValue: resource.name || '' }]"
+          autoFocus />
      </a-form-item>
      <a-form-item>
        <span slot="label">

diff --git a/ui/src/views/compute/InstanceTab.vue b/ui/src/views/compute/InstanceTab.vue
@@ -165,7 +165,7 @@
      {{ $t('message.network.addvm.desc') }}
      <div class="modal-form">
        <p class="modal-form__label">{{ $t('label.network') }}:</p>
-        <a-select :defaultValue="addNetworkData.network" @change="e => addNetworkData.network = e">
+        <a-select :defaultValue="addNetworkData.network" @change="e => addNetworkData.network = e" autoFocus>
          <a-select-option
            v-for="network in addNetworkData.allNetworks"
            :key="network.id"
@@ -195,14 +195,16 @@
          showSearch
          v-if="editNicResource.type==='Shared'"
          v-model="editIpAddressValue"
-          :loading="listIps.loading">
+          :loading="listIps.loading"
+          :autoFocus="editNicResource.type==='Shared'">
          <a-select-option v-for="ip in listIps.opts" :key="ip.ipaddress">
            {{ ip.ipaddress }}
          </a-select-option>
        </a-select>
        <a-input
          v-else
-          v-model="editIpAddressValue"></a-input>
+          v-model="editIpAddressValue"
+          :autoFocus="editNicResource.type!=='Shared'"></a-input>
      </div>
    </a-modal>

@@ -218,7 +220,7 @@
        {{ $t('message.network.secondaryip') }}
      </p>
      <a-divider />
-      <a-input :placeholder="$t('label.new.secondaryip.description')" v-model="newSecondaryIp"></a-input>
+      <a-input :placeholder="$t('label.new.secondaryip.description')" v-model="newSecondaryIp" autoFocus></a-input>
      <div style="margin-top: 10px; display: flex; justify-content:flex-end;">
        <a-button @click="submitSecondaryIP" type="primary" style="margin-right: 10px;">{{ $t('label.add.secondary.ip') }}</a-button>
        <a-button @click="closeModals">{{ $t('label.close') }}</a-button>

diff --git a/ui/src/views/compute/MigrateWizard.vue b/ui/src/views/compute/MigrateWizard.vue
@@ -21,7 +21,8 @@
      :placeholder="$t('label.search')"
      v-model="searchQuery"
      style="margin-bottom: 10px;"
-      @search="fetchData" />
+      @search="fetchData"
+      autoFocus />
    <a-table
      size="small"
      style="overflow-y: auto"

diff --git a/ui/src/views/compute/ScaleKubernetesCluster.vue b/ui/src/views/compute/ScaleKubernetesCluster.vue
@@ -45,7 +45,8 @@
                }
              }]
            }]"
-            :placeholder="apiParams.size.description"/>
+            :placeholder="apiParams.size.description"
+            autoFocus />
        </a-form-item>
        <a-form-item>
          <span slot="label">

diff --git a/ui/src/views/compute/StartVirtualMachine.vue b/ui/src/views/compute/StartVirtualMachine.vue
@@ -43,7 +43,8 @@
              }"
              :loading="podsLoading"
              :placeholder="apiParams.podid.description"
-              @change="handlePodChange">
+              @change="handlePodChange"
+              :autoFocus="this.$store.getters.userInfo.roletype === 'Admin'">
              <a-select-option v-for="pod in this.pods" :key="pod.id">
                {{ pod.name }}
              </a-select-option>

diff --git a/ui/src/views/compute/UpgradeKubernetesCluster.vue b/ui/src/views/compute/UpgradeKubernetesCluster.vue
@@ -44,7 +44,8 @@
              return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }"
            :loading="kubernetesVersionLoading"
-            :placeholder="apiParams.kubernetesversionid.description">
+            :placeholder="apiParams.kubernetesversionid.description"
+            autoFocus >
            <a-select-option v-for="(opt, optIndex) in this.kubernetesVersions" :key="optIndex">
              {{ opt.name || opt.description }}
            </a-select-option>

diff --git a/ui/src/views/compute/backup/FormSchedule.vue b/ui/src/views/compute/backup/FormSchedule.vue
@@ -61,7 +61,8 @@
                      rules: [{required: true, message: $t('message.error.required.input')}]
                    }]"
                    :min="1"
-                    :max="59"/>
+                    :max="59"
+                    autoFocus />
                </a-tooltip>
              </a-form-item>
            </a-col>

diff --git a/ui/src/views/compute/wizard/ComputeOfferingSelection.vue b/ui/src/views/compute/wizard/ComputeOfferingSelection.vue
@@ -21,7 +21,8 @@
      style="width: 25vw;float: right;margin-bottom: 10px; z-index: 8"
      :placeholder="$t('label.search')"
      v-model="filter"
-      @search="handleSearch" />
+      @search="handleSearch"
+      autoFocus />
    <a-table
      :columns="columns"
      :dataSource="tableSource"

diff --git a/ui/src/views/compute/wizard/ComputeSelection.vue b/ui/src/views/compute/wizard/ComputeSelection.vue
@@ -35,6 +35,7 @@
              </a-col>
              <a-col :md="4" :lg="4">
                <a-input-number
+                  :autoFocus="isConstrained"
                  v-model="cpuNumberInputValue"
                  @change="($event) => updateComputeCpuNumber($event)"
                />
@@ -48,6 +49,7 @@
            :validate-status="errors.cpuspeed.status"
            :help="errors.cpuspeed.message">
            <a-input-number
+              :autoFocus="!isConstrained"
              v-model="cpuSpeedInputValue"
              @change="($event) => updateComputeCpuSpeed($event)"
            />

diff --git a/ui/src/views/compute/wizard/DiskSizeSelection.vue b/ui/src/views/compute/wizard/DiskSizeSelection.vue
@@ -23,6 +23,7 @@
      <a-col :md="4" :lg="4">
        <span style="display: inline-flex">
          <a-input-number
+            autoFocus
            v-model="inputValue"
            @change="($event) => updateDiskSize($event)"
          />

diff --git a/ui/src/views/compute/wizard/MultiDiskSelection.vue b/ui/src/views/compute/wizard/MultiDiskSelection.vue
@@ -28,6 +28,7 @@

      <span slot="offering" slot-scope="text, record">
        <a-select
+          autoFocus
          v-if="validOfferings[record.id] && validOfferings[record.id].length > 0"
          @change="updateOffering($event, record.id)"
          :defaultValue="validOfferings[record.id][0].id">

diff --git a/ui/src/views/compute/wizard/NetworkConfiguration.vue b/ui/src/views/compute/wizard/NetworkConfiguration.vue
@@ -30,9 +30,10 @@
      <div>{{ text }}</div>
      <small v-if="record.type!=='L2'">{{ $t('label.cidr') + ': ' + record.cidr }}</small>
    </template>
-    <template slot="ipAddress" slot-scope="text, record">
-      <a-form-item v-if="record.type!=='L2'">
+    <template slot="ipAddress" slot-scope="text, record, index">
+      <a-form-item v-if="record.type!=='L2' && index === 0">
        <a-input
+          :autoFocus="record.type!=='L2'"
          style="width: 150px;"
          v-decorator="['ipAddress' + record.id, {
            rules: [{
@@ -49,9 +50,10 @@
        </a-input>
      </a-form-item>
    </template>
-    <template slot="macAddress" slot-scope="text, record">
+    <template slot="macAddress" slot-scope="text, record, index">
      <a-form-item>
        <a-input
+          :autoFocus="record.type==='L2' && index === 0"
          style="width: 150px;"
          :placeholder="$t('label.macaddress')"
          v-decorator="[`macAddress` + record.id, {

diff --git a/ui/src/views/iam/AddAccount.vue b/ui/src/views/iam/AddAccount.vue
@@ -31,7 +31,8 @@
              initialValue: selectedRole,
              rules: [{ required: true, message: $t('message.error.select') }] }]"
            :loading="roleLoading"
-            :placeholder="apiParams.roleid.description">
+            :placeholder="apiParams.roleid.description"
+            autoFocus>
            <a-select-option v-for="role in roles" :key="role.id">
              {{ role.name + ' (' + role.type + ')' }}
            </a-select-option>

diff --git a/ui/src/views/iam/AddLdapAccount.vue b/ui/src/views/iam/AddLdapAccount.vue
@@ -50,7 +50,7 @@
            @submit="handleSubmit"
            layout="vertical" >
            <a-form-item :label="$t('label.filterby')">
-              <a-select @change="fetchListLdapUsers" v-model="selectedFilter" >
+              <a-select @change="fetchListLdapUsers" v-model="selectedFilter" autoFocus >
                <a-select-option v-for="opt in filters" :key="opt.id" >
                  {{ opt.name }}
                </a-select-option>