@rancher/shell 3.0.4 → 3.0.5-rc.1

package/pages/auth/verify.vue

@@ -182,7 +182,10 @@ export default {
 </script>
 
 <template>
-  <main class="main-layout">
+  <main
+    class="main-layout"
+    :aria-label="t('layouts.verify')"
+  >
     <h1 class="text-center mt-50">
       <span v-if="testing">
         Testing Configuration&hellip;

package/pages/c/_cluster/apps/charts/chart.vue

@@ -69,7 +69,7 @@ export default {
         return {
           id:   m.name,
           text: m.name,
-          url:  `mailto:${ m.email }`
+          url:  m.email ? `mailto:${ m.email }` : m.url
         };
       });
     },

package/pages/diagnostic.vue

@@ -17,6 +17,7 @@ export default {
     const finalCounts = [];
     const promises = [];
     const topFifteenForResponseTime = [];
+    const schemaPromises = [];
 
     clusterForCounts.forEach((cluster, i) => {
       // Necessary to retrieve the proper display name of the cluster
@@ -31,9 +32,11 @@ export default {
         isTableVisible: !!(i === 0 && clusterForCounts.length === 1)
       });
       promises.push(this.$store.dispatch('management/request', { url: `/k8s/clusters/${ cluster.mgmt?.id }/v1/counts` }));
+      schemaPromises.push(this.$store.dispatch('management/request', { url: `/k8s/clusters/${ cluster.mgmt?.id }/v1/schemas?exclude=metadata.managedFields` }));
     });
 
     const countsPerCluster = await Promise.all(promises);
+    const schemasPerCluster = await Promise.all(schemaPromises);
 
     countsPerCluster.forEach((clusterCount, index) => {
       const counts = clusterCount.data?.[0]?.counts;
@@ -69,6 +72,14 @@ export default {
 
     this.topFifteenForResponseTime = topFifteenForResponseTime;
     this.finalCounts = finalCounts;
+
+    // Schemas
+    schemasPerCluster.forEach((schemas, index) => {
+      finalCounts[index].schemaCount = schemas?.data?.length || 0;
+      finalCounts[index].customSchemas = (schemas?.data?.filter((schema) => {
+        return schema.attributes?.group.includes('.') && !schema.attributes?.group.includes('.cattle.io') && !schema.attributes?.group.includes('.k8s.io');
+      }).map((schema) => schema.id) || []).sort();
+    });
   },
 
   data() {
@@ -148,7 +159,7 @@ export default {
         systemInformation: this.systemInformation,
         storeMapping:      this.parseStoreData(this.storeMapping),
         resourceCounts:    this.finalCounts,
-        responseTimes:     this.responseTimes
+        responseTimes:     this.responseTimes,
       };
 
       downloadFile(fileName, JSON.stringify(data), 'application/json')
@@ -352,6 +363,7 @@ export default {
                   <span>Cluster: <b>{{ cluster.name }}</b></span>
                   <span>Namespace: <b>{{ cluster.namespace }}</b></span>
                   <span>Total Resources: <b>{{ sumResourceCount(cluster.counts) }}</b></span>
+                  <span>Total Schemas: <b>{{ cluster.schemaCount }}</b></span>
                   <span>Nodes: <b>{{ nodeCount(cluster.counts) }}</b></span>
                   <i
                     class="icon"
@@ -365,6 +377,22 @@ export default {
             </tr>
           </thead>
           <tbody v-show="cluster.isTableVisible">
+            <tr>
+              <td colspan="3">
+                <div class="schema-title">
+                  Custom Schemas
+                </div>
+                <div class="custom-schemas">
+                  <div
+                    v-for="name in cluster.customSchemas"
+                    :key="name"
+                    class="schema-name"
+                  >
+                    {{ name }}
+                  </div>
+                </div>
+              </td>
+            </tr>
             <tr>
               <th>
                 Resource
@@ -445,6 +473,23 @@ table {
     padding: 8px 5px;
     min-width: 150px;
     text-align: left;
+
+    .schema-title {
+      font-weight: bold;
+      margin-bottom: 4px;
+    }
+
+    .custom-schemas {
+      display: flex;
+      flex-wrap: wrap;
+
+      > .schema-name {
+        margin-right: 5px;
+        margin-bottom: 2px;
+        border: 1px solid var(--border);
+        padding: 2px 5px;
+      }
+    }
   }
 
   th {
@@ -511,7 +556,7 @@ table {
 .resources-count-container {
   .cluster-row {
     display: grid;
-    grid-template-columns: repeat(4, 1fr) 20px;
+    grid-template-columns: repeat(5, 1fr) 20px;
     grid-template-rows: 1fr;
     align-content: center;
     font-weight: normal;

package/pages/fail-whale.vue

@@ -70,12 +70,15 @@ export default {
         :simple="true"
       />
 
-      <main class="main-layout">
+      <main
+        class="main-layout"
+        aria-label="Fail whale layout"
+      >
         <div
           v-if="error"
           class="outlet"
         >
-          <main class="main-layout error">
+          <div class="main-layout error">
             <div class="text-center">
               <BrandImage
                 file-name="error-desert-landscape.svg"
@@ -115,7 +118,7 @@ export default {
                 </a>
               </p>
             </div>
-          </main>
+          </div>
         </div>
       </main>
     </div>

package/pages/home.vue

@@ -49,6 +49,21 @@ export default defineComponent({
   mixins: [PageHeaderActions],
 
   data() {
+    const options = this.$store.getters[`type-map/optionsFor`](CAPI.RANCHER_CLUSTER)?.custom || {};
+    const params = {
+      product:  MANAGER,
+      cluster:  BLANK_CLUSTER,
+      resource: CAPI.RANCHER_CLUSTER
+    };
+    const defaultCreateLocation = {
+      name: 'c-cluster-product-resource-create',
+      params,
+    };
+    const defaultImportLocation = {
+      ...defaultCreateLocation,
+      query: { [MODE]: _IMPORT }
+    };
+
     return {
       HIDE_HOME_PAGE_CARDS,
       fullVersion: getVersionInfo(this.$store).fullVersion,
@@ -87,24 +102,9 @@ export default defineComponent({
         },
       },
 
-      createLocation: {
-        name:   'c-cluster-product-resource-create',
-        params: {
-          product:  MANAGER,
-          cluster:  BLANK_CLUSTER,
-          resource: CAPI.RANCHER_CLUSTER
-        },
-      },
+      createLocation: options.createLocation ? options.createLocation(params) : defaultCreateLocation,
 
-      importLocation: {
-        name:   'c-cluster-product-resource-create',
-        params: {
-          product:  MANAGER,
-          cluster:  BLANK_CLUSTER,
-          resource: CAPI.RANCHER_CLUSTER
-        },
-        query: { [MODE]: _IMPORT }
-      },
+      importLocation: options.importLocation ? options.importLocation(params) : defaultImportLocation,
 
       headers: [
         STATE,
@@ -512,7 +512,7 @@ export default defineComponent({
       :show-child="false"
       :breadcrumb="false"
     >
-      {{ vendor }}
+      {{ `${vendor} - ${t('landing.homepage')}` }}
     </TabTitle>
     <BannerGraphic
       :small="true"
@@ -805,6 +805,12 @@ export default defineComponent({
     .cluster-name {
       display: flex;
       align-items: center;
+
+      // Ensure long cluster names truncate with ellipsis
+      > A {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
 
     .cluster-description {

package/pages/support/index.vue

@@ -118,7 +118,10 @@ export default {
 </script>
 <template>
   <div>
-    <BannerGraphic :title="t(title, {}, true)" />
+    <BannerGraphic
+      :title="t(title, {}, true)"
+      :alt="t('support.bannerImage')"
+    />
 
     <IndentedPanel>
       <div class="content mt-20">

package/rancher-components/Form/Radio/RadioGroup.vue

@@ -199,33 +199,35 @@ export default defineComponent({
 </script>
 
 <template>
-  <div>
+  <fieldset>
     <!-- Label -->
     <div
       v-if="label || labelKey || tooltip || tooltipKey || $slots.label"
       class="radio-group label"
     >
-      <slot name="label">
-        <h3>
-          <t
-            v-if="labelKey"
-            :k="labelKey"
-          />
-          <template v-else-if="label">
-            {{ label }}
-          </template>
-          <i
-            v-if="tooltipKey"
-            v-clean-tooltip="t(tooltipKey)"
-            class="icon icon-info icon-lg"
-          />
-          <i
-            v-else-if="tooltip"
-            v-clean-tooltip="tooltip"
-            class="icon icon-info icon-lg"
-          />
-        </h3>
-      </slot>
+      <legend>
+        <slot name="label">
+          <h3>
+            <t
+              v-if="labelKey"
+              :k="labelKey"
+            />
+            <template v-else-if="label">
+              {{ label }}
+            </template>
+            <i
+              v-if="tooltipKey"
+              v-clean-tooltip="t(tooltipKey)"
+              class="icon icon-info icon-lg"
+            />
+            <i
+              v-else-if="tooltip"
+              v-clean-tooltip="tooltip"
+              class="icon icon-info icon-lg"
+            />
+          </h3>
+        </slot>
+      </legend>
     </div>
 
     <!-- Group -->
@@ -266,7 +268,7 @@ export default defineComponent({
         </slot>
       </div>
     </div>
-  </div>
+  </fieldset>
 </template>
 
 <style lang='scss'>

package/rancher-components/RcDropdown/RcDropdown.vue

@@ -49,7 +49,7 @@ useClickOutside(dropdownTarget, () => showMenu(false));
 
 const applyShow = () => {
   registerDropdownCollection(dropdownTarget.value);
-  setFocus();
+  setFocus('down');
 };
 
 </script>
@@ -78,7 +78,8 @@ const applyShow = () => {
         dropdown-menu-collection
         :aria-label="ariaLabel || 'Dropdown Menu'"
         @keydown="handleKeydown"
-        @keydown.down="setFocus()"
+        @keydown.down="setFocus('down')"
+        @keydown.up="setFocus('up')"
       >
         <slot name="dropdownCollection">
           <!--Empty slot content-->

package/rancher-components/RcDropdown/RcDropdownTrigger.vue

@@ -35,8 +35,18 @@ defineExpose({ focus });
     @keydown.enter.space="handleKeydown"
     @click="showMenu(true)"
   >
+    <template #before>
+      <slot name="before">
+        <!-- Empty Content -->
+      </slot>
+    </template>
     <slot name="default">
       <!--Empty slot content-->
     </slot>
+    <template #after>
+      <slot name="after">
+        <!-- Empty Content -->
+      </slot>
+    </template>
   </RcButton>
 </template>

package/rancher-components/RcDropdown/useDropdownCollection.ts

@@ -10,6 +10,7 @@ export const useDropdownCollection = () => {
   const dropdownItems = ref<Element[]>([]);
   const dropdownContainer = ref<HTMLElement | null>(null);
   const firstDropdownItem = ref<HTMLElement | null>(null);
+  const lastDropdownItem = ref<HTMLElement | null>(null);
 
   /**
    * Registers the dropdown container and initializes dropdown items.
@@ -22,6 +23,12 @@ export const useDropdownCollection = () => {
       if (dropdownItems.value[0] instanceof HTMLElement) {
         firstDropdownItem.value = dropdownItems.value[0];
       }
+
+      const lastItem = dropdownItems.value[dropdownItems.value.length - 1];
+
+      if (lastItem instanceof HTMLElement) {
+        lastDropdownItem.value = lastItem;
+      }
     }
   };
 
@@ -40,6 +47,7 @@ export const useDropdownCollection = () => {
   return {
     dropdownItems,
     firstDropdownItem,
+    lastDropdownItem,
     dropdownContainer,
     registerDropdownCollection,
   };

package/rancher-components/RcDropdown/useDropdownContext.ts

@@ -17,6 +17,7 @@ export const useDropdownContext = (emit: typeof rcDropdownEmits) => {
   const {
     dropdownItems,
     firstDropdownItem,
+    lastDropdownItem,
     dropdownContainer,
     registerDropdownCollection,
   } = useDropdownCollection();
@@ -70,7 +71,7 @@ export const useDropdownContext = (emit: typeof rcDropdownEmits) => {
   /**
    * Sets focus to the first dropdown item if a keydown event has occurred.
    */
-  const setFocus = () => {
+  const setFocus = (direction: 'down' | 'up') => {
     nextTick(() => {
       if (!didKeydown.value) {
         dropdownContainer.value?.focus();
@@ -78,7 +79,12 @@ export const useDropdownContext = (emit: typeof rcDropdownEmits) => {
         return;
       }
 
-      firstDropdownItem.value?.focus();
+      if (direction === 'down') {
+        firstDropdownItem.value?.focus();
+      } else if (direction === 'up') {
+        lastDropdownItem.value?.focus();
+      }
+
       didKeydown.value = false;
     });
   };
@@ -95,7 +101,7 @@ export const useDropdownContext = (emit: typeof rcDropdownEmits) => {
       dropdownItems,
       close:             () => returnFocus(),
       focusFirstElement: () => {
-        setFocus();
+        setFocus('down');
       },
       handleKeydown,
     });

package/scripts/extension/publish

@@ -1,4 +1,5 @@
 #!/usr/bin/env bash
+set -eo pipefail
 
 SCRIPT_DIR="$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
 BASE_DIR="$(pwd)"

package/server/har-file.js

@@ -1,11 +1,15 @@
 const fs = require('fs');
 const path = require('path');
+const querystring = require('querystring');
 
 // When we receive a request to this URL we will reset the session to replay again from the HAR file
 // This allows the user to refresh the browser and replay the HAR file again
 const RESET_URL = '/api/v1/namespaces/cattle-ui-plugin-system/services/http:ui-plugin-operator:80/proxy/index.json';
 
-const EXCLUDES_QS = '?exclude=metadata.managedFields';
+const EXCLUDE_QS = 'exclude';
+
+const LEGACY_UI_PLUGIN_INDEX = '/api/v1/namespaces/cattle-ui-plugin-system/services/http:ui-plugin-operator:80/proxy/index.json';
+const NEW_UI_PLUGIN_INDEX = '/v1/uiplugins';
 
 /**
  * Load the network requests/responses from the har file
@@ -113,10 +117,28 @@ function harProxy(responses, folder) {
     const url = decodeURIComponent(req.originalUrl);
     let playback = session[req.originalUrl];
 
+    // Handle case where HAR file was created with older UI Extension API that used the operator
+    if (!playback && req.originalUrl.includes(NEW_UI_PLUGIN_INDEX)) {
+      // Look for new URl for UI plugins
+      playback = session[LEGACY_UI_PLUGIN_INDEX];
+    }
+
     // If it did not match, try without the metadata excludes query string that was adding in 2.8.0
     // This might allow HAR captures with Rancher < 2.8.0 to be replayed on >= 2.8.0
-    if (!playback && req.originalUrl.endsWith(EXCLUDES_QS)) {
-      playback = session[req.originalUrl.slice(0, -EXCLUDES_QS.length)];
+    if (!playback && req.originalUrl.includes('?')) {
+      const urlParts = req.originalUrl.split('?');
+
+      if (urlParts.length > 1) {
+        const queryString = urlParts[1];
+        const qs = querystring.parse(queryString);
+
+        delete qs[EXCLUDE_QS];
+
+        const newQs = querystring.stringify(qs);
+        const newUrl = newQs.length ? `${ urlParts[0] }?${ newQs }` : urlParts[0];
+
+        playback = session[newUrl];
+      }
     }
 
     if (playback && playback[req.method] && playback[req.method].length) {

package/store/features.js

@@ -1,4 +1,5 @@
 import { MANAGEMENT } from '@shell/config/types';
+import { SCHEDULING_CUSTOMIZATION as SCHEDULING_CUSTOMIZATION_FEATURE } from '@shell/config/features';
 
 const definitions = {};
 
@@ -36,7 +37,7 @@ export const FLEET_WORKSPACE_BACK = create('provisioningv2-fleet-workspace-back-
 export const STEVE_CACHE = create('ui-sql-cache', false);
 export const UIEXTENSION = create('uiextension', true);
 export const PROVISIONING_PRE_BOOTSTRAP = create('provisioningprebootstrap', false);
-export const SCHEDULING_CUSTOMIZATION = create('cluster-agent-scheduling-customization', false);
+export const SCHEDULING_CUSTOMIZATION = create(SCHEDULING_CUSTOMIZATION_FEATURE, false);
 
 // Not currently used.. no point defining ones we don't use
 // export const EMBEDDED_CLUSTER_API = create('embedded-cluster-api', true);

package/store/type-map.js

@@ -107,6 +107,7 @@
 //                               graphConfig: undefined   -- Use this to pass along the graph configuration
 //                               notFilterNamespace:  undefined -- Define namespaces that do not need to be filtered
 //                               localOnly: False -- Hide this type from the nav/search bar on downstream clusters
+//                               custom: any - Custom options for a given type
 //                           }
 // )
 // ignoreGroup(group):        Never show group or any types in it
@@ -524,6 +525,7 @@ export const getters = {
       depaginate:             false,
       customRoute:            undefined,
       resourceEditMasthead:   true,
+      custom:                 {},
     };
 
     return (schemaOrType, pagination) => {
@@ -1729,6 +1731,8 @@ export const mutations = {
     let obj = { ...options, match };
 
     if ( idx >= 0 ) {
+      // Merge the custom data object - multiple configures will update existing rather than overwrite
+      obj.custom = Object.assign(state.typeOptions[idx].custom || {}, obj.custom || {});
       obj = Object.assign(state.typeOptions[idx], obj);
       state.typeOptions.splice(idx, 1, obj);
     } else {

package/types/shell/index.d.ts

@@ -2475,7 +2475,7 @@ export default class Namespace {
     get isObscure(): any;
     get projectId(): any;
     get project(): any;
-    get groupByLabel(): any;
+    get groupById(): any;
     get projectNameSort(): any;
     get istioInstalled(): boolean;
     get injectionEnabled(): boolean;
@@ -3498,6 +3498,13 @@ export function abbreviateClusterName(input: string): string;
 export function labelForAddon(store: any, name: any, configuration?: boolean): any;
 export function filterOutDeprecatedPatchVersions(allVersions: any, currentVersion: any): any;
 export function getAllOptionsAfterCurrentVersion(store: any, versions: any, currentVersion: any, defaultVersion: any): any;
+export function initSchedulingCustomization(value: any, features: any, store: any, mode: any): Promise<{
+    clusterAgentDefaultPC: any;
+    clusterAgentDefaultPDB: any;
+    schedulingCustomizationFeatureEnabled: any;
+    schedulingCustomizationOriginallyEnabled: boolean;
+    errors: any[];
+}>;
 }
 
 // @shell/utils/color

package/utils/cluster.js

@@ -6,6 +6,10 @@ import { SETTING } from '@shell/config/settings';
 import { PaginationFilterField, PaginationParamFilter } from '@shell/types/store/pagination.types';
 import { compare, sortable } from '@shell/utils/version';
 import { sortBy } from '@shell/utils/sort';
+import { SCHEDULING_CUSTOMIZATION } from '@shell/store/features';
+import { _CREATE, _EDIT } from '@shell/config/query-params';
+import isEmpty from 'lodash/isEmpty';
+import { set } from '@shell/utils/object';
 
 /**
  * Combination of paginationFilterHiddenLocalCluster and paginationFilterOnlyKubernetesClusters
@@ -296,3 +300,34 @@ export function getAllOptionsAfterCurrentVersion(store, versions, currentVersion
 
   return sortedWithDeprecatedLabel;
 }
+
+export async function initSchedulingCustomization(value, features, store, mode) {
+  const schedulingCustomizationFeatureEnabled = features(SCHEDULING_CUSTOMIZATION);
+  let clusterAgentDefaultPC = null;
+  let clusterAgentDefaultPDB = null;
+  let schedulingCustomizationOriginallyEnabled = false;
+  const errors = [];
+
+  try {
+    clusterAgentDefaultPC = JSON.parse((await store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.CLUSTER_AGENT_DEFAULT_PRIORITY_CLASS })).value) || null;
+  } catch (e) {
+    errors.push(e);
+  }
+  try {
+    clusterAgentDefaultPDB = JSON.parse((await store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.CLUSTER_AGENT_DEFAULT_POD_DISTRIBUTION_BUDGET })).value) || null;
+  } catch (e) {
+    errors.push(e);
+  }
+
+  if (schedulingCustomizationFeatureEnabled && mode === _CREATE && isEmpty(value?.clusterAgentDeploymentCustomization?.schedulingCustomization)) {
+    set(value, 'clusterAgentDeploymentCustomization.schedulingCustomization', { priorityClass: clusterAgentDefaultPC, podDisruptionBudget: clusterAgentDefaultPDB });
+  }
+
+  if (mode === _EDIT && !!value?.clusterAgentDeploymentCustomization?.schedulingCustomization) {
+    schedulingCustomizationOriginallyEnabled = true;
+  }
+
+  return {
+    clusterAgentDefaultPC, clusterAgentDefaultPDB, schedulingCustomizationFeatureEnabled, schedulingCustomizationOriginallyEnabled, errors
+  };
+}

package/utils/validators/machine-pool.ts

@@ -0,0 +1,20 @@
+const FIELDS = {
+  NAME:     'pool.name',
+  QUANTITY: 'pool.quantity'
+};
+
+const RULESETS = [
+  {
+    path:  FIELDS.QUANTITY,
+    rules: ['requiredInt', 'isPositive'],
+  },
+  {
+    path:  FIELDS.NAME,
+    rules: ['required'],
+  }
+];
+
+export const MACHINE_POOL_VALIDATION = {
+  FIELDS,
+  RULESETS
+};

package/components/formatter/ExtensionCache.vue

@@ -1,74 +0,0 @@
-<script>
-import { BadgeState } from '@components/BadgeState';
-import { stateDisplay } from '@shell/plugins/dashboard-store/resource-class';
-
-export default {
-  props: {
-    value: {
-      type:    String,
-      default: ''
-    }
-  },
-
-  components: { BadgeState },
-
-  data() {
-    const STATES = {
-      cached: {
-        color: 'info', icon: 'dot-open', label: 'Cached', compoundIcon: 'checkmark'
-      },
-      pending: {
-        color: 'warning', icon: 'tag', label: 'In Progress', compoundIcon: 'info'
-      },
-      disabled: {
-        color: 'error', icon: 'dot-half', label: 'Cache Disabled', compoundIcon: 'info'
-      },
-    };
-
-    return {
-      STATES,
-      stateDisplay:    '',
-      stateBackground: ''
-    };
-  },
-
-  watch: {
-    value: {
-      handler() {
-        const out = this.value || 'pending';
-        const color = this.colorForState(out);
-
-        this.stateDisplay = stateDisplay(out);
-        this.stateBackground = color.replace('text-', 'bg-');
-      },
-      immediate: true
-    }
-  },
-
-  methods: {
-    colorForState(state) {
-      const key = (state).toLowerCase();
-      let color;
-
-      if ( this.STATES[key] && this.STATES[key].color ) {
-        color = this.STATES[key].color;
-      }
-
-      if ( !color ) {
-        color = 'info';
-      }
-
-      return `text-${ color }`;
-    }
-  }
-};
-</script>
-
-<template>
-  <div>
-    <BadgeState
-      :color="stateBackground"
-      :label="stateDisplay"
-    />
-  </div>
-</template>