@rancher/shell 3.0.5-rc.3 → 3.0.5-rc.5

package/plugins/steve/subscribe.js

@@ -34,6 +34,8 @@ import { waitFor } from '@shell/utils/async';
 import { WORKER_MODES } from './worker';
 import acceptOrRejectSocketMessage from './accept-or-reject-socket-message';
 import { BLANK_CLUSTER, STORE } from '@shell/store/store-types.js';
+import { _MERGE } from '@shell/plugins/dashboard-store/actions';
+import { STEVE_WATCH_EVENT, STEVE_WATCH_MODE } from '@shell/types/store/subscribe.types';
 import paginationUtils from '@shell/utils/pagination-utils';
 
 // minimum length of time a disconnect notification is shown
@@ -185,10 +187,14 @@ export async function createWorker(store, ctx) {
 }
 
 export function equivalentWatch(a, b) {
-  const aresourceType = a.resourceType || a.type;
-  const bresourceType = b.resourceType || b.type;
+  const aResourceType = a.resourceType || a.type;
+  const bResourceType = b.resourceType || b.type;
 
-  if ( aresourceType !== bresourceType ) {
+  if ( aResourceType !== bResourceType ) {
+    return false;
+  }
+
+  if (a.mode !== b.mode && (a.mode || b.mode)) {
     return false;
   }
 
@@ -256,6 +262,13 @@ function growlsDisabled(rootGetters) {
   return getPerformanceSetting(rootGetters)?.disableWebsocketNotification;
 }
 
+/**
+ * Supported events are listed
+ *
+ * of type { [key: STEVE_WATCH_EVENT]: STEVE_WATCH_EVENT_LISTENER[]}
+ */
+const listeners = { [STEVE_WATCH_EVENT.CHANGES]: [] };
+
 /**
  * Actions that cover all cases (see file description)
  */
@@ -354,14 +367,80 @@ const sharedActions = {
     return Promise.all(cleanupTasks);
   },
 
+  /**
+   * Create a trigger for a specific type of watch event
+   *
+   * For example if a watch on mgmt clusters exists and a page wants to know when any changes occur
+   * @param {} ctx
+   * @param {STEVE_WATCH_EVENT_PARAMS} event
+   */
+  watchEvent(ctx, {
+    event = STEVE_WATCH_EVENT.CHANGES,
+    id,
+    callback,
+    /**
+     * of type @STEVE_WATCH_PARAMS
+     */
+    params
+  }) {
+    if (!listeners[event]) {
+      console.error(`Unknown event type "${ event }", only ${ Object.keys(listeners).join(',') } are supported`); // eslint-disable-line no-console
+
+      return;
+    }
+
+    // STEVE_WATCH_EVENT_LISTENER | undefined
+    let listener = listeners[event].find((l) => equivalentWatch(l.params, params));
+
+    if (!listener) {
+      listener = {
+        params,
+        callbacks: { }
+      };
+      listeners[event].push(listener);
+    }
+
+    if (!listener.callbacks[id]) {
+      listener.callbacks[id] = callback;
+      ctx.dispatch('watch', params);
+    }
+  },
+
+  /**
+   * @param {} ctx
+   * @param {STEVE_UNWATCH_EVENT_PARAMS} event
+   */
+  unwatchEvent(ctx, {
+    event = STEVE_WATCH_EVENT.CHANGES,
+    id,
+    /**
+     * of type @STEVE_WATCH_PARAMS
+     */
+    params
+  }) {
+    if (!listeners[event]) {
+      console.info(`Attempted to unwatch for an event "${ event }" but it had no watchers`); // eslint-disable-line no-console
+
+      return;
+    }
+
+    const existing = listeners[event].find((l) => equivalentWatch(l.params, params));
+
+    if (existing) {
+      delete existing.callbacks[id];
+    }
+  },
+
+  /**
+   * @param {STEVE_WATCH_PARAMS} params
+   */
   watch({
     state, dispatch, getters, rootGetters
   }, params) {
     state.debugSocket && console.info(`Watch Request [${ getters.storeName }]`, JSON.stringify(params)); // eslint-disable-line no-console
-
     let {
       // eslint-disable-next-line prefer-const
-      type, selector, id, revision, namespace, stop, force
+      type, selector, id, revision, namespace, stop, force, mode
     } = params;
 
     namespace = acceptOrRejectSocketMessage.subscribeNamespace(namespace);
@@ -393,29 +472,43 @@ const sharedActions = {
       return;
     }
 
-    if ( !stop && getters.watchStarted({
-      type, id, selector, namespace
-    }) ) {
+    const messageMeta = {
+      type, id, selector, namespace, mode
+    };
+
+    if (!stop && getters.watchStarted(messageMeta)) {
       // eslint-disable-next-line no-console
       state.debugSocket && console.debug(`Already Watching [${ getters.storeName }]`, {
-        type, id, selector, namespace
+        type, id, selector, namespace, mode
       });
 
       return;
     }
 
-    // isSteveCacheEnabled check is temporary and will be removed once Part 3 of https://github.com/rancher/dashboard/pull/10349 is resolved by backend
-    // Steve cache backed api does not return a revision, so `revision` here is always undefined
-    // Which means we find a revision within a resource itself and use it in the watch
-    // That revision is probably too old and results in a watch error
+    if (!stop) {
+      dispatch('unwatchIncompatible', messageMeta);
+    }
+
     // Watch errors mean we make a http request to get latest revision (which is still missing) and try to re-watch with it...
     // etc
-    if (typeof revision === 'undefined' && !paginationUtils.isSteveCacheEnabled({ rootGetters })) {
+    if (typeof revision === 'undefined') {
       revision = getters.nextResourceVersion(type, id);
     }
 
     const msg = { resourceType: type };
 
+    if (mode) {
+      msg.mode = mode;
+
+      if (mode === STEVE_WATCH_MODE.RESOURCE_CHANGES) {
+        const debounceMs = paginationUtils.resourceChangesDebounceMs({ rootGetters });
+
+        if (debounceMs) {
+          msg.debounceMs = debounceMs;
+        }
+      }
+    }
+
     if ( revision ) {
       msg.resourceVersion = `${ revision }`;
     }
@@ -452,7 +545,7 @@ const sharedActions = {
   },
 
   unwatch(ctx, {
-    type, id, namespace, selector, all
+    type, id, namespace, selector, all, mode
   }) {
     const { commit, getters, dispatch } = ctx;
 
@@ -464,6 +557,7 @@ const sharedActions = {
         id,
         namespace,
         selector,
+        mode,
         stop: true, // Stops the watch on a type
       };
 
@@ -491,6 +585,24 @@ const sharedActions = {
     }
   },
 
+  /**
+   * Unwatch watches that are incompatible with the new type
+   */
+  unwatchIncompatible({ state, dispatch, getters }, messageMeta) {
+    const watchesOfType = getters.watchesOfType(messageMeta.type);
+    let unwatch = [];
+
+    if (messageMeta.mode === STEVE_WATCH_EVENT.CHANGES) {
+      // resource.changes should not be running when other types are, so unwatch
+      unwatch = watchesOfType.filter((entry) => entry.mode !== STEVE_WATCH_EVENT.CHANGES);
+    } else {
+      // all other modes of watches should not be running when resource.changes is, so unwatch
+      unwatch = watchesOfType.filter((entry) => entry.mode === STEVE_WATCH_EVENT.CHANGES);
+    }
+
+    unwatch.forEach((entry) => dispatch('unwatch', entry));
+  },
+
   'ws.ping'({ getters, dispatch }, msg) {
     if ( getters.storeName === 'management' ) {
       const version = msg?.data?.version || null;
@@ -587,16 +699,30 @@ const defaultActions = {
     return Promise.all(promises);
   },
 
-  async resyncWatch({
+  /**
+   * Socket has been closed, restart afresh (make http request, ensure we re-watch)
+   */
+  async resyncWatch({ getters, dispatch }, params) {
+    console.info(`Resync [${ getters.storeName }]`, params); // eslint-disable-line no-console
+
+    await dispatch('fetchResources', {
+      ...params,
+      opt: { force: true, forceWatch: true }
+    });
+  },
+
+  async fetchResources({
     state, getters, dispatch, commit
-  }, params) {
+  }, { opt, ...params }) {
     const {
-      resourceType, namespace, id, selector
+      resourceType, namespace, id, selector, mode
     } = params;
 
-    console.info(`Resync [${ getters.storeName }]`, params); // eslint-disable-line no-console
+    if (!resourceType) {
+      console.error(`A socket message has prompted a request to fetch a resource but no resource type was supplied`); // eslint-disable-line no-console
 
-    const opt = { force: true, forceWatch: true };
+      return;
+    }
 
     if ( id ) {
       await dispatch('find', {
@@ -613,7 +739,7 @@ const defaultActions = {
 
       return;
     }
-    let have, want;
+    let have = []; let want = [];
 
     if ( selector ) {
       have = getters['matching'](resourceType, selector).slice();
@@ -623,17 +749,48 @@ const defaultActions = {
         opt,
       });
     } else {
-      have = getters['all'](resourceType).slice();
+      if (mode === STEVE_WATCH_MODE.RESOURCE_CHANGES) {
+        // Other findX use options (id/ns/selector) from the messages received over socket.
+        // However paginated requests have more complex params so grab them from store from the store.
+        const storePagination = getters['havePage'](resourceType);
+
+        if (!!storePagination) {
+          have = []; // findPage removes stale entries, so we don't need to rely on below process to remove them
+
+          // This could have been kicked off given a resource.changes message
+          // If the messages come in quicker than findPage completes (resource.changes debounce time >= http request time),
+          // and the request is the same, only the first request will be processed. all others until it finishes will be ignored
+          // (see deferred process - `waiting.push(later);` - in request action).
+          // If this becomes an issue we need to debounce and work around the deferred issue within request
+          want = await dispatch('findPage', {
+            type: resourceType,
+            opt:  {
+              ...opt,
+              // This brings in page, page size, filter, etc
+              ...storePagination.request
+            }
+          });
+        }
 
-      if ( namespace ) {
-        have = have.filter((x) => x.metadata?.namespace === namespace);
-      }
+        // Should any listeners be notified of this request for them to kick off their own event handling?
+        const listener = listeners[STEVE_WATCH_MODE.RESOURCE_CHANGES].find((sl) => equivalentWatch(sl.params, params));
 
-      want = await dispatch('findAll', {
-        type:           resourceType,
-        watchNamespace: namespace,
-        opt
-      });
+        if (listener) {
+          Object.values(listener.callbacks).forEach((cb) => cb());
+        }
+      } else {
+        have = getters['all'](resourceType).slice();
+
+        if ( namespace ) {
+          have = have.filter((x) => x.metadata?.namespace === namespace);
+        }
+
+        want = await dispatch('findAll', {
+          type:           resourceType,
+          watchNamespace: namespace,
+          opt
+        });
+      }
     }
 
     const wantMap = {};
@@ -792,7 +949,8 @@ const defaultActions = {
       type:      msg.resourceType,
       namespace: msg.namespace,
       id:        msg.id,
-      selector:  msg.selector
+      selector:  msg.selector,
+      mode:      msg.mode,
     };
 
     state.started.filter((entry) => {
@@ -846,7 +1004,8 @@ const defaultActions = {
       type,
       id:        msg.id,
       namespace: msg.namespace,
-      selector:  msg.selector
+      selector:  msg.selector,
+      mode:      msg.mode
     };
 
     state.debugSocket && console.info(`Resource Stop [${ getters.storeName }]`, type, msg); // eslint-disable-line no-console
@@ -922,6 +1081,13 @@ const defaultActions = {
     }
   },
 
+  'ws.resource.changes'({ dispatch }, msg) {
+    dispatch('fetchResources', {
+      ...msg,
+      opt: { force: true, load: _MERGE }
+    } );
+  },
+
   'ws.resource.remove'(ctx, msg) {
     const data = msg.data;
     const type = data.type;
@@ -1040,9 +1206,24 @@ const defaultGetters = {
   },
 
   watchStarted: (state) => (obj) => {
-    return !!state.started.find((entry) => equivalentWatch(obj, entry));
+    const existing = state.started.find((entry) => equivalentWatch(obj, entry));
+
+    return !!existing;
   },
 
+  /**
+   * Try to determine the latest revision to use in a watch request.
+   *
+   * It does some dodgy revision comparisons (revisions are not guaranteed to be numerical or equate higher to newer)
+   *
+   * If we have an id - and that resource has a revision - use it
+   * If we have a list - and the store has a revision - and it's a string - use it straight away
+   * If we have a list - and the store has a revision - and it's a number - compare it to the revisions in the list and use overall highest
+   *
+   * Note - This used to use parseInt which does stuff like `abc-123` --> NaN, `123-abc` --> 123
+   *
+   * Returns string, non-zero number or null
+   */
   nextResourceVersion: (state, getters) => (type, id) => {
     type = normalizeType(type);
     let revision = 0;
@@ -1050,32 +1231,38 @@ const defaultGetters = {
     if ( id ) {
       const existing = getters['byId'](type, id);
 
-      revision = parseInt(existing?.metadata?.resourceVersion, 10);
+      revision = existing?.metadata?.resourceVersion;
     }
 
     if ( !revision ) {
       const cache = state.types[type];
 
+      // No Cache, nothing to compare to, return early
       if ( !cache ) {
         return null;
       }
 
-      revision = cache.revision; // This is always zero.....
+      revision = Number(cache.revision);
+
+      // Cached LIST revision isn't a number, cannot compare to, return early
+      if (Number.isNaN(revision)) {
+        return cache.revision || null;
+      }
 
-      for ( const obj of cache.list ) {
+      for ( const obj of cache.list || [] ) {
         if ( obj && obj.metadata ) {
-          const neu = parseInt(obj.metadata.resourceVersion, 10);
+          const neu = Number(obj.metadata.resourceVersion);
+
+          if (Number.isNaN(neu)) {
+            continue;
+          }
 
           revision = Math.max(revision, neu);
         }
       }
     }
 
-    if ( revision ) {
-      return revision;
-    }
-
-    return null;
+    return revision || null;
   },
 };
 

package/rancher-components/BadgeState/BadgeState.vue

@@ -64,7 +64,9 @@ export default defineComponent({
       v-if="icon"
       class="icon"
       :class="{[icon]: true, 'mr-5': !!msg}"
-    />{{ msg }}
+    />
+    <span class="msg">{{ msg }}</span>
+    <slot name="content-right" />
   </span>
 </template>
 

package/rancher-components/Form/Checkbox/Checkbox.vue

@@ -13,7 +13,7 @@ export default defineComponent({
      * The checkbox value.
      */
     value: {
-      type:    [Boolean, Array, String] as PropType<boolean | boolean[] | string>,
+      type:    [Boolean, Array, String] as PropType<boolean | boolean[] | string | string[]>,
       default: false
     },
 
@@ -245,7 +245,7 @@ export default defineComponent({
     /**
      * Determines if there are multiple values for the checkbox.
      */
-    isMulti(value: boolean | boolean[] | string): value is boolean[] {
+    isMulti(value: boolean | boolean[] | string | string[]): value is boolean[] {
       return Array.isArray(value);
     },
 

package/rancher-components/RcItemCard/RcItemCard.test.ts

@@ -0,0 +1,189 @@
+import { mount } from '@vue/test-utils';
+import RcItemCard from './RcItemCard.vue';
+import RcItemCardAction from './RcItemCardAction.vue';
+
+class ResizeObserverMock {
+  observe = jest.fn();
+  unobserve = jest.fn();
+  disconnect = jest.fn();
+}
+
+global.ResizeObserver = ResizeObserverMock;
+
+const id = 'test';
+
+const baseProps = {
+  id,
+  value:  { someProperty: 'some-value' },
+  image:  { src: 'logo.png', alt: { text: 'Logo' } },
+  header: {
+    title:    { text: 'Card Title' },
+    statuses: [
+      { icon: 'icon-one', tooltip: { text: 'Status One' } },
+      { icon: 'icon-two' }
+    ]
+  },
+  content: { text: 'Card description here' }
+};
+
+describe('rcItemCard', () => {
+  it('renders title, image, and content', () => {
+    const wrapper = mount(RcItemCard, { props: baseProps });
+
+    expect(wrapper.get('[data-testid="item-card-header-title"]').text()).toBe('Card Title');
+    expect(wrapper.get('[data-testid="item-card-content"]').text()).toContain('Card description here');
+    expect(wrapper.get('[data-testid="item-card-image"]')).toBeTruthy();
+    expect(wrapper.findAll(`[data-testid="item-card-header-statuses-status"]`)).toHaveLength(2);
+  });
+
+  it('renders pill only in medium variant', () => {
+    const wrapper = mount(RcItemCard, {
+      props: {
+        ...baseProps,
+        variant: 'medium',
+        pill:    { label: { text: 'Installed' } }
+      }
+    });
+
+    expect(wrapper.get('[data-testid="item-card-pill"]').text()).toBe('Installed');
+
+    // now test that it's not rendered when variant is small
+    const wrapperSmall = mount(RcItemCard, {
+      props: {
+        ...baseProps,
+        variant: 'small',
+        pill:    { label: { text: 'Installed' } }
+      }
+    });
+
+    expect(wrapperSmall.find('[data-testid="item-card-pill"]').exists()).toBe(false);
+  });
+
+  it('renders action-menu if slot content is provided for it', () => {
+    const wrapper = mount(RcItemCard, {
+      props: { ...baseProps },
+      slots: { 'item-card-actions': '<div class="test-slot-for-actions">test</div>' }
+    });
+
+    expect(wrapper.find('.test-slot-for-actions').exists()).toBe(true);
+  });
+
+  it('renders action-menu when actions are passed as a prop', () => {
+    const wrapper = mount(RcItemCard, {
+      props: {
+        ...baseProps,
+        actions: [{ action: 'test', label: 'test' }]
+      }
+    });
+
+    expect(wrapper.findComponent('[data-testid="item-card-header-action-menu"]').exists()).toBe(true);
+  });
+
+  it('does not render action-menu if no slot and no actions', () => {
+    const wrapper = mount(RcItemCard, { props: { ...baseProps } });
+
+    expect(wrapper.findComponent('[data-testid="item-card-header-action-menu"]').exists()).toBe(false);
+  });
+
+  it('emits card-click when clicked and clickable', async() => {
+    const wrapper = mount(RcItemCard, {
+      props: {
+        ...baseProps,
+        clickable: true
+      }
+    });
+
+    await wrapper.trigger('click');
+
+    const emitted = wrapper.emitted('card-click');
+
+    expect(emitted).toBeTruthy();
+    expect(emitted?.[0]).toStrictEqual([{ someProperty: 'some-value' }]);
+  });
+
+  it('does not emit card-click when clicking on rc-item-card-action content', async() => {
+    const wrapper = mount(RcItemCard, {
+      props: {
+        ...baseProps,
+        clickable: true
+      },
+      global: { components: { RcItemCardAction } },
+      slots:  { 'item-card-actions': '<rc-item-card-action>Click me</rc-item-card-action>' }
+    });
+
+    await wrapper.get('[data-testid="rc-item-card-action"]').trigger('click');
+
+    expect(wrapper.emitted('card-click')).toBeFalsy();
+  });
+
+  it('sets role and tabindex when clickable', () => {
+    const wrapper = mount(RcItemCard, {
+      props: {
+        ...baseProps,
+        clickable: true
+      }
+    });
+
+    const root = wrapper.get(`[data-testid="item-card-${ id }"]`);
+
+    expect(root.attributes('role')).toBe('button');
+    expect(root.attributes('tabindex')).toBe('0');
+  });
+
+  it('does not set role or tabindex when not clickable', () => {
+    const wrapper = mount(RcItemCard, {
+      props: {
+        ...baseProps,
+        clickable: false
+      }
+    });
+
+    const root = wrapper.get(`[data-testid="item-card-${ id }"]`);
+
+    expect(root.attributes('role')).toBeUndefined();
+    expect(root.attributes('tabindex')).toBeUndefined();
+  });
+
+  it('supports keyboard enter to trigger click', async() => {
+    const wrapper = mount(RcItemCard, {
+      props: {
+        ...baseProps,
+        clickable: true
+      }
+    });
+
+    await wrapper.trigger('keydown.enter');
+    expect(wrapper.emitted('card-click')).toBeTruthy();
+  });
+
+  it('supports slot for footer and sub-header', () => {
+    const wrapper = mount(RcItemCard, {
+      props: baseProps,
+      slots: {
+        'item-card-footer':     '<div>FooterContent</div>',
+        'item-card-sub-header': '<div>SubHeaderContent</div>'
+      }
+    });
+
+    expect(wrapper.text()).toContain('FooterContent');
+    expect(wrapper.text()).toContain('SubHeaderContent');
+  });
+
+  it('renders icon with custom color', () => {
+    const wrapper = mount(RcItemCard, {
+      props: {
+        ...baseProps,
+        header: {
+          ...baseProps.header,
+          statuses: [
+            { icon: 'icon-custom', customColor: 'red' }
+          ]
+        }
+      }
+    });
+
+    const icon = wrapper.get('[data-testid="item-card-header-status-0"]');
+
+    expect(icon.attributes('style')).toContain('color: red');
+  });
+});