@rancher/shell 0.1.0 → 0.1.1

package/components/CruResource.vue

@@ -1,30 +1,37 @@
 <script>
 import isEmpty from 'lodash/isEmpty';
 import { createYaml } from '@shell/utils/create-yaml';
-import { clone } from '@shell/utils/object';
+import { clone, get } from '@shell/utils/object';
 import { SCHEMA } from '@shell/config/types';
 import ResourceYaml from '@shell/components/ResourceYaml';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import AsyncButton from '@shell/components/AsyncButton';
 import { mapGetters } from 'vuex';
-import { stringify } from '@shell/utils/error';
+import { stringify, exceptionToErrorsArray } from '@shell/utils/error';
 import CruResourceFooter from '@shell/components/CruResourceFooter';
+
 import {
   _EDIT, _VIEW, AS, _YAML, _UNFLAG, SUB_TYPE
 } from '@shell/config/query-params';
+
 import { BEFORE_SAVE_HOOKS } from '@shell/mixins/child-hook';
+import Wizard from '@shell/components/Wizard';
 
 export default {
+
+  name: 'CruResource',
+
   components: {
     AsyncButton,
     Banner,
     CruResourceFooter,
     ResourceYaml,
+    Wizard
   },
 
   props: {
     doneRoute: {
-      type:    String,
+      type:    [String, Object],
       default: null
     },
 
@@ -90,24 +97,57 @@ export default {
       type:    Function,
       default: null,
     },
+    steps: {
+      type:     Array,
+      default: () => []
+    },
+
+    // The set of labels to display for the finish AsyncButton
+    finishMode: {
+      type:    String,
+      default: 'finish'
+    },
 
     // Used to prevent cancel and create buttons from moving
     // as form validation errors appear and disappear.
     minHeight: {
       type:    String,
       default: ''
+    },
+
+    // Location of `namespace` value within the resource. Used when creating the namespace
+    namespaceKey: {
+      type:    String,
+      default: 'metadata.namespace'
+    },
+
+    /**
+     * Inherited global identifier prefix for tests
+     * Define a term based on the parent component to avoid conflicts on multiple components
+     */
+    componentTestid: {
+      type:    String,
+      default: 'form'
     }
   },
 
   data(props) {
     const yaml = this.createResourceYaml();
 
+    this.$on('createNamespace', (e) => {
+      // When createNamespace is set to true,
+      // the UI will attempt to create a new namespace
+      // before saving the resource.
+      this.createNamespace = e;
+    });
+
     return {
-      isCancelModal: false,
-      showAsForm:    this.$route.query[AS] !== _YAML,
-      resourceYaml:  yaml,
-      initialYaml:   yaml,
-      abbrSizes:     {
+      isCancelModal:   false,
+      createNamespace: false,
+      showAsForm:      this.$route.query[AS] !== _YAML,
+      resourceYaml:    yaml,
+      initialYaml:     yaml,
+      abbrSizes:       {
         3: '24px',
         4: '18px',
         5: '16px',
@@ -118,6 +158,12 @@ export default {
 
   computed: {
     canSave() {
+      const { validationPassed, showAsForm, steps } = this;
+
+      if (showAsForm && steps?.length) {
+        return validationPassed && this.steps.every(step => step.ready);
+      }
+
       // Don't apply validation rules if the form is not shown.
       if (!this.showAsForm) {
         return true;
@@ -139,6 +185,10 @@ export default {
       return !(schema?.resourceMethods?.includes('blocked-PUT'));
     },
 
+    showYaml() {
+      return this.canYaml && (this._selectedSubtype || !this.subtypes.length) && this.canEditYaml && this.mode !== _VIEW;
+    },
+
     isView() {
       return this.mode === _VIEW;
     },
@@ -174,7 +224,7 @@ export default {
      */
     hasErrors() {
       return this.errors?.length && Array.isArray(this.errors);
-    }
+    },
   },
 
   created() {
@@ -257,19 +307,53 @@ export default {
       this.$emit('select-type', id);
     },
 
+    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) {
+        // After the attempt to create the namespace,
+        // show any applicable errors if the namespace is
+        // invalid.
+        this.$emit('error', exceptionToErrorsArray(err.message));
+        buttonDone(false);
+      }
+    },
+
     save() {
       this.$refs.save.clicked();
     },
 
+    async createNamespaceIfNeeded() {
+      const inStore = this.$store.getters['currentStore'](this.resource);
+
+      if (this.createNamespace) {
+        try {
+          const newNamespace = await this.$store.dispatch(`${ inStore }/createNamespace`, { name: get(this.resource, this.namespaceKey) }, { 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 }`);
+        }
+      }
+    }
   }
 };
 </script>
 
 <template>
   <section class="cru">
+    <slot name="noticeBanner" />
     <form
       :is="(isView? 'div' : 'form')"
       class="create-resource-container cru__form"
+      @submit.prevent
     >
       <div
         v-if="hasErrors"
@@ -344,8 +428,79 @@ export default {
           </div>
         </slot>
       </div>
-
-      <template v-if="showAsForm">
+      <!------ MULTI STEP PROCESS ------>
+      <template v-if="showAsForm && steps.length">
+        <div
+          v-if="_selectedSubtype || !subtypes.length"
+          class="resource-container cru__content cru__content-wizard"
+        >
+          <Wizard
+            v-if="resource"
+            ref="Wizard"
+            :header-mode="mode"
+            :steps="steps"
+            :errors="errors"
+            :finish-mode="finishMode"
+            class="wizard"
+            @error="e=>errors = e"
+          >
+            <template #stepContainer="{activeStep}" class="step-container">
+              <template v-for="step in steps">
+                <div v-if="step.name === activeStep.name || step.hidden" :key="step.name" class="step-container__step" :class="{'hide': step.name !== activeStep.name && step.hidden}">
+                  <slot :step="step" :name="step.name" />
+                </div>
+              </template>
+            </template>
+            <template #controlsContainer="{showPrevious, next, back, activeStep, canNext, activeStepIndex, visibleSteps}">
+              <template name="form-footer">
+                <CruResourceFooter
+                  class="cru__footer"
+                  :mode="mode"
+                  :is-form="showAsForm"
+                  :show-cancel="showCancel"
+                  @cancel-confirmed="confirmCancel"
+                >
+                  <!-- Pass down templates provided by the caller -->
+                  <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
+                    <slot :name="slot" v-bind="scope" />
+                  </template>
+                  <div class="controls-steps">
+                    <button
+                      v-if="showYaml"
+                      type="button"
+                      class="btn role-secondary"
+                      @click="showPreviewYaml"
+                    >
+                      <t k="cruResource.previewYaml" />
+                    </button>
+                    <template v-if="showPrevious" name="back">
+                      <button type="button" class="btn role-secondary" @click="back()">
+                        <t k="wizard.previous" />
+                      </button>
+                    </template>
+                    <template v-if="activeStepIndex === visibleSteps.length-1" name="finish">
+                      <AsyncButton
+                        v-if="!showSubtypeSelection && !isView"
+                        ref="save"
+                        :disabled="!activeStep.ready"
+                        :mode="finishButtonMode || mode"
+                        @click="$emit('finish', $event)"
+                      />
+                    </template>
+                    <template v-else name="next">
+                      <button :disabled="!canNext" type="button" class="btn role-primary" @click="next()">
+                        <t k="wizard.next" />
+                      </button>
+                    </template>
+                  </div>
+                </CruResourceFooter>
+              </template>
+            </template>
+          </Wizard>
+        </div>
+      </template>
+      <!------ SINGLE PROCESS ------>
+      <template v-else-if="showAsForm">
         <div
           v-if="_selectedSubtype || !subtypes.length"
           class="resource-container cru__content"
@@ -359,6 +514,7 @@ export default {
             :mode="mode"
             :is-form="showAsForm"
             :show-cancel="showCancel"
+            :component-testid="componentTestid"
             @cancel-confirmed="confirmCancel"
           >
             <!-- Pass down templates provided by the caller -->
@@ -369,7 +525,8 @@ export default {
             <template #default>
               <div v-if="!isView">
                 <button
-                  v-if="canYaml && (_selectedSubtype || !subtypes.length) && canEditYaml"
+                  v-if="showYaml"
+                  :data-testid="componentTestid + '-yaml'"
                   type="button"
                   class="btn role-secondary"
                   @click="showPreviewYaml"
@@ -381,14 +538,15 @@ export default {
                   ref="save"
                   :disabled="!canSave"
                   :mode="finishButtonMode || mode"
-                  @click="$emit('finish', $event)"
+                  :data-testid="componentTestid + '-save'"
+                  @click="clickSave($event)"
                 />
               </div>
             </template>
           </CruResourceFooter>
         </slot>
       </template>
-
+      <!------ YAML ------>
       <section
         v-else
         class="cru-resource-yaml-container resource-container cru__content"
@@ -422,12 +580,14 @@ export default {
                       v-if="showPreview"
                       type="button"
                       class="btn role-secondary"
+                      :data-testid="componentTestid + '-yaml-yaml'"
                       @click="yamlUnpreview"
                     >
                       <t k="resourceYaml.buttons.continue" />
                     </button>
                     <button
                       v-if="!showPreview && isEdit"
+                      :data-testid="componentTestid + '-yaml-yaml-preview'"
                       :disabled="!canDiff"
                       type="button"
                       class="btn role-secondary"
@@ -437,11 +597,17 @@ export default {
                     </button>
                   </div>
                   <div v-if="_selectedSubtype || !subtypes.length" class="controls-right">
-                    <button type="button" class="btn role-secondary" @click="checkCancel(false)">
+                    <button
+                      :data-testid="componentTestid + '-yaml-cancel'"
+                      type="button"
+                      class="btn role-secondary"
+                      @click="checkCancel(false)"
+                    >
                       <t k="cruResource.backToForm" />
                     </button>
                     <AsyncButton
                       v-if="!showSubtypeSelection"
+                      :data-testid="componentTestid + '-yaml-save'"
                       :disabled="!canSave"
                       :action-label="isEdit ? t('generic.save') : t('generic.create')"
                       @click="cb=>yamlSave(cb)"
@@ -538,6 +704,9 @@ form.create-resource-container .cru {
 
   &__content {
     flex-grow: 1;
+    &-wizard {
+      display: flex;
+    }
   }
 
   &__footer {

package/components/CruResourceFooter.vue

@@ -38,6 +38,15 @@ export default {
       type:    Boolean,
       default: true
     },
+
+    /**
+     * Inherited global identifier prefix for tests
+     * Define a term based on the parent component to avoid conflicts on multiple components
+     */
+    componentTestid: {
+      type:    String,
+      default: 'form-footer'
+    }
   },
 
   data() {
@@ -76,6 +85,7 @@ export default {
       <button
         v-if="!isView && showCancel"
         id="cru-cancel"
+        :data-testid="componentTestid + '-cancel'"
         type="button"
         class="btn role-secondary"
         @click="confirmCancelRequired ? checkCancel(true) : $emit('cancel-confirmed', true)"
@@ -86,11 +96,17 @@ export default {
     <slot :checkCancel="checkCancel">
       <AsyncButton
         v-if="!isView"
+        :data-testid="componentTestid + '-create'"
         :mode="finishButtonMode || mode"
         @click="$emit('finish', $event)"
       />
     </slot>
-    <ResourceCancelModal ref="cancelModal" :is-cancel-modal="isCancelModal" :is-form="isForm" @confirm-cancel="confirmCancel($event)"></ResourceCancelModal>
+    <ResourceCancelModal
+      ref="cancelModal"
+      :is-cancel-modal="isCancelModal"
+      :is-form="isForm"
+      @confirm-cancel="confirmCancel($event)"
+    ></ResourceCancelModal>
   </div>
 </template>
 

package/components/EtcdInfoBanner.vue

@@ -1,5 +1,5 @@
 <script>
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import Loading from '@shell/components/Loading';
 import { mapGetters } from 'vuex';
 import { hasLeader, leaderChanges, failedProposals } from '@shell/utils/grafana';

package/components/FilterLabel.vue

@@ -0,0 +1,254 @@
+<script>
+import ArrayList from '@shell/components/form/ArrayList';
+import Select from '@shell/components/form/Select';
+
+export default {
+  name: 'HarvesterFilterLabel',
+
+  components: {
+    Select,
+    ArrayList
+  },
+
+  props:      {
+    rows: {
+      type:     Array,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      searchLabels:    [],
+      defaultAddValue: {
+        key:   '',
+        value: '',
+      }
+    };
+  },
+
+  computed: {
+    optionLabels() {
+      const labels = this.rows.map((row) => {
+        return Object.keys(row.labels);
+      });
+
+      return Array.from(new Set(labels.flat()));
+    },
+  },
+
+  methods: {
+    calcValueOptions(key) {
+      const valueOptions = [];
+
+      this.rows.map((row) => {
+        const isExistValue = valueOptions.find(value => value.label === row.labels[key]);
+
+        if (Object.keys(row.labels).includes(key) && key && row.labels[key] && !isExistValue) {
+          valueOptions.push({
+            value: row.labels[key],
+            label: row.labels[key]
+          });
+        }
+      });
+
+      return valueOptions;
+    },
+
+    removeAll() {
+      this.$set(this, 'searchLabels', []);
+    },
+
+    remove(label) {
+      this.searchLabels.find((L, index) => {
+        if (L.key === label.key && L.value === label.value) {
+          this.searchLabels.splice(index, 1);
+          this.filterRows();
+
+          return true;
+        }
+      });
+    },
+
+    filterRows() {
+      const rows = this.rows.filter((row) => {
+        const hasSearch = this.searchLabels.find(search => search.key);
+
+        if (!hasSearch) {
+          return this.rows;
+        }
+
+        const labels = row.labels;
+        const keys = Object.keys(labels);
+
+        return this.searchLabels.find((search) => {
+          if (search.key && keys.includes(search.key)) {
+            if (!search.value) { // If value is empty, all data containing the key is retained
+              return true;
+            } else if (search.value === labels[search.key]) {
+              return true;
+            } else if (search.value !== labels[search.key]) {
+              return false;
+            }
+          } else {
+            return false;
+          }
+        });
+      });
+
+      this.$emit('changeRows', rows, this.searchLabels);
+    }
+  },
+
+  watch: {
+    rows: {
+      deep:      true,
+      immediate: true,
+      handler() {
+        this.filterRows();
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <div class="filter">
+    <template v-for="(label, index) in searchLabels">
+      <span v-if="label.key" :key="`${label.key}${index}`" class="banner-item bg-warning">
+        {{ label.key }}{{ label.value ? "=" : '' }}{{ label.value }}<i class="icon icon-close" @click="remove(label)" />
+      </span>
+    </template>
+
+    <v-popover
+      trigger="click"
+      placement="bottom-end"
+    >
+      <slot name="header">
+        <button ref="actionDropDown" class="btn bg-primary mr-10">
+          <slot name="title">
+            {{ t('harvester.fields.filterLabels') }}
+          </slot>
+        </button>
+      </slot>
+
+      <template slot="popover">
+        <div class="filter-popup">
+          <div>
+            <ArrayList
+              v-model="searchLabels"
+              :show-header="true"
+              :default-add-value="defaultAddValue"
+              :initial-empty-row="true"
+              @input="filterRows"
+            >
+              <template v-slot:column-headers>
+                <div class="box">
+                  <div class="key">
+                    {{ t('generic.key') }}
+                    <span class="required">*</span>
+                  </div>
+                  <div class="value">
+                    {{ t('generic.value') }}
+                  </div>
+                  <div />
+                </div>
+              </template>
+              <template v-slot:columns="scope">
+                <div class="key">
+                  <Select
+                    ref="select"
+                    key="label"
+                    v-model="scope.row.value.key"
+                    :append-to-body="false"
+                    :searchable="true"
+                    :options="optionLabels"
+                    @input="filterRows"
+                  />
+                </div>
+                <div class="value">
+                  <Select
+                    v-if="calcValueOptions(scope.row.value.key).length > 0"
+                    ref="select"
+                    key="value"
+                    v-model="scope.row.value.value"
+                    :append-to-body="false"
+                    :searchable="true"
+                    :options="calcValueOptions(scope.row.value.key)"
+                    @input="filterRows"
+                  />
+                  <input v-else v-model="scope.row.value.value" class="input-sm" type="search" @input="filterRows" />
+                </div>
+              </template>
+
+              <template #add="{add}">
+                <div>
+                  <button
+                    type="button"
+                    class="btn role-tertiary add"
+                    data-testid="add-item"
+                    @click="add()"
+                  >
+                    {{ t('generic.add') }}
+                  </button>
+
+                  <button
+                    type="button"
+                    class="btn role-tertiary add"
+                    data-testid="remove-all-item"
+                    @click="removeAll()"
+                  >
+                    {{ t('generic.clearAll') }}
+                  </button>
+                </div>
+              </template>
+            </ArrayList>
+          </div>
+        </div>
+      </template>
+    </v-popover>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.filter {
+  display: inline-block;
+
+  .banner-item {
+    display: inline-block;
+    font-size: 16px;
+    margin-right: 10px;
+    padding: 6px;
+    border-radius: 2px;
+
+    i {
+      cursor: pointer;
+      vertical-align: middle;
+    }
+  }
+}
+.filter-popup {
+  width: 600px;
+}
+
+::v-deep .box {
+  display: grid;
+  grid-template-columns: 40% 40% 10%;
+  column-gap: 1.75%;
+  align-items: center;
+  margin-bottom: 10px;
+
+  .key,
+  .value {
+    height: 100%;
+
+    INPUT {
+      height: $unlabeled-input-height;
+    }
+  }
+}
+
+.required {
+  color: var(--error);
+}
+</style>

package/components/GlobalRoleBindings.vue

@@ -2,11 +2,11 @@
 <script>
 import { mapGetters } from 'vuex';
 import { MANAGEMENT } from '@shell/config/types';
-import Checkbox from '@shell/components/form/Checkbox';
+import { Checkbox } from '@components/Form/Checkbox';
 import { _CREATE, _VIEW } from '@shell/config/query-params';
 import Loading from '@shell/components/Loading';
 import { addObjects, isArray } from '@shell/utils/array';
-import Card from '@shell/components/Card';
+import { Card } from '@components/Card';
 
 /**
  * Display checkboxes for each global role, checked for given user or principal (group). Can save changes.

package/components/GrafanaDashboard.vue

@@ -1,6 +1,6 @@
 <script>
 import Loading from '@shell/components/Loading';
-import Banner from '@shell/components/Banner';
+import { Banner } from '@components/Banner';
 import { computeDashboardUrl } from '@shell/utils/grafana';
 
 export default {