dashboard-shell-shell 1.0.10000011122 → 1.6.0-alpha.2

package/components/ConfigMapSettings/index.vue

@@ -0,0 +1,354 @@
+<script lang="ts">
+import { PropType } from 'vue';
+import jsyaml from 'js-yaml';
+import { merge } from 'lodash';
+import { set, get } from '@shell/utils/object';
+import YAML from 'yaml';
+import { CONFIG_MAP, MANAGEMENT } from '@shell/config/types';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import { toSeconds } from '@shell/utils/duration';
+import Loading from '@shell/components/Loading.vue';
+import AsyncButton from '@shell/components/AsyncButton.vue';
+import { Banner } from '@components/Banner';
+import Settings from '@shell/components/ConfigMapSettings/Settings.vue';
+
+export type SettingType = 'string' | 'number' | 'boolean' | 'array' | 'object';
+
+export type SettingHandler = 'Textarea' | 'KeyValue' | 'Taints' | 'UnitInput';
+
+export interface Item {
+  type: SettingType,
+  value: string
+}
+
+export interface Group {
+  name: string,
+  children: string[],
+  expanded?: boolean,
+  weight: number,
+}
+
+export interface Setting {
+  path: string,
+  type: SettingType,
+  handler?: SettingHandler,
+  items?: Item[],
+  default: object | string | boolean | number,
+  tooltip?: boolean,
+  info?: boolean,
+  placeholder?: boolean,
+  class?: string,
+  weight: number,
+  // validationRules,
+}
+
+interface DataType {
+  noPermissions: boolean,
+  configMap: object | null,
+  values: object,
+  errors: string[]
+  valuesErrors: string[],
+}
+
+export default {
+
+  name: 'ConfigMapSettings',
+
+  emits: ['done', 'errors'],
+
+  components: {
+    Loading,
+    AsyncButton,
+    Banner,
+    Settings,
+  },
+
+  props: {
+    /**
+     * A key-value object that defines a flat list of settings.
+     * Each entry describe the setting name and the path where to get/set in the ConfigMap data field
+     *
+     * example:
+     *
+     *  {
+     *    setting-name: {
+     *      weight:  0,
+     *      type:    'number',
+     *      path:    'the.path.to.nested.value',
+     *      default: '50',
+     *      tooltip: false,
+     *      info:    false,
+     *    },
+     *    ...
+     *  }
+     */
+    settings: {
+      type:     Object as PropType<Record<string, Setting>>,
+      required: true
+    },
+
+    /**
+     * Groups of Settings
+     */
+    groups: {
+      type:    Array as PropType<Group[]>,
+      default: () => [],
+    },
+
+    /**
+     * ConfigMap name
+     */
+    name: {
+      type:     String,
+      required: true
+    },
+
+    /**
+     * ConfigMap namespace
+     */
+    namespace: {
+      type:     String,
+      required: true
+    },
+
+    /**
+     * The key in ConfigMap.data where to save the settings values
+     */
+    dataKey: {
+      type:     String,
+      required: true
+    },
+
+    inStore: {
+      type:    String,
+      default: 'cluster',
+    },
+
+    labelKeyPrefix: {
+      type:    String,
+      default: 'settings'
+    },
+
+    showDescription: {
+      type:    Boolean,
+      default: false
+    },
+
+    showInfo: {
+      type:    Boolean,
+      default: false
+    },
+  },
+
+  async fetch() {
+    if (this.$store.getters[`${ this.inStore }/schemaFor`](CONFIG_MAP)) {
+      try {
+        this.configMap = await this.$store.dispatch(`${ this.inStore }/find`, { type: CONFIG_MAP, id: `${ this.namespace }/${ this.name }` });
+      } catch (err) {
+      }
+
+      this.initValues();
+    } else {
+      this.noPermissions = true;
+    }
+  },
+
+  data(): DataType {
+    return {
+      noPermissions: false,
+      configMap:     null,
+      values:        {},
+      errors:        [],
+      valuesErrors:  []
+    };
+  },
+
+  computed: {
+    mode() {
+      if (this.valuesErrors.length) {
+        return _VIEW;
+      }
+
+      const settingsSchema = this.$store.getters[`${ this.inStore }/schemaFor`](MANAGEMENT.SETTING);
+      const configMapsSchema = this.$store.getters[`${ this.inStore }/schemaFor`](CONFIG_MAP);
+
+      if (settingsSchema?.resourceMethods?.includes('PUT') && configMapsSchema?.resourceMethods?.includes('PUT')) {
+        return _EDIT;
+      }
+
+      return _VIEW;
+    },
+
+    canEdit() {
+      return this.mode === _EDIT;
+    },
+
+    fetchState(): {pending: boolean} {
+      return (this as any).$fetchState;
+    },
+  },
+
+  methods: {
+    async save(btnCB: (arg: boolean) => void) {
+      const configMap = this.configMap || await this.$store.dispatch(`${ this.inStore }/create`, {
+        type:     CONFIG_MAP,
+        metadata: {
+          namespace: this.namespace,
+          name:      this.name
+        }
+      });
+
+      if (!configMap.data) {
+        configMap.data = {};
+      }
+
+      try {
+        const configMapValues = YAML.parse(configMap.data[this.dataKey] || '');
+
+        const currentValues = this.buildValues(this.values, this.encodeValue);
+
+        const values = merge(configMapValues, currentValues);
+
+        configMap.data[this.dataKey] = jsyaml.dump(values);
+
+        await configMap.save();
+
+        this.$emit('done', configMap);
+        btnCB(true);
+      } catch (err) {
+        this.errors.push(err as string);
+        this.$emit('errors', this.errors);
+        btnCB(false);
+      }
+    },
+
+    initValues() {
+      try {
+        const configMapValues = get(this.configMap || {}, `data.${ this.dataKey }`);
+        const currentValues = YAML.parse(configMapValues || '');
+
+        this.values = this.buildValues(currentValues, this.decodeValue);
+      } catch (err) {
+        const msg = this.t(`${ this.labelKeyPrefix }.parseError`, { id: `${ this.namespace }/${ this.name }`, path: `data.${ this.dataKey }` }, true);
+
+        this.valuesErrors.push(msg);
+      }
+    },
+
+    buildValues<T = object | string | boolean | number>(values: object, fn: (name: string, value: T) => T) {
+      return Object.keys(this.settings).reduce((acc, name) => {
+        const value = get(values, this.settings[name].path);
+
+        set(acc, this.settings[name].path, fn(name, value));
+
+        return acc;
+      }, {});
+    },
+
+    decodeValue<T = object | string | boolean | number>(name: string, value: T): T {
+      // use default value
+      if (value === undefined) {
+        value = this.settings[name].default as T;
+      }
+
+      // object types to json
+      if (this.settings[name].type === 'object' && this.settings[name].handler === 'Textarea') {
+        value = JSON.stringify(value || {}) as T;
+      }
+
+      // number in seconds
+      if (this.settings[name].type === 'number' && this.settings[name].handler === 'UnitInput') {
+        value = toSeconds(value) as T;
+      }
+
+      return value;
+    },
+
+    encodeValue<T = object | string | boolean | number>(name: string, value: T): T {
+      // object types from json
+      if (this.settings[name].type === 'object' && this.settings[name].handler === 'Textarea') {
+        value = YAML.parse(value as string);
+      }
+
+      // number to string with unit of measure
+      if (this.settings[name].type === 'number' && this.settings[name].handler === 'UnitInput') {
+        value = `${ value || 0 }s` as T;
+      }
+
+      return value;
+    }
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="fetchState.pending" />
+  <div v-else-if="noPermissions">
+    <slot name="no-permissions">
+      <span>
+        {{ t(`${ labelKeyPrefix }.noPermissions`) }}
+      </span>
+    </slot>
+  </div>
+  <div
+    v-else
+    data-testid="cm-settings"
+  >
+    <slot name="header">
+      <div class="header">
+        <h1>
+          {{ t(`${ labelKeyPrefix }.title`) }}
+        </h1>
+
+        <label
+          v-if="showDescription"
+          class="text-label"
+        >
+          {{ t(`${ labelKeyPrefix }.description`, {}, true) }}
+        </label>
+      </div>
+    </slot>
+
+    <slot name="info">
+      <Banner
+        v-if="showInfo"
+        color="info"
+        :label="t(`${ labelKeyPrefix }.info`, {}, true)"
+      />
+    </slot>
+
+    <slot name="errors">
+      <template
+        v-for="(err, j) in [ ...valuesErrors, ...errors ]"
+        :key="j"
+      >
+        <Banner
+          color="error"
+          data-testid="cm-settings-error"
+          :label="err"
+        />
+      </template>
+    </slot>
+
+    <Settings
+      class="mt-10"
+      :settings="settings"
+      :groups="groups"
+      :values="values"
+      :mode="mode"
+      :label-key-prefix="labelKeyPrefix"
+      @update:value="values=$event"
+    />
+
+    <div v-if="canEdit">
+      <AsyncButton
+        class="pull-right mt-30"
+        :action-label="t(`${ labelKeyPrefix }.apply`)"
+        @click="save"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped lang='scss'>
+</style>

package/components/ContainerResourceLimit.vue

@@ -177,7 +177,7 @@ export default {
       </div>
     </div>
 
-    <div class="row mb-20">
+    <div class="row">
       <span class="col span-6">
         <UnitInput
           v-model:value="requestsCpu"
@@ -206,7 +206,7 @@ export default {
       </span>
     </div>
 
-    <div class="row mb-20">
+    <div class="row">
       <span class="col span-6">
         <UnitInput
           v-model:value="limitsCpu"

package/components/CopyToClipboard.vue

@@ -42,3 +42,18 @@ export default {
     @click="clicked"
   />
 </template>
+
+<style lang="scss"scoped>
+button {
+  min-width: auto;
+}
+
+.bg-success{
+  background-color: var(--success-hover-text) !important;
+  color: #333 !important;
+}
+.bg-success:hover{
+  background-color: var(--success-hover-text) !important;
+  color: var(--primary) !important;
+}
+</style>

package/components/CruResource.vue

@@ -265,7 +265,7 @@ export default {
       return !this.errors ? {} : this.errorsMap || this.errors.reduce((acc, error) => ({
         ...acc,
         [error]: {
-          message: error,
+          message: this.formatError(error),
           icon:    null
         }
       }), {});
@@ -371,19 +371,23 @@ export default {
     },
 
     async clickSave(buttonDone) {
-      try {
-        await this.createNamespaceIfNeeded();
-
-        // If the attempt to create the new namespace
-        // is successful, save the resource.
-        this.$emit('finish', buttonDone);
-      } catch (err) {
+      if (this.createNamespace) {
+        try {
+          await this.createNamespaceIfNeeded();
+        } catch (err) {
         // After the attempt to create the namespace,
         // show any applicable errors if the namespace is
         // invalid.
-        this.$emit('error', exceptionToErrorsArray(err.message));
-        buttonDone(false);
+          this.$emit('error', exceptionToErrorsArray(err.message));
+          buttonDone(false);
+
+          return;
+        }
       }
+
+      // If the attempt to create the new namespace
+      // was successful or no ns needs to be created, save the resource.
+      this.$emit('finish', buttonDone);
     },
 
     save() {
@@ -395,24 +399,19 @@ export default {
       const newNamespaceName = get(this.resource, this.namespaceKey);
       let namespaceAlreadyExists = false;
 
-      if (!this.createNamespace) {
-        return;
-      }
-
       try {
         // This is in a try-catch block because the call to fetch
         // a namespace throws an error if the namespace is not found.
         namespaceAlreadyExists = !!(await this.$store.dispatch(`${ inStore }/find`, { type: NAMESPACE, id: newNamespaceName }));
       } catch {}
 
-      if (this.createNamespace && !namespaceAlreadyExists) {
+      if (!namespaceAlreadyExists) {
         try {
           const newNamespace = await this.$store.dispatch(`${ inStore }/createNamespace`, { name: newNamespaceName }, { root: true });
 
           newNamespace.applyDefaults();
           await newNamespace.save();
         } catch (e) {
-          // this.errors = exceptionToErrorsArray(e);
           this.$emit('error', exceptionToErrorsArray(e));
           throw new Error(`Could not create the new namespace. ${ e.message }`);
         }
@@ -427,6 +426,94 @@ export default {
 
     shouldProvideSlot(slot) {
       return slot !== 'default' && typeof this.$slots[slot] === 'function';
+    },
+
+    formatError(err) {
+      if ( typeof err === 'string') {
+        return err;
+      }
+
+      if ( err?.code === 'ActionNotAvailable' ) {
+        return this.t('errors.actionNotAvailable');
+      }
+      const msg = !!err?.message ? err.message : '';
+      let messageDetail = '';
+
+      if (!!err?.message && !!err.detail) {
+        messageDetail = this.t('errors.messageAndDetail', { message: err.message, detail: err.detail });
+      } else if (!!err?.message || !!err.detail) {
+        const val = err.message ? err.message : err.detail;
+
+        messageDetail = this.t('errors.messageOrDetail', { val });
+      }
+
+      if ( err?.status === 422 ) {
+        const name = err?.fieldName;
+        const code = err?.code;
+        let codeExplanation = '';
+
+        switch ( err?.code ) {
+        case 'MissingRequired':
+          codeExplanation = this.t('errors.missingRequired'); break;
+        case 'NotUnique':
+          codeExplanation = this.t('errors.notUnique'); break;
+        case 'NotNullable':
+          codeExplanation = this.t('errors.notNullable'); break;
+        case 'InvalidOption':
+          codeExplanation = this.t('errors.invalidOption'); break;
+        case 'InvalidCharacters':
+          codeExplanation = this.t('errors.invalidCharacters'); break;
+        case 'MinLengthExceeded':
+          codeExplanation = this.t('errors.minLengthExceeded'); break;
+        case 'MaxLengthExceeded':
+          codeExplanation = this.t('errors.maxLengthExceeded'); break;
+        case 'MinLimitExceeded':
+          codeExplanation = this.t('errors.minLimitExceeded'); break;
+        case 'MaxLimitExceded':
+          codeExplanation = this.t('errors.maxLimitExceded'); break;
+        }
+
+        if (!!name) {
+          if (!!codeExplanation) {
+            if (!!messageDetail) {
+              return this.t('errors.failedInApi.withName.withCodeExplanation.withMessageDetail', {
+                name, codeExplanation, messageDetail
+              });
+            }
+
+            return this.t('errors.failedInApi.withName.withCodeExplanation.withoutMessageDetail', { name, codeExplanation });
+          }
+          if (!!messageDetail) {
+            return this.t('errors.failedInApi.withName.withMessageDetail', { name, messageDetail });
+          }
+
+          return this.t('errors.failedInApi.withName.withoutAnythingElse', { name });
+        } else {
+          if (!!messageDetail) {
+            if (!!codeExplanation) {
+              return this.t('errors.failedInApi.withoutName.withMessageDetail.withCodeExplanation', { codeExplanation, messageDetail });
+            }
+
+            return this.t('errors.failedInApi.withoutName.withMessageDetail.withoutCodeExplanation', { messageDetail });
+          } else if (!!code) {
+            if (!!codeExplanation) {
+              return this.t('errors.failedInApi.withoutName.withCode.withCodeExplanation', { code, codeExplanation });
+            }
+
+            return this.t('errors.failedInApi.withoutName.withCode.withoutCodeExplanation', { code });
+          }
+
+          return this.t('errors.failedInApi.withoutAnything');
+        }
+      } else if ( err?.status === 404 ) {
+        if (!!err?.opt?.url) {
+          return this.t('errors.notFound.withUrl', { msg, url: err.opt.url });
+        }
+
+        return this.t('errors.notFound.withoutUrl', { msg });
+      }
+
+      return messageDetail.length > 0 ? messageDetail : err;
     }
   },
 
@@ -823,7 +910,6 @@ export default {
   }
 }
 .create-resource-container {
-
   .resource-container {
     display: flex; // Ensures content grows in child CruResources
     flex-direction: column;
@@ -887,6 +973,7 @@ form.create-resource-container .cru {
   }
 }
 .cru {
+  height: 100%;
   display: flex;
   flex-direction: column;
   flex-grow: 1;

package/components/CruResourceFooter.vue

@@ -120,7 +120,7 @@ export default {
   z-index: z-index('cruFooter');
 
   .btn {
-    margin-right: 10px;
+    margin-left: 10px;
   }
 }
 

package/components/DetailText.vue

@@ -22,7 +22,7 @@ export default {
 
     value: {
       type:    String,
-      default: null,
+      default: '',
     },
 
     maxLength: {
@@ -40,6 +40,12 @@ export default {
       default: false
     },
 
+    // Will manage it's own state around showing or hiding sensitive data
+    concealStandAlone: {
+      type:    Boolean,
+      default: false
+    },
+
     monospace: {
       type:    Boolean,
       default: true
@@ -54,7 +60,7 @@ export default {
   data() {
     const expanded = this.value.length <= this.maxLength;
 
-    return { expanded };
+    return { expanded, standAloneHide: true };
   },
 
   computed: {
@@ -127,6 +133,10 @@ export default {
     },
 
     hideSensitiveData() {
+      if (this.concealStandAlone) {
+        return this.standAloneHide;
+      }
+
       return this.$store.getters['prefs/get'](HIDE_SENSITIVE);
     },
 
@@ -134,6 +144,14 @@ export default {
       return this.conceal && this.hideSensitiveData && !this.isBinary;
     },
 
+    sensitiveIcon() {
+      return this.standAloneHide ? 'icon-show' : 'icon-hide';
+    },
+
+    sensitiveAria() {
+      return this.standAloneHide ? this.t('detailText.sensitive.show') : this.t('detailText.sensitive.hide');
+    },
+
     ...mapGetters({ t: 'i18n/t' })
   },
   methods: {
@@ -169,6 +187,7 @@ export default {
       :options="{mode:{name:'javascript', json:true}, lineNumbers:false, foldGutter:false, readOnly:true}"
       :value="jsonStr"
       :class="{'conceal': concealed}"
+      aria-live="polite"
     />
 
     <span
@@ -176,6 +195,7 @@ export default {
       v-clean-html="bodyHtml"
       data-testid="detail-top_html"
       :class="{'conceal': concealed, 'monospace': monospace && !isBinary}"
+      aria-live="polite"
     />
 
     <template v-if="!isBinary && !jsonStr && isLong && !expanded">
@@ -185,13 +205,27 @@ export default {
       >{{ plusMore }}</a>
     </template>
 
-    <CopyToClipboard
-      v-if="copy && !isBinary"
-      :text="value"
-      class="role-tertiary"
-      action-color=""
-      :aria-label="t('detailText.copyAriaLabel', {item: itemLabel })"
-    />
+    <div class="action-group">
+      <button
+        v-if="conceal && concealStandAlone"
+        class="sensitive btn ready-for-action role-tertiary"
+        :aria-label="sensitiveAria"
+        @click="standAloneHide = !standAloneHide"
+      >
+        <i
+          class="icon icon-lg"
+          :class="sensitiveIcon"
+          :alt="sensitiveAria"
+        />
+      </button>
+      <CopyToClipboard
+        v-if="copy && !isBinary"
+        :text="value"
+        class="role-tertiary"
+        action-color=""
+        :aria-label="t('detailText.copyAriaLabel', {item: itemLabel })"
+      />
+    </div>
   </div>
 </template>
 
@@ -205,11 +239,27 @@ export default {
   border-radius: var(--border-radius);
   border: solid var(--border-width) var(--input-border);
 
-  > button {
+  .action-group {
     position: absolute;
     top: -1px;
     right: -1px;
-    border-radius: 0 0 0 var(--border-radius);
+    white-space-collapse:collapse;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+
+    button{
+      border-radius: 0;
+
+      &:first-of-type {
+        border-radius: 0 0 0 var(--border-radius);
+      }
+
+      &.sensitive {
+        margin-right: -1px;
+        padding: 12px 16px;
+      }
+    }
   }
 }