@rancher/shell 0.1.0 → 0.1.1

package/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/existing.vue

@@ -1,6 +1,6 @@
 <script>
 import UnitInput from '@shell/components/form/UnitInput';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import InputOrDisplay from '@shell/components/InputOrDisplay';
 
@@ -170,16 +170,36 @@ export default {
 </script>
 
 <template>
-  <div @input="update">
+  <div>
     <div class="row mb-20">
-      <div class="col span-6">
-        <InputOrDisplay :name="t('harvester.fields.name')" :value="value.name" :mode="mode">
-          <LabeledInput v-model="value.name" :label="t('harvester.fields.name')" :mode="mode" required />
+      <div
+        data-testid="input-hee-name"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.name')"
+          :value="value.name"
+          :mode="mode"
+        >
+          <LabeledInput
+            v-model="value.name"
+            :label="t('harvester.fields.name')"
+            :mode="mode"
+            required
+            @input="update"
+          />
         </InputOrDisplay>
       </div>
 
-      <div class="col span-6">
-        <InputOrDisplay :name="t('harvester.fields.type')" :value="value.type" :mode="mode">
+      <div
+        data-testid="input-hee-type"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.type')"
+          :value="value.type"
+          :mode="mode"
+        >
           <LabeledSelect
             v-model="value.type"
             :label="t('harvester.fields.type')"
@@ -193,8 +213,15 @@ export default {
     </div>
 
     <div class="row mb-20">
-      <div class="col span-6">
-        <InputOrDisplay :name="t('harvester.fields.volume')" :value="value.volumeName" :mode="mode">
+      <div
+        data-testid="input-hee-volumeName"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.volume')"
+          :value="value.volumeName"
+          :mode="mode"
+        >
           <LabeledSelect
             v-model="value.volumeName"
             :disabled="isDisabled"
@@ -207,8 +234,15 @@ export default {
         </InputOrDisplay>
       </div>
 
-      <div class="col span-6">
-        <InputOrDisplay :name="t('harvester.fields.size')" :value="value.size" :mode="mode">
+      <div
+        data-testid="input-hee-size"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.size')"
+          :value="value.size"
+          :mode="mode"
+        >
           <UnitInput
             v-model="value.size"
             :output-modifier="true"
@@ -217,20 +251,42 @@ export default {
             :label="t('harvester.fields.size')"
             :mode="mode"
             :disabled="true"
+            @input="update"
           />
         </InputOrDisplay>
       </div>
     </div>
 
     <div class="row mb-20">
-      <div v-if="!!image" class="col span-6">
-        <InputOrDisplay :name="t('harvester.fields.image')" :value="image" :mode="mode">
-          <LabeledInput v-model="image" :label="t('harvester.fields.image')" :mode="mode" :disabled="true" />
+      <div
+        v-if="!!image"
+        data-testid="input-hee-image"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.image')"
+          :value="image"
+          :mode="mode"
+        >
+          <LabeledInput
+            v-model="image"
+            :label="t('harvester.fields.image')"
+            :mode="mode"
+            :disabled="true"
+            @input="update"
+          />
         </InputOrDisplay>
       </div>
 
-      <div class="col span-6">
-        <InputOrDisplay :name="t('harvester.virtualMachine.volume.bus')" :value="value.bus" :mode="mode">
+      <div
+        data-testid="input-hee-bus"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.virtualMachine.volume.bus')"
+          :value="value.bus"
+          :mode="mode"
+        >
           <LabeledSelect
             v-model="value.bus"
             :label="t('harvester.virtualMachine.volume.bus')"

package/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/vmImage.vue

@@ -1,6 +1,7 @@
 <script>
+import { findBy } from '@shell/utils/array';
 import UnitInput from '@shell/components/form/UnitInput';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import InputOrDisplay from '@shell/components/InputOrDisplay';
 import { HCI, PVC } from '@shell/config/types';
@@ -72,7 +73,7 @@ export default {
 
   computed: {
     imagesOption() {
-      return this.images.filter(c => c.isReady).map( (I) => {
+      return this.images.filter(c => c.isReady).sort((a, b) => a.creationTimestamp > b.creationTimestamp ? -1 : 1).map( (I) => {
         return {
           label: `${ I.metadata.namespace }/${ I.spec.displayName }`,
           value: I.id
@@ -106,6 +107,15 @@ export default {
         this.update();
       }
     },
+
+    'value.image'(neu) {
+      this.checkImageExists(neu);
+    },
+
+    imagesOption() {
+      this.checkImageExists(this.value.image);
+    },
+
     pvcsResource: {
       handler(pvc) {
         if (pvc?.spec?.resources?.requests?.storage && this.isVirtualType) {
@@ -132,7 +142,7 @@ export default {
     },
 
     onImageChange() {
-      const imageResource = this.$store.getters['harvester/all'](HCI.IMAGE).find( I => this.value.image === I.id);
+      const imageResource = this.$store.getters['harvester/all'](HCI.IMAGE)?.find( I => this.value.image === I.id);
 
       if (this.idx === 0) {
         if (/iso$/i.test(imageResource?.imageSuffix)) {
@@ -150,21 +160,48 @@ export default {
     onOpen() {
       this.images = this.$store.getters['harvester/all'](HCI.IMAGE);
     },
+
+    checkImageExists(imageId) {
+      if (!!imageId && this.imagesOption.length > 0 && !findBy(this.imagesOption, 'value', imageId)) {
+        this.$store.dispatch('growl/error', {
+          title:   this.$store.getters['i18n/t']('harvester.vmTemplate.tips.notExistImage.title', { name: imageId }),
+          message: this.$store.getters['i18n/t']('harvester.vmTemplate.tips.notExistImage.message')
+        }, { root: true });
+
+        this.$set(this.value, 'image', '');
+      }
+    }
   }
 };
 </script>
 
 <template>
-  <div @input="update">
+  <div>
     <div class="row mb-20">
-      <div class="col span-6">
+      <div
+        data-testid="input-hevi-name"
+        class="col span-6"
+      >
         <InputOrDisplay :name="t('harvester.fields.name')" :value="value.name" :mode="mode">
-          <LabeledInput v-model="value.name" :label="t('harvester.fields.name')" required :mode="mode" />
+          <LabeledInput
+            v-model="value.name"
+            :label="t('harvester.fields.name')"
+            required
+            :mode="mode"
+            @input="update"
+          />
         </InputOrDisplay>
       </div>
 
-      <div class="col span-6">
-        <InputOrDisplay :name="t('harvester.fields.type')" :value="value.type" :mode="mode">
+      <div
+        data-testid="input-hevi-type"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.type')"
+          :value="value.type"
+          :mode="mode"
+        >
           <LabeledSelect
             v-model="value.type"
             :label="t('harvester.fields.type')"
@@ -177,22 +214,37 @@ export default {
     </div>
 
     <div class="row mb-20">
-      <div class="col span-6">
-        <InputOrDisplay :name="t('harvester.fields.image')" :value="imageName" :mode="mode">
+      <div
+        data-testid="input-hevi-image"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.image')"
+          :value="imageName"
+          :mode="mode"
+        >
           <LabeledSelect
             v-model="value.image"
             :disabled="idx === 0 && !isCreate && !value.newCreateId && isVirtualType"
             :label="t('harvester.fields.image')"
             :options="imagesOption"
             :mode="mode"
+            :searchable="true"
             :required="validateRequired"
             @input="onImageChange"
           />
         </InputOrDisplay>
       </div>
 
-      <div class="col span-6">
-        <InputOrDisplay :name="t('harvester.fields.size')" :value="value.size" :mode="mode">
+      <div
+        data-testid="input-hevi-size"
+        class="col span-6"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.size')"
+          :value="value.size"
+          :mode="mode"
+        >
           <UnitInput
             v-model="value.size"
             :output-modifier="true"
@@ -203,14 +255,22 @@ export default {
             :required="validateRequired"
             suffix="GiB"
             :disabled="isDisabled"
+            @input="update"
           />
         </InputOrDisplay>
       </div>
     </div>
 
     <div class="row mb-20">
-      <div class="col span-3">
-        <InputOrDisplay :name="t('harvester.virtualMachine.volume.bus')" :value="value.bus" :mode="mode">
+      <div
+        data-testid="input-hevi-bus"
+        class="col span-3"
+      >
+        <InputOrDisplay
+          :name="t('harvester.virtualMachine.volume.bus')"
+          :value="value.bus"
+          :mode="mode"
+        >
           <LabeledSelect
             v-model="value.bus"
             :label="t('harvester.virtualMachine.volume.bus')"

package/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/volume.vue

@@ -2,7 +2,7 @@
 import Loading from '@shell/components/Loading';
 import UnitInput from '@shell/components/form/UnitInput';
 import InputOrDisplay from '@shell/components/InputOrDisplay';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 
 import { PVC } from '@shell/config/types';
@@ -101,22 +101,37 @@ export default {
 </script>
 
 <template>
-  <div @input="update">
+  <div>
     <Loading mode="relative" :loading="loading" />
     <div class="row mb-20">
-      <div class="col span-6">
-        <InputOrDisplay :name="t('harvester.fields.name')" :value="value.name" :mode="mode">
+      <div
+        class="col span-6"
+        data-testid="input-hev-name"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.name')"
+          :value="value.name"
+          :mode="mode"
+        >
           <LabeledInput
             v-model="value.name"
             :label="t('harvester.fields.name')"
             :mode="mode"
             required
+            @input="update"
           />
         </InputOrDisplay>
       </div>
 
-      <div class="col span-6">
-        <InputOrDisplay :name="t('harvester.fields.type')" :value="value.type" :mode="mode">
+      <div
+        class="col span-6"
+        data-testid="input-hev-type"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.type')"
+          :value="value.type"
+          :mode="mode"
+        >
           <LabeledSelect
             v-model="value.type"
             :label="t('harvester.fields.type')"
@@ -130,8 +145,15 @@ export default {
     </div>
 
     <div class="row mb-20">
-      <div class="col span-6">
-        <InputOrDisplay :name="t('harvester.fields.size')" :value="value.size" :mode="mode">
+      <div
+        class="col span-6"
+        data-testid="input-hev-size"
+      >
+        <InputOrDisplay
+          :name="t('harvester.fields.size')"
+          :value="value.size"
+          :mode="mode"
+        >
           <UnitInput
             v-model="value.size"
             :output-modifier="true"
@@ -141,11 +163,15 @@ export default {
             :required="validateRequired"
             :label="t('harvester.fields.size')"
             :disabled="isDisabled"
+            @input="update"
           />
         </InputOrDisplay>
       </div>
 
-      <div class="col span-3">
+      <div
+        data-testid="input-hev-bus"
+        class="col span-3"
+      >
         <InputOrDisplay :name="t('harvester.virtualMachine.volume.bus')" :value="value.bus" :mode="mode">
           <LabeledSelect
             v-model="value.bus"

package/edit/kubevirt.io.virtualmachine/index.vue

@@ -2,21 +2,21 @@
 import isEqual from 'lodash/isEqual';
 import { mapGetters } from 'vuex';
 
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import Tabbed from '@shell/components/Tabbed';
 import Tab from '@shell/components/Tabbed/Tab';
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 import CruResource from '@shell/components/CruResource';
-import RadioGroup from '@shell/components/form/RadioGroup';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { RadioGroup } from '@components/Form/Radio';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import UnitInput from '@shell/components/form/UnitInput';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
 
 import SSHKey from '@shell/edit/kubevirt.io.virtualmachine/VirtualMachineSSHKey';
 import Volume from '@shell/edit/kubevirt.io.virtualmachine/VirtualMachineVolume';
 import Network from '@shell/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork';
 import CpuMemory from '@shell/edit/kubevirt.io.virtualmachine/VirtualMachineCpuMemory';
+import Reserved from '@shell/edit/kubevirt.io.virtualmachine/VirtualMachineReserved';
 import CloudConfig from '@shell/edit/kubevirt.io.virtualmachine/VirtualMachineCloudConfig';
 import NodeScheduling from '@shell/components/form/NodeScheduling';
 import AccessCredentials from '@shell/edit/kubevirt.io.virtualmachine/VirtualMachineAccessCredentials';
@@ -45,7 +45,6 @@ export default {
     CruResource,
     LabeledInput,
     LabeledSelect,
-    UnitInput,
     NameNsDescription,
     Volume,
     SSHKey,
@@ -54,6 +53,7 @@ export default {
     CloudConfig,
     NodeScheduling,
     AccessCredentials,
+    Reserved,
   },
 
   mixins: [CreateEditView, VM_MIXIN],
@@ -145,7 +145,15 @@ export default {
 
     isQemuInstalled() {
       return this.value.isQemuInstalled;
-    }
+    },
+
+    hasRestartAction() {
+      return this.value.hasAction('restart');
+    },
+
+    hasStartAction() {
+      return this.value.hasAction('start');
+    },
   },
 
   watch: {
@@ -270,10 +278,11 @@ export default {
       }
 
       const cloneValue = clone(this.value);
+      const cloneSpec = clone(this.spec);
 
       for (let i = 1; i <= this.count; i++) {
         this.$set(this.value, 'spec', cloneValue.spec);
-        this.$set(this, 'spec', cloneValue.spec);
+        this.$set(this, 'spec', cloneSpec);
         const suffix = i < 10 ? `0${ i }` : i;
 
         this.value.cleanForNew();
@@ -307,7 +316,7 @@ export default {
     },
 
     restartVM() {
-      if ( this.mode === 'edit' && (this.value.hasAction('restart') || this.value.hasAction('start'))) {
+      if ( this.mode === 'edit') {
         const cloneDeepNewVM = clone(this.value);
 
         delete cloneDeepNewVM?.metadata;
@@ -317,7 +326,13 @@ export default {
         const newVM = JSON.parse(JSON.stringify(cloneDeepNewVM));
 
         if (!isEqual(oldVM, newVM) && this.isRestartImmediately) {
-          this.value.doActionGrowl('restart', {});
+          if (this.value.hasAction('restart')) {
+            this.value.doActionGrowl('restart', {});
+          }
+
+          if (this.value.hasAction('start')) {
+            this.value.doActionGrowl('start', {});
+          }
         }
       }
     },
@@ -529,17 +544,11 @@ export default {
               </div>
             </div>
 
-            <div class="col span-6">
-              <UnitInput
-                v-model="reservedMemory"
-                v-int-number
-                :label="t('harvester.virtualMachine.input.reservedMemory')"
-                :mode="mode"
-                :input-exponent="2"
-                :increment="1024"
-                :output-modifier="true"
-              />
-            </div>
+            <Reserved
+              :reserved-memory="reservedMemory"
+              :mode="mode"
+              @updateReserved="updateReserved"
+            />
           </div>
 
           <CloudConfig
@@ -593,15 +602,15 @@ export default {
       </Tabbed>
 
       <div class="mt-20">
-        <span v-if="isEdit" class="restart">
+        <span v-if="isEdit && (hasRestartAction || hasStartAction)" class="restart">
           <Banner color="warning" class="banner-right">
-            {{ t('harvester.virtualMachine.restartTip') }}
+            {{ t('harvester.virtualMachine.restartTip', { restart: hasRestartAction }) }}
 
             <Checkbox
               v-model="isRestartImmediately"
               class="check ml-20"
               type="checkbox"
-              label-key="harvester.virtualMachine.restartNow"
+              :label="t('harvester.virtualMachine.restartNow', { restart: hasRestartAction })"
             />
           </Banner>
         </span>

package/edit/logging-flow/index.vue

@@ -1,5 +1,5 @@
 <script>
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import CruResource from '@shell/components/CruResource';
 import Loading from '@shell/components/Loading';

package/edit/logging.banzaicloud.io.output/index.vue

@@ -7,7 +7,7 @@ import CruResource from '@shell/components/CruResource';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
 import Labels from '@shell/components/form/Labels';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import { PROVIDERS } from '@shell/models/logging.banzaicloud.io.output';
 import { _VIEW } from '@shell/config/query-params';
 import { clone, set } from '@shell/utils/object';

package/edit/logging.banzaicloud.io.output/providers/awsElasticsearch.vue

@@ -1,5 +1,5 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import SecretSelector from '@shell/components/form/SecretSelector';
 
 export default {

package/edit/logging.banzaicloud.io.output/providers/azurestorage.vue

@@ -1,5 +1,5 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import SecretSelector from '@shell/components/form/SecretSelector';
 
 export default {

package/edit/logging.banzaicloud.io.output/providers/cloudwatch.vue

@@ -1,5 +1,5 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import SecretSelector from '@shell/components/form/SecretSelector';
 
 export default {

package/edit/logging.banzaicloud.io.output/providers/datadog.vue

@@ -1,6 +1,6 @@
 <script>
-import Checkbox from '@shell/components/form/Checkbox';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { Checkbox } from '@components/Form/Checkbox';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import SecretSelector from '@shell/components/form/SecretSelector';
 
 export default {

package/edit/logging.banzaicloud.io.output/providers/elasticsearch.vue

@@ -1,8 +1,8 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import SecretSelector from '@shell/components/form/SecretSelector';
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 import { _CREATE } from '@shell/config/query-params';
 import { updatePort, protocol, sslVersions } from './utils';
 

package/edit/logging.banzaicloud.io.output/providers/file.vue

@@ -1,5 +1,5 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 
 export default {
   components: { LabeledInput },

package/edit/logging.banzaicloud.io.output/providers/forward.vue

@@ -1,5 +1,5 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import SecretSelector from '@shell/components/form/SecretSelector';
 import { updatePort } from './utils';
 

package/edit/logging.banzaicloud.io.output/providers/gcs.vue

@@ -1,6 +1,6 @@
 <script>
-import Checkbox from '@shell/components/form/Checkbox';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { Checkbox } from '@components/Form/Checkbox';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import SecretSelector from '@shell/components/form/SecretSelector';
 
 export default {

package/edit/logging.banzaicloud.io.output/providers/gelf.vue

@@ -1,7 +1,7 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 
 export default {
   components: {

package/edit/logging.banzaicloud.io.output/providers/kafka.vue

@@ -1,7 +1,7 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import SecretSelector from '@shell/components/form/SecretSelector';
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 import { protocol } from './utils';
 
 export default {

package/edit/logging.banzaicloud.io.output/providers/kinesisStream.vue

@@ -1,6 +1,6 @@
 <script>
 import SecretSelector from '@shell/components/form/SecretSelector';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 
 export default {
   components: { LabeledInput, SecretSelector },

package/edit/logging.banzaicloud.io.output/providers/logdna.vue

@@ -1,5 +1,5 @@
 <script>
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { LabeledInput } from '@components/Form/LabeledInput';
 
 export default {
   components: { LabeledInput },

package/edit/logging.banzaicloud.io.output/providers/logz.vue

@@ -1,6 +1,6 @@
 <script>
-import Checkbox from '@shell/components/form/Checkbox';
-import LabeledInput from '@shell/components/form/LabeledInput';
+import { Checkbox } from '@components/Form/Checkbox';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import SecretSelector from '@shell/components/form/SecretSelector';
 import { updatePort } from './utils';