@rancher/shell 0.2.5 → 0.3.1

package/components/IconOrSvg.vue

@@ -0,0 +1,149 @@
+<script>
+
+/**
+ * This component renders the icon in the top level menu.
+ * Icon can either be via a font via the 'icon' property or an svg via the 'src' property
+ *
+ * The trickiness here is that we want the icon to be the correct color - both normally and when hovered
+ * For a font icon, this is easy, since we just set the color css property
+ * For an svg icon included with the <img> tag this is harder - there is no way to apply css to
+ * the svg brought in this way - the workaround is to apply a css filter - in order to do this we
+ * need to generate the css filter for the required color - the code for that is in the 'svg-filter' utility
+ *
+ * We cache filters and css for given colors, so we only generate them once.
+ *
+ * This makes the code here look complex - but we are essentially generating the css filters
+ * and then injecting custom css into the document so that any icons included via svg will
+ * show with the desired colors for the theme.
+ */
+import Vue from 'vue';
+import { Solver } from '@shell/utils/svg-filter';
+import { colorToRgb, mapStandardColors } from '@shell/utils/color';
+
+const filterCache = {};
+const cssCache = {};
+
+const colors = {
+  header: {
+    color: '--header-btn-text',
+    hover: '--header-btn-text-hover'
+  },
+  primary: {
+    color: '--link',
+    hover: '--primary-hover-text'
+  }
+};
+
+export default {
+  name:  'IconOrSvg',
+  props: {
+    src: {
+      type:    String,
+      default: () => undefined,
+    },
+    icon: {
+      type:    String,
+      default: () => undefined,
+    },
+    color: {
+      type:    String,
+      default: () => 'primary',
+    }
+  },
+
+  data() {
+    return { className: '' };
+  },
+
+  created() {
+    if (this.src) {
+      this.setColor();
+    }
+  },
+
+  methods: {
+    setColor() {
+      const uiColor = mapStandardColors(getComputedStyle(document.body).getPropertyValue(colors[this.color].color).trim());
+      const hoverColor = mapStandardColors(getComputedStyle(document.body).getPropertyValue(colors[this.color].hover).trim());
+
+      const uiColorRGB = colorToRgb(uiColor);
+      const hoverColorRGB = colorToRgb(hoverColor);
+      const uiColorStr = `${ uiColorRGB.r }-${ uiColorRGB.g }-${ uiColorRGB.b }`;
+      const hoverColorStr = `${ hoverColorRGB.r }-${ hoverColorRGB.g }-${ hoverColorRGB.b }`;
+
+      const className = `svg-icon-${ uiColorStr }-${ hoverColorStr }`;
+
+      if (!cssCache[className]) {
+        let hoverFilter = filterCache[hoverColor];
+
+        if (!hoverFilter) {
+          const solver = new Solver(hoverColorRGB);
+          const res = solver.solve();
+
+          hoverFilter = res?.filter;
+          filterCache[hoverColor] = hoverFilter;
+        }
+
+        let mainFilter = filterCache[uiColor];
+
+        if (!mainFilter) {
+          const solver = new Solver(uiColorRGB);
+          const res = solver.solve();
+
+          mainFilter = res?.filter;
+          filterCache[uiColor] = mainFilter;
+        }
+
+        // Add stylesheet (added as global styles)
+        const styles = `
+          img.${ className } {
+            ${ mainFilter };
+          }
+          img.${ className }:hover {
+            ${ hoverFilter };
+          }
+          button:hover > img.${ className } {
+            ${ hoverFilter };
+          }
+          a.option:hover > img.${ className } {
+            ${ hoverFilter };
+          }      `;
+
+        const styleSheet = document.createElement('style');
+
+        styleSheet.innerText = styles;
+        document.head.appendChild(styleSheet);
+
+        cssCache[className] = true;
+      }
+
+      Vue.set(this, 'className', className);
+    }
+  }
+};
+</script>
+
+<template>
+  <img
+    v-if="src"
+    :src="src"
+    class="svg-icon"
+    :class="className"
+  >
+  <i
+    v-else-if="icon"
+    class="icon group-icon"
+    :class="icon"
+  />
+  <i
+    v-else
+    class="icon icon-extension"
+  />
+</template>
+
+<style lang="scss" scoped>
+  .svg-icon {
+    height: 24px;
+    width: 24px;
+  }
+</style>

package/components/Import.vue

@@ -40,11 +40,11 @@ export default {
 
   data() {
     return {
-      currentYaml:      '',
-      allNamespaces:    null,
-      errors:           null,
-      rows:             null,
-      done:             false,
+      currentYaml:   '',
+      allNamespaces: null,
+      errors:        null,
+      rows:          null,
+      done:          false,
     };
   },
 

package/components/InputOrDisplay.vue

@@ -28,7 +28,7 @@ const component = Vue.component('InputOrDisplay', {
       required: true
     },
     value: {
-      type:     [Number, String, Array, undefined],
+      type:    [Number, String, Array, undefined],
       default: ''
     },
     mode: {

package/components/KeyValueView.vue

@@ -8,7 +8,7 @@ export default {
 
   props: {
     value: {
-      type:     [Array, Object],
+      type:    [Array, Object],
       default: null,
     },
 

package/components/LabelValue.vue

@@ -6,7 +6,7 @@ export default {
       required: true
     },
     value: {
-      type:     [Number, String, undefined],
+      type:    [Number, String, undefined],
       default: ''
     }
   }

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

@@ -10,7 +10,7 @@ export default {
     Card, Banner, AsyncButton
   },
 
-  props:      {
+  props: {
     name: {
       type:     String,
       required: true

package/components/MoveModal.vue

@@ -44,7 +44,7 @@ export default {
     }
   },
 
-  watch:    {
+  watch: {
     showPromptMove(show) {
       if (show) {
         this.$modal.show(this.modalName);

package/components/PercentageBar.vue

@@ -17,8 +17,8 @@ export default {
      * A value representing the percentage to be displayed. *Must be a value between 0 and 100*.
      */
     value: {
-      type:      Number,
-      required:  true,
+      type:     Number,
+      required: true,
       validator(value) {
         return value >= 0;
       }

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

@@ -11,7 +11,7 @@ export default {
   data() {
     return { valid: false, password: '' };
   },
-  computed:   { ...mapGetters({ t: 'i18n/t' }) },
+  computed: { ...mapGetters({ t: 'i18n/t' }) },
   methods:  {
     show(show) {
       if (show) {

package/components/PromptModal.vue

@@ -13,7 +13,7 @@ export default {
     return { opened: false, backgroundClosing: null };
   },
 
-  computed:   {
+  computed: {
     ...mapState('action-menu', ['showModal', 'modalData']),
 
     resources() {
@@ -88,6 +88,7 @@ export default {
     @closed="close()"
   >
     <component
+      v-bind="modalData.componentProps || {}"
       :is="component"
       v-if="opened && component"
       :resources="resources"

package/components/PromptRemove.vue

@@ -40,7 +40,7 @@ export default {
       chartsDeleteCrd:     false
     };
   },
-  computed:   {
+  computed: {
     names() {
       return this.toRemove.map(obj => obj.nameDisplay).slice(0, 5);
     },
@@ -153,7 +153,7 @@ export default {
     ...mapGetters({ t: 'i18n/t' }),
   },
 
-  watch:    {
+  watch: {
     showPromptRemove(show) {
       if (show) {
         const selected = this.toRemove[0];

package/components/PromptRestore.vue

@@ -33,17 +33,17 @@ export default {
 
   data() {
     return {
-      errors:              [],
-      labels:              {},
-      restoreMode:         'all',
-      loaded:              false,
-      allSnapshots:        {},
-      sortedSnapshots:     [],
-      selectedSnapshot:    null,
+      errors:           [],
+      labels:           {},
+      restoreMode:      'all',
+      loaded:           false,
+      allSnapshots:     {},
+      sortedSnapshots:  [],
+      selectedSnapshot: null,
     };
   },
 
-  computed:   {
+  computed: {
     // toRestore can be a provisioning.cattle.io.cluster or a rke.cattle.io.etcdsnapshot or an etcdBackup resource
     ...mapState('action-menu', ['showPromptRestore', 'toRestore']),
     ...mapGetters({ t: 'i18n/t' }),
@@ -160,16 +160,16 @@ export default {
           const now = cluster.spec?.rkeConfig?.etcdSnapshotRestore?.generation || 0;
 
           set(cluster, 'spec.rkeConfig.etcdSnapshotRestore', {
-            generation:         now + 1,
-            name:               this.snapshot.name,
-            restoreRKEConfig:   this.restoreMode,
+            generation:       now + 1,
+            name:             this.snapshot.name,
+            restoreRKEConfig: this.restoreMode,
           });
 
           await cluster.save();
         } else {
           await this.$store.dispatch('rancher/request', {
-            url:           `/v3/clusters/${ escape(this.snapshot.clusterId) }?action=restoreFromEtcdBackup`,
-            method:        'post',
+            url:    `/v3/clusters/${ escape(this.snapshot.clusterId) }?action=restoreFromEtcdBackup`,
+            method: 'post',
             data:   {
               etcdBackupId:     this.snapshot.id,
               restoreRkeConfig: this.restoreMode,