@rancher/shell 0.5.3 → 2.0.0

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

@@ -17,6 +17,7 @@ import {
   CATALOG,
   SECRET
 } from '@shell/config/types';
+import { NODE_ARCHITECTURE } from '@shell/config/labels-annotations';
 import { setPromiseResult } from '@shell/utils/promise';
 import AlertTable from '@shell/components/AlertTable';
 import { Banner } from '@components/Banner';
@@ -27,13 +28,12 @@ import {
   STATE,
 } from '@shell/config/table-headers';
 
-import { haveV1Monitoring, monitoringStatus, canViewGrafanaLink } from '@shell/utils/monitoring';
+import { monitoringStatus, canViewGrafanaLink } from '@shell/utils/monitoring';
 import Tabbed from '@shell/components/Tabbed';
 import Tab from '@shell/components/Tabbed/Tab';
 import { allDashboardsExist } from '@shell/utils/grafana';
 import EtcdInfoBanner from '@shell/components/EtcdInfoBanner';
 import metricPoller from '@shell/mixins/metric-poller';
-import EmberPage from '@shell/components/EmberPage';
 import ResourceSummary, { resourceCounts } from '@shell/components/ResourceSummary';
 import HardwareResourceGauge from '@shell/components/HardwareResourceGauge';
 import { isEmpty } from '@shell/utils/object';
@@ -45,6 +45,9 @@ import { ExtensionPoint, CardLocation } from '@shell/core/types';
 import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 import Certificates from '@shell/components/Certificates';
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
+import TabTitle from '@shell/components/TabTitle';
+import { STATES_ENUM } from '@shell/plugins/dashboard-store/resource-class';
+import capitalize from 'lodash/capitalize';
 
 export const RESOURCES = [NAMESPACE, INGRESS, PV, WORKLOAD_TYPES.DEPLOYMENT, WORKLOAD_TYPES.STATEFUL_SET, WORKLOAD_TYPES.JOB, WORKLOAD_TYPES.DAEMON_SET, SERVICE];
 
@@ -55,7 +58,7 @@ const K8S_METRICS_SUMMARY_URL = '/api/v1/namespaces/cattle-monitoring-system/ser
 const ETCD_METRICS_DETAIL_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-etcd-nodes-1/rancher-etcd-nodes?orgId=1';
 const ETCD_METRICS_SUMMARY_URL = '/api/v1/namespaces/cattle-monitoring-system/services/http:rancher-monitoring-grafana:80/proxy/d/rancher-etcd-1/rancher-etcd?orgId=1';
 
-const COMPONENT_STATUS = [
+const CLUSTER_COMPONENTS = [
   'etcd',
   'scheduler',
   'controller-manager',
@@ -73,11 +76,11 @@ export default {
     Tabbed,
     AlertTable,
     Banner,
-    EmberPage,
     ConfigBadge,
     EventsTable,
     SimpleBox,
-    Certificates
+    Certificates,
+    TabTitle
   },
 
   mixins: [metricPoller],
@@ -112,6 +115,12 @@ export default {
       if (this.currentCluster.isLocal && this.$store.getters['management/schemaFor'](MANAGEMENT.NODE)) {
         this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE });
       }
+
+      this.canViewAgents = this.$store.getters['cluster/canList'](WORKLOAD_TYPES.DEPLOYMENT) && this.$store.getters['cluster/canList'](WORKLOAD_TYPES.STATEFUL_SET);
+
+      if (this.canViewAgents) {
+        this.loadAgents();
+      }
     }
   },
 
@@ -126,6 +135,11 @@ export default {
     return {
       nodeHeaders,
       constraints:        [],
+      cattleDeployment:   'loading',
+      fleetDeployment:    'loading',
+      fleetStatefulSet:   'loading',
+      canViewAgents:      false,
+      disconnected:       false,
       events:             [],
       nodeMetrics:        [],
       showClusterMetrics: false,
@@ -138,6 +152,7 @@ export default {
       K8S_METRICS_SUMMARY_URL,
       ETCD_METRICS_DETAIL_URL,
       ETCD_METRICS_SUMMARY_URL,
+      STATES_ENUM,
       clusterCounts,
       selectedTab:        'cluster-events',
       extensionCards:     getApplicableExtensionEnhancements(this, ExtensionPoint.CARD, CardLocation.CLUSTER_DASHBOARD_CARD, this.$route),
@@ -152,6 +167,9 @@ export default {
     this.$store.dispatch('cluster/forgetType', ENDPOINTS); // Used by AlertTable to get alerts when v2 monitoring is installed
     this.$store.dispatch('cluster/forgetType', METRIC.NODE);
     this.$store.dispatch('cluster/forgetType', MANAGEMENT.NODE);
+    this.$store.dispatch('cluster/forgetType', WORKLOAD_TYPES.DEPLOYMENT);
+
+    clearInterval(this.interval);
   },
 
   computed: {
@@ -166,12 +184,9 @@ export default {
       return this.$store.getters['management/all'](MANAGEMENT.CLUSTER);
     },
 
-    hasV1Monitoring() {
-      return haveV1Monitoring(this.$store.getters);
-    },
-
-    v1MonitoringURL() {
-      return `/k/${ this.currentCluster.id }/monitoring`;
+    showClusterTools() {
+      return this.$store.getters['cluster/canList'](CATALOG.CLUSTER_REPO) &&
+      this.$store.getters['cluster/canList'](CATALOG.APP);
     },
 
     displayProvider() {
@@ -190,6 +205,38 @@ export default {
       return this.t(`cluster.provider.${ provider }`);
     },
 
+    nodesArchitecture() {
+      const obj = {};
+
+      this.nodes?.forEach((node) => {
+        if (!node.metadata?.state?.transitioning) {
+          const architecture = node.labels?.[NODE_ARCHITECTURE];
+
+          const key = architecture ? capitalize(architecture) : this.t('cluster.architecture.label.unknown');
+
+          obj[key] = (obj[key] || 0) + 1;
+        }
+      });
+
+      return obj;
+    },
+
+    architecture() {
+      const keys = Object.keys(this.nodesArchitecture);
+
+      switch (keys.length) {
+      case 0:
+        return { label: this.t('generic.provisioning') };
+      case 1:
+        return { label: keys[0] };
+      default:
+        return {
+          label:   this.t('cluster.architecture.label.mixed'),
+          tooltip: keys.reduce((acc, k) => `${ acc }${ k }: ${ this.nodesArchitecture[k] }<br>`, '')
+        };
+      }
+    },
+
     isHarvesterCluster() {
       return this.currentCluster?.isHarvester;
     },
@@ -210,18 +257,82 @@ export default {
       return allowedResources.filter((resource) => this.$store.getters['cluster/schemaFor'](resource));
     },
 
-    componentServices() {
-      const status = [];
+    clusterServices() {
+      const services = [];
 
-      COMPONENT_STATUS.forEach((cs) => {
-        status.push({
+      CLUSTER_COMPONENTS.forEach((cs) => {
+        services.push({
           name:     cs,
-          healthy:  this.isComponentStatusHealthy(cs),
+          status:   this.getComponentStatus(cs),
           labelKey: `clusterIndexPage.sections.componentStatus.${ cs }`,
         });
       });
 
-      return status;
+      if (this.canViewAgents) {
+        if (!this.currentCluster.isLocal) {
+          services.push({
+            name:     'cattle',
+            status:   this.cattleStatus,
+            labelKey: 'clusterIndexPage.sections.componentStatus.cattle',
+          });
+        }
+
+        services.push({
+          name:     'fleet',
+          status:   this.fleetStatus,
+          labelKey: 'clusterIndexPage.sections.componentStatus.fleet',
+        });
+      }
+
+      return services;
+    },
+
+    cattleStatus() {
+      const resource = this.cattleDeployment;
+
+      if (resource === 'loading') {
+        return STATES_ENUM.IN_PROGRESS;
+      }
+
+      if (!resource || this.disconnected || resource.status.conditions?.find((c) => c.status !== 'True') || resource.metadata.state?.error) {
+        return STATES_ENUM.UNHEALTHY;
+      }
+
+      if (resource.spec.replicas !== resource.status.readyReplicas || resource.status.unavailableReplicas > 0) {
+        return STATES_ENUM.WARNING;
+      }
+
+      return STATES_ENUM.HEALTHY;
+    },
+
+    fleetStatus() {
+      const resources = this.currentCluster.isLocal ? [
+        /**
+         * 'fleetStatefulSet' could take a while to be created by rancher.
+         * During that startup period, only 'fleetDeployment' will be used to calculate the fleet agent status.
+         */
+        ...(this.fleetStatefulSet ? [this.fleetStatefulSet, this.fleetDeployment] : [this.fleetDeployment]),
+      ] : [
+        this.fleetStatefulSet
+      ];
+
+      if (resources.find((r) => r === 'loading')) {
+        return STATES_ENUM.IN_PROGRESS;
+      }
+
+      for (const resource of resources) {
+        if (!resource || resource.status.conditions?.find((c) => c.status !== 'True') || resource.metadata.state?.error) {
+          return STATES_ENUM.UNHEALTHY;
+        }
+      }
+
+      for (const resource of resources) {
+        if (resource.spec.replicas !== resource.status.readyReplicas || resource.status.unavailableReplicas > 0) {
+          return STATES_ENUM.WARNING;
+        }
+      }
+
+      return STATES_ENUM.HEALTHY;
     },
 
     totalCountGaugeInput() {
@@ -370,13 +481,35 @@ export default {
   },
 
   methods: {
-    // Ported from Ember
-    isComponentStatusHealthy(field) {
+    loadAgents() {
+      if (this.currentCluster.isLocal) {
+        this.setAgentResource('fleetDeployment', WORKLOAD_TYPES.DEPLOYMENT, 'cattle-fleet-system/fleet-controller');
+        this.setAgentResource('fleetStatefulSet', WORKLOAD_TYPES.STATEFUL_SET, 'cattle-fleet-local-system/fleet-agent');
+      } else {
+        this.setAgentResource('fleetStatefulSet', WORKLOAD_TYPES.STATEFUL_SET, 'cattle-fleet-system/fleet-agent');
+        this.setAgentResource('cattleDeployment', WORKLOAD_TYPES.DEPLOYMENT, 'cattle-system/cattle-cluster-agent');
+
+        // Scaling Up/Down cattle deployment causes web sockets disconnection;
+        this.interval = setInterval(() => {
+          this.disconnected = !!this.$store.getters['cluster/inError']({ type: NODE });
+        }, 1000);
+      }
+    },
+
+    async setAgentResource(agent, type, id) {
+      try {
+        this[agent] = await this.$store.dispatch('cluster/find', { type, id });
+      } catch (err) {
+        this[agent] = null;
+      }
+    },
+
+    getComponentStatus(field) {
       const matching = (this.currentCluster?.status?.componentStatuses || []).filter((s) => s.name.startsWith(field));
 
       // If there's no matching component status, it's "healthy"
       if ( !matching.length ) {
-        return true;
+        return STATES_ENUM.HEALTHY;
       }
 
       const count = matching.reduce((acc, status) => {
@@ -385,7 +518,11 @@ export default {
         return !conditions ? acc : acc + 1;
       }, 0);
 
-      return count === 0;
+      if (count > 0) {
+        return STATES_ENUM.UNHEALTHY;
+      }
+
+      return STATES_ENUM.HEALTHY;
     },
 
     showActions() {
@@ -423,17 +560,22 @@ export default {
     <header>
       <div class="title">
         <h1>
-          <t k="clusterIndexPage.header" />
+          <TabTitle>
+            {{ t('clusterIndexPage.header') }}
+          </TabTitle>
         </h1>
-        <div>
-          <span v-if="hasDescription">{{ currentCluster.spec.description }}</span>
+        <div
+          v-if="hasDescription"
+          class="cluster-dashboard-description"
+        >
+          <span>{{ currentCluster.spec.description }}</span>
         </div>
       </div>
     </header>
     <div
       class="cluster-dashboard-glance"
     >
-      <div>
+      <div data-testid="clusterProvider__label">
         <label>{{ t('glance.provider') }}: </label>
         <span v-if="isHarvesterCluster">
           <a
@@ -447,7 +589,7 @@ export default {
           {{ displayProvider }}
         </span>
       </div>
-      <div>
+      <div data-testid="kubernetesVersion__label">
         <label>{{ t('glance.version') }}: </label>
         <span>{{ currentCluster.kubernetesVersionBase }}</span>
         <span
@@ -455,7 +597,16 @@ export default {
           style="font-size: 0.75em"
         >{{ currentCluster.kubernetesVersionExtension }}</span>
       </div>
-      <div>
+      <div
+        v-if="nodes.length > 0"
+        data-testid="architecture__label"
+      >
+        <label>{{ t('glance.architecture') }}: </label>
+        <span v-clean-tooltip="architecture.tooltip">
+          {{ architecture.label }}
+        </span>
+      </div>
+      <div data-testid="created__label">
         <label>{{ t('glance.created') }}: </label>
         <span><LiveDate
           :value="currentCluster.metadata.creationTimestamp"
@@ -464,17 +615,13 @@ export default {
         /></span>
       </div>
       <div :style="{'flex':1}" />
-      <div v-if="!monitoringStatus.v2 && !monitoringStatus.v1">
-        <n-link
+      <div v-if="showClusterTools">
+        <router-link
           :to="{name: 'c-cluster-explorer-tools'}"
-          class="monitoring-install"
+          class="cluster-tools-link"
         >
-          <i class="icon icon-gear" />
-          <span>{{ t('glance.installMonitoring') }}</span>
-        </n-link>
-      </div>
-      <div v-if="monitoringStatus.v1">
-        <span>{{ t('glance.v1MonitoringInstalled') }}</span>
+          <span>{{ t('nav.clusterTools') }}</span>
+        </router-link>
       </div>
       <ConfigBadge
         v-if="currentCluster.canUpdate"
@@ -516,13 +663,13 @@ export default {
     </div>
 
     <h3
-      v-if="!hasV1Monitoring && hasStats"
+      v-if="hasStats"
       class="mt-40"
     >
       {{ t('clusterIndexPage.sections.capacity.label') }}
     </h3>
     <div
-      v-if="!hasV1Monitoring && hasStats"
+      v-if="hasStats"
       class="hardware-resource-gauges"
     >
       <HardwareResourceGauge
@@ -543,36 +690,32 @@ export default {
       />
     </div>
 
-    <div v-if="!hasV1Monitoring && componentServices">
+    <div v-if="clusterServices">
       <div
-        v-for="status in componentServices"
-        :key="status.name"
-        class="k8s-component-status"
-        :class="{'k8s-component-status-healthy': status.healthy, 'k8s-component-status-unhealthy': !status.healthy}"
+        v-for="service in clusterServices"
+        :key="service.name"
+        class="k8s-service-status"
+        :class="{[service.status]: true }"
+        :data-testid="`k8s-service-${ service.name }`"
       >
         <i
-          v-if="status.healthy"
+          v-if="service.status === STATES_ENUM.IN_PROGRESS"
+          class="icon icon-spinner icon-spin"
+        />
+        <i
+          v-else-if="service.status === STATES_ENUM.HEALTHY"
           class="icon icon-checkmark"
         />
         <i
           v-else
           class="icon icon-warning"
         />
-        <div>{{ t(status.labelKey) }}</div>
+        <div class="label">
+          {{ t(service.labelKey) }}
+        </div>
       </div>
     </div>
 
-    <div
-      v-if="hasV1Monitoring"
-      id="ember-anchor"
-      class="mt-20"
-    >
-      <EmberPage
-        inline="ember-anchor"
-        :src="v1MonitoringURL"
-      />
-    </div>
-
     <div class="mt-30">
       <Tabbed @changed="tabChange">
         <Tab
@@ -581,9 +724,9 @@ export default {
           :weight="2"
         >
           <span class="events-table-link">
-            <n-link :to="allEventsLink">
+            <router-link :to="allEventsLink">
               <span>{{ t('glance.eventsTable') }}</span>
-            </n-link>
+            </router-link>
           </span>
           <EventsTable />
         </Tab>
@@ -600,10 +743,10 @@ export default {
           :label="t('clusterIndexPage.sections.certs.label')"
           :weight="1"
         >
-          <span class="events-table-link">
-            <n-link :to="allSecretsLink">
+          <span class="cert-table-link">
+            <router-link :to="allSecretsLink">
               <span>{{ t('glance.secretsTable') }}</span>
-            </n-link>
+            </router-link>
           </span>
           <Certificates v-if="selectedTab === 'cluster-certs'" />
         </Tab>
@@ -682,9 +825,10 @@ export default {
 }
 
 .cluster-dashboard-glance {
+  align-items: center;
   border-top: 1px solid var(--border);
   border-bottom: 1px solid var(--border);
-  padding: 20px 0px;
+  padding: 10px 0px;
   display: flex;
 
   &>*:not(:nth-last-child(-n+2)) {
@@ -696,8 +840,15 @@ export default {
   }
 }
 
-.title h1 {
-  margin: 0;
+.title {
+  h1 {
+    margin: 0;
+  }
+
+  .cluster-dashboard-description {
+    margin: 5px 0;
+    opacity: 0.7;
+  }
 }
 
 .actions-span {
@@ -723,9 +874,9 @@ export default {
   margin-top: 0;
 }
 
-.monitoring-install {
+.cluster-tools-link {
   display: flex;
-  margin-left: 10px;
+  margin-right: 10px;
 
   > I {
     line-height: inherit;
@@ -737,18 +888,23 @@ export default {
   }
 }
 
-.events-table-link {
+.events-table-link, .cert-table-link {
   display: flex;
   justify-content: flex-end;
   margin-bottom: 20px;
 }
 
-.k8s-component-status {
+.k8s-service-status {
   align-items: center;
   display: inline-flex;
   border: 1px solid;
+  border-color: var(--border);
   margin-top: 20px;
 
+  .label {
+    border-left: 1px solid var(--border);
+  }
+
   &:not(:last-child) {
     margin-right: 20px;
   }
@@ -760,10 +916,9 @@ export default {
   > I {
     text-align: center;
     padding: 5px 10px;
-    border-right: 1px solid var(--border);
   }
 
-  &.k8s-component-status-unhealthy {
+  &.unhealthy {
     border-color: var(--error-border);
 
     > I {
@@ -771,9 +926,13 @@ export default {
     }
   }
 
-  &.k8s-component-status-healthy {
-    border-color: var(--border);
+  &.warning {
+    > I {
+      color: var(--warning)
+    }
+  }
 
+  &.healthy {
     > I {
       color: var(--success)
     }

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

@@ -0,0 +1,69 @@
+import { clone } from '@shell/utils/object';
+import ClusterTools from '@shell/pages/c/_cluster/explorer/tools/index.vue';
+import { shallowMount } from '@vue/test-utils';
+import { MANAGEMENT } from '@shell/config/types';
+
+describe('page: cluster tools', () => {
+  const mountOptions = {
+    computed: {
+      options: () => [
+        {
+          chart: {
+            id:       'cluster/rancher-charts/rancher-alerting-drivers',
+            iconName: 'icon',
+          },
+          app: {}
+        }
+      ]
+    },
+    mocks: {
+      $route:      { query: {} },
+      $fetchState: {
+        pending: false, error: true, timestamp: Date.now()
+      },
+      $store: {
+        dispatch: (schema: string, opt: { type: string }) => {
+          if (schema === 'management/findAll' && opt.type === MANAGEMENT.PROJECT) {
+            return [];
+          }
+        },
+        getters: {
+          'features/get':         () => true,
+          'management/schemaFor': (schema: string) => {
+            if (schema === MANAGEMENT.PROJECT) {
+              return true;
+            }
+          },
+          currentCluster: { id: 'cluster', status: { provider: 'provider' } },
+          'i18n/t':       jest.fn(),
+        }
+      }
+    },
+  };
+
+  it('should show apps catalog', async() => {
+    const wrapper = shallowMount(ClusterTools, mountOptions);
+
+    await (ClusterTools as any).fetch.call(wrapper.vm);
+    const cards = wrapper.find('[data-testid^="cluster-tools-app"]');
+
+    expect(cards.exists()).toBe(true);
+  });
+
+  it('should show apps catalog when no permissions to `project` schema', async() => {
+    const options = clone(mountOptions);
+
+    options.mocks.$store.dispatch = (schema: string, opt: { type: string }) => {
+      if (schema === 'management/findAll' && opt.type === MANAGEMENT.PROJECT) {
+        return null;
+      }
+    };
+
+    const wrapper = shallowMount(ClusterTools, options);
+
+    await (ClusterTools as any).fetch.call(wrapper.vm);
+    const cards = wrapper.find('[data-testid^="cluster-tools-app"]');
+
+    expect(cards.exists()).toBe(true);
+  });
+});