@rancher/shell 0.5.3 → 2.0.0

package/types/store/dashboard-store.types.ts

@@ -0,0 +1,42 @@
+import { PaginationArgs } from '@shell/types/store/pagination.types';
+
+/**
+ * Properties on all findX actions
+ */
+export type ActionCoreFindArgs = {
+  force?: boolean,
+}
+
+/**
+ * Args used for findAll action
+ */
+export interface ActionFindAllArgs extends ActionCoreFindArgs {
+  watch?: boolean,
+  namespaced?: string[],
+  incremental?: boolean,
+  hasManualRefresh?: boolean,
+  limit?: number,
+  /**
+   * Iterate over all pages and return all resources.
+   *
+   * This is done via the native kube pagination api, not steve
+   */
+  depaginate?: boolean,
+}
+
+/**
+ * Args used for findPage action
+ */
+export interface ActionFindPageArgs extends ActionCoreFindArgs {
+  /**
+   * Set of pagination settings that creates the url.
+   *
+   * This is stored and can be used to compare in new request to determine if we already have this page
+   */
+  pagination: PaginationArgs,
+  /**
+   * The single namespace to filter by (used in url path, not part of pagination params)
+   */
+  namespaced?: string,
+  hasManualRefresh?: boolean,
+}

package/types/store/pagination.types.ts

@@ -0,0 +1,457 @@
+import { NAMESPACE_FILTER_NS_FULL_PREFIX, NAMESPACE_FILTER_P_FULL_PREFIX } from '@shell/utils/namespace-filter';
+
+// Pagination Typing
+// These structures are designed to offer both convenience and flexibility based on a common structure and are
+// converted to the url param format as per https://github.com/rancher/steve.
+//
+// Simple use cases such as filtering by a single param should be easy to use.
+// More complex filtering (and'ing and 'or'ing multiple fields) is also supported.
+//
+// The top level object `PaginationArgs` contains all properties that will be converted to url params
+//
+// The two important / complex params are currently
+// - `filter` https://github.com/rancher/steve?tab=readme-ov-file#filter
+//   - represented by `PaginationParamFilter extends PaginationParam`
+//   - Examples
+//     - filter=metadata.name=123
+//     - filter=metadata.name=123,metadata.name=456 (name is 123 OR 456)
+//     - filter=metadata.name=123&filter=metadata.namespace=abc (name 123 AND namespace abc)
+// - `projectsornamespaces` https://github.com/rancher/steve?tab=readme-ov-file#projectsornamespaces
+//   - represented by `PaginationParamProjectOrNamespace extends PaginationParam`
+//   - Examples
+//     - projectsornamespaces=123
+//     - projectsornamespaces=123,456 (projects or namespaces that have id 123 OR 456)
+//
+//
+// Some of the types below are defined using classes instead of TS types/interfaces
+// - Avoid making complex json objects by using clearer instance constructors
+//   - Better documented
+//   - Defaults (a lot of the time convenience > utility)
+// - Adds some kind of typing in pure js docs
+//   - class ctor links to definition, instead of object just being a random json blob)
+//   - helps VSCode jsdoc highlighting
+
+/**
+ * Sort the pagination result
+ *
+ * For more information regarding the API see https://github.com/rancher/steve?tab=readme-ov-file#sort
+ */
+export interface PaginationSort {
+  /**
+   * Name of field within the object to sort by
+   */
+  field: string,
+  asc: boolean
+}
+
+/**
+ * Filter the pagination result by these specific fields
+ *
+ * For example
+ *
+ * - metadata.name=test
+ * - metadata.namespace!=system
+ *
+ * For more information regarding the API see https://github.com/rancher/steve?tab=readme-ov-file#query-parameters
+ */
+export class PaginationFilterField {
+  /**
+   * Name of field within the object to filter by for example the x of x=y
+   *
+   * This can be optional for some (projectsornamespaces)
+   */
+  field?: string;
+  /**
+   * Value of field within the object to filter by for example the y of x=y
+   */
+  value: string;
+  /**
+   * Equality field within the object to filter by for example the `=` or `!=` of x=y
+   */
+  equals: boolean;
+  /**
+   * Match the field exactly. False for partial matches
+   *
+   * Value: pod1
+   * Exact: true. "p" no, "pod", no, "pod1" yes
+   * Exact: false. "p" yes, "pod", yes, "pod1" yes
+   */
+  exact: boolean;
+
+  constructor(
+    {
+      field, value, equals = true, exact = true
+    }:
+    { field?: string; value: string; equals?: boolean; exact?: boolean;}
+  ) {
+    this.field = field;
+    this.value = value;
+    this.equals = equals;
+    this.exact = exact;
+  }
+}
+
+/**
+ * Represents filter like params, for example
+ *
+ * - `filter=abc!=xyz&def=123`
+ * - `projectsornamespace!=p-3456`
+ *
+ * ### Params
+ * #### Filter
+ * - For more information regarding the API see https://github.com/rancher/steve?tab=readme-ov-file#filter
+ *
+ * #### Projects Or Namespace
+ * - For more information regarding the API see https://github.com/rancher/steve?tab=readme-ov-file#projectsornamespaces
+ *
+ * ### Combining Params
+ * Params can be combined in two logical ways
+ *
+ * 1) AND
+ *    - Used when you would like to filter by something like a=1 AND b=2 AND c=3
+ *    - To do this multiple instances of `PaginationParam` are used in an array
+ *      - Object Structure
+ *        ```
+ *        [
+ *          PaginationParam,
+ *          PaginationParam,
+ *          PaginationParam
+ *        ]
+ *        ```
+ *      - Results in url
+ *        ```
+ *        filter=a=1&filter=b=2&filter=c=3
+ *        ```
+ *      - Examples
+ *        - `filter=metadata.namespace=abc&filter=metadata.name=123,property=123`
+ * 2) OR
+ *    - Used when you would like to filter by something like a=1 OR b=2 OR c=3
+ *    - To do this multiple fields within a single PaginationParam is used
+ *      - Object Structure
+ *        ```
+ *        [
+ *          PaginationParam {
+ *            PaginationFilterField,
+ *            PaginationFilterField,
+ *            PaginationFilterField
+ *          }
+ *        ]
+ *        ```
+ *      - Results in url
+ *        ```
+ *        filter=a=1,b=2,c=3
+ *        ```
+ *
+ *      - For example `filter=a=1,b=2,c=3`
+ *
+ *
+ * This structure should give enough flexibility to cover all uses.
+ *
+ *
+ */
+export abstract class PaginationParam {
+  /**
+   * Query Param. For example `filter` or `projectsornamespaces`
+   */
+  param: string;
+  /**
+   * should fields equal param.
+   *
+   * For example projectsornamexspaces=x or projectsornamexspaces!=x
+   */
+  equals: boolean;
+  /**
+   * Fields to filter by
+   *
+   * For example metadata.namespace=abc OR metadata.namespace=xyz
+   */
+  fields: PaginationFilterField[];
+
+  constructor(
+    { param, equals = true, fields = [] }:
+    {
+      param: string;
+      /**
+       * should param equal fields
+       *
+       * For definition see {@link PaginationParam} `equals`
+       */
+      equals?: boolean;
+      /**
+       * Collection of fields to filter by
+       *
+       * For definition see {@link PaginationParam} `fields`
+       */
+      fields?: PaginationFilterField[];
+  }) {
+    this.param = param;
+    this.equals = equals;
+    this.fields = fields;
+  }
+}
+
+/**
+ * This is a convenience class for the `filter` param which works some magic, adds defaults and converts to the required PaginationParam format
+ *
+ * See description for {@link PaginationParam} for how multiple of these can be combined together to AND or OR together
+ *
+ * For more information regarding the API see https://github.com/rancher/steve?tab=readme-ov-file#filter
+ */
+export class PaginationParamFilter extends PaginationParam {
+  constructor(
+    { equals = true, fields = [] }:
+    {
+      /**
+       * should param equal fields
+       *
+       * For definition see {@link PaginationParam} `equals`
+       */
+      equals?: boolean;
+      /**
+       * Collection of fields to filter by.
+       *
+       * Fields are ORd together
+       *
+       * For definition see {@link PaginationParam} `fields`
+       */
+      fields?: PaginationFilterField[];
+    }
+  ) {
+    super({
+      param: 'filter',
+      equals,
+      fields
+    });
+  }
+
+  /**
+   * Convenience method when you just want an instance of {@link PaginationParamFilter} with a simple `filter=x=y` param
+   */
+  static createSingleField(field: { field?: string; value: string; equals?: boolean; }): PaginationParam {
+    return new PaginationParamFilter({ fields: [new PaginationFilterField(field)] });
+  }
+
+  /**
+   * Convenience method when you just want an instance of {@link PaginationParamFilter} with a simple `filter=a=1,b=2,c=3` PaginationParam
+   *
+   * These will be OR'd together
+   */
+  static createMultipleFields(fields: PaginationFilterField[]): PaginationParam {
+    return new PaginationParamFilter({ fields });
+  }
+}
+
+/**
+ * This is a convenience class for the `projectsornamespaces` param which works some magic, adds defaults and converts to the required PaginationParam format
+ *
+ * See description for {@link PaginationParam} for how multiple of these can be combined together to AND or OR together
+ *
+ * For more information regarding the API see https://github.com/rancher/steve?tab=readme-ov-file#projectsornamespaces
+ */
+export class PaginationParamProjectOrNamespace extends PaginationParam {
+  constructor(
+    { equals = true, projectOrNamespace = [] }:
+    {
+      /**
+       * should param equal fields
+       * For definition see {@link PaginationParam} `equals`
+       */
+      equals?: boolean;
+       /**
+       * Collection of projects / namespace id's to filter by
+       *
+       * These are OR'd together
+       *
+       * For clarification on definition see {@link PaginationFilterField}
+       */
+      projectOrNamespace?: string[];
+    }
+  ) {
+    const safeFields = projectOrNamespace.map((f) => {
+      return new PaginationFilterField({
+        value: f
+          .replace(NAMESPACE_FILTER_NS_FULL_PREFIX, '')
+          .replace(NAMESPACE_FILTER_P_FULL_PREFIX, '')
+      });
+    });
+
+    super({
+      param:  'projectsornamespaces',
+      equals,
+      fields: safeFields
+    });
+  }
+}
+
+/**
+ * Pagination settings sent to actions and persisted to store
+ *
+ * Use this for making pagination requests that utilise the new vai cache backed API
+ */
+export class PaginationArgs {
+  /**
+   * Page number to fetch
+   */
+  page: number | null;
+  /**
+   * Number of results in the page
+   */
+  pageSize?: number | null;
+  /**
+   * Sort the results
+   *
+   * For more info see {@link PaginationSort}
+   */
+  sort: PaginationSort[];
+  /**
+   * A collection of `filter` params
+   *
+   * For more info see {@link PaginationParamFilter}
+   */
+  filters: PaginationParamFilter[];
+  /**
+   * A collection of `projectsornamespace` params
+   *
+   * For more info see {@link PaginationParamProjectOrNamespace}
+   */
+  projectsOrNamespaces: PaginationParamProjectOrNamespace[];
+
+  /**
+   * Creates an instance of PaginationArgs.
+   *
+   * Contains defaults to avoid creating complex json objects all the time
+   */
+  constructor({
+    page = 1,
+    pageSize = 10,
+    sort = [],
+    filters = [],
+    projectsOrNamespaces = [],
+  }:
+  // This would be neater as just Partial<PaginationArgs> but we lose all jsdoc
+  {
+    /**
+     * For definition see {@link PaginationArgs} `page`
+     */
+    page?: number | null,
+    /**
+     * For definition see {@link PaginationArgs} `pageSize`
+     */
+    pageSize?: number | null,
+    /**
+     * For definition see {@link PaginationArgs} `sort`
+     */
+    sort?: PaginationSort[],
+    /**
+     * Automatically wrap if not an array
+     *
+     * For definition see {@link PaginationArgs} `filters`
+     */
+    filters?: PaginationParamFilter | PaginationParamFilter[],
+    /**
+     * Automatically wrap if not an array
+     *
+     * For definition see {@link PaginationArgs} `projectsOrNamespaces`
+     */
+    projectsOrNamespaces?: PaginationParamProjectOrNamespace | PaginationParamProjectOrNamespace[],
+  }) {
+    this.page = page;
+    this.pageSize = pageSize;
+    this.sort = sort;
+    if (filters) {
+      this.filters = Array.isArray(filters) ? filters : [filters];
+    } else {
+      this.filters = [];
+    }
+    if (projectsOrNamespaces) {
+      this.projectsOrNamespaces = Array.isArray(projectsOrNamespaces) ? projectsOrNamespaces : [projectsOrNamespaces];
+    } else {
+      this.projectsOrNamespaces = [];
+    }
+  }
+}
+
+/**
+ * Wrapper around {@link PaginationArgs}
+ *
+ * Use this for making requests that utilise filtering backed by the new vai cache backed API
+ */
+export class FilterArgs extends PaginationArgs {
+  /**
+     * Creates an instance of PaginationArgs.
+     *
+     * Contains defaults to avoid creating complex json objects all the time
+     */
+  constructor({
+    sort = [],
+    filters = [],
+    projectsOrNamespaces = [],
+  }:
+  // This would be neater as just Partial<PaginationArgs> but we lose all jsdoc
+  {
+    /**
+     * For definition see {@link PaginationArgs} `sort`
+     */
+    sort?: PaginationSort[],
+    /**
+     * Automatically wrap if not an array
+     *
+     * For definition see {@link PaginationArgs} `filters`
+     */
+    filters?: PaginationParamFilter | PaginationParamFilter[],
+    /**
+     * Automatically wrap if not an array
+     *
+     * For definition see {@link PaginationArgs} `projectsOrNamespaces`
+     */
+    projectsOrNamespaces?: PaginationParamProjectOrNamespace | PaginationParamProjectOrNamespace[],
+  }) {
+    super({
+      page: null, pageSize: null, sort, filters, projectsOrNamespaces
+    });
+  }
+}
+
+/**
+ * Overall result of a pagination request.
+ *
+ * Does not contain actual resources but overall stats (count, pages, etc)
+ */
+export interface StorePaginationResult {
+  count: number,
+  pages: number,
+  /**
+   * The last time the resource was updated. Used to assist list watching for changes
+   */
+  timestamp: number,
+}
+
+export interface StorePaginationRequest {
+  /**
+   * The single namespace to filter results by (as part of url path, not pagination params)
+   */
+  namespace?: string,
+  /**
+   * The set of pagination args used to create the request
+   */
+  pagination: PaginationArgs
+}
+
+/**
+ * Pagination settings
+ * - what was requested
+ * - what was received (minus actual resources)
+ *
+ * Object is persisted to store
+ */
+export interface StorePagination {
+  /**
+   * Collection of args that is used to make the request
+   */
+  request: StorePaginationRequest,
+
+  /**
+   * Information in the response outside of the actual resources returned
+   */
+  result: StorePaginationResult
+}

package/types/store/type-map.ts

@@ -0,0 +1,30 @@
+
+/**
+ * interface for type-map's' definition for table headers/columns
+ */
+export interface TableColumn {
+  name: string,
+  label?: string,
+  value: any,
+  sort?: string | string[],
+  formatter?: string,
+  formatterOpts?: any,
+  width?: number,
+  tooltip?: string,
+  search?: string | boolean,
+}
+
+export const COLUMN_BREAKPOINTS = {
+  /**
+   * Only show column if at tablet width or wider
+   */
+  TABLET:  'tablet',
+  /**
+   * Only show column if at laptop width or wider
+   */
+  LAPTOP:  'laptop',
+  /**
+   * Only show column if at desktop width or wider
+   */
+  DESKTOP: 'desktop'
+};

package/types/store/vuex.d.ts

@@ -0,0 +1,9 @@
+// Unfortunately there's no current way to type the vuex store, however we have ts files that references it
+// Until we bring that in, this file can contain the interfaces and types used by ts files in place of `any`
+
+/**
+ * Generic interface for Vuex getters
+ */
+export interface VuexStoreGetters {
+  [name:string]: Function
+}

package/types/vue-shim.d.ts

@@ -0,0 +1,51 @@
+// eslint-disable-next-line no-unused-vars
+import Vue, { ComponentCustomProperties } from 'vue';
+declare module '*.vue' {
+  export default Vue;
+}
+
+// This is required to keep typescript from complaining. It is required for
+// our i18n plugin. For more info see:
+// https://v2.vuejs.org/v2/guide/typescript.html?redirect=true#Augmenting-Types-for-Use-with-Plugins
+declare module 'vue/types/vue' {
+  // eslint-disable-next-line no-unused-vars
+  interface Vue {
+      /**
+       * Lookup a given string with the given arguments
+       * @param raw if set, do not do HTML escaping.
+       */
+      t: {
+        (key: string, args?: Record<string, any>, raw?: boolean): string;
+        (options: { k: string; raw?: boolean; tag?: string | Record<string, any>; escapehtml?: boolean }): string;
+      };
+  }
+}
+
+declare module '@vue/runtime-core' {
+  // eslint-disable-next-line no-unused-vars
+  interface Vue {
+    t: {
+      (key: string, args?: Record<string, any>, raw?: boolean): string;
+      (options: { k: string; raw?: boolean; tag?: string | Record<string, any>; escapehtml?: boolean }): string;
+    }
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  interface ComponentCustomProperties {
+    t: {
+      (key: string, args?: Record<string, any>, raw?: boolean): string;
+      (options: { k: string; raw?: boolean; tag?: string | Record<string, any>; escapehtml?: boolean }): string;
+    },
+    $t: {
+      (key: string, args?: Record<string, any>, raw?: boolean): string;
+      (options: { k: string; raw?: boolean; tag?: string | Record<string, any>; escapehtml?: boolean }): string;
+    },
+    $store: {
+      getters: Record<string, any>,
+      dispatch: (action: string, payload?: any) => Promise<any>,
+      commit: (mutation: string, payload?: any) => void,
+    }
+  }
+}
+
+declare module 'js-yaml';

package/utils/__tests__/cluster.test.ts

@@ -3,7 +3,7 @@ import { abbreviateClusterName } from '@shell/utils/cluster';
 describe('fx: abbreviateClusterName', () => {
   it.each([
     ['local', 'lcl'],
-    ['world-wide-web', 'www'],
+    ['world-wide-web', 'wwb'],
     ['a', 'a'],
     ['ab', 'ab'],
     ['abc', 'abc'],
@@ -17,32 +17,34 @@ describe('fx: abbreviateClusterName', () => {
     ['a-b', 'a-b'],
     ['1-2', '1-2'],
     ['a-b-c', 'abc'],
-    ['abc-def-ghi', 'adg'],
+    ['abc-def-ghi', 'adi'],
     ['abcd-efgh', 'adh'],
     ['a-bc', 'abc'],
     ['ab-c', 'abc'],
     ['ab-cd', 'abd'],
     ['a-bcd', 'abd'],
     ['abc-d', 'acd'],
-    ['0123-4567-89ab-cdef', '048'],
-    ['0123-4567-89ab-cdef-ghij', '048'],
-    ['0123-4567-8901-2345', '048'],
-    ['0123-4567-8901-2345-6789', '048'],
+    ['0123-4567-89ab-cdef', '04f'],
+    ['0123-4567-89ab-cdef-ghij', '04j'],
+    ['0123-4567-8901-2345', '045'],
+    ['0123-4567-8901-2345-6789', '049'],
     ['a1b', 'a1b'],
-    ['a1b2', 'a1b'],
-    ['ab12cd34', 'a1c'],
-    ['test-cluster-one', 'tco'],
+    ['a1b2', 'a12'],
+    ['ab12cd34', 'a14'],
+    ['test-cluster-one', 'tce'],
     ['test-cluster-1', 'tc1'],
-    ['customer-support-team-1', 'cst'],
-    ['customer-support-team-one', 'cst'],
-    ['customer-support-team-prod', 'cst'],
-    ['customer-support-team-dev', 'cst'],
-    ['customer-support-team-prod-1', 'cst'],
-    ['customer-support-team-dev-1', 'cst'],
-    ['customer-support-team-prod-2', 'cst'],
-    ['customer-support-team-dev-2', 'cst'],
-
+    ['customer-support-team-1', 'cs1'],
+    ['customer-support-team-one', 'cse'],
+    ['customer-support-team-prod', 'csd'],
+    ['customer-support-team-dev', 'csv'],
+    ['customer-support-team-prod-1', 'cs1'],
+    ['customer-support-team-prod-f1xz', 'csz'],
+    ['customer-support-team-dev-1', 'cs1'],
+    ['customer-support-team-prod-2', 'cs2'],
+    ['customer-support-team-dev-2', 'cs2'],
     ['s322', 's32'],
+    ['mew-test10', 'mt0'],
+    ['mew-test11', 'mt1'],
     ['sowmya2', 'sa2'],
     ['sowmya4', 'sa4'],
     ['sowmya', 'sma'],