@rancher/shell 0.5.3 → 2.0.0

package/pages/c/_cluster/auth/user.retention/index.vue

@@ -0,0 +1,384 @@
+<script lang="ts" setup>
+import { ref, reactive, watch, onMounted } from 'vue';
+import { useRouter, onBeforeRouteUpdate } from 'vue-router/composables';
+
+import UserRetentionHeader from '@shell/components/user.retention/user-retention-header.vue';
+import Footer from '@shell/components/form/Footer.vue';
+import { useStore } from '@shell/composables/useStore';
+import { useI18n } from '@shell/composables/useI18n';
+import { MANAGEMENT } from '@shell/config/types';
+import { SETTING } from '@shell/config/settings';
+import { isAdminUser } from '@shell/store/type-map';
+
+import Banner from '@components/Banner/Banner.vue';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+import LabeledInput from '@components/Form/LabeledInput/LabeledInput.vue';
+import { ToggleSwitch } from '@components/Form/ToggleSwitch';
+
+import { isValidCron } from 'cron-validator';
+import dayjs from 'dayjs';
+
+type Links = {
+  remove: string;
+  self: string;
+  update: string;
+  view: string;
+};
+
+type FieldsV1 = {
+  'f:customized': {};
+  'f:default': {};
+  'f:source': {};
+  'f:value': {};
+};
+
+type ManagedFields = {
+  apiVersion: string;
+  fieldsType: string;
+  fieldsV1: FieldsV1;
+  manager: string;
+  operation: string;
+  time: string;
+};
+
+type Metadata = {
+  creationTimestamp: string;
+  fields: string[];
+  generation: number;
+  managedFields: ManagedFields[];
+  name: string;
+  relationships: null;
+  resourceVersion: string;
+  state: {
+    error: boolean;
+    message: string;
+    name: string;
+    transitioning: boolean;
+  };
+  uid: string;
+};
+
+type Setting = {
+  id: string;
+  type: string;
+  links: Links;
+  apiVersion: string;
+  customized: boolean;
+  default: string;
+  kind: string;
+  metadata: Metadata;
+  source: string;
+  value: string | null;
+  save: () => void;
+};
+
+const store = useStore();
+const userRetentionSettings = reactive<{[id: string]: string | null }>({
+  [SETTING.DISABLE_INACTIVE_USER_AFTER]: null,
+  [SETTING.DELETE_INACTIVE_USER_AFTER]:  null,
+  [SETTING.USER_RETENTION_CRON]:         null,
+  [SETTING.USER_RETENTION_DRY_RUN]:      null,
+  [SETTING.USER_LAST_LOGIN_DEFAULT]:     null,
+});
+const disableAfterPeriod = ref(false);
+const deleteAfterPeriod = ref(false);
+const loading = ref(true);
+let settings: { [id: string]: Setting } = {};
+
+/**
+ * Watches the disable after period and removes the value if the checkbox is
+ * not selected. Lookup the value when the checkbox is selected.
+ */
+watch(disableAfterPeriod, (newVal) => {
+  if (!newVal) {
+    userRetentionSettings[SETTING.DISABLE_INACTIVE_USER_AFTER] = null;
+
+    return;
+  }
+
+  userRetentionSettings[SETTING.DISABLE_INACTIVE_USER_AFTER] = settings[SETTING.DISABLE_INACTIVE_USER_AFTER].value;
+});
+
+/**
+ * Watches the delete after period and removes the value if the checkbox is
+ * not selected. Lookup the value when the checkbox is selected.
+ */
+watch(deleteAfterPeriod, (newVal) => {
+  if (!newVal) {
+    userRetentionSettings[SETTING.DELETE_INACTIVE_USER_AFTER] = null;
+
+    return;
+  }
+
+  userRetentionSettings[SETTING.DELETE_INACTIVE_USER_AFTER] = settings[SETTING.DELETE_INACTIVE_USER_AFTER].value;
+});
+
+/**
+ * Watches both the disable and delete after periods. Clear all values in
+ * the form if both checkboxes are not selected. If one of the checkboxes
+ * are selected, lookup each of the values in the form.
+ */
+watch([disableAfterPeriod, deleteAfterPeriod], ([newDisableAfterPeriod, newDeleteAfterPeriod]) => {
+  if (!newDisableAfterPeriod && !newDeleteAfterPeriod) {
+    ids.forEach((key) => {
+      userRetentionSettings[key] = null;
+    });
+
+    validateUserRetentionCron();
+
+    return;
+  }
+
+  ids.filter((id) => ![SETTING.DISABLE_INACTIVE_USER_AFTER, SETTING.DELETE_INACTIVE_USER_AFTER].includes(id))
+    .forEach(assignSettings);
+
+  validateUserRetentionCron();
+});
+
+const assignSettings = (key: string) => {
+  if (settings[key].id === SETTING.USER_LAST_LOGIN_DEFAULT && settings[key].value && typeof settings[key].value === 'string') {
+    const value = settings[key].value as string;
+
+    userRetentionSettings[key] = dayjs(value).valueOf().toString();
+
+    return;
+  }
+
+  userRetentionSettings[key] = settings[key].value;
+};
+
+const fetchSetting = async(id: string) => {
+  return await store.dispatch('management/find', { type: MANAGEMENT.SETTING, id });
+};
+
+const ids = Object.keys(userRetentionSettings);
+const settingPromises = ids.map((id) => fetchSetting(id));
+
+onMounted(async() => {
+  settings = await Promise
+    .all(settingPromises)
+    .then((results) => results.reduce((acc, result) => {
+      return {
+        [result.id]: result,
+        ...acc,
+      };
+    }, { }));
+
+  ids.forEach(assignSettings);
+
+  disableAfterPeriod.value = !!userRetentionSettings[SETTING.DISABLE_INACTIVE_USER_AFTER];
+  deleteAfterPeriod.value = !!userRetentionSettings[SETTING.DELETE_INACTIVE_USER_AFTER];
+  loading.value = false;
+
+  validateUserRetentionCron();
+});
+
+const isFormValid = ref(false);
+const { t } = useI18n(store);
+const validateUserRetentionCron = () => {
+  const { [SETTING.USER_RETENTION_CRON]: cronSetting } = userRetentionSettings;
+
+  // Only require user retention cron when disable or delete after are active
+  if (!disableAfterPeriod.value && !deleteAfterPeriod.value) {
+    isFormValid.value = true;
+
+    return;
+  }
+
+  if (!cronSetting) {
+    isFormValid.value = false;
+
+    return;
+  }
+
+  if (typeof cronSetting === 'string' && !isValidCron(cronSetting)) {
+    isFormValid.value = false;
+
+    return t('user.retention.edit.form.cron.errorMessage');
+  }
+
+  isFormValid.value = true;
+};
+
+const error = ref<string | null>(null);
+const save = async(btnCB: (arg: boolean) => void) => {
+  try {
+    error.value = null;
+    ids.forEach((key) => {
+      settings[key].value = userRetentionSettings[key];
+
+      if (key === SETTING.USER_LAST_LOGIN_DEFAULT && userRetentionSettings[key]) {
+        settings[key].value = dayjs(Number(userRetentionSettings[key])).format();
+      }
+    });
+
+    await Promise.all(ids.map((setting) => settings[setting].save()));
+
+    btnCB(true);
+    store.dispatch(
+      'growl/success',
+      {
+        title:   t('user.retention.growl.title'),
+        message: t('user.retention.growl.message'),
+      },
+      { root: true }
+    );
+    routeBack();
+  } catch (err) {
+    error.value = (err as Error).message;
+    btnCB(false);
+  }
+};
+
+const router = useRouter();
+const routeBack = () => {
+  router.back();
+};
+
+onBeforeRouteUpdate((_to: unknown, _from: unknown) => {
+  if (!isAdminUser(store.getters)) {
+    router.replace({ name: 'home' });
+  }
+});
+</script>
+
+<template>
+  <div>
+    <user-retention-header />
+    <div
+      v-if="!loading"
+      class="form-user-retention"
+    >
+      <banner
+        v-if="error"
+        color="error"
+      >
+        {{ error }}
+      </banner>
+      <div class="input-fieldset">
+        <checkbox
+          v-model="disableAfterPeriod"
+          data-testid="disableAfterPeriod"
+          :label="t('user.retention.edit.form.disableAfter.checkbox')"
+        />
+        <labeled-input
+          v-model="userRetentionSettings[SETTING.DISABLE_INACTIVE_USER_AFTER]"
+          data-testid="disableAfterPeriodInput"
+          :tooltip="t('user.retention.edit.form.disableAfter.input.tooltip')"
+          class="input-field"
+          :label="t('user.retention.edit.form.disableAfter.input.label')"
+          :disabled="!disableAfterPeriod"
+        />
+      </div>
+      <div class="input-fieldset">
+        <checkbox
+          v-model="deleteAfterPeriod"
+          data-testid="deleteAfterPeriod"
+          :label="t('user.retention.edit.form.deleteAfter.checkbox')"
+        />
+        <labeled-input
+          v-model="userRetentionSettings[SETTING.DELETE_INACTIVE_USER_AFTER]"
+          data-testid="deleteAfterPeriodInput"
+          :tooltip="t('user.retention.edit.form.deleteAfter.input.tooltip')"
+          class="input-field"
+          :label="t('user.retention.edit.form.deleteAfter.input.label')"
+          :sub-label="t('user.retention.edit.form.deleteAfter.input.subLabel')"
+          :disabled="!deleteAfterPeriod"
+        />
+      </div>
+      <template
+        v-if="disableAfterPeriod || deleteAfterPeriod"
+      >
+        <div class="input-fieldset pt-12">
+          <labeled-input
+            v-model="userRetentionSettings[SETTING.USER_RETENTION_CRON]"
+            data-testid="userRetentionCron"
+            class="input-field"
+            required
+            type="cron"
+            :tooltip="t('user.retention.edit.form.cron.subLabel')"
+            :rules="[validateUserRetentionCron]"
+            :label="t('user.retention.edit.form.cron.label')"
+            @input="validateUserRetentionCron"
+          />
+        </div>
+        <div class="input-fieldset condensed pt-12">
+          <toggle-switch
+            v-model="userRetentionSettings[SETTING.USER_RETENTION_DRY_RUN]"
+            data-testid="userRetentionDryRun"
+            :onValue="'true'"
+            :offValue="'false'"
+            :on-label="t('user.retention.edit.form.dryRun.label')"
+          />
+          <span class="input-detail">{{ t('user.retention.edit.form.dryRun.subLabel') }}</span>
+        </div>
+        <div class="input-fieldset condensed">
+          <labeled-input
+            v-model="userRetentionSettings[SETTING.USER_LAST_LOGIN_DEFAULT]"
+            data-testid="userLastLoginDefault"
+            class="input-field"
+            :label="t('user.retention.edit.form.defaultLastLogin.label')"
+            :sub-label="t('user.retention.edit.form.defaultLastLogin.subLabel')"
+            :placeholder="t('user.retention.edit.form.defaultLastLogin.placeholder')"
+          />
+        </div>
+      </template>
+    </div>
+    <Footer
+      class="footer-user-retention"
+      mode="edit"
+      :disable-save="!isFormValid"
+      @save="save"
+      @done="routeBack"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .form-user-retention {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .footer-user-retention {
+    border-top: var(--header-border-size) solid var(--header-border);
+    right: 0;
+    position: sticky;
+    bottom: 0;
+    background-color: var(--header-bg);
+    margin-left: -20px;
+    margin-right: -20px;
+    margin-bottom: -20px;
+    margin-top: 20px;
+    padding: 10px 20px;
+
+    ::v-deep .spacer-small {
+      padding: 0;
+    }
+  }
+
+  .input-fieldset {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+
+    &.condensed {
+      gap: 0.25rem;
+    }
+
+    &.pt-12 {
+      padding-top: 3rem;
+    }
+  }
+
+  .input-field {
+    max-width: 24rem
+  }
+
+  .input-detail {
+    color: var(--input-label);
+    padding-left: 61px;
+  }
+</style>

package/pages/c/_cluster/explorer/ConfigBadge.vue

@@ -1,4 +1,5 @@
 <script>
+import { _EDIT } from '@shell/config/query-params';
 export default {
   props: {
     cluster: {
@@ -10,13 +11,13 @@ export default {
   name: 'ConfigBadge',
 
   computed: {
-    hasBadge() {
-      return !!this.cluster?.badge;
+    tooltip() {
+      return this.t('clusterBadge.customizeAppearance');
     }
   },
   methods: {
     customBadgeDialog() {
-      this.$store.dispatch('cluster/promptModal', { component: 'AddCustomBadgeDialog' });
+      this.$store.dispatch('cluster/promptModal', { component: 'AddCustomBadgeDialog', componentProps: { mode: _EDIT } });
     },
   },
 };
@@ -26,13 +27,14 @@ export default {
   <div class="config-badge">
     <div>
       <a
-        class="badge-install"
+        class="badge-install btn btn-sm role-secondary"
         data-testid="add-custom-cluster-badge"
         @click="customBadgeDialog"
       >
-        <i class="icon icon-cluster" />
-        <span v-if="hasBadge">{{ t('clusterBadge.editLabel') }}</span>
-        <span v-else>{{ t('clusterBadge.addLabel') }}</span>
+        <i
+          v-clean-tooltip="tooltip"
+          class="icon icon-brush-icon"
+        />
       </a>
     </div>
   </div>
@@ -46,9 +48,12 @@ export default {
     display: flex;
     margin-left: 10px;
 
+    &:hover {
+      border-color: var(--lightest);
+    }
+
     > I {
       line-height: inherit;
-      margin-right: 4px;
     }
 
     &:focus {

package/pages/c/_cluster/explorer/EventsTable.vue

@@ -40,6 +40,24 @@ export default {
       events: [],
       eventHeaders,
     };
+  },
+
+  mounted() {
+    this.dismissRouteHandler = this.$router.beforeEach(this.onRouteChange);
+  },
+
+  methods: {
+    async onRouteChange(to, from, next) {
+      if (this.$route.name !== to.name) {
+        await this.$store.dispatch('cluster/forgetType', EVENT);
+      }
+
+      next();
+    }
+  },
+
+  beforeDestroy() {
+    this.dismissRouteHandler();
   }
 };
 </script>

package/pages/c/_cluster/explorer/__tests__/index.test.ts

@@ -0,0 +1,181 @@
+import { clone } from '@shell/utils/object';
+import Dashboard from '@shell/pages/c/_cluster/explorer/index.vue';
+import { shallowMount } from '@vue/test-utils';
+import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
+import { NODE_ARCHITECTURE } from '@shell/config/labels-annotations';
+
+describe('page: cluster dashboard', () => {
+  const mountOptions = {
+    computed: {
+      monitoringStatus: () => ({ v2: true }),
+      nodes:            () => []
+    },
+    stubs: {
+      'router-link': true,
+      LiveDate:      true
+    },
+    mocks: {
+      $store: {
+        dispatch: jest.fn(),
+        getters:  {
+          currentCluster: {
+            id:                         'cluster',
+            metadata:                   { creationTimestamp: Date.now() },
+            status:                     { provider: 'foo' },
+            kubernetesVersionBase:      '0.0.0',
+            kubernetesVersionExtension: 'k3s'
+          },
+          'cluster/inError':   () => false,
+          'cluster/schemaFor': jest.fn(),
+          'cluster/canList':   jest.fn(),
+          'cluster/all':       jest.fn(),
+          'i18n/exists':       jest.fn(),
+          'i18n/t':            (label: string) => label === 'generic.provisioning' ? '—' : jest.fn()(),
+        }
+      }
+    },
+  };
+
+  describe.each([
+    'etcd',
+    'scheduler',
+    'controller-manager',
+  ])('%p component health box', (componentId) => {
+    it.each([
+      [STATES_ENUM.HEALTHY, 'icon-checkmark', '', []],
+      [STATES_ENUM.HEALTHY, 'icon-checkmark', `foo`, []],
+      [STATES_ENUM.HEALTHY, 'icon-checkmark', `${ componentId }foo`, [{ status: 'True' }]],
+      [STATES_ENUM.UNHEALTHY, 'icon-warning', `${ componentId }foo`, [{ status: 'False' }]],
+    ])('should show %p status', (status, iconClass, name, conditions) => {
+      const options = clone(mountOptions);
+
+      options.mocks.$store.getters.currentCluster.status = {
+        provider:          'provider',
+        componentStatuses: [{
+          name,
+          conditions
+        }],
+      };
+
+      const wrapper = shallowMount(Dashboard, options);
+
+      const box = wrapper.find(`[data-testid="k8s-service-${ componentId }"]`);
+      const icon = box.find('i');
+
+      expect(box.element).toBeDefined();
+      expect(box.element.classList).toContain(status);
+      expect(icon.element.classList).toContain(iconClass);
+    });
+  });
+
+  describe.each([
+    ['local', 'fleet', true, ['fleetDeployment', 'fleetStatefulSet'], [
+      [STATES_ENUM.IN_PROGRESS, 'icon-spinner', false, false, false, '', 0, 0],
+      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, false, false, [{ status: 'False' }], 0, 0],
+      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, false, true, [{ status: 'True' }], 0, 0],
+      [STATES_ENUM.WARNING, 'icon-warning', true, true, false, [{ status: 'True' }], 0, 0],
+      [STATES_ENUM.WARNING, 'icon-warning', true, false, false, [{ status: 'True' }], 0, 0],
+      [STATES_ENUM.WARNING, 'icon-warning', true, false, false, [{ status: 'True' }], 0, 1],
+      [STATES_ENUM.HEALTHY, 'icon-checkmark', true, false, false, [{ status: 'True' }], 1, 0],
+    ]],
+    ['downstream RKE2', 'fleet', false, ['fleetStatefulSet'], [
+      [STATES_ENUM.IN_PROGRESS, 'icon-spinner', false, false, false, '', 0, 0],
+      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, false, false, [{ status: 'False' }], 0, 0],
+      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, false, true, [{ status: 'True' }], 0, 0],
+      [STATES_ENUM.WARNING, 'icon-warning', true, true, false, [{ status: 'True' }], 0, 0],
+      [STATES_ENUM.WARNING, 'icon-warning', true, false, false, [{ status: 'True' }], 0, 0],
+      [STATES_ENUM.WARNING, 'icon-warning', true, false, false, [{ status: 'True' }], 0, 1],
+      [STATES_ENUM.HEALTHY, 'icon-checkmark', true, false, false, [{ status: 'True' }], 1, 0],
+    ]],
+    ['downstream RKE2', 'cattle', false, ['cattleDeployment'], [
+      [STATES_ENUM.IN_PROGRESS, 'icon-spinner', false, false, false, '', 0, 0],
+      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, false, false, [{ status: 'False' }], 0, 0],
+      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, true, false, [{ status: 'True' }], 0, 0],
+      [STATES_ENUM.UNHEALTHY, 'icon-warning', true, false, true, [{ status: 'True' }], 0, 0],
+      [STATES_ENUM.WARNING, 'icon-warning', true, false, false, [{ status: 'True' }], 0, 0],
+      [STATES_ENUM.WARNING, 'icon-warning', true, false, false, [{ status: 'True' }], 0, 1],
+      [STATES_ENUM.HEALTHY, 'icon-checkmark', true, false, false, [{ status: 'True' }], 1, 0],
+    ]]
+  ])('%p cluster - %p agent health box', (_, agentId, isLocal, agentResources, statuses) => {
+    it.each(statuses)('should show %p status', (status, iconClass, isLoaded, disconnected, error, conditions, readyReplicas, unavailableReplicas) => {
+      const options = clone(mountOptions);
+
+      options.mocks.$store.getters.currentCluster.isLocal = isLocal;
+
+      const resources = agentResources.reduce((acc, r) => {
+        const agent = {
+          metadata: { state: { error } },
+          spec:     { replicas: 1 },
+          status:   {
+            readyReplicas,
+            unavailableReplicas,
+            conditions
+          }
+        };
+
+        return isLoaded ? {
+          ...acc,
+          [r]: agent
+        } : 'loading';
+      }, {});
+
+      const wrapper = shallowMount(Dashboard, {
+        ...options,
+        data: () => ({
+          ...resources,
+          disconnected,
+          canViewAgents: true
+        })
+      });
+
+      const box = wrapper.find(`[data-testid="k8s-service-${ agentId }"]`);
+      const icon = box.find('i');
+
+      expect(box.element).toBeDefined();
+      expect(box.element.classList).toContain(status);
+      expect(icon.element.classList).toContain(iconClass);
+    });
+  });
+
+  it('local cluster - cattle agent health box - should be hidden', () => {
+    const options = clone(mountOptions);
+
+    options.mocks.$store.getters.currentCluster.isLocal = true;
+
+    const wrapper = shallowMount(Dashboard, {
+      ...options,
+      data: () => ({
+        cattleDeployment: 'loading',
+        disconnected:     false,
+        canViewAgents:    true
+      })
+    });
+
+    const box = wrapper.find(`[data-testid="k8s-service-cattle"]`);
+
+    expect(box.element).toBeUndefined();
+  });
+
+  describe('cluster details', () => {
+    it.each([
+      ['clusterProvider', 'other', []],
+      ['kubernetesVersion', '0.0.0 k3s', []],
+      ['created', 'glance.created', []],
+      ['architecture', 'mixed', [{ labels: { [NODE_ARCHITECTURE]: 'amd64' } }, { labels: { [NODE_ARCHITECTURE]: 'intel' } }]],
+      ['architecture', 'mixed', [{ labels: { [NODE_ARCHITECTURE]: 'amd64' } }, { labels: { } }]],
+      ['architecture', 'Amd64', [{ labels: { [NODE_ARCHITECTURE]: 'amd64' } }]],
+      ['architecture', 'unknown', [{ labels: { } }]],
+      ['architecture', '—', [{ metadata: { state: { transitioning: true } } }]],
+    ])('should show %p label %p', (label, text, nodes) => {
+      const options = clone(mountOptions);
+
+      options.computed.nodes = () => nodes;
+
+      const wrapper = shallowMount(Dashboard, options);
+
+      const element = wrapper.find(`[data-testid="${ label }__label"]`).element;
+
+      expect(element.textContent).toContain(text);
+    });
+  });
+});