Merge branch 'master' into ApplicationsUpdate

Author: gregpalace

app/assets/chronos-v4.png

@@ -1,4 +1,6 @@
 import React, { useContext } from 'react';
+
+import moment from 'moment';
 import { DockerContext } from '../context/DockerContext';
 
 interface IContainer {
@@ -39,12 +41,11 @@ const DockerStatsChart = () => {
 
   // Render the component if there is available data
   return containerid ? (
-    <div id="chart">
-      <header id="docker-stats-chart-header">Docker Container Stats</header>
+    <div className="chart docker-chart">
+      <h2>Docker Container Stats</h2>
       <span>Container Name: {containername}</span>
-      <span>Container ID: {containerid}</span>
       <span>Platform: {platform}</span>
-      <span>Start time: {starttime}</span>
+      <span>Start time: {moment(starttime).format('LLL')}</span>
       <span>Memory Usage: {(memoryusage / 1000000).toFixed(2)}</span>
       <span>Memory Limit: {(memorylimit / 1000000).toFixed(2)}</span>
       <span>Memory Percent: {memorypercent.toFixed(2)}%</span>

app/charts/DockerChart.tsx

@@ -32,7 +32,7 @@ const LatencyChart = () => {
           font: {
             color: 'black',
             size: 15,
-            family: 'Nunito, san serif',
+            family: 'Nunito sans, sans serif',
           },
           paper_bgcolor: 'white',
           plot_bgcolor: 'white',

app/charts/LatencyChart.tsx

@@ -44,7 +44,7 @@ const MemoryChart = () => {
           font: {
             color: 'black',
             size: 15,
-            family: 'Nunito, san serif',
+            family: 'Nunito sans, sans serif',
           },
           paper_bgcolor: 'white',
           plot_bgcolor: 'white',

app/charts/MemoryChart.tsx

@@ -50,7 +50,7 @@ const ProcessesChart = () => {
           font: {
             color: 'black',
             size: 15,
-            family: 'Nunito, san serif',
+            family: 'Nunito sans, sans serif',
           },
           paper_bgcolor: 'white',
           plot_bgcolor: 'white',

app/charts/ProcessesChart.tsx

@@ -60,7 +60,7 @@ const RequestTypesChart: React.FC = () => {
           font: {
             color: 'black',
             size: 15,
-            family: 'Nunito, san serif',
+            family: 'Nunito sans, sans serif',
           },
           paper_bgcolor: 'white',
           legend: {

app/charts/RequestTypesChart.tsx

@@ -77,7 +77,7 @@ const ResponseCodesChart: React.FC = () => {
           font: {
             color: 'black',
             size: 15,
-            family: 'Nunito, san serif',
+            family: 'Nunito sans, sans serif',
           },
           paper_bgcolor: 'white',
           legend: {

app/charts/ResponseCodesChart.tsx

@@ -40,7 +40,7 @@ const SpeedChart = () => {
           font: {
             color: 'black',
             size: 14,
-            family: 'Nunito, san serif',
+            family: 'Nunito sans, sans serif',
           },
           xaxis: {
             title: 'Time (PST)',

app/charts/SpeedChart.tsx

@@ -44,7 +44,7 @@ const TemperatureChart = () => {
           font: {
             color: 'black',
             size: 15,
-            family: 'Nunito, san serif',
+            family: 'Nunito sans, sans serif',
           },
           paper_bgcolor: 'white',
           plot_bgcolor: 'white',

app/charts/TemperatureChart.tsx

@@ -95,13 +95,13 @@ const TrafficChart = () => {
           },
         ]}
         layout={{
-          title: 'Microservice Traffic',
+          title: 'Server Traffic',
           height: 400,
           width: 400,
           font: {
             color: 'black',
             size: 15,
-            family: 'Nunito, san serif',
+            family: 'Nunito sans, sans serif',
           },
           paper_bgcolor: 'white',
           plot_bgcolor: 'white',