@rancher/shell 3.0.9-rc.1 → 3.0.9-rc.3

package/components/fleet/dashboard/ResourceDetails.vue

@@ -1,20 +1,26 @@
 <script lang="ts">
 import { PropType } from 'vue';
 import { FLEET } from '@shell/config/types';
-import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import FleetResources from '@shell/components/fleet/FleetResources.vue';
-import { RcButton } from '@components/RcButton';
 import { FleetDashboardState } from '@shell/types/fleet';
 import FleetApplicationSource from '@shell/components/formatter/FleetApplicationSource.vue';
+import FleetClusters from '@shell/components/fleet/FleetClusters.vue';
+import Tabbed from '@shell/components/Tabbed/index.vue';
+import Tab from '@shell/components/Tabbed/Tab.vue';
+import Drawer from '@shell/components/Drawer/Chrome.vue';
+import DrawerCard from '@shell/components/Drawer/DrawerCard.vue';
 
 export default {
   name: 'FleetDashboardResourceDetails',
 
   components: {
-    LabeledSelect,
     FleetResources,
     FleetApplicationSource,
-    RcButton,
+    FleetClusters,
+    Tabbed,
+    Tab,
+    Drawer,
+    DrawerCard,
   },
 
   props: {
@@ -46,20 +52,18 @@ export default {
   },
 
   mounted() {
-    this.clusterId = this.clusters[0]?.value || '';
+    this.clusterId = '';
   },
 
   computed: {
-    clusters() {
-      return this.value.targetClusters.map((cluster: { id: string, nameDisplay: string }) => ({
-        label: cluster.nameDisplay,
-        value: cluster.id
-      }));
-    },
-
     noResources() {
       return !this.value.resourcesStatuses?.length;
     },
+
+    clusterSchema() {
+      return this.$store.getters['management/schemaFor'](FLEET.CLUSTER);
+    }
+
   },
 
   methods: {
@@ -71,124 +75,93 @@ export default {
 </script>
 
 <template>
-  <div class="details-panel">
-    <div
-      class="header"
+  <Drawer
+    :ariaTarget="value.id"
+    :removeFooter="true"
+    @close="closePanel"
+  >
+    <template
+      #title
       :data-testid="'fleet-dashboard-resource-details-header'"
     >
-      <h3 class="title">
-        <i :class="value.dashboardIcon" />
-        <router-link
-          class="label"
-          :to="detailLocation"
-        >
-          {{ value.id }}
-        </router-link>
-        <i
-          v-if="statePanel.id !== 'success'"
-          class="ml-5 state-icon"
-          :class="statePanel.icon"
-          :style="{ color: statePanel.color }"
-        />
-      </h3>
-      <RcButton
-        small
-        ghost
-        data-testid="slide-in-close"
-        :aria-label="'slide-in-close'"
-        tabindex="0"
-        @click="closePanel"
-        @keydown.space.enter.stop.prevent="closePanel"
-      >
-        <i class="icon icon-close" />
-      </RcButton>
-    </div>
-
-    <h4>
-      {{ t('fleet.dashboard.source') }}
-    </h4>
-    <div class="mb-15">
-      <FleetApplicationSource
-        v-if="value.source.value"
-        :row="value"
+      <i
+        class="icon-lg mmr-3"
+        :class="value.dashboardIcon"
       />
-      <div
-        v-else
-        class="text-muted"
+      <router-link
+        class="label"
+        :to="detailLocation"
       >
-        &mdash;
-      </div>
-    </div>
-
-    <h4>
-      {{ t('fleet.dashboard.resources') }}
-    </h4>
-    <FleetResources
-      :rows="value.resourcesStatuses"
-      :cluster-id="clusterId"
-      :search="!noResources"
-    >
-      <template
-        v-if="!noResources"
-        #header-left
+        {{ value.id }}
+      </router-link>
+      <i
+        v-if="statePanel.id !== 'success'"
+        class="ml-5 state-icon icon-lg"
+        :class="statePanel.icon"
+        :style="{ color: statePanel.color }"
+      />
+    </template>
+    <template #body>
+      <Tabbed
+        v-bind="$attrs"
+        :default-tab="'clusters'"
+        :resource="value"
+        :use-hash="true"
+        :remove-borders="true"
       >
-        <div class="row">
-          <div class="col span-10">
-            <LabeledSelect
-              v-model:value="clusterId"
-              :label="t('fleet.cluster.label')"
-              :options="clusters"
-              :mode="'edit'"
-              :disabled="workspace.id === 'fleet-local'"
+        <Tab
+          :label="t('fleet.dashboard.resourceDetails.clusters')"
+          name="clusters"
+        >
+          <DrawerCard>
+            <FleetClusters
+              :schema="clusterSchema"
+              :rows="value.targetClusters"
+              :table-actions="false"
+              :row-actions="false"
+              :search="true"
+              :remove-sub-rows="true"
+              :ignore-filter="true"
+              paging-label="sortableTable.paging.resource"
             />
-          </div>
-        </div>
-      </template>
-    </FleetResources>
-  </div>
+          </DrawerCard>
+        </Tab>
+        <Tab
+          :label="t('fleet.dashboard.resourceDetails.resources')"
+          name="resources"
+        >
+          <DrawerCard>
+            <FleetResources
+              :rows="value.resourcesStatuses"
+              :cluster-id="clusterId"
+              :search="true"
+            />
+          </DrawerCard>
+        </Tab>
+        <Tab
+          :label="t('fleet.dashboard.resourceDetails.source')"
+          name="source"
+        >
+          <DrawerCard class="mmb-4">
+            <FleetApplicationSource
+              v-if="value.source.value"
+              :row="value"
+            />
+            <div
+              v-else
+              class="text-muted"
+            >
+              &mdash;
+            </div>
+          </DrawerCard>
+        </Tab>
+      </Tabbed>
+    </template>
+  </Drawer>
 </template>
 
-<style lang="scss">
-  .details-panel {
-    padding: 10px;
-
-    .sortable-table-header {
-      .fixed-header-actions {
-        align-items: center;
-      }
-    }
-
-    .header {
-      display: flex;
-      align-items: center;
-      padding: 0;
-      margin: 0 0 20px 0;
-
-      .title {
-        display: flex;
-        align-items: center;
-        flex: 1;
-        margin-bottom: 0;
-
-        .icon {
-          font-size: 2em;
-          margin-right: 16px;
-        }
-
-        .label {
-          margin-right: 8px;
-        }
-
-        .state-icon {
-          font-size: 1.5em;
-        }
-      }
-    }
-  }
-
-  .col {
-    .labeled-select {
-      min-width: 250px;
-    }
+<style lang="scss" scoped>
+  .icon-lg {
+    font-size: 24px;
   }
 </style>

package/components/form/Conditions.vue

@@ -52,21 +52,7 @@ export default {
     },
 
     rows() {
-      return (this.value.status?.conditions || []).map((cond) => {
-        let message = cond.message || '';
-
-        if ( cond.reason ) {
-          message = `[${ cond.reason }] ${ message }`.trim();
-        }
-
-        return {
-          condition: cond.type || 'Unknown',
-          status:    cond.status || 'Unknown',
-          error:     cond.error,
-          time:      cond.lastProbeTime || cond.lastUpdateTime || cond.lastTransitionTime,
-          message,
-        };
-      });
+      return this.value.resourceConditions;
     },
   }
 };

package/components/form/HookOption.vue

@@ -20,6 +20,10 @@ export default {
       default: () => {
         return {};
       }
+    },
+    label: {
+      type:    String,
+      default: null
     }
   },
 
@@ -123,6 +127,7 @@ export default {
           t('workload.container.lifecycleHook.httpGet.add'),
         ]"
         :mode="mode"
+        :label="label"
         @update:value="update"
       />
     </div>

package/components/form/LabeledSelect.vue

@@ -386,7 +386,7 @@ export default {
       :dropdown-should-open="dropdownShouldOpen"
       :tabindex="-1"
       :uid="generatedUid"
-      :aria-label="'-'"
+      :aria-label="`- ${value}`"
       @update:modelValue="$emit('selecting', $event); $emit('update:value', $event)"
       @search:blur="onBlur"
       @search:focus="onFocus"

package/components/form/LifecycleHooks.vue

@@ -63,23 +63,19 @@ export default {
 <template>
   <div>
     <div class="mb-20">
-      <h3 class="clearfix">
-        {{ t('workload.container.lifecycleHook.postStart.label') }}
-      </h3>
       <HookOption
         v-model:value="postStart"
         :mode="mode"
+        :label="t('workload.container.lifecycleHook.postStart.label')"
         @update:value="update"
       />
     </div>
 
     <div>
-      <h3 class="clearfix">
-        {{ t('workload.container.lifecycleHook.preStop.label') }}
-      </h3>
       <HookOption
         v-model:value="preStop"
         :mode="mode"
+        :label="t('workload.container.lifecycleHook.preStop.label')"
         @update:value="update"
       />
     </div>

package/components/form/ResourceLabeledSelect.vue

@@ -165,5 +165,16 @@ export default defineComponent({
     :paginate="paginateType"
     :multiple="$attrs.multiple || false"
     @update:value="$emit('update:value', $event)"
-  />
+  >
+    <template
+      v-for="(_, slot) in $slots"
+      :key="slot"
+      #[slot]="scope"
+    >
+      <slot
+        :name="slot"
+        v-bind="scope"
+      />
+    </template>
+  </LabeledSelect>
 </template>

package/components/form/ResourceQuota/Project.vue

@@ -1,12 +1,17 @@
 <script>
 import ArrayList from '@shell/components/form/ArrayList';
 import Row from './ProjectRow';
-import { QUOTA_COMPUTED } from './shared';
+import { QUOTA_COMPUTED, TYPES } from './shared';
+import Banner from '@components/Banner/Banner.vue';
 
 export default {
   emits: ['remove', 'input'],
 
-  components: { ArrayList, Row },
+  components: {
+    ArrayList,
+    Row,
+    Banner,
+  },
 
   props: {
     mode: {
@@ -36,18 +41,35 @@ export default {
     this.value.spec['namespaceDefaultResourceQuota'] = this.value.spec.namespaceDefaultResourceQuota || { limit: {} };
     this.value.spec['resourceQuota'] = this.value.spec.resourceQuota || { limit: {} };
 
-    this.typeValues = Object.keys(this.value.spec.resourceQuota.limit);
+    const limit = this.value.spec.resourceQuota.limit;
+    const extendedKeys = Object.keys(limit.extended || {});
+
+    this.typeValues = Object.keys(limit).flatMap((k) => {
+      if (k !== TYPES.EXTENDED) {
+        return k;
+      }
+
+      return extendedKeys.map((ek) => `extended.${ ek }`);
+    });
   },
 
   computed: { ...QUOTA_COMPUTED },
 
   methods: {
-    updateType(i, type) {
-      this.typeValues[i] = type;
+    updateType(event) {
+      const { index, type } = event;
+
+      this.typeValues[index] = type;
     },
     remainingTypes(currentType) {
       return this.mappedTypes
-        .filter((mappedType) => !this.typeValues.includes(mappedType.value) || mappedType.value === currentType);
+        .filter((mappedType) => {
+          if (mappedType.value === TYPES.EXTENDED) {
+            return true;
+          }
+
+          return !this.typeValues.includes(mappedType.value) || mappedType.value === currentType;
+        });
     },
     emitRemove(data) {
       this.$emit('remove', data.row?.value);
@@ -57,9 +79,33 @@ export default {
 </script>
 <template>
   <div>
+    <Banner
+      color="info"
+      label-key="resourceQuota.banner"
+      class="mb-20"
+    />
     <div class="headers mb-10">
       <div class="mr-10">
-        <label>{{ t('resourceQuota.headers.resourceType') }}</label>
+        <label>
+          {{ t('resourceQuota.headers.resourceType') }}
+          <span
+            class="required mr-5"
+            aria-hidden="true"
+          >*</span>
+        </label>
+      </div>
+      <div class="mr-20">
+        <label>
+          {{ t('resourceQuota.headers.resourceIdentifier') }}
+          <span
+            class="required mr-5"
+            aria-hidden="true"
+          >*</span>
+          <i
+            v-clean-tooltip="t('resourceQuota.resourceIdentifier.tooltip')"
+            class="icon icon-info"
+          />
+        </label>
       </div>
       <div class="mr-20">
         <label>{{ t('resourceQuota.headers.projectLimit') }}</label>
@@ -83,8 +129,9 @@ export default {
           :mode="mode"
           :types="remainingTypes(typeValues[props.i])"
           :type="typeValues[props.i]"
+          :index="props.i"
           @input="$emit('input', $event)"
-          @type-change="updateType(props.i, $event)"
+          @type-change="updateType($event)"
         />
       </template>
     </ArrayList>
@@ -104,4 +151,8 @@ export default {
         width: 100%;
     }
 }
+
+.required {
+  color: var(--error);
+}
 </style>

package/components/form/ResourceQuota/ProjectRow.vue

@@ -1,12 +1,17 @@
 <script>
 import Select from '@shell/components/form/Select';
 import UnitInput from '@shell/components/form/UnitInput';
-import { ROW_COMPUTED } from './shared';
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { ROW_COMPUTED, TYPES } from './shared';
 
 export default {
   emits: ['type-change'],
 
-  components: { Select, UnitInput },
+  components: {
+    Select,
+    UnitInput,
+    LabeledInput,
+  },
 
   props: {
     mode: {
@@ -26,35 +31,95 @@ export default {
       default: () => {
         return {};
       }
+    },
+    index: {
+      type:     Number,
+      required: true,
+    }
+  },
+
+  data() {
+    return { customType: '' };
+  },
+
+  created() {
+    if (this.type.startsWith(TYPES.EXTENDED)) {
+      this.customType = this.type.substring(`${ TYPES.EXTENDED }.`.length);
+    } else {
+      this.customType = this.type;
     }
   },
 
   computed: {
     ...ROW_COMPUTED,
 
-    resourceQuotaLimit: {
-      get() {
-        return this.value.spec.resourceQuota?.limit || {};
-      },
+    localType() {
+      return this.type.startsWith(TYPES.EXTENDED) ? this.type.split('.')[0] : this.type;
     },
 
-    namespaceDefaultResourceQuotaLimit: {
-      get() {
-        return this.value.spec.namespaceDefaultResourceQuota?.limit || {};
-      },
+    isCustom() {
+      return this.localType === TYPES.EXTENDED;
+    },
+
+    resourceQuotaLimit() {
+      if (this.isCustom) {
+        return this.value.spec.resourceQuota?.limit.extended || {};
+      }
+
+      return this.value.spec.resourceQuota?.limit || {};
+    },
+
+    namespaceDefaultResourceQuotaLimit() {
+      if (this.isCustom) {
+        return this.value.spec.namespaceDefaultResourceQuota?.limit.extended || {};
+      }
+
+      return this.value.spec.namespaceDefaultResourceQuota?.limit || {};
+    },
+
+    currentResourceType() {
+      return this.isCustom ? this.customType : this.localType;
+    },
+
+    customTypeRules() {
+      // Return a validation rule that makes the field required when isCustom is true
+      if (this.isCustom) {
+        return [
+          (value) => {
+            if (!value) {
+              return this.t('resourceQuota.errors.customTypeRequired');
+            }
+
+            return undefined;
+          }
+        ];
+      }
+
+      return [];
     }
   },
 
   methods: {
     updateType(type) {
-      if (typeof this.value.spec.resourceQuota?.limit[this.type] !== 'undefined') {
-        delete this.value.spec.resourceQuota.limit[this.type];
-      }
-      if (typeof this.value.spec.namespaceDefaultResourceQuota?.limit[this.type] !== 'undefined') {
-        delete this.value.spec.namespaceDefaultResourceQuota.limit[this.type];
+      const oldResourceKey = this.isCustom ? this.customType : this.localType;
+
+      this.deleteResourceLimits(oldResourceKey);
+
+      if (type === TYPES.EXTENDED) {
+        this.customType = '';
+      } else {
+        this.customType = type;
       }
 
-      this.$emit('type-change', type);
+      this.$emit('type-change', { index: this.index, type });
+    },
+
+    updateCustomType(type) {
+      const oldType = this.customType;
+
+      this.deleteResourceLimits(oldType);
+
+      this.customType = type;
     },
 
     updateQuotaLimit(prop, type, val) {
@@ -62,7 +127,26 @@ export default {
         this.value.spec[prop] = { limit: { } };
       }
 
+      if (this.isCustom) {
+        if (!this.value.spec[prop].limit.extended) {
+          this.value.spec[prop].limit.extended = { };
+        }
+
+        this.value.spec[prop].limit.extended[type] = val;
+
+        return;
+      }
+
       this.value.spec[prop].limit[type] = val;
+    },
+
+    deleteResourceLimits(resourceKey) {
+      if (typeof this.value.spec.resourceQuota?.limit[resourceKey] !== 'undefined') {
+        delete this.value.spec.resourceQuota.limit[resourceKey];
+      }
+      if (typeof this.value.spec.namespaceDefaultResourceQuota?.limit[resourceKey] !== 'undefined') {
+        delete this.value.spec.namespaceDefaultResourceQuota.limit[resourceKey];
+      }
     }
   },
 };
@@ -73,15 +157,26 @@ export default {
     class="row"
   >
     <Select
-      :value="type"
+      :value="localType"
       class="mr-10"
       :mode="mode"
       :options="types"
       data-testid="projectrow-type-input"
       @update:value="updateType($event)"
     />
+    <LabeledInput
+      :value="customType"
+      :disabled="!isCustom"
+      :required="isCustom"
+      :mode="mode"
+      :placeholder="t('resourceQuota.resourceIdentifier.placeholder')"
+      :rules="customTypeRules"
+      class="mr-10"
+      data-testid="projectrow-custom-type-input"
+      @update:value="updateCustomType($event)"
+    />
     <UnitInput
-      :value="resourceQuotaLimit[type]"
+      :value="resourceQuotaLimit[currentResourceType]"
       class="mr-10"
       :mode="mode"
       :placeholder="typeOption.placeholder"
@@ -90,10 +185,10 @@ export default {
       :base-unit="typeOption.baseUnit"
       :output-modifier="true"
       data-testid="projectrow-project-quota-input"
-      @update:value="updateQuotaLimit('resourceQuota', type, $event)"
+      @update:value="updateQuotaLimit('resourceQuota', currentResourceType, $event)"
     />
     <UnitInput
-      :value="namespaceDefaultResourceQuotaLimit[type]"
+      :value="namespaceDefaultResourceQuotaLimit[currentResourceType]"
       :mode="mode"
       :placeholder="typeOption.placeholder"
       :increment="typeOption.increment"
@@ -101,7 +196,7 @@ export default {
       :base-unit="typeOption.baseUnit"
       :output-modifier="true"
       data-testid="projectrow-namespace-quota-input"
-      @update:value="updateQuotaLimit('namespaceDefaultResourceQuota', type, $event)"
+      @update:value="updateQuotaLimit('namespaceDefaultResourceQuota', currentResourceType, $event)"
     />
   </div>
 </template>