@rancher/shell 0.1.3 → 0.1.21

package/components/ExplorerProjectsNamespaces.vue

@@ -4,19 +4,20 @@ import ResourceTable from '@shell/components/ResourceTable';
 import { STATE, AGE, NAME } from '@shell/config/table-headers';
 import { uniq } from '@shell/utils/array';
 import { MANAGEMENT, NAMESPACE, VIRTUAL_TYPES } from '@shell/config/types';
-import Loading from '@shell/components/Loading';
 import { PROJECT_ID } from '@shell/config/query-params';
 import Masthead from '@shell/components/ResourceList/Masthead';
-import { mapPref, GROUP_RESOURCES, DEV } from '@shell/store/prefs';
+import { mapPref, GROUP_RESOURCES, ALL_NAMESPACES } from '@shell/store/prefs';
 import MoveModal from '@shell/components/MoveModal';
 import { defaultTableSortGenerationFn } from '@shell/components/ResourceTable.vue';
 import { NAMESPACE_FILTER_ALL_ORPHANS } from '@shell/utils/namespace-filter';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   name:       'ListProjectNamespace',
   components: {
-    Loading, Masthead, MoveModal, ResourceTable
+    Masthead, MoveModal, ResourceTable
   },
+  mixins: [ResourceFetch],
 
   props: {
     createProjectLocationOverride: {
@@ -43,14 +44,15 @@ export default {
       return;
     }
 
-    this.namespaces = await this.$store.dispatch(`${ inStore }/findAll`, { type: NAMESPACE });
+    await this.$fetchType(NAMESPACE);
     this.projects = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.PROJECT, opt: { force: true } });
   },
 
   data() {
     return {
+      loadResources:                [NAMESPACE],
+      loadIndeterminate:            true,
       schema:                       null,
-      namespaces:                   [],
       projects:                     [],
       projectSchema:                null,
       MANAGEMENT,
@@ -67,6 +69,17 @@ export default {
 
   computed: {
     ...mapGetters(['currentCluster', 'currentProduct']),
+    namespaces() {
+      const inStore = this.$store.getters['currentStore'](NAMESPACE);
+
+      return this.$store.getters[`${ inStore }/all`](NAMESPACE);
+    },
+    loading() {
+      return !this.currentCluster || this.namespaces.length ? false : this.$fetchState.pending;
+    },
+    showIncrementalLoadingIndicator() {
+      return this.perfConfig?.incrementalLoading?.enabled;
+    },
     isNamespaceCreatable() {
       return (this.schema?.collectionMethods || []).includes('POST');
     },
@@ -184,8 +197,8 @@ export default {
       return this.groupPreference === 'none' ? this.rows : this.rowsWithFakeNamespaces;
     },
     rows() {
-      if (this.$store.getters['prefs/get'](DEV)) {
-        // If developer tools are turned on in the user preferences,
+      if (this.$store.getters['prefs/get'](ALL_NAMESPACES)) {
+        // If all namespaces options are turned on in the user preferences,
         // return all namespaces including system namespaces and RBAC
         // management namespaces.
         return this.activeNamespaces;
@@ -302,8 +315,7 @@ export default {
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending || !currentCluster" />
-  <div v-else class="project-namespaces">
+  <div class="project-namespaces">
     <Masthead
       :schema="projectSchema"
       :type-display="t('projectNamespaces.label')"
@@ -311,6 +323,9 @@ export default {
       :favorite-resource="VIRTUAL_TYPES.PROJECT_NAMESPACES"
       :create-location="createProjectLocation"
       :create-button-label="t('projectNamespaces.createProject')"
+      :show-incremental-loading-indicator="showIncrementalLoadingIndicator"
+      :load-resources="loadResources"
+      :load-indeterminate="loadIndeterminate"
     />
     <ResourceTable
       ref="table"
@@ -321,6 +336,7 @@ export default {
       :rows="filteredRows"
       :groupable="true"
       :sort-generation-fn="sortGenerationFn"
+      :loading="loading"
       group-tooltip="resourceTable.groupBy.project"
       key-field="_key"
       v-on="$listeners"

package/components/IconMessage.vue

@@ -21,12 +21,16 @@ export default {
       type:    String,
       default: null
     },
+    subtle: {
+      type:     Boolean,
+      default: false,
+    }
   },
 };
 </script>
 
 <template>
-  <div class="message-icon" :class="{'vertical': vertical}">
+  <div class="message-icon" :class="{'vertical': vertical, 'subtle': subtle}">
     <i class="icon" :class="{ [icon]: true, [iconState]: !!iconState}" />
     <div class="message">
       <slot name="message">
@@ -47,6 +51,10 @@ export default {
     width: 100%;
   }
 
+  .subtle {
+    opacity: 0.7;
+  }
+
   .message-icon {
     display: flex;
     align-items: center;

package/components/LazyImage.vue

@@ -19,17 +19,18 @@ export default {
     },
   },
 
-  mounted() {
-    const $img = $(this.$refs.img);
-
-    if ( this.src ) {
-      $img.attr('src', this.src);
-      this.boundError = this.onError.bind(this);
-
-      $img.on('error', this.boundError);
+  watch: {
+    src(neu, old) {
+      if (neu !== old) {
+        this.loadImage();
+      }
     }
   },
 
+  mounted() {
+    this.loadImage();
+  },
+
   beforeDestroy() {
     const $img = $(this.$refs.img);
 
@@ -39,6 +40,18 @@ export default {
   },
 
   methods: {
+    // Ensure we load the image when the source changes
+    loadImage() {
+      const $img = $(this.$refs.img);
+
+      if ( this.src ) {
+        $img.attr('src', this.src);
+        this.boundError = this.onError.bind(this);
+
+        $img.on('error', this.boundError);
+      }
+    },
+
     onError() {
       const $img = $(this.$refs.img);
 

package/components/LocaleSelector.vue

@@ -1,12 +1,35 @@
 <script>
 import { mapGetters } from 'vuex';
+import Select from '@shell/components/form/Select.vue';
 
 export default {
   name: 'LocalSelector',
 
+  components: { Select },
+
+  props: {
+    mode: {
+      type:    String,
+      default: ''
+    },
+  },
+
   computed: {
     ...mapGetters('i18n', ['selectedLocaleLabel', 'availableLocales']),
 
+    localesOptions() {
+      return Object.keys(this.availableLocales).map((value) => {
+        return {
+          label: this.t(`locale.${ value }`),
+          value
+        };
+      });
+    },
+
+    selectedOption() {
+      return Object.keys(this.availableLocales)[Object.values(this.availableLocales).indexOf(this.selectedLocaleLabel)];
+    },
+
     showLocale() {
       return (this.availableLocales && Object.keys(this.availableLocales).length > 1) || this.dev;
     },
@@ -17,42 +40,52 @@ export default {
   },
 
   methods: {
-    switchLocale(locale) {
-      this.$store.dispatch('i18n/switchTo', locale);
+    switchLocale($event) {
+      this.$store.dispatch('i18n/switchTo', $event);
     },
   }
 };
 </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)"
+  <div>
+    <div v-if="mode === 'login'">
+      <div v-if="showLocale">
+        <v-popover
+          popover-class="localeSelector"
+          placement="top"
+          trigger="click"
+        >
+          <a
+            data-testid="locale-selector"
+            class="locale-chooser"
           >
-            {{ label }}
-          </li>
-        </ul>
-      </template>
-    </v-popover>
+            {{ 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>
+    </div>
+    <div v-else>
+      <Select
+        :value="selectedOption"
+        :options="localesOptions"
+        @input="switchLocale($event)"
+      />
+    </div>
   </div>
 </template>
 

package/components/PromptRemove.vue

@@ -266,7 +266,7 @@ export default {
         await this.refreshSpoofedTypes(spoofedTypes);
         this.done();
       } catch (err) {
-        this.error = err;
+        this.error = err.message || err;
         btnCB(false);
       }
     },
@@ -278,7 +278,7 @@ export default {
         await this.refreshSpoofedTypes(spoofedTypes);
         this.done();
       } catch (err) {
-        this.error = err;
+        this.error = err.message || err;
         btnCB(false);
       }
     },

package/components/ResourceList/Masthead.vue

@@ -4,6 +4,7 @@ import Favorite from '@shell/components/nav/Favorite';
 import TypeDescription from '@shell/components/TypeDescription';
 import { get } from '@shell/utils/object';
 import { AS, _YAML } from '@shell/config/query-params';
+import ResourceLoadingIndicator from './ResourceLoadingIndicator';
 
 /**
  * Resource List Masthead component.
@@ -15,6 +16,7 @@ export default {
   components: {
     Favorite,
     TypeDescription,
+    ResourceLoadingIndicator,
   },
   props: {
     resource: {
@@ -53,6 +55,20 @@ export default {
       type:    String,
       default: null
     },
+    loadResources: {
+      type:    Array,
+      default: () => []
+    },
+
+    loadIndeterminate: {
+      type:    Boolean,
+      default: false
+    },
+
+    showIncrementalLoadingIndicator: {
+      type:    Boolean,
+      default: false
+    },
 
     /**
      * Inherited global identifier prefix for tests
@@ -155,7 +171,11 @@ export default {
       <h1 class="m-0">
         {{ _typeDisplay }} <Favorite v-if="isExplorer" :resource="favoriteResource || resource" />
       </h1>
-      <slot name="header"></slot>
+      <ResourceLoadingIndicator
+        v-if="showIncrementalLoadingIndicator"
+        :resources="loadResources"
+        :indeterminate="loadIndeterminate"
+      />
     </div>
     <div class="actions-container">
       <slot name="actions">

package/components/ResourceList/ResourceLoadingIndicator.vue

@@ -16,10 +16,6 @@ export default {
     indeterminate: {
       type:    Boolean,
       default: false,
-    },
-    rows: {
-      type:     Array,
-      default:  undefined,
     }
   },
 
@@ -32,10 +28,6 @@ export default {
   computed: {
     // Count of rows - either from the data provided or from the rows for the first resource
     rowsCount() {
-      if (this.rows) {
-        return this.rows.length;
-      }
-
       if (this.resources.length > 0) {
         const existingData = this.$store.getters[`${ this.inStore }/all`](this.resources[0]) || [];
 

package/components/ResourceList/index.vue

@@ -3,7 +3,7 @@ import ResourceTable from '@shell/components/ResourceTable';
 import Loading from '@shell/components/Loading';
 import Masthead from './Masthead';
 import ResourceLoadingIndicator from './ResourceLoadingIndicator';
-import ResourceFetch, { TYPES_RESTRICTED } from '@shell/mixins/resource-fetch';
+import ResourceFetch from '@shell/mixins/resource-fetch';
 
 export default {
   components: {
@@ -43,8 +43,8 @@ export default {
       if (component?.$loadingResources) {
         const { loadResources, loadIndeterminate } = component?.$loadingResources(this.$route, this.$store);
 
-        this.loadResources = loadResources;
-        this.loadIndeterminate = loadIndeterminate;
+        this.loadResources = loadResources || [resource];
+        this.loadIndeterminate = loadIndeterminate || false;
       }
     }
 
@@ -55,11 +55,7 @@ export default {
         return;
       }
 
-      if (TYPES_RESTRICTED.includes(resource)) {
-        this.rows = await this.$fetchType(resource);
-      } else {
-        this.rows = await store.dispatch(`${ inStore }/findAll`, { type: resource });
-      }
+      await this.$fetchType(resource);
     }
   },
 
@@ -75,13 +71,10 @@ export default {
 
     const showMasthead = getters[`type-map/optionsFor`](resource).showListMasthead;
 
-    const existingData = getters[`${ inStore }/all`](resource) || [];
-
     return {
       inStore,
       schema,
       hasListComponent,
-      hasData:           existingData.length > 0,
       showMasthead:      showMasthead === undefined ? true : showMasthead,
       resource,
       // manual refresh
@@ -89,7 +82,6 @@ export default {
       watch:             false,
       force:             false,
       // Provided by fetch later
-      rows:              [],
       customTypeDisplay: null,
       // incremental loading
       loadResources:     [resource],
@@ -111,10 +103,6 @@ export default {
       return this.$store.getters['type-map/groupByFor'](this.schema);
     },
 
-    loading() {
-      return this.hasData ? false : this.$fetchState.pending;
-    },
-
     showIncrementalLoadingIndicator() {
       return this.perfConfig?.incrementalLoading?.enabled;
     }
@@ -142,18 +130,16 @@ export default {
       :type-display="customTypeDisplay"
       :schema="schema"
       :resource="resource"
+      :show-incremental-loading-indicator="showIncrementalLoadingIndicator"
+      :load-resources="loadResources"
+      :load-indeterminate="loadIndeterminate"
     >
-      <template v-slot:header>
-        <ResourceLoadingIndicator
-          v-if="showIncrementalLoadingIndicator"
-          :resources="loadResources"
-          :indeterminate="loadIndeterminate"
-        />
-      </template>
     </Masthead>
     <div v-if="hasListComponent">
       <component
         :is="listComponent"
+        :incremental-loading-indicator="showIncrementalLoadingIndicator"
+        :rows="rows"
         v-bind="$data"
       />
     </div>

package/components/ResourceTable.vue

@@ -116,7 +116,12 @@ export default {
     getCustomDetailLink: {
       type:    Function,
       default: null
-    }
+    },
+
+    ignoreFilter: {
+      type:    Boolean,
+      default: false
+    },
   },
 
   data() {
@@ -197,7 +202,7 @@ export default {
       const isAll = this.$store.getters['isAllNamespaces'];
 
       // If the resources isn't namespaced or we want ALL of them, there's nothing to do.
-      if ( !this.isNamespaced || (isAll && !this.currentProduct?.hideSystemResources)) {
+      if ( !this.isNamespaced || (isAll && !this.currentProduct?.hideSystemResources) || this.ignoreFilter) {
         return this.rows || [];
       }
 

package/components/SimpleBox.vue

@@ -29,10 +29,12 @@ export default {
 
 <template>
   <div v-if="shown" class="simple-box" v-on="$listeners">
-    <div v-if="title || canClose" class="top">
-      <h2 v-if="title">
-        {{ title }}
-      </h2>
+    <div v-if="title || canClose || $slots.title" class="top">
+      <slot name="title">
+        <h2 v-if="title">
+          {{ title }}
+        </h2>
+      </slot>
       <div v-if="canClose || pref" class="close-button" @click="closeBox($event)">
         <i class="icon icon-close" />
       </div>

package/components/SortableTable/index.vue

@@ -20,6 +20,11 @@ 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
+// NOTE: This is populated by a plugin (formatters.js) to avoid issues with plugins
+export const FORMATTERS = {};
+
 export const COLUMN_BREAKPOINTS = {
   /**
    * Only show column if at tablet width or wider
@@ -35,19 +40,6 @@ 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
 
@@ -334,6 +326,7 @@ export default {
     clearTimeout(this._loadingDelayTimer);
     clearTimeout(this._liveColumnsTimer);
     clearTimeout(this._delayedColumnsTimer);
+    clearTimeout(this.manualRefreshTimer);
 
     const $main = $('main');
 
@@ -348,23 +341,18 @@ export default {
     descending(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
-
     searchQuery(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
-
     sortFields(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
-
     groupBy(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
-
     namespaces(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
-
     page(neu, old) {
       this.watcherUpdateLiveAndDelayed(neu, old);
     },
@@ -380,14 +368,19 @@ export default {
       immediate: true
     },
 
-    isManualRefreshLoading(neu, old) {
-      this.currentPhase = neu ? ASYNC_BUTTON_STATES.WAITING : ASYNC_BUTTON_STATES.ACTION;
+    isManualRefreshLoading: {
+      handler(neu, old) {
+        this.currentPhase = neu ? ASYNC_BUTTON_STATES.WAITING : ASYNC_BUTTON_STATES.ACTION;
 
-      // setTimeout is needed so that this is pushed further back on the JS computing queue
-      // because nextTick isn't enough to capture the DOM update for the manual refresh only scenario
-      setTimeout(() => {
-        this.watcherUpdateLiveAndDelayed(neu, old);
-      }, 500);
+        // setTimeout is needed so that this is pushed further back on the JS computing queue
+        // because nextTick isn't enough to capture the DOM update for the manual refresh only scenario
+        if (old && !neu) {
+          this.manualRefreshTimer = setTimeout(() => {
+            this.watcherUpdateLiveAndDelayed(neu, old);
+          }, 1000);
+        }
+      },
+      immediate: true
     }
   },
 

package/components/Tabbed/Tab.vue

@@ -36,6 +36,11 @@ export default {
       type:    Boolean,
       default: false
     },
+    badge: {
+      default:  0,
+      required: false,
+      type:     Number
+    },
   },
 
   data() {