UI/total client usage (#13359)

* blah

* setup

* clean up

* rename history to dashboard

* clean up

ui/app/components/clients/history.js → ui/app/components/clients/dashboard.js

@@ -3,7 +3,7 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { format } from 'date-fns';
 
-export default class HistoryComponent extends Component {
+export default class Dashboard extends Component {
   max_namespaces = 10;
 
   @tracked selectedNamespace = null;

ui/app/components/clients/total-client-usage.js

@@ -0,0 +1,73 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { select } from 'd3-selection';
+import { scaleLinear, scaleBand } from 'd3-scale';
+import { stack } from 'd3-shape';
+
+/**
+ * ARG TODO fill out
+ * @module TotalClientUsage
+ * TotalClientUsage components are used to...
+ *
+ * @example
+ * ```js
+ * <TotalClientUsage @requiredParam={requiredParam} @optionalParam={optionalParam} @param1={{param1}}/>
+ * ```
+ * @param {object} requiredParam - requiredParam is...
+ * @param {string} [optionalParam] - optionalParam is...
+ * @param {string} [param1=defaultValue] - param1 is...
+ */
+
+// ARG TODO pull in data
+const DATA = [
+  { month: 'January', directEntities: 500, nonDirectTokens: 22 },
+  { month: 'February', directEntities: 150, nonDirectTokens: 22 },
+  { month: 'March', directEntities: 155, nonDirectTokens: 25 },
+  { month: 'April', directEntities: 155, nonDirectTokens: 229 },
+  { month: 'May', directEntities: 156, nonDirectTokens: 24 },
+  { month: 'June', directEntities: 157, nonDirectTokens: 42 },
+  { month: 'July', directEntities: 158, nonDirectTokens: 12 },
+  { month: 'August', directEntities: 161, nonDirectTokens: 1 },
+  { month: 'September', directEntities: 190, nonDirectTokens: 222 },
+  { month: 'October', directEntities: 250, nonDirectTokens: 66 },
+  { month: 'November', directEntities: 300, nonDirectTokens: 32 },
+  { month: 'December', directEntities: 600, nonDirectTokens: 202 },
+];
+
+// COLOR THEME:
+const BAR_COLOR_DEFAULT = ['#1563FF', '#8AB1FF'];
+
+export default class TotalClientUsage extends Component {
+  @action
+  registerListener(element) {
+    let stackFunction = stack().keys(['directEntities', 'nonDirectTokens']);
+    let stackedData = stackFunction(DATA);
+    let yScale = scaleLinear()
+      .domain([0, 802]) // TODO calculate high of total combined
+      .range([100, 0]);
+    let xScale = scaleBand()
+      .domain(DATA.map(month => month.month))
+      .range([0, 100])
+      .paddingInner(0.85);
+    let chartSvg = select(element);
+    chartSvg.attr('width', '100%');
+    chartSvg.attr('height', '100%');
+
+    let groups = chartSvg
+      .selectAll('g')
+      .data(stackedData)
+      .enter()
+      .append('g')
+      .style('fill', (d, i) => BAR_COLOR_DEFAULT[i]);
+
+    groups
+      .selectAll('rect')
+      .data(stackedData => stackedData)
+      .enter()
+      .append('rect')
+      .attr('width', `${xScale.bandwidth()}%`)
+      .attr('height', data => `${100 - yScale(data[1])}%`)
+      .attr('x', data => `${xScale(data.data.month)}%`)
+      .attr('y', data => `${yScale(data[0]) + yScale(data[1]) - 100}%`);
+  }
+}

ui/app/routes/vault/cluster/clients/index.js

@@ -1,32 +1,12 @@
 import Route from '@ember/routing/route';
 import ClusterRoute from 'vault/mixins/cluster-route';
 import { hash } from 'rsvp';
-import { getTime } from 'date-fns';
-import { parseDateString } from 'vault/helpers/parse-date-string';
 
 const getActivityParams = ({ tab, start, end }) => {
   // Expects MM-yyyy format
   // TODO: minStart, maxEnd
   let params = {};
-  if (tab === 'current') {
-    params.tab = tab;
-  } else if (tab === 'history') {
-    if (start) {
-      let startDate = parseDateString(start);
-      if (startDate) {
-        // TODO: Replace with formatRFC3339 when date-fns is updated
-        // converts to milliseconds, divide by 1000 to get epoch
-        params.start_time = getTime(startDate) / 1000;
-      }
-    }
-    if (end) {
-      let endDate = parseDateString(end);
-      if (endDate) {
-        // TODO: Replace with formatRFC3339 when date-fns is updated
-        params.end_time = getTime(endDate) / 1000;
-      }
-    }
-  }
+  params.tab = tab;
   return params;
 };
 

ui/app/styles/core.scss

@@ -23,6 +23,7 @@
 @import './core/buttons';
 @import './core/footer';
 @import './core/forms';
+@import './core/charts';
 @import './core/helpers';
 @import './core/hero';
 @import './core/level';
@@ -45,7 +46,7 @@
 @import './components/auth-buttons';
 @import './components/auth-form';
 @import './components/b64-toggle';
-@import './components/bar-chart';
+
 @import './components/box-label';
 @import './components/box-radio';
 @import './components/codemirror';

ui/app/styles/core/charts.scss

@@ -0,0 +1,79 @@
+.chart-wrapper {
+  border: $light-border;
+  border-radius: $radius-large;
+  padding: $spacing-l $spacing-l $spacing-s $spacing-l;
+  height: 380px;
+  width: 100%;
+
+  display: grid;
+  grid-template-columns: 1.5fr 1fr 1fr 1fr;
+  grid-template-rows: repeat(5, 1fr);
+
+  // ARG TODO we can manage this using css grid
+  // > div.is-border {
+  //   border: 0.3px solid $ui-gray-200;
+  //   margin-bottom: $spacing-xxs;
+  // }
+}
+
+.chart-header {
+  grid-column-start: 1;
+  grid-column-end: span col4-end;
+  grid-row-start: 1;
+
+  .chart-title {
+    font-size: $size-5;
+    font-weight: $font-weight-bold;
+    line-height: normal;
+  }
+  .chart-description {
+    font-size: $size-8;
+    font-weight: $font-weight-normal;
+    color: $ui-gray-700;
+    margin-bottom: $spacing-xs;
+  }
+}
+
+.data-description {
+  grid-column-start: 1;
+  grid-row-start: 2;
+}
+
+.data-one {
+  grid-column-start: 1;
+  grid-row-start: 3;
+}
+
+.data-two {
+  grid-column-start: 1;
+  grid-row-start: 4;
+}
+
+.chart-container {
+  grid-column-start: 2;
+  grid-column-end: span col4-end;
+  grid-row-start: 2;
+  grid-row-end: span 3;
+
+  padding: $spacing-m 0;
+}
+
+.chart {
+  .tick > text {
+    font-weight: $font-weight-semibold;
+    font-size: $size-8;
+  }
+}
+
+.legend-container {
+  grid-column-start: 2;
+  grid-column-end: span col4-end;
+  grid-row-start: 5;
+  justify-self: center;
+  align-self: center;
+}
+
+.legend {
+  width: 100%;
+  height: 100%;
+}