[Web Portal] Refine Home UI Part II - User (not Admin user) home page

src/rest-server/src/controllers/user.js

@@ -85,7 +85,7 @@ const updateUserVc = (req, res, next) => {
 };
 
 /**
- * Update user virtual clusters.
+ * Get user list
  */
 const getUserList = (req, res, next) => {
   userModel.getUserList((err, userList) => {
@@ -96,6 +96,27 @@ const getUserList = (req, res, next) => {
   });
 };
 
+/**
+ * Get user info
+ */
+const getUserInfo = (req, res, next) => {
+  const username = req.params.username;
+  if (req.user.admin || req.user.username === username) {
+    userModel.getUserList((err, userList) => {
+      if (err) {
+        return next(createError.unknown(err));
+      }
+      const item = userList.find((x) => x.username === username);
+      if (!item) {
+        return next(createError('Bad Request', 'NoUserError', `User ${username} is not found.`));
+      }
+      return res.status(200).json(item);
+    });
+  } else {
+    next(createError('Forbidden', 'ForbiddenUserError', `Non-admin is not allowed to do this operation.`));
+  }
+};
+
 /**
  * Update user Github PAT.
  */
@@ -118,4 +139,4 @@ const updateUserGithubPAT =(req, res, next) => {
 };
 
 // module exports
-module.exports = {update, remove, updateUserVc, getUserList, updateUserGithubPAT};
+module.exports = {update, remove, updateUserVc, getUserInfo, getUserList, updateUserGithubPAT};

src/rest-server/src/routes/user.js

@@ -34,6 +34,10 @@ router.route('/')
     /** Get /api/v1/user - Get user info list */
     .get(userController.getUserList);
 
+
+router.route('/:username/')
+    .get(token.check, userController.getUserInfo);
+
 router.route('/:username/virtualClusters')
     .put(token.check, param.validate(userConfig.userVcUpdateInputSchema), userController.updateUserVc);
 

src/webportal/.eslintrc.js

@@ -26,7 +26,7 @@ module.exports = {
   },
   "overrides": [
     {
-      "files": ["**/*.jsx", "src/app/job/job-view/fabric/**/*.js"],
+      "files": ["**/*.jsx", "src/app/job/job-view/fabric/**/*.js", "src/app/components/**/*.js", "src/app/home/**/*.js"],
       "parser": "babel-eslint"
     }
   ]

src/webportal/config/webpack.common.js

@@ -32,6 +32,7 @@ const version = require('../package.json').version;
 const FABRIC_DIR = [
   path.resolve(__dirname, '../src/app/job/job-view/fabric'),
   path.resolve(__dirname, '../src/app/home'),
+  path.resolve(__dirname, '../src/app/components'),
   path.resolve(__dirname, '../node_modules/tachyons'),
 ];
 
@@ -53,6 +54,7 @@ function generateHtml(opt) {
 const config = (env, argv) => ({
   entry: {
     'index': './src/app/home/index.jsx',
+    'home': './src/app/home/home.jsx',
     'layout': './src/app/layout/layout.component.js',
     'register': './src/app/user/user-register/user-register.component.js',
     'userView': './src/app/user/user-view/user-view.component.js',
@@ -130,35 +132,83 @@ const config = (env, argv) => ({
         test: /\.(css|scss)$/,
         include: FABRIC_DIR,
         use: [
-          argv.mode === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
+          argv.mode === 'production'
+            ? MiniCssExtractPlugin.loader
+            : {
+              loader: 'style-loader',
+              options: {
+                sourceMap: true,
+              },
+            },
           {
             loader: 'css-loader',
             options: {
               url: true,
-              minimize: true,
               sourceMap: true,
+              importLoaders: 2,
               modules: true,
               camelCase: true,
               localIdentName: '[name]-[local]--[hash:base64:5]',
             },
           },
-          'sass-loader',
+          {
+            loader: 'postcss-loader',
+            options: {
+              sourceMap: true,
+              ident: 'postcss',
+              plugins: (loader) => [
+                require('postcss-import')({root: loader.resourcePath}),
+                require('autoprefixer')(),
+                require('cssnano')(),
+              ],
+            },
+          },
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
         ],
       },
       {
         test: /\.(css|scss)$/,
         exclude: FABRIC_DIR,
         use: [
-          argv.mode === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
+          argv.mode === 'production'
+            ? MiniCssExtractPlugin.loader
+            : {
+              loader: 'style-loader',
+              options: {
+                sourceMap: true,
+              },
+            },
           {
             loader: 'css-loader',
             options: {
               url: true,
-              minimize: true,
+              sourceMap: true,
+              importLoaders: 2,
+            },
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              sourceMap: true,
+              ident: 'postcss2',
+              plugins: (loader) => [
+                require('postcss-import')({root: loader.resourcePath}),
+                require('autoprefixer')(),
+                require('cssnano')(),
+              ],
+            },
+          },
+          {
+            loader: 'sass-loader',
+            options: {
               sourceMap: true,
             },
           },
-          'sass-loader',
         ],
       },
       {
@@ -221,6 +271,10 @@ const config = (env, argv) => ({
       chunks: ['index'],
       template: './src/app/home/index.ejs',
     }),
+    generateHtml({
+      filename: 'home.html',
+      chunks: ['layout', 'home'],
+    }),
     generateHtml({
       filename: 'register.html',
       chunks: ['layout', 'register'],

src/webportal/package.json

@@ -25,17 +25,21 @@
     "@webcomponents/custom-elements": "^1.2.1",
     "admin-lte": "~2.4.2",
     "app-root-path": "~2.0.1",
+    "autoprefixer": "^9.5.1",
     "babel-eslint": "^10.0.1",
     "babel-loader": "^8.0.5",
     "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",
     "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": "~0.28.7",
+    "css-loader": "^2.1.1",
+    "cssnano": "^4.1.10",
     "datatables.net-buttons-bs": "^1.5.4",
     "datatables.net-plugins": "~1.10.15",
     "datatables.net-responsive-bs": "^2.2.3",
@@ -72,6 +76,8 @@
     "node-sass": "~4.7.2",
     "office-ui-fabric-react": "^6.143.0",
     "papaparse": "^4.6.3",
+    "postcss-import": "^12.0.1",
+    "postcss-loader": "^3.0.0",
     "prop-types": "^15.7.2",
     "raw-loader": "~0.5.1",
     "react": "^16.8.3",
@@ -86,7 +92,7 @@
     "strip-json-comments": "^2.0.1",
     "style-loader": "~0.19.0",
     "styled-components": "^4.2.0",
-    "tachyons": "^4.11.1",
+    "tachyons-sass": "^4.9.5",
     "terser-webpack-plugin": "^1.2.3",
     "util": "~0.10.3",
     "webpack": "~4.29.6",

src/webportal/src/app/components/loading.jsx

@@ -0,0 +1,85 @@
+// Copyright (c) Microsoft Corporation
+// All rights reserved.
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+// documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+// the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+// to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+// The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING
+// BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import {FontClassNames, ColorClassNames} from '@uifabric/styling';
+import c from 'classnames';
+import {isEqual, isNil} from 'lodash';
+import {Spinner, SpinnerSize} from 'office-ui-fabric-react/lib/Spinner';
+import React, {useLayoutEffect, useState} from 'react';
+
+import t from './tachyons.scss';
+
+import loadingGif from '../../assets/img/loading.gif';
+
+export const Loading = () => (
+  <div className={c(t.fixed, t.absoluteFill, ColorClassNames.whiteTranslucent40Background, t.z9999)}>
+    <div className={c(t.flex, t.itemsCenter, t.justifyCenter, t.h100)}>
+      <img className={t.o50} src={loadingGif} />
+    </div>
+  </div>
+);
+
+// min-height issue hack
+// https://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height
+export const SpinnerLoading = () => {
+  const [style, setStyle] = useState({});
+  useLayoutEffect(() => {
+    function layout() {
+      const contentWrapper = document.getElementById('content-wrapper');
+      if (isNil(contentWrapper)) {
+        return;
+      }
+      const pt = window.getComputedStyle(contentWrapper).paddingTop;
+      const rect = contentWrapper.getBoundingClientRect();
+      const nextStyle = {
+        paddingTop: pt,
+        top: rect.top,
+        left: rect.left,
+        width: rect.right - rect.left,
+        height: rect.bottom - rect.top,
+      };
+      if (!isEqual(nextStyle, style)) {
+        setStyle(nextStyle);
+      }
+    }
+    layout();
+    window.addEventListener('resize', layout);
+    return () => {
+      window.removeEventListener('resize', layout);
+    };
+  });
+
+  return (
+    <div className={c(t.flex, t.itemsCenter, t.justifyCenter, t.fixed)} style={style}>
+      <div className={c(t.flex, t.itemsCenter)}>
+        <Spinner size={SpinnerSize.large} />
+        <div className={c(t.ml4, FontClassNames.xLarge)}>Loading...</div>
+      </div>
+    </div>
+  );
+};
+
+export const MaskSpinnerLoading = () => (
+  <div className={c(t.fixed, t.absoluteFill, ColorClassNames.whiteTranslucent40Background, t.z9999)}>
+    <div className={c(t.flex, t.itemsCenter, t.justifyCenter, t.h100)}>
+      <div className={c(t.flex, t.itemsCenter)}>
+        <Spinner size={SpinnerSize.large} />
+        <div className={c(t.ml4, FontClassNames.xLarge)}>Loading...</div>
+      </div>
+    </div>
+  </div>
+);