@rancher/shell 3.0.8 → 3.0.9-rc.2

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/SeccompProfile.vue

@@ -0,0 +1,113 @@
+<script>
+import { LabeledInput } from '@components/Form/LabeledInput';
+import { mapGetters } from 'vuex';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
+
+export default {
+  emits: ['update:value'],
+
+  components: {
+    LabeledInput,
+    LabeledSelect
+  },
+
+  props: {
+    value: {
+      type:    Object,
+      default: () => ({})
+    },
+    mode: {
+      type:    String,
+      default: 'mode'
+    },
+    seccompProfileTypes: {
+      type:    Array,
+      default: () => []
+    },
+    title: {
+      type:    String,
+      default: ''
+    }
+  },
+
+  data() {
+    const { type, localhostProfile } = this.value || {};
+
+    return {
+      type:                                 type || 'None',
+      localhostProfile,
+      afterLocalhostProfileSelectedMessage: ''
+    };
+  },
+
+  computed: { ...mapGetters({ t: 'i18n/t' }) },
+
+  methods: {
+    update() {
+      if (this.type === 'None') {
+        this.$emit('update:value', undefined);
+
+        return;
+      }
+
+      const seccompProfile = { type: this.type };
+
+      if (this.type === 'Localhost') {
+        seccompProfile.localhostProfile = this.localhostProfile;
+        this.afterLocalhostProfileSelectedMessage = this.t('workload.container.security.seccompProfile.afterLocalhostProfile.selected');
+      } else {
+        this.afterLocalhostProfileSelectedMessage = this.t('workload.container.security.seccompProfile.afterLocalhostProfile.unselected');
+      }
+
+      this.$emit('update:value', seccompProfile);
+    }
+  }
+};
+</script>
+
+<template>
+  <fieldset>
+    <legend class="h3-legend">
+      {{ title }}
+    </legend>
+    <div class="row">
+      <div
+        data-testid="input-security-seccompProfile-type"
+        class="col span-6"
+      >
+        <LabeledSelect
+          v-model:value="type"
+          :mode="mode"
+          :label="t('workload.container.security.seccompProfile.type')"
+          :options="seccompProfileTypes"
+          data-testid="seccomp-type-select"
+          @update:value="update"
+        />
+      </div>
+      <p
+        id="after-localhostprofile-selected"
+        role="status"
+        aria-live="polite"
+        class="sr-only"
+      >
+        {{ afterLocalhostProfileSelectedMessage }}
+      </p>
+      <div
+        data-testid="input-security-seccompProfile-localhostProfile"
+        class="col span-6"
+      >
+        <LabeledInput
+          v-if="type === 'Localhost'"
+          v-model:value="localhostProfile"
+          :mode="mode"
+          :label="t('workload.container.security.seccompProfile.localhostProfile.label')"
+          :required="true"
+          :tooltip="t('workload.container.security.seccompProfile.localhostProfile.tooltip')"
+          :placeholder="t('workload.container.security.seccompProfile.localhostProfile.placeholder')"
+          data-testid="seccomp-localhost-input"
+          @update:value="update"
+        />
+      </div>
+    </div>
+  </fieldset>
+</template>