@rancher/shell 0.3.0 → 0.3.2

package/components/form/NodeScheduling.vue

@@ -3,7 +3,7 @@ import { mapGetters } from 'vuex';
 import { RadioGroup } from '@components/Form/Radio';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import NodeAffinity from '@shell/components/form/NodeAffinity';
-import { HARVESTER_NAME as VIRTUAL } from '@shell/config/product/harvester-manager';
+import { HARVESTER_NAME as VIRTUAL } from '@shell/config/features';
 import { _VIEW } from '@shell/config/query-params';
 import { isEmpty } from '@shell/utils/object';
 import { HOSTNAME } from '@shell/config/labels-annotations';

package/components/form/Probe.vue

@@ -285,10 +285,10 @@ export default {
           >
             <UnitInput
               v-model="probe.timeoutSeconds"
+              min="0"
               :mode="mode"
               :suffix="t('suffix.sec')"
-              :label="t('probe.timeout.placeholder')"
-              min="0"
+              :label="t('probe.timeout.label')"
               :placeholder="t('probe.timeout.placeholder')"
               @input="update"
             />
@@ -322,7 +322,7 @@ export default {
               min="1"
               :mode="mode"
               :label="t('probe.failureThreshold.label')"
-              :placeholder="t('probe.failureThreshold.label')"
+              :placeholder="t('probe.failureThreshold.placeholder')"
               @input="update"
             />
           </div>

package/components/form/ResourceQuota/Project.vue

@@ -72,12 +72,12 @@ export default {
       @remove="emitRemove"
     >
       <template #columns="props">
-        <Row
-          v-model="value"
-          :mode="mode"
-          :types="remainingTypes(typeValues[props.i])"
-          :type="typeValues[props.i]"
-          @type-change="updateType(props.i, $event)"
+        <Row
+          v-model="value"
+          :mode="mode"
+          :types="remainingTypes(typeValues[props.i])"
+          :type="typeValues[props.i]"
+          @type-change="updateType(props.i, $event)"
         />
       </template>
     </ArrayList>

package/components/form/ResourceTabs/index.vue

@@ -11,6 +11,8 @@ import { EVENT } from '@shell/config/types';
 import SortableTable from '@shell/components/SortableTable';
 import { _VIEW } from '@shell/config/query-params';
 import RelatedResources from '@shell/components/RelatedResources';
+import { ExtensionPoint, TabLocation } from '@shell/core/types';
+import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 
 export default {
 
@@ -58,11 +60,6 @@ export default {
     needRelated: {
       type:    Boolean,
       default: true
-    },
-
-    alwaysShowEvents: {
-      type:    Boolean,
-      default: false
     }
   },
 
@@ -74,6 +71,7 @@ export default {
       allEvents:     [],
       selectedTab:   this.defaultTab,
       didLoadEvents: false,
+      extensionTabs: getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.RESOURCE_DETAIL, this.$route),
     };
   },
 
@@ -92,7 +90,7 @@ export default {
       return false;
     },
     showEvents() {
-      return this.isView && this.needEvents && this.hasEvents && (this.events.length || this.alwaysShowEvents);
+      return this.isView && this.needEvents && this.hasEvents;
     },
     showRelated() {
       return this.isView && this.needRelated;
@@ -226,5 +224,25 @@ export default {
         direction="to"
       />
     </Tab>
+
+    <!-- Extension tabs -->
+    <Tab
+      v-for="tab, i in extensionTabs"
+      :key="`${tab.name}${i}`"
+      :name="tab.name"
+      :label="tab.label"
+      :label-key="tab.labelKey"
+      :weight="tab.weight"
+      :tooltip="tab.tooltip"
+      :show-header="tab.showHeader"
+      :display-alert-icon="tab.displayAlertIcon"
+      :error="tab.error"
+      :badge="tab.badge"
+    >
+      <component
+        :is="tab.component"
+        :resource="value"
+      />
+    </Tab>
   </Tabbed>
 </template>

package/components/form/Security.vue

@@ -63,10 +63,10 @@ export default {
 
     const {
       capabilities = {},
-      runAsRoot = true,
+      runAsNonRoot = false,
       readOnlyRootFilesystem = false,
       privileged = false,
-      allowPrivilegeEscalation = true,
+      allowPrivilegeEscalation = false,
       runAsUser
     } = this.value;
     const {
@@ -78,7 +78,7 @@ export default {
       privileged,
       allowPrivilegeEscalation,
       allCapabilities,
-      runAsRoot,
+      runAsNonRoot,
       readOnlyRootFilesystem,
       add,
       drop,
@@ -105,7 +105,7 @@ export default {
   methods: {
     update() {
       const securityContext = {
-        runAsRoot:                this.runAsRoot,
+        runAsNonRoot:             this.runAsNonRoot,
         readOnlyRootFilesystem:   this.readOnlyRootFilesystem,
         capabilities:             { add: this.add, drop: this.drop },
         privileged:               this.privileged,
@@ -115,6 +115,7 @@ export default {
 
       this.$emit('input', securityContext);
     }
+
   }
 };
 </script>
@@ -164,13 +165,13 @@ export default {
           class="col span-6"
         >
           <RadioGroup
+            v-model="runAsNonRoot"
             name="runasNonRoot"
             :label="t('workload.container.security.runAsNonRoot.label')"
-            :value="!runAsRoot"
             :options="[false, true]"
             :labels="[t('workload.container.security.runAsNonRoot.false'), t('workload.container.security.runAsNonRoot.true')]"
             :mode="mode"
-            @input="e=>{runAsRoot = !e; update()}"
+            @input="update"
           />
         </div>
         <div

package/components/form/Select.vue

@@ -135,7 +135,7 @@ export default {
       return true;
     },
     getOptionKey(opt) {
-      if (opt.optionKey) {
+      if (opt?.optionKey) {
         return get(opt, opt.optionKey);
       }
 
@@ -279,9 +279,10 @@ export default {
 
     ::v-deep .vs__selected-options {
       display: flex;
+      margin: 3px;
 
       .vs__selected {
-          width: 100%;
+          width: initial;
       }
     }
 

package/components/form/SelectOrCreateAuthSecret.vue

@@ -1,6 +1,5 @@
 <script>
 import { _EDIT } from '@shell/config/query-params';
-import Loading from '@shell/components/Loading';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { AUTH_TYPE, NORMAN, SECRET } from '@shell/config/types';
@@ -13,7 +12,6 @@ export default {
   name: 'SelectOrCreateAuthSecret',
 
   components: {
-    Loading,
     LabeledInput,
     LabeledSelect,
   },
@@ -131,8 +129,6 @@ export default {
       } else {
         this.allSecrets = await this.$store.dispatch(`${ this.inStore }/findAll`, { type: SECRET });
       }
-    } else {
-      this.allSecrets = [];
     }
 
     if ( this.allowS3 && this.$store.getters['rancher/canList'](NORMAN.CLOUD_CREDENTIAL) ) {
@@ -170,10 +166,10 @@ export default {
     this.update();
   },
 
-  data() {
+  data(props) {
     return {
-      allCloudCreds: null,
-      allSecrets:    null,
+      allCloudCreds: [],
+      allSecrets:    [],
       selected:      null,
 
       publicKey:  '',
@@ -279,11 +275,26 @@ export default {
           disabled: true
         });
       }
+      if ( this.allowNone ) {
+        out.unshift({
+          label: this.t('generic.none'),
+          value: AUTH_TYPE._NONE,
+        });
+      }
+
+      if (this.allowSsh || this.allowS3 || this.allowBasic) {
+        out.unshift({
+          label:    'divider',
+          disabled: true,
+          kind:     'divider'
+        });
+      }
 
       if ( this.allowSsh ) {
         out.unshift({
           label: this.t('selectOrCreateAuthSecret.createSsh'),
           value: AUTH_TYPE._SSH,
+          kind:  'highlighted'
         });
       }
 
@@ -291,6 +302,7 @@ export default {
         out.unshift({
           label: this.t('selectOrCreateAuthSecret.createS3'),
           value: AUTH_TYPE._S3,
+          kind:  'highlighted'
         });
       }
 
@@ -298,13 +310,7 @@ export default {
         out.unshift({
           label: this.t('selectOrCreateAuthSecret.createBasic'),
           value: AUTH_TYPE._BASIC,
-        });
-      }
-
-      if ( this.allowNone ) {
-        out.unshift({
-          label: this.t('generic.none'),
-          value: AUTH_TYPE._NONE,
+          kind:  'highlighted'
         });
       }
 
@@ -455,9 +461,7 @@ export default {
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
   <div
-    v-else
     class="select-or-create-auth-secret"
   >
     <div
@@ -469,21 +473,10 @@ export default {
           v-model="selected"
           :mode="mode"
           :label-key="labelKey"
+          :loading="$fetchState.pending"
           :options="options"
           :selectable="option => !option.disabled"
-        >
-          <template v-slot:option="opt">
-            <template v-if="opt.kind === 'divider'">
-              <hr>
-            </template>
-            <template v-else-if="opt.kind === 'title'">
-              {{ opt.label }}
-            </template>
-            <template v-else>
-              {{ opt.label }}
-            </template>
-          </template>
-        </LabeledSelect>
+        />
       </div>
       <template v-if="selected === _SSH">
         <div :class="moreCols">

package/components/form/ServicePorts.vue

@@ -136,6 +136,10 @@ export default {
         </span>
         <span class="port">
           <t k="servicePorts.rules.listening.label" />
+          <i
+            v-tooltip="t('servicesPage.listeningPorts')"
+            class="icon icon-info flex"
+          />
           <span class="text-error">*</span>
         </span>
         <span
@@ -146,6 +150,10 @@ export default {
         </span>
         <span class="target-port">
           <t k="servicePorts.rules.target.label" />
+          <i
+            v-tooltip="t('servicesPage.targetPorts')"
+            class="icon icon-info flex"
+          />
           <span class="text-error">*</span>
 
         </span>

package/components/form/WorkloadPorts.vue

@@ -8,7 +8,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { HCI as HCI_LABELS_ANNOTATIONS } from '@shell/config/labels-annotations';
 import { isHarvesterSatisfiesVersion } from '@shell/utils/cluster';
-import { HARVESTER_NAME as HARVESTER } from '@shell/config/product/harvester-manager';
+import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import { CAPI, SERVICE } from '@shell/config/types';
 
 export default {
@@ -259,6 +259,12 @@ export default {
 
 <template>
   <div :style="{'width':'100%'}">
+    <p
+      v-if="rows.length > 0"
+      class="padded"
+    >
+      {{ t('workload.container.ports.detailedDescription') }}
+    </p>
     <div
       v-for="(row, idx) in rows"
       :key="idx"

package/components/form/__tests__/ArrayList.test.ts

@@ -0,0 +1,74 @@
+import { mount } from '@vue/test-utils';
+import ArrayList from '@shell/components/form/ArrayList.vue';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+
+describe('the ArrayList', () => {
+  it('is empty', () => {
+    const wrapper = mount(ArrayList, {
+      propsData: {
+        value: [],
+        mode:  _EDIT
+      },
+    });
+    const elements = wrapper.findAll('[data-testid^="array-list-box"]');
+
+    expect(elements).toHaveLength(0);
+  });
+
+  it('shows an initial empty row', () => {
+    const wrapper = mount(ArrayList, {
+      propsData: {
+        value:           [],
+        mode:            _EDIT,
+        initialEmptyRow: true
+      },
+    });
+    const arrayListBoxes = wrapper.findAll('[data-testid="array-list-box"]');
+
+    expect(arrayListBoxes).toHaveLength(1);
+  });
+
+  it('expands when the add button is clicked', async() => {
+    const wrapper = mount(ArrayList, {
+      propsData: {
+        value: [],
+        mode:  _EDIT,
+      },
+    });
+
+    const arrayListButton = wrapper.find('[data-testid="array-list-button"]').element as HTMLElement;
+
+    await arrayListButton.click();
+    await arrayListButton.click();
+    const arrayListBoxes = wrapper.findAll('[data-testid="array-list-box"]');
+
+    expect(arrayListBoxes).toHaveLength(2);
+  });
+
+  it('contracts when a delete button is clicked', async() => {
+    const wrapper = mount(ArrayList, {
+      propsData: {
+        value: ['string 1', 'string 2'],
+        mode:  _EDIT,
+      },
+    });
+    const deleteButton = wrapper.get('[data-testid^="remove-item"]').element as HTMLElement;
+
+    await deleteButton.click();
+    const arrayListBoxes = wrapper.findAll('[data-testid="array-list-box"]');
+
+    expect(arrayListBoxes).toHaveLength(1);
+  });
+
+  it('add button is hidden in read-only mode', () => {
+    const wrapper = mount(ArrayList, {
+      propsData: {
+        value: ['read-only example'],
+        mode:  _VIEW,
+      },
+    });
+    const arrayListButtons = wrapper.findAll('[data-testid="array-list-button"]');
+
+    expect(arrayListButtons).toHaveLength(0);
+  });
+});

package/components/form/__tests__/ArrayListGrouped.test.ts

@@ -4,7 +4,7 @@ import ArrayListGrouped from '@shell/components/form/ArrayListGrouped.vue';
 describe('component: ArrayListGrouped', () => {
   it('should display enabled add button', () => {
     const wrapper = mount(ArrayListGrouped);
-    const button = wrapper.find('[data-testid^="add-item"]').element as HTMLInputElement;
+    const button = wrapper.find('[data-testid="array-list-button"]').element as HTMLButtonElement;
 
     expect(button.disabled).toBe(false);
   });
@@ -14,7 +14,7 @@ describe('component: ArrayListGrouped', () => {
       mocks: { propsData: { value: ['a', 'b'] } },
       slots: { default: '<div id="test"/>' }
     });
-    const button = wrapper.find('[data-testid^="add-item"]');
+    const button = wrapper.find('[data-testid^="array-list-button"]');
 
     await button.trigger('click');
     await button.trigger('click');
@@ -28,12 +28,14 @@ describe('component: ArrayListGrouped', () => {
       mocks: { propsData: { value: ['a', 'b'] } },
       slots: { default: '<div id="test"/>' }
     });
+    const button = wrapper.find('[data-testid^="array-list-button"]');
 
-    await wrapper.find('[data-testid^="add-item"]').trigger('click');
+    await button.trigger('click');
+    await button.trigger('click');
     await wrapper.find('[data-testid^="remove-item"]').trigger('click');
 
     const elements = wrapper.findAll('#test');
 
-    expect(elements).toHaveLength(0);
+    expect(elements).toHaveLength(1);
   });
 });

package/components/formatter/Checked.vue

@@ -12,7 +12,7 @@ export default {
 
 <template>
   <span v-if="value">
-    <i class="icon icon-lg icon-checkmark" />
+    <i class="icon icon-checkmark" />
   </span>
   <span
     v-else

package/components/formatter/ClusterLink.vue

@@ -62,6 +62,11 @@ export default {
       {{ value }}
     </n-link>
     <span v-else>{{ value }}</span>
+    <i
+      v-if="row.unavailableMachines"
+      v-tooltip="row.unavailableMachines"
+      class="conditions-alert-icon icon-alert icon"
+    />
     <i
       v-if="row.rkeTemplateUpgrade"
       v-tooltip="t('cluster.rkeTemplateUpgrade', { name: row.rkeTemplateUpgrade })"

package/components/formatter/IconIsDefault.vue

@@ -23,12 +23,12 @@ export default {
 <template>
   <span v-if="row[col.value]">
     <span>
-      <i class="icon icon-2x icon-checkmark" />
+      <i class="icon icon-checkmark" />
     </span>
   </span>
   <span v-else>
     <span>
-      <i class="icon icon-2x icon-x" />
+      <i class="icon icon-x" />
     </span>
   </span>
 </template>

package/components/formatter/InternalExternalIP.vue

@@ -11,8 +11,8 @@ export default {
     },
   },
   computed: {
-    showBoth() {
-      return this.row.internalIp !== this.row.externalIp;
+    internalSameAsExternal() {
+      return this.row.internalIp === this.row.externalIp;
     },
     ...mapGetters({ t: 'i18n/t' })
   },
@@ -35,12 +35,15 @@ export default {
       />
     </template>
     <template v-else>
-      {{ t('generic.none') }}
+      -
     </template>
-
-    <template v-if="showBoth">
-      <template v-if="isIp(row.internalIp)">
-        / {{ row.internalIp }} <CopyToClipboard
+    /
+    <template>
+      <template v-if="internalSameAsExternal && isIp(row.internalIp)">
+        {{ t('tableHeaders.internalIpSameAsExternal') }}
+      </template>
+      <template v-else-if="isIp(row.internalIp)">
+        {{ row.internalIp }}<CopyToClipboard
           label-as="tooltip"
           :text="row.internalIp"
           class="icon-btn"
@@ -48,7 +51,7 @@ export default {
         />
       </template>
       <template v-else>
-        {{ t('generic.none') }}
+        -
       </template>
     </template>
   </span>

package/components/formatter/LiveDuration.vue

@@ -0,0 +1,78 @@
+<script>
+import day from 'dayjs';
+import { elapsedTime } from '@shell/utils/time';
+
+export default {
+  props: {
+    value: {
+      type:    Object,
+      default: () => {}
+    },
+  },
+
+  mounted() {
+    // Set initial value;
+    if (this.value.startTime) {
+      this.liveUpdate(day());
+    }
+  },
+
+  data() {
+    return { label: '-' };
+  },
+
+  computed: {
+    dayValue() {
+      if (!this.value.startTime) {
+        return null;
+      }
+
+      return day(this.value.startTime);
+    }
+  },
+
+  watch: {
+    value() {
+      if (this.value.startTime) {
+        this.liveUpdate(day());
+      }
+    }
+  },
+
+  methods: {
+    liveUpdate(now) {
+      if (!this.dayValue) {
+        this.label = '-';
+
+        return 300;
+      }
+
+      const { label, diff } = this.getDuration(this.dayValue, now);
+
+      this.label = label;
+
+      return diff;
+    },
+    getDuration(value, from) {
+      const now = day();
+
+      from = from || now;
+      const seconds = Math.abs(value.diff(now, 'seconds'));
+
+      return elapsedTime(seconds);
+    },
+  }
+};
+</script>
+
+<template>
+  <span v-if="value.staticValue">
+    {{ value.staticValue }}
+  </span>
+  <span
+    v-else
+    class="live-date"
+  >
+    {{ label }}
+  </span>
+</template>

package/components/formatter/WorkloadHealthScale.vue

@@ -261,15 +261,17 @@ $width: 150px;
       }
     }
 
+    $icon-width: 21px;
+
     .health {
-      width: $width - $height; // height is width of icon;
+      width: $width - $icon-width;
       margin-left: 5px;
     }
     .icon {
-      font-size: $height;
-      width: $height;
+      width: $icon-width;
       color: var(--primary);
       margin-top: 1px;
+      padding: 0 5px 0 3px; // It would be better to display flex here... but the icon looks a pixel off to the right
     }
   }