@rancher/shell 0.1.1 → 0.1.3

package/components/LocaleSelector.vue

@@ -0,0 +1,81 @@
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'LocalSelector',
+
+  computed: {
+    ...mapGetters('i18n', ['selectedLocaleLabel', 'availableLocales']),
+
+    showLocale() {
+      return (this.availableLocales && Object.keys(this.availableLocales).length > 1) || this.dev;
+    },
+
+    showNone() {
+      return !!process.env.dev && this.dev;
+    },
+  },
+
+  methods: {
+    switchLocale(locale) {
+      this.$store.dispatch('i18n/switchTo', locale);
+    },
+  }
+};
+</script>
+
+<template>
+  <div v-if="showLocale">
+    <v-popover
+      popover-class="localeSelector"
+      placement="top"
+      trigger="click"
+    >
+      <a
+        data-testid="locale-selector"
+        class="locale-chooser"
+      >
+        {{ selectedLocaleLabel }}
+        <i class="icon icon-fw icon-sort-down" />
+      </a>
+
+      <template slot="popover">
+        <ul class="list-unstyled dropdown" style="margin: -1px;">
+          <li v-if="showNone" v-t="'locale.none'" class="hand" @click="switchLocale('none')" />
+          <li
+            v-for="(label, name) in availableLocales"
+            :key="name"
+            class="hand"
+            @click="switchLocale(name)"
+          >
+            {{ label }}
+          </li>
+        </ul>
+      </template>
+    </v-popover>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.advanced {
+  user-select: none;
+  padding: 0 5px;
+  line-height: 40px;
+  font-size: 15px;
+  font-weight: 500;
+}
+.content {
+  background: var(--nav-active);
+  padding: 10px;
+  margin-top: 6px;
+  border-radius: 4px;
+}
+
+.locale-chooser {
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+</style>

package/components/PromptModal.vue

@@ -1,7 +1,6 @@
 <script>
 import { mapState } from 'vuex';
 import { isArray } from '@shell/utils/array';
-import { importDialog } from '@shell/utils/dynamic-importer';
 
 /**
  * @name PromptModal
@@ -32,8 +31,8 @@ export default {
       return this.modalData?.modalWidth || '600px';
     },
     component() {
-      // Looks for a dialog component by looking up @shell/components/dialog/${name}.
-      return importDialog(this.modalData?.component);
+      // Looks for a dialog component by looking up in plugins and @shell/dialog/${name}.
+      return this.$store.getters['type-map/importDialog'](this.modalData?.component);
     },
     cssProps() {
       // this computed property lets us generate a scss var that we can use in the style

package/components/ResourceList/index.vue

@@ -50,7 +50,7 @@ export default {
 
     if ( !hasFetch ) {
       if ( !schema ) {
-        store.dispatch('loadingError', `Type ${ resource } not found`);
+        store.dispatch('loadingError', new Error(`Type ${ resource } not found, unable to display list`));
 
         return;
       }

package/components/ResourceTable.vue

@@ -6,7 +6,6 @@ import ButtonGroup from '@shell/components/ButtonGroup';
 import SortableTable from '@shell/components/SortableTable';
 import { NAMESPACE } from '@shell/config/table-headers';
 import { findBy } from '@shell/utils/array';
-import { NAME as HARVESTER } from '@shell/config/product/harvester';
 
 // Default group-by in the case the group stored in the preference does not apply
 const DEFAULT_GROUP = 'namespace';
@@ -133,7 +132,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['isVirtualCluster']),
+    ...mapGetters(['currentProduct']),
     isNamespaced() {
       if ( this.namespaced !== null ) {
         return this.namespaced;
@@ -196,11 +195,9 @@ export default {
 
     filteredRows() {
       const isAll = this.$store.getters['isAllNamespaces'];
-      const isVirtualProduct = this.$store.getters['currentProduct'].name === HARVESTER;
 
       // If the resources isn't namespaced or we want ALL of them, there's nothing to do.
-      // If this is a harvester list, 'all' must still be filtered
-      if ( !this.isNamespaced || (isAll && !isVirtualProduct)) {
+      if ( !this.isNamespaced || (isAll && !this.currentProduct?.hideSystemResources)) {
         return this.rows || [];
       }
 
@@ -212,7 +209,7 @@ export default {
       }
 
       return this.rows.filter((row) => {
-        if (this.isVirtualCluster && this.isNamespaced) {
+        if (this.currentProduct?.hideSystemResources && this.isNamespaced) {
           return !!includedNamespaces[row.metadata.namespace] && !row.isSystemResource;
         } else if (!this.isNamespaced) {
           return true;

package/components/SingleClusterInfo.vue

@@ -87,7 +87,7 @@ export default {
 <template>
   <div v-if="clusterDetail">
     <div class="single-cluster-header">
-      <ClusterProviderIcon class="rancher-icon" width="32" />
+      <ClusterProviderIcon :cluster="clusterDetail" class="rancher-icon" width="32" />
       <h1>{{ t('glance.clusterInfo') }}</h1>
     </div>
 

package/components/SortableTable/index.vue

@@ -20,19 +20,6 @@ import actions from './actions';
 // Uncomment for table performance debugging
 // import tableDebug from './debug';
 
-// Its quicker to render if we directly supply the components for the formatters
-// rather than just the name of a global component - so create a map of the formatter comoponents
-const FORMATTERS = {};
-
-const components = require.context('@shell/components/formatter', false, /[A-Z]\w+\.(vue)$/);
-
-components.keys().forEach((fileName) => {
-  const componentConfig = components(fileName);
-  const componentName = fileName.split('/').pop().split('.')[0];
-
-  FORMATTERS[componentName] = componentConfig.default || componentConfig;
-});
-
 export const COLUMN_BREAKPOINTS = {
   /**
    * Only show column if at tablet width or wider
@@ -48,6 +35,19 @@ export const COLUMN_BREAKPOINTS = {
   DESKTOP: 'desktop'
 };
 
+// Its quicker to render if we directly supply the components for the formatters
+// rather than just the name of a global component - so create a map of the formatter comoponents
+const FORMATTERS = {};
+
+const components = require.context('@shell/components/formatter', false, /[A-Z]\w+\.(vue)$/);
+
+components.keys().forEach((fileName) => {
+  const componentConfig = components(fileName);
+  const componentName = fileName.split('/').pop().split('.')[0];
+
+  FORMATTERS[componentName] = componentConfig.default || componentConfig;
+});
+
 // @TODO:
 // Fixed header/scrolling
 
@@ -370,11 +370,14 @@ export default {
     },
 
     // Ensure we update live and delayed columns on first load
-    initalLoad(neu, old) {
-      if (neu && !old) {
-        this._didinit = true;
-        this.$nextTick(() => this.updateLiveAndDelayed());
-      }
+    initalLoad: {
+      handler(neu) {
+        if (neu) {
+          this._didinit = true;
+          this.$nextTick(() => this.updateLiveAndDelayed());
+        }
+      },
+      immediate: true
     },
 
     isManualRefreshLoading(neu, old) {
@@ -400,7 +403,7 @@ export default {
     },
 
     initalLoad() {
-      return !this.loading && !this._didinit && this.rows?.length;
+      return !!(!this.loading && !this._didinit && this.rows?.length);
     },
 
     fullColspan() {
@@ -863,7 +866,7 @@ export default {
                 <template #button-content>
                   <button ref="actionDropDown" class="btn bg-primary mr-0" :disabled="!selectedRows.length">
                     <i class="icon icon-gear" />
-                    <span>{{ t('harvester.tableHeaders.actions') }}</span>
+                    <span>{{ t('sortableTable.bulkActions.collapsed.label') }}</span>
                     <i class="ml-10 icon icon-chevron-down" />
                   </button>
                 </template>

package/components/SortableTable/selection.js

@@ -270,6 +270,7 @@ export default {
         this.$store.commit(`action-menu/show`, {
           resources,
           event: e.originalEvent || e, // Handle jQuery event and raw event
+          elem:  actionElement
         });
 
         return;

package/components/auth/AzureWarning.vue

@@ -3,6 +3,7 @@
 import { NORMAN, MANAGEMENT } from '@shell/config/types';
 import { get } from '@shell/utils/object';
 import { AZURE_MIGRATED } from '@shell/config/labels-annotations';
+import { BLANK_CLUSTER } from '@shell/store';
 
 export default {
   async fetch() {
@@ -24,7 +25,10 @@ export default {
       authConfig:      null,
       authConfigRoute: {
         name:   'c-cluster-auth-config-id',
-        params: { id: 'azuread' }
+        params: {
+          cluster: this.$route.params.cluster || BLANK_CLUSTER,
+          id:      'azuread'
+        }
       }
     };
   },

package/components/auth/Principal.vue

@@ -119,7 +119,7 @@ export default {
       "avatar name"
       "avatar description";
     grid-template-columns: $size auto;
-    grid-template-rows: math.div($size, 2) math.div($size, 2);
+    grid-template-rows: auto math.div($size, 2);
     column-gap: 10px;
 
     &.showLabels {

package/components/auth/RoleDetailEdit.vue

@@ -80,11 +80,14 @@ export default {
     // users to freely type in resources that are not shown in the list.
 
     if (this.value.subtype === CLUSTER || this.value.subtype === NAMESPACE) {
-      this.templateOptions = (await this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.ROLE_TEMPLATE }))
-        .map(option => ({
-          label: option.nameDisplay,
-          value: option.id
-        }));
+      (await this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.ROLE_TEMPLATE })).forEach((template) => {
+        // Ensure we have quick access to a specific template. This allows unselected drop downs to show the correct value
+        this.keyedTemplateOptions[template.id] = {
+          label: template.nameDisplay,
+          value: template.id
+        };
+      });
+      this.templateOptions = Object.values(this.keyedTemplateOptions);
     }
   },
 
@@ -97,11 +100,13 @@ export default {
         resources:       [],
         verbs:           []
       },
-      verbOptions:       VERBS,
-      templateOptions:   [],
-      resources:         this.value.resources,
-      scopedResources:   SCOPED_RESOURCES,
-      defaultValue:      false,
+      verbOptions:          VERBS,
+      templateOptions:      [],
+      keyedTemplateOptions: {},
+      resources:            this.value.resources,
+      scopedResources:      SCOPED_RESOURCES,
+      defaultValue:         false,
+      selectFocused:        null,
     };
   },
 
@@ -146,7 +151,6 @@ export default {
   },
 
   computed: {
-
     label() {
       return this.t(`rbac.roletemplate.subtypes.${ this.value.subtype }.label`);
     },
@@ -300,6 +304,9 @@ export default {
     isDetail() {
       return this.as === _DETAIL;
     },
+    isBuiltin() {
+      return this.value.builtin;
+    },
     doneLocationOverride() {
       return this.value.listLocation;
     },
@@ -576,6 +583,9 @@ export default {
           <ArrayList
             v-model="value.rules"
             label="Resources"
+            :disabled="isBuiltin"
+            :remove-allowed="!isBuiltin"
+            :add-allowed="!isBuiltin"
             :default-add-value="defaultRule"
             :initial-empty-row="true"
             :show-header="true"
@@ -612,6 +622,7 @@ export default {
                   <Select
                     :value="props.row.value.verbs"
                     class="lg"
+                    :disabled="isBuiltin"
                     :taggable="true"
                     :searchable="true"
                     :options="verbOptions"
@@ -623,6 +634,7 @@ export default {
                 <div :class="ruleClass">
                   <Select
                     :value="getRule('resources', props.row.value)"
+                    :disabled="isBuiltin"
                     :options="resourceOptions"
                     :searchable="true"
                     :taggable="true"
@@ -634,6 +646,7 @@ export default {
                 <div :class="ruleClass">
                   <LabeledInput
                     :value="getRule('apiGroups', props.row.value)"
+                    :disabled="isBuiltin"
                     :mode="mode"
                     @input="setRule('apiGroups', props.row.value, $event)"
                   />
@@ -641,6 +654,7 @@ export default {
                 <div v-if="!isNamespaced" :class="ruleClass">
                   <LabeledInput
                     :value="getRule('nonResourceURLs', props.row.value)"
+                    :disabled="isBuiltin"
                     :mode="mode"
                     @input="setRule('nonResourceURLs', props.row.value, $event)"
                   />
@@ -657,6 +671,9 @@ export default {
         >
           <ArrayList
             v-model="value.roleTemplateNames"
+            :disabled="isBuiltin"
+            :remove-allowed="!isBuiltin"
+            :add-allowed="!isBuiltin"
             label="Resources"
             add-label="Add Resource"
             :mode="mode"
@@ -668,11 +685,14 @@ export default {
                     v-model="props.row.value"
                     class="lg"
                     :taggable="false"
+                    :disabled="isBuiltin"
                     :searchable="true"
-                    :options="templateOptions"
+                    :options="selectFocused === props.i ? templateOptions : [keyedTemplateOptions[props.row.value]]"
                     option-key="value"
                     option-label="label"
                     :mode="mode"
+                    @on-focus="selectFocused = props.i"
+                    @on-blur="selectFocused = null"
                   />
                 </div>
               </div>

package/components/fleet/FleetRepos.vue

@@ -1,5 +1,4 @@
 <script>
-import { mapGetters } from 'vuex';
 import ResourceTable from '@shell/components/ResourceTable';
 import Link from '@shell/components/formatter/Link';
 import Shortened from '@shell/components/formatter/Shortened';
@@ -32,7 +31,6 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['isVirtualCluster']),
     filteredRows() {
       if (!this.rows) {
         return [];

package/components/form/NameNsDescription.vue

@@ -208,7 +208,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['isVirtualCluster', 'currentCluster']),
+    ...mapGetters(['currentProduct', 'currentCluster']),
     namespaceReallyDisabled() {
       return (
         !!this.forceNamespace || this.namespaceDisabled || this.mode === _EDIT
@@ -224,13 +224,11 @@ export default {
       const namespaces = this.namespacesOverride || this.$store.getters[`${ currentStore }/all`](this.namespaceType);
 
       const filtered = namespaces.filter( this.namespaceFilter || ((namespace) => {
-        const isSettingSystemNamespace = this.$store.getters['systemNamespaces'].includes(namespace.metadata.name);
-
-        if (this.isVirtualCluster) {
-          // For virtual clusters, filter out the namespace
+        if (this.currentProduct?.hideSystemResources) {
+          // Filter out the namespace
           // if it is a system namespace or if it is managed by
           // Fleet.
-          return !namespace.isSystem && !namespace.isFleetManaged && !isSettingSystemNamespace;
+          return !namespace.isSystem && !namespace.isFleetManaged;
         }
 
         // By default, include the namespace in the dropdown.

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 { NAME as VIRTUAL } from '@shell/config/product/harvester';
+import { HARVESTER_NAME as VIRTUAL } from '@shell/config/product/harvester-manager';
 import { _VIEW } from '@shell/config/query-params';
 import { isEmpty } from '@shell/utils/object';
 import { HOSTNAME } from '@shell/config/labels-annotations';

package/components/form/ResourceTabs/index.vue

@@ -66,22 +66,21 @@ export default {
     }
   },
 
-  async fetch() {
+  data() {
     const inStore = this.$store.getters['currentStore'](EVENT);
 
-    if ( this.$store.getters[`${ inStore }/schemaFor`](EVENT) ) {
-      this.hasEvents = true; // @TODO be smarter about which ones actually ever have events
-      this.allEvents = await this.$store.dispatch(`${ inStore }/findAll`, { type: EVENT });
-    }
-  },
-
-  data() {
     return {
-      hasEvents: null,
-      allEvents: []
+      hasEvents:     this.$store.getters[`${ inStore }/schemaFor`](EVENT), // @TODO be smarter about which resources actually ever have events
+      allEvents:     [],
+      selectedTab:   this.defaultTab,
+      didLoadEvents: false,
     };
   },
 
+  beforeDestroy() {
+    this.$store.dispatch('cluster/forgetType', EVENT);
+  },
+
   computed: {
     showConditions() {
       const inStore = this.$store.getters['currentStore'](this.value.type);
@@ -89,10 +88,10 @@ export default {
       return this.isView && this.needConditions && this.value?.type && this.$store.getters[`${ inStore }/pathExistsInSchema`](this.value.type, 'status.conditions');
     },
     showEvents() {
-      return this.isView && this.needEvents && !this.$fetchState.pending && this.hasEvents && (this.events.length || this.alwaysShowEvents);
+      return this.isView && this.needEvents && this.hasEvents && (this.events.length || this.alwaysShowEvents);
     },
     showRelated() {
-      return this.isView && this.needRelated && !this.$fetchState.pending;
+      return this.isView && this.needRelated;
     },
     eventHeaders() {
       return [
@@ -146,17 +145,26 @@ export default {
     }
   },
 
-  mounted() {
-    // For easy access debugging...
-    if ( typeof window !== 'undefined' ) {
-      window.v = this.value;
+  methods: {
+    // Ensures we only fetch events and show the table when the events tab has been activated
+    tabChange(neu) {
+      this.selectedTab = neu?.selectedName;
+
+      if (!this.didLoadEvents && this.selectedTab === 'events') {
+        const inStore = this.$store.getters['currentStore'](EVENT);
+
+        this.$store.dispatch(`${ inStore }/findAll`, { type: EVENT }).then((events) => {
+          this.allEvents = events;
+          this.didLoadEvents = true;
+        });
+      }
     }
-  },
+  }
 };
 </script>
 
 <template>
-  <Tabbed v-bind="$attrs" :default-tab="defaultTab">
+  <Tabbed v-bind="$attrs" :default-tab="defaultTab" @changed="tabChange">
     <slot />
 
     <Tab v-if="showConditions" label-key="resourceTabs.conditions.tab" name="conditions" :weight="-1" :display-alert-icon="conditionsHaveIssues">
@@ -165,6 +173,7 @@ export default {
 
     <Tab v-if="showEvents" label-key="resourceTabs.events.tab" name="events" :weight="-2">
       <SortableTable
+        v-if="selectedTab === 'events'"
         :rows="events"
         :headers="eventHeaders"
         key-field="id"

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 { NAME as HARVESTER } from '@shell/config/product/harvester';
+import { HARVESTER_NAME as HARVESTER } from '@shell/config/product/harvester-manager';
 import { CAPI, SERVICE } from '@shell/config/types';
 
 export default {

package/components/formatter/ClusterLink.vue

@@ -63,6 +63,11 @@ export default {
       {{ value }}
     </n-link>
     <span v-else>{{ value }}</span>
+    <i
+      v-if="row.rkeTemplateUpgrade"
+      v-tooltip="t('cluster.rkeTemplateUpgrade', { name: row.rkeTemplateUpgrade })"
+      class="template-upgrade-icon icon-alert icon"
+    />
     <i
       v-if="clusterHasIssues"
       v-tooltip="{ content: `<div>${formattedConditions}</div>`, html: true }"
@@ -93,4 +98,12 @@ export default {
   .mytooltip ul {
     outline: 1px dashed red;
   }
+  .template-upgrade-icon {
+    border: 1px solid var(--warning);
+    border-radius: 50%;
+    color: var(--warning);
+    margin-left: 4px;
+    font-size: 14px;
+    padding: 2px;
+  }
 </style>

package/components/formatter/PodImages.vue

@@ -1,6 +1,10 @@
 <script>
 import { mapGetters } from 'vuex';
 
+// For the main image hat we show, use these to ignore istio proxy images so that
+// we are more likely to show the important main iamge and not the istio sidecar
+const IGNORE_IMAGES = ['istio/proxy', 'gcr.io/istio-release/proxy', 'mirrored-istio-proxy'];
+
 export default {
   props: {
     value: {
@@ -38,6 +42,12 @@ export default {
       }
 
       return null;
+    },
+    mainImage() {
+      const images = this.images;
+      const filter = images.filter(image => !IGNORE_IMAGES.find(i => image.includes(i)));
+
+      return filter.length > 0 ? filter[0] : images[0];
     }
   }
 
@@ -46,7 +56,7 @@ export default {
 
 <template>
   <span>
-    <span>{{ images[0] }}</span><br>
+    <span>{{ mainImage }}</span><br>
     <span
       v-if="images.length-1>0"
       v-tooltip.bottom="imageLabels"

package/components/formatter/RKETemplateName.vue

@@ -0,0 +1,37 @@
+<script>
+export default {
+  props: {
+    value: {
+      type:     Object,
+      required: true
+    },
+  }
+};
+</script>
+
+<template>
+  <div class="rke-template">
+    <span>{{ value.displayName }}</span>
+    <i
+      v-if="value.upgrade"
+      v-tooltip="t('cluster.rkeTemplateUpgrade', { name: value.upgrade })"
+      class="template-upgrade-icon icon-alert icon"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .rke-template {
+    align-items: center;
+    display: inline-flex;
+
+    .template-upgrade-icon {
+      border: 1px solid var(--warning);
+      border-radius: 50%;
+      color: var(--warning);
+      margin-left: 4px;
+      font-size: 14px;
+      padding: 2px;
+    }
+  }
+</style>

package/components/formatter/WorkloadHealthScale.vue

@@ -2,7 +2,7 @@
 import Vue from 'vue';
 import ProgressBarMulti from '@shell/components/ProgressBarMulti';
 import PlusMinus from '@shell/components/form/PlusMinus';
-import { SCALABLE_WORKLOAD_TYPES } from '~shell/config/types';
+import { SCALABLE_WORKLOAD_TYPES } from '@shell/config/types';
 import { ucFirst } from '@shell/utils/string';
 
 const SCALABLE_TYPES = Object.values(SCALABLE_WORKLOAD_TYPES);