More logos, move logo logic to model, add logos to cluster switcher

assets/translations/en-us.yaml

@@ -262,6 +262,8 @@ catalog:
       partner: Partner
       rancher: Rancher
     header: Deploy Chart
+    noCharts: 'There are no charts available, have you added any repos?'
+    noWindows: Your catalogs do not contain any charts capable of being deployed on a Windows cluster.
     search: Filter
   install:
     action:
@@ -307,8 +309,8 @@ catalog:
   operation:
     tableHeaders:
       action: Action
-      releaseNamespace: Release Namespace
       releaseName: Release Name
+      releaseNamespace: Release Namespace
   repo:
     action:
       refresh: Refresh

components/nav/ClusterSwitcher.vue

@@ -2,13 +2,15 @@
 import { MANAGEMENT } from '@/config/types';
 import { sortBy } from '@/utils/sort';
 import { findBy } from '@/utils/array';
-import { mapState } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 import Select from '@/components/form/Select';
 
 export default {
   components: { Select },
+
   computed:   {
     ...mapState(['isMultiCluster']),
+    ...mapGetters(['currentCluster']),
 
     value: {
       get() {
@@ -36,9 +38,10 @@ export default {
 
       const out = all.map((x) => {
         return {
-          id:    x.id,
+          id:     x.id,
-          label: x.nameDisplay,
+          label:  x.nameDisplay,
-          ready: x.isReady,
+          ready:  x.isReady,
+          osLogo: x.providerOSLogo,
         };
       });
 
@@ -66,8 +69,12 @@ export default {
       :options="options"
     >
       <template #selected-option="opt">
-        <i class="icon icon-copy icon-lg pr-5" />
+        <span class="cluster-label-container">
-        {{ opt.label }}
+          <img class="cluster-switcher-os-logo" :src="currentCluster.providerOSLogo" />
+          <span class="cluster-label">
+            {{ opt.label }}
+          </span>
+        </span>
       </template>
 
       <template #no-options="{ search, searching }">
@@ -78,15 +85,22 @@ export default {
       </template>
 
       <template #option="opt">
-        <b v-if="opt === value">{{ opt.label }}</b>
+        <span class="dropdown-option">
-        <nuxt-link
+          <span class="logo">
-          v-else-if="opt.ready"
+            <img v-if="opt.osLogo" class="cluster-switcher-os-logo" :src="opt.osLogo" />
-          class="cluster"
+          </span>
-          :to="{ name: 'c-cluster', params: { cluster: opt.id } }"
+          <span class="content">
-        >
+            <b v-if="opt === value">{{ opt.label }}</b>
-          {{ opt.label }}
+            <nuxt-link
-        </nuxt-link>
+              v-else-if="opt.ready"
-        <span v-else class="text-muted">{{ opt.label }}</span>
+              class="cluster"
+              :to="{ name: 'c-cluster', params: { cluster: opt.id } }"
+            >
+              {{ opt.label }}
+            </nuxt-link>
+            <span v-else class="text-muted">{{ opt.label }}</span>
+          </span>
+        </span>
       </template>
     </Select>
     <button v-shortkey.once="['c']" class="hide" @shortkey="focus()" />
@@ -94,6 +108,18 @@ export default {
 </template>
 
 <style lang="scss" scoped>
+.filter {
+  .cluster-label-container {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 15% 85%;
+  }
+
+  .cluster-switcher-os-logo {
+    height: 16px;
+  }
+}
+
 .filter ::v-deep .unlabeled-select .v-select {
   background: rgba(0, 0, 0, 0.05);
   border-radius: var(--border-radius);
@@ -101,6 +127,20 @@ export default {
   display: inline-block;
   max-width: 100%;
 
+  .vs__selected {
+    width: 100%;
+  }
+
+  // matches the padding a layout of the option (and logo/content) to the selected option so it doesn't look off
+  .vs__dropdown-option  {
+    padding: 3px 20px 3px 8px;
+    .dropdown-option {
+      display: grid;
+      width: 100%;
+      grid-template-columns: 35% fit-content(100%);
+    }
+  }
+
   &.vs--disabled .vs__actions {
     display: none;
   }

config/labels-annotations.js

@@ -52,6 +52,8 @@ export const CATALOG = {
   SOURCE_REPO_NAME: 'catalog.cattle.io/ui-source-repo',
   COLOR:            'catalog.cattle.io/ui-color',
   DISPLAY_NAME:     'catalog.cattle.io/display-name',
+
+  SUPPORTED_OS: 'catalog.cattle.io/os',
 };
 
 export const FLEET = {

models/management.cattle.io.cluster.js

@@ -1,12 +1,19 @@
 import { CATALOG } from '@/config/labels-annotations';
 import { FLEET } from '@/config/types';
-import { insertAt } from '@/utils/array';
+import { insertAt, findBy } from '@/utils/array';
+
+export const OS_LOGOS = [
+  {
+    id:   'linux',
+    logo:  require(`~/assets/images/logo-linux.svg`)
+  },
+  {
+    id:   'windows',
+    logo:  require(`~/assets/images/logo-windows.svg`)
+  },
+];
 
 export default {
-  scope() {
-    return this.id === 'local' ? CATALOG._MANAGEMENT : CATALOG._DOWNSTREAM;
-  },
-
   _availableActions() {
     const out = this._standardActions;
 
@@ -20,6 +27,33 @@ export default {
     return out;
   },
 
+  canDelete() {
+    return this.hasLink('remove') && !this?.spec?.internal;
+  },
+
+  configName() {
+    const allKeys = Object.keys(this.spec);
+    const configKey = allKeys.find( kee => kee.includes('Config'));
+
+    return configKey;
+  },
+
+  groupByLabel() {
+    return this.$rootGetters['i18n/t']('resourceTable.groupLabel.notInAWorkspace');
+  },
+
+  isReady() {
+    return this.hasCondition('Ready');
+  },
+
+  kubernetesVersion() {
+    if ( this?.status?.version?.gitVersion ) {
+      return this.status.version.gitVersion;
+    } else {
+      return this.$rootGetters['i18n/t']('generic.unknown');
+    }
+  },
+
   openShell() {
     return () => {
       this.$dispatch('wm/open', {
@@ -35,31 +69,23 @@ export default {
     };
   },
 
-  isReady() {
+  providerOSLogo() {
-    return this.hasCondition('Ready');
+    const providerOSOptions = OS_LOGOS;
-  },
+    const provider = this.status.provider || '';
+    let match = findBy(providerOSOptions, 'id', 'linux');
+    let { logo } = match;
 
-  configName() {
+    if (provider === 'rke.windows') {
-    const allKeys = Object.keys(this.spec);
+      match = findBy(providerOSOptions, 'id', 'windows');
-    const configKey = allKeys.find( kee => kee.includes('Config'));
 
-    return configKey;
+      logo = match.logo;
-  },
-
-  kubernetesVersion() {
-    if ( this?.status?.version?.gitVersion ) {
-      return this.status.version.gitVersion;
-    } else {
-      return this.$rootGetters['i18n/t']('generic.unknown');
     }
+
+    return logo;
   },
 
-  canDelete() {
+  scope() {
-    return this.hasLink('remove') && !this?.spec?.internal;
+    return this.id === 'local' ? CATALOG._MANAGEMENT : CATALOG._DOWNSTREAM;
-  },
-
-  groupByLabel() {
-    return this.$rootGetters['i18n/t']('resourceTable.groupLabel.notInAWorkspace');
   },
 
   setClusterNameLabel() {

pages/c/_cluster/apps/charts.vue

@@ -13,6 +13,7 @@ import Select from '@/components/form/Select';
 import LazyImage from '@/components/LazyImage';
 import { mapPref, HIDE_REPOS } from '@/store/prefs';
 import { removeObject, addObject, findBy } from '@/utils/array';
+import { CATALOG } from '@/config/labels-annotations';
 
 export default {
   components: {
@@ -38,19 +39,33 @@ export default {
 
   data() {
     return {
-      searchQuery:    null,
+      allRepos:            null,
-      showDeprecated: null,
+      catalogOSAnnotation: CATALOG.OS,
-      showHidden:     null,
+      category:            null,
-      category:       null,
+      searchQuery:         null,
-      allRepos:       null,
+      showDeprecated:      null,
+      showHidden:          null,
     };
   },
 
   computed: {
+    ...mapGetters(['currentCluster']),
     ...mapGetters({ allCharts: 'catalog/charts', loadingErrors: 'catalog/errors' }),
 
     hideRepos: mapPref(HIDE_REPOS),
 
+    showWindowsClusterNoAppsSplash() {
+      const clusterProvider = this.currentCluster.status.provider || 'other';
+      const { filteredCharts } = this;
+      let showSplash = false;
+
+      if (clusterProvider === 'rke.windows' && filteredCharts.length === 0) {
+        showSplash = true;
+      }
+
+      return showSplash;
+    },
+
     repoOptions() {
       let nextColor = 1;
 
@@ -97,7 +112,15 @@ export default {
     },
 
     filteredCharts() {
+      const clusterProvider = this.currentCluster.status.provider || 'other';
+
       return (this.enabledCharts || []).filter((c) => {
+        const osAnnotation = c.annotations[this.catalogOSAnnotation];
+
+        if (clusterProvider === 'rke.windows' && ((osAnnotation && osAnnotation !== 'windows') || !osAnnotation)) {
+          return false;
+        }
+
         if ( this.category && !c.categories.includes(this.category) ) {
           return false;
         }
@@ -313,7 +336,19 @@ export default {
 
     <div v-if="allCharts.length">
       <div class="charts">
-        <div v-for="c in arrangedCharts" :key="c.key" class="chart" :class="{[colorForChart(c)]: true}" @click="selectChart(c)">
+        <div v-if="arrangedCharts.length === 0 && showWindowsClusterNoAppsSplash" style="width: 100%;">
+          <div class="m-50 text-center">
+            <h1>{{ t('catalog.charts.noWindows') }}</h1>
+          </div>
+        </div>
+        <div
+          v-for="c in arrangedCharts"
+          v-else
+          :key="c.key"
+          class="chart"
+          :class="{[colorForChart(c)]: true}"
+          @click="selectChart(c)"
+        >
           <div class="side-label">
             <label v-if="c.sideLabel">{{ c.sideLabel }}</label>
           </div>
@@ -330,7 +365,7 @@ export default {
       </div>
     </div>
     <div v-else class="m-50 text-center">
-      <h1>There are no charts available, have you added any repos?</h1>
+      <h1>{{ t('catalog.charts.noCharts') }}</h1>
     </div>
   </div>
 </template>

pages/c/_cluster/explorer/index.vue

@@ -29,6 +29,7 @@ import CountGauge from '@/components/CountGauge';
 import Glance from '@/components/Glance';
 import LazyImage from '@/components/LazyImage';
 import { findBy } from '@/utils/array';
+import { OS_LOGOS } from '@/models/management.cattle.io.cluster';
 import HardwareResourceGauge from './HardwareResourceGauge';
 
 const PARSE_RULES = {
@@ -50,16 +51,6 @@ const METRICS_POLL_RATE_MS = 30000;
 const MAX_FAILURES = 2;
 
 const RESOURCES = [NAMESPACE, INGRESS, PV, WORKLOAD_TYPES.DEPLOYMENT, WORKLOAD_TYPES.STATEFUL_SET, WORKLOAD_TYPES.JOB, WORKLOAD_TYPES.DAEMON_SET, SERVICE];
-const PROVIDER_OS_OPTIONS = [
-  {
-    id:   'linux',
-    logo:  require(`~/assets/images/logo-linux.svg`)
-  },
-  {
-    id:   'windows',
-    logo:  require(`~/assets/images/logo-windows.svg`)
-  },
-];
 
 export default {
   components: {
@@ -141,7 +132,6 @@ export default {
       nodePools:         [],
       nodeTemplates:     [],
       nodes:             [],
-      providerOSOptions: PROVIDER_OS_OPTIONS,
     };
   },
 
@@ -163,20 +153,6 @@ export default {
       return this.t(`cluster.provider.${ provider }`);
     },
 
-    providerOSLogo() {
-      const { currentCluster, providerOSOptions } = this;
-      const provider = currentCluster.status.provider || '';
-      let match = findBy(providerOSOptions, 'id', 'linux');
-      let logo = match.logo;
-
-      if (provider === 'rke.windows') {
-        match = findBy(providerOSOptions, 'id', 'windows');
-        logo = match.logo;
-      }
-
-      return logo;
-    },
-
     accessibleResources() {
       return RESOURCES.filter(resource => this.$store.getters['cluster/schemaFor'](resource));
     },
@@ -368,7 +344,7 @@ export default {
           <label>{{ t('glance.provider') }}</label>
         </div>
         <div class="logo">
-          <LazyImage class="os-provider-logo" :initial-src="findBy(providerOSOptions, 'id', 'linux').logo" :src="providerOSLogo" />
+          <LazyImage class="os-provider-logo" :src="currentCluster.providerOSLogo" />
         </div>
       </template>
       <template #kubernetesVersion>