@rancher/shell 0.3.0 → 0.3.2

package/components/IconOrSvg.vue

@@ -0,0 +1,178 @@
+<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 currTheme = this.$store.getters['prefs/theme'];
+      let uiColor, hoverColor;
+
+      // grab css vars values based on the actual stylesheets, depending on the theme applied
+      // use for loops to minimize computation
+      for (let i = 0; i < Object.keys(document.styleSheets).length; i++) {
+        let found = false;
+        const stylesheet = document.styleSheets[i];
+
+        if (stylesheet && stylesheet.cssRules) {
+          for (let x = 0; x < Object.keys(stylesheet.cssRules).length; x++) {
+            const cssRules = stylesheet.cssRules[x];
+            const selectorText = currTheme === 'light' ? 'body, .theme-light' : '.theme-dark';
+
+            if (cssRules.selectorText && cssRules.selectorText === selectorText) {
+              uiColor = mapStandardColors(cssRules.style.getPropertyValue(colors[this.color].color).trim());
+              hoverColor = mapStandardColors(cssRules.style.getPropertyValue(colors[this.color].hover).trim());
+              found = true;
+              break;
+            }
+          }
+        }
+        if (found) {
+          break;
+        } else {
+          continue;
+        }
+      }
+
+      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 };
+          }
+          li: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/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"