@rancher/shell 0.3.24 → 0.3.25

package/assets/styles/themes/_light.scss

@@ -320,7 +320,7 @@ BODY, .theme-light {
   --header-height              : 55px;
   --header-border              : #{$medium};
   --header-border-size         : 1px;
-  --nav-width                  : 300px;
+  --nav-width                  : 250px;
   --nav-bg                     : #{$lightest};
   --nav-active                 : #{$light};
   --nav-hover                  : #{$medium};

package/assets/translations/en-us.yaml

@@ -760,7 +760,7 @@ backupRestoreOperator:
       warning: 'This {type} does not have its reclaim policy set to "Retain".  Your backups may be lost if the volume is changed or becomes unbound.'
   encryption: Encryption
   encryptionConfigName:
-    backuptip: 'Any secret in the <code>cattle-resource-system</code> namespace that has an <code>encryption-provider-config.yaml</code> key. <br/>The contents of this file are necessary to perform a restore from this backup, and are not stored by Rancher Backup.'
+    backuptip: 'Any secret in the <code>cattle-resources-system</code> namespace that has an <code>encryption-provider-config.yaml</code> key. <br/>The contents of this file are necessary to perform a restore from this backup, and are not stored by Rancher Backup.'
     label: Encryption Config Secret
     options:
       none: Store the contents of the backup unencrypted
@@ -1137,6 +1137,7 @@ cluster:
     nodeRole:
       label: Node Role
       detail: Choose what roles the node will have in the cluster.  The cluster needs to have at least one node with each role.
+      warning: The cluster needs to have at least one node with each role to be usable.
     advanced:
       label: Advanced
       detail: Additional control over how the node will be registered.  These values will often need to be different for each node registered.
@@ -1672,6 +1673,11 @@ cluster:
     haveArgInfo: Configuration information is not available for the selected Kubernetes version.  The options available on this screen will be limited; you may want to use the YAML editor.
     deprecatedPsp: Pod Security Policies are deprecated as of Kubernetes v1.21, and have been removed in Kubernetes v1.25.
     removedPsp: Pod Security Policies have been removed in Kubernetes v1.25. Use Pod Security Admission instead.
+    machinePoolError: |-
+      {count, plural,
+        =1 { {pool_name}: The provided value for {fields} was not found in the list of expected values. This can happen with clusters provisioned outside of Rancher or when options for the provider have changed. }
+        other { {pool_name}: The provided values for {fields} were not found in the list of expected values. This can happen with clusters provisioned outside of Rancher or when options for the provider have changed. }
+      }
   rkeTemplateUpgrade: Template revision {name} available for upgrade
 
   availabilityWarnings:
@@ -1752,6 +1758,7 @@ cluster:
       searchPlaceholder: Start typing to search
       noResults: No results found
   privateRegistry:
+    header: Registry for Rancher System Container Images
     label: Enable cluster scoped container registry for Rancher system container images
     description: "If enabled, Rancher will pull container images from this registry during cluster provisioning. By default, Rancher will also use this registry when installing Rancher's official Helm chart apps. If the cluster scoped registry is disabled, system images are pulled from the System Default Registry in the global settings."
     docsLinkRke2: "For help configuring private registry mirrors, see the RKE2 <a href=\"https://docs.rke2.io/install/containerd_registry_configuration/\" target=\"_blank\">documentation.</a>"
@@ -1864,6 +1871,8 @@ cluster:
       option:
         none: (None)
         default: Default - RKE2 Embedded
+    secretEncryption:
+      label: Encrypt Secrets
     cisProfile:
       option: (None)
     enableNetworkPolicy:
@@ -1872,6 +1881,7 @@ cluster:
     workNode:
       label: Worker Nodes
     controlPlaneConcurrency:
+      header: Control Plane
       label: Control Plane Concurrency
       toolTip: "This can be either a fixed number of nodes (e.g. 1) at a time or a percentage (e.g. 10%)"
     workerConcurrency:
@@ -1879,8 +1889,20 @@ cluster:
       toolTip: "This can be either a fixed number of nodes (e.g. 1) at a time or a percentage (e.g. 10%)"
     drain:
       label: Drain Nodes
-      toolTip: Draining preemptively removes the pods on each node so there are no running workloads on the nodes being upgraded.  Upgrading without draining is faster and causes less shuffling around, but pods may still be restarted depending on the upgrade being performed.
-    deleteEmptyDir: "By default, pods using emptyDir volumes will be deleted on upgrade. Operations reliant on emptyDir volumes persisting through the pod's lifecycle may be impacted."
+      toolTip: Draining preemptively removes the pods on each node so there are no running workloads on the nodes being upgraded.  Upgrading without draining is faster and causes less shuffling around, but pods may still be restarted depending on the upgrade being performed. 
+      deleteEmptyDir: 
+        warning: "By default, pods using emptyDir volumes will be deleted on upgrade. Operations reliant on emptyDir volumes persisting through the pod's lifecycle may be impacted."
+        label: Delete pods using emptyDir volumes
+        tooltip: emptyDir volumes are often used for ephemeral data, but the data will be permanently deleted.  Draining will fail if this is not set and there are pods using emptyDir.
+      force:
+        label: Delete standalone pods
+        tooltip: Delete standalone pods which are not managed by a Workload controller (Deployment, Job, etc).  Draining will fail if this is not set and there are standalone pods.
+      gracePeriod:
+        checkboxLabel: Override pod termination grace periods
+        inputLabel: Grace Period
+      timeout:
+        checkboxLabel: Timeout after
+        inputLabel: Drain Timeout
     truncateHostnames: Truncate hostnames to 15 characters for NetBIOS compatibility.
     address:
       tooltip: Cluster networking values cannot be changed after the cluster is created.
@@ -4124,9 +4146,8 @@ plugins:
       image:
         name: images
         label: Deployment Image
-      cacheState:
-        name: cacheState
-        label: Cache State
+      repository:
+        label: Repository Name
   tabs:
     all: All
     available: Available
@@ -4153,7 +4174,7 @@ plugins:
     label: Uninstall
     title: "Uninstall Extension: {name}"
     prompt: "Are you sure that you want to uninstall this Extension?"
-    custom: "Are you sure that you want to uninstall this Extension Image? This will also remove any Extensions provided by this image."
+    catalog: "Are you sure that you want to uninstall this Extension Catalog Image? This will also remove any Extensions provided by this image."
   upgradeAvailable: A newer version of this Extension is available
   reload: Extensions changed - reload required
   safeMode:
@@ -5704,6 +5725,7 @@ validation:
       missingResource: You must specify a Resource for each resource grant
       missingApiGroup: You must specify an API Group for each resource grant
       missingOneResource: You must specify at least one Resource, Non-Resource URL or API Group for each resource grant
+      noResourceAndNonResource: Each rule may contain Resources or Non-Resource URLs but not both
   service:
     externalName:
       none: External Name is required on an ExternalName Service.

package/assets/translations/zh-hans.yaml

@@ -758,7 +758,7 @@ backupRestoreOperator:
       warning: '此 {type} 没有将其回收策略设置为 "保留"。如果卷被更改或未绑定，你的备份可能会丢失。'
   encryption: 加密
   encryptionConfigName:
-    backuptip: '<code>cattle-resource-system</code>命名空间中具有<code>encryption-provider-config.yaml</code>密钥的任何密文。<br/>此文件的内容是还原此备份所必需的，Rancher Backup 不会存储这些内容。'
+    backuptip: '<code>cattle-resources-system</code>命名空间中具有<code>encryption-provider-config.yaml</code>密钥的任何密文。<br/>此文件的内容是还原此备份所必需的，Rancher Backup 不会存储这些内容。'
     label: 加密配置密文
     options:
       none: 存储未加密的备份内容。

package/components/ClusterIconMenu.vue

@@ -0,0 +1,143 @@
+<script>
+import { abbreviateClusterName } from '@shell/utils/cluster';
+
+export default {
+  props: {
+    cluster: {
+      type:     Object,
+      required: true,
+    },
+  },
+  computed: {
+    isEnabled() {
+      return !!this.cluster?.ready;
+    },
+    showLocalIcon() {
+      return this.cluster.isLocal && !this.cluster.isHarvester && !this.cluster.badge?.iconText;
+    },
+    badgeLogoBorderBottom() {
+      const color = this.cluster.badge?.color;
+
+      return color ? `4px solid ${ color }` : '';
+    }
+  },
+  methods: {
+    smallIdentifier(input) {
+      if (this.cluster.badge?.iconText) {
+        return this.cluster.badge?.iconText;
+      }
+
+      if (this.cluster.isLocal && !this.cluster.badge?.iconText) {
+        return undefined;
+      }
+
+      return abbreviateClusterName(input);
+    }
+  }
+};
+</script>
+
+<template>
+  <div
+    v-if="cluster"
+    class="cluster-icon-menu"
+  >
+    <div
+      class="cluster-badge-logo"
+      :class="{ 'disabled': !isEnabled }"
+      :style="{ borderBottom: badgeLogoBorderBottom }"
+    >
+      <span
+        class="cluster-badge-logo-text"
+      >
+        {{ smallIdentifier(cluster.label) }}
+      </span>
+      <svg
+        v-if="showLocalIcon"
+        class="cluster-local-logo"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        viewBox="0 0 100 100"
+        style="enable-background:new 0 0 100 100;"
+        xml:space="preserve"
+      >
+        <g>
+          <g>
+            <path
+              class="rancher-icon-fill"
+              d="M26.0862026,44.4953918H8.6165142c-5.5818157,0-9.3979139-4.6252708-8.4802637-10.1311035l2.858391-17.210701
+            C3.912292,11.6477556,6.1382647,7.1128125,7.8419709,7.1128125s3.1788611,4.5368752,3.1788611,10.1186218v4.4837742
+            c0,5.5817471,4.4044495,9.5409164,9.9862652,9.5409164h5.0791054V44.4953918z"
+            />
+          </g>
+          <path
+            class="rancher-icon-fill"
+            d="M63.0214729,92.8871841H37.0862045c-6.0751343,0-11.0000019-4.9248657-11.0000019-11V30.3864384
+          c0-6.0751324,4.9248676-11,11.0000019-11h25.9352684c6.0751305,0,11.0000038,4.9248676,11.0000038,11v51.5007477
+          C74.0214767,87.9623184,69.0966034,92.8871841,63.0214729,92.8871841z"
+          />
+          <g>
+            <path
+              class="rancher-icon-fill"
+              d="M73.9137955,44.4953918h17.4696884c5.5818176,0,9.3979187-4.6252708,8.4802628-10.1311035
+            l-2.8583908-17.210701c-0.9176483-5.5058317-3.1436234-10.0407753-4.8473282-10.0407753
+            s-3.1788635,4.5368752-3.1788635,10.1186218v4.4837742c0,5.5817471-4.4044418,9.5409164-9.9862595,9.5409164h-5.0791092
+            V44.4953918z"
+            />
+          </g>
+        </g>
+      </svg>
+    </div>
+    <i
+      v-if="cluster.pinned"
+      class="icon icon-pin cluster-pin-icon"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+
+  .cluster-icon-menu {
+    position: relative;
+    align-items: center;
+    display: flex;
+    height: 28px;
+    justify-content: center;
+    width: 42px;
+  }
+  .cluster-pin-icon {
+    position: absolute;
+    top: -6px;
+    right: -4px;
+    font-size: 12px;
+    transform: scaleX(-1);
+    color: var(--body-text);
+  }
+
+  .cluster-local-logo {
+    width: 20px;
+  }
+
+  .cluster-badge-logo {
+    width: 42px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--default-active-text);
+    font-weight: bold;
+    background: var(--nav-icon-badge-bg);
+    border: 1px solid var(--default-border);
+    border-radius: 5px;
+    font-size: 12px;
+    text-transform: uppercase;
+
+    &.disabled {
+      filter: grayscale(1);
+      color: var(--muted);
+    }
+  }
+</style>

package/components/CruResource.vue

@@ -17,6 +17,8 @@ import {
 import { BEFORE_SAVE_HOOKS } from '@shell/mixins/child-hook';
 import Wizard from '@shell/components/Wizard';
 
+export const CONTEXT_HOOK_EDIT_YAML = 'show-preview-yaml';
+
 export default {
 
   name: 'CruResource',
@@ -110,6 +112,7 @@ export default {
       type:    Function,
       default: null,
     },
+
     steps: {
       type:    Array,
       default: () => []
@@ -324,7 +327,10 @@ export default {
 
     async showPreviewYaml() {
       if ( this.applyHooks ) {
-        await this.applyHooks(BEFORE_SAVE_HOOKS);
+        await this.applyHooks(
+          BEFORE_SAVE_HOOKS,
+          CONTEXT_HOOK_EDIT_YAML,
+        );
       }
 
       const resourceYaml = this.createResourceYaml(this.yamlModifiers);

package/components/ExplorerProjectsNamespaces.vue

@@ -5,6 +5,8 @@ import { STATE, AGE, NAME } from '@shell/config/table-headers';
 import { uniq } from '@shell/utils/array';
 import { MANAGEMENT, NAMESPACE, VIRTUAL_TYPES } from '@shell/config/types';
 import { PROJECT_ID, FLAT_VIEW } from '@shell/config/query-params';
+import { PanelLocation, ExtensionPoint } from '@shell/core/types';
+import ExtensionPanel from '@shell/components/ExtensionPanel';
 import Masthead from '@shell/components/ResourceList/Masthead';
 import { mapPref, GROUP_RESOURCES, ALL_NAMESPACES } from '@shell/store/prefs';
 import MoveModal from '@shell/components/MoveModal';
@@ -16,7 +18,7 @@ import DOMPurify from 'dompurify';
 export default {
   name:       'ListProjectNamespace',
   components: {
-    Masthead, MoveModal, ResourceTable
+    ExtensionPanel, Masthead, MoveModal, ResourceTable
   },
   mixins: [ResourceFetch],
 
@@ -56,6 +58,8 @@ export default {
       schema:                       null,
       projects:                     [],
       projectSchema:                null,
+      extensionType:                ExtensionPoint.PANEL,
+      extensionLocation:            PanelLocation.RESOURCE_LIST,
       MANAGEMENT,
       VIRTUAL_TYPES,
       defaultCreateProjectLocation: {
@@ -379,6 +383,12 @@ export default {
         </n-link>
       </template>
     </Masthead>
+    <!-- Extensions area -->
+    <ExtensionPanel
+      :resource="{}"
+      :type="extensionType"
+      :location="extensionLocation"
+    />
     <ResourceTable
       ref="table"
       class="table"

package/components/FixedBanner.vue

@@ -93,6 +93,19 @@ export default {
     },
     showAsDialog() {
       return this.consent && !!this.banner.button;
+    },
+
+    // ID to place on the Banner DIV
+    id() {
+      if (this.header) {
+        return 'banner-header';
+      } else if (this.consent) {
+        return 'banner-consent';
+      } else if (this.footer) {
+        return 'banner-footer';
+      }
+
+      return 'banner';
     }
   },
 
@@ -130,7 +143,10 @@ export default {
 </script>
 
 <template>
-  <div v-if="showBanner">
+  <div
+    v-if="showBanner"
+    :id="id"
+  >
     <div
       v-if="!showAsDialog"
       class="banner"

package/components/Markdown.vue

@@ -39,7 +39,7 @@ export default {
     const renderer = new marked.Renderer();
     const linkRenderer = renderer.link;
 
-    const base = this.$router.resolve(this.$route).href.replace(/#.*$/, '');
+    const base = this.$router ? this.$router.resolve(this.$route).href.replace(/#.*$/, '') : '';
 
     renderer.link = function(href, title, text) {
       let external = true;

package/components/Questions/__tests__/Yaml.test.ts

@@ -2,8 +2,9 @@ import Questions from '@shell/components/Questions';
 import { mount } from '@vue/test-utils';
 import { _EDIT } from '@shell/config/query-params';
 const defaultStubs = {
-  Tab:    true,
-  Tabbed: true,
+  Tab:        true,
+  Tabbed:     true,
+  CodeMirror: true
 };
 const defaultGetters = {
   currentStore:           () => 'current_store',

package/components/SortableTable/index.vue

@@ -1,6 +1,7 @@
 <script>
 import { mapGetters } from 'vuex';
 import day from 'dayjs';
+import isEmpty from 'lodash/isEmpty';
 import { dasherize, ucFirst } from '@shell/utils/string';
 import { get, clone } from '@shell/utils/object';
 import { removeObject } from '@shell/utils/array';
@@ -801,11 +802,11 @@ export default {
 
     // Can the action of interest be applied to the specified resource?
     canRunBulkActionOfInterest(resource) {
-      if (!this.actionOfInterest) {
+      if ( !this.actionOfInterest || isEmpty(resource?.availableActions) ) {
         return false;
       }
 
-      const matchingResourceAction = resource.availableActions.find((a) => a.action === this.actionOfInterest.action);
+      const matchingResourceAction = resource.availableActions?.find((a) => a.action === this.actionOfInterest.action);
 
       return matchingResourceAction?.enabled;
     },

package/components/auth/RoleDetailEdit.vue

@@ -2,6 +2,8 @@
 import { MANAGEMENT, RBAC } from '@shell/config/types';
 import CruResource from '@shell/components/CruResource';
 import CreateEditView from '@shell/mixins/create-edit-view';
+import FormValidation from '@shell/mixins/form-validation';
+import Error from '@shell/components/form/Error';
 import { RadioGroup } from '@components/Form/Radio';
 import Select from '@shell/components/form/Select';
 import ArrayList from '@shell/components/form/ArrayList';
@@ -58,9 +60,10 @@ export default {
     Tabbed,
     SortableTable,
     Loading,
+    Error
   },
 
-  mixins: [CreateEditView],
+  mixins: [CreateEditView, FormValidation],
 
   async fetch() {
     // We don't want to get all schemas from the cluster because there are
@@ -109,6 +112,9 @@ export default {
       scopedResources:      SCOPED_RESOURCES,
       defaultValue:         false,
       selectFocused:        null,
+      fvFormRuleSets:       [
+        { path: 'displayName', rules: ['required'] }
+      ],
     };
   },
 
@@ -524,7 +530,8 @@ export default {
     :can-yaml="!isCreate"
     :mode="mode"
     :resource="value"
-    :errors="errors"
+    :errors="fvUnreportedValidationErrors"
+    :validation-passed="fvFormIsValid"
     :cancel-event="true"
     @error="e=>errors = e"
     @finish="save"
@@ -568,6 +575,7 @@ export default {
         name-key="displayName"
         description-key="description"
         label="Name"
+        :rules="{ name: fvGetAndReportPathRules('displayName') }"
       />
       <div
         v-if="isRancherType"
@@ -606,6 +614,11 @@ export default {
           :label="t('rbac.roletemplate.tabs.grantResources.label')"
           :weight="1"
         >
+          <Error
+            :value="value.rules"
+            :rules="fvGetAndReportPathRules('rules')"
+            as-banner
+          />
           <ArrayList
             v-model="value.rules"
             label="Resources"

package/components/auth/login/saml.vue

@@ -5,7 +5,18 @@ export default {
 
   methods: {
     async login() {
-      const res = await this.$store.dispatch('auth/login', { provider: this.name, body: { finalRedirectUrl: window.location.origin } });
+      const { requestId, publicKey, responseType } = this.$route.query;
+
+      const res = await this.$store.dispatch('auth/login', {
+        provider: this.name,
+        body:     {
+          finalRedirectUrl: window.location.origin,
+          requestId,
+          publicKey,
+          responseType
+        }
+      });
+
       const { idpRedirectUrl } = res;
 
       window.location.href = idpRedirectUrl;

package/components/form/LabeledSelect.vue

@@ -149,11 +149,10 @@ export default {
         return;
       }
 
-      // Force to update the option label if prop has been changed
-      const isOutdated = !this.options.find((opt) => option[this.optionLabel] === opt[this.optionLabel]);
-
-      if (isOutdated && this.options) {
-        const newOption = this.options.find((opt) => isEqual(this.reduce(option), this.reduce(opt)));
+      // This check is only needed if its possible for an option's label to change without the option's value changing - we can skip this if options are just strings or numbers
+      // HOWEVER even if strings are passed to v-select the 'option' in the slot is normalized to {label: <option>} so we have to check the options prop here instead of the 'option' itself
+      if (typeof this.options[0] === 'object') {
+        const newOption = this.getUpdatedOption(option);
 
         if (newOption) {
           const label = get(newOption, this.optionLabel);
@@ -178,6 +177,14 @@ export default {
       }
     },
 
+    // If the option's label changed in parent but value did not, the label wont be automatically updated here
+    // Ensure that the label being shown is still present in the options prop and find the new one if not
+    getUpdatedOption(option) {
+      const isOutdated = this.options && !this.options.find((opt) => option[this.optionLabel] === opt[this.optionLabel]);
+
+      return isOutdated ? this.options.find((opt) => isEqual(this.reduce(option), this.reduce(opt))) : undefined;
+    },
+
     positionDropdown(dropdownList, component, { width }) {
       calculatePosition(dropdownList, component, width, this.placement);
     },

package/components/form/Members/ClusterPermissionsEditor.vue

@@ -198,7 +198,7 @@ export default {
     async principalProperty() {
       const principal = await this.principal;
 
-      return principal.principalType === 'group' ? 'groupPrincipalId' : 'userPrincipalId';
+      return principal?.principalType === 'group' ? 'groupPrincipalId' : 'userPrincipalId';
     },
 
     onAdd(principalId) {

package/components/form/Members/MembershipEditor.vue

@@ -56,8 +56,13 @@ export default {
   },
 
   async fetch() {
+    const roleBindingRequestParams = { type: this.type, opt: { force: true } };
+
+    if (this.type === NORMAN.PROJECT_ROLE_TEMPLATE_BINDING && this.parentId) {
+      Object.assign(roleBindingRequestParams, { opt: { filter: { projectId: this.parentId.split('/').join(':') } } });
+    }
     const userHydration = [
-      this.schema ? this.$store.dispatch(`rancher/findAll`, { type: this.type, opt: { force: true } }) : [],
+      this.schema ? this.$store.dispatch(`rancher/findAll`, roleBindingRequestParams) : [],
       this.$store.dispatch('rancher/findAll', { type: NORMAN.PRINCIPAL }),
       this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.ROLE_TEMPLATE }),
       this.$store.dispatch(`management/findAll`, { type: MANAGEMENT.USER })

package/components/form/__tests__/KeyValue.test.ts

@@ -8,7 +8,8 @@ describe('component: KeyValue', () => {
     const wrapper = mount(KeyValue, {
       propsData:  { value: { value } },
       mocks:      { $store: { getters: { 'i18n/t': jest.fn() } } },
-      directives: { t }
+      directives: { t },
+      stubs:      { CodeMirror: true }
     });
 
     const inputValue = wrapper.find('textarea').element as HTMLInputElement;
@@ -24,7 +25,8 @@ describe('component: KeyValue', () => {
         valueMarkdownMultiline: true,
       },
       mocks:      { $store: { getters: { 'i18n/t': jest.fn() } } },
-      directives: { t }
+      directives: { t },
+      stubs:      { CodeMirror: true }
     });
 
     const inputFieldTextArea = wrapper.find('textarea').element;
@@ -41,7 +43,8 @@ describe('component: KeyValue', () => {
         valueMarkdownMultiline: false,
       },
       mocks:      { $store: { getters: { 'i18n/t': jest.fn() } } },
-      directives: { t }
+      directives: { t },
+      stubs:      { CodeMirror: true }
     });
 
     const inputFieldTextArea = wrapper.find('[data-testid="text-area-auto-grow"]');

package/components/form/__tests__/LabeledSelect.test.ts

@@ -133,6 +133,24 @@ describe('component: LabeledSelect', () => {
         // Component is from a library and class is not going to be changed
         expect(wrapper.find('.vs__selected').text()).toBe(translation);
       });
+
+      it.each([
+        [['a'], 'b', 0],
+        [[{ value: 'a', label: 'A' }], { value: 'a', label: 'B' }, 4]
+      ])('should only check for a new label if options are objects', async(options: any[], newOption, checkUpdateCalled: number) => {
+        const spyUpdatedOption = jest.spyOn(LabeledSelect.methods, 'getUpdatedOption');
+
+        const wrapper = mount(LabeledSelect, {
+          propsData: {
+            value: 'a',
+            options
+          }
+        });
+
+        await wrapper.setProps({ options: [newOption] });
+
+        expect(spyUpdatedOption).toHaveBeenCalledTimes(checkUpdateCalled);
+      });
     });
   });
 });

package/components/formatter/PodsUsage.vue

@@ -1,5 +1,4 @@
 <script>
-import { POD } from '@shell/config/types';
 export default {
   name:  'PodsUsage',
   props: {
@@ -8,47 +7,23 @@ export default {
       required: true
     },
   },
-  data() {
-    return {
-      loading:   true,
-      podsUsage: null
-    };
-  },
-  methods: {
-    async startDelayedLoading() {
-      const id = this.row?.mgmt?.id;
-
-      if (this.row?.isReady && id) {
-        const req = await this.$store.dispatch('management/request', { url: `/k8s/clusters/${ id }/v1/counts` });
+  computed: {
+    podsUsage() {
+      const usedPods = this.row?.mgmt?.status?.requested?.pods;
+      const totalPods = this.row?.mgmt?.status?.allocatable?.pods;
 
-        this.loading = false;
-        const usedPods = req.data?.[0]?.counts[POD]?.summary?.count || 0;
-        const totalPods = this.row?.mgmt?.status?.allocatable?.pods;
-
-        if (totalPods) {
-          this.podsUsage = `${ usedPods }/${ totalPods }`;
-        } else {
-          this.podsUsage = '—';
-        }
-      } else {
-        this.loading = false;
-        this.podsUsage = '—';
+      if (!this.row?.isReady || !totalPods) {
+        return '—';
       }
+
+      return `${ usedPods || 0 }/${ totalPods }`;
     }
-  },
+  }
 };
 </script>
 
 <template>
-  <i
-    v-if="loading"
-    class="icon icon-spinner icon-spin"
-  />
-  <p v-else>
-    {{ podsUsage }}
+  <p>
+    <span>{{ podsUsage }}</span>
   </p>
 </template>
-
-<style lang="scss" scoped>
-
-</style>