@rancher/shell 1.2.3 → 2.0.1

package/pages/c/_cluster/manager/drivers/kontainerDriver/index.vue

@@ -0,0 +1,91 @@
+<script>
+import { NORMAN } from '@shell/config/types';
+import ResourceTable from '@shell/components/ResourceTable';
+import AsyncButton from '@shell/components/AsyncButton';
+import Loading from '@shell/components/Loading';
+import Masthead from '@shell/components/ResourceList/Masthead';
+export default {
+  name:       'KontainerDrivers',
+  components: {
+    ResourceTable, Loading, Masthead, AsyncButton
+  },
+
+  async fetch() {
+    this.allDrivers = await this.$store.dispatch('rancher/findAll', { type: NORMAN.KONTAINER_DRIVER }, { root: true });
+  },
+
+  data() {
+    return {
+      allDrivers:                       null,
+      canRefreshK8sMetadata:            true,
+      resource:                         NORMAN.KONTAINER_DRIVER,
+      schema:                           this.$store.getters['rancher/schemaFor'](NORMAN.KONTAINER_DRIVER),
+      useQueryParamsForSimpleFiltering: false,
+      forceUpdateLiveAndDelayed:        10
+    };
+  },
+  computed: {
+    rows() {
+      return this.allDrivers || [];
+    },
+  },
+  methods: {
+    async refreshK8sMetadata(buttonDone) {
+      try {
+        await this.$store.dispatch('rancher/request', {
+          url:    '/v3/kontainerdrivers?action=refresh',
+          method: 'post',
+          data:   { },
+        });
+
+        buttonDone(true);
+      } catch (err) {
+        this.$store.dispatch('growl/fromError', { title: 'Error refreshing kontainer drivers', err }, { root: true });
+        buttonDone(false);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <Masthead
+      :schema="schema"
+      :resource="resource"
+      :type-display="t('drivers.kontainer.title')"
+    >
+      <template slot="extraActions">
+        <AsyncButton
+          v-if="canRefreshK8sMetadata"
+          mode="refresh"
+          :action-label="t('drivers.actions.refresh')"
+          :waiting-label="t('drivers.actions.refresh')"
+          :success-label="t('drivers.actions.refresh')"
+          :error-label="t('drivers.actions.refresh')"
+          :data-testid="'kontainer-driver-refresh'"
+          @click="refreshK8sMetadata"
+        />
+      </template>
+    </Masthead>
+    <ResourceTable
+      :schema="schema"
+      :rows="rows"
+      :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+      :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
+      :tableActions="true"
+      :data-testid="'kontainer-driver-list'"
+    >
+      <template #cell:name="{row}">
+        <span>{{ row.nameDisplay }}</span>
+        <div
+          v-if="row.description"
+          class="description text-muted text-small"
+        >
+          {{ row.description }}
+        </div>
+      </template>
+    </ResourceTable>
+  </div>
+</template>

package/pages/c/_cluster/manager/drivers/nodeDriver/_id.vue

@@ -0,0 +1,12 @@
+<script>
+import ResourceDetail from '@shell/components/ResourceDetail';
+
+export default {
+  name:       'NodeDriverEditPage',
+  components: { ResourceDetail },
+};
+</script>
+
+<template>
+  <ResourceDetail resource-override="nodeDriver" />
+</template>

package/pages/c/_cluster/manager/drivers/nodeDriver/create.vue

@@ -0,0 +1,15 @@
+<script>
+import ResourceDetail from '@shell/components/ResourceDetail';
+
+export default {
+  name:       'NodeDriverCreate',
+  components: { ResourceDetail },
+};
+</script>
+
+<template>
+  <ResourceDetail
+    resource-override="nodeDriver"
+    parent-route-override="c-cluster-manager-driver-nodedriver"
+  />
+</template>

package/pages/c/_cluster/manager/drivers/nodeDriver/index.vue

@@ -0,0 +1,60 @@
+<script>
+import { NORMAN } from '@shell/config/types';
+import ResourceTable from '@shell/components/ResourceTable';
+import Loading from '@shell/components/Loading';
+import Masthead from '@shell/components/ResourceList/Masthead';
+export default {
+  name:       'NodeDrivers',
+  components: {
+    ResourceTable, Loading, Masthead
+  },
+
+  async fetch() {
+    this.allDrivers = await this.$store.dispatch('rancher/findAll', { type: NORMAN.NODE_DRIVER }, { root: true });
+  },
+
+  data() {
+    return {
+      allDrivers:                       null,
+      resource:                         NORMAN.NODE_DRIVER,
+      schema:                           this.$store.getters['rancher/schemaFor'](NORMAN.NODE_DRIVER),
+      useQueryParamsForSimpleFiltering: false,
+      forceUpdateLiveAndDelayed:        10
+    };
+  },
+  computed: {
+    rows() {
+      return this.allDrivers || [];
+    },
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <Masthead
+      :schema="schema"
+      :resource="resource"
+      :type-display="t('drivers.node.title')"
+    />
+    <ResourceTable
+      :schema="schema"
+      :rows="rows"
+      :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+      :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
+      :tableActions="true"
+      :data-testid="'node-driver-list'"
+    >
+      <template #cell:name="{row}">
+        <span>{{ row.nameDisplay }}</span>
+        <div
+          v-if="row.description"
+          class="description text-muted text-small"
+        >
+          {{ row.description }}
+        </div>
+      </template>
+    </ResourceTable>
+  </div>
+</template>

package/pages/c/_cluster/manager/jwt.authentication/index.vue

@@ -0,0 +1,235 @@
+<script>
+import { MANAGEMENT } from '@shell/config/types';
+import { STATE, AGE } from '@shell/config/table-headers';
+import { STATES_ENUM, colorForState } from '@shell/plugins/dashboard-store/resource-class';
+import ResourceTable, { defaultTableSortGenerationFn } from '@shell/components/ResourceTable';
+import Loading from '@shell/components/Loading';
+import Masthead from '@shell/components/ResourceList/Masthead';
+import { allHash } from '@shell/utils/promise';
+import ResourceFetch from '@shell/mixins/resource-fetch';
+import { BadgeState } from '@components/BadgeState';
+import TypeDescription from '@shell/components/TypeDescription';
+
+import { exceptionToErrorsArray } from '@shell/utils/error';
+import Banner from '@components/Banner/Banner.vue';
+
+export default {
+  name:       'ClusterProxyConfig',
+  components: {
+    ResourceTable, Loading, Masthead, BadgeState, Banner, TypeDescription
+  },
+  mixins: [ResourceFetch],
+  async fetch() {
+    const hash = {
+      mgmtClusters: this.$fetchType(MANAGEMENT.CLUSTER),
+      proxyConfig:  this.$fetchType(MANAGEMENT.CLUSTER_PROXY_CONFIG)
+    };
+
+    const res = await allHash(hash);
+
+    this.clusters = res.mgmtClusters;
+    this.proxyConfigs = res.proxyConfig;
+  },
+
+  data() {
+    return {
+      clusters:                         [],
+      proxyConfigs:                     [],
+      resource:                         MANAGEMENT.CLUSTER_PROXY_CONFIG,
+      schema:                           this.$store.getters['management/schemaFor'](MANAGEMENT.CLUSTER_PROXY_CONFIG),
+      useQueryParamsForSimpleFiltering: false,
+      errors:                           [],
+      forceUpdateLiveAndDelayed:        5
+    };
+  },
+  methods: {
+    closeError(index) {
+      this.errors = this.errors.filter((_, i) => i !== index);
+    },
+    sortGenerationFn() {
+      // This is needed to make sure table gets refreshed when the status changes. Otherwise, it uses cached values.
+      const base = defaultTableSortGenerationFn(this.schema, this.$store);
+
+      return base + this.forceUpdateLiveAndDelayed;
+    },
+  },
+  computed: {
+    headers() {
+      const out = [
+        {
+          ...STATE,
+          value: 'value',
+        },
+        {
+          name:      'clusterName',
+          labelKey:  'jwt.headers.clusterName',
+          value:     'clusterName',
+          sort:      'clusterName',
+          search:    ['clusterName'],
+          formatter: 'LinkDetail'
+        },
+
+        {
+          name:      'updatedOn',
+          labelKey:  'jwt.headers.updatedOn',
+          value:     'updatedOn',
+          sort:      'updatedOn',
+          formatter: 'Date',
+        },
+        {
+          ...AGE,
+          labelKey: 'jwt.headers.clusterAge',
+        },
+      ];
+
+      return out;
+    },
+    rows() {
+      const proxyConfigMap = new Map();
+      const rows = [];
+
+      const enableAction = {
+        action:     'activate',
+        allEnabled: false,
+        anyEnabled: true,
+        bulkable:   true,
+        enabled:    true,
+        icon:       'icon icon-checkmark',
+        label:      this.t('jwt.actions.activate'),
+        invoke:     async(opts, resources) => {
+          const promises = [];
+
+          try {
+            resources.forEach((resource) => {
+              const res = resource.enable();
+
+              promises.push(res);
+            });
+            await Promise.all(promises);
+          } catch (e) {
+            this.errors = exceptionToErrorsArray(e);
+          }
+        }
+      };
+      const disableAction = {
+        action:     'deactivate',
+        allEnabled: false,
+        anyEnabled: true,
+        bulkable:   true,
+        enabled:    true,
+        icon:       'icon icon-x',
+        label:      this.t('jwt.actions.deactivate'),
+        invoke:     async(opts, resources) => {
+          const promises = [];
+
+          try {
+            resources.forEach((resource) => {
+              const res = resource.disable();
+
+              promises.push(res);
+            });
+            await Promise.all(promises);
+          } catch (e) {
+            this.errors = exceptionToErrorsArray(e);
+          }
+        }
+      };
+
+      this.proxyConfigs.forEach((config) => {
+        const id = config.metadata.namespace;
+
+        proxyConfigMap.set(id, { config });
+      });
+
+      this.clusters.forEach((cluster) => {
+        const id = cluster.id;
+        const clusterName = cluster.spec.displayName;
+
+        if (id !== 'local') {
+          const config = proxyConfigMap.get(id)?.config;
+
+          const value = config?.enabled || '';
+          const configName = config?.metadata?.name || '';
+          const updatedOn = value ? config?.metadata?.creationTimestamp : '';
+          const stateBackground = value ? colorForState(STATES_ENUM.ACTIVE).replace('text', 'bg') : colorForState(STATES_ENUM.INFO).replace('text', 'bg');
+          const stateLabel = value ? this.t('jwt.state.enabled') : this.t('jwt.state.disabled');
+          const creationTimestamp = cluster.metadata.creationTimestamp;
+          const availableActions = value ? [disableAction] : [enableAction];
+          const enable = async() => {
+            if (!configName) {
+              const clusterProxyConfig = await this.$store.dispatch('management/create', {
+                enabled:  true,
+                metadata: { namespace: id, generateName: 'cluster-proxy-config-' },
+              });
+
+              return clusterProxyConfig.save({ url: 'v1/management.cattle.io.clusterproxyconfigs', method: 'POST' });
+            } else {
+              config.enabled = true;
+
+              return config.save();
+            }
+          };
+          const disable = async() => {
+            return config.remove();
+          };
+
+          rows.push({
+            id, clusterName, value, stateBackground, stateLabel, creationTimestamp, updatedOn, availableActions, enable, disable
+          });
+        }
+      });
+      this.forceUpdateLiveAndDelayed = new Date().getTime();
+
+      return rows;
+    },
+  },
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else>
+    <Masthead
+      :schema="schema"
+      :resource="resource"
+      :isCreatable="false"
+      :type-display="t('jwt.title')"
+    >
+      <template #typeDescription>
+        <TypeDescription :resource="'jwt.authentication'" />
+      </template>
+    </Masthead>
+
+    <Banner
+      v-for="(err, i) in errors"
+      :key="i"
+      color="error"
+      :label="err"
+      :closable="true"
+      @close="closeError(i)"
+    />
+
+    <ResourceTable
+      :schema="schema"
+      :headers="headers"
+      :key-field="'id'"
+      :namespaced="false"
+      :rows="rows"
+      :tableActions="true"
+      :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
+      :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+      :sort-generation-fn="sortGenerationFn"
+      data-testid="jwt-authentication-list"
+    >
+      <template #col:state="{row}">
+        <td>
+          <BadgeState
+            :color="row.stateBackground"
+            :label="row.stateLabel"
+            class="state-bagde"
+          />
+        </td>
+      </template>
+    </ResourceTable>
+  </div>
+</template>

package/pages/c/_cluster/manager/pages/_page.vue

@@ -7,11 +7,10 @@ export default {
   data() {
     return {
       PAGES: {
-        'rke-drivers':           '/n/drivers/cluster',
-        'rke-templates':         '/g/rke-templates/index',
-        'cloud-credentials':     '/g/security/cloud-credentials',
-        'node-templates':        '/n/node-templates',
-        'pod-security-policies': '/g/security/policies',
+        'rke-drivers':       '/n/drivers/cluster',
+        'rke-templates':     '/g/rke-templates/index',
+        'cloud-credentials': '/g/security/cloud-credentials',
+        'node-templates':    '/n/node-templates',
       }
     };
   }

package/pages/c/_cluster/monitoring/alertmanagerconfig/_alertmanagerconfigid/receiver.vue

@@ -23,12 +23,16 @@ export default {
 
   async fetch() {
     const inStore = this.$store.getters['currentProduct'].inStore;
+    const alertmanagerConfigSchema = this.$store.getters[`${ inStore }/schemaFor`](MONITORING.ALERTMANAGERCONFIG);
 
     this.receiverName = this.$route.query.receiverName;
 
     const alertmanagerConfigId = this.$route.params.alertmanagerconfigid;
     const originalAlertmanagerConfigResource = await this.$store.dispatch(`${ inStore }/find`, { type: MONITORING.ALERTMANAGERCONFIG, id: alertmanagerConfigId });
     const alertmanagerConfigResource = await this.$store.dispatch(`${ inStore }/clone`, { resource: originalAlertmanagerConfigResource });
+
+    await alertmanagerConfigSchema.fetchResourceFields();
+
     const mode = this.$route.query.mode;
 
     if (mode !== _CREATE) {

package/pages/c/_cluster/monitoring/route-receiver/index.vue

@@ -100,9 +100,9 @@ export default {
       >
         <div v-if="secretTo">
           We don't support the current route format stored in alertmanager.yaml. Click
-          <nuxt-link :to="secretTo">
+          <router-link :to="secretTo">
             here
-          </nuxt-link> to update manually.
+          </router-link> to update manually.
         </div>
         <ResourceTable
           v-else

package/pages/c/_cluster/neuvector/index.vue

@@ -21,6 +21,7 @@ export default {
 
   computed: { ...mapGetters(['currentCluster']) },
 
+  // i18n-uses neuvector.overview.linkedList.neuvector.label, neuvector.overview.linkedList.neuvector.description
   mounted() {
     this.externalLinks = [
       {

package/pages/c/_cluster/settings/DefaultLinksEditor.vue

@@ -82,6 +82,7 @@ export default {
             v-if="!isView"
             v-model="row.enabled"
             label-key="customLinks.settings.showLabel"
+            :data-testid="`custom-links__checkbox-${i}`"
             @input="showhide(row, i, $event)"
           />
         </div>

package/pages/c/_cluster/settings/banners.vue

@@ -13,6 +13,7 @@ import { SETTING } from '@shell/config/settings';
 import { clone } from '@shell/utils/object';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import NotificationSettings from '@shell/components/form/NotificationSettings.vue';
+import { getIndividualBanners, overlayIndividualBanners } from '@shell/utils/banners';
 
 const DEFAULT_BANNER_SETTING = {
   loginError:   { message: '', showMessage: 'false' },
@@ -53,8 +54,6 @@ const DEFAULT_BANNER_SETTING = {
 };
 
 export default {
-  layout: 'authenticated',
-
   components: {
     Checkbox,
     Loading,
@@ -65,20 +64,24 @@ export default {
   },
 
   async fetch() {
+    // We fetch all settings, so we can check for individual banner setting resources
+    // We will have already fetched all settings, so there is no performance impact doing this versus fetching individual settings
     const hash = await allHash({ uiBannerSetting: this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.BANNERS }) });
 
     Object.assign(this, hash);
+
+    this.uiBannerIndividual = getIndividualBanners(this.$store);
   },
 
   data() {
     return {
       vendor: getVendor(),
 
-      uiBannerSetting: null,
-      bannerVal:       {},
+      uiBannerSetting:    null,
+      uiBannerIndividual: {},
+      bannerVal:          {},
 
       errors: [],
-
     };
   },
 
@@ -90,12 +93,27 @@ export default {
     },
 
     headerMode() {
+      // If the individual setting is used, then always view mode
+      if (this.uiBannerIndividual.bannerHeader) {
+        return _VIEW;
+      }
+
       return this.bannerVal?.showHeader === 'true' ? _EDIT : _VIEW;
     },
     footerMode() {
+      // If the individual setting is used, then always view mode
+      if (this.uiBannerIndividual.bannerFooter) {
+        return _VIEW;
+      }
+
       return this.bannerVal?.showFooter === 'true' ? _EDIT : _VIEW;
     },
     consentMode() {
+      // If the individual setting is used, then always view mode
+      if (this.uiBannerIndividual.bannerConsent) {
+        return _VIEW;
+      }
+
       return this.bannerVal?.showConsent === 'true' ? _EDIT : _VIEW;
     }
   },
@@ -107,6 +125,8 @@ export default {
           const parsedBanner = JSON.parse(neu.value);
 
           this.bannerVal = this.checkOrUpdateLegacyUIBannerSetting(parsedBanner);
+
+          overlayIndividualBanners(this.bannerVal, this.uiBannerIndividual);
         } catch {}
       }
     }
@@ -187,12 +207,27 @@ export default {
 
       <template>
         <!-- Header Settings -->
-        <h2 class="mt-40 mb-40">
+        <h2 class="mt-40 mb-10 setting-title">
           {{ t('banner.headerBanner') }}
+          <i
+            v-if="!!uiBannerIndividual.bannerHeader"
+            class="icon icon-lock"
+          />
         </h2>
+        <div
+          v-if="!!uiBannerIndividual.bannerHeader"
+          class="row mb-10"
+        >
+          <Banner
+            color="warning"
+            class="mt-0"
+            :label="t('banner.individualSetting', {name: 'ui-banner-header'}, true)"
+          />
+        </div>
         <div class="row mb-20">
           <div class="col span-6">
             <Checkbox
+              :disabled="!!uiBannerIndividual.bannerHeader"
               :value="bannerVal.showHeader === 'true'"
               :label="t('banner.showHeader')"
               :mode="mode"
@@ -207,12 +242,27 @@ export default {
         />
 
         <!-- Footer settings -->
-        <h2 class="mt-40 mb-40">
+        <h2 class="mt-40 mb-10 setting-title">
           {{ t('banner.footerBanner') }}
+          <i
+            v-if="!!uiBannerIndividual.bannerFooter"
+            class="icon icon-lock"
+          />
         </h2>
-        <div class="row mt-40 mb-20">
+        <div
+          v-if="!!uiBannerIndividual.bannerFooter"
+          class="row mb-10"
+        >
+          <Banner
+            color="warning"
+            class="mt-0"
+            :label="t('banner.individualSetting', {name: 'ui-banner-footer'}, true)"
+          />
+        </div>
+        <div class="row mb-20">
           <div class="col span-6">
             <Checkbox
+              :disabled="!!uiBannerIndividual.bannerFooter"
               :value="bannerVal.showFooter === 'true'"
               :label="t('banner.showFooter')"
               :mode="mode"
@@ -228,13 +278,28 @@ export default {
       </template>
 
       <!-- Consent settings -->
-      <h2 class="mt-40 mb-40">
+      <h2 class="mt-40 mb-10 setting-title">
         {{ t('banner.loginScreenBanner') }}
+        <i
+          v-if="!!uiBannerIndividual.bannerConsent"
+          class="icon icon-lock"
+        />
       </h2>
+      <div
+        v-if="!!uiBannerIndividual.bannerConsent"
+        class="row mb-10"
+      >
+        <Banner
+          color="warning"
+          class="mt-0"
+          :label="t('banner.individualSetting', {name: 'ui-banner-login-consent'}, true)"
+        />
+      </div>
       <template>
-        <div class="row mt-40 mb-20">
+        <div class="row mb-20">
           <div class="col span-6">
             <Checkbox
+              :disabled="!!uiBannerIndividual.bannerConsent"
               :value="bannerVal.showConsent === 'true'"
               :label="t('banner.showConsent')"
               :mode="mode"
@@ -284,4 +349,15 @@ export default {
   background-color: var(--overlay-bg);
   z-index: 1;
 }
+
+// Ensure setting titles have the icon vertically aligned when present, with spacing between
+// the icon and the text
+h2.setting-title {
+  align-items: center;
+  display: flex;
+
+  > i {
+    padding-left: 5px;
+  }
+}
 </style>