@rancher/shell 0.3.16 → 0.3.18

package/components/FileDiff.vue

@@ -1,5 +1,6 @@
 <script>
-import { Diff2Html } from 'diff2html';
+import { Diff2HtmlUI } from 'diff2html/lib/ui/js/diff2html-ui-slim.js';
+
 import { createPatch } from 'diff';
 
 export default {
@@ -38,36 +39,40 @@ export default {
     }
   },
 
-  computed: {
-    html() {
-      const outputFormat = this.sideBySide ? 'side-by-side' : 'line-by-line';
-      const showFiles = false;
-      const matching = 'words';
+  mounted() {
+    this.draw();
+  },
+
+  watch: {
+    sideBySide() {
+      this.draw();
+    }
+  },
 
+  methods: {
+    draw() {
+      const targetElement = document.getElementById('diffElement');
       const patch = createPatch(
         this.filename,
         this.orig,
         this.neu
       );
+      const configuration = {
+        // UI
+        synchronisedScroll: true,
 
-      const json = Diff2Html.getJsonFromDiff(patch, {
-        inputFormat: 'diff',
-        outputFormat,
-        showFiles,
-        matching
-      });
-
-      return Diff2Html.getPrettyHtml(json, {
-        inputFormat:        'json',
-        outputFormat,
-        showFiles,
-        matching,
-        synchronizedScroll: true,
-      });
-    }
-  },
+        // Base
+        outputFormat: this.sideBySide ? 'side-by-side' : 'line-by-line',
+        drawFileList: false,
+        matching:     'words',
+      };
+
+      const diff2htmlUi = new Diff2HtmlUI(targetElement, patch, configuration);
+
+      diff2htmlUi.draw();
+      this.fit();
+    },
 
-  methods: {
     fit() {
       if ( !this.autoResize ) {
         return;
@@ -97,8 +102,8 @@ export default {
   <div>
     <resize-observer @notify="fit" />
     <div
+      id="diffElement"
       ref="root"
-      v-clean-html="html"
       class="root"
     />
   </div>
@@ -112,66 +117,68 @@ export default {
 }
 </style>
 
-<style lang="scss">
-@import 'node_modules/diff2html/dist/diff2html.min.css';
-
-.d2h-file-header {
-  display: none;
-}
-
-.d2h-file-wrapper {
-  border-color: var(--diff-border);
-}
-
-.d2h-diff-table {
-  font-family: Menlo,Consolas,monospace;
-  font-size: 13px;
-}
-
-.d2h-emptyplaceholder, .d2h-code-side-emptyplaceholder {
-  border-color: var(--diff-linenum-border);
-  background-color: var(--diff-empty-placeholder);
-}
-
-.d2h-code-linenumber,
-.d2h-code-side-linenumber {
-  background-color: var(--diff-linenum-bg);
-  color: var(--diff-linenum);
-  border-color: var(--diff-linenum-border);
-  border-left: 0;
-}
-
-.d2h-code-line del,.d2h-code-side-line del {
-  background-color: var(--diff-line-del-bg);
-}
-
-.d2h-code-line ins,.d2h-code-side-line ins {
-  background-color: var(--diff-line-ins-bg);
-}
-
-.d2h-del {
-  background-color: var(--diff-del-bg);
-  border-color: var(--diff-del-border);
-  color: var(--body-text);
-}
-
-.d2h-ins {
-  background-color: var(--diff-ins-bg);
-  border-color: var(--diff-ins-border);
-  color: var(--body-text);
-}
-
-.d2h-info {
-  background-color: var(--diff-header-bg);
-  color: var(--diff-header);
-  border-color: var(--diff-header-border);
-}
-
-.d2h-file-diff .d2h-del.d2h-change {
-  background-color: var(--diff-chg-del);
-}
-
-.d2h-file-diff .d2h-ins.d2h-change {
-  background-color: var(--diff-chg-ins);
+<style scoped lang="scss">
+@import 'node_modules/diff2html/bundles/css/diff2html.min.css';
+
+::v-deep .d2h-wrapper {
+  .d2h-file-header {
+    display: none;
+  }
+
+  .d2h-file-wrapper {
+    border-color: var(--diff-border);
+  }
+
+  .d2h-diff-table {
+    font-family: Menlo,Consolas,monospace;
+    font-size: 13px;
+  }
+
+  .d2h-emptyplaceholder, .d2h-code-side-emptyplaceholder {
+    border-color: var(--diff-linenum-border);
+    background-color: var(--diff-empty-placeholder);
+  }
+
+  .d2h-code-linenumber,
+  .d2h-code-side-linenumber {
+    background-color: var(--diff-linenum-bg);
+    color: var(--diff-linenum);
+    border-color: var(--diff-linenum-border);
+    border-left: 0;
+  }
+
+  .d2h-code-line del,.d2h-code-side-line del {
+    background-color: var(--diff-line-del-bg);
+  }
+
+  .d2h-code-line ins,.d2h-code-side-line ins {
+    background-color: var(--diff-line-ins-bg);
+  }
+
+  .d2h-del {
+    background-color: var(--diff-del-bg);
+    border-color: var(--diff-del-border);
+    color: var(--body-text);
+  }
+
+  .d2h-ins {
+    background-color: var(--diff-ins-bg);
+    border-color: var(--diff-ins-border);
+    color: var(--body-text);
+  }
+
+  .d2h-info {
+    background-color: var(--diff-header-bg);
+    color: var(--diff-header);
+    border-color: var(--diff-header-border);
+  }
+
+  .d2h-file-diff .d2h-del.d2h-change {
+    background-color: var(--diff-chg-del);
+  }
+
+  .d2h-file-diff .d2h-ins.d2h-change {
+    background-color: var(--diff-chg-ins);
+  }
 }
 </style>

package/components/Inactivity.vue

@@ -6,6 +6,8 @@ import throttle from 'lodash/throttle';
 import { MANAGEMENT } from '@shell/config/types';
 import { DEFAULT_PERF_SETTING, SETTING } from '@shell/config/settings';
 
+let globalId;
+
 export default {
   name:       'Inactivity',
   components: {
@@ -22,6 +24,7 @@ export default {
       courtesyTimerId:     null,
       courtesyCountdown:   null,
       trackInactivity:     throttle(this._trackInactivity, 1000),
+      id:                  null,
     };
   },
   async mounted() {
@@ -72,9 +75,16 @@ export default {
       this.clearAllTimeouts();
       const endTime = Date.now() + this.showModalAfter * 1000;
 
+      this.id = endTime;
+      globalId = endTime;
+
       const checkInactivityTimer = () => {
         const now = Date.now();
 
+        if (this.id !== globalId) {
+          return;
+        }
+
         if (now >= endTime) {
           this.isOpen = true;
           this.startCountdown();

package/components/LazyImage.vue

@@ -3,12 +3,12 @@ export default {
   props: {
     initialSrc: {
       type:    String,
-      default: require('~shell/assets/images/generic-catalog.svg'),
+      default: require('@shell/assets/images/generic-catalog.svg'),
     },
 
     errorSrc: {
       type:    String,
-      default: require('~shell/assets/images/generic-catalog.svg'),
+      default: require('@shell/assets/images/generic-catalog.svg'),
     },
 
     src: {

package/components/PromptRestore.vue

@@ -14,6 +14,7 @@ import { DATE_FORMAT, TIME_FORMAT } from '@shell/store/prefs';
 import { escapeHtml } from '@shell/utils/string';
 import day from 'dayjs';
 import { sortBy } from '@shell/utils/sort';
+import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
 
 export default {
   components: {
@@ -51,7 +52,7 @@ export default {
     // Was the dialog opened to restore a specific snapshot, or opened on a cluster to choose
     isCluster() {
       const isSnapshot = this.toRestore[0]?.type.toLowerCase() === NORMAN.ETCD_BACKUP ||
-        this.toRestore[0]?.type.toLowerCase() === SNAPSHOT;
+      this.toRestore[0]?.type.toLowerCase() === SNAPSHOT;
 
       return !isSnapshot;
     },
@@ -113,7 +114,7 @@ export default {
       const cluster = this.toRestore?.[0];
       let promise;
 
-      if (!cluster.isRke2) {
+      if (!cluster?.isRke2) {
         promise = this.$store.dispatch('rancher/findAll', { type: NORMAN.ETCD_BACKUP }).then((snapshots) => {
           return snapshots.filter((s) => s.clusterId === cluster.metadata.name);
         });
@@ -121,12 +122,13 @@ export default {
         promise = this.$store.dispatch('management/findAll', { type: SNAPSHOT }).then((snapshots) => {
           const toRestoreClusterName = cluster?.clusterName || cluster?.metadata?.name;
 
-          return snapshots.filter((s) => s.clusterName === toRestoreClusterName);
+          return snapshots.filter((s) => s?.snapshotFile?.status === STATES_ENUM.SUCCESSFUL && s.clusterName === toRestoreClusterName
+          );
         });
       }
 
       // Map of snapshots by name
-      const allSnapshosts = await promise.then((snapshots) => {
+      const allSnapshots = await promise.then((snapshots) => {
         return snapshots.reduce((v, s) => {
           v[s.name] = s;
 
@@ -136,7 +138,7 @@ export default {
         this.errors = exceptionToErrorsArray(err);
       });
 
-      this.allSnapshots = allSnapshosts;
+      this.allSnapshots = allSnapshots;
       this.sortedSnapshots = sortBy(Object.values(this.allSnapshots), ['snapshotFile.createdAt', 'created', 'metadata.creationTimestamp'], true);
     },
 

package/components/ResourceDetail/Masthead.vue

@@ -216,7 +216,7 @@ export default {
     },
 
     parent() {
-      const displayName = this.value.parentNameOverride || this.$store.getters['type-map/labelFor'](this.schema);
+      const displayName = this.value?.parentNameOverride || this.$store.getters['type-map/labelFor'](this.schema);
       const product = this.$store.getters['currentProduct'].name;
 
       const defaultLocation = {

package/components/ResourceDetail/index.vue

@@ -83,16 +83,18 @@ export default {
       default: 'resource-details'
     }
   },
+
   async fetch() {
     const store = this.$store;
     const route = this.$route;
     const params = route.params;
-    const inStore = this.storeOverride || store.getters['currentStore'](params.resource);
+    let resource = this.resourceOverride || params.resource;
+
+    const inStore = this.storeOverride || store.getters['currentStore'](resource);
     const realMode = this.realMode;
 
     // eslint-disable-next-line prefer-const
     let { namespace, id } = params;
-    let resource = this.resourceOverride || params.resource;
 
     // There are 6 "real" modes that can be put into the query string
     // These are mapped down to the 3 regular page "mode"s that create-edit-view components
@@ -193,6 +195,9 @@ export default {
           opt:  { watch: true }
         });
       } catch (e) {
+        if (e.status === 404 || e.status === 403) {
+          store.dispatch('loadingError', new Error(this.t('nav.failWhale.resourceIdNotFound', { resource, fqid }, true)));
+        }
         liveModel = {};
         notFound = fqid;
       }
@@ -367,18 +372,7 @@ export default {
 </script>
 
 <template>
-  <Loading v-if="$fetchState.pending" />
-  <div v-else-if="notFound">
-    <IconMessage icon="icon-warning">
-      <template v-slot:message>
-        {{ t('generic.notFound') }}
-        <div>
-          <div>{{ t('generic.type') }}: {{ resource }}</div>
-          <div>{{ t('generic.id') }}: {{ notFound }}</div>
-        </div>
-      </template>
-    </IconMessage>
-  </div>
+  <Loading v-if="$fetchState.pending || notFound" />
   <div v-else>
     <Masthead
       v-if="showMasthead"

package/components/ResourceList/index.vue

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

package/components/ResourceTable.vue

@@ -4,8 +4,9 @@ import { get } from '@shell/utils/object';
 import { mapPref, GROUP_RESOURCES } from '@shell/store/prefs';
 import ButtonGroup from '@shell/components/ButtonGroup';
 import SortableTable from '@shell/components/SortableTable';
-import { NAMESPACE } from '@shell/config/table-headers';
+import { NAMESPACE, AGE } from '@shell/config/table-headers';
 import { findBy } from '@shell/utils/array';
+import { ExtensionPoint, TableColumnLocation } from '@shell/core/types';
 
 // Default group-by in the case the group stored in the preference does not apply
 const DEFAULT_GROUP = 'namespace';
@@ -57,6 +58,12 @@ export default {
       required: false
     },
 
+    keyField: {
+      // Field that is unique for each row.
+      type:    String,
+      default: '_key',
+    },
+
     headers: {
       type:    Array,
       default: null,
@@ -216,6 +223,7 @@ export default {
     _headers() {
       let headers;
       const showNamespace = this.showNamespaceColumn;
+      const type = this.schema?.id || this.$route?.params?.resource || undefined;
 
       if ( this.headers ) {
         headers = this.headers.slice();
@@ -223,6 +231,46 @@ export default {
         headers = this.$store.getters['type-map/headersFor'](this.schema);
       }
 
+      // add custom table columns provided by the extensions ExtensionPoint.TABLE_COL hook
+      // gate it so that we prevent errors on older versions of dashboard
+      if (this.$store.$plugin?.getUIConfig) {
+        const extensionCols = this.$store.$plugin.getUIConfig(ExtensionPoint.TABLE_COL, TableColumnLocation.RESOURCE);
+
+        // Try and insert the columns before the Age column
+        let insertPosition = headers.length;
+
+        if (headers.length > 0) {
+          const ageColIndex = headers.findIndex((h) => h.name === AGE.name);
+
+          if (ageColIndex >= 0) {
+            insertPosition = ageColIndex;
+          } else {
+            // we've found some labels with ' ', which isn't necessarily empty (explore action/button)
+            // if we are to add cols, let's push them before these so that the UI doesn't look weird
+            const lastViableColIndex = headers.findIndex((h) => (!h.label || !h.label?.trim()) && (!h.labelKey || !h.labelKey?.trim()));
+
+            if (lastViableColIndex >= 0) {
+              insertPosition = lastViableColIndex;
+            }
+          }
+        }
+
+        // adding extension defined cols to the correct header config
+        extensionCols.forEach((col) => {
+          if (col.locationConfig.resource) {
+            col.locationConfig.resource.forEach((resource) => {
+              if (resource && type === resource) {
+                // we need the 'value' prop to be populated in order for the rows to show the values
+                if (!col.value && col.getValue) {
+                  col.value = col.getValue;
+                }
+                headers.splice(insertPosition, 0, col);
+              }
+            });
+          }
+        });
+      }
+
       // If only one namespace is selected, hide the namespace column
       if ( !showNamespace ) {
         const idx = headers.findIndex((header) => header.name === NAMESPACE.name);
@@ -447,7 +495,7 @@ export default {
     :has-advanced-filtering="hasAdvancedFiltering"
     :adv-filter-hide-labels-as-cols="advFilterHideLabelsAsCols"
     :adv-filter-prevent-filtering-labels="advFilterPreventFilteringLabels"
-    key-field="_key"
+    :key-field="keyField"
     :sort-generation-fn="safeSortGenerationFn"
     :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
     :force-update-live-and-delayed="forceUpdateLiveAndDelayed"

package/components/YamlEditor.vue

@@ -241,6 +241,7 @@ export default {
       :side-by-side="diffMode === 'split'"
       :orig="original"
       :neu="curValue"
+      :footer-space="80"
     />
   </div>
 </template>

package/components/__tests__/PromptRestore.test.ts

@@ -0,0 +1,72 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import PromptRestore from '@shell/components/PromptRestore.vue';
+import Vuex from 'vuex';
+import { ExtendedVue, Vue } from 'vue/types/vue';
+import { DefaultProps } from 'vue/types/options';
+import { CAPI } from '@shell/config/types';
+import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
+
+const SUCCESSFUL_SNAPSHOT_1 = {
+  isRke2:       true,
+  type:         CAPI.RANCHER_CLUSTER,
+  created:      'Thu Jul 20 2023 11:11:39',
+  snapshotFile: { status: STATES_ENUM.SUCCESSFUL },
+  id:           'id',
+  name:         'name'
+};
+const SUCCESSFUL_SNAPSHOT_2 = {
+  isRke2:       true,
+  type:         CAPI.RANCHER_CLUSTER,
+  created:      'Thu Jul 20 2022 11:11:39',
+  snapshotFile: { status: STATES_ENUM.SUCCESSFUL },
+  id:           'id2',
+  name:         'name2'
+};
+const FAILED_SNAPSHOT = {
+  isRke2:       true,
+  type:         CAPI.RANCHER_CLUSTER,
+  created:      'Thu Jul 20 2021 11:11:39',
+  snapshotFile: { status: STATES_ENUM.FAILED },
+  id:           'id_3',
+  name:         'name_3'
+};
+
+describe('component: GrowlManager', () => {
+  const localVue = createLocalVue();
+
+  localVue.use(Vuex);
+
+  const testCases = [
+    [[], 0],
+    [[FAILED_SNAPSHOT], 0],
+    [[SUCCESSFUL_SNAPSHOT_1], 1],
+    [[SUCCESSFUL_SNAPSHOT_1, SUCCESSFUL_SNAPSHOT_2], 2],
+    [[FAILED_SNAPSHOT, SUCCESSFUL_SNAPSHOT_1, SUCCESSFUL_SNAPSHOT_2], 2]
+  ];
+
+  it.each(testCases)('should list RKE2 snapshots properly', async(snapShots, expected) => {
+    const store = new Vuex.Store({
+      modules: {
+        'action-menu': {
+          namespaced: true,
+          state:      {
+            showPromptRestore: true,
+            toRestore:         snapShots
+          },
+        },
+      },
+      getters: { 'i18n/t': () => jest.fn(), 'prefs/get': () => jest.fn() },
+      actions: { 'management/findAll': jest.fn().mockResolvedValue(snapShots), 'rancher/findAll': jest.fn().mockResolvedValue([]) }
+    });
+
+    const wrapper = shallowMount(PromptRestore as unknown as ExtendedVue<Vue, {}, {}, {}, DefaultProps>, {
+      store,
+      localVue
+    });
+
+    await wrapper.vm.fetchSnapshots();
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.vm.clusterSnapshots).toHaveLength(expected);
+  });
+});

package/components/auth/AzureWarning.vue

@@ -3,7 +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';
+import { BLANK_CLUSTER } from '@shell/store/store-types.js';
 
 export default {
   async fetch() {

package/components/auth/RoleDetailEdit.vue

@@ -668,6 +668,7 @@ export default {
                     :value="getRule('resources', props.row.value)"
                     :disabled="isBuiltin"
                     :options="resourceOptions"
+                    option-key="optionKey"
                     :searchable="true"
                     :taggable="true"
                     :mode="mode"

package/components/fleet/FleetResources.vue

@@ -1,9 +1,6 @@
 <script>
-import { colorForState, stateDisplay, stateSort, STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
 import SortableTable from '@shell/components/SortableTable';
-import { NAME as EXPLORER } from '@shell/config/product/explorer';
-import { FLEET as FLEET_ANNOTATIONS } from '@shell/config/labels-annotations';
-import { randomStr } from '@shell/utils/string';
+import { AGE } from '@shell/config/table-headers';
 
 export default {
   name: 'FleetResources',
@@ -19,66 +16,7 @@ export default {
 
   computed: {
     computedResources() {
-      const clusters = this.value.targetClusters || [];
-      const resources = this.value.status?.resources || [];
-      const out = [];
-
-      for ( const r of resources ) {
-        let namespacedName = r.name;
-
-        if ( r.namespace ) {
-          namespacedName = `${ r.namespace }:${ r.name }`;
-        }
-
-        for ( const c of clusters ) {
-          let state = r.state;
-          const perEntry = r.perClusterState?.find((x) => x.clusterId === c.id );
-          const tooMany = r.perClusterState?.length >= 10 || false;
-
-          if ( perEntry ) {
-            state = perEntry.state;
-          } else if ( tooMany ) {
-            state = STATES_ENUM.UNKNOWN;
-          } else {
-            state = STATES_ENUM.READY;
-          }
-
-          const color = colorForState(state).replace('text-', 'bg-');
-          const display = stateDisplay(state);
-
-          const detailLocation = {
-            name:   `c-cluster-product-resource${ r.namespace ? '-namespace' : '' }-id`,
-            params: {
-              product:   EXPLORER,
-              cluster:   c.metadata.labels[FLEET_ANNOTATIONS.CLUSTER_NAME],
-              resource:  r.type,
-              namespace: r.namespace,
-              id:        r.name,
-            }
-          };
-
-          out.push({
-            key:             `${ r.id }-${ c.id }-${ r.type }-${ r.namespace }-${ r.name }`,
-            tableKey:        `${ r.id }-${ c.id }-${ r.type }-${ r.namespace }-${ r.name }-${ randomStr(8) }`,
-            kind:            r.kind,
-            apiVersion:      r.apiVersion,
-            type:            r.type,
-            id:              r.id,
-            namespace:       r.namespace,
-            name:            r.name,
-            clusterId:       c.id,
-            clusterName:     c.nameDisplay,
-            state,
-            stateBackground: color,
-            stateDisplay:    display,
-            stateSort:       stateSort(color, display),
-            namespacedName,
-            detailLocation,
-          });
-        }
-      }
-
-      return out;
+      return this.value.resourcesStatuses;
     },
 
     resourceHeaders() {
@@ -122,6 +60,7 @@ export default {
           sort:  'namespace',
           label: 'Namespace',
         },
+        { ...AGE }
       ];
     },
   }