@rancher/shell 1.2.0 → 2.0.0

package/plugins/steve/schema.d.ts

@@ -0,0 +1,22 @@
+
+export interface SchemaAttributeColumn {
+  description: string,
+  field: string,
+  format: string,
+  name: string,
+  priority: number,
+  type: string,
+}
+
+export interface SchemaAttribute {
+  columns: SchemaAttributeColumn[],
+  namespaced: boolean
+}
+
+/**
+ * At some point this will be properly typed, until then...
+ */
+export interface Schema {
+  id: string,
+  attributes: SchemaAttribute
+}

package/plugins/steve/steve-class.js

@@ -1,5 +1,17 @@
 import { DESCRIPTION } from '@shell/config/labels-annotations';
 import HybridModel from './hybrid-class';
+import { NEVER_ADD } from '@shell/utils/create-yaml';
+import { deleteProperty } from '@shell/utils/object';
+
+// Some fields that are removed for YAML (NEVER_ADD) are required via API
+const STEVE_ADD = [
+  'metadata.resourceVersion',
+  'metadata.fields',
+  'metadata.clusterName',
+  'metadata.deletionGracePeriodSeconds',
+  'metadata.generateName',
+];
+const STEVE_NEVER_SAVE = NEVER_ADD.filter((na) => !STEVE_ADD.includes(na));
 
 export default class SteveModel extends HybridModel {
   get name() {
@@ -28,4 +40,14 @@ export default class SteveModel extends HybridModel {
 
     this._description = value;
   }
+
+  cleanForSave(data, forNew) {
+    const val = super.cleanForSave(data);
+
+    for (const field of STEVE_NEVER_SAVE) {
+      deleteProperty(val, field);
+    }
+
+    return val;
+  }
 }

package/plugins/steve/steve-pagination-utils.ts

@@ -0,0 +1,368 @@
+import { ActionFindPageArgs } from '@shell/types/store/dashboard-store.types';
+import { PaginationParam, PaginationFilterField, PaginationParamProjectOrNamespace, PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { NAMESPACE_FILTER_ALL_SYSTEM, NAMESPACE_FILTER_ALL_USER, NAMESPACE_FILTER_P_FULL_PREFIX } from '@shell/utils/namespace-filter';
+import Namespace from '@shell/models/namespace';
+import { uniq } from '@shell/utils/array';
+import {
+  CONFIG_MAP, MANAGEMENT, NAMESPACE, NODE, POD
+} from '@shell/config/types';
+import { Schema } from 'plugins/steve/schema';
+
+class NamespaceProjectFilters {
+  /**
+   * User needs all resources.... except if there's some settings which should remove resources in specific circumstances
+   */
+  protected handlePrefAndSettingFilter(allNamespaces: Namespace[], showDynamicRancherNamespaces: boolean, productHidesSystemNamespaces: boolean): PaginationParamFilter[] {
+    // These are AND'd together
+    // Not ns 1 AND ns 2
+    return allNamespaces.reduce((res, ns) => {
+      // Links to ns.isObscure and covers things like `c-`, `user-`, etc (see OBSCURE_NAMESPACE_PREFIX)
+      const hideObscure = showDynamicRancherNamespaces ? false : ns.isObscure;
+      // Links to ns.isSystem and covers things like ns with system annotation, hardcoded list, etc
+      const hideSystem = productHidesSystemNamespaces ? ns.isSystem : false;
+
+      if (hideObscure || hideSystem) {
+        res.push(PaginationParamFilter.createSingleField({
+          field: 'metadata.namespace', value: ns.name, equals: false
+        }));
+      }
+
+      return res;
+    }, [] as PaginationParamFilter[]);
+  }
+
+  /**
+   * User needs either all user resources... or all system
+   *
+   * System resources revolve around the namespace's isSystem property
+   *
+   * Users resources are those not in system namespaces
+   */
+  protected handleSystemOrUserFilter(allNamespaces: Namespace[], isAllSystem: boolean, isAllUser: boolean) {
+    const allSystem = allNamespaces.filter((ns) => ns.isSystem);
+
+    // > Neither of these use projectsOrNamespaces to avoid scenarios where the local cluster provides a namespace which has
+    // > a matching project... which could lead to results in the user project resource being included in the system filter
+    if (isAllSystem) {
+      // return resources in system ns 1 OR in system ns 2 ...
+      // &filter=metadata.namespace=system ns 1,metadata.namespace=system ns 2
+      return [PaginationParamFilter.createMultipleFields(
+        allSystem.map(
+          (ns) => new PaginationFilterField({ field: 'metadata.namespace', value: ns.name })
+        )
+      )];
+    } else { // if isAllUser
+      // return resources not in system ns 1 AND not in system ns 2 ...
+      // &filter=metadata.namespace!=system ns 1&filter=metadata.namespace!=system ns 2
+      return allSystem.map((ns) => PaginationParamFilter.createSingleField({
+        field: 'metadata.namespace', value: ns.name, equals: false
+      }));
+    }
+  }
+
+  /**
+   * User needs resources in a set of projects or namespaces
+   */
+  protected handleSelectionFilter(neu: string[], isLocalCluster: boolean) {
+    // User has one or more projects or namespaces. We can pass this straight through to projectsornamespaces
+
+    // return resources in project 1 OR namespace 2
+    // &projectsornamespaces=project 1,namespace 2
+    const projectsOrNamespaces = [
+      new PaginationParamProjectOrNamespace({ projectOrNamespace: neu })
+    ];
+
+    if (isLocalCluster) {
+      // > As per `handleSystemOrUserFilter` above, we need to be careful of the local cluster where there's namespaces related to projects with the same id
+      // > In this case
+      // - We're including resources in the project and it's related namespace (via projectsornamespaces)
+      // - We're also then excluding resources in the related namespace (via below `filter`)
+
+      // Exclude resources NOT in projects namespace 1 AND not in projects namespace 2
+      // &filter=metadata.namespace!=pn1&filter=metadata.namespace!=pn2
+      return {
+        projectsOrNamespaces,
+        filters: neu
+          .filter((selection) => selection.startsWith(NAMESPACE_FILTER_P_FULL_PREFIX))
+          .map((projects) => PaginationParamFilter.createSingleField({
+            field: 'metadata.namespace', value: projects.replace(NAMESPACE_FILTER_P_FULL_PREFIX, ''), equals: false
+          }))
+      };
+    }
+
+    return { projectsOrNamespaces, filters: [] };
+  }
+}
+
+/**
+ * Helper functions for steve pagination
+ */
+class StevePaginationUtils extends NamespaceProjectFilters {
+  /**
+   * Filtering with the vai cache supports specific fields
+   * 1) Those listed here
+   * 2) Those references in the schema's attributes.fields list (which is used by generic lists)
+   */
+  static VALID_FIELDS: { [type: string]: { field: string, startsWith?: boolean }[]} = {
+    '': [// all types
+      { field: 'metadata.name' },
+      { field: 'metadata.namespace' },
+      // { field: 'id' }, // Pending API support
+      // { field: 'metadata.state.name' }, // Pending API support
+      { field: 'metadata.creationTimestamp' },
+    ],
+    [NODE]: [
+      { field: 'status.nodeInfo.kubeletVersion' },
+      { field: 'status.nodeInfo.operatingSystem' },
+    ],
+    [POD]: [
+      { field: 'spec.containers.image' },
+      { field: 'spec.nodeName' },
+    ],
+    [MANAGEMENT.NODE]: [
+      { field: 'status.nodeName' },
+    ],
+    [CONFIG_MAP]: [
+      { field: 'metadata.labels[harvesterhci.io/cloud-init-template]' }
+    ],
+    [NAMESPACE]: [
+      { field: 'metadata.labels[field.cattle.io/projectId]' }
+    ]
+  }
+
+  private convertArrayPath(path: string): string {
+    if (path.startsWith('metadata.fields.')) {
+      return `metadata.fields[${ path.substring(16) }]`;
+    }
+
+    return path;
+  }
+
+  public createSortForPagination(sortByPath: string): string {
+    return this.convertArrayPath(sortByPath);
+  }
+
+  /**
+   * Given the selection of projects or namespaces come up with `filter` and `projectsornamespace` query params
+   */
+  public createParamsFromNsFilter({
+    allNamespaces,
+    selection,
+    isAllNamespaces,
+    isLocalCluster,
+    showDynamicRancherNamespaces,
+    productHidesSystemNamespaces,
+  }: {
+    allNamespaces: Namespace[],
+    selection: string[],
+    /**
+     * There is no user provided filter
+     */
+    isAllNamespaces: boolean,
+    /**
+     * Weird things be happening if the target cluster is local / upstream. Uses this to check what cluster we're in
+     */
+    isLocalCluster: boolean,
+    /**
+     * Links to ns.isObscure and covers things like `c-`, `user-`, etc (see OBSCURE_NAMESPACE_PREFIX)
+     */
+    showDynamicRancherNamespaces: boolean,
+    /**
+     * Links to ns.isSystem and covers things like ns with system annotation, hardcoded list, etc
+     */
+    productHidesSystemNamespaces: boolean,
+  }): {
+    projectsOrNamespaces: PaginationParamProjectOrNamespace[],
+    filters: PaginationParamFilter[]
+  } {
+    // Hold up, why are we doing yet another way to convert the user's project / namespace filter to a set of something?
+    // - When doing this for local pagination `getActiveNamespaces` provides a full list of applicable namespaces.
+    //   Lists then filter resource locally using those namespaces
+    // - Pagination cannot take this approach of 'gimme all resources in these namespaces' primarily for the 'Only User Namespaces' case
+    //   - User could have 2k namespaces. This would result in 2k+ namespaces added to the url (namespace=1,namespace=2,namespace=3, etc)
+    // - Instead we do
+    //   - All but not given settings - Gimme resources NOT in system or obscure namespaces
+    //   - Only System Namespaces - Gimme resources in the system namespaces (which shouldn't be many namespaces)
+    //   - Only User Namespaces - Gimme resources NOT in system namespaces
+    //   - User selection - Gimme resources in specific Projects or Namespaces
+    if (isAllNamespaces && (showDynamicRancherNamespaces && !productHidesSystemNamespaces)) {
+      // No-op. Everything is returned
+      return {
+        projectsOrNamespaces: [],
+        filters:              []
+      };
+    }
+
+    // used to return resources in / not in projects/namespaces (entries are checked in both types)
+    // &projectsornamespaces=project 1,namespace 2
+    let projectsOrNamespaces: PaginationParamProjectOrNamespace[] = [];
+    // used to return resources in / not in namespaces
+    // &filter=metadata.namespace=abc
+    let filters: PaginationParamFilter[] = [];
+
+    if (!showDynamicRancherNamespaces || productHidesSystemNamespaces) {
+      // We need to hide dynamic namespaces ('c-', 'p-', etc) OR system namespaces
+      filters = this.handlePrefAndSettingFilter(allNamespaces, showDynamicRancherNamespaces, productHidesSystemNamespaces);
+    }
+
+    const isAllSystem = selection[0] === NAMESPACE_FILTER_ALL_SYSTEM;
+    const isAllUser = selection[0] === NAMESPACE_FILTER_ALL_USER;
+
+    if (selection.length === 1 && (isAllSystem || isAllUser)) {
+      // Filter by resources either in or not in system namespaces
+      filters.push(...this.handleSystemOrUserFilter(allNamespaces, isAllSystem, isAllUser ));
+    } else {
+      // User has one or more projects or namespaces
+      const res = this.handleSelectionFilter(selection, isLocalCluster);
+
+      projectsOrNamespaces = res.projectsOrNamespaces;
+      filters.push(...res.filters);
+    }
+
+    return {
+      projectsOrNamespaces,
+      filters
+    };
+  }
+
+  public createParamsForPagination(schema: Schema, opt: ActionFindPageArgs): string | undefined {
+    if (!opt.pagination) {
+      return;
+    }
+
+    const params: string[] = [];
+    const namespaceParam = this.convertPaginationParams(schema, opt.pagination.projectsOrNamespaces);
+
+    if (namespaceParam) {
+      params.push(namespaceParam);
+    }
+
+    if (opt.pagination.page) {
+      params.push(`page=${ opt.pagination.page }`);
+    }
+
+    if (opt.pagination.pageSize) {
+      params.push(`pagesize=${ opt.pagination.pageSize }`);
+    }
+
+    if (opt.pagination.sort?.length) {
+      const validateFields = {
+        checked: new Array<string>(),
+        invalid: new Array<string>(),
+      };
+
+      const joined = opt.pagination.sort
+        .map((s) => {
+          this.validateField(validateFields, schema, s.field);
+
+          return `${ s.asc ? '' : '-' }${ this.convertArrayPath(s.field) }`;
+        })
+        .join(',');
+
+      params.push(`sort=${ joined }`);
+
+      if (validateFields.invalid.length) {
+        console.warn(`Pagination API does not support sorting '${ schema.id }' by the requested fields: ${ uniq(validateFields.invalid).join(', ') }`); // eslint-disable-line no-console
+      }
+    }
+
+    if (opt.pagination.filters?.length) {
+      const filters = this.convertPaginationParams(schema, opt.pagination.filters);
+
+      if (filters) {
+        params.push(filters);
+      }
+    }
+
+    // Note - There is a `limit` property that is by default 100,000. This can be disabled by using `limit=-1`,
+    // but we shouldn't be fetching any pages big enough to exceed the default
+
+    return params.join('&');
+  }
+
+  /**
+   * Check if the API supports filtering by this field
+   */
+  private validateField(state: { checked: string[], invalid: string[]}, schema: Schema, field?: string) {
+    if (!field) {
+      return; // no field, so not invalid
+    }
+
+    if (state.checked.includes(field)) {
+      return; // already checked, exit early
+    }
+
+    state.checked.push(field);
+
+    // First check in our hardcoded list of supported filters
+    if ([
+      StevePaginationUtils.VALID_FIELDS[''], // Global
+      StevePaginationUtils.VALID_FIELDS[schema.id], // Type specific
+    ].find((fields) => fields?.find((f) => {
+      if (f.startsWith) {
+        if (field.startsWith(f.field)) {
+          return true;
+        }
+      } else {
+        return field === f.field;
+      }
+    }))) {
+      return;
+    }
+
+    // Then check in schema (the api automatically supports these)
+    if (!!schema?.attributes.columns.find(
+      // This isn't the most performant, but the string is tiny
+      (at) => at.field.replace('$.', '').replace('[', '.').replace(']', '') === field
+    )) {
+      return;
+    }
+
+    state.invalid.push(field);
+  }
+
+  /**
+   * Convert our {@link PaginationParam} definition of params to a set of url params
+   */
+  private convertPaginationParams(schema: Schema, filters: PaginationParam[] = []): string {
+    const validateFields = {
+      checked: new Array<string>(),
+      invalid: new Array<string>(),
+    };
+    const filterStrings = filters
+      .filter((filter) => !!filter.fields.length)
+      .map((filter) => {
+        const joined = filter.fields
+          .map((field) => {
+            if (field.field) {
+              // Check if the API supports filtering by this field
+              this.validateField(validateFields, schema, field.field);
+
+              const exactPartial = field.exact ? `'${ field.value }'` : field.value;
+
+              return `${ this.convertArrayPath(field.field) }${ field.equals ? '=' : '!=' }${ exactPartial }`;
+            }
+
+            return field.value;
+          })
+          .join(','); // This means OR
+
+        return `${ filter.param }${ filter.equals ? '=' : '!=' }${ joined }`;
+      });
+    const unique = filterStrings.reduce((res, s) => {
+      res[s] = true;
+
+      return res;
+    }, { } as {[filterString: string] : boolean });
+
+    const res = Object.keys(unique).join('&'); // This means AND
+
+    if (validateFields.invalid.length) {
+      console.warn(`Pagination API does not support filtering '${ schema.id }' by the requested fields: ${ uniq(validateFields.invalid).join(', ') }`); // eslint-disable-line no-console
+    }
+
+    return res;
+  }
+}
+
+export default new StevePaginationUtils();

package/plugins/steve/subscribe.js

@@ -32,8 +32,9 @@ import { escapeHtml } from '@shell/utils/string';
 import { keyForSubscribe } from '@shell/plugins/steve/resourceWatcher';
 import { waitFor } from '@shell/utils/async';
 import { WORKER_MODES } from './worker';
-import pAndNFiltering from '@shell/utils/projectAndNamespaceFiltering.utils';
+import acceptOrRejectSocketMessage from './accept-or-reject-socket-message';
 import { BLANK_CLUSTER, STORE } from '@shell/store/store-types.js';
+import paginationUtils from '@shell/utils/pagination-utils';
 
 // minimum length of time a disconnect notification is shown
 const MINIMUM_TIME_NOTIFIED = 3000;
@@ -131,7 +132,7 @@ export async function createWorker(store, ctx) {
       }
     },
     batchChanges: (batch) => {
-      dispatch('batchChanges', namespaceHandler.validateBatchChange(ctx, batch));
+      dispatch('batchChanges', acceptOrRejectSocketMessage.validateBatchChange(ctx, batch));
     },
     dispatch: (msg) => {
       dispatch(`ws.${ msg.name }`, msg);
@@ -205,66 +206,6 @@ export function equivalentWatch(a, b) {
   return true;
 }
 
-/**
- * Sockets will not be able to subscribe to more than one namespace. If this is requested we pretend to handle it
- * - Changes to all resources are monitored (no namespace provided in sub)
- * - We ignore any events not from a required namespace (we have the conversion of project --> namespaces already)
- */
-const namespaceHandler = {
-  /**
-   * Note - namespace can be a list of projects or namespaces
-   */
-  subscribeNamespace: (namespace) => {
-    if (pAndNFiltering.isApplicable({ namespaced: namespace }) && namespace.length) {
-      return undefined; // AKA sub to everything
-    }
-
-    return namespace;
-  },
-
-  validChange: ({ getters, rootGetters }, type, data) => {
-    const haveNamespace = getters.haveNamespace(type);
-
-    if (haveNamespace?.length) {
-      const namespaces = rootGetters.activeNamespaceCache;
-
-      if (!namespaces[data.metadata.namespace]) {
-        return false;
-      }
-    }
-
-    return true;
-  },
-
-  validateBatchChange: ({ getters, rootGetters }, batch) => {
-    const namespaces = rootGetters.activeNamespaceCache;
-
-    Object.entries(batch).forEach(([type, entries]) => {
-      const haveNamespace = getters.haveNamespace(type);
-
-      if (!haveNamespace?.length) {
-        return;
-      }
-
-      const schema = getters.schemaFor(type);
-
-      if (!schema?.attributes?.namespaced) {
-        return;
-      }
-
-      Object.keys(entries).forEach((id) => {
-        const namespace = id.split('/')[0];
-
-        if (!namespace || !namespaces[namespace]) {
-          delete entries[id];
-        }
-      });
-    });
-
-    return batch;
-  }
-};
-
 function queueChange({ getters, state, rootGetters }, { data, revision }, load, label) {
   const type = getters.normalizeType(data.type);
 
@@ -278,7 +219,7 @@ function queueChange({ getters, state, rootGetters }, { data, revision }, load,
 
   // console.log(`${ label } Event [${ state.config.namespace }]`, data.type, data.id); // eslint-disable-line no-console
 
-  if (!namespaceHandler.validChange({ getters, rootGetters }, type, data)) {
+  if (!acceptOrRejectSocketMessage.validChange({ getters, rootGetters }, type, data)) {
     return;
   }
 
@@ -333,10 +274,6 @@ const sharedActions = {
 
     commit('setWantSocket', true);
 
-    if ( process.server ) {
-      return;
-    }
-
     state.debugSocket && console.info(`Subscribe [${ getters.storeName }]`); // eslint-disable-line no-console
 
     const url = `${ state.config.baseUrl }/subscribe`;
@@ -426,7 +363,7 @@ const sharedActions = {
       type, selector, id, revision, namespace, stop, force
     } = params;
 
-    namespace = namespaceHandler.subscribeNamespace(namespace);
+    namespace = acceptOrRejectSocketMessage.subscribeNamespace(namespace);
     type = getters.normalizeType(type);
 
     if (rootGetters['type-map/isSpoofed'](type)) {
@@ -466,7 +403,13 @@ const sharedActions = {
       return;
     }
 
-    if ( typeof revision === 'undefined' ) {
+    // 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
+    // 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 })) {
       revision = getters.nextResourceVersion(type, id);
     }
 
@@ -513,7 +456,7 @@ const sharedActions = {
     const { commit, getters, dispatch } = ctx;
 
     if (getters['schemaFor'](type)) {
-      namespace = namespaceHandler.subscribeNamespace(namespace);
+      namespace = acceptOrRejectSocketMessage.subscribeNamespace(namespace);
 
       const obj = {
         type,
@@ -610,7 +553,7 @@ const defaultActions = {
   },
 
   rehydrateSubscribe({ state, dispatch }) {
-    if ( process.client && state.wantSocket && !state.socket ) {
+    if ( state.wantSocket && !state.socket ) {
       dispatch('subscribe');
     }
   },
@@ -741,11 +684,9 @@ const defaultActions = {
     }
 
     // Try resending any frames that were attempted to be sent while the socket was down, once.
-    if ( !process.server ) {
-      for ( const obj of state.pendingFrames.slice() ) {
-        commit('dequeuePendingFrame', obj);
-        dispatch('sendImmediate', obj);
-      }
+    for ( const obj of state.pendingFrames.slice() ) {
+      commit('dequeuePendingFrame', obj);
+      dispatch('sendImmediate', obj);
     }
   },
 

package/plugins/trim-whitespace.js

@@ -1,37 +1,9 @@
 import Vue from 'vue';
+import trimWhitespaceDirective from '@shell/directives/trim-whitespace';
 
-export function trimWhitespace(el, dir) {
-  for (const node of el.childNodes) {
-    if (node.nodeType === Node.TEXT_NODE ) {
-      const trimmed = node.data.trim();
+export default trimWhitespaceDirective;
+/* eslint-disable-next-line no-console */
+console.warn(`Importing trimWhitespaceDirective from plugins has been deprecated, use shell/directives/trim-whitespace.js instead.
+Make sure to invoke it using Vue.directive('trim-whitespace', trimWhitespaceDirective ) to maintain compatibility.`);
 
-      if ( trimmed === '') {
-        node.remove();
-      } else if ( trimmed !== node.data ) {
-        node.data = trimmed;
-      }
-    }
-  }
-}
-
-export function trimWhitespaceSsr(el, dir) {
-  // This causes server<->client dom mismatches sometimes... gave up for now.
-  /*
-  for ( const node of (el.children || []) ) {
-    if ( node.text ) {
-      const trimmed = node.text.trim();
-
-      if ( trimmed !== node.text ) {
-        node.text = trimmed;
-      }
-    } else if ( node.children ) {
-      trimWhitespaceSsr(node);
-    }
-  }
-  */
-}
-
-Vue.directive('trim-whitespace', {
-  inserted:         trimWhitespace,
-  componentUpdated: trimWhitespace
-});
+Vue.directive('trim-whitespace', trimWhitespaceDirective );

package/plugins/vue-js-modal.js

@@ -1,4 +1,4 @@
 import Vue from 'vue';
-import VModal from 'vue-js-modal/dist/ssr.index';
+import VModal from 'vue-js-modal';
 
 Vue.use(VModal);

package/public/index.html

@@ -67,6 +67,7 @@
             <i class="initial-load-spinner"></i>
         </div>
     </div>
+    <div id="modals"><!--Portal content here--></div>
 </body>
 
 </html>

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

@@ -355,15 +355,20 @@ export default defineComponent({
       :hover="hoverTooltip"
       :value="validationMessage"
     />
-    <label
-      v-if="cronHint"
-      class="cron-label"
-    >{{ cronHint }}</label>
-    <label
-      v-if="subLabel"
-      v-clean-html="subLabel"
+    <div
+      v-if="cronHint || subLabel"
       class="sub-label"
-    />
+    >
+      <div
+        v-if="cronHint"
+      >
+        {{ cronHint }}
+      </div>
+      <div
+        v-if="subLabel"
+        v-clean-html="subLabel"
+      />
+    </div>
   </div>
 </template>
 <style scoped lang="scss">