@rancher/shell 3.0.11 → 3.0.12-rc.2

package/components/templates/plain.vue

@@ -14,7 +14,6 @@ import BrowserTabVisibility from '@shell/mixins/browser-tab-visibility';
 import Inactivity from '@shell/components/Inactivity';
 import { mapGetters } from 'vuex';
 import PromptModal from '@shell/components/PromptModal';
-import WindowManager from '@shell/components/nav/WindowManager';
 import { Layout } from '@shell/types/window-manager';
 
 export default {
@@ -31,17 +30,17 @@ export default {
     SlideInPanelManager,
     AwsComplianceBanner,
     Inactivity,
-    WindowManager
   },
 
   mixins: [Brand, BrowserTabVisibility],
 
+  inject: ['notifyWmContainerReady'],
+
   data() {
     return {
       // Assume home pages have routes where the name is the key to use for string lookup
       name:             this.$route.name,
-      noLocaleShortcut: process.env.dev || false,
-      layout:           Layout.plain,
+      noLocaleShortcut: process.env.dev || false
     };
   },
 
@@ -50,6 +49,10 @@ export default {
     ...mapGetters(['showTopLevelMenu']),
   },
 
+  mounted() {
+    this.notifyWmContainerReady(Layout.plain);
+  },
+
   methods: {
     toggleTheme() {
       this.$store.dispatch('prefs/toggleTheme');
@@ -98,7 +101,12 @@ export default {
           @shortkey="toggleNoneLocale()"
         />
       </main>
-      <WindowManager :layout="layout" />
+      <!-- Teleport target for WindowManager (unique per layout) -->
+      <!-- display: contents makes child panels become grid items of the parent grid -->
+      <div
+        id="wm-container-plain"
+        style="display: contents;"
+      />
     </div>
 
     <FixedBanner :footer="true" />
@@ -130,27 +138,6 @@ export default {
     }
   }
 
-  .wm {
-    grid-area: wm;
-    overflow-y: hidden;
-    z-index: z-index('windowsManager');
-    position: relative;
-  }
-
-  .wm-vr {
-    grid-area: wm-vr;
-    overflow-y: hidden;
-    z-index: z-index('windowsManager');
-    position: relative;
-  }
-
-  .wm-vl {
-    grid-area: wm-vl;
-    overflow-y: hidden;
-    z-index: z-index('windowsManager');
-    position: relative;
-  }
-
   MAIN {
     grid-area: main;
     overflow: auto;

package/composables/useLabeledFormElement.ts

@@ -6,7 +6,7 @@ import { _VIEW, _EDIT } from '@shell/config/query-params';
 
 interface LabeledFormElementProps {
   mode: string;
-  value: string | number | Record<string, any>
+  value: string | number | Record<string, any> | null
   required: boolean;
   disabled: boolean;
   rules: Array<any>;
@@ -18,6 +18,8 @@ interface UseLabeledFormElement {
   focused: Ref<boolean>;
   blurred: Ref<number | null>;
   requiredField: ComputedRef<any>;
+  empty: ComputedRef<boolean>;
+  isView: ComputedRef<boolean>;
   isDisabled: ComputedRef<any>;
   validationMessage: ComputedRef<any>;
   onFocusLabeled: () => void;
@@ -46,7 +48,7 @@ export const labeledFormElementProps = {
     default: null
   },
   value: {
-    type:    [String, Number, Object],
+    type:    [String, Number, Object, null],
     default: ''
   },
   mode: {
@@ -82,6 +84,10 @@ export const useLabeledFormElement = (props: LabeledFormElementProps, emit: Emit
     return props.required || props.rules?.some((rule: any) => rule?.name === 'required');
   });
 
+  const empty = computed(() => {
+    return !!`${ props.value }`;
+  });
+
   const isView = computed(() => {
     return props.mode === _VIEW;
   });
@@ -143,6 +149,8 @@ export const useLabeledFormElement = (props: LabeledFormElementProps, emit: Emit
     raised,
     focused,
     blurred,
+    empty,
+    isView,
     onFocusLabeled,
     onBlurLabeled,
     isDisabled,

package/composables/useLabeledSelect.ts

@@ -0,0 +1,60 @@
+import { computed, ComputedRef, Ref, nextTick } from 'vue';
+import { getWidth, setWidth } from '@shell/utils/width';
+
+interface LabeledSelectProps {
+  options?: Array<any>;
+  searchable?: boolean;
+  filterable?: boolean;
+}
+
+interface UseLabeledSelect {
+  isSearchable: ComputedRef<boolean>;
+  isFilterable: ComputedRef<boolean>;
+  resizeHandler: (selectRef: Ref<HTMLElement | null>) => void;
+}
+
+export const useLabeledSelect = (props: LabeledSelectProps, canPaginate?: ComputedRef<boolean>): UseLabeledSelect => {
+  const isSearchable = computed(() => {
+    if (canPaginate?.value) {
+      return true;
+    }
+    const options = props.options || [];
+
+    if (props.searchable || options.length >= 10) {
+      return true;
+    }
+
+    return false;
+  });
+
+  const isFilterable = computed(() => {
+    if (canPaginate?.value) {
+      return false;
+    }
+
+    return props.filterable ?? true;
+  });
+
+  const resizeHandler = (selectRef: Ref<HTMLElement | null>) => {
+    // since the DD is positioned there is no way to 'inherit' the size of the input, this calcs the size of the parent and set the dd width if it is smaller. If not let it grow with the regular styles
+    nextTick(() => {
+      if (!selectRef.value) {
+        return;
+      }
+
+      const DD = selectRef.value.querySelector('ul.vs__dropdown-menu');
+      const selectWidth = getWidth(selectRef.value) || 0;
+      const dropWidth = getWidth(DD as Element) || 0;
+
+      if (dropWidth < selectWidth) {
+        setWidth(DD as Element, selectWidth);
+      }
+    });
+  };
+
+  return {
+    isSearchable,
+    isFilterable,
+    resizeHandler
+  };
+};

package/composables/useUserRetentionValidation.ts

@@ -1,4 +1,4 @@
-import { Ref, ComputedRef, ref, computed } from 'vue';
+import { Ref } from 'vue';
 import { useStore } from 'vuex';
 
 import { SETTING } from '@shell/config/settings';
@@ -10,24 +10,12 @@ import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 dayjs.extend(duration);
 
-type SettingValidation = 'user-retention-cron' | 'disable-inactive-user-after' | 'delete-inactive-user-after';
-
-type Validation = {
-  [SETTING.DISABLE_INACTIVE_USER_AFTER]?: boolean;
-  [SETTING.DELETE_INACTIVE_USER_AFTER]?: boolean;
-  [SETTING.USER_RETENTION_CRON]?: boolean;
-}
-
 interface UseUserRetentionValidation {
   validateUserRetentionCron: (cronSetting: string | null) => string | undefined;
   validateDisableInactiveUserAfterDuration: (duration: string) => string | undefined;
   validateDeleteInactiveUserAfterDuration: (duration: string) => string | undefined;
   validateDeleteInactiveUserAfter: (duration: string) => string | undefined;
   validateDurationAgainstAuthUserSession: (duration: string) => string | undefined;
-  setValidation: (formField: SettingValidation, isValid: boolean) => void;
-  removeValidation : (setting: SettingValidation) => void;
-  addValidation: (setting: SettingValidation) => void;
-  isFormValid: ComputedRef<boolean>;
 }
 
 class ExpectedValidationError extends Error {
@@ -42,38 +30,6 @@ export const useUserRetentionValidation = (disableAfterPeriod: Ref<boolean>, del
   const store = useStore();
   const { t } = useI18n(store);
 
-  /**
-   * Tracks the validation state for user retention fields
-   */
-  const validation = ref<Validation>({
-    [SETTING.DISABLE_INACTIVE_USER_AFTER]: true,
-    [SETTING.DELETE_INACTIVE_USER_AFTER]:  true,
-    [SETTING.USER_RETENTION_CRON]:         true,
-  });
-
-  const isFormValid = computed(() => {
-    const validations = validation.value;
-
-    return !Object.values(validations).includes(false);
-  });
-
-  const setValidation = (formField: SettingValidation, isValid: boolean) => {
-    validation.value[formField] = isValid;
-  };
-
-  const removeValidation = (setting: SettingValidation) => {
-    const { [setting]: _, ...rest } = validation.value;
-
-    validation.value = rest;
-  };
-
-  const addValidation = (setting: SettingValidation) => {
-    validation.value = {
-      ...validation.value,
-      [setting]: true,
-    };
-  };
-
   /**
    * Takes a duration string and produces a dayjs duration object.
    * @param duration Duration string in {h|m|s} (e.g. 6h3m2s)
@@ -193,9 +149,5 @@ export const useUserRetentionValidation = (disableAfterPeriod: Ref<boolean>, del
     validateDeleteInactiveUserAfterDuration,
     validateDeleteInactiveUserAfter,
     validateDurationAgainstAuthUserSession,
-    setValidation,
-    removeValidation,
-    addValidation,
-    isFormValid,
   };
 };

package/config/cookies.js

@@ -1,4 +1,3 @@
 export const CSRF = 'CSRF';
 export const USERNAME = 'R_USERNAME';
 export const LOCALE = 'R_LOCALE';
-export const REDIRECTED = 'R_REDIRECTED';

package/config/labels-annotations.js

@@ -87,6 +87,7 @@ export const CATALOG = {
 
   PRIME_ONLY:   'catalog.cattle.io/prime-only',
   EXPERIMENTAL: 'catalog.cattle.io/experimental',
+  DEPRECATED:   'catalog.cattle.io/deprecated',
   NAMESPACE:    'catalog.cattle.io/namespace',
   RELEASE_NAME: 'catalog.cattle.io/release-name',
   FEATURED:     'catalog.cattle.io/featured',

package/config/pagination-table-headers.js

@@ -4,7 +4,8 @@ import {
   EVENT_LAST_SEEN_TIME,
   EVENT_TYPE,
   SECRET_ORIGIN,
-  EVENT_FIRST_SEEN_TIME
+  EVENT_FIRST_SEEN_TIME,
+  WORKLOAD_HEALTH_SCALE
 } from '@shell/config/table-headers';
 
 // This file contains table headers
@@ -95,3 +96,9 @@ export const STEVE_SECRET_ORIGIN = {
   // So we sort by the 'UI_PROJECT_SECRET_COPY' annotation (management.cattle.io/project-scoped-secret-copy) which at least groups the copies.
   sort: `metadata.annotations[${ UI_PROJECT_SECRET_COPY }]:desc`,
 };
+
+export const STEVE_WORKLOAD_HEALTH_SCALE = {
+  ...WORKLOAD_HEALTH_SCALE,
+  sort:   false,
+  search: false,
+};

package/config/product/apps.js

@@ -29,7 +29,8 @@ export function init(store) {
     weight:              97,
     ifHaveGroup:         'catalog.cattle.io',
     icon:                'marketplace',
-    showNamespaceFilter: true
+    showNamespaceFilter: true,
+    extendable:          true,
   });
 
   virtualType({

package/config/product/auth.js

@@ -34,6 +34,7 @@ export function init(store) {
     removable:           false,
     showClusterSwitcher: false,
     category:            'configuration',
+    extendable:          true,
   });
 
   virtualType({

package/config/product/backup.js

@@ -16,6 +16,7 @@ export function init(store) {
   product({
     ifHaveGroup: /^(.*\.)*resources\.cattle\.io$/,
     icon:        'backup-restore',
+    extendable:  true,
   });
 
   weightType(BACKUP_RESTORE.BACKUP, 99, true);

package/config/product/compliance.js

@@ -14,7 +14,7 @@ export function init(store) {
     headers
   } = DSL(store, NAME);
 
-  product({ ifHaveGroup: /^(.*\.)*compliance\.cattle\.io$/ });
+  product({ ifHaveGroup: /^(.*\.)*compliance\.cattle\.io$/, extendable: true });
 
   weightType(COMPLIANCE.CLUSTER_SCAN, 3, true);
   weightType(COMPLIANCE.CLUSTER_SCAN_PROFILE, 2, true);

package/config/product/explorer.js

@@ -27,13 +27,15 @@ import {
 
 import { DSL } from '@shell/store/type-map';
 import {
-  STEVE_AGE_COL, STEVE_EVENT_FIRST_SEEN, STEVE_EVENT_LAST_SEEN, STEVE_EVENT_OBJECT, STEVE_EVENT_TYPE, STEVE_LIST_GROUPS, STEVE_NAMESPACE_COL, STEVE_NAME_COL, STEVE_STATE_COL
+  STEVE_AGE_COL, STEVE_EVENT_FIRST_SEEN, STEVE_EVENT_LAST_SEEN, STEVE_EVENT_OBJECT, STEVE_EVENT_TYPE, STEVE_LIST_GROUPS, STEVE_NAMESPACE_COL, STEVE_NAME_COL, STEVE_STATE_COL,
+  STEVE_WORKLOAD_HEALTH_SCALE
 } from '@shell/config/pagination-table-headers';
 
 import { COLUMN_BREAKPOINTS } from '@shell/types/store/type-map';
 import { STEVE_CACHE } from '@shell/store/features';
 import { configureConditionalDepaginate } from '@shell/store/type-map.utils';
 import { CATTLE_PUBLIC_ENDPOINTS, STORAGE } from '@shell/config/labels-annotations';
+import { POD_LAST_RESTART_FIELD as POD_RESTARTS_LAST_FIELD, POD_RESTART_FIELD as POD_RESTARTS_COUNT_FIELD } from '@shell/types/resources/pod';
 
 export const NAME = 'explorer';
 
@@ -58,6 +60,7 @@ export function init(store) {
     weight:              3,
     showNamespaceFilter: true,
     icon:                'compass',
+    extendable:          true,
     typeStoreMap:        {
       [MANAGEMENT.PROJECT]:                       'management',
       [MANAGEMENT.CLUSTER_ROLE_TEMPLATE_BINDING]: 'management',
@@ -386,11 +389,11 @@ export function init(store) {
   headers(WORKLOAD, [STATE, NAME_COL, NAMESPACE_COL, TYPE, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, POD_RESTARTS, AGE, WORKLOAD_HEALTH_SCALE]);
   headers(WORKLOAD_TYPES.DEPLOYMENT,
     [STATE, NAME_COL, NAMESPACE_COL, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, 'Ready', 'Up-to-date', 'Available', POD_RESTARTS, AGE, WORKLOAD_HEALTH_SCALE],
-    [STEVE_STATE_COL, STEVE_NAME_COL, STEVE_NAMESPACE_COL, createSteveWorkloadImageCol(6), STEVE_WORKLOAD_ENDPOINTS, 'Ready', 'Up-to-date', 'Available', STEVE_AGE_COL],
+    [STEVE_STATE_COL, STEVE_NAME_COL, STEVE_NAMESPACE_COL, createSteveWorkloadImageCol(6), STEVE_WORKLOAD_ENDPOINTS, 'Ready', 'Up-to-date', 'Available', STEVE_AGE_COL, STEVE_WORKLOAD_HEALTH_SCALE],
   );
   headers(WORKLOAD_TYPES.DAEMON_SET,
     [STATE, NAME_COL, NAMESPACE_COL, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, 'Ready', 'Current', 'Desired', POD_RESTARTS, AGE, WORKLOAD_HEALTH_SCALE],
-    [STEVE_STATE_COL, STEVE_NAME_COL, STEVE_NAMESPACE_COL, createSteveWorkloadImageCol(9), STEVE_WORKLOAD_ENDPOINTS, 'Ready', 'Current', 'Desired', STEVE_AGE_COL]
+    [STEVE_STATE_COL, STEVE_NAME_COL, STEVE_NAMESPACE_COL, createSteveWorkloadImageCol(9), STEVE_WORKLOAD_ENDPOINTS, 'Ready', 'Current', 'Desired', STEVE_AGE_COL, STEVE_WORKLOAD_HEALTH_SCALE]
   );
   headers(WORKLOAD_TYPES.REPLICA_SET,
     [STATE, NAME_COL, NAMESPACE_COL, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, 'Ready', 'Current', 'Desired', POD_RESTARTS, AGE, WORKLOAD_HEALTH_SCALE],
@@ -398,7 +401,7 @@ export function init(store) {
   );
   headers(WORKLOAD_TYPES.STATEFUL_SET,
     [STATE, NAME_COL, NAMESPACE_COL, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, 'Ready', POD_RESTARTS, AGE, WORKLOAD_HEALTH_SCALE],
-    [STEVE_STATE_COL, STEVE_NAME_COL, STEVE_NAMESPACE_COL, createSteveWorkloadImageCol(4), STEVE_WORKLOAD_ENDPOINTS, 'Ready', STEVE_AGE_COL],
+    [STEVE_STATE_COL, STEVE_NAME_COL, STEVE_NAMESPACE_COL, createSteveWorkloadImageCol(4), STEVE_WORKLOAD_ENDPOINTS, 'Ready', STEVE_AGE_COL, STEVE_WORKLOAD_HEALTH_SCALE],
   );
   headers(WORKLOAD_TYPES.JOB,
     [STATE, NAME_COL, NAMESPACE_COL, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, 'Completions', DURATION, POD_RESTARTS, AGE, WORKLOAD_HEALTH_SCALE],
@@ -408,7 +411,7 @@ export function init(store) {
       sort:      'metadata.fields.3',
       search:    'metadata.fields.3',
       formatter: undefined, // Now that sort/search is remote we're not doing weird things with start time (see `duration` in model)
-    }, STEVE_AGE_COL],
+    }, STEVE_AGE_COL, STEVE_WORKLOAD_HEALTH_SCALE],
   );
   headers(WORKLOAD_TYPES.CRON_JOB,
     [STATE, NAME_COL, NAMESPACE_COL, WORKLOAD_IMAGES, WORKLOAD_ENDPOINTS, 'Schedule', 'Last Schedule', POD_RESTARTS, AGE, WORKLOAD_HEALTH_SCALE],
@@ -428,7 +431,23 @@ export function init(store) {
         ...POD_IMAGES,
         sort:   false,
         search: 'spec.containers.image'
-      }, 'Ready', 'Restarts', 'IP', {
+      },
+      'Ready',
+      {
+        name:     'pod-restart',
+        labelKey: 'tableHeaders.podRestarts',
+        search:   false,
+        sort:     [POD_RESTARTS_COUNT_FIELD, POD_RESTARTS_LAST_FIELD, 'metadata.name'],
+        value:    'restartsCount',
+      }, {
+        name:     'pod-last-restart',
+        labelKey: 'tableHeaders.podLastRestart',
+        value:    'restartsLaster',
+        search:   false,
+        sort:     [POD_RESTARTS_LAST_FIELD, POD_RESTARTS_COUNT_FIELD, 'metadata.name'],
+      },
+      'IP',
+      {
         ...NODE_COL,
         search: 'spec.nodeName'
       },

package/config/product/fleet.js

@@ -32,6 +32,7 @@ export function init(store) {
     removable:             false,
     showClusterSwitcher:   false,
     showWorkspaceSwitcher: true,
+    extendable:            true,
     to:                    {
       name:   'c-cluster-fleet',
       params: { cluster: BLANK_CLUSTER }

package/config/product/gatekeeper.js

@@ -21,6 +21,7 @@ export function init(store) {
   product({
     ifHaveGroup: /^(.*\.)?gatekeeper\.sh$/,
     icon:        'gatekeeper',
+    extendable:  true,
   });
 
   mapGroup(/^(.*\.)?gatekeeper\.sh$/, 'OPA Gatekeeper');

package/config/product/istio.js

@@ -18,6 +18,7 @@ export function init(store) {
     ifHave:              IF_HAVE.NOT_V1_ISTIO,
     icon:                'istio',
     showNamespaceFilter: true,
+    extendable:          true,
   });
 
   virtualType({

package/config/product/logging.js

@@ -21,6 +21,7 @@ export function init(store) {
     icon:                'logging',
     showNamespaceFilter: true,
     weight:              89,
+    extendable:          true,
   });
 
   basicType([

package/config/product/longhorn.js

@@ -20,7 +20,8 @@ export function init(store) {
 
   product({
     ifHaveGroup: 'longhorn.io',
-    icon:        'longhorn'
+    icon:        'longhorn',
+    extendable:  true,
   });
 
   virtualType({

package/config/product/manager.js

@@ -38,6 +38,7 @@ export function init(store) {
     removable:           false,
     showClusterSwitcher: false,
     weight:              -1, // Place at the top
+    extendable:          true,
     to:                  {
       name:   'c-cluster-product-resource',
       params: {

package/config/product/monitoring.js

@@ -38,6 +38,7 @@ export function init(store) {
     icon:                'monitoring',
     showNamespaceFilter: true,
     weight:              90,
+    extendable:          true,
   });
 
   virtualType({

package/config/product/navlinks.js

@@ -10,6 +10,7 @@ export function init(store) {
   product({
     ifHaveType: UI.NAV_LINK,
     icon:       'external-link',
+    extendable: false,
   });
 
   headers(UI.NAV_LINK, [

package/config/product/neuvector.js

@@ -12,7 +12,8 @@ export function init(store) {
   product({
     ifHaveGroup: 'neuvector.com',
     ifHave:      IF_HAVE.NEUVECTOR_NAMESPACE,
-    icon:        'neuvector'
+    icon:        'neuvector',
+    extendable:  true,
   });
 
   virtualType({

package/config/product/settings.js

@@ -28,6 +28,7 @@ export function init(store) {
     showClusterSwitcher: false,
     category:            'configuration',
     weight:              100,
+    extendable:          true,
   });
 
   virtualType({

package/config/product/uiplugins.js

@@ -14,5 +14,6 @@ export function init(store) {
     showClusterSwitcher: false,
     category:            'configuration',
     weight:              50,
+    extendable:          false,
   });
 }

package/config/query-params.js

@@ -72,6 +72,7 @@ export const DEPRECATED = 'deprecated';
 export const HIDDEN = 'hidden';
 export const FROM_TOOLS = 'tools';
 export const FROM_CLUSTER = 'cluster';
+export const NEW_APP_INSTANCE = 'new-instance';
 export const HIDE_SIDE_NAV = 'hide-side-nav';
 
 // Cluster provisioning

package/config/router/routes.js

@@ -432,10 +432,6 @@ export default [
         path:      '/c/:cluster/monitoring/route-receiver/create',
         component: () => interopDefault(import('@shell/pages/c/_cluster/monitoring/route-receiver/create.vue')),
         name:      'c-cluster-monitoring-route-receiver-create'
-      }, {
-        path:      '/c/:cluster/explorer/tools/pages/:page?',
-        component: () => interopDefault(import('@shell/pages/c/_cluster/explorer/tools/pages/_page.vue')),
-        name:      'c-cluster-explorer-tools-pages-page'
       }, {
         path:      '/c/:cluster/auth/config/:id',
         component: () => interopDefault(import('@shell/pages/c/_cluster/auth/config/_id.vue')),
@@ -452,10 +448,6 @@ export default [
         path:      '/c/:cluster/manager/nodeDriver/:id',
         component: () => interopDefault(import('@shell/pages/c/_cluster/manager/drivers/nodeDriver/_id.vue')),
         name:      'c-cluster-manager-driver-nodedriver-id'
-      }, {
-        path:      '/c/:cluster/manager/pages/:page?',
-        component: () => interopDefault(import('@shell/pages/c/_cluster/manager/pages/_page.vue')),
-        name:      'c-cluster-manager-pages-page'
       }, {
         path:      '/c/:cluster/monitoring/alertmanagerconfig/:alertmanagerconfigid',
         component: () => interopDefault(import('@shell/pages/c/_cluster/monitoring/alertmanagerconfig/_alertmanagerconfigid/index.vue')),