@rancher/shell 3.0.12-rc.1 → 3.0.12-rc.2

package/pages/c/_cluster/apps/charts/install.vue

@@ -30,7 +30,7 @@ import {
   AUTH_TYPE, NAMESPACE as NAMESPACE_TYPE
 } from '@shell/config/types';
 import {
-  CHART, FROM_CLUSTER, FROM_TOOLS, HIDE_SIDE_NAV, NAMESPACE, REPO, REPO_TYPE, VERSION, _FLAGGED
+  CHART, FROM_CLUSTER, FROM_TOOLS, HIDE_SIDE_NAV, NEW_APP_INSTANCE, NAMESPACE, REPO, REPO_TYPE, VERSION, _FLAGGED
 } from '@shell/config/query-params';
 import { CATALOG as CATALOG_ANNOTATIONS, PROJECT } from '@shell/config/labels-annotations';
 
@@ -602,8 +602,11 @@ export default {
     },
 
     showSelectVersionOrChart() {
-      // Allow the user to choose a version if the app exists OR they've come from tools
-      return this.existing || (FROM_TOOLS in this.$route.query);
+      // Allow the user to choose a version if:
+      // - the app exists (editing/upgrading)
+      // - OR they've come from tools
+      // - OR they're installing a new instance of an already-installed chart
+      return this.existing || (FROM_TOOLS in this.$route.query) || (NEW_APP_INSTANCE in this.$route.query);
     },
 
     showNameEditor() {
@@ -1110,6 +1113,8 @@ export default {
         this.$router.replace(this.clusterToolsLocation());
       } else if (this.$route.query[FROM_CLUSTER] === _FLAGGED) {
         this.$router.replace(this.clustersLocation());
+      } else if (!this.chart) {
+        this.$router.replace(this.appLocation());
       } else {
         this.$router.replace(this.chartLocation(false));
       }

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

@@ -1,6 +1,9 @@
 <script lang="ts" setup>
-import { ref, reactive, watch, onMounted } from 'vue';
+import {
+  ref, reactive, watch, onMounted, computed
+} from 'vue';
 import { useRouter, onBeforeRouteUpdate } from 'vue-router';
+import { useForm } from 'vee-validate';
 
 import UserRetentionHeader from '@shell/components/user.retention/user-retention-header.vue';
 import Footer from '@shell/components/form/Footer.vue';
@@ -20,8 +23,15 @@ import { ToggleSwitch } from '@components/Form/ToggleSwitch';
 
 import dayjs from 'dayjs';
 
+type UserRetentionSettingId =
+  | typeof SETTING.DISABLE_INACTIVE_USER_AFTER
+  | typeof SETTING.DELETE_INACTIVE_USER_AFTER
+  | typeof SETTING.USER_RETENTION_CRON
+  | typeof SETTING.USER_RETENTION_DRY_RUN
+  | typeof SETTING.USER_LAST_LOGIN_DEFAULT;
+
 const store = useStore();
-const userRetentionSettings = reactive<{[id: string]: string | null }>({
+const userRetentionSettings = reactive<Record<UserRetentionSettingId, string | null>>({
   [SETTING.DISABLE_INACTIVE_USER_AFTER]: null,
   [SETTING.DELETE_INACTIVE_USER_AFTER]:  null,
   [SETTING.USER_RETENTION_CRON]:         null,
@@ -38,18 +48,28 @@ const {
   validateDeleteInactiveUserAfterDuration,
   validateDeleteInactiveUserAfter,
   validateDurationAgainstAuthUserSession,
-  setValidation,
-  removeValidation,
-  addValidation,
-  isFormValid,
 } = useUserRetentionValidation(disableAfterPeriod, deleteAfterPeriod, authUserSessionTtlMinutes);
+
+const { errors, validate: validateForm, validateField } = useForm({
+  validationSchema: {
+    [SETTING.DISABLE_INACTIVE_USER_AFTER]: (value: string) => validateDisableInactiveUserAfterDuration(value) ??
+      validateDurationAgainstAuthUserSession(value) ??
+      true,
+    [SETTING.DELETE_INACTIVE_USER_AFTER]: (value: string) => validateDeleteInactiveUserAfterDuration(value) ??
+      validateDurationAgainstAuthUserSession(value) ??
+      validateDeleteInactiveUserAfter(value) ??
+      true,
+    [SETTING.USER_RETENTION_CRON]: (value: string) => validateUserRetentionCron(value) ?? 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) => {
+watch(disableAfterPeriod, async(newVal) => {
   if (!newVal) {
     userRetentionSettings[SETTING.DISABLE_INACTIVE_USER_AFTER] = null;
 
@@ -57,13 +77,14 @@ watch(disableAfterPeriod, (newVal) => {
   }
 
   userRetentionSettings[SETTING.DISABLE_INACTIVE_USER_AFTER] = settings[SETTING.DISABLE_INACTIVE_USER_AFTER].value;
+  await validateField(SETTING.DISABLE_INACTIVE_USER_AFTER);
 });
 
 /**
  * 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) => {
+watch(deleteAfterPeriod, async(newVal) => {
   if (!newVal) {
     userRetentionSettings[SETTING.DELETE_INACTIVE_USER_AFTER] = null;
 
@@ -71,6 +92,8 @@ watch(deleteAfterPeriod, (newVal) => {
   }
 
   userRetentionSettings[SETTING.DELETE_INACTIVE_USER_AFTER] = settings[SETTING.DELETE_INACTIVE_USER_AFTER].value;
+  await validateField(SETTING.DELETE_INACTIVE_USER_AFTER);
+  await validateField(SETTING.USER_RETENTION_CRON);
 });
 
 /**
@@ -84,18 +107,19 @@ watch([disableAfterPeriod, deleteAfterPeriod], ([newDisableAfterPeriod, newDelet
       userRetentionSettings[key] = null;
     });
 
-    removeValidation(SETTING.USER_RETENTION_CRON);
-
     return;
   }
 
-  ids.filter((id) => ![SETTING.DISABLE_INACTIVE_USER_AFTER, SETTING.DELETE_INACTIVE_USER_AFTER].includes(id))
-    .forEach(assignSettings);
+  const skippedIds: readonly UserRetentionSettingId[] = [
+    SETTING.DISABLE_INACTIVE_USER_AFTER,
+    SETTING.DELETE_INACTIVE_USER_AFTER,
+  ];
 
-  addValidation(SETTING.USER_RETENTION_CRON);
+  ids.filter((id) => !skippedIds.includes(id))
+    .forEach(assignSettings);
 });
 
-const assignSettings = (key: string) => {
+const assignSettings = (key: UserRetentionSettingId) => {
   if (settings[key].id === SETTING.USER_LAST_LOGIN_DEFAULT && settings[key].value && typeof settings[key].value === 'string') {
     const value = settings[key].value as string;
 
@@ -111,7 +135,7 @@ const fetchSetting = async(id: string) => {
   return await store.dispatch('management/find', { type: MANAGEMENT.SETTING, id });
 };
 
-const ids = Object.keys(userRetentionSettings);
+const ids = Object.keys(userRetentionSettings) as UserRetentionSettingId[];
 const settingPromises = ids.map((id) => fetchSetting(id));
 
 onMounted(async() => {
@@ -136,6 +160,14 @@ onMounted(async() => {
 const { t } = useI18n(store);
 const error = ref<string | null>(null);
 const save = async(btnCB: (arg: boolean) => void) => {
+  const { valid } = await validateForm();
+
+  if (!valid) {
+    btnCB(false);
+
+    return;
+  }
+
   try {
     error.value = null;
     ids.forEach((key) => {
@@ -164,6 +196,10 @@ const save = async(btnCB: (arg: boolean) => void) => {
   }
 };
 
+const isFormInvalid = computed(() => {
+  return Object.keys(errors.value).length > 0;
+});
+
 const router = useRouter();
 const routeBack = () => {
   router.back();
@@ -199,12 +235,11 @@ onBeforeRouteUpdate((_to: unknown, _from: unknown) => {
           <labeled-input
             v-model:value="userRetentionSettings[SETTING.DISABLE_INACTIVE_USER_AFTER]"
             data-testid="disableAfterPeriodInput"
+            :name="SETTING.DISABLE_INACTIVE_USER_AFTER"
             :tooltip="t('user.retention.edit.form.disableAfter.input.tooltip')"
             class="input-field"
             :label="t('user.retention.edit.form.disableAfter.input.label')"
             :disabled="!disableAfterPeriod"
-            :rules="[validateDisableInactiveUserAfterDuration, validateDurationAgainstAuthUserSession]"
-            @update:validation="e => setValidation(SETTING.DISABLE_INACTIVE_USER_AFTER, e)"
           />
         </div>
         <div class="input-fieldset">
@@ -216,13 +251,12 @@ onBeforeRouteUpdate((_to: unknown, _from: unknown) => {
           <labeled-input
             v-model:value="userRetentionSettings[SETTING.DELETE_INACTIVE_USER_AFTER]"
             data-testid="deleteAfterPeriodInput"
+            :name="SETTING.DELETE_INACTIVE_USER_AFTER"
             :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"
-            :rules="[validateDeleteInactiveUserAfterDuration, validateDurationAgainstAuthUserSession, validateDeleteInactiveUserAfter]"
-            @update:validation="e => setValidation(SETTING.DELETE_INACTIVE_USER_AFTER, e)"
           />
         </div>
         <template
@@ -232,14 +266,13 @@ onBeforeRouteUpdate((_to: unknown, _from: unknown) => {
             <labeled-input
               v-model:value="userRetentionSettings[SETTING.USER_RETENTION_CRON]"
               data-testid="userRetentionCron"
+              :name="SETTING.USER_RETENTION_CRON"
               class="input-field"
               required
               type="cron"
               :tooltip="t('user.retention.edit.form.cron.subLabel')"
-              :rules="[validateUserRetentionCron]"
               :label="t('user.retention.edit.form.cron.label')"
               :require-dirty="false"
-              @update:validation="e => setValidation(SETTING.USER_RETENTION_CRON, e)"
             />
           </div>
           <div class="input-fieldset condensed pt-12">
@@ -268,7 +301,7 @@ onBeforeRouteUpdate((_to: unknown, _from: unknown) => {
     <Footer
       class="footer-user-retention"
       mode="edit"
-      :disable-save="!isFormValid"
+      :disable-save="isFormInvalid"
       @save="save"
       @done="routeBack"
     />

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

@@ -1,6 +1,5 @@
 <script>
 import { NORMAN } from '@shell/config/types';
-import { isAdminUser } from '@shell/store/type-map';
 import ResourceTable from '@shell/components/ResourceTable';
 import AsyncButton from '@shell/components/AsyncButton';
 import Loading from '@shell/components/Loading';
@@ -20,18 +19,19 @@ export default {
   data() {
     return {
       allDrivers:                       null,
-      canRefreshK8sMetadata:            true,
       resource:                         NORMAN.KONTAINER_DRIVER,
       schema:                           this.$store.getters['rancher/schemaFor'](NORMAN.KONTAINER_DRIVER),
       useQueryParamsForSimpleFiltering: false,
       forceUpdateLiveAndDelayed:        10,
-      showDeprecationBanner:            isAdminUser(this.$store.getters),
     };
   },
   computed: {
     rows() {
       return this.allDrivers || [];
     },
+    hasEmberUiDrivers() {
+      return this.rows.some((driver) => driver.active && driver.isEmber);
+    },
   },
   methods: {
     async refreshK8sMetadata(buttonDone) {
@@ -63,7 +63,6 @@ export default {
     >
       <template #extraActions>
         <AsyncButton
-          v-if="canRefreshK8sMetadata"
           mode="refresh"
           :action-label="t('drivers.actions.refresh')"
           :waiting-label="t('drivers.actions.refresh')"
@@ -75,10 +74,9 @@ export default {
       </template>
     </Masthead>
     <Banner
-      v-if="showDeprecationBanner"
+      v-if="hasEmberUiDrivers"
       color="warning"
-      label-key="drivers.kontainer.emberDeprecationMessage"
-      data-testid="kontainer-driver-ember-deprecation-banner"
+      label-key="drivers.kontainer.emberRemovalMessage"
     />
     <ResourceTable
       :schema="schema"

package/pages/c/_cluster/uiplugins/PluginInfoPanel.vue

@@ -7,7 +7,9 @@ import genericPluginSvg from '~shell/assets/images/generic-plugin.svg';
 import { SETTING } from '@shell/config/settings';
 import { useWatcherBasedSetupFocusTrapWithDestroyIncluded } from '@shell/composables/focusTrap';
 import { getPluginChartVersionLabel, getPluginChartVersion } from '@shell/utils/uiplugins';
-import { isChartVersionHigher } from '@shell/config/uiplugins';
+import { isChartVersionHigher, uiPluginHasAnnotation } from '@shell/config/uiplugins';
+import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
+import Banner from '@components/Banner/Banner.vue';
 import RcButton from '@components/RcButton/RcButton.vue';
 import AppChartCardFooter from '@shell/pages/c/_cluster/apps/charts/AppChartCardFooter.vue';
 
@@ -25,6 +27,7 @@ export default {
     }
   },
   components: {
+    Banner,
     ChartReadme,
     LazyImage,
     RcButton,
@@ -48,6 +51,24 @@ export default {
   computed: {
     ...mapGetters({ theme: 'prefs/theme' }),
 
+    errorMessage() {
+      return this.info?.installedError || (this.info?.helmError ? this.t('plugins.helmError') : null);
+    },
+
+    warningMessages() {
+      const warnings = [];
+
+      if (uiPluginHasAnnotation(this.info?.chart, CATALOG_ANNOTATIONS.DEPRECATED, 'true')) {
+        warnings.push(this.t('plugins.deprecatedExtension'));
+      }
+
+      if (this.info?.incompatibilityMessage) {
+        warnings.push(this.info.incompatibilityMessage);
+      }
+
+      return warnings;
+    },
+
     applyDarkModeBg() {
       if (this.theme === 'dark') {
         return { 'dark-mode': true };
@@ -307,6 +328,20 @@ export default {
             :items="info.tags"
             class="plugin-tags-container"
           />
+          <Banner
+            v-for="(msg, i) in warningMessages"
+            :key="i"
+            color="warning"
+          >
+            {{ msg }}
+          </Banner>
+
+          <Banner
+            v-if="errorMessage"
+            color="error"
+          >
+            {{ errorMessage }}
+          </Banner>
 
           <div class="plugin-versions-container">
             <h3>
@@ -452,8 +487,10 @@ export default {
         flex-direction: column;
         overflow: hidden;
 
-        .banner.warning {
+        .banner.warning,
+        .banner.error {
           margin-top: 0;
+          margin-bottom: 32px;
         }
 
         .plugin-info-detail {

package/pages/c/_cluster/uiplugins/__tests__/PluginInfoPanel.test.ts

@@ -1,5 +1,6 @@
 import { shallowMount, VueWrapper } from '@vue/test-utils';
 import PluginInfoPanel from '@shell/pages/c/_cluster/uiplugins/PluginInfoPanel.vue';
+import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
 
 jest.mock('@shell/config/uiplugins', () => ({
   ...jest.requireActual('@shell/config/uiplugins'),
@@ -99,4 +100,64 @@ describe('component: PluginInfoPanel', () => {
       expect(label).toBe('1.0.0 (plugins.labels.current)');
     });
   });
+
+  describe('errorMessage', () => {
+    beforeEach(() => {
+      wrapper = mountComponent();
+    });
+
+    it('should return installedError if present', () => {
+      wrapper.vm.info = { installedError: 'install error' };
+
+      expect(wrapper.vm.errorMessage).toBe('install error');
+    });
+
+    it('should return translated helmError if present', () => {
+      wrapper.vm.info = { helmError: true };
+
+      expect(wrapper.vm.errorMessage).toBe('plugins.helmError');
+    });
+
+    it('should return null if no error', () => {
+      wrapper.vm.info = {};
+
+      expect(wrapper.vm.errorMessage).toBeNull();
+    });
+  });
+
+  describe('warningMessages', () => {
+    beforeEach(() => {
+      wrapper = mountComponent();
+    });
+
+    it('should include deprecated message if the extension chart has the deprecated annotation', () => {
+      wrapper.vm.info = { chart: { versions: [{ annotations: { [CATALOG_ANNOTATIONS.DEPRECATED]: 'true' } }] } };
+
+      expect(wrapper.vm.warningMessages).toContain('plugins.deprecatedExtension');
+    });
+
+    it('should include incompatibilityMessage if present', () => {
+      wrapper.vm.info = { incompatibilityMessage: 'incompatibility error' };
+
+      expect(wrapper.vm.warningMessages).toContain('incompatibility error');
+    });
+
+    it('should include both deprecated and incompatibility messages if both are present', () => {
+      wrapper.vm.info = {
+        chart:                  { versions: [{ annotations: { [CATALOG_ANNOTATIONS.DEPRECATED]: 'true' } }] },
+        incompatibilityMessage: 'incompatibility error'
+      };
+
+      expect(wrapper.vm.warningMessages).toStrictEqual([
+        'plugins.deprecatedExtension',
+        'incompatibility error'
+      ]);
+    });
+
+    it('should return an empty array if neither is present', () => {
+      wrapper.vm.info = { chart: { versions: [{ annotations: { [CATALOG_ANNOTATIONS.CERTIFIED]: 'rancher' } }] } };
+
+      expect(wrapper.vm.warningMessages).toStrictEqual([]);
+    });
+  });
 });

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

@@ -1,6 +1,7 @@
 import { shallowMount, VueWrapper } from '@vue/test-utils';
 import UiPluginsPage from '@shell/pages/c/_cluster/uiplugins/index.vue';
 import { UI_PLUGIN_NAMESPACE } from '@shell/config/uiplugins';
+import { CATALOG as CATALOG_ANNOTATIONS } from '@shell/config/labels-annotations';
 
 const t = (key: string, args: Object) => {
   if (args) {
@@ -292,10 +293,11 @@ describe('page: UI plugins/Extensions', () => {
     });
 
     it('should return "deprecated" status for deprecated plugins', () => {
-      const plugin = { chart: { deprecated: true } };
+      const plugin = { chart: { versions: [{ annotations: { [CATALOG_ANNOTATIONS.DEPRECATED]: 'true' } }] } };
       const statuses = wrapper.vm.getStatuses(plugin);
 
-      expect(statuses[0].tooltip.key).toBe('generic.deprecated');
+      expect(statuses[0].tooltip.text).toBe('generic.deprecated');
+      expect(statuses[0].color).toBe('error');
     });
 
     it('should return error status for installedError', () => {
@@ -303,15 +305,17 @@ describe('page: UI plugins/Extensions', () => {
       const statuses = wrapper.vm.getStatuses(plugin);
 
       expect(statuses[0].icon).toBe('icon-alert-alt');
-      expect(statuses[0].tooltip.text).toBe('generic.error: An error occurred');
+      expect(statuses[0].color).toBe('error');
+      expect(statuses[0].tooltip.text).toBe('An error occurred');
     });
 
-    it('should return error status for incompatibilityMessage', () => {
+    it('should return warning status for incompatibilityMessage', () => {
       const plugin = { incompatibilityMessage: 'Incompatible version' };
       const statuses = wrapper.vm.getStatuses(plugin);
 
       expect(statuses[0].icon).toBe('icon-alert-alt');
-      expect(statuses[0].tooltip.text).toBe('generic.error: Incompatible version');
+      expect(statuses[0].color).toBe('error');
+      expect(statuses[0].tooltip.text).toBe('Incompatible version');
     });
 
     it('should return error status for helmError', () => {
@@ -319,15 +323,16 @@ describe('page: UI plugins/Extensions', () => {
       const statuses = wrapper.vm.getStatuses(plugin);
 
       expect(statuses[0].icon).toBe('icon-alert-alt');
-      expect(statuses[0].tooltip.text).toBe('generic.error: plugins.helmError');
+      expect(statuses[0].color).toBe('error');
+      expect(statuses[0].tooltip.text).toBe('plugins.helmError');
     });
 
-    it('should combine deprecated and other errors in tooltip', () => {
-      const plugin = { chart: { deprecated: true }, helmError: true };
+    it('should combine deprecated and error messages in a single tooltip', () => {
+      const plugin = { chart: { versions: [{ annotations: { [CATALOG_ANNOTATIONS.DEPRECATED]: 'true' } }] }, helmError: true };
       const statuses = wrapper.vm.getStatuses(plugin);
-      const warningStatus = statuses.find((status: any) => status.icon === 'icon-alert-alt');
+      const errorStatus = statuses.find((status: any) => status.color === 'error');
 
-      expect(warningStatus.tooltip.text).toBe('generic.deprecated. generic.error: plugins.helmError');
+      expect(errorStatus.tooltip.text).toBe('generic.deprecated<br/>plugins.helmError');
     });
   });
 

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

@@ -5,7 +5,8 @@ import { mapPref, PLUGIN_DEVELOPER } from '@shell/store/prefs';
 import { sortBy } from '@shell/utils/sort';
 import genericPluginSvg from '~shell/assets/images/generic-plugin.svg';
 import { allHash } from '@shell/utils/promise';
-import { CATALOG, UI_PLUGIN, MANAGEMENT, ZERO_TIME } from '@shell/config/types';
+import { CATALOG, UI_PLUGIN, MANAGEMENT } from '@shell/config/types';
+import { isMissingDate } from '@shell/utils/time';
 import { SETTING } from '@shell/config/settings';
 import { fetchOrCreateSetting } from '@shell/utils/settings';
 import { getVersionData, isRancherPrime } from '@shell/config/version';
@@ -896,18 +897,12 @@ export default {
         label:       plugin.displayVersionLabel,
       }];
 
-      if (plugin.created) {
-        const hasZeroTime = plugin.created === ZERO_TIME;
-        const lastUpdatedItem = {
+      if (!isMissingDate(plugin.created)) {
+        items.push({
           icon:        'icon-refresh-alt',
           iconTooltip: { key: 'tableHeaders.lastUpdated' },
-          label:       hasZeroTime ? this.t('generic.na') : day(plugin.created).format('MMM D, YYYY')
-        };
-
-        if (hasZeroTime) {
-          lastUpdatedItem.labelTooltip = this.t('catalog.charts.appChartCard.subHeaderItem.missingVersionDate');
-        }
-        items.push(lastUpdatedItem);
+          label:       day(plugin.created).format('MMM D, YYYY')
+        });
       }
 
       if (plugin.installing) {
@@ -989,24 +984,27 @@ export default {
     getStatuses(plugin) {
       const statuses = [];
 
-      const errorTooltip = plugin.installedError || plugin.incompatibilityMessage || (plugin.helmError ? this.t('plugins.helmError') : null);
-      const isDeprecated = plugin?.chart?.deprecated;
+      const errorMsg = plugin.installedError || (plugin.helmError ? this.t('plugins.helmError') : null);
+      const incompatibilityMsg = plugin.incompatibilityMessage;
+      const isDeprecated = uiPluginHasAnnotation(plugin?.chart, CATALOG_ANNOTATIONS.DEPRECATED, 'true');
 
-      if (isDeprecated || errorTooltip) {
-        let tooltip;
+      const tooltipMsgs = [];
 
-        if (isDeprecated && errorTooltip) {
-          tooltip = { text: `${ this.t('generic.deprecated') }. ${ this.t('generic.error') }: ${ errorTooltip }` };
-        } else if (isDeprecated) {
-          tooltip = { key: 'generic.deprecated' };
-        } else { // errorTooltip is present
-          tooltip = { text: `${ this.t('generic.error') }: ${ errorTooltip }` };
-        }
+      if (isDeprecated) {
+        tooltipMsgs.push(this.t('generic.deprecated'));
+      }
+
+      if (errorMsg) {
+        tooltipMsgs.push(errorMsg);
+      } else if (incompatibilityMsg) {
+        tooltipMsgs.push(incompatibilityMsg);
+      }
 
+      if (tooltipMsgs.length) {
         statuses.push({
-          icon:  'icon-alert-alt',
-          color: 'error',
-          tooltip
+          icon:    'icon-alert-alt',
+          color:   'error',
+          tooltip: { text: tooltipMsgs.join('<br/>') }
         });
       }