@rancher/shell 0.1.4 → 0.2.1

package/components/HarvesterServiceAddOnConfig.vue

@@ -100,7 +100,7 @@ export default {
       const errors = [];
 
       if (this.healthCheckEnabled && !this.healthcheckPort) {
-        errors.push(this.t('validation.required', { key: this.t('harvester.service.healthCheckPort.label') }, true));
+        errors.push(this.t('validation.required', { key: this.t('servicesPage.harvester.healthCheckPort.label') }, true));
       }
 
       if (errors.length > 0) {
@@ -131,7 +131,7 @@ export default {
           v-model="ipam"
           :mode="mode"
           :options="ipamOptions"
-          :label="t('harvester.service.ipam.label')"
+          :label="t('servicesPage.harvester.ipam.label')"
           :disabled="mode === 'edit'"
         />
       </div>
@@ -143,7 +143,7 @@ export default {
           v-model="healthCheckEnabled"
           :mode="mode"
           name="healthCheckEnabled"
-          :label="t('harvester.service.healthCheckEnabled.label')"
+          :label="t('servicesPage.harvester.healthCheckEnabled.label')"
           :labels="[t('generic.disabled'),t('generic.enabled')]"
           :options="[false, true]"
         />
@@ -157,7 +157,7 @@ export default {
             :mode="mode"
             :options="portOptions"
             required
-            :label="t('harvester.service.healthCheckPort.label')"
+            :label="t('servicesPage.harvester.healthCheckPort.label')"
           />
         </div>
         <div class="col span-6">
@@ -165,8 +165,8 @@ export default {
             v-model="healthCheckSuccessThreshold"
             :mode="mode"
             type="number"
-            :label="t('harvester.service.healthCheckSuccessThreshold.label')"
-            :tooltip="t('harvester.service.healthCheckSuccessThreshold.description')"
+            :label="t('servicesPage.harvester.healthCheckSuccessThreshold.label')"
+            :tooltip="t('servicesPage.harvester.healthCheckSuccessThreshold.description')"
           />
         </div>
       </div>
@@ -176,8 +176,8 @@ export default {
             v-model="healthCheckFailureThreshold"
             :mode="mode"
             type="number"
-            :label="t('harvester.service.healthCheckFailureThreshold.label')"
-            :tooltip="t('harvester.service.healthCheckFailureThreshold.description')"
+            :label="t('servicesPage.harvester.healthCheckFailureThreshold.label')"
+            :tooltip="t('servicesPage.harvester.healthCheckFailureThreshold.description')"
           />
         </div>
         <div class="col span-6">
@@ -185,7 +185,7 @@ export default {
             v-model="healthCheckPeriod"
             :mode="mode"
             type="number"
-            :label="t('harvester.service.healthCheckPeriod.label')"
+            :label="t('servicesPage.harvester.healthCheckPeriod.label')"
           />
         </div>
       </div>
@@ -195,7 +195,7 @@ export default {
             v-model="healthCheckTimeout"
             :mode="mode"
             type="number"
-            :label="t('harvester.service.healthCheckTimeout.label')"
+            :label="t('servicesPage.harvester.healthCheckTimeout.label')"
           />
         </div>
       </div>

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/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: {
@@ -14,6 +14,20 @@ export default {
   },
   mixins: [ResourceFetch],
 
+  props: {
+    hasAdvancedFiltering: {
+      type:    Boolean,
+      default: false
+    },
+    advFilterHideLabelsAsCols: {
+      type:    Boolean,
+      default: false
+    },
+    advFilterPreventFilteringLabels: {
+      type:    Boolean,
+      default: false
+    },
+  },
   async fetch() {
     const store = this.$store;
     const resource = this.resource;
@@ -43,8 +57,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 +69,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 +85,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 +96,6 @@ export default {
       watch:             false,
       force:             false,
       // Provided by fetch later
-      rows:              [],
       customTypeDisplay: null,
       // incremental loading
       loadResources:     [resource],
@@ -111,10 +117,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 +144,19 @@ 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 slot="extraActions">
+        <slot name="extraActions"></slot>
       </template>
     </Masthead>
     <div v-if="hasListComponent">
       <component
         :is="listComponent"
+        :incremental-loading-indicator="showIncrementalLoadingIndicator"
+        :rows="rows"
         v-bind="$data"
       />
     </div>
@@ -164,21 +167,24 @@ export default {
       :loading="loading"
       :headers="headers"
       :group-by="groupBy"
+      :has-advanced-filtering="hasAdvancedFiltering"
+      :adv-filter-hide-labels-as-cols="advFilterHideLabelsAsCols"
+      :adv-filter-prevent-filtering-labels="advFilterPreventFilteringLabels"
     />
   </div>
 </template>
 
-<style lang="scss" scoped>
-  .header {
-    position: relative;
-  }
-  H2 {
-    position: relative;
-    margin: 0 0 20px 0;
-  }
-  .right-action {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-  }
-</style>
+  <style lang="scss" scoped>
+    .header {
+      position: relative;
+    }
+    H2 {
+      position: relative;
+      margin: 0 0 20px 0;
+    }
+    .right-action {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+    }
+  </style>

package/components/ResourceTable.vue

@@ -122,6 +122,18 @@ export default {
       type:    Boolean,
       default: false
     },
+    hasAdvancedFiltering: {
+      type:    Boolean,
+      default: false
+    },
+    advFilterHideLabelsAsCols: {
+      type:    Boolean,
+      default: false
+    },
+    advFilterPreventFilteringLabels: {
+      type:    Boolean,
+      default: false
+    },
   },
 
   data() {
@@ -357,6 +369,7 @@ export default {
     handleActionButtonClick(event) {
       this.$emit('clickedActionButton', event);
     }
+
   }
 };
 </script>
@@ -369,6 +382,8 @@ export default {
     :rows="filteredRows"
     :loading="loading"
     :group-by="computedGroupBy"
+    :group="group"
+    :group-options="groupOptions"
     :search="search"
     :paging="true"
     :paging-params="pagingParams"
@@ -378,9 +393,13 @@ export default {
     :overflow-x="overflowX"
     :overflow-y="overflowY"
     :get-custom-detail-link="getCustomDetailLink"
+    :has-advanced-filtering="hasAdvancedFiltering"
+    :adv-filter-hide-labels-as-cols="advFilterHideLabelsAsCols"
+    :adv-filter-prevent-filtering-labels="advFilterPreventFilteringLabels"
     key-field="_key"
     :sort-generation-fn="safeSortGenerationFn"
     @clickedActionButton="handleActionButtonClick"
+    @group-value-change="group = $event"
     v-on="$listeners"
   >
     <template v-if="showGrouping" #header-middle>