More service columns

.gitignore

@@ -6,6 +6,7 @@ logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+package-lock.json
 
 # Runtime data
 pids

components/ResourceTable.vue

@@ -4,7 +4,10 @@ import { mapPref, GROUP_RESOURCES } from '@/store/prefs';
 import ButtonGroup from '@/components/ButtonGroup';
 import SortableTable from '@/components/SortableTable';
 import {
-  headersFor, NAME, NAME_UNLINKED, NAMESPACE_NAME, NAMESPACE_NAME_UNLINKED
+  headersFor,
+  NAME, NAME_UNLINKED,
+  NAMESPACE_NAME, NAMESPACE_NAME_UNLINKED,
+  NAMESPACE_NAME_IMAGE, NAME_IMAGE,
 } from '~/config/table-headers';
 
 export default {
@@ -64,6 +67,12 @@ export default {
           headers.splice(idx, 1, NAME);
         }
 
+        idx = headers.indexOf(NAMESPACE_NAME_IMAGE);
+
+        if ( idx >= 0 ) {
+          headers.splice(idx, 1, NAME_IMAGE);
+        }
+
         idx = headers.indexOf(NAMESPACE_NAME_UNLINKED);
 
         if ( idx >= 0 ) {

components/formatters/LinkDetailImage.vue

@@ -0,0 +1,31 @@
+<script>
+
+export default {
+  props: {
+    value: {
+      type:     String,
+      required: true
+    },
+    row: {
+      type:     Object,
+      required: true
+    },
+    col: {
+      type:     Object,
+      required: true
+    },
+  },
+};
+</script>
+
+<template>
+  <span>
+    <nuxt-link :to="row.detailUrl">
+      {{ value }}
+    </nuxt-link>
+    <br />
+    <span class="text-small text-muted">
+      {{ row.imageDisplay }}
+    </span>
+  </span>
+</template>

config/friendly.js

@@ -1,6 +1,6 @@
 import { CONFIG_MAP, SECRET, RIO } from '@/config/types';
 import {
-  STATE, NAME, NAMESPACE_NAME, AGE,
+  STATE, NAME, NAMESPACE_NAME, NAMESPACE_NAME_IMAGE, AGE,
   RIO_IMAGE, WEIGHT, SCALE,
   KEYS, ENDPOINTS,
   MATCHES, DESTINATION,
@@ -59,11 +59,34 @@ export const FRIENDLY = {
     type:      RIO.SERVICE,
     headers:   [
       STATE,
-      NAMESPACE_NAME,
-      RIO_IMAGE,
+      NAMESPACE_NAME_IMAGE,
       ENDPOINTS,
       WEIGHT,
       SCALE,
+      {
+        name:  'connections',
+        label: 'Conn.',
+        value: 'connections',
+        sort:  ['connections'],
+        align: 'right',
+        width: 60,
+      },
+      {
+        name:  'p95',
+        label: '95%',
+        value: 'p95Display',
+        sort:  ['p95'],
+        align: 'right',
+        width: 75,
+      },
+      {
+        name:  'network',
+        label: 'Network',
+        value: 'networkDisplay',
+        sort:  ['networkBytes'],
+        align: 'right',
+        width: 75,
+      },
       AGE,
     ],
 

config/table-headers.js

@@ -40,6 +40,22 @@ export const NAMESPACE_NAME = {
   formatter: 'LinkDetail',
 };
 
+export const NAMESPACE_NAME_IMAGE = {
+  name:      'namespace-name-image',
+  label:     'Name',
+  value:     'namespaceNameDisplay',
+  sort:      ['namespaceNameSort'],
+  formatter: 'LinkDetailImage',
+};
+
+export const NAME_IMAGE = {
+  name:      '-name-image',
+  label:     'Name',
+  value:     'nameDisplay',
+  sort:      ['nameSort'],
+  formatter: 'LinkDetailImage',
+};
+
 /*
 export const NAMESPACE = {
   name:   'namespace',
@@ -63,7 +79,7 @@ export const AGE = {
   search:     false,
   formatter:  'LiveDate',
   width:      75,
-  align:     'left'
+  align:     'right'
 };
 
 export const RIO_IMAGE = {

models/rio.cattle.io.v1.service.js

@@ -6,6 +6,8 @@ import { DATE_FORMAT, TIME_FORMAT } from '@/store/prefs';
 import { addParams } from '@/utils/url';
 import { PRIVATE } from '@/plugins/norman/resource-proxy';
 import { RIO } from '@/config/types';
+import { formatSi } from '@/utils/units';
+import { get } from '@/utils/object';
 
 const EMPTY = {};
 
@@ -452,4 +454,31 @@ export default {
       return this.goToEdit({ [ADD_SIDECAR]: _FLAGGED });
     };
   },
+
+  networkBytes() {
+    const read = get(this, 'metadata.computed.fields.readBytesPerSecond') || 0;
+    const write = get(this, 'metadata.computed.fields.writeBytesPerSecond') || 0;
+
+    return read + write;
+  },
+
+  networkDisplay() {
+    return formatSi(this.networkBytes, { suffix: 'Bps' });
+  },
+
+  p95() {
+    const out = get(this, 'metadata.computed.fields.p95') || 0;
+
+    return out;
+  },
+
+  p95Display() {
+    return `${ this.p95 }ms`;
+  },
+
+  connections() {
+    const out = get(this, 'metadata.computed.fields.openConnections') || 0;
+
+    return out;
+  },
 };

pages/rio/mesh.vue

@@ -1,4 +1,5 @@
 <script>
+import $ from 'jquery';
 import { escapeHtml } from '@/utils/string';
 
 const RADIUS = 5;
@@ -252,10 +253,10 @@ export default {
         const weight = Math.floor(4 * (edge.stats.rps - min) / (max - min)) + 1;
 
         g.setEdge(fromId(edge), toId(edge), {
-          arrowhead:      'smaller',
-          arrowheadClass: 'arrowhead',
-          class:          `weight${ weight }`,
-          curve:          this.d3.curveBasis,
+          arrowhead:       'smaller',
+          arrowheadClass:  'arrowhead',
+          class:           `weight${ weight }`,
+          curve:           this.d3.curveBasis,
           weight,
         });
       }
@@ -307,6 +308,12 @@ export default {
 
       this.loading = false;
     },
+
+    clicked(event) {
+      const path = $(event.target).closest('.edgePath');
+
+      console.log(path);
+    }
   },
 };
 </script>
@@ -316,7 +323,7 @@ export default {
       <h1>App Mesh</h1>
     </header>
 
-    <svg id="mesh" ref="mesh" />
+    <svg id="mesh" ref="mesh" @click="clicked" />
   </div>
 </template>
 
@@ -396,6 +403,10 @@ export default {
       stroke: #6c6c76;
     }
 
+    .edgePath {
+      cursor: pointer;
+    }
+
     .weight1 { stroke-width: 2px; }
     .weight2 { stroke-width: 3px; }
     .weight3 { stroke-width: 4px; }