[Web Portal] Refine home page

src/webportal/package.json

@@ -32,15 +32,15 @@
     "babel-plugin-lodash": "^3.3.4",
     "blueimp-file-upload": "~9.22.1",
     "bootstrap": "~3.4.0",
-    "chart.js": "^2.8.0",
-    "chartjs-plugin-datalabels": "^0.6.0",
+    "c3": "^0.7.2",
     "classnames": "^2.2.6",
     "compression": "~1.7.1",
     "cookie-parser": "~1.4.3",
     "copy-webpack-plugin": "~5.0.1",
     "core-js": "^3.0.1",
     "css-loader": "^2.1.1",
     "cssnano": "^4.1.10",
+    "d3": "^5.9.7",
     "datatables.net-buttons-bs": "^1.5.4",
     "datatables.net-plugins": "~1.10.15",
     "datatables.net-responsive-bs": "^2.2.3",
@@ -80,7 +80,6 @@
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "prop-types": "^15.7.2",
-    "randomcolor": "^0.5.4",
     "raw-loader": "~0.5.1",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",

src/webportal/src/app/home/home.jsx

@@ -31,6 +31,7 @@ import VirtualClusterList from './home/virtual-cluster-list';
 import GpuChart from './home/gpu-chart';
 import {listJobs, getUserInfo, listVirtualClusters, getAvailableGpuPerNode, UnauthorizedError} from './home/conn';
 import RecentJobList from './home/recent-job-list';
+import {BREAKPOINT1} from './home/util';
 import {SpinnerLoading} from '../components/loading';
 import {initTheme} from '../components/theme';
 import {userLogout} from '../user/user-logout/user-logout.component.js';
@@ -74,18 +75,16 @@ const Home = () => {
   } else {
     const {spacing} = getTheme();
 
-    const breakpoint = '1400px';
-
     const ResponsiveFlexBox = styled.div`
-      @media screen and (min-width: ${breakpoint}) {
+      @media screen and (min-width: ${BREAKPOINT1}px) {
         display:flex;
       }
     `;
 
     const ResponsiveGap = styled.div`
       height: 0;
       width: ${spacing.l2};
-      @media screen and (max-width: ${breakpoint}) {
+      @media screen and (max-width: ${BREAKPOINT1}px) {
         height: ${spacing.l2};
         width: 0;
       }
@@ -94,23 +93,26 @@ const Home = () => {
     const ResponsiveItem = styled.div`
       width: 33%;
       height: auto;
-      @media screen and (max-width: ${breakpoint}) {
+      @media screen and (max-width: ${BREAKPOINT1}px) {
         width: 100%;
         height: 320px;
       }
     `;
 
     return (
       <Stack
-        styles={{root: [t.w100, t.h100L]}}
+        styles={{root: [t.w100, t.h100L, {minWidth: 500}]}}
         padding='l2'
         gap='l2'
       >
         {/* top */}
         <Stack.Item>
           <ResponsiveFlexBox>
             <ResponsiveItem>
-              <JobStatus jobs={jobs} />
+              <JobStatus
+                style={{height: '100%'}}
+                jobs={jobs}
+              />
             </ResponsiveItem>
             <ResponsiveGap />
             <ResponsiveItem>
@@ -125,6 +127,7 @@ const Home = () => {
               <GpuChart
                 style={{height: '100%'}}
                 gpuPerNode={gpuPerNode}
+                userInfo={userInfo}
                 virtualClusters={virtualClusters}
               />
             </ResponsiveItem>

src/webportal/src/app/home/home/c3.scss

@@ -0,0 +1,244 @@
+:global {
+  /*-- Chart --*/
+  .c3 svg {
+    font: 12px sans-serif;
+    line-height: 1.4;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
+  .c3 path, .c3 line {
+    fill: none;
+    stroke: #000;
+  }
+
+  .c3 text {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+  }
+
+  .c3-legend-item-tile,
+  .c3-xgrid-focus,
+  .c3-ygrid,
+  .c3-event-rect,
+  .c3-bars path {
+    shape-rendering: crispEdges;
+  }
+
+  .c3-chart-arc path {
+    stroke: #fff;
+  }
+
+  .c3-chart-arc rect {
+    stroke: white;
+    stroke-width: 1;
+  }
+
+  .c3-chart-arc text {
+    fill: #fff;
+    font-size: 13px;
+  }
+
+  /*-- Axis --*/
+  /*-- Grid --*/
+  .c3-grid line {
+    stroke: #aaa;
+  }
+
+  .c3-grid text {
+    fill: #aaa;
+  }
+
+  .c3-xgrid, .c3-ygrid {
+    stroke-dasharray: 3 3;
+  }
+
+  /*-- Text on Chart --*/
+  .c3-text.c3-empty {
+    fill: #808080;
+    font-size: 2em;
+  }
+
+  /*-- Line --*/
+  .c3-line {
+    stroke-width: 1px;
+  }
+
+  /*-- Point --*/
+  .c3-circle._expanded_ {
+    stroke-width: 1px;
+    stroke: white;
+  }
+
+  .c3-selected-circle {
+    fill: white;
+    stroke-width: 2px;
+  }
+
+  /*-- Bar --*/
+  .c3-bar {
+    stroke-width: 0;
+  }
+
+  .c3-bar._expanded_ {
+    fill-opacity: 1;
+    fill-opacity: 0.75;
+  }
+
+  /*-- Focus --*/
+  .c3-target.c3-focused {
+    opacity: 1;
+  }
+
+  .c3-target.c3-focused path.c3-line, .c3-target.c3-focused path.c3-step {
+    stroke-width: 2px;
+  }
+
+  .c3-target.c3-defocused {
+    opacity: 0.3 !important;
+  }
+
+  /*-- Region --*/
+  .c3-region {
+    fill: steelblue;
+    fill-opacity: 0.1;
+  }
+
+  /*-- Brush --*/
+  .c3-brush .extent {
+    fill-opacity: 0.1;
+  }
+
+  /*-- Select - Drag --*/
+  /*-- Legend --*/
+  .c3-legend-item {
+    font-size: 12px;
+  }
+
+  .c3-legend-item-hidden {
+    opacity: 0.15;
+  }
+
+  .c3-legend-background {
+    opacity: 0.75;
+    fill: white;
+    stroke: lightgray;
+    stroke-width: 1;
+  }
+
+  /*-- Title --*/
+  .c3-title {
+    font: 14px sans-serif;
+  }
+
+  /*-- Tooltip --*/
+  .c3-tooltip-container {
+    z-index: 10;
+  }
+
+  .c3-tooltip {
+    border-collapse: collapse;
+    border-spacing: 0;
+    background-color: #fff;
+    empty-cells: show;
+    -webkit-box-shadow: 7px 7px 12px -9px #777777;
+    -moz-box-shadow: 7px 7px 12px -9px #777777;
+    box-shadow: 7px 7px 12px -9px #777777;
+    opacity: 0.9;
+  }
+
+  .c3-tooltip tr {
+    border: 1px solid #CCC;
+  }
+
+  .c3-tooltip th {
+    background-color: #aaa;
+    font-size: 14px;
+    padding: 2px 5px;
+    text-align: left;
+    color: #FFF;
+  }
+
+  .c3-tooltip td {
+    font-size: 13px;
+    padding: 3px 6px;
+    background-color: #fff;
+    border-left: 1px dotted #999;
+  }
+
+  .c3-tooltip td > span {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    margin-right: 6px;
+  }
+
+  .c3-tooltip .value {
+    text-align: right;
+  }
+
+  /*-- Area --*/
+  .c3-area {
+    stroke-width: 0;
+    opacity: 0.2;
+  }
+
+  /*-- Arc --*/
+  .c3-chart-arcs-title {
+    dominant-baseline: middle;
+    font-size: 1.3em;
+  }
+
+  .c3-chart-arcs .c3-chart-arcs-background {
+    fill: #e0e0e0;
+    stroke: #FFF;
+  }
+
+  .c3-chart-arcs .c3-chart-arcs-gauge-unit {
+    fill: #000;
+    font-size: 16px;
+  }
+
+  .c3-chart-arcs .c3-chart-arcs-gauge-max {
+    fill: #777;
+  }
+
+  .c3-chart-arcs .c3-chart-arcs-gauge-min {
+    fill: #777;
+  }
+
+  .c3-chart-arc .c3-gauge-value {
+    fill: #000;
+    /*  font-size: 28px !important;*/
+  }
+
+  .c3-chart-arc.c3-target g path {
+    opacity: 1;
+  }
+
+  .c3-chart-arc.c3-target.c3-focused g path {
+    opacity: 1;
+  }
+
+  /*-- Zoom --*/
+  .c3-drag-zoom.enabled {
+    pointer-events: all !important;
+    visibility: visible;
+  }
+
+  .c3-drag-zoom.disabled {
+    pointer-events: none !important;
+    visibility: hidden;
+  }
+
+  .c3-drag-zoom .extent {
+    fill-opacity: 0.1;
+  }
+
+  .c3-xgrid-focus {
+    display: none;
+  }
+  .c3-axis-x .tick line {
+    display: none;
+  }
+}