Fleet list & details

harvester · Sep 30, 2020 · 08e4511 · 08e4511
1 parent 820e891
commit 08e4511
Show file tree

Hide file tree

Showing 28 changed files with 371 additions and 590 deletions.
diff --git a/.ackrc b/.ackrc
@@ -2,9 +2,12 @@
 --ignore-dir=.vscode
 --ignore-dir=.nuxt
 --ignore-dir=.nuxt-prod
+--ignore-dir=.nyc_output
 --ignore-dir=coverage
 --ignore-dir=dist
 --ignore-dir=node_modules
 --ignore-dir=tmp
 --ignore-dir=vendor
 --ignore-file=is:yarn.lock
+--ignore-file=is:selection.json
+--ignore-file=ext:svg
diff --git a/assets/translations/en-us.yaml b/assets/translations/en-us.yaml
@@ -1089,6 +1089,7 @@ tableHeaders:
   clusterFlow: Cluster Flow
   clusterOutput: Cluster Output
   clusters: Clusters
+  clustersReady: Clusters Ready
   clusterGroups: Cluster Groups
   commit: Commit
   condition: Condition
@@ -1123,7 +1124,7 @@ tableHeaders:
   namespaceNameUnlinked: Name
   node: Node
   nodeName: Name
-  nodesReady: Nodes
+  nodesReady: Nodes Ready
   object: Object
   output: Output
   p95: 95%tile
@@ -1141,6 +1142,7 @@ tableHeaders:
   ready: Ready
   reason: Reason
   repo: Repo
+  reposReady: Repos Ready
   replicas: Replicas
   reqRate: Req Rate
   resource: Resource

diff --git a/components/FleetClusters.vue b/components/FleetClusters.vue
@@ -1,36 +1,19 @@
 <script>
-import ButtonGroup from '@/components/ButtonGroup';
-import SortableTable from '@/components/SortableTable';
-import { removeObject } from '@/utils/array';
-import { STATE, NAME, AGE } from '@/config/table-headers';
+import ResourceTable from '@/components/ResourceTable';
+import { STATE, NAME, AGE, FLEET_SUMMARY } from '@/config/table-headers';
 import { FLEET, MANAGEMENT } from '@/config/types';
 
 export default {
-  components: { ButtonGroup, SortableTable },
+  components: { ResourceTable },
 
   props: {
     rows: {
       type:     Array,
       required: true,
     },
 
-    groupable: {
-      type:    Boolean,
-      default: false,
-    },
-
-    group: {
-      type:    String,
-      default: null,
-    },
-
-    groupBy: {
-      type:    String,
-      default: null,
-    },
-
-    groupOptions: {
-      type:    Array,
+    schema: {
+      type:    Object,
       default: null,
     },
   },
@@ -41,31 +24,24 @@ export default {
     },
 
     headers() {
-      const workspace = {
-        name:  'workspace',
-        label: 'Workspace',
-        value: 'metadata.namespace',
-        sort:  ['metadata.namespace', 'nameSort'],
-      };
-
       const out = [
         STATE,
         NAME,
-        workspace,
         {
-          name:      'bundlesReady',
-          labelKey:  'tableHeaders.bundlesReady',
+          name:      'nodesReady',
+          labelKey:  'tableHeaders.nodesReady',
           value:     'status.display.readyBundles',
           sort:      'status.summary.ready',
           search:    false,
         },
         {
-          name:      'nodesReady',
-          labelKey:  'tableHeaders.nodesReady',
+          name:      'reposReady',
+          labelKey:  'tableHeaders.reposReady',
           value:     'status.display.readyBundles',
           sort:      'status.summary.ready',
           search:    false,
         },
+        FLEET_SUMMARY,
         {
           name:          'lastSeen',
           labelKey:      'tableHeaders.lastSeen',
@@ -80,10 +56,6 @@ export default {
         AGE,
       ];
 
-      if ( this.groupBy || !this.groupable ) {
-        removeObject(out, workspace);
-      }
-
       return out;
     },
 
@@ -101,39 +73,29 @@ export default {
 </script>
 
 <template>
-  <SortableTable
+  <ResourceTable
     v-bind="$attrs"
+    :schema="schema"
     :headers="headers"
     :rows="rows"
-    :group-by="groupBy"
-    :paging-params="pagingParams"
     key-field="_key"
     v-on="$listeners"
   >
-    <template v-if="groupable" #header-middle>
-      <slot name="more-header-middle" />
-      <ButtonGroup :value="group" :options="groupOptions" @input="$emit('set-group', $event)" />
-    </template>
-
-    <template #group-by="{group: thisGroup}">
-      <div class="group-tab" v-html="thisGroup.ref" />
-    </template>
-
     <template #cell:workspace="{row}">
       <span v-if="row.type !== MANAGEMENT_CLUSTER && row.metadata.namespace">{{ row.metadata.namespace }}</span>
       <span v-else class="text-muted">&mdash;</span>
     </template>
 
-    <template #cell:bundlesReady="{row}">
-      <span v-if="!row.bundleInfo" class="text-muted">&mdash;</span>
-      <span v-else-if="row.bundleInfo.unready" class="text-warning">{{ row.bundleInfo.ready }}/{{ row.bundleInfo.total }}</span>
-      <span v-else>{{ row.bundleInfo.total }}</span>
+    <template #cell:reposReady="{row}">
+      <span v-if="!row.repoInfo" class="text-muted">&mdash;</span>
+      <span v-else-if="row.repoInfo.unready" class="text-warning">{{ row.repoInfo.ready }}/{{ row.repoInfo.total }}</span>
+      <span v-else>{{ row.repoInfo.total }}</span>
     </template>
 
     <template #cell:nodesReady="{row}">
       <span v-if="!row.nodeInfo" class="text-muted">&mdash;</span>
       <span v-else-if="row.nodeInfo.unready" class="text-warning">{{ row.nodeInfo.ready }}/{{ row.nodeInfo.total }}</span>
       <span v-else :class="{'text-error': !row.nodeInfo.total}">{{ row.nodeInfo.total }}</span>
     </template>
-  </SortableTable>
+  </ResourceTable>
 </template>
diff --git a/components/FleetRepos.vue b/components/FleetRepos.vue
@@ -1,46 +1,29 @@
 <script>
-import ButtonGroup from '@/components/ButtonGroup';
-import SortableTable from '@/components/SortableTable';
-import { removeObject } from '@/utils/array';
-import { FLEET } from '@/config/types';
-import Shortened from '@/components/formatter/Shortened';
+import ResourceTable from '@/components/ResourceTable';
 import Link from '@/components/formatter/Link';
+import Shortened from '@/components/formatter/Shortened';
+
 import {
   AGE,
   STATE,
   NAME,
-  WORKSPACE
+  FLEET_SUMMARY
 } from '@/config/table-headers';
 
 export default {
+
   components: {
-    ButtonGroup, SortableTable, Shortened, Link
+    ResourceTable, Link, Shortened
   },
-
   props: {
     rows: {
       type:     Array,
       required: true,
     },
 
-    groupable: {
-      type:    Boolean,
-      default: false,
-    },
-
-    group: {
-      type:    String,
-      default: null,
-    },
-
-    groupBy: {
-      type:    String,
-      default: null,
-    },
-
-    groupOptions: {
-      type:    Array,
-      default: null,
+    schema: {
+      type:     Object,
+      required: true,
     },
   },
 
@@ -49,7 +32,6 @@ export default {
       const out = [
         STATE,
         NAME,
-        WORKSPACE,
         {
           name:     'repo',
           labelKey: 'tableHeaders.repo',
@@ -64,56 +46,31 @@ export default {
           sort:     ['targetInfo.modeDisplay', 'targetInfo.cluster', 'targetInfo.clusterGroup'],
         },
         {
-          name:      'ready',
-          labelKey:  'tableHeaders.summary',
-          value:     'status.summary',
-          sort:      false,
+          name:      'clustersReady',
+          labelKey:  'tableHeaders.clustersReady',
+          value:     'status.readyClusters',
+          sort:      'status.readyClusters',
           search:    false,
-          formatter: 'FleetSummary',
-          width:     100,
         },
+        FLEET_SUMMARY,
         AGE
       ];
 
-      if ( this.groupBy || !this.groupable ) {
-        removeObject(out, WORKSPACE);
-      }
-
       return out;
     },
-
-    pagingParams() {
-      const inStore = this.$store.getters['currentProduct'].inStore;
-      const schema = this.$store.getters[`${ inStore }/schemaFor`](FLEET.CLUSTER);
-
-      return {
-        singularLabel: this.$store.getters['type-map/labelFor'](schema),
-        pluralLabel:   this.$store.getters['type-map/labelFor'](schema, 99),
-      };
-    },
-  }
+  },
 };
 </script>
 
 <template>
-  <SortableTable
+  <ResourceTable
     v-bind="$attrs"
+    :schema="schema"
     :headers="headers"
     :rows="rows"
-    :group-by="groupBy"
-    :paging-params="pagingParams"
     key-field="_key"
     v-on="$listeners"
   >
-    <template v-if="groupable" #header-middle>
-      <slot name="more-header-middle" />
-      <ButtonGroup :value="group" :options="groupOptions" @input="$emit('set-group', $event)" />
-    </template>
-
-    <template #group-by="{group: thisGroup}">
-      <div class="group-tab" v-html="thisGroup.ref" />
-    </template>
-
     <template #cell:repo="{row}">
       <Link
         :row="row"
@@ -123,12 +80,20 @@ export default {
         url-key="spec.repo"
       />
       <template v-if="row.commitDisplay">
-        @ <Shortened long-value-key="status.commit" :row="row" :value="row.commitDisplay" />
+        <div class="text-muted">
+          <Shortened long-value-key="status.commit" :row="row" :value="row.commitDisplay" />
+        </div>
       </template>
     </template>
 
+    <template #cell:clustersReady="{row}">
+      <span v-if="!row.clusterInfo" class="text-muted">&mdash;</span>
+      <span v-else-if="row.clusterInfo.unready" class="text-warning">{{ row.clusterInfo.ready }}/{{ row.clusterInfo.total }}</span>
+      <span v-else>{{ row.clusterInfo.total }}</span>
+    </template>
+
     <template #cell:target="{row}">
       {{ row.targetInfo.modeDisplay }}
     </template>
-  </SortableTable>
+  </ResourceTable>
 </template>
diff --git a/components/FleetResources.vue b/components/FleetResources.vue
@@ -42,6 +42,7 @@ export default {
           out.push({
             key:             `${ r.id }-${ c.id }-${ r.type }-${ r.namespace }-${ r.name }`,
             kind:            r.kind,
+            apiVersion:      r.apiVersion,
             type:            r.type,
             id:              r.id,
             namespace:       r.namespace,
@@ -76,17 +77,29 @@ export default {
           sort:  ['clusterName', 'stateSort'],
           label: 'Cluster',
         },
+        {
+          name:  'apiVersion',
+          value: 'apiVersion',
+          sort:  'apiVersion',
+          label: 'API Version',
+        },
         {
           name:  'kind',
           value: 'kind',
           sort:  'kind',
           label: 'Kind',
         },
         {
-          name:  'resource',
-          value: 'namespacedName',
-          sort:  'namespacedName',
-          label: 'Resource',
+          name:  'name',
+          value: 'name',
+          sort:  'name',
+          label: 'Name',
+        },
+        {
+          name:  'namespace',
+          value: 'namespace',
+          sort:  'namespace',
+          label: 'Namespace',
         },
       ];
     },

diff --git a/components/SortableTable/index.vue b/components/SortableTable/index.vue
@@ -556,7 +556,7 @@ export default {
                     :class="{['col-'+dasherize(col.formatter||'')]: !!col.formatter}"
                     :width="col.width"
                   >
-                    <slot :name="'cell:' + col.name" :row="row" :col="col">
+                    <slot :name="'cell:' + col.name" :row="row" :col="col" :value="valueFor(row,col)">
                       <component
                         :is="col.formatter"
                         v-if="col.formatter"