Fleet list views

assets/translations/en-us.yaml

@@ -1081,7 +1081,7 @@ tableHeaders:
   namespaceNameUnlinked: Name
   node: Node
   nodeName: Name
-  nodesReady: Clusters
+  nodesReady: Nodes
   object: Object
   output: Output
   p95: 95%tile

config/product/explorer.js

@@ -36,7 +36,7 @@ export function init(store) {
     icon:                'compass'
   });
 
-  basicType(['cluster-overview', HELM_RELEASE]);
+  basicType(['cluster-dashboard', HELM_RELEASE]);
   basicType([
     NAMESPACE,
     NODE,
@@ -163,10 +163,10 @@ export function init(store) {
   // ]);
 
   virtualType({
-    label:       'Overview',
+    label:       'Cluster Dashboard',
     group:      'Root',
     namespaced:  false,
-    name:        'cluster-overview',
+    name:        'cluster-dashboard',
     weight:      100,
     route:       { name: 'c-cluster-explorer' },
     exact:       true,

detail/management.cattle.io.fleetworkspace.vue

@@ -0,0 +1,45 @@
+<script>
+import CountBox from '@/components/CountBox';
+import { FLEET } from '@/config/types';
+
+export default {
+  name: 'DetailWorkspace',
+
+  components: { CountBox },
+
+  props: {
+    value: {
+      type:     Object,
+      required: true,
+    },
+  },
+
+  computed: {
+    clustersLabel() {
+      return this.t(`typeLabel."${ FLEET.CLUSTER }"`, { count: this.value.counts.cluster });
+    },
+    clusterGroupsLabel() {
+      return this.t(`typeLabel."${ FLEET.CLUSTER_GROUP }"`, { count: this.value.counts.clusterGroup });
+    },
+    gitRepoLabel() {
+      return this.t(`typeLabel."${ FLEET.GIT_REPO }"`, { count: this.value.counts.gitRepo });
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <div class="row">
+      <div class="col span-4">
+        <CountBox :count="value.counts.gitRepos" :name="gitRepoLabel" :primary-color-var="'--sizzle-3'" />
+      </div>
+      <div class="col span-4">
+        <CountBox :count="value.counts.clusters" :name="clustersLabel" :primary-color-var="'--sizzle-1'" />
+      </div>
+      <div class="col span-4">
+        <CountBox :count="value.counts.clusterGroups" :name="clusterGroupsLabel" :primary-color-var="'--sizzle-2'" />
+      </div>
+    </div>
+  </div>
+</template>

list/fleet.cattle.io.clustergroup.vue

@@ -0,0 +1,130 @@
+<script>
+import SortableTable from '@/components/SortableTable';
+import ButtonGroup from '@/components/ButtonGroup';
+import { get } from '@/utils/object';
+import { mapPref, GROUP_RESOURCES } from '@/store/prefs';
+
+import {
+  AGE,
+  STATE,
+  NAME,
+  WORKSPACE
+} from '@/config/table-headers';
+import { removeObject } from '@/utils/array';
+
+export default {
+  name:       'ListClusterGroup',
+  components: { SortableTable, ButtonGroup },
+
+  props: {
+    schema: {
+      type:     Object,
+      required: true,
+    },
+
+    rows: {
+      type:     Array,
+      required: true,
+    },
+  },
+
+  computed: {
+    headers() {
+      const out = [
+        STATE,
+        NAME,
+        WORKSPACE,
+        {
+          name:     'clusters',
+          labelKey: 'tableHeaders.clusters',
+          value:    'status.display.readyClusters',
+          sort:     'status.display.readyClusters',
+          search:   ['status.nonReadyClusterCount', 'status.clusterCount'],
+        },
+        // {
+        //   name:     'gitRepos',
+        //   labelKey: 'tableHeaders.gitRepos',
+        //   value:    'status.display.readyBundles',
+        //   sort:     'status.display.readyBundles',
+        //   search:   ['status.summary.ready','status.summary.desiredReady'],
+        // },
+        {
+          name:      'ready',
+          labelKey:  'tableHeaders.summary',
+          value:     'status.summary',
+          sort:      false,
+          search:    false,
+          formatter: 'FleetSummary',
+          width:     100,
+        },
+        AGE
+      ];
+
+      if ( this.groupBy || !this.groupable ) {
+        removeObject(out, WORKSPACE);
+      }
+
+      return out;
+    },
+
+    group: mapPref(GROUP_RESOURCES),
+
+    groupable() {
+      return true;
+    },
+
+    groupBy() {
+      // The value of the preference is "namespace" but we take that to mean group by workspace here...
+      if ( this.groupable && this.group === 'namespace') {
+        return 'groupByLabel';
+      }
+
+      return null;
+    },
+
+    groupOptions() {
+      return [
+        { value: 'none', icon: 'icon-list-flat' },
+        { value: 'namespace', icon: 'icon-list-grouped' }
+      ];
+    },
+
+    pagingParams() {
+      return {
+        singularLabel: this.$store.getters['type-map/labelFor'](this.schema),
+        pluralLabel:   this.$store.getters['type-map/labelFor'](this.schema, 99),
+      };
+    },
+  },
+
+  methods: { get },
+};
+</script>
+
+<template>
+  <SortableTable
+    v-bind="$attrs"
+    :headers="headers"
+    :rows="rows"
+    :group-by="groupBy"
+    :paging="true"
+    paging-label="sortableTable.paging.resource"
+    :paging-params="pagingParams"
+    key-field="_key"
+    v-on="$listeners"
+  >
+    <template v-if="groupable" #header-middle>
+      <slot name="more-header-middle" />
+      <ButtonGroup v-model="group" :options="groupOptions" />
+    </template>
+
+    <template #cell:clusters="{row}">
+      <span v-if="row.status.nonReadyClusterCount" class="text-warning">{{ row.status.clusterCount - row.status.nonReadyClusterCount }}/{{ row.status.clusterCount }}</span>
+      <span v-else>{{ row.status.clusterCount }}</span>
+    </template>
+
+    <template #group-by="{group: thisGroup}">
+      <div class="group-tab" v-html="thisGroup.ref" />
+    </template>
+  </SortableTable>
+</template>

models/fleet.cattle.io.clustergroup.js

@@ -1,3 +1,5 @@
+import { escapeHtml } from '@/utils/string';
+
 export default {
   applyDefaults() {
     return () => {
@@ -9,4 +11,14 @@ export default {
       spec.selector.matchExpressions = spec.selector.matchExpressions || [];
     };
   },
+
+  groupByLabel() {
+    const name = this.metadata.namespace;
+
+    if ( name ) {
+      return this.$rootGetters['i18n/t']('resourceTable.groupLabel.workspace', { name: escapeHtml(name) });
+    } else {
+      return this.$rootGetters['i18n/t']('resourceTable.groupLabel.notInAWorkspace');
+    }
+  },
 };