@rancher/shell 1.2.0 → 2.0.0

package/edit/resources.cattle.io.backup.vue

@@ -17,6 +17,8 @@ import { NAMESPACE, _VIEW } from '@shell/config/query-params';
 import { sortBy } from '@shell/utils/sort';
 import { get } from '@shell/utils/object';
 import { formatEncryptionSecretNames } from '@shell/utils/formatter';
+import { FilterArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { SECRET_TYPES } from '@shell/config/secret';
 
 export default {
 
@@ -47,18 +49,38 @@ export default {
   },
 
   async fetch() {
-    await this.$store.dispatch('catalog/load');
-
     const hash = await allHash({
-      secrets:     this.$store.dispatch('cluster/findAll', { type: SECRET }),
+      catalog:     this.$store.dispatch('catalog/load'),
       resourceSet: this.$store.dispatch('cluster/find', { type: BACKUP_RESTORE.RESOURCE_SET, id: this.value?.spec?.resourceSetName || 'rancher-resource-set' }),
       apps:        this.$store.dispatch('cluster/findAll', { type: CATALOG.APP })
-
     });
 
-    this.allSecrets = hash.secrets;
-    this.resourceSet = hash.resourceSet;
     this.apps = hash.apps;
+    this.resourceSet = hash.resourceSet;
+
+    const BRORelease = this.apps.filter((release) => get(release, 'spec.name') === 'rancher-backup')[0];
+
+    this.chartNamespace = BRORelease?.spec.namespace || '';
+
+    if (this.$store.getters[`cluster/paginationEnabled`](SECRET)) {
+      const findPageArgs = { // Of type ActionFindPageArgs
+        namespaced: this.chartNamespace,
+        pagination: new FilterArgs({
+          filters: PaginationParamFilter.createSingleField({
+            field: 'metadata.fields.1',
+            value: SECRET_TYPES.OPAQUE
+          })
+        }),
+      };
+
+      // Do a one time request to get these type of secrets.... and there's a control on this page that will fetch and cache secrets
+      const url = this.$store.getters[`cluster/urlFor`](SECRET, null, findPageArgs);
+      const res = await this.$store.dispatch(`cluster/request`, { url });
+
+      this.secrets = res?.data || [];
+    } else {
+      this.secrets = await this.$store.dispatch('cluster/findAll', { type: SECRET });
+    }
   },
 
   data() {
@@ -84,7 +106,7 @@ export default {
     }
 
     return {
-      allSecrets:     [],
+      secrets:        [],
       resourceSet:    null,
       s3,
       storageSource,
@@ -94,7 +116,8 @@ export default {
       name:           this.value?.metadata?.name,
       fvFormRuleSets: [{
         path: 'metadata.name', rules: ['dnsLabel', 'noUpperCase'], translationKey: 'nameNsDescription.name.label'
-      }]
+      }],
+      chartNamespace: null,
     };
   },
 
@@ -103,14 +126,8 @@ export default {
       return this.mode === _VIEW;
     },
 
-    chartNamespace() {
-      const BRORelease = this.apps.filter((release) => get(release, 'spec.name') === 'rancher-backup')[0];
-
-      return BRORelease ? BRORelease.spec.namespace : '';
-    },
-
     encryptionSecretNames() {
-      return formatEncryptionSecretNames(this.allSecrets, this.chartNamespace);
+      return formatEncryptionSecretNames(this.secrets, this.chartNamespace);
     },
 
     storageOptions() {
@@ -179,128 +196,126 @@ export default {
 
 <template>
   <Loading v-if="$fetchState.pending" />
-  <div v-else>
-    <CruResource
-      :validation-passed="validated"
-      :done-route="doneRoute"
-      :resource="value"
-      :mode="mode"
-      :errors="fvUnreportedValidationErrors"
-      @finish="save"
-    >
-      <template>
-        <NameNsDescription
-          :mode="mode"
-          :value="value"
-          :namespaced="false"
-          :rules="{name: fvGetAndReportPathRules('metadata.name')}"
-          @change="name=value.metadata.name"
-        />
-        <template v-if="!!resourceSet">
-          <div class="bordered-section">
-            <RadioGroup
-              v-model="setSchedule"
-              :mode="mode"
-              :label="t('backupRestoreOperator.schedule.label')"
-              name="setSchedule"
-              :options="[false, true]"
-              :labels="[t('backupRestoreOperator.schedule.options.disabled'), t('backupRestoreOperator.schedule.options.enabled')]"
-            />
-            <div
-              v-if="setSchedule"
-              class="row mt-10 mb-10"
-            >
-              <div class="col span-6">
-                <LabeledInput
-                  v-model="value.spec.schedule"
-                  type="cron"
-                  :mode="mode"
-                  :label="t('backupRestoreOperator.schedule.label')"
-                  :placeholder="t('backupRestoreOperator.schedule.placeholder')"
-                />
-              </div>
-              <div class="col span-6">
-                <UnitInput
-                  v-model="value.spec.retentionCount"
-                  :suffix="t('backupRestoreOperator.retentionCount.units', {count: value.spec.retentionCount || 0})"
-                  :mode="mode"
-                  :label="t('backupRestoreOperator.retentionCount.label')"
-                />
-              </div>
-            </div>
-          </div>
-
-          <div class="bordered-section">
-            <div class="row">
-              <div class="col span-12">
-                <RadioGroup
-                  v-model="useEncryption"
-                  name="useEncryption"
-                  :label="t('backupRestoreOperator.encryption')"
-                  :options="encryptionOptions.options"
-                  :labels="encryptionOptions.labels"
-                  :mode="mode"
-                />
-              </div>
+  <CruResource
+    v-else
+    :validation-passed="validated"
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    :errors="fvUnreportedValidationErrors"
+    @finish="save"
+  >
+    <template>
+      <NameNsDescription
+        :mode="mode"
+        :value="value"
+        :namespaced="false"
+        :rules="{name: fvGetAndReportPathRules('metadata.name')}"
+        @change="name=value.metadata.name"
+      />
+      <template v-if="!!resourceSet">
+        <div class="bordered-section">
+          <RadioGroup
+            v-model="setSchedule"
+            :mode="mode"
+            :label="t('backupRestoreOperator.schedule.label')"
+            name="setSchedule"
+            :options="[false, true]"
+            :labels="[t('backupRestoreOperator.schedule.options.disabled'), t('backupRestoreOperator.schedule.options.enabled')]"
+          />
+          <div
+            v-if="setSchedule"
+            class="row mt-10 mb-10"
+          >
+            <div class="col span-6">
+              <LabeledInput
+                v-model="value.spec.schedule"
+                type="cron"
+                :mode="mode"
+                :label="t('backupRestoreOperator.schedule.label')"
+                :placeholder="t('backupRestoreOperator.schedule.placeholder')"
+              />
             </div>
-            <div
-              v-if="useEncryption"
-              :style="{'align-items':'center'}"
-              class="row mt-10"
-            >
-              <div class="col span-6">
-                <LabeledSelect
-                  v-model="value.spec.encryptionConfigSecretName"
-                  :tooltip="t('backupRestoreOperator.encryptionConfigName.backuptip', {}, true)"
-                  :hover-tooltip="true"
-                  :mode="mode"
-                  :options="encryptionSecretNames"
-                  :label="t('backupRestoreOperator.encryptionConfigName.label')"
-                />
-              </div>
+            <div class="col span-6">
+              <UnitInput
+                v-model="value.spec.retentionCount"
+                :suffix="t('backupRestoreOperator.retentionCount.units', {count: value.spec.retentionCount || 0})"
+                :mode="mode"
+                :label="t('backupRestoreOperator.retentionCount.label')"
+              />
             </div>
           </div>
+        </div>
 
+        <div class="bordered-section">
           <div class="row">
             <div class="col span-12">
-              <span
-                v-if="isView"
-                class="text-label"
-              >{{ t('backupRestoreOperator.s3.titles.location') }}</span>
               <RadioGroup
-                v-else
-                v-model="storageSource"
-                name="storageSource"
-                :label="t('backupRestoreOperator.s3.titles.location')"
-                :options="storageOptions.options"
-                :labels="storageOptions.labels"
+                v-model="useEncryption"
+                name="useEncryption"
+                :label="t('backupRestoreOperator.encryption')"
+                :options="encryptionOptions.options"
+                :labels="encryptionOptions.labels"
+                :mode="mode"
+              />
+            </div>
+          </div>
+          <div
+            v-if="useEncryption"
+            :style="{'align-items':'center'}"
+            class="row mt-10"
+          >
+            <div class="col span-6">
+              <LabeledSelect
+                v-model="value.spec.encryptionConfigSecretName"
+                :tooltip="t('backupRestoreOperator.encryptionConfigName.backuptip', { ns: chartNamespace}, true)"
+                :hover-tooltip="true"
                 :mode="mode"
+                :options="encryptionSecretNames"
+                :label="t('backupRestoreOperator.encryptionConfigName.label')"
               />
             </div>
           </div>
+        </div>
+
+        <div class="row">
+          <div class="col span-12">
+            <span
+              v-if="isView"
+              class="text-label"
+            >{{ t('backupRestoreOperator.s3.titles.location') }}</span>
+            <RadioGroup
+              v-else
+              v-model="storageSource"
+              name="storageSource"
+              :label="t('backupRestoreOperator.s3.titles.location')"
+              :options="storageOptions.options"
+              :labels="storageOptions.labels"
+              :mode="mode"
+            />
+          </div>
+        </div>
 
-          <template v-if="storageSource !== 'useDefault'">
-            <div class="row mt-10">
-              <div class="col span-12">
-                <S3
-                  :value="s3"
-                  :secrets="allSecrets"
-                  :mode="mode"
-                />
-              </div>
+        <template v-if="storageSource !== 'useDefault'">
+          <div class="row mt-10">
+            <div class="col span-12">
+              <S3
+                :value="s3"
+                :mode="mode"
+              />
             </div>
-          </template>
-          <template v-else-if="isView">
-            <span>{{ t('generic.default') }}</span>
-          </template>
+          </div>
+        </template>
+        <template v-else-if="isView">
+          <span>{{ t('generic.default') }}</span>
         </template>
-        <Banner
-          v-else
-          color="error"
-        >
-          <span v-clean-html="t('backupRestoreOperator.noResourceSet')" />
-        </Banner>
       </template>
-    </CruResource>
-  </div>
+      <Banner
+        v-else
+        color="error"
+      >
+        <span v-clean-html="t('backupRestoreOperator.noResourceSet')" />
+      </Banner>
+    </template>
+  </CruResource>
 </template>

package/edit/resources.cattle.io.restore.vue

@@ -14,6 +14,8 @@ import { allHash } from '@shell/utils/promise';
 import { get } from '@shell/utils/object';
 import { _CREATE } from '@shell/config/query-params';
 import { formatEncryptionSecretNames } from '@shell/utils/formatter';
+import { FilterArgs, PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { SECRET_TYPES } from '@shell/config/secret';
 
 export default {
 
@@ -44,17 +46,37 @@ export default {
   },
 
   async fetch() {
-    await this.$store.dispatch('catalog/load');
-
     const hash = await allHash({
-      secrets: this.$store.dispatch('cluster/findAll', { type: SECRET }),
-      backups: this.$store.dispatch('cluster/findAll', { type: BACKUP_RESTORE.BACKUP }),
-      apps:    this.$store.dispatch('cluster/findAll', { type: CATALOG.APP })
+      catalog:     this.$store.dispatch('catalog/load'),
+      resourceSet: this.$store.dispatch('cluster/find', { type: BACKUP_RESTORE.RESOURCE_SET, id: this.value?.spec?.resourceSetName || 'rancher-resource-set' }),
+      apps:        this.$store.dispatch('cluster/findAll', { type: CATALOG.APP })
     });
 
-    this.allSecrets = hash.secrets;
-    this.allBackups = hash.backups;
     this.apps = hash.apps;
+    this.resourceSet = hash.resourceSet;
+
+    const BRORelease = this.apps.filter((release) => get(release, 'spec.name') === 'rancher-backup')[0];
+
+    this.chartNamespace = BRORelease?.spec.namespace || '';
+
+    if (this.$store.getters[`cluster/paginationEnabled`](SECRET)) {
+      const findPageArgs = { // Of type ActionFindPageArgs
+        namespaced: this.chartNamespace,
+        pagination: new FilterArgs({
+          filters: PaginationParamFilter.createSingleField({
+            field: 'metadata.fields.1',
+            value: SECRET_TYPES.OPAQUE
+          })
+        }),
+      };
+
+      const url = this.$store.getters[`cluster/urlFor`](SECRET, null, findPageArgs);
+      const res = await this.$store.dispatch(`cluster/request`, { url });
+
+      this.secrets = res?.data || [];
+    } else {
+      this.secrets = await this.$store.dispatch('cluster/findAll', { type: SECRET });
+    }
   },
 
   data() {
@@ -75,7 +97,13 @@ export default {
     }
 
     return {
-      allSecrets: [], allBackups: [], s3, targetBackup: null, storageSource, apps: []
+      secrets:        [],
+      allBackups:     [],
+      s3,
+      targetBackup:   null,
+      storageSource,
+      apps:           [],
+      chartNamespace: null,
     };
   },
 
@@ -88,14 +116,8 @@ export default {
       return this.allBackups.filter((backup) => backup.state !== 'error');
     },
 
-    chartNamespace() {
-      const BRORelease = this.apps.filter((release) => get(release, 'spec.name') === 'rancher-backup')[0];
-
-      return BRORelease ? BRORelease.spec.namespace : '';
-    },
-
     encryptionSecretNames() {
-      return formatEncryptionSecretNames(this.allSecrets, this.chartNamespace);
+      return formatEncryptionSecretNames(this.secrets, this.chartNamespace);
     },
 
     isEncrypted() {
@@ -186,123 +208,121 @@ export default {
 </script>
 
 <template>
-  <div>
-    <Loading v-if="$fetchState.pending" />
-
-    <CruResource
-      :validation-passed="validationPassed"
-      :done-route="doneRoute"
-      :resource="value"
-      :mode="mode"
-      @finish="save"
-    >
-      <template>
-        <div>
-          <div class="row mb-10">
-            <div class="col span-12">
-              <RadioGroup
-                v-model="storageSource"
-                name="storageSource"
-                :label="t('backupRestoreOperator.s3.titles.backupLocation')"
-                :options="radioOptions.options"
-                :labels="radioOptions.labels"
-                :mode="mode"
-              />
-            </div>
+  <Loading v-if="$fetchState.pending" />
+
+  <CruResource
+    v-else
+    :validation-passed="validationPassed"
+    :done-route="doneRoute"
+    :resource="value"
+    :mode="mode"
+    @finish="save"
+  >
+    <template>
+      <div>
+        <div class="row mb-10">
+          <div class="col span-12">
+            <RadioGroup
+              v-model="storageSource"
+              name="storageSource"
+              :label="t('backupRestoreOperator.s3.titles.backupLocation')"
+              :options="radioOptions.options"
+              :labels="radioOptions.labels"
+              :mode="mode"
+            />
           </div>
-          <template v-if="storageSource === 'configureS3'">
-            <S3
-              v-model="s3"
+        </div>
+        <template v-if="storageSource === 'configureS3'">
+          <S3
+            v-model="s3"
+            :mode="mode"
+          />
+        </template>
+        <div
+          v-else-if="storageSource==='useBackup'"
+          class="row mb-10"
+        >
+          <div class="col span-6">
+            <LabeledSelect
+              :disabled="!availableBackups.length"
+              :value="targetBackup"
+              :options="availableBackups"
               :mode="mode"
-              :secrets="allSecrets"
+              option-label="metadata.name"
+              :label="t('backupRestoreOperator.targetBackup')"
+              @input="updateTargetBackup"
             />
-          </template>
-          <div
-            v-else-if="storageSource==='useBackup'"
-            class="row mb-10"
-          >
-            <div class="col span-6">
-              <LabeledSelect
-                :disabled="!availableBackups.length"
-                :value="targetBackup"
-                :options="availableBackups"
-                :mode="mode"
-                option-label="metadata.name"
-                :label="t('backupRestoreOperator.targetBackup')"
-                @input="updateTargetBackup"
-              />
-            </div>
           </div>
         </div>
-        <div class="spacer" />
-
-        <div>
-          <div
-            :style="{'align-items':'center'}"
-            class="row mb-10"
-          >
-            <div class="col span-6">
-              <LabeledInput
-                v-model="value.spec.backupFilename"
-                :spellcheck="false"
-                required
-                :mode="mode"
-                :label="t('backupRestoreOperator.backupFilename')"
-              />
-            </div>
-            <div class="col span-6">
-              <LabeledSelect
-                v-if="isEncrypted"
-                v-model="value.spec.encryptionConfigSecretName"
-                :status="mode === 'view' ? null : 'warning'"
-                :tooltip="mode === 'view' ? null : t('backupRestoreOperator.encryptionConfigName.restoretip')"
-                :hover-tooltip="true"
-                :mode="mode"
-                :options="encryptionSecretNames"
-                :label="t('backupRestoreOperator.encryptionConfigName.label')"
-              />
-            </div>
+      </div>
+      <div class="spacer" />
+
+      <div>
+        <div
+          :style="{'align-items':'center'}"
+          class="row mb-10"
+        >
+          <div class="col span-6">
+            <LabeledInput
+              v-model="value.spec.backupFilename"
+              :spellcheck="false"
+              required
+              :mode="mode"
+              :label="t('backupRestoreOperator.backupFilename')"
+            />
+          </div>
+          <div class="col span-6">
+            <LabeledSelect
+              v-if="isEncrypted"
+              v-model="value.spec.encryptionConfigSecretName"
+              :status="mode === 'view' ? null : 'warning'"
+              :tooltip="mode === 'view' ? null : t('backupRestoreOperator.encryptionConfigName.restoretip')"
+              :hover-tooltip="true"
+              :mode="mode"
+              :options="encryptionSecretNames"
+              :label="t('backupRestoreOperator.encryptionConfigName.label')"
+            />
           </div>
-          <div
-            :style="{'align-items':'center'}"
-            class="row"
-          >
-            <div class="col span-6">
-              <Checkbox
-                v-model="value.spec.prune"
-                class="mb-5"
-                :label="t('backupRestoreOperator.prune.label')"
-                :mode="mode"
-              >
-                <template #label>
-                  <span
-                    v-clean-tooltip="t('backupRestoreOperator.prune.tip')"
-                    class="text-label"
-                  >
-                    {{ t('backupRestoreOperator.prune.label') }} <i class="icon icon-info" />
-                  </span>
-                </template>
-              </Checkbox>
-              <UnitInput
-                v-if="value.spec.prune"
-                v-model="value.spec.deleteTimeoutSeconds"
-                :suffix="t('suffix.seconds', {count: value.spec.deleteTimeoutSeconds})"
-                :mode="mode"
-                :label="t('backupRestoreOperator.deleteTimeout.label')"
-              >
-                <template #label>
-                  <label
-                    v-clean-tooltip="t('backupRestoreOperator.deleteTimeout.tip')"
-                    class="has-tooltip"
-                  >
-                    {{ t('backupRestoreOperator.deleteTimeout.label') }} <i class="icon icon-info" />
-                  </label>
-                </template>
-              </UnitInput>
-            </div>
+        </div>
+        <div
+          :style="{'align-items':'center'}"
+          class="row"
+        >
+          <div class="col span-6">
+            <Checkbox
+              v-model="value.spec.prune"
+              class="mb-5"
+              :label="t('backupRestoreOperator.prune.label')"
+              :mode="mode"
+            >
+              <template #label>
+                <span
+                  v-clean-tooltip="t('backupRestoreOperator.prune.tip')"
+                  class="text-label"
+                >
+                  {{ t('backupRestoreOperator.prune.label') }} <i class="icon icon-info" />
+                </span>
+              </template>
+            </Checkbox>
+            <UnitInput
+              v-if="value.spec.prune"
+              v-model="value.spec.deleteTimeoutSeconds"
+              :suffix="t('suffix.seconds', {count: value.spec.deleteTimeoutSeconds})"
+              :mode="mode"
+              :label="t('backupRestoreOperator.deleteTimeout.label')"
+            >
+              <template #label>
+                <label
+                  v-clean-tooltip="t('backupRestoreOperator.deleteTimeout.tip')"
+                  class="has-tooltip"
+                >
+                  {{ t('backupRestoreOperator.deleteTimeout.label') }} <i class="icon icon-info" />
+                </label>
+              </template>
+            </UnitInput>
           </div>
         </div>
-      </template>
-    </CruResource>
-  </div>
+      </div>
+    </template>
+  </CruResource>
 </template>