Fix Vue3: CIS Benchmark issues (#11991)

* add missing translations in clusterscan edit view + fix broken links in clusterscan + update clusterscan model to apply defaults on edit/create view instead of model because of schema diet changes

* change mode for realMode

shell/assets/translations/en-us.yaml

@@ -1177,6 +1177,7 @@ cis:
     total: Total
     warn: Warn
   scheduling:
+    title: Scheduling
     disable: Run scan once
     enable: Run scan on a schedule
   scoreWarning:
@@ -1185,6 +1186,7 @@ cis:
   testID: Test ID
   testsSkipped: Tests Skipped
   testsToSkip: Tests to Skip
+  alerting: Alerting
 
 cluster:
   jwtAuthentication:

shell/config/product/cis.js

@@ -37,9 +37,9 @@ export function init(store) {
     {
       name:          'clusterScanProfile',
       label:         'Profile',
-      value:         'status.lastRunScanProfileName',
       formatter:     'Link',
-      formatterOpts: { options: { internal: true }, to: { name: 'c-cluster-product-resource-id', params: { resource: CIS.CLUSTER_SCAN_PROFILE } } },
+      formatterOpts: { options: { internal: true }, urlKey: 'scanProfileLink' },
+      value:         'status.lastRunScanProfileName',
       sort:          ['status.lastRunScanProfileName'],
     },
     {
@@ -115,7 +115,8 @@ export function init(store) {
       labelKey:      'cis.benchmarkVersion',
       value:         'spec.benchmarkVersion',
       formatter:     'Link',
-      formatterOpts: { options: { internal: true }, to: { name: 'c-cluster-product-resource-id', params: { resource: CIS.BENCHMARK } } },
+      formatterOpts: { options: { internal: true }, urlKey: 'benchmarkVersionLink' },
+      sort:          ['spec.benchmarkVersion'],
     },
     {
       name:     'skippedTests',

shell/edit/cis.cattle.io.clusterscan.vue

@@ -12,7 +12,7 @@ import { allHash } from '@shell/utils/promise';
 import { Checkbox } from '@components/Form/Checkbox';
 import { RadioGroup } from '@components/Form/Radio';
 import { get } from '@shell/utils/object';
-import { _VIEW, _CREATE } from '@shell/config/query-params';
+import { _VIEW, _CREATE, _EDIT } from '@shell/config/query-params';
 import { isValidCron } from 'cron-validator';
 import { fetchSpecsScheduledScanConfig } from '@shell/models/cis.cattle.io.clusterscan';
 
@@ -39,6 +39,37 @@ export default {
   },
 
   async fetch() {
+    // we need to force-fetch the resource fields, otherwise on page refresh
+    // in the clusterscan edit/create views the "canBeScheduled" won't run properly
+    await this.schema.fetchResourceFields();
+
+    if (this.realMode === _CREATE || this.realMode === _EDIT) {
+      const includeScheduling = this.value.canBeScheduled();
+      const spec = this.value.spec || {};
+
+      spec.scanProfileName = null;
+      if (includeScheduling) {
+        spec.scoreWarning = 'pass';
+        spec.scheduledScanConfig = { scanAlertRule: {}, retentionCount: 3 };
+      }
+
+      this.value.spec = spec;
+    }
+
+    if (!this.value.metadata.name) {
+      this.value.metadata.generateName = 'scan-';
+    }
+    if (!this.value.spec.scheduledScanConfig) {
+      this.value.spec['scheduledScanConfig'] = { scanAlertRule: {} };
+    }
+    if (!this.value.spec.scheduledScanConfig.scanAlertRule) {
+      this.value.spec.scheduledScanConfig['scanAlertRule'] = { };
+    }
+
+    this.isScheduled = !!get(this.value, 'spec.scheduledScanConfig.cronSchedule');
+    this.scheduledScanConfig = this.value.spec.scheduledScanConfig;
+    this.scanAlertRule = this.value.spec.scheduledScanConfig.scanAlertRule;
+
     const hash = await allHash({
       profiles:               this.$store.dispatch('cluster/findAll', { type: CIS.CLUSTER_SCAN_PROFILE }),
       benchmarks:             this.$store.dispatch('cluster/findAll', { type: CIS.BENCHMARK }),
@@ -65,24 +96,13 @@ export default {
   },
 
   data() {
-    if (!this.value.metadata.name) {
-      this.value.metadata.generateName = 'scan-';
-    }
-    if (!this.value.spec.scheduledScanConfig) {
-      this.value.spec['scheduledScanConfig'] = { scanAlertRule: {} };
-    }
-    if (!this.value.spec.scheduledScanConfig.scanAlertRule) {
-      this.value.spec.scheduledScanConfig['scanAlertRule'] = { };
-    }
-    const isScheduled = !!get(this.value, 'spec.scheduledScanConfig.cronSchedule');
-
     return {
       allProfiles:         [],
       defaultConfigMap:    null,
-      scheduledScanConfig: this.value.spec.scheduledScanConfig,
+      scheduledScanConfig: null,
-      scanAlertRule:       this.value.spec.scheduledScanConfig.scanAlertRule,
+      scanAlertRule:       null,
       hasAlertManager:     false,
-      isScheduled
+      isScheduled:         null
     };
   },
 
@@ -281,7 +301,7 @@ export default {
       </div>
     </div>
     <template v-if="canBeScheduled">
-      <h3>Scheduling</h3>
+      <h3>{{ t('cis.scheduling.title') }}</h3>
       <div class="row mb-20">
         <div class="col">
           <RadioGroup
@@ -314,8 +334,8 @@ export default {
             />
           </div>
         </div>
-        <h3>
+        <h3 class="mt-20">
-          Alerting
+          {{ t('cis.alerting') }}
         </h3>
         <div class="row mb-20">
           <div class="col span-12">

shell/models/cis.cattle.io.clusterscan.js

@@ -1,8 +1,8 @@
-import { _CREATE, _EDIT } from '@shell/config/query-params';
+import { NAME as PRODUCT_NAME } from '@shell/config/product/cis';
 import { CIS } from '@shell/config/types';
 import { findBy } from '@shell/utils/array';
 import { downloadFile, generateZip } from '@shell/utils/download';
-import { get, isEmpty, set } from '@shell/utils/object';
+import { get, isEmpty } from '@shell/utils/object';
 import { sortBy } from '@shell/utils/sort';
 import day from 'dayjs';
 import SteveModel from '@shell/plugins/steve/steve-class';
@@ -77,20 +77,6 @@ export default class ClusterScan extends SteveModel {
     return out;
   }
 
-  applyDefaults(vm, mode) {
-    if (mode === _CREATE || mode === _EDIT) {
-      const includeScheduling = this.canBeScheduled();
-      const spec = this.spec || {};
-
-      spec.scanProfileName = null;
-      if (includeScheduling) {
-        spec.scoreWarning = 'pass';
-        spec.scheduledScanConfig = { scanAlertRule: {}, retentionCount: 3 };
-      }
-      set(this, 'spec', spec);
-    }
-  }
-
   canBeScheduled() {
     return hasSpecsScheduledScanConfig(this.$getters['schemaFor'](this.type));
   }
@@ -166,6 +152,21 @@ export default class ClusterScan extends SteveModel {
       });
     }
   }
+
+  get scanProfileLink() {
+    if (this.status?.lastRunScanProfileName) {
+      return {
+        name:   'c-cluster-product-resource-id',
+        params: {
+          resource: CIS.CLUSTER_SCAN_PROFILE,
+          product:  PRODUCT_NAME,
+          id:       this.status?.lastRunScanProfileName
+        }
+      };
+    }
+
+    return {};
+  }
 }
 
 const labelFor = (report) => {

shell/models/cis.cattle.io.clusterscanprofile.js

@@ -1,5 +1,7 @@
 
 import SteveModel from '@shell/plugins/steve/steve-class';
+import { NAME as PRODUCT_NAME } from '@shell/config/product/cis';
+import { CIS } from '@shell/config/types';
 
 export default class CISProfile extends SteveModel {
   warnDeletionMessage(toRemove = []) {
@@ -11,4 +13,19 @@ export default class CISProfile extends SteveModel {
 
     return skipTests.length;
   }
+
+  get benchmarkVersionLink() {
+    if (this.spec?.benchmarkVersion) {
+      return {
+        name:   'c-cluster-product-resource-id',
+        params: {
+          resource: CIS.BENCHMARK,
+          product:  PRODUCT_NAME,
+          id:       this.spec?.benchmarkVersion
+        }
+      };
+    }
+
+    return {};
+  }
 }