@rancher/shell 3.0.0 → 3.0.1-rc.1

package/components/form/KeyValue.vue

@@ -717,7 +717,7 @@ export default {
                 @onFocus="onFocusMarkdownMultiline(i, $event)"
               />
               <TextAreaAutoGrow
-                v-else-if="valueMultiline"
+                v-else-if="valueMultiline && row[valueName] !== undefined"
                 v-model:value="row[valueName]"
                 data-testid="value-multiline"
                 :class="{'conceal': valueConcealed}"

package/components/form/LabeledSelect.vue

@@ -7,8 +7,7 @@ import VueSelectOverrides from '@shell/mixins/vue-select-overrides';
 import { onClickOption, calculatePosition } from '@shell/utils/select';
 import LabeledSelectPagination from '@shell/components/form/labeled-select-utils/labeled-select-pagination';
 import { LABEL_SELECT_NOT_OPTION_KINDS } from '@shell/types/components/labeledSelect';
-
-// In theory this would be nicer as LabeledSelect/index.vue, however that would break a lot of places where we import this (which includes extensions)
+import { mapGetters } from 'vuex';
 
 export default {
   name: 'LabeledSelect',
@@ -23,7 +22,7 @@ export default {
     LabeledSelectPagination
   ],
 
-  emits: ['on-open', 'on-close', 'selecting', 'update:validation', 'update:value'],
+  emits: ['on-open', 'on-close', 'selecting', 'deselecting', 'update:validation', 'update:value'],
 
   props: {
     appendToBody: {
@@ -122,6 +121,7 @@ export default {
   },
 
   computed: {
+    ...mapGetters({ t: 'i18n/t' }),
     hasLabel() {
       return this.isCompact ? false : !!this.label || !!this.labelKey || !!this.$slots.label;
     },
@@ -144,6 +144,11 @@ export default {
 
       return rest;
     },
+
+    // update placeholder text to inform user they can add their own opts when none are found
+    showTagPrompts() {
+      return !this.options.length && this.$attrs.taggable;
+    }
   },
 
   methods: {
@@ -320,10 +325,16 @@ export default {
       @search="onSearch"
       @open="onOpen"
       @close="onClose"
-      @option:selected="$emit('selecting', $event)"
+      @option:selecting="$emit('selecting', $event)"
+      @option:deselecting="$emit('deselecting', $event)"
     >
       <template #option="option">
-        <template v-if="option.kind === 'group'">
+        <template v-if="showTagPrompts">
+          <div class="only-user-opts">
+            {{ t('labeledSelect.pressEnter', {input:getOptionLabel(option.label)}) }}
+          </div>
+        </template>
+        <template v-else-if="option.kind === 'group'">
           <div class="vs__option-kind-group">
             <i
               v-if="option.icon"
@@ -395,8 +406,11 @@ export default {
       </template>
       <template #no-options="{ search }">
         <div class="no-options-slot">
+          <template v-if="showTagPrompts">
+            <span v-if="!searching">{{ t('labeledSelect.startTyping') }}</span>
+          </template>
           <div
-            v-if="paginating"
+            v-else-if="paginating"
             class="paginating"
           >
             <i class="icon icon-spinner icon-spin" />
@@ -674,4 +688,10 @@ $icon-size: 18px;
   }
 }
 
+.vs__dropdown-menu .vs__dropdown-option .only-user-opts{
+    color: var(--dropdown-text);
+    background-color: var(--dropdown-bg);
+    margin: 0px calc(-#{$input-padding-sm}/2);
+    padding: 3px 20px;
+}
 </style>

package/components/form/Password.vue

@@ -3,6 +3,7 @@ import { mapGetters } from 'vuex';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { CHARSET, randomStr } from '@shell/utils/string';
 import { copyTextToClipboard } from '@shell/utils/clipboard';
+import { _CREATE } from '@shell/config/query-params';
 
 export default {
   emits: ['update:value', 'blur'],
@@ -36,7 +37,11 @@ export default {
     ignorePasswordManagers: {
       default: false,
       type:    Boolean,
-    }
+    },
+    mode: {
+      type:    String,
+      default: _CREATE,
+    },
   },
   data() {
     return { reveal: false };
@@ -104,6 +109,7 @@ export default {
       :required="required"
       :disabled="isRandom"
       :ignore-password-managers="ignorePasswordManagers"
+      :mode="mode"
       @blur="$emit('blur', $event)"
     >
       <template #suffix>

package/components/form/UnitInput.vue

@@ -128,7 +128,12 @@ export default {
     delay: {
       type:    Number,
       default: 0
-    }
+    },
+
+    positive: {
+      type:    Boolean,
+      default: false,
+    },
   },
 
   computed: {
@@ -196,6 +201,10 @@ export default {
     update(inputValue) {
       let out = inputValue === '' ? null : inputValue;
 
+      if (this.positive && inputValue < 0) {
+        out = 0;
+      }
+
       if (this.outputModifier) {
         out = out === null ? null : `${ inputValue }${ this.unit }`;
       } else if ( this.outputAs === 'string' ) {

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

@@ -17,6 +17,7 @@ describe('component: UnitInput', () => {
 
     await input.setValue(2);
     await input.setValue(4);
+    input.trigger(event);
 
     expect(wrapper.emitted('update:value')).toBeTruthy();
     expect(wrapper.emitted('update:value')[2]).toStrictEqual([4]);

package/components/formatter/ClusterProvider.vue

@@ -25,12 +25,12 @@ export default {
         {{ row.machineProviderDisplay }}
       </span>
     </template>
-    <template v-else-if="row.isCustom">
-      {{ t('cluster.provider.custom') }}
-    </template>
     <template v-else-if="row.isImported">
       {{ t('cluster.provider.imported') }}
     </template>
+    <template v-else-if="row.isCustom">
+      {{ t('cluster.provider.custom') }}
+    </template>
     <div class="text-muted">
       {{ row.provisionerDisplay }}
     </div>

package/components/formatter/ImagePercentageBar.vue

@@ -38,7 +38,7 @@ export default {
     },
 
     completed() {
-      return Number.parseFloat(this.value) === 100 && !this.failed;
+      return Number.parseFloat(this.value) === 100;
     },
   },
 };

package/components/formatter/Si.vue

@@ -38,5 +38,9 @@ export default {
 </script>
 
 <template>
-  <span>{{ formattedValue }}</span>
+  <span v-if="value">{{ formattedValue }}</span>
+  <span
+    v-else
+    class="text-muted"
+  >&mdash;</span>
 </template>

package/components/formatter/Translate.vue

@@ -19,7 +19,7 @@ export default {
 
   computed: {
     text() {
-      return this.$store.getters['i18n/withFallback'](`${ this.prefix }.${ this.row.id }`, null, this.value);
+      return this.$store.getters['i18n/withFallback'](`${ this.prefix }.${ this.value || this.row.id }`, null, this.value);
     },
   },
 };

package/components/nav/Header.vue

@@ -1,12 +1,13 @@
 <script>
 import { mapGetters } from 'vuex';
 import debounce from 'lodash/debounce';
-import { NORMAN, STEVE } from '@shell/config/types';
+import { MANAGEMENT, NORMAN, STEVE } from '@shell/config/types';
+import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import { ucFirst } from '@shell/utils/string';
 import { isAlternate, isMac } from '@shell/utils/platform';
 import Import from '@shell/components/Import';
 import BrandImage from '@shell/components/BrandImage';
-import { getProduct } from '@shell/config/private-label';
+import { getProduct, getVendor } from '@shell/config/private-label';
 import ClusterProviderIcon from '@shell/components/ClusterProviderIcon';
 import ClusterBadge from '@shell/components/ClusterBadge';
 import AppModal from '@shell/components/AppModal';
@@ -14,6 +15,7 @@ import { LOGGED_OUT, IS_SSO } from '@shell/config/query-params';
 import NamespaceFilter from './NamespaceFilter';
 import WorkspaceSwitcher from './WorkspaceSwitcher';
 import TopLevelMenu from './TopLevelMenu';
+
 import Jump from './Jump';
 import { allHash } from '@shell/utils/promise';
 import { ActionLocation, ExtensionPoint } from '@shell/core/types';
@@ -86,7 +88,8 @@ export default {
       'pageActions',
       'isSingleProduct',
       'isRancherInHarvester',
-      'showTopLevelMenu'
+      'showTopLevelMenu',
+      'isMultiCluster'
     ]),
 
     samlAuthProviderEnabled() {
@@ -110,6 +113,12 @@ export default {
       return getProduct();
     },
 
+    vendor() {
+      this.$store.getters['management/all'](MANAGEMENT.SETTING)?.find((setting) => setting.id === 'ui-pl');
+
+      return getVendor();
+    },
+
     authEnabled() {
       return this.$store.getters['auth/enabled'];
     },
@@ -219,6 +228,9 @@ export default {
       };
     },
 
+    isHarvester() {
+      return this.$store.getters['currentProduct'].inStore === HARVESTER;
+    },
   },
 
   watch: {
@@ -379,7 +391,7 @@ export default {
     data-testid="header"
   >
     <div>
-      <TopLevelMenu v-if="showTopLevelMenu" />
+      <TopLevelMenu v-if="isRancherInHarvester || isMultiCluster || !isSingleProduct" />
     </div>
     <div
       class="menu-spacer"
@@ -389,7 +401,14 @@ export default {
         v-if="isSingleProduct && !isRancherInHarvester"
         :to="singleProductLogoRoute"
       >
+        <BrandImage
+          v-if="isSingleProduct.supportCustomLogo && isHarvester"
+          class="side-menu-logo"
+          file-name="harvester.svg"
+          :support-custom-logo="true"
+        />
         <img
+          v-else
           class="side-menu-logo"
           :src="isSingleProduct.logo"
         >
@@ -409,7 +428,12 @@ export default {
           v-if="isSingleProduct && !isRancherInHarvester"
           class="product-name"
         >
-          {{ t(isSingleProduct.productNameKey) }}
+          <template v-if="isSingleProduct.supportCustomLogo">
+            {{ vendor }}
+          </template>
+          <template v-else>
+            {{ t(isSingleProduct.productNameKey) }}
+          </template>
         </div>
         <template v-else>
           <ClusterProviderIcon

package/components/nav/NamespaceFilter.vue

@@ -140,9 +140,11 @@ export default {
     options() {
       const t = this.$store.getters['i18n/t'];
       let out = [];
+      const inStore = this.$store.getters['currentStore'](NAMESPACE);
 
       const params = { ...this.$route.params };
       const resource = params.resource;
+
       // Sometimes, different pages may have different namespaces to filter
       const notFilterNamespaces = this.$store.getters[`type-map/optionsFor`](resource).notFilterNamespace || [];
 
@@ -198,8 +200,6 @@ export default {
         divider(out);
       }
 
-      const inStore = this.$store.getters['currentStore'](NAMESPACE);
-
       if (!inStore) {
         return out;
       }
@@ -893,9 +893,6 @@ export default {
     width: 280px;
     display: inline-block;
 
-    $glass-z-index: 2;
-    $dropdown-z-index: 1000;
-
     .ns-glass {
       height: 100vh;
       left: 0;
@@ -903,7 +900,7 @@ export default {
       position: absolute;
       top: 0;
       width: 100vw;
-      z-index: $glass-z-index;
+      z-index: z-index('overContent');
     }
 
     .ns-controls {
@@ -955,7 +952,7 @@ export default {
       margin-top: -1px;
       padding-bottom: 10px;
       position: relative;
-      z-index: $dropdown-z-index;
+      z-index: z-index('dropdownOverlay');
 
       .ns-options {
         max-height: 50vh;
@@ -1067,7 +1064,7 @@ export default {
       height: 40px;
       padding: 0 10px;
       position: relative;
-      z-index: $dropdown-z-index;
+      z-index: z-index('dropdownOverlay');
 
       &.ns-open {
         border-bottom-left-radius: 0;

package/components/nav/TopLevelMenu.vue

@@ -546,7 +546,7 @@ export default {
                 :to="{ name: 'home' }"
               >
                 <svg
-                  v-tooltip="getTooltipConfig(t('nav.home'))"
+                  v-clean-tooltip="getTooltipConfig(t('nav.home'))"
                   xmlns="http://www.w3.org/2000/svg"
                   height="24"
                   viewBox="0 0 24 24"
@@ -660,13 +660,13 @@ export default {
                     @shortkey="handleKeyComboClick"
                   >
                     <ClusterIconMenu
-                      v-tooltip="getTooltipConfig(c, true)"
+                      v-clean-tooltip="getTooltipConfig(c, true)"
                       :cluster="c"
                       :route-combo="routeCombo"
                       class="rancher-provider-icon"
                     />
                     <div
-                      v-tooltip="getTooltipConfig(c)"
+                      v-clean-tooltip="getTooltipConfig(c)"
                       class="cluster-name"
                     >
                       <p>{{ c.label }}</p>
@@ -687,12 +687,12 @@ export default {
                     :data-testid="`pinned-menu-cluster-disabled-${ c.id }`"
                   >
                     <ClusterIconMenu
-                      v-tooltip="getTooltipConfig(c, true)"
+                      v-clean-tooltip="getTooltipConfig(c, true)"
                       :cluster="c"
                       class="rancher-provider-icon"
                     />
                     <div
-                      v-tooltip="getTooltipConfig(c)"
+                      v-clean-tooltip="getTooltipConfig(c)"
                       class="cluster-name"
                     >
                       <p>{{ c.label }}</p>
@@ -735,13 +735,13 @@ export default {
                     @shortkey="handleKeyComboClick"
                   >
                     <ClusterIconMenu
-                      v-tooltip="getTooltipConfig(c, true)"
+                      v-clean-tooltip="getTooltipConfig(c, true)"
                       :cluster="c"
                       :route-combo="routeCombo"
                       class="rancher-provider-icon"
                     />
                     <div
-                      v-tooltip="getTooltipConfig(c)"
+                      v-clean-tooltip="getTooltipConfig(c)"
                       class="cluster-name"
                     >
                       <!-- HERE LOCAL CLUSTER! -->
@@ -764,12 +764,12 @@ export default {
                     :data-testid="`menu-cluster-disabled-${ c.id }`"
                   >
                     <ClusterIconMenu
-                      v-tooltip="getTooltipConfig(c, true)"
+                      v-clean-tooltip="getTooltipConfig(c, true)"
                       :cluster="c"
                       class="rancher-provider-icon"
                     />
                     <div
-                      v-tooltip="getTooltipConfig(c)"
+                      v-clean-tooltip="getTooltipConfig(c)"
                       class="cluster-name"
                     >
                       <p>{{ c.label }}</p>
@@ -836,7 +836,7 @@ export default {
                   :to="a.to"
                 >
                   <IconOrSvg
-                    v-tooltip="getTooltipConfig(a.label)"
+                    v-clean-tooltip="getTooltipConfig(a.label)"
                     :icon="a.icon"
                     :src="a.svg"
                   />
@@ -866,7 +866,7 @@ export default {
                   :to="a.to"
                 >
                   <IconOrSvg
-                    v-tooltip="getTooltipConfig(a.label)"
+                    v-clean-tooltip="getTooltipConfig(a.label)"
                     :icon="a.icon"
                     :src="a.svg"
                   />

package/config/labels-annotations.js

@@ -113,6 +113,7 @@ export const FLEET = {
   CLUSTER_NAME:         'management.cattle.io/cluster-name',
   BUNDLE_ID:            'fleet.cattle.io/bundle-id',
   MANAGED:              'fleet.cattle.io/managed',
+  CLUSTER_NAMESPACE:    'fleet.cattle.io/cluster-namespace',
   CLUSTER:              'fleet.cattle.io/cluster'
 };
 
@@ -145,6 +146,7 @@ export const HCI = {
   NETWORK_ROUTE:       'network.harvesterhci.io/route',
   IMAGE_NAME:          'harvesterhci.io/image-name',
   NETWORK_TYPE:        'network.harvesterhci.io/type',
+  CLUSTER_NETWORK:     'network.harvesterhci.io/clusternetwork',
   PRIMARY_SERVICE:     'cloudprovider.harvesterhci.io/primary-service',
 };
 

package/config/table-headers.js

@@ -267,6 +267,21 @@ export const DESCRIPTION = {
   width:    300,
 };
 
+export const NS_SNAPSHOT_QUOTA = {
+  name:          'NamespaceSnapshotQuota',
+  labelKey:      'harvester.tableHeaders.totalSnapshotQuota',
+  value:         'snapshotSizeQuota',
+  sort:          'snapshotSizeQuota',
+  align:         'center',
+  formatter:     'Si',
+  formatterOpts: {
+    opts: {
+      increment: 1024, addSuffix: true, suffix: 'i',
+    },
+    needParseSi: false
+  },
+};
+
 export const DURATION = {
   name:      'duration',
   labelKey:  'tableHeaders.duration',

package/config/types.js

@@ -172,6 +172,8 @@ export const LONGHORN = {
 };
 
 export const LONGHORN_DRIVER = 'driver.longhorn.io';
+export const LONGHORN_VERSION_V1 = 'LonghornV1';
+export const LONGHORN_VERSION_V2 = 'LonghornV2';
 
 export const SNAPSHOT = 'rke.cattle.io.etcdsnapshot';
 
@@ -313,6 +315,7 @@ export const HCI = {
   IMAGE:            'harvesterhci.io.virtualmachineimage',
   VGPU_DEVICE:      'devices.harvesterhci.io.vgpudevice',
   SETTING:          'harvesterhci.io.setting',
+  RESOURCE_QUOTA:   'harvesterhci.io.resourcequota',
   HARVESTER_CONFIG: 'rke-machine-config.cattle.io.harvesterconfig',
 };
 

package/detail/fleet.cattle.io.bundle.vue

@@ -1,77 +1,25 @@
 <script>
-import { FLEET } from '@shell/config/types';
 import FleetBundleResources from '@shell/components/fleet/FleetBundleResources.vue';
-import SortableTable from '@shell/components/SortableTable';
+import FleetUtils from '@shell/utils/fleet';
 
 export default {
   name: 'FleetBundleDetail',
 
-  components: {
-    FleetBundleResources,
-    SortableTable,
-  },
-  props: {
+  components: { FleetBundleResources },
+  props:      {
     value: {
       type:     Object,
       required: true,
     }
   },
 
-  data() {
-    return { repo: null };
-  },
-
-  async fetch() {
-    const { namespace, labels } = this.value.metadata;
-    const repoName = `${ namespace }/${ labels['fleet.cattle.io/repo-name'] }`;
-
-    if (this.hasRepoLabel) {
-      this.repo = await this.$store.dispatch('management/find', { type: FLEET.GIT_REPO, id: repoName });
-    }
-  },
-
   computed: {
-    hasRepoLabel() {
-      return !!(this.value?.metadata?.labels && this.value?.metadata?.labels['fleet.cattle.io/repo-name']);
-    },
     bundleResources() {
-      if (this.hasRepoLabel) {
-        const bundleResourceIds = this.bundleResourceIds;
-
-        return this.repo?.status?.resources?.filter((resource) => {
-          return bundleResourceIds.includes(resource.name);
-        });
-      } else if (this.value?.spec?.resources?.length) {
-        return this.value?.spec?.resources.map((item) => {
-          return {
-            content: item.content,
-            name:    item.name.includes('.') ? item.name.split('.')[0] : item.name
-          };
-        });
-      }
-
-      return [];
-    },
-    resourceHeaders() {
-      return [
-        {
-          name:     'name',
-          value:    'name',
-          sort:     ['name'],
-          labelKey: 'tableHeaders.name',
-        },
-      ];
+      return FleetUtils.resourcesFromBundleStatus(this.value?.status);
     },
     resourceCount() {
-      return (this.bundleResources && this.bundleResources.length) || this.value?.spec?.resources?.length;
+      return this.bundleResources.length;
     },
-    bundleResourceIds() {
-      if (this.value.status?.resourceKey) {
-        return this.value?.status?.resourceKey.map((item) => item.name);
-      }
-
-      return [];
-    }
   }
 };
 
@@ -84,19 +32,8 @@ export default {
       <span>{{ resourceCount }}</span>
     </div>
     <FleetBundleResources
-      v-if="hasRepoLabel"
       :value="bundleResources"
     />
-    <SortableTable
-      v-else
-      :rows="bundleResources"
-      :headers="resourceHeaders"
-      :table-actions="false"
-      :row-actions="false"
-      key-field="tableKey"
-      default-sort-by="state"
-      :paged="true"
-    />
   </div>
 </template>
 

package/detail/fleet.cattle.io.gitrepo.vue

@@ -82,7 +82,8 @@ export default {
     const allDispatches = await checkSchemasForFindAllHash({
       allBundles: {
         inStoreType: 'management',
-        type:        FLEET.BUNDLE
+        type:        FLEET.BUNDLE,
+        opt:         { excludeFields: ['metadata.managedFields', 'spec.resources'] },
       },
 
       allBundleDeployments: {

package/directives/clean-tooltip.js

@@ -13,10 +13,10 @@ function purifyContent(value) {
   }
 }
 
-function bind(el, { value, oldValue, modifiers }) {
+function beforeMount(el, { value, oldValue, modifiers }) {
   const purifiedValue = purifyContent(value);
 
-  VTooltip.bind(
+  VTooltip.beforeMount(
     el,
     {
       value: purifiedValue, oldValue, modifiers
@@ -25,8 +25,8 @@ function bind(el, { value, oldValue, modifiers }) {
 
 const cleanTooltipDirective = {
   ...VTooltip,
-  bind,
-  update: bind,
+  beforeMount,
+  updated: beforeMount,
 };
 
 export default cleanTooltipDirective;