backup bugfixes

restore pr feedback

assets/styles/global/_tooltip.scss

@@ -95,6 +95,46 @@
       }
     }
   }
+
+  &.tooltip-warning {
+    .tooltip-inner {
+      background: var(--tooltip-bg-warning);
+      color: var(--tooltip-text-warning);
+    }
+  
+    &[x-placement^="top"] {
+      .tooltip-arrow {
+        &:after {
+          border-top-color: var(--tooltip-bg-warning);
+        }
+      }
+    }
+  
+  
+    &[x-placement^="bottom"] {
+      .tooltip-arrow {
+        &:after {
+          border-bottom-color: var(--body-bg);
+        }
+      }
+    }
+  
+    &[x-placement^="right"] {
+      .tooltip-arrow {
+        &:after {
+          border-right-color: var(--tooltip-bg-warning);
+        }
+      }
+    }
+  
+    &[x-placement^="left"] {
+      .tooltip-arrow {
+        &:after {
+          border-left-color: var(--tooltip-bg-warning);
+        }
+      }
+    }
+  }
 }
 
 .popover {

assets/styles/themes/_dark.scss

@@ -110,6 +110,8 @@
   --tooltip-bg: #{$info};
   --tooltip-border: var(--tag-primary);
   --tooltip-text: var(--body-text);
+  --tooltip-text-warning: var(--body-text);
+
 
   --tabbed-border: #{$medium};
   --tabbed-sidebar-bg: #{$darkest};

assets/styles/themes/_light.scss

@@ -138,6 +138,8 @@ $selected: rgba($primary, .5);
   --tooltip-bg                 : var(--tag-bg);
   --tooltip-border             : var(--tag-primary);
   --tooltip-text               : var(--tag-primary);
+  --tooltip-bg-warning         : #{rgba($warning, 0.8)};
+  --tooltip-text-warning       : var(--body-text);
 
   --tabbed-border              : #{$medium};
   --tabbed-sidebar-bg          : #{$lighter};

assets/translations/en-us.yaml

@@ -142,15 +142,24 @@ backupRestoreOperator:
   encryption: Encryption
   encryptionConfigName: 
     label: Encryption Config Secret
-    tip: If the backup that this Restore references was created with encryption enabled, the same encryptionConfig file must be used here
+    tip: If the backup that this Restore references was created with encryption enabled, a secret containing the same encryptionConfig file must be used here
     options:
       none: Store the contents of the backup unencrypted
-      secret: Encrypt backups using an <a target="_blank" rel='noopener nofollow' href="https://kubernetes.io/docs/tasks/administer-cluster/encrypt-data/#understanding-the-encryption-at-rest-configuration">Encryption Config Secret</a>
-  deleteTimeout: Delete Timeout
+      secret: Encrypt backups using an <a target="_blank" rel='noopener nofollow' href="https://kubernetes.io/docs/tasks/administer-cluster/encrypt-data/#understanding-the-encryption-at-rest-configuration">Encryption Config Secret</a> (Recommended)
+  deleteTimeout: 
+    label: Delete Timeout
+    tip: Time after which resources will be force-deleted, even if they have finalizers
   resourceSetName: Resource Set
   schedule: 
     label: Schedule
     placeholder: e.g. @midnight or 0 0 * * *
+    options: 
+      disabled: One Time Backup
+      enabled: Schedule Backups
+  restoreFrom:
+    existing: An existing backup config
+    default: The deault storage target
+    s3: An S3-compatible object store
   retentionCount: 
     label: Retention Count
     units: |-
@@ -160,6 +169,7 @@ backupRestoreOperator:
       }
   s3:
     titles:
+      backupLocation: Select Backup Source
       location: Storage Location
       s3: S3
     credentialSecretName:  Credential Secret
@@ -171,7 +181,7 @@ backupRestoreOperator:
     folder: Folder
     insecureTLSSkipVerify: Skip TLS Verifications
   storageSource:
-    useDefault: Use the the default storage location configured during installation
+    useDefault: Use the default storage location configured during installation
     configureS3: Use an S3-compatible object store
     useBackup: Use the s3 location specified on the Backup CR
   targetBackup: Target Backup

components/form/LabeledSelect.vue

@@ -42,6 +42,10 @@ export default {
       type:    String,
       default: null
     },
+    hoverTooltip: {
+      type:    Boolean,
+      default: false
+    },
     localizedLabel: {
       type:    Boolean,
       default: false
@@ -205,7 +209,7 @@ export default {
         <span style="display: none"></span>
       </template>
     </v-select>
-    <LabeledTooltip v-if="tooltip && !focused" :value="tooltip" :status="status" />
+    <LabeledTooltip v-if="tooltip && !focused" v-tooltip="hoverTooltip ? {content: tooltip, classes: [`tooltip-${status}`]} : null" :value="hoverTooltip ? null : tooltip" :status="status" />
   </div>
 </template>
 

components/form/LabeledTooltip.vue

@@ -15,8 +15,8 @@ export default {
 
 <template>
   <div ref="container" class="labeled-tooltip" :class="{[status]: true}">
-    <i class="icon icon-info status-icon" />
-    <div class="tooltip" x-placement="bottom">
+    <i :class="{'hover':!value}" class="icon icon-info status-icon" />
+    <div v-if="value" class="tooltip" x-placement="bottom">
       <div class="tooltip-arrow" />
       <div class="tooltip-inner">
         {{ value }}
@@ -38,6 +38,10 @@ export default {
         right: 26px;
         top: 16px;
         font-size: 20px;
+
+        &.hover{
+          z-index: z-index(hoverOverContent)
+        }
     }
 
     .tooltip {

components/form/RadioButton.vue

@@ -95,6 +95,7 @@ export default {
     <span
       v-if="label"
       class="radio-label"
+      v-html="label"
     >
       <slot name="label">{{ label }}</slot>
     </span>

edit/resources.cattle.io.backup.vue

@@ -9,6 +9,7 @@ import LabeledSelect from '@/components/form/LabeledSelect';
 import Banner from '@/components/Banner';
 import RadioGroup from '@/components/form/RadioGroup';
 import NameNsDescription from '@/components/form/NameNsDescription';
+import Loading from '@/components/Loading';
 import { mapGetters } from 'vuex';
 import { SECRET, BACKUP_RESTORE, CATALOG } from '@/config/types';
 import { allHash } from '@/utils/promise';
@@ -26,7 +27,8 @@ export default {
     LabeledSelect,
     RadioGroup,
     NameNsDescription,
-    Banner
+    Banner,
+    Loading
   },
   mixins: [createEditView],
 
@@ -60,19 +62,17 @@ export default {
     if (!this.value.spec) {
       this.$set(this.value, 'spec', { retentionCount: 10 });
     }
-    if (!this.value.spec.storageLocation) {
-      this.$set(this.value.spec, 'storageLocation', { s3: {} });
-    }
-    const s3 = this.value.spec.storageLocation.s3;
+
+    const s3 = {};
 
     return {
-      allSecrets: [], allResourceSets: [], s3, storageSource: 'useDefault', useEncryption: false, releases: []
+      allSecrets: [], allResourceSets: [], s3, storageSource: 'useDefault', useEncryption: false, releases: [], setSchedule: false,
     };
   },
 
   computed: {
     chartNamespace() {
-      const BRORelease = this.releases.filter(release => get(release, 'spec.name' === 'backup-restore-operator'))[0];
+      const BRORelease = this.releases.filter(release => get(release, 'spec.name') === 'backup-restore-operator')[0];
 
       return BRORelease ? BRORelease.spec.namespace : '';
     },
@@ -131,11 +131,35 @@ export default {
 
     ...mapGetters({ t: 'i18n/t' })
   },
+
+  watch: {
+    storageSource(neu) {
+      if (neu === 'useDefault') {
+        delete this.value.spec.storageLocation;
+      } else {
+        this.$set(this.value.spec, 'storageLocation', this.s3);
+      }
+    },
+
+    namespacedResourceSetNames(neu) {
+      if (neu.length === 1) {
+        this.$set(this.value.spec, 'resourceSetName', neu[0]);
+      }
+    },
+
+    setSchedule(neu) {
+      if (!neu) {
+        delete this.value.spec.schedule;
+        delete this.value.spec.retentionCount;
+      }
+    }
+  }
 };
 </script>
 
 <template>
-  <div>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
     <CruResource :validation-passed="!!value.spec.resourceSetName && !!value.spec.resourceSetName.length" :done-route="doneRoute" :resource="value" :mode="mode" @finish="save">
       <template>
         <NameNsDescription :mode="mode" :value="value" :namespaced="false" />
@@ -145,11 +169,21 @@ export default {
               <div class="col span-6">
                 <LabeledSelect v-model="value.spec.resourceSetName" required :mode="mode" :options="namespacedResourceSetNames" :label="t('backupRestoreOperator.resourceSetName')" />
               </div>
-              <div class="col span-6">
-                <LabeledInput v-model="value.spec.schedule" :mode="mode" type="number" :label="t('backupRestoreOperator.schedule.label')" :placeholder="t('backupRestoreOperator.schedule.placeholder')" />
-              </div>
             </div>
-            <div class="row mb-10">
+          </div>
+          <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" :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>
@@ -165,6 +199,7 @@ export default {
                   :label="t('backupRestoreOperator.encryption')"
                   :options="encryptionOptions.options"
                   :labels="encryptionOptions.labels"
+                  :mode="mode"
                 />
               </div>
             </div>
@@ -180,9 +215,10 @@ export default {
               <RadioGroup
                 v-model="storageSource"
                 name="storageSource"
-                :label="t('backupRestoreOperator.s3.titles.location')"
+                :label="t('backupRestoreOperator.s3.titles.backupLocation')"
                 :options="storageOptions.options"
                 :labels="storageOptions.labels"
+                :mode="mode"
               />
             </div>
           </div>

edit/resources.cattle.io.restore.vue

@@ -6,12 +6,12 @@ import UnitInput from '@/components/form/UnitInput';
 import Checkbox from '@/components/form/Checkbox';
 import FileSelector from '@/components/form/FileSelector';
 import LabeledSelect from '@/components/form/LabeledSelect';
-import Banner from '@/components/Banner';
+import Loading from '@/components/Loading';
 import RadioGroup from '@/components/form/RadioGroup';
 import { mapGetters } from 'vuex';
 import { SECRET, BACKUP_RESTORE, CATALOG } from '@/config/types';
 import { allHash } from '@/utils/promise';
-import { get, isEmpty } from '@/utils/object';
+import { get } from '@/utils/object';
 export default {
 
   components: {
@@ -21,7 +21,7 @@ export default {
     Checkbox,
     FileSelector,
     LabeledSelect,
-    Banner,
+    Loading,
     RadioGroup
   },
 
@@ -52,22 +52,23 @@ export default {
     this.allSecrets = hash.secrets;
     this.allBackups = hash.backups;
     this.releases = hash.releases;
+
+    if (hash.backups.length) {
+      this.storageSource = 'useBackup';
+    }
   },
 
   data() {
     if (!this.value.spec) {
       this.$set(this.value, 'spec', { prune: true, deleteTimeoutSeconds: 10 });
     }
-    if (!this.value.spec.storageLocation) {
-      this.$set(this.value.spec, 'storageLocation', { s3: {} });
-    }
+
     if (!this.value.metadata.name) {
       this.value.metadata.generateName = 'restore-';
     }
-    const s3 = this.value.spec.storageLocation.s3;
 
     return {
-      allSecrets: [], allBackups: [], s3, targetBackup: null, storageSource: 'useDefault', releases: []
+      allSecrets: [], allBackups: [], s3: {}, targetBackup: null, storageSource: 'useDefault', releases: []
     };
   },
 
@@ -97,25 +98,17 @@ export default {
       return this.allSecrets.filter(secret => !!secret.data['encryption-provider-config.yaml'] && secret.metadata.namespace === this.chartNamespace).map(secret => secret.metadata.name);
     },
 
-    namespacedBackups() {
-      return this.allBackups.filter(backup => backup.namespace === this.value?.metadata?.namespace);
-    },
-
-    showWarning() {
-      return this.isEncrypted && !this.value.spec.encryptionConfigName;
-    },
-
     isEncrypted() {
       return !!((this.value.spec.backupFilename || '').match(/.*\.enc$/));
     },
 
     radioOptions() {
       const options = ['useDefault', 'configureS3'];
-      const labels = [this.t('backupRestoreOperator.storageSource.useDefault'), this.t('backupRestoreOperator.storageSource.configureS3')];
+      const labels = [this.t('backupRestoreOperator.restoreFrom.default'), this.t('backupRestoreOperator.restoreFrom.s3')];
 
-      if (this.targetBackup && !isEmpty(get(this.targetBackup, 'spec.storageLocation.s3'))) {
-        options.push('useBackup');
-        labels.push( this.t('backupRestoreOperator.storageSource.useBackup'));
+      if (this.allBackups.length) {
+        options.unshift('useBackup');
+        labels.unshift( this.t('backupRestoreOperator.restoreFrom.existing'));
       }
 
       return { options, labels };
@@ -124,13 +117,40 @@ export default {
     ...mapGetters({ t: 'i18n/t' })
   },
 
+  watch: {
+    storageSource(neu, old) {
+      if (neu === 'useDefault') {
+        delete this.value.spec.storageLocation;
+      } else if (!this.value.spec.storageLocation) {
+        this.$set(this.value.spec, 'storageLocation', { s3: {} });
+        this.s3 = this.value.spec.storageLocation.s3;
+      }
+      if (neu === 'useBackup') {
+        if (this.allBackups.length === 1) {
+          this.updateTargetBackup(this.allBackups[0]);
+        }
+      } else if (this.targetBackup) {
+        if (get(this.targetBackup, 'spec.storageLocation.s3')) {
+          Object.assign(this.value.spec.storageLocation.s3, this.targetBackup.spec.storageLocation.s3);
+        }
+        this.$set(this.value.spec, 'backupFilename', this.targetBackup.status.filename);
+        if (this.targetBackup.spec.encryptionConfigName) {
+          this.$set(this.value.spec, 'encryptionConfigName', this.targetBackup.spec.encryptionConfigName);
+        }
+      }
+    }
+  },
+
   methods: {
     updateTargetBackup(neu) {
-      if (get(neu, 'spec.storageLocation.s3') && this.locationSource === 'useBackup') {
+      if (get(neu, 'spec.storageLocation.s3')) {
         Object.assign(this.value.spec.storageLocation.s3, neu.spec.storageLocation.s3);
       }
-      this.$set(this.value.spec, 'backupFileName', neu.status.filename);
-      this.$set(this.value.spec, 'encryptionConfigName', neu.spec.encryptionConfigName);
+      this.$set(this.value, 'spec', { ...this.value.spec, backupFilename: neu.status.filename });
+
+      if (neu.spec.encryptionConfigName) {
+        this.$set(this.value, 'spec', { ...this.value.spec, encryptionConfigName: neu.spec.encryptionConfigName });
+      }
       this.targetBackup = neu;
     }
   }
@@ -140,90 +160,110 @@ export default {
 
 <template>
   <div>
+    <Loading v-if="$fetchState.pending" />
+
     <CruResource :validation-passed="!!value.spec.backupFilename && !!value.spec.backupFilename.length" :done-route="doneRoute" :resource="value" :mode="mode" @finish="save">
       <template>
         <div class="bordered-section">
-          <Banner v-if="showWarning" color="warning" :label="t('backupRestoreOperator.encryptionConfigName.tip')" />
           <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"
+              />
+            </div>
+          </div>
+          <template v-if="storageSource === 'configureS3'">
+            <div class="row mb-10">
+              <div class="col span-6">
+                <LabeledSelect
+                  v-model="credentialSecret"
+                  :get-option-label="opt=>opt.metadata.name || ''"
+                  :mode="mode"
+                  :options="allSecrets"
+                  :label="t('backupRestoreOperator.s3.credentialSecretName')"
+                />
+              </div>
+              <div class="col span-6">
+                <LabeledInput v-model="s3.bucketName" :mode="mode" :label="t('backupRestoreOperator.s3.bucketName')" />
+              </div>
+            </div>
+            <div class="row mb-10">
+              <div class="col span-6">
+                <LabeledInput v-model="s3.region" :mode="mode" :label="t('backupRestoreOperator.s3.region')" />
+              </div>
+              <div class="col span-6">
+                <LabeledInput v-model="s3.folder" :mode="mode" :label="t('backupRestoreOperator.s3.folder')" />
+              </div>
+            </div>
+            <div class="row mb-10">
+              <div class="col span-6">
+                <LabeledInput v-model="s3.endpoint" :mode="mode" :label="t('backupRestoreOperator.s3.endpoint')" />
+                <Checkbox v-model="s3.insecureTLSSkipVerify" class="mt-10" :mode="mode" :label="t('backupRestoreOperator.s3.insecureTLSSkipVerify')" />
+              </div>
+              <div class="col span-6">
+                <LabeledInput v-model="s3.endpointCA" :mode="mode" type="multiline" :label="t('backupRestoreOperator.s3.endpointCA')" />
+                <FileSelector v-if="mode!=='view'" class="btn btn-sm role-primary mt-5" :mode="mode" :label="t('generic.readFromFile')" @selected="e=>$set(s3, 'endpointCA', e)" />
+              </div>
+            </div>
+          </template>
+          <div v-else-if="storageSource==='useBackup'" class="row mb-10">
             <div class="col span-6">
               <LabeledSelect
-                :disabled="!namespacedBackups.length"
+                :disabled="!allBackups.length"
                 :value="targetBackup"
-                :options="namespacedBackups"
+                :options="allBackups"
                 :mode="mode"
                 option-label="metadata.name"
                 :label="t('backupRestoreOperator.targetBackup')"
                 @input="updateTargetBackup"
               />
             </div>
-            <div class="col span-6">
-              <LabeledInput v-model="value.spec.backupFilename" required :mode="mode" :label="t('backupRestoreOperator.backupFilename')" />
-            </div>
           </div>
+        </div>
+
+        <div>
           <div :style="{'align-items':'center'}" class="row mb-10">
             <div class="col span-6">
-              <UnitInput v-model="value.spec.deleteTimeoutSeconds" :suffix="t('suffix.seconds')" :mode="mode" :label="t('backupRestoreOperator.deleteTimeout')" />
+              <LabeledInput v-model="value.spec.backupFilename" :spellcheck="false" required :mode="mode" :label="t('backupRestoreOperator.backupFilename')" />
             </div>
             <div class="col span-6">
-              <LabeledSelect v-model="value.spec.encryptionConfigName" :disabled="!isEncrypted" :mode="mode" :options="encryptionSecretNames" :label="t('backupRestoreOperator.encryptionConfigName.label')" />
+              <LabeledSelect
+                v-if="isEncrypted"
+                v-model="value.spec.encryptionConfigName"
+                status="warning"
+                :tooltip="t('backupRestoreOperator.encryptionConfigName.tip')"
+                :hover-tooltip="true"
+                :mode="mode"
+                :options="encryptionSecretNames"
+                :label="t('backupRestoreOperator.encryptionConfigName.label')"
+              />
             </div>
           </div>
           <div :style="{'align-items':'center'}" class="row">
-            <div class="col span-12">
-              <Checkbox v-model="value.spec.prune" :label="t('backupRestoreOperator.prune.label')" :mode="mode" />
-              <div class="text-muted">
-                {{ t('backupRestoreOperator.prune.tip') }}
-              </div>
+            <div class="col span-6">
+              <UnitInput v-model="value.spec.deleteTimeoutSeconds" :suffix="t('suffix.seconds')" :mode="mode" :label="t('backupRestoreOperator.deleteTimeout.label')">
+                <template #label>
+                  <label v-tooltip="t('backupRestoreOperator.deleteTimeout.tip')" class="has-tooltip">
+                    {{ t('backupRestoreOperator.deleteTimeout.label') }} <i class="icon icon-info" />
+                  </label>
+                </template>
+              </UnitInput>
+            </div>
+            <div class="col span-6">
+              <Checkbox v-model="value.spec.prune" :label="t('backupRestoreOperator.prune.label')" :mode="mode">
+                <template #label>
+                  <span v-tooltip="t('backupRestoreOperator.prune.tip')" class="text-label">
+                    {{ t('backupRestoreOperator.prune.label') }} <i class="icon icon-info" />
+                  </span>
+                </template>
+              </Checkbox>
             </div>
           </div>
         </div>
-
-        <div class="row mb-10">
-          <div class="col span-12">
-            <RadioGroup
-              v-model="storageSource"
-              name="storageSource"
-              :label="t('backupRestoreOperator.s3.titles.location')"
-              :options="radioOptions.options"
-              :labels="radioOptions.labels"
-            />
-          </div>
-        </div>
-
-        <template v-if="storageSource !== 'useDefault'">
-          <div class="row mb-10">
-            <div class="col span-6">
-              <LabeledSelect
-                v-model="credentialSecret"
-                :get-option-label="opt=>opt.metadata.name || ''"
-                :mode="mode"
-                :options="allSecrets"
-                :label="t('backupRestoreOperator.s3.credentialSecretName')"
-              />
-            </div>
-            <div class="col span-6">
-              <LabeledInput v-model="s3.bucketName" :mode="mode" :label="t('backupRestoreOperator.s3.bucketName')" />
-            </div>
-          </div>
-          <div class="row mb-10">
-            <div class="col span-6">
-              <LabeledInput v-model="s3.region" :mode="mode" :label="t('backupRestoreOperator.s3.region')" />
-            </div>
-            <div class="col span-6">
-              <LabeledInput v-model="s3.folder" :mode="mode" :label="t('backupRestoreOperator.s3.folder')" />
-            </div>
-          </div>
-          <div class="row mb-10">
-            <div class="col span-6">
-              <LabeledInput v-model="s3.endpoint" :mode="mode" :label="t('backupRestoreOperator.s3.endpoint')" />
-              <Checkbox v-model="s3.insecureTLSSkipVerify" class="mt-10" :mode="mode" :label="t('backupRestoreOperator.s3.insecureTLSSkipVerify')" />
-            </div>
-            <div class="col span-6">
-              <LabeledInput v-model="s3.endpointCA" :mode="mode" type="multiline" :label="t('backupRestoreOperator.s3.endpointCA')" />
-              <FileSelector v-if="mode!=='view'" class="btn btn-sm role-primary mt-5" :mode="mode" :label="t('generic.readFromFile')" @selected="e=>$set(s3, 'endpointCA', e)" />
-            </div>
-          </div>
-        </template>
       </template>
     </CruResource>
   </div>