dashboard-shell-shell 3.0.2-test.20250913 → 3.0.5-test.2

package/plugins/dashboard-store/mutations.js

@@ -86,8 +86,16 @@ export function createLoadArgs(ctx, dataType) {
   };
 }
 
+/**
+ * Add or update the given resource in the store
+ *
+ * invalidatePageCache
+ * - if something calls `load` then the cache no longer has a page so we invalidate it
+ * - however on resource create or remove this can lead to lists showing nothing... before the new page is fetched
+ * - for those cases avoid invaliding the page cache
+ */
 export function load(state, {
-  data, ctx, existing, cachedArgs
+  data, ctx, existing, cachedArgs, invalidatePageCache = true,
 }) {
   const { getters } = ctx;
   // Optimisation. This can run once per resource loaded.., so pass in from parent
@@ -130,8 +138,12 @@ export function load(state, {
     }
   } else {
     if (inMap) {
+      // In theory cached `entry` should match provided `existing`, so changes merged from `data` into `entry` should be reflected in `existing`.
+      // However.. there's a disconnect happening somewhere so merge data into `existing` before merging into `entry`
+      const latestEntry = existing && entry !== existing ? replaceResource(existing, data, getters) : data;
+
       // There's already an entry in the store, so merge changes into it. The list entry is a reference to the map (and vice versa)
-      entry = replaceResource(entry, data, getters);
+      entry = replaceResource(entry, latestEntry, getters);
     } else {
       // There's no entry, make a new proxy
       entry = reactive(classify(ctx, data));
@@ -164,7 +176,8 @@ export function load(state, {
     }
   }
 
-  cache.havePage = false;
+  // see `invalidatePageCache` description above
+  cache.havePage = invalidatePageCache ? false : cache.havePage;
 
   return entry;
 }
@@ -413,13 +426,18 @@ export default {
   loadSelector(state, {
     type, entries, ctx, selector, revision
   }) {
+    const keyField = ctx.getters.keyFieldForType(type);
     const cache = registerType(state, type);
-    const cachedArgs = createLoadArgs(ctx, entries?.[0]?.type);
+    const proxies = reactive(entries.map((x) => classify(ctx, x)));
 
-    for ( const data of entries ) {
-      load(state, {
-        data, ctx, cachedArgs
-      });
+    clear(cache.list);
+    cache.map.clear();
+    cache.generation++;
+
+    addObjects(cache.list, proxies);
+
+    for ( let i = 0 ; i < proxies.length ; i++ ) {
+      cache.map.set(proxies[i][keyField], proxies[i]);
     }
 
     cache.haveSelector[selector] = true;
@@ -471,29 +489,60 @@ export default {
     data,
     ctx,
     pagination,
+    revision
   }) {
     if (!data) {
       return;
     }
+    // We loop over data three times in this mutator, which is bad
+    // However we're only dealing with pageSize worth of data and splitting out into three loops improves legibility
 
     const keyField = ctx.getters.keyFieldForType(type);
-    const proxies = reactive(data.map((x) => classify(ctx, x)));
+
+    // Why don't we just replace the map? Because we
+    // 1. nav to list, subscribe to changes
+    // 2. nav to resource in list
+    // 3. update to page comes over
+    // 4. need to update the reference the detail list uses
+    const proxiesMap = {};
+    const proxies = reactive(data.map((x) => {
+      proxiesMap[x[keyField]] = true;
+
+      return classify(ctx, x);
+    }));
     const cache = registerType(state, type);
 
-    clear(cache.list);
-    cache.map.clear();
     cache.generation++;
 
+    // Update list
+    clear(cache.list);
     addObjects(cache.list, proxies);
 
+    // Update Map (remove stale)
+    cache.map.forEach((value, key) => {
+      if (!proxiesMap[value[keyField]]) {
+        cache.map.delete(key);
+      }
+    });
+
+    // Update Map (update existing / add latest)
     for ( let i = 0 ; i < proxies.length ; i++ ) {
-      cache.map.set(proxies[i][keyField], proxies[i]);
+      // This could probably be merged with the first loop above
+      const existing = cache.map.get(proxies[i][keyField]);
+      const latest = proxies[i];
+
+      if (existing) {
+        replaceResource(existing, latest, ctx.getters);
+      } else {
+        cache.map.set(latest[keyField], latest);
+      }
     }
 
     // havePage is of type `StorePagination`
     cache.havePage = pagination;
     cache.haveNamespace = undefined;
     cache.haveAll = undefined;
+    cache.revision = revision;
 
     return proxies;
   },

package/plugins/dashboard-store/normalize.js

@@ -2,8 +2,6 @@ import { SCHEMA } from '@shell/config/types';
 
 import { applyChangeset, changeset, changesetConflicts } from '@shell/utils/object';
 
-import { cloud2harvesterhci } from '@shell/utils/router'
-
 export const KEY_FIELD_FOR = {
   [SCHEMA]: '_id',
   default:  'id',
@@ -19,28 +17,40 @@ export function normalizeType(type) {
   return type;
 }
 
-// Detect and resolve conflicts from a 409 response.
-// If they are resolved, return a false-y value
-// Else they can't be resolved, return an array of errors to show to the user.
-export async function handleConflict(initialValueJSON, value, liveValue, rootGetters, store, storeNamespace) {
-  const orig = await store.dispatch(`${ storeNamespace }/cleanForDiff`, initialValueJSON, { root: true });
-  const user = await store.dispatch(`${ storeNamespace }/cleanForDiff`, value.toJSON(), { root: true });
-  const cur = await store.dispatch(`${ storeNamespace }/cleanForDiff`, liveValue.toJSON(), { root: true });
-
-  const bgChange = changeset(orig, cur);
-  const userChange = changeset(orig, user);
-  const actualConflicts = changesetConflicts(bgChange, userChange);
-
-  console.log('Background Change', bgChange); // eslint-disable-line no-console
-  console.log('User Change', userChange); // eslint-disable-line no-console
+/**
+ * Detect and resolve conflicts from a 409 response.
+ *
+ * @param {*} initialValue the initial value before changes
+ * @param {*} userValue the value containing the local changes. this function will intentionally mutate this to contain changes made from the server
+ * @param {*} serverValue the very latest value from the server
+ * @returns If `value` has been successfully updated return a false-y value. Else they can't be resolved, return an array of errors to show the user.
+ */
+export async function handleConflict(initialValue, userValue, serverValue, store, storeNamespace, toJSON = (x) => x.toJSON()) {
+  // initial value
+  const initial = await store.dispatch(`${ storeNamespace }/cleanForDiff`, toJSON(initialValue), { root: true });
+  // changed value (user edits)
+  const user = await store.dispatch(`${ storeNamespace }/cleanForDiff`, toJSON(userValue), { root: true });
+  // server value
+  const server = await store.dispatch(`${ storeNamespace }/cleanForDiff`, toJSON(serverValue), { root: true });
+
+  // changes made to the server value
+  const serverChanges = changeset(initial, server);
+  // changes made locally
+  const userChanges = changeset(initial, user);
+  // Any incompatibilities between changes made locally and the server?
+  const actualConflicts = changesetConflicts(serverChanges, userChanges);
+
+  console.log('Background Change', serverChanges); // eslint-disable-line no-console
+  console.log('User Change', userChanges); // eslint-disable-line no-console
   console.log('Conflicts', actualConflicts); // eslint-disable-line no-console
 
-  value.metadata.resourceVersion = liveValue.metadata.resourceVersion;
-  applyChangeset(value, bgChange);
+  userValue.metadata.resourceVersion = serverValue.metadata.resourceVersion;
+  // Apply changes made on the server to the changed (user) value
+  applyChangeset(userValue, serverChanges);
 
   if ( actualConflicts.length ) {
     // Stop the save and let the user inspect and continue editing
-    const out = [rootGetters['i18n/t']('validation.conflict', { fields: actualConflicts.join(', '), fieldCount: actualConflicts.length })];
+    const out = [store.getters['i18n/t']('validation.conflict', { fields: actualConflicts.join(', '), fieldCount: actualConflicts.length })];
 
     return out;
   } else {

package/plugins/dashboard-store/resource-class.js

@@ -32,9 +32,10 @@ import isFunction from 'lodash/isFunction';
 import isString from 'lodash/isString';
 import { markRaw } from 'vue';
 
+import { handleConflict } from '@shell/plugins/dashboard-store/normalize';
 import { ExtensionPoint, ActionLocation } from '@shell/core/types';
 import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
-import { harvesterhci2cloud, cloud2harvesterhci } from '@shell/utils/router'
+import { parse } from '@shell/utils/selector';
 
 export const DNS_LIKE_TYPES = ['dnsLabel', 'dnsLabelRestricted', 'hostname'];
 
@@ -736,6 +737,17 @@ export default class Resource {
     );
   }
 
+  get stateColorPair() {
+    return {
+      state: this.stateDisplay,
+      color: this.stateSimpleColor
+    };
+  }
+
+  get stateSimpleColor() {
+    return this.stateColor.replace('text-', '');
+  }
+
   get stateBackground() {
     return this.stateColor.replace('text-', 'bg-');
   }
@@ -886,6 +898,10 @@ export default class Resource {
     return out;
   }
 
+  get canEdit() {
+    return this.canUpdate && this.canCustomEdit;
+  }
+
   // You can add custom actions by overriding your own availableActions (and probably reading super._availableActions)
   get _availableActions() {
     // get menu actions available by plugins configuration
@@ -897,42 +913,42 @@ export default class Resource {
       {
         action:  this.canUpdate ? 'goToEdit' : 'goToViewConfig',
         label:   this.t(this.canUpdate ? 'action.edit' : 'action.view'),
-        // icon:    'icon icon-edit',
+        icon:    'icon icon-edit',
         enabled: this.canCustomEdit,
       },
-      // {
-      //   action:  this.canEditYaml ? 'goToEditYaml' : 'goToViewYaml',
-      //   label:   this.t(this.canEditYaml ? 'action.editYaml' : 'action.viewYaml'),
-      //   icon:    'icon icon-file',
-      //   enabled: this.canYaml,
-      // },
+      {
+        action:  this.canEditYaml ? 'goToEditYaml' : 'goToViewYaml',
+        label:   this.t(this.canEditYaml ? 'action.editYaml' : 'action.viewYaml'),
+        icon:    'icon icon-file',
+        enabled: this.canYaml,
+      },
       {
         action:  (this.canCustomEdit ? 'goToClone' : 'cloneYaml'),
         label:   this.t('action.clone'),
-        // icon:    'icon icon-copy',
-        enabled: this.canClone && this.canCreate && (this.canCustomEdit || this.canYaml)&& this.schema.id!=='event',
+        icon:    'icon icon-copy',
+        enabled: this.canClone && this.canCreate && (this.canCustomEdit || this.canYaml),
+      },
+      { divider: true },
+      {
+        action:     'download',
+        label:      this.t('action.download'),
+        icon:       'icon icon-download',
+        bulkable:   true,
+        bulkAction: 'downloadBulk',
+        enabled:    this.canYaml,
+        weight:     -9,
+      },
+      {
+        action:  'viewInApi',
+        label:   this.t('action.viewInApi'),
+        icon:    'icon icon-external-link',
+        enabled: this.canViewInApi,
       },
-      // { divider: true },
-      // {
-      //   action:     'download',
-      //   label:      this.t('action.download'),
-      //   icon:       'icon icon-download',
-      //   bulkable:   true,
-      //   bulkAction: 'downloadBulk',
-      //   enabled:    this.canYaml,
-      //   weight:     -9,
-      // },
-      // {
-      //   action:  'viewInApi',
-      //   label:   this.t('action.viewInApi'),
-      //   icon:    'icon icon-external-link',
-      //   enabled: this.canViewInApi,
-      // },
       {
         action:     'promptRemove',
         altAction:  'remove',
         label:      this.t('action.remove'),
-        // icon:       'icon icon-trash',
+        icon:       'icon icon-trash',
         bulkable:   true,
         enabled:    this.canDelete,
         bulkAction: 'promptRemove',
@@ -1180,7 +1196,9 @@ export default class Resource {
     }
 
     // @TODO remove this once the API maps steve _type <-> k8s type in both directions
-    opt.data = this.toSave() || { ...this };
+    // `JSON.parse(JSON.stringify` - Completely disconnect the object we're going to send and `this`. This ensures that properties
+    // removed from opt.data before sending (as part of cleanForSave) are not stripped from where they're still needed (`this`)
+    opt.data = this.toSave() || JSON.parse(JSON.stringify(this));
 
     if (opt.data._type) {
       opt.data.type = opt.data._type;
@@ -1247,7 +1265,18 @@ export default class Resource {
 
     const res = await this.$dispatch('request', { opt, type: this.type } );
 
-    if ( res?._status === 204 ) {
+    // In theory...
+    // 200 - resource could have finalizer (could hang around, keep resource to show deleting state)
+    // 204 - resource should be gone gone (so remove immediately)
+    // However...
+    // 200 - this is the only status code returned
+    if ( res?._status === 200 ) {
+      // Show state (probably terminating) immediately, don't wait for resource.change or debounced resource.changes update
+      // It would be neater to only do this in the debounced resource.changes world, but there's no neat / complete way to do this (paginationUtils will cause dep issues if imported)
+      await this.$dispatch('load', {
+        data: res, existing: this, invalidatePageCache: false
+      });
+    } else if ( res?._status === 204 ) {
       // If there's no body, assume the resource was immediately deleted
       // and drop it from the store as if a remove event happened.
       await this.$dispatch('ws.resource.remove', { data: this });
@@ -1293,8 +1322,7 @@ export default class Resource {
   }
 
   get detailLocation() {
-    let location = this._detailLocation;
-    return location;
+    return this._detailLocation;
   }
 
   goToDetail() {
@@ -1320,9 +1348,7 @@ export default class Resource {
     this.currentRouter().push(location);
   }
 
-  goToEdit(moreQuery = {}) {
-    const location = this.detailLocation;
-
+  goToEdit(moreQuery = {}, location = this.detailLocation) {
     location.query = {
       ...location.query,
       [MODE]: _EDIT,
@@ -1505,11 +1531,11 @@ export default class Resource {
     }
   }
 
-  async saveYaml(yaml) {
-    await this._saveYaml(yaml);
+  async saveYaml(yaml, initialYaml) {
+    await this._saveYaml(yaml, initialYaml);
   }
 
-  async _saveYaml(yaml) {
+  async _saveYaml(yaml, initialYaml, depth = 0) {
     /* Multipart support, but need to know the right cluster and work for management store
       and "apply" seems to only work for create, not update.
 
@@ -1547,20 +1573,56 @@ export default class Resource {
         data:   yaml
       });
     } else {
-      res = await this.followLink('update', {
-        method: 'PUT',
-        headers,
-        data:   yaml
-      });
+      try {
+        res = await this.followLink('update', {
+          method: 'PUT',
+          headers,
+          data:   yaml
+        });
+      } catch (err) {
+        const IS_ERR_409 = err.status === 409 || err._status === 409;
+
+        // Conflict, the resource being edited has changed since starting editing
+        if (IS_ERR_409 && depth === 0 && initialYaml) {
+          const inStore = this.$rootGetters['currentStore'](this.type);
+
+          const initialValue = jsyaml.load(initialYaml);
+          const value = jsyaml.load(yaml);
+          const liveValue = this.$rootGetters[`${ inStore }/byId`](this.type, this.id);
+
+          const handledConflictErr = await handleConflict(
+            initialValue,
+            value,
+            liveValue,
+            {
+              dispatch: this.$dispatch,
+              getters:  this.$rootGetters
+            },
+            this.$rootGetters['currentStore'](this.type),
+            (v) => v.toJSON ? v.toJSON() : v
+          );
+
+          if (handledConflictErr === false) {
+            // It was automatically figured out, save again
+            await this._saveYaml(jsyaml.dump(value), null, depth + 1);
+          } else {
+            throw handledConflictErr;
+          }
+        } else {
+          throw err;
+        }
+      }
     }
 
-    await this.$dispatch(`load`, {
-      data:     res,
-      existing: (isCreate ? this : undefined)
-    });
+    if (res) {
+      await this.$dispatch(`load`, {
+        data:     res,
+        existing: (isCreate ? this : undefined)
+      });
 
-    if (this.isSpoofed) {
-      await this.$dispatch('cluster/findAll', { type: this.type, opt: { force: true } }, { root: true });
+      if (this.isSpoofed) {
+        await this.$dispatch('cluster/findAll', { type: this.type, opt: { force: true } }, { root: true });
+      }
     }
   }
 
@@ -1793,6 +1855,7 @@ export default class Resource {
       }
 
       if ( r.selector ) {
+        // A selector is a stringified version of a matchLabel (https://github.com/kubernetes/apimachinery/blob/master/pkg/labels/selector.go#L1010)
         addObjects(out.selectors, {
           type:      r.toType,
           namespace: r.toNamespace,
@@ -1836,15 +1899,35 @@ export default class Resource {
   }
 
   async _findRelationship(rel, direction) {
+    // Find resources for this resource's metadata.relationships (steve prop)
+    // These will either reference a selector (stringified matchLabels) OR specific resources (ids)
     const { selectors, ids } = this._relationshipsFor(rel, direction);
     const out = [];
 
+    // Find all the resources that match the selector
     for ( const sel of selectors ) {
-      const matching = await this.$dispatch('findMatching', sel);
+      const {
+        type,
+        selector,
+        namespace,
+        opt,
+      } = sel;
+      const matching = await this.$dispatch('findLabelSelector', {
+        type,
+        matching: {
+          namespace,
+          labelSelector: { matchExpressions: parse(selector) }
+        },
+        opts: {
+          transient: true,
+          ...opt,
+        },
+      });
 
       addObjects(out, matching.data);
     }
 
+    // Find all the resources that match the required id's
     for ( const obj of ids ) {
       const { type, id } = obj;
       let matching = this.$getters['byId'](type, id);

package/plugins/steve/__tests__/getters.test.ts

@@ -1,6 +1,8 @@
 import _getters from '@shell/plugins/steve/getters';
 
-const { urlFor, urlOptions, pathExistsInSchema } = _getters;
+const {
+  urlFor, urlOptions, pathExistsInSchema, isSteveUrl
+} = _getters;
 
 describe('steve: getters:', () => {
   describe('urlFor', () => {
@@ -66,18 +68,17 @@ describe('steve: getters:', () => {
   });
 
   describe('urlOptions', () => {
-    // we're not testing function output based off of state or getter inputs here since they are dependencies
-    const state = { config: { baseUrl: 'protocol' } };
-    const getters = {
-      normalizeType: (type) => type,
-      // this has its own tests so it just returns the input string
-      urlOptions:    (string) => string
-    };
-
-    const urlOptionsGetter = urlOptions();
+    const urlOptionsGetter = urlOptions(undefined, {
+      isSteveUrl:      isSteveUrl(),
+      isSteveCacheUrl: () => false,
+    });
+    const urlOptionsGetterVaiOn = urlOptions(undefined, {
+      isSteveUrl:      isSteveUrl(),
+      isSteveCacheUrl: () => true,
+    });
 
     it('expects urlOptions to return a function', () => {
-      expect(typeof urlOptions(state, getters)).toBe('function');
+      expect(typeof urlOptions()).toBe('function');
     });
     it('returns undefined when called without params', () => {
       expect(urlOptionsGetter()).toBeUndefined();
@@ -103,6 +104,12 @@ describe('steve: getters:', () => {
     it('returns a string with a multiple filter statements applied and formatted for steve if a single filter statement is applied and the url starts with "/v1"', () => {
       expect(urlOptionsGetter('/v1/foo', { filter: { bar: 'baz', far: 'faz' } })).toBe('/v1/foo?filter=bar=baz&far=faz&exclude=metadata.managedFields');
     });
+    it('returns a string with correct equality for vai off', () => {
+      expect(urlOptionsGetter('/v1/foo', { filter: { bar: 'baz', far: 'faz' } })).toBe('/v1/foo?filter=bar=baz&far=faz&exclude=metadata.managedFields');
+    });
+    it('returns a string with correct equality for vai on', () => {
+      expect(urlOptionsGetterVaiOn('/v1/foo', { filter: { bar: 'baz', far: 'faz' } })).toBe('/v1/foo?filter=bar~baz&far~faz&exclude=metadata.managedFields');
+    });
     it('returns a string with a labelSelector and formatted for steve if the url starts with "/v1"', () => {
       expect(urlOptionsGetter('/v1/foo', { labelSelector: 'a=b' })).toBe('/v1/foo?labelSelector=a=b&exclude=metadata.managedFields');
     });
@@ -113,7 +120,7 @@ describe('steve: getters:', () => {
       expect(urlOptionsGetter('/v1/foo', { excludeFields: ['bar'] })).toBe('/v1/foo?exclude=bar');
     });
     it('returns a string without an exclude statement for "managedFields" if omitExcludeFields includes it and the url starts with "/v1/"', () => {
-      expect(urlOptionsGetter('/v1/foo', { omitExcludeFields: ['metadata.managedFields'] })).toBe('/v1/foo?');
+      expect(urlOptionsGetter('/v1/foo', { omitExcludeFields: ['metadata.managedFields'] })).toBe('/v1/foo');
     });
     it('returns a string without an exclude statement if excludeFields is set but the url does not start with "/v1/"', () => {
       expect(urlOptionsGetter('foo', { excludeFields: ['bar'] })).toBe('foo');

package/plugins/steve/__tests__/steve-class.test.ts

@@ -32,6 +32,7 @@ describe('class: Steve', () => {
             clusterName:                'whatever',
             deletionGracePeriodSeconds: 'whatever',
             generateName:               'whatever',
+            ownerReferences:            'whatever',
           },
           spec: { versions: {} }
         };