1 files changed, 58 insertions, 25 deletions

diff --git a/kamon-status/src/components/MetricList.vue b/kamon-status/src/components/MetricList.vue
index 60f7499a..f0f4637b 100644
--- a/kamon-status/src/components/MetricList.vue
+++ b/kamon-status/src/components/MetricList.vue
@@ -2,27 +2,19 @@
   <div class="row no-gutters">
     <div class="col-12">
       <div class="search-box mb-3">
-        <input class="w-100 px-3 py-2" v-model="filterPattern" type="text" placeholder="filter">
+        <span class="search-icon"><i class="fas fa-search fa-fw fa-flip-horizontal"></i></span>
+        <input class="w-100" v-model="filterPattern" type="text">
         <span class="search-stats">{{ searchStats }}</span>
       </div>
     </div>
 
-    <div class="col-12">
-      <card v-if="matchedMetrics.length > 0">
-        <div class="row no-gutters" v-for="(metric, index) in matchedMetrics" :key="metric.search">
-          <div class="col-12 px-3 pt-2 pb-3">
-            <div class="text-uppercase text-label">{{ metric.type }}</div>
-            <h5>{{ metric.name }}</h5>
-            <div class="tag-container">
-              <span class="tag" v-for="tag in Object.keys(metric.tags)" :key="tag">
-                {{ tag }}=<span class="tag-value">{{ metric.tags[tag] }}</span>
-                </span>
-            </div>
-
-          </div>
-          <hr v-if="index < (matchedMetrics.length - 1)" class="w-100">
+    <div class="col-12" v-if="matchedMetrics.length > 0">
+      <div class="row no-gutters" v-for="(group, index) in groups" :key="group.name">
+        <div class="col-12">
+          <metric-list-item :group="group"/>
         </div>
-      </card>
+        <hr v-if="index < (groups.length - 1)" class="w-100">
+      </div>
     </div>
   </div>
 </template>
@@ -31,30 +23,55 @@
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import {Metric} from '../api/StatusApi'
 import Card from './Card.vue'
-
+import MetricListItem, {MetricGroup} from './MetricListItem.vue'
+import StatusCard from './StatusCard.vue'
+import _ from 'underscore'
 
 @Component({
   components: {
-    card: Card
+    'card': Card,
+    'status-card': StatusCard,
+    'metric-list-item': MetricListItem
   }
 })
 export default class MetricList extends Vue {
-  @Prop() private metrics!: Metric[]
+  @Prop( { default: [] }) private metrics!: Metric[]
   private filterPattern: string = ''
 
   get totalMetrics(): number {
     return this.metrics.length
   }
 
+  get groups(): MetricGroup[] {
+    const gropedByName = _.groupBy(this.matchedMetrics, m => m.name)
+    const metricGroups: MetricGroup[] = []
+
+    Object.keys(gropedByName).forEach(metricName => {
+      const metrics = gropedByName[metricName]
+
+      // All metrics with the same name must have the same unit (constrained in Kamon) so
+      // we can safely assume the first unit is the same for all.
+      metricGroups.push({
+        name: metricName,
+        type: metrics[0].type,
+        unitDimension: metrics[0].unitDimension,
+        unitMagnitude: metrics[0].unitMagnitude,
+        metrics
+      })
+    })
+
+    return _.sortBy(metricGroups, mg => mg.metrics.length).reverse()
+  }
+
   get filterRegex(): RegExp {
     return new RegExp(this.filterPattern)
   }
 
   get searchStats(): string {
     if (this.filterPattern.length > 0) {
-      return this.matchedMetrics.length + ' matched'
+      return 'showing ' + this.matchedMetrics.length + ' out of ' + this.totalMetrics + ' series'
     } else {
-      return this.totalMetrics + ' metrics'
+      return this.totalMetrics + ' series'
     }
   }
 
@@ -68,14 +85,19 @@ export default class MetricList extends Vue {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 .search-box {
   input {
     color: #676767;
-    height: 2.5rem;
+    caret-color: #676767;
+    height: 3rem;
     border: none;
-    border-radius: 0.3rem;
+    border-radius: 0.4rem;
     background-color: #efefef;
+    padding-left: 3.5rem;
+    font-size: 1.1rem;
+    box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.1);
+
 
     &:focus {
       outline: none;
@@ -86,11 +108,22 @@ export default class MetricList extends Vue {
     color: #929292;
   }
 
+  .search-icon {
+    color: #c0c0c0;
+    line-height: 3rem;
+    font-size: 1.4rem;
+    position: absolute;
+    left: 1rem;
+  }
+
   .search-stats {
+    color: #a2a2a2;
+    font-size: 1.1rem;
     position: absolute;
-    line-height: 2.5rem;
+    line-height: 3rem;
     right: 0;
     padding-right: 1rem;
   }
 }
+
 </style>