Add am and prometheuses to overview

assets/styles/app.scss

@@ -19,6 +19,7 @@
 @import "./global/columns";
 @import "./global/button";
 @import "./global/form";
+@import "./global/gauges";
 @import "./global/labeled-input";
 @import "./global/tooltip";
 @import "./global/table";

assets/styles/global/_gauges.scss

@@ -0,0 +1,55 @@
+@media only screen and (min-width: map-get($breakpoints, "--viewport-7")) {
+  .resource-gauges {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .hardware-resource-gauges {
+    &,
+    &.live {
+      grid-template-columns: 1fr;
+    }
+  }
+}
+@media only screen and (min-width: map-get($breakpoints, "--viewport-9")) {
+  .resource-gauges {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+
+  .hardware-resource-gauges {
+    grid-template-columns: 1fr 1fr 1fr;
+
+    &.live {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+}
+@media only screen and (min-width: map-get($breakpoints, "--viewport-12")) {
+  .resource-gauges {
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+  }
+}
+
+.resource-gauges {
+  display: grid;
+  grid-column-gap: 10px;
+  grid-row-gap: 15px;
+  margin-top: 25px;
+
+  & > * {
+    width: 100%;
+  }
+}
+
+.hardware-resource-gauges {
+  display: grid;
+  grid-column-gap: 15px;
+  grid-row-gap: 20px;
+  margin-top: 30px;
+  &:first-of-type {
+    margin-top: 35px;
+  }
+
+  & > * {
+    width: 100%;
+  }
+}

config/product/monitoring.js

@@ -1,4 +1,5 @@
 import { DSL } from '@/store/type-map';
+import { MONITORING } from '@/config/types';
 
 export const NAME = 'monitoring';
 export const CHART_NAME = 'rancher-monitoring';
@@ -10,6 +11,9 @@ export function init(store) {
     mapGroup,
     virtualType
   } = DSL(store, NAME);
+  const {
+    ALERTMANAGER, PROMETHEUSE, SERVICEMONITOR, PODMONITOR, PROMETHEUSRULE
+  } = MONITORING;
 
   product({
     ifHaveGroup: /^(.*\.)?monitoring\.coreos\.com$/,
@@ -28,8 +32,10 @@ export function init(store) {
   basicType(['monitoring-overview']);
 
   basicType([
-    'monitoring.coreos.com.servicemonitor',
-    'monitoring.coreos.com.podmonitor',
-    'monitoring.coreos.com.prometheusrule',
+    ALERTMANAGER, // remove
+    PROMETHEUSE, // remove
+    SERVICEMONITOR,
+    PODMONITOR,
+    PROMETHEUSRULE,
   ]);
 }

config/types.js

@@ -73,6 +73,15 @@ export const CATALOG = {
   REPO:           'catalog.cattle.io.repo',
 };
 
+export const MONITORING = {
+  ALERTMANAGER:   'monitoring.coreos.com.alertmanager',
+  PODMONITOR:     'monitoring.coreos.com.podmonitor',
+  PROMETHEUSE:    'monitoring.coreos.com.prometheus',
+  PROMETHEUSRULE: 'monitoring.coreos.com.prometheusrule',
+  SERVICEMONITOR: 'monitoring.coreos.com.servicemonitor',
+  THANOSRULER:    'monitoring.coreos.com.thanosruler',
+};
+
 // --------------------------------------
 // 2. Only if Rancher is installed
 // --------------------------------------

pages/c/_cluster/explorer/index.vue

@@ -409,61 +409,6 @@ export default {
     align-self: center;
   }
 
-  @media only screen and (min-width: map-get($breakpoints, '--viewport-7')) {
-    .resource-gauges {
-      grid-template-columns: 1fr 1fr;
-    }
-
-    .hardware-resource-gauges {
-      &, &.live {
-        grid-template-columns: 1fr;
-      }
-    }
-  }
-  @media only screen and (min-width: map-get($breakpoints, '--viewport-9')) {
-    .resource-gauges {
-      grid-template-columns: 1fr 1fr 1fr;
-    }
-
-    .hardware-resource-gauges {
-      grid-template-columns: 1fr 1fr 1fr;
-
-      &.live {
-        grid-template-columns: 1fr 1fr;
-      }
-    }
-  }
-  @media only screen and (min-width: map-get($breakpoints, '--viewport-12')) {
-    .resource-gauges {
-      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-    }
-  }
-
-  .resource-gauges {
-    display: grid;
-    grid-column-gap: 10px;
-    grid-row-gap: 15px;
-    margin-top: 25px;
-
-    & > * {
-      width: 100%;
-    }
-  }
-
-  .hardware-resource-gauges {
-    display: grid;
-    grid-column-gap: 15px;
-    grid-row-gap: 20px;
-    margin-top: 30px;
-    &:first-of-type {
-      margin-top: 35px;
-    }
-
-    & > * {
-      width: 100%;
-    }
-  }
-
   .events {
     margin-top: 30px;
   }

pages/c/_cluster/monitoring/index.vue

@@ -1,23 +1,81 @@
 <script>
-import { NAME, CHART_NAME } from '@/config/product/monitoring';
-import InstallRedirect from '@/utils/install-redirect';
-import LazyImage from '@/components/LazyImage';
 import { mapGetters } from 'vuex';
 
+import InstallRedirect from '@/utils/install-redirect';
+
+import { NAME, CHART_NAME } from '@/config/product/monitoring';
+import { MONITORING } from '@/config/types';
+
+import LazyImage from '@/components/LazyImage';
+import ResourceGauge from '@/pages/c/_cluster/explorer/ResourceGauge';
+
 export default {
-  components: { LazyImage },
+  components: {
+    LazyImage,
+    ResourceGauge,
+  },
 
   middleware: InstallRedirect(NAME, CHART_NAME),
 
+  async fetch() {
+    // @TODO stop loading these, use counts. --v
+    const resources = [];
+
+    for ( const resource of this.resources ) {
+      const schema = this.$store.getters['cluster/schemaFor'](resource);
+
+      if (schema) {
+        resources.push(this.$store.dispatch('cluster/findAll', { type: resource }));
+      }
+    }
+
+    await Promise.all(resources);
+    // --^
+  },
+
   data() {
     return {
       externalLinks: [],
       grafanaSrc:    require('~/assets/images/white-grafana.svg'),
       prometheusSrc: require('~/assets/images/white-prometheus.svg'),
+      resources:     [MONITORING.ALERTMANAGER, MONITORING.PROMETHEUSE],
     };
   },
 
-  computed: { ...mapGetters(['currentCluster']) },
+  computed: {
+    ...mapGetters(['currentCluster']),
+
+    resourceGauges() {
+      const gauges = this.resources
+        .map((resource, i) => {
+          const schema = this.$store.getters['cluster/schemaFor'](resource);
+
+          if (!schema) {
+            return null;
+          }
+          const all = this.$store.getters['cluster/all'](resource);
+          const resourceCounts = this.createResourceCounts(all);
+          const name = this.$store.getters['type-map/labelFor'](
+            schema,
+            resourceCounts.useful
+          );
+          const location = {
+            name:   'c-cluster-monitoring-resource',
+            params: { product: NAME, resource },
+          };
+
+          return {
+            name,
+            location,
+            primaryColorVar: `--sizzle-${ i }`,
+            ...resourceCounts,
+          };
+        })
+        .filter(r => r);
+
+      return gauges;
+    },
+  },
 
   mounted() {
     this.externalLinks = [
@@ -53,6 +111,25 @@ export default {
       },
     ];
   },
+
+  methods: {
+    createResourceCounts(resources) {
+      const errorCount = resources.filter(
+        resource => resource.stateBackground === 'bg-error'
+      ).length;
+      const notSuccessCount = resources.filter(
+        resource => resource.stateBackground !== 'bg-success'
+      ).length;
+      const warningCount = notSuccessCount - errorCount;
+
+      return {
+        total:  resources.length,
+        useful: resources.length - notSuccessCount,
+        warningCount,
+        errorCount,
+      };
+    },
+  },
 };
 </script>
 
@@ -81,6 +158,13 @@ export default {
         </a>
       </div>
     </div>
+    <div class="resource-gauges">
+      <ResourceGauge
+        v-for="resourceGauge in resourceGauges"
+        :key="resourceGauge.name"
+        v-bind="resourceGauge"
+      />
+    </div>
   </section>
 </template>