@rancher/shell 0.3.0 → 0.3.1

package/components/LogItem.vue

@@ -0,0 +1,69 @@
+<script>
+import day from 'dayjs';
+import { DATE_FORMAT, TIME_FORMAT } from '@shell/store/prefs';
+import { escapeHtml } from '@shell/utils/string';
+
+export default {
+  props: {
+    source: {
+      type:    Object,
+      default: () => {}
+    }
+  },
+
+  computed: {
+    timeFormatStr() {
+      const dateFormat = escapeHtml( this.$store.getters['prefs/get'](DATE_FORMAT));
+      const timeFormat = escapeHtml( this.$store.getters['prefs/get'](TIME_FORMAT));
+
+      return `${ dateFormat } ${ timeFormat }`;
+    },
+  },
+
+  methods: {
+    format(time) {
+      if ( !time ) {
+        return '';
+      }
+
+      return day(time).format(this.timeFormatStr);
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="line">
+    <span class="time">{{ format(source.time) }}</span>
+    <span
+      class="msg"
+      v-html="source.msg"
+    />
+  </div>
+</template>
+
+<style lang='scss' scoped>
+.line {
+  font-family: Menlo,Consolas,monospace;
+  color: var(--logs-text);
+  display:flex;
+}
+
+.time {
+  white-space: nowrap;
+  display: none;
+  width: 0;
+  padding-right: 15px;
+  user-select: none;
+}
+
+.msg {
+  white-space: pre;
+
+  .highlight {
+    color: var(--logs-highlight);
+    background-color: var(--logs-highlight-bg);
+  }
+}
+
+</style>

package/components/PodSecurityAdmission.vue

@@ -0,0 +1,302 @@
+<script lang="ts">
+import Vue from 'vue';
+import { _VIEW, _CREATE } from '@shell/config/query-params';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+import { PSADimension, PSAMode } from '@shell/types/pod-security-admission';
+import {
+  PSADefaultLevel,
+  PSADefaultVersion, PSADimensions, PSALevels, PSAModes
+} from '@shell/config/pod-security-admission';
+import { pickBy, toDictionary } from '@shell/utils/object';
+
+interface PSAControl { active: boolean, level: string, version: string }
+const getPsaControl = (): PSAControl => ({
+  active:  false,
+  level:   PSADefaultLevel,
+  version: ''
+});
+
+// Type and function for exemptions form builder
+interface PSAExemptionControl { active: boolean, value: string }
+const getExemptionControl = (): PSAExemptionControl => ({
+  active: false,
+  value:  ''
+});
+
+export default Vue.extend({
+  components: {
+    Checkbox, LabeledSelect, LabeledInput
+  },
+  props: {
+    /**
+     * List of labels used for the resource
+     * Note: PSA labels are always paired
+     */
+    labels: {
+      type:    Object as () => Record<string, string>,
+      default: () => ({})
+    },
+
+    labelsAlwaysActive: {
+      type:    Boolean,
+      default: false
+    },
+
+    /**
+     * Map editing capabilities to the component
+     */
+    mode: {
+      type:     String,
+      required: true
+    },
+
+    /**
+     * List of exemptions used for the resource
+     */
+    exemptions: {
+      type:    Object as () => Record<PSADimension, string[]>,
+      default: () => ({} as Record<PSADimension, string[]>)
+    },
+
+    /**
+     * Prefix used for setting labels
+     */
+    labelsPrefix: {
+      type:    String,
+      default: ''
+    },
+
+    /**
+     * Inherited global identifier prefix for tests
+     * Define a term based on the parent component to avoid conflicts on multiple components
+     */
+    componentTestid: {
+      type:    String,
+      default: 'pod-security-admission'
+    }
+  },
+
+  data() {
+    return {
+      // Generate PSA form controls
+      psaControls:           toDictionary(PSAModes, getPsaControl) as Record<PSAMode, PSAControl>,
+      psaExemptionsControls: toDictionary(PSADimensions, getExemptionControl) as Record<PSADimension, PSAExemptionControl>,
+      options:               PSALevels.map(level => ({
+        value: level,
+        label: this.t(`podSecurityAdmission.labels.${ level }`)
+      })),
+    };
+  },
+
+  watch: {},
+
+  computed: {
+    isView(): boolean {
+      return this.mode === _VIEW;
+    },
+
+    /**
+     * Enable exemption form if any
+     */
+    hasExemptions(): boolean {
+      return Object.keys(this.exemptions).length > 0;
+    },
+  },
+
+  created() {
+    // Assign values to the form, overriding existing values
+    this.psaControls = {
+      ...this.psaControls,
+      ...this.getPsaControls()
+    };
+
+    this.psaExemptionsControls = this.getPsaExemptions();
+
+    // Emit initial value on creation if labels always active, as default predefined values are required
+    if (this.mode === _CREATE && this.labelsAlwaysActive) {
+      this.updateLabels();
+      this.updateExemptions();
+    }
+  },
+
+  methods: {
+    /**
+     * Filter out existing PSA labels and emit existing labels with new PSA ones
+     */
+    updateLabels(): void {
+      const nonPSALabels = pickBy(this.labels, (_, key) => !key.includes(this.labelsPrefix));
+      const labels = PSAModes.reduce((acc, mode) => {
+        return this.psaControls[mode].active || this.labelsAlwaysActive ? {
+          ...acc,
+          // Set default level if none
+          [`${ this.labelsPrefix }${ mode }`]:         this.psaControls[mode].level || PSADefaultLevel,
+          // Set default version if none
+          [`${ this.labelsPrefix }${ mode }-version`]: this.psaControls[mode].version || PSADefaultVersion
+        } : acc;
+      }, nonPSALabels);
+
+      this.$emit('updateLabels', labels);
+    },
+
+    /**
+     * Emit active exemptions in required format
+     */
+    updateExemptions(): void {
+      const exemptions = PSADimensions.reduce((acc, dimension) => {
+        const value = this.psaExemptionsControls[dimension].value.split(',').map(value => value.trim());
+        const active = this.psaExemptionsControls[dimension].active;
+
+        return {
+          ...acc,
+          [dimension]: active && value ? value : []
+        };
+      }, {});
+
+      this.$emit('updateExemptions', exemptions);
+    },
+
+    /**
+     * Generate form controls based on PSA labels in the provided dictionary
+     */
+    getPsaControls(): Record<PSAMode, PSAControl> {
+      return PSAModes.reduce((acc, mode) => {
+        const level = this.labels[`${ this.labelsPrefix }${ mode }`];
+        // Retrieve version, hiding the value 'latest' from the user
+        const version = (this.labels[`${ this.labelsPrefix }${ mode }-version`] || '').replace(PSADefaultVersion, '');
+
+        return level ? {
+          ...acc,
+          [mode]: {
+            active: true,
+            level,
+            version
+          }
+        } : acc;
+      }, {} as Record<PSAMode, PSAControl>);
+    },
+
+    /**
+     * Generate form exemptions based on PSA exemptions provided dictionary
+     */
+    getPsaExemptions(): Record<PSADimension, PSAExemptionControl> {
+      return PSADimensions.reduce((acc, dimension) => {
+        const values = (this.exemptions[dimension] || []).map(value => value.trim()).join(',');
+
+        return {
+          ...acc,
+          [dimension]: {
+            active: !!values.length,
+            value:  values
+          }
+        };
+      }, {}) as Record<PSADimension, PSAExemptionControl>;
+    },
+
+    /**
+     * Add checks on input for PSA controls to be active or not, allowing white cases
+     */
+    isPsaControlDisabled(active: boolean): boolean {
+      return !this.labelsAlwaysActive && (!active || this.isView);
+    }
+  }
+});
+</script>
+
+<template>
+  <div class="psa">
+    <!-- PSA -->
+    <p class="mb-30">
+      <t k="podSecurityAdmission.description" />
+    </p>
+
+    <div
+      v-for="(psaControl, level, i) in psaControls"
+      :key="'psaControl-' + i"
+      class="row row--y-center mb-20"
+    >
+      <span class="col span-2">
+        <Checkbox
+          v-if="!labelsAlwaysActive"
+          v-model="psaControl.active"
+          :data-testid="componentTestid + '--psaControl-' + i + '-active'"
+          :label="level"
+          :label-key="`podSecurityAdmission.labels.${ level }`"
+          :disabled="isView"
+          @input="updateLabels()"
+        />
+        <p v-else>
+          <t :k="`podSecurityAdmission.labels.${level}`" />
+        </p>
+      </span>
+
+      <span
+        class="
+          col
+          span-4"
+      >
+        <LabeledSelect
+          v-model="psaControl.level"
+          :data-testid="componentTestid + '--psaControl-' + i + '-level'"
+          :disabled="isPsaControlDisabled(psaControl.active)"
+          :options="options"
+          :mode="mode"
+          @input="updateLabels()"
+        />
+      </span>
+
+      <span class="col span-4">
+        <LabeledInput
+          v-model="psaControl.version"
+          :data-testid="componentTestid + '--psaControl-' + i + '-version'"
+          :disabled="isPsaControlDisabled(psaControl.active)"
+          :options="options"
+          :placeholder="t('podSecurityAdmission.version.placeholder', { psaControl: mode })"
+          :mode="mode"
+          @input="updateLabels()"
+        />
+      </span>
+    </div>
+
+    <!-- Exemptions -->
+    <template v-if="hasExemptions">
+      <slot name="title">
+        <h3>
+          <t k="podSecurityAdmission.exemptions.title" />
+        </h3>
+      </slot>
+      <p class="mb-30">
+        <t k="podSecurityAdmission.exemptions.description" />
+      </p>
+
+      <div
+        v-for="(psaExemptionsControl, dimension, i) in psaExemptionsControls"
+        :key="'psaExemptionsControl-' + i"
+        class="row row--y-center mb-20"
+      >
+        <span class="col span-2">
+          <Checkbox
+            v-model="psaExemptionsControl.active"
+            :data-testid="componentTestid + '--psaExemptionsControl-' + i + '-active'"
+            :label="dimension"
+            :label-key="`podSecurityAdmission.labels.${ dimension }`"
+            :disabled="isView"
+            @input="updateExemptions()"
+          />
+        </span>
+        <span class="col span-8">
+          <LabeledInput
+            v-model="psaExemptionsControl.value"
+            :data-testid="componentTestid + '--psaExemptionsControl-' + i + '-value'"
+            :disabled="(isView || !psaExemptionsControl.active)"
+            :options="options"
+            :placeholder="t('podSecurityAdmission.exemptions.placeholder', { psaExemptionsControl: dimension })"
+            :mode="mode"
+            @input="updateExemptions()"
+          />
+        </span>
+      </div>
+    </template>
+  </div>
+</template>

package/components/PromptModal.vue

@@ -88,6 +88,7 @@ export default {
     @closed="close()"
   >
     <component
+      v-bind="modalData.componentProps || {}"
       :is="component"
       v-if="opened && component"
       :resources="resources"

package/components/ResourceDetail/Masthead.vue

@@ -82,6 +82,10 @@ export default {
     },
   },
 
+  data() {
+    return { DETAIL_VIEW: _DETAIL };
+  },
+
   computed: {
     schema() {
       const inStore = this.storeOverride || this.$store.getters['currentStore'](this.resource);
@@ -125,6 +129,10 @@ export default {
       return null;
     },
 
+    detailsAction() {
+      return this.value?.detailsAction;
+    },
+
     shouldHifenize() {
       return (this.mode === 'view' || this.mode === 'edit') && this.resourceSubtype?.length && this.value?.nameDisplay?.length;
     },
@@ -354,6 +362,10 @@ export default {
 
       return parent?.location;
     },
+
+    hideNamespaceLocation() {
+      return this.$store.getters['currentProduct'].hideNamespaceLocation;
+    },
   },
 
   methods: {
@@ -368,6 +380,18 @@ export default {
 
     toggleSensitiveData(e) {
       this.$store.dispatch('prefs/set', { key: HIDE_SENSITIVE, value: !!e });
+    },
+
+    invokeDetailsAction() {
+      const action = this.detailsAction;
+
+      if (action) {
+        const fn = this.value[action.action];
+
+        if (fn) {
+          fn.apply(this.value, []);
+        }
+      }
     }
   }
 };
@@ -375,7 +399,7 @@ export default {
 
 <template>
   <div class="masthead">
-    <header class="header-layout">
+    <header>
       <div class="title">
         <div class="primaryheader">
           <h1>
@@ -407,7 +431,18 @@ export default {
         >
           <span v-if="isNamespace && project">{{ t("resourceDetail.masthead.project") }}: <nuxt-link :to="project.detailLocation">{{ project.nameDisplay }}</nuxt-link></span>
           <span v-else-if="isWorkspace">{{ t("resourceDetail.masthead.workspace") }}: <nuxt-link :to="workspaceLocation">{{ namespace }}</nuxt-link></span>
-          <span v-else-if="namespace && !hasMultipleNamespaces">{{ t("resourceDetail.masthead.namespace") }}: <nuxt-link :to="namespaceLocation">{{ namespace }}</nuxt-link></span>
+          <span v-else-if="namespace && !hasMultipleNamespaces">
+            {{ t("resourceDetail.masthead.namespace") }}:
+            <nuxt-link
+              v-if="!hideNamespaceLocation"
+              :to="namespaceLocation"
+            >
+              {{ namespace }}
+            </nuxt-link>
+            <span v-else>
+              {{ namespace }}
+            </span>
+          </span>
           <span v-if="parent.showAge">{{ t("resourceDetail.masthead.age") }}: <LiveDate
             class="live-date"
             :value="value.creationTimestamp"
@@ -418,11 +453,21 @@ export default {
       <slot name="right">
         <div class="actions-container">
           <div class="actions">
+            <button
+              v-if="detailsAction && currentView === DETAIL_VIEW && isView"
+              type="button"
+              class="btn role-primary actions mr-10"
+              :disabled="!detailsAction.enabled"
+              @click="invokeDetailsAction"
+            >
+              {{ detailsAction.label }}
+            </button>
             <ButtonGroup
               v-if="showSensitiveToggle"
               :value="!!hideSensitiveData"
               icon-size="lg"
               :options="sensitiveOptions"
+              class="mr-10"
               @input="toggleSensitiveData"
             />
 
@@ -430,6 +475,7 @@ export default {
               v-if="viewOptions && isView"
               v-model="currentView"
               :options="viewOptions"
+              class="mr-10"
             />
 
             <button
@@ -522,4 +568,10 @@ export default {
     }
   }
 
+  div.actions-container > div.actions {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+
 </style>

package/components/ResourceDetail/index.vue

@@ -26,7 +26,8 @@ function modeFor(route) {
   }
 }
 
-async function getYaml(model) {
+async function getYaml(store, model) {
+  const inStore = store.getters['currentStore'](model.type);
   let yaml;
   const opt = { headers: { accept: 'application/yaml' } };
 
@@ -34,7 +35,9 @@ async function getYaml(model) {
     yaml = (await model.followLink('view', opt)).data;
   }
 
-  return yaml;
+  const cleanedYaml = await store.dispatch(`${ inStore }/cleanForDownload`, yaml);
+
+  return cleanedYaml;
 }
 
 export default {
@@ -146,6 +149,11 @@ export default {
       initialModel = await store.dispatch(`${ inStore }/clone`, { resource: liveModel });
       model = await store.dispatch(`${ inStore }/clone`, { resource: liveModel });
 
+      if (model.forceYaml === true) {
+        as = _YAML;
+        this.as = as;
+      }
+
       if ( as === _YAML ) {
         yaml = createYaml(schemas, resource, data);
       }
@@ -182,7 +190,7 @@ export default {
       initialModel = await store.dispatch(`${ inStore }/clone`, { resource: liveModel });
 
       if ( as === _YAML ) {
-        yaml = await getYaml(liveModel);
+        yaml = await getYaml(this.$store, liveModel);
       }
 
       if ( as === _GRAPH ) {
@@ -222,7 +230,6 @@ export default {
       this.value.applyDefaults(this, realMode);
     }
   },
-
   data() {
     return {
       chartData:       null,
@@ -306,7 +313,7 @@ export default {
     // Auto refresh YAML when the model changes
     async 'value.metadata.resourceVersion'(a, b) {
       if ( this.mode === _VIEW && this.as === _YAML && a && b && a !== b) {
-        this.yaml = await getYaml(this.liveModel);
+        this.yaml = await getYaml(this.$store, this.liveModel);
       }
     }
   },

package/components/ResourceList/Masthead.vue

@@ -65,6 +65,11 @@ export default {
       default: false
     },
 
+    loadNamespace: {
+      type:    String,
+      default: null
+    },
+
     showIncrementalLoadingIndicator: {
       type:    Boolean,
       default: false
@@ -163,7 +168,7 @@ export default {
 </script>
 
 <template>
-  <header class="header-layout">
+  <header>
     <slot name="typeDescription">
       <TypeDescription :resource="resource" />
     </slot>
@@ -178,6 +183,7 @@ export default {
         v-if="showIncrementalLoadingIndicator"
         :resources="loadResources"
         :indeterminate="loadIndeterminate"
+        :namespace="loadNamespace"
       />
     </div>
     <div class="actions-container">
@@ -217,4 +223,8 @@ export default {
       margin: 0;
     }
   }
+
+  header {
+    margin-bottom: 20px;
+  }
 </style>

package/components/ResourceList/ResourceLoadingIndicator.vue

@@ -16,7 +16,11 @@ export default {
     indeterminate: {
       type:    Boolean,
       default: false,
-    }
+    },
+    namespace: {
+      type:    String,
+      default: undefined
+    },
   },
 
   data() {
@@ -40,6 +44,10 @@ export default {
     // Have we loaded all resources for the types that are needed
     haveAll() {
       return this.resources.reduce((acc, r) => {
+        if (this.namespace) {
+          return acc && this.$store.getters[`${ this.inStore }/haveAllNamespace`](r, this.namespace);
+        }
+
         return acc && this.$store.getters[`${ this.inStore }/haveAll`](r);
       }, true);
     },
@@ -49,7 +57,9 @@ export default {
       const clusterCounts = this.$store.getters[`${ this.inStore }/all`](COUNT);
 
       return this.resources.reduce((acc, r) => {
-        const count = clusterCounts?.[0]?.counts?.[r]?.summary?.count || 0;
+        const resourceCounts = clusterCounts?.[0]?.counts?.[r];
+        const resourceCount = this.namespace ? resourceCounts?.namespaces?.[this.namespace]?.count : resourceCounts?.summary?.count;
+        const count = resourceCount || 0;
 
         return acc + count;
       }, 0);