@rancher/shell 3.0.5-rc.3 → 3.0.5-rc.6

package/components/fleet/FleetSummary.vue

@@ -1,49 +1,8 @@
 <script>
-import { STATES, STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
+import { clone } from '@shell/utils/object';
+import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
 import FleetStatus from '@shell/components/fleet/FleetStatus';
-
-const getResourcesDefaultState = (labelGetter, stateKey) => {
-  return [
-    STATES_ENUM.READY,
-    STATES_ENUM.NOT_READY,
-    STATES_ENUM.WAIT_APPLIED,
-    STATES_ENUM.MODIFIED,
-    STATES_ENUM.MISSING,
-    STATES_ENUM.ORPHANED,
-    STATES_ENUM.UNKNOWN,
-  ].reduce((acc, state) => {
-    acc[state] = {
-      count:  0,
-      color:  STATES[state].color,
-      label:  labelGetter(`${ stateKey }.${ state }`, null, STATES[state].label ),
-      status: state
-    };
-
-    return acc;
-  }, {});
-};
-
-const getBundlesDefaultState = (labelGetter, stateKey) => {
-  return [
-    STATES_ENUM.READY,
-    STATES_ENUM.INFO,
-    STATES_ENUM.WARNING,
-    STATES_ENUM.NOT_READY,
-    STATES_ENUM.ERROR,
-    STATES_ENUM.ERR_APPLIED,
-    STATES_ENUM.WAIT_APPLIED,
-    STATES_ENUM.UNKNOWN,
-  ].reduce((acc, state) => {
-    acc[state] = {
-      count:  0,
-      color:  STATES[state].color,
-      label:  labelGetter(`${ stateKey }.${ state }`, null, STATES[state].label ),
-      status: state
-    };
-
-    return acc;
-  }, {});
-};
+import FleetUtils from '@shell/utils/fleet';
 
 export default {
 
@@ -67,24 +26,39 @@ export default {
     },
   },
 
+  data() {
+    let bundlesDefaultStates; let resourcesDefaultStates = {};
+
+    try {
+      bundlesDefaultStates = FleetUtils.getBundlesDefaultState(this.$store.getters['i18n/withFallback'], this.stateKey);
+      resourcesDefaultStates = FleetUtils.getResourcesDefaultState(this.$store.getters['i18n/withFallback'], this.stateKey);
+    } catch (error) {
+    }
+
+    return {
+      bundlesDefaultStates,
+      resourcesDefaultStates,
+    };
+  },
+
   computed: {
 
-    repoName() {
+    resourceName() {
       return this.value.metadata.name;
     },
 
-    repoNamespace() {
+    resourceNamespace() {
       return this.value.metadata.namespace;
     },
 
     bundleCounts() {
-      const resources = this.bundles.filter((item) => item.namespace === this.repoNamespace && item.repoName === this.repoName);
+      const resources = this.bundles.filter((item) => item.namespace === this.resourceNamespace && item.appSourceName === this.resourceName);
 
       if (!resources.length) {
         return [];
       }
 
-      const out = { ...getBundlesDefaultState(this.$store.getters['i18n/withFallback'], this.stateKey) };
+      const out = clone(this.bundlesDefaultStates);
 
       resources.forEach(({ status, metadata }) => {
         if (!status) {
@@ -149,7 +123,8 @@ export default {
     },
 
     resourceCounts() {
-      const out = { ...getResourcesDefaultState(this.$store.getters['i18n/withFallback'], this.stateKey) };
+      const out = clone(this.resourcesDefaultStates);
+
       const resourceStatuses = this.value.allResourceStatuses;
 
       Object.entries(resourceStatuses.states)
@@ -183,13 +158,13 @@ export default {
       title="Bundles"
       :values="bundleCounts"
       value-key="count"
-      data-testid="gitrepo-bundle-summary"
+      data-testid="resource-bundle-summary"
     />
     <FleetStatus
       title="Resources"
       :values="resourceCounts"
       value-key="count"
-      data-testid="gitrepo-deployment-summary"
+      data-testid="resource-deployment-summary"
     />
   </div>
 </template>

package/components/fleet/FleetValuesFrom.vue

@@ -0,0 +1,295 @@
+<script lang="ts">
+import { isEmpty } from 'lodash';
+import { checkSchemasForFindAllHash } from '@shell/utils/auth';
+import { CONFIG_MAP, SECRET } from '@shell/config/types';
+import { PropType } from 'vue';
+import { _EDIT, _VIEW } from '@shell/config/query-params';
+import { RcButton } from '@components/RcButton';
+import ValueFromResource from '@shell/components/form/ValueFromResource.vue';
+
+type KeyRefName = 'configMapKeyRef' | 'secretKeyRef';
+
+interface KeyRef {
+  key: string,
+  name: string,
+  namespace?: string,
+}
+
+interface ValueFrom {
+  configMapKeyRef?: KeyRef,
+  secretKeyRef?: KeyRef,
+}
+
+interface ValuesFrom {
+  id: number,
+  valueFrom: ValueFrom
+}
+
+interface DataType {
+  allSecrets: object[] | null,
+  allConfigMaps: object[] | null,
+  valuesFrom: ValuesFrom[],
+  id: number,
+}
+
+export default {
+
+  name: 'FleetValuesFrom',
+
+  emits: ['update:value'],
+
+  components: {
+    RcButton,
+    ValueFromResource
+  },
+
+  props: {
+    value: {
+      type:    Array as PropType<ValueFrom[]>,
+      default: () => []
+    },
+
+    namespace: {
+      type:    String,
+      default: ''
+    },
+
+    mode: {
+      type:    String,
+      default: _EDIT
+    },
+  },
+
+  async fetch() {
+    const hash = await checkSchemasForFindAllHash({
+      allSecrets: {
+        inStoreType: 'management',
+        type:        SECRET
+      },
+
+      allConfigMaps: {
+        inStoreType: 'management',
+        type:        CONFIG_MAP
+      }
+    }, this.$store) as { allSecrets: object[], allConfigMaps: object[] };
+
+    this.allSecrets = hash.allSecrets || [];
+    this.allConfigMaps = hash.allConfigMaps || [];
+  },
+
+  data(): DataType {
+    return {
+      allSecrets:    null,
+      allConfigMaps: null,
+      valuesFrom:    [],
+      id:            0,
+    };
+  },
+
+  mounted() {
+    this.valuesFrom = this.fromValuesFrom(this.value);
+  },
+
+  watch: {
+    namespace() {
+      this.valuesFrom = [];
+
+      this.update();
+    },
+  },
+
+  computed: {
+    valueFromOptions() {
+      return [
+        {
+          value: 'configMapKeyRef', label: this.t('fleet.helmOp.values.valuesFrom.options.configMapKeyRef'), hideVariableName: true
+        },
+        {
+          value: 'secretKeyRef', label: this.t('fleet.helmOp.values.valuesFrom.options.secretKeyRef'), hideVariableName: true
+        },
+      ];
+    },
+
+    isView(): boolean {
+      return this.mode === _VIEW;
+    }
+  },
+
+  methods: {
+    addValueFrom() {
+      this.valuesFrom.push({
+        id:        this.id++,
+        valueFrom: {}
+      });
+
+      this.update();
+
+      (this.$refs['add-button'] as { $el: HTMLElement })?.$el?.blur();
+    },
+
+    updateValueFrom(id: number, value: ValuesFrom) {
+      for (let index = 0; index < this.valuesFrom.length; index++) {
+        if (this.valuesFrom[index].id === id) {
+          const oldKeyRefName = Object.keys(this.valuesFrom[index]?.valueFrom || {})[0] as KeyRefName;
+          const newKeyRefName = Object.keys(value?.valueFrom || {})[0] as KeyRefName;
+
+          const oldKey = this.valuesFrom[index]?.valueFrom?.[oldKeyRefName]?.name;
+          const newKey = value?.valueFrom?.[newKeyRefName]?.name;
+
+          if (oldKeyRefName && newKeyRefName && oldKeyRefName !== newKeyRefName) {
+            this.valuesFrom[index].valueFrom = { [newKeyRefName]: {} };
+          } else if (oldKey && newKey && oldKey !== newKey) {
+            this.valuesFrom[index].valueFrom = {
+              [newKeyRefName]: {
+                ...(value?.valueFrom?.[newKeyRefName] || {}),
+                key: ''
+              },
+            };
+          } else {
+            this.valuesFrom[index].valueFrom = value?.valueFrom;
+          }
+
+          break;
+        }
+      }
+
+      this.update();
+    },
+
+    removeValueFrom(id: number) {
+      this.valuesFrom = this.valuesFrom.filter((el) => el.id !== id);
+
+      this.update();
+    },
+
+    update() {
+      const value = this.toValuesFrom(this.valuesFrom, this.namespace);
+
+      this.$emit('update:value', value);
+    },
+
+    fromValuesFrom(data: ValueFrom[]): ValuesFrom[] {
+      return (data || [])
+        .map((elem) => {
+          const out = { id: this.id++ } as ValuesFrom;
+
+          const cm = elem?.configMapKeyRef;
+
+          if (cm) {
+            out.valueFrom = {
+              configMapKeyRef: {
+                key:  cm.key || '',
+                name: cm.name || '',
+              }
+            };
+          }
+
+          const sc = elem?.secretKeyRef;
+
+          if (sc) {
+            out.valueFrom = {
+              secretKeyRef: {
+                key:  sc.key || '',
+                name: sc.name || '',
+              }
+            };
+          }
+
+          return out;
+        })
+        .filter((el) => !isEmpty(el || {}));
+    },
+
+    toValuesFrom(data: { valueFrom: ValueFrom }[], namespace: string): ValueFrom[] | undefined {
+      const res = (data || [])
+        .map((elem) => {
+          const cm = elem?.valueFrom?.configMapKeyRef;
+          const sc = elem?.valueFrom?.secretKeyRef;
+
+          const out = {} as ValueFrom;
+
+          if (cm?.name) {
+            out.configMapKeyRef = {
+              key:  cm.key,
+              name: cm.name,
+              namespace
+            };
+          }
+
+          if (sc?.name) {
+            out.secretKeyRef = {
+              key:  sc.key,
+              name: sc.name,
+              namespace
+            };
+          }
+
+          return out;
+        })
+        .filter((el) => !isEmpty(el || {}));
+
+      return res.length ? res : undefined;
+    }
+  }
+};
+</script>
+
+<template>
+  <div
+    v-if="!allConfigMaps || !allSecrets"
+    data-testid="fleet-values-from-loading"
+  >
+    <i
+      class="icon icon-lg icon-spinner icon-spin"
+    />
+    <label class="text-label ml-10">
+      {{ t('fleet.helmOp.values.valuesFrom.loading') }}
+    </label>
+  </div>
+  <div
+    v-else
+    class="values-from-container"
+    data-testid="fleet-values-from-list"
+  >
+    <h2
+      v-t="'fleet.helmOp.values.valuesFrom.selectLabel'"
+      class="m-0"
+    />
+    <div
+      v-for="row in valuesFrom"
+      :key="row.id + '-' + row?.valueFrom?.configMapKeyRef?.key + '-' + row?.valueFrom?.secretKeyRef?.key"
+      class="mmt-4"
+    >
+      <ValueFromResource
+        :data-testid="`fleet-values-from-item-${ row.id }`"
+        :value="row"
+        :options="valueFromOptions"
+        :all-secrets="allSecrets"
+        :all-config-maps="allConfigMaps"
+        :namespaced="true"
+        :mode="mode"
+        :show-variable-name="true"
+        @remove="removeValueFrom(row.id)"
+        @update:value="updateValueFrom(row.id, $event)"
+      />
+    </div>
+    <RcButton
+      v-if="!isView"
+      ref="add-button"
+      small
+      secondary
+      class="mmt-6"
+      data-testid="fleet-values-from-add"
+      @click="addValueFrom"
+    >
+      <i class="icon icon-add" />
+      {{ t('workload.container.command.addEnvVar') }}
+    </RcButton>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .var-row {
+    margin-bottom: 0;
+  }
+</style>