@rancher/shell 0.2.3 → 0.2.4

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

@@ -81,9 +81,19 @@ export default {
 </script>
 <template>
   <div class="plugin-info-panel">
-    <div v-if="showSlideIn" class="glass" @click="hide()" />
-    <div class="slideIn" :class="{'hide': false, 'slideIn__show': showSlideIn}">
-      <div v-if="info" class="plugin-info-content">
+    <div
+      v-if="showSlideIn"
+      class="glass"
+      @click="hide()"
+    />
+    <div
+      class="slideIn"
+      :class="{'hide': false, 'slideIn__show': showSlideIn}"
+    >
+      <div
+        v-if="info"
+        class="plugin-info-content"
+      >
         <div class="plugin-header">
           <div class="plugin-icon">
             <LazyImage
@@ -97,7 +107,7 @@ export default {
               v-else
               :src="defaultIcon"
               class="icon plugin-icon-img"
-            />
+            >
           </div>
           <div class="plugin-title">
             <h2 class="slideIn__header">
@@ -109,18 +119,41 @@ export default {
           </div>
           <div class="plugin-close">
             <div class="slideIn__header__buttons">
-              <div class="slideIn__header__button" @click="showSlideIn = false">
+              <div
+                class="slideIn__header__button"
+                @click="showSlideIn = false"
+              >
                 <i class="icon icon-close" />
               </div>
             </div>
           </div>
         </div>
         <div>
-          <Banner v-if="info.error" color="error" :label="info.error" class="mt-10" />
-          <Banner v-if="info.builtin" color="warning" :label="t('plugins.descriptions.built-in')" class="mt-10" />
+          <Banner
+            v-if="info.error"
+            color="error"
+            :label="info.error"
+            class="mt-10"
+          />
+          <Banner
+            v-if="info.builtin"
+            color="warning"
+            :label="t('plugins.descriptions.built-in')"
+            class="mt-10"
+          />
           <template v-else>
-            <Banner v-if="!info.certified" color="warning" :label="t('plugins.descriptions.third-party')" class="mt-10" />
-            <Banner v-if="info.experimental" color="warning" :label="t('plugins.descriptions.experimental')" class="mt-10" />
+            <Banner
+              v-if="!info.certified"
+              color="warning"
+              :label="t('plugins.descriptions.third-party')"
+              class="mt-10"
+            />
+            <Banner
+              v-if="info.experimental"
+              color="warning"
+              :label="t('plugins.descriptions.experimental')"
+              class="mt-10"
+            />
           </template>
         </div>
 
@@ -128,7 +161,10 @@ export default {
           {{ t('plugins.info.versions') }}
         </h3>
         <div class="plugin-versions mb-10">
-          <div v-for="v in info.versions" :key="v.version">
+          <div
+            v-for="v in info.versions"
+            :key="v.version"
+          >
             <a
               class="version-link"
               :class="{'version-active': v.version === infoVersion}"
@@ -145,8 +181,14 @@ export default {
         <h3 v-if="versionInfo">
           {{ t('plugins.info.detail') }}
         </h3>
-        <div v-if="versionInfo" class="plugin-info-detail">
-          <ChartReadme v-if="versionInfo" :version-info="versionInfo" />
+        <div
+          v-if="versionInfo"
+          class="plugin-info-detail"
+        >
+          <ChartReadme
+            v-if="versionInfo"
+            :version-info="versionInfo"
+          />
         </div>
         <div v-if="!info.versions.length">
           <h3>

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

@@ -113,14 +113,28 @@ export default {
       <p>
         {{ t('plugins.setup.remove.prompt') }}
       </p>
-      <div v-if="!!defaultRepo" class="mt-20">
-        <Checkbox v-model="removeRepo" :primary="true" label-key="plugins.setup.remove.registry.title" />
+      <div
+        v-if="!!defaultRepo"
+        class="mt-20"
+      >
+        <Checkbox
+          v-model="removeRepo"
+          :primary="true"
+          label-key="plugins.setup.remove.registry.title"
+        />
         <div class="checkbox-info">
           {{ t('plugins.setup.remove.registry.prompt') }}
         </div>
       </div>
-      <div v-if="hasPluginsInstalled" class="mt-20">
-        <Checkbox v-model="removeCRD" :primary="true" label-key="plugins.setup.remove.crd.title" />
+      <div
+        v-if="hasPluginsInstalled"
+        class="mt-20"
+      >
+        <Checkbox
+          v-model="removeCRD"
+          :primary="true"
+          label-key="plugins.setup.remove.crd.title"
+        />
         <div class="checkbox-info">
           {{ t('plugins.setup.remove.crd.prompt') }}
         </div>

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

@@ -217,7 +217,11 @@ export default {
               @click="enable"
             />
           </div>
-          <div v-for="(e, i) in errors" :key="i" class="plugin-setup-error">
+          <div
+            v-for="(e, i) in errors"
+            :key="i"
+            class="plugin-setup-error"
+          >
             {{ e }}
           </div>
         </div>
@@ -232,8 +236,15 @@ export default {
         <p>
           {{ t('plugins.setup.install.prompt') }}
         </p>
-        <div v-if="!hasRancherUIPluginsRepo" class="mt-20">
-          <Checkbox v-model="addRepo" :primary="true" label-key="plugins.setup.install.addRancherRepo" />
+        <div
+          v-if="!hasRancherUIPluginsRepo"
+          class="mt-20"
+        >
+          <Checkbox
+            v-model="addRepo"
+            :primary="true"
+            label-key="plugins.setup.install.addRancherRepo"
+          />
           <div class="checkbox-info">
             {{ t('plugins.setup.install.airgap') }}
           </div>

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

@@ -67,7 +67,10 @@ export default {
     height="auto"
     :scrollable="true"
   >
-    <div v-if="plugin" class="plugin-install-dialog">
+    <div
+      v-if="plugin"
+      class="plugin-install-dialog"
+    >
       <h4 class="mt-10">
         {{ t('plugins.uninstall.title', { name: plugin.label }) }}
       </h4>
@@ -78,7 +81,11 @@ export default {
           </p>
         </div>
         <div class="dialog-buttons">
-          <button :disabled="busy" class="btn role-secondary" @click="closeDialog(false)">
+          <button
+            :disabled="busy"
+            class="btn role-secondary"
+            @click="closeDialog(false)"
+          >
             {{ t('generic.cancel') }}
           </button>
           <AsyncButton

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

@@ -484,12 +484,18 @@ export default {
   <div class="plugins">
     <div class="plugin-header">
       <h2>{{ t('plugins.title') }}</h2>
-      <div v-if="reloadRequired" class="plugin-reload-banner mr-20">
+      <div
+        v-if="reloadRequired"
+        class="plugin-reload-banner mr-20"
+      >
         <i class="icon icon-checkmark mr-10" />
         <span>
           {{ t('plugins.reload') }}
         </span>
-        <button class="ml-10 btn btn-sm role-primary" @click="reload()">
+        <button
+          class="ml-10 btn btn-sm role-primary"
+          @click="reload()"
+        >
           {{ t('generic.reload') }}
         </button>
       </div>
@@ -520,24 +526,65 @@ export default {
     <PluginInfoPanel ref="infoPanel" />
 
     <div v-if="!hasService">
-      <div v-if="loading" class="data-loading">
+      <div
+        v-if="loading"
+        class="data-loading"
+      >
         <i class="icon-spin icon icon-spinner" />
-        <t k="generic.loading" :raw="true" />
+        <t
+          k="generic.loading"
+          :raw="true"
+        />
       </div>
-      <SetupUIPlugins v-else class="setup-message" @done="updateInstallStatus" />
+      <SetupUIPlugins
+        v-else
+        class="setup-message"
+        @done="updateInstallStatus"
+      />
     </div>
     <div v-else>
-      <Tabbed ref="tabs" :tabs-only="true" @changed="filterChanged">
-        <Tab name="installed" label-key="plugins.tabs.installed" :weight="20" />
-        <Tab name="available" label-key="plugins.tabs.available" :weight="19" />
-        <Tab name="updates" label-key="plugins.tabs.updates" :weight="18" :badge="updates.length" />
-        <Tab name="all" label-key="plugins.tabs.all" :weight="17" />
+      <Tabbed
+        ref="tabs"
+        :tabs-only="true"
+        @changed="filterChanged"
+      >
+        <Tab
+          name="installed"
+          label-key="plugins.tabs.installed"
+          :weight="20"
+        />
+        <Tab
+          name="available"
+          label-key="plugins.tabs.available"
+          :weight="19"
+        />
+        <Tab
+          name="updates"
+          label-key="plugins.tabs.updates"
+          :weight="18"
+          :badge="updates.length"
+        />
+        <Tab
+          name="all"
+          label-key="plugins.tabs.all"
+          :weight="17"
+        />
       </Tabbed>
-      <div v-if="loading" class="data-loading">
+      <div
+        v-if="loading"
+        class="data-loading"
+      >
         <i class="icon-spin icon icon-spinner" />
-        <t k="generic.loading" :raw="true" />
+        <t
+          k="generic.loading"
+          :raw="true"
+        />
       </div>
-      <div v-else class="plugin-list" :class="{'v-margin': !list.length}">
+      <div
+        v-else
+        class="plugin-list"
+        :class="{'v-margin': !list.length}"
+      >
         <IconMessage
           v-if="list.length === 0"
           :vertical="true"
@@ -546,7 +593,12 @@ export default {
           :message="emptyMessage"
         />
         <template v-else>
-          <div v-for="plugin in list" :key="plugin.name" class="plugin" @click="showPluginDetail(plugin)">
+          <div
+            v-for="plugin in list"
+            :key="plugin.name"
+            class="plugin"
+            @click="showPluginDetail(plugin)"
+          >
             <div class="plugin-icon">
               <LazyImage
                 v-if="plugin.icon"
@@ -559,7 +611,7 @@ export default {
                 v-else
                 :src="defaultIcon"
                 class="icon plugin-icon-img"
-              />
+              >
             </div>
             <div class="plugin-metadata">
               <div class="plugin-name">
@@ -567,41 +619,69 @@ export default {
               </div>
               <div>{{ plugin.description }}</div>
               <div class="plugin-version">
-                <span v-if="plugin.installing" class="plugin-installing">
+                <span
+                  v-if="plugin.installing"
+                  class="plugin-installing"
+                >
                   -
                 </span>
                 <span v-else>
                   <span>{{ plugin.displayVersion }}</span>
-                  <span v-if="plugin.upgrade" v-tooltip="t('plugins.upgradeAvailable')"> -> {{ plugin.upgrade }}</span>
+                  <span
+                    v-if="plugin.upgrade"
+                    v-tooltip="t('plugins.upgradeAvailable')"
+                  > -> {{ plugin.upgrade }}</span>
                 </span>
               </div>
-              <div v-if="plugin.builtin" class="plugin-badges">
+              <div
+                v-if="plugin.builtin"
+                class="plugin-badges"
+              >
                 <div class="plugin-builtin">
                   {{ t('plugins.labels.builtin') }}
                 </div>
               </div>
-              <div v-else class="plugin-badges">
-                <div v-if="!plugin.certified" v-tooltip="t('plugins.descriptions.third-party')">
+              <div
+                v-else
+                class="plugin-badges"
+              >
+                <div
+                  v-if="!plugin.certified"
+                  v-tooltip="t('plugins.descriptions.third-party')"
+                >
                   {{ t('plugins.labels.third-party') }}
                 </div>
-                <div v-if="plugin.experimental" v-tooltip="t('plugins.descriptions.experimental')">
+                <div
+                  v-if="plugin.experimental"
+                  v-tooltip="t('plugins.descriptions.experimental')"
+                >
                   {{ t('plugins.labels.experimental') }}
                 </div>
               </div>
               <div class="plugin-spacer" />
               <div class="plugin-actions">
                 <template v-if="plugin.error">
-                  <div v-tooltip="plugin.error" class="plugin-error">
+                  <div
+                    v-tooltip="plugin.error"
+                    class="plugin-error"
+                  >
                     <i class="icon icon-warning" />
                   </div>
                 </template>
-                <div v-if="plugin.helmError" v-tooltip="t('plugins.helmError')" class="plugin-error">
+                <div
+                  v-if="plugin.helmError"
+                  v-tooltip="t('plugins.helmError')"
+                  class="plugin-error"
+                >
                   <i class="icon icon-warning" />
                 </div>
 
                 <div class="plugin-spacer" />
 
-                <div v-if="plugin.installing" class="plugin-installing">
+                <div
+                  v-if="plugin.installing"
+                  class="plugin-installing"
+                >
                   <i class="version-busy icon icon-spin icon-spinner" />
                   <div v-if="plugin.installing ==='install'">
                     {{ t('plugins.labels.installing') }}
@@ -610,19 +690,40 @@ export default {
                     {{ t('plugins.labels.uninstalling') }}
                   </div>
                 </div>
-                <div v-else-if="plugin.installed" class="plugin-buttons">
-                  <button v-if="!plugin.builtin" class="btn role-secondary" @click="showUninstallDialog(plugin, $event)">
+                <div
+                  v-else-if="plugin.installed"
+                  class="plugin-buttons"
+                >
+                  <button
+                    v-if="!plugin.builtin"
+                    class="btn role-secondary"
+                    @click="showUninstallDialog(plugin, $event)"
+                  >
                     {{ t('plugins.uninstall.label') }}
                   </button>
-                  <button v-if="plugin.upgrade" class="btn role-secondary" @click="showInstallDialog(plugin, 'update', $event)">
+                  <button
+                    v-if="plugin.upgrade"
+                    class="btn role-secondary"
+                    @click="showInstallDialog(plugin, 'update', $event)"
+                  >
                     {{ t('plugins.update.label') }}
                   </button>
-                  <button v-if="!plugin.upgrade && plugin.versions.length > 1" class="btn role-secondary" @click="showInstallDialog(plugin, 'rollback', $event)">
+                  <button
+                    v-if="!plugin.upgrade && plugin.versions.length > 1"
+                    class="btn role-secondary"
+                    @click="showInstallDialog(plugin, 'rollback', $event)"
+                  >
                     {{ t('plugins.rollback.label') }}
                   </button>
                 </div>
-                <div v-else class="plugin-buttons">
-                  <button class="btn role-secondary" @click="showInstallDialog(plugin, 'install', $event)">
+                <div
+                  v-else
+                  class="plugin-buttons"
+                >
+                  <button
+                    class="btn role-secondary"
+                    @click="showInstallDialog(plugin, 'install', $event)"
+                  >
                     {{ t('plugins.install.label') }}
                   </button>
                 </div>
@@ -633,10 +734,24 @@ export default {
       </div>
     </div>
 
-    <InstallDialog ref="installDialog" @closed="didInstall" @update="updatePluginInstallStatus" />
-    <UninstallDialog ref="uninstallDialog" @closed="didUninstall" @update="updatePluginInstallStatus" />
-    <DeveloperInstallDialog ref="developerInstallDialog" @closed="didInstall" />
-    <RemoveUIPlugins ref="removeUIPlugins" @done="updateInstallStatus" />
+    <InstallDialog
+      ref="installDialog"
+      @closed="didInstall"
+      @update="updatePluginInstallStatus"
+    />
+    <UninstallDialog
+      ref="uninstallDialog"
+      @closed="didUninstall"
+      @update="updatePluginInstallStatus"
+    />
+    <DeveloperInstallDialog
+      ref="developerInstallDialog"
+      @closed="didInstall"
+    />
+    <RemoveUIPlugins
+      ref="removeUIPlugins"
+      @done="updateInstallStatus"
+    />
   </div>
 </template>
 

package/pages/diagnostic.vue

@@ -1,5 +1,5 @@
 <script>
-import { CAPI } from '@shell/config/types';
+import { CAPI, MANAGEMENT } from '@shell/config/types';
 import AsyncButton from '@shell/components/AsyncButton';
 import PromptModal from '@shell/components/PromptModal';
 import { downloadFile } from '@shell/utils/download';
@@ -21,9 +21,12 @@ export default {
     let topTenForResponseTime = [];
 
     clusterForCounts.forEach((cluster, i) => {
+      // Necessary to retrieve the proper display name of the cluster
+      const mgmtCluster = this.$store.getters['management/byId'](MANAGEMENT.CLUSTER, cluster.metadata.name);
+
       finalCounts.push({
         id:             cluster.id,
-        name:           cluster.metadata?.name,
+        name:           mgmtCluster?.spec?.displayName || cluster.metadata?.name,
         namespace:      cluster.metadata?.namespace,
         capiId:         cluster.mgmt?.id,
         counts:         null,
@@ -327,7 +330,10 @@ export default {
           </tr>
         </thead>
         <tbody>
-          <tr v-for="(item, objKey) in systemInformation" :key="objKey">
+          <tr
+            v-for="(item, objKey) in systemInformation"
+            :key="objKey"
+          >
             <template v-if="item.value.length">
               <td>{{ item.label }}</td>
               <td>{{ item.value }}</td>
@@ -361,7 +367,7 @@ export default {
                     'icon-chevron-down': !cluster.isTableVisible,
                     'icon-chevron-up': cluster.isTableVisible
                   }"
-                ></i>
+                />
               </div>
             </th>
           </thead>
@@ -378,7 +384,10 @@ export default {
               </th>
             </tr>
 
-            <tr v-for="item in cluster.counts" :key="item.resource">
+            <tr
+              v-for="item in cluster.counts"
+              :key="item.resource"
+            >
               <template v-if="item.count > 0">
                 <td scope="row">
                   {{ item.resource }}

package/pages/docs/_doc.vue

@@ -169,12 +169,29 @@ export default {
         {{ t('nav.home') }}
       </nuxt-link>
       <span v-if="doc">> {{ doc.attributes.title }}</span>
-      <i v-if="showRefresh" class="icon icon-refresh doc-refresh" @click="refresh"></i>
+      <i
+        v-if="showRefresh"
+        class="icon icon-refresh doc-refresh"
+        @click="refresh"
+      />
     </h1>
-    <div v-if="doc" id="doc-content" class="doc-content" :class="{'nuxt-content-side-toc': sideToc}">
-      <Markdown ref="scrollPanel" v-model="doc.body" class="doc-content-document" :class="{'nuxt-content-side-toc': sideToc}" />
-
-      <div v-if="sideToc" class="toc">
+    <div
+      v-if="doc"
+      id="doc-content"
+      class="doc-content"
+      :class="{'nuxt-content-side-toc': sideToc}"
+    >
+      <Markdown
+        ref="scrollPanel"
+        v-model="doc.body"
+        class="doc-content-document"
+        :class="{'nuxt-content-side-toc': sideToc}"
+      />
+
+      <div
+        v-if="sideToc"
+        class="toc"
+      >
         <a
           v-for="bookmark in doc.toc"
           :id="`toc-link-${ bookmark.id }`"

package/pages/fail-whale.vue

@@ -49,26 +49,42 @@ export default {
 
 <template>
   <div v-if="error">
-    <main class="error">
+    <main class="main-layout error">
       <div class="text-center">
-        <BrandImage file-name="error-desert-landscape.svg" width="900" height="300" />
+        <BrandImage
+          file-name="error-desert-landscape.svg"
+          width="900"
+          height="300"
+        />
         <h1 v-if="error.status">
           HTTP Error {{ error.status }}: {{ error.statusText }}
         </h1>
         <h1 v-else>
           Error
         </h1>
-        <h2 v-if="error" class="text-secondary mt-20">
+        <h2
+          v-if="error"
+          class="text-secondary mt-20"
+        >
           {{ displayError }}
         </h2>
         <p class="mt-20">
-          <a :href="home" class="btn role-primary">
+          <a
+            :href="home"
+            class="btn role-primary"
+          >
             {{ t('nav.home') }}
           </a>
         </p>
-        <hr class="custom-content" :style="styles">
+        <hr
+          class="custom-content"
+          :style="styles"
+        >
         <p class="mt-20">
-          <a class="btn role-secondary" @click="$router.push(previousRoute.fullPath)">
+          <a
+            class="btn role-secondary"
+            @click="$router.push(previousRoute.fullPath)"
+          >
             {{ t('nav.failWhale.reload') }}
           </a>
         </p>
@@ -79,6 +95,10 @@ export default {
 
 <style lang="scss" scoped>
   .error {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    justify-content: center;
     overflow: hidden;
 
     .row {