[Web Portal] User profile page (#3804)

* 123

* 822

* fix

src/webportal/.eslintrc.js

@@ -21,7 +21,6 @@ module.exports = {
   },
   globals: {
     cookies: 'readonly',
-    userLogout: 'readonly',
   },
   settings: {
     react: {

src/webportal/config/webpack.common.js

@@ -64,8 +64,6 @@ const config = (env, argv) => ({
     layout: './src/app/layout/layout.component.js',
     userView: './src/app/user/fabric/user-view.jsx',
     batchRegister: './src/app/user/fabric/batch-register.jsx',
-    changePassword:
-      './src/app/user/change-password/change-password.component.js',
     dashboard: './src/app/dashboard/dashboard.component.js',
     submit: './src/app/job-submission/job-submission.jsx',
     submit_v1: './src/app/job/job-submit-v1/job-submit.component.js',
@@ -78,6 +76,7 @@ const config = (env, argv) => ({
       './src/app/cluster-view/hardware/hardware-detail.component.js',
     k8s: './src/app/cluster-view/k8s/k8s.component.js',
     docs: './src/app/job/job-docs/job-docs.component.js',
+    userProfile: './src/app/user/fabric/user-profile.jsx',
     plugin: './src/app/plugin/plugin.component.js',
   },
   output: {
@@ -297,8 +296,8 @@ const config = (env, argv) => ({
       chunks: ['layout', 'batchRegister'],
     }),
     generateHtml({
-      filename: 'change-password.html',
-      chunks: ['layout', 'changePassword'],
+      filename: 'user-profile.html',
+      chunks: ['layout', 'userProfile'],
     }),
     generateHtml({
       filename: 'dashboard.html',

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

@@ -27,7 +27,7 @@ import ReactDOM from 'react-dom';
 import MediaQuery from 'react-responsive';
 
 import JobStatus from './home/job-status';
-import VirtualClusterStatistics from './home/virtual-cluster-statistics';
+import { VirtualClusterStatistics } from './home/virtual-cluster-statistics';
 import GpuChart from './home/gpu-chart';
 import {
   listJobs,
@@ -44,7 +44,7 @@ import AbnormalJobList from './home/abnormal-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';
+import { clearToken } from '../user/user-logout/user-logout.component.js';
 
 import t from '../components/tachyons.scss';
 
@@ -79,7 +79,7 @@ const Home = () => {
         .catch(err => {
           if (err instanceof UnauthorizedError) {
             alert(err);
-            userLogout();
+            clearToken();
           } else {
             alert(err);
           }

src/webportal/src/app/home/home/virtual-cluster-statistics.jsx

@@ -27,8 +27,7 @@ import {
   Text,
   DefaultButton,
 } from 'office-ui-fabric-react';
-import React from 'react';
-import { isNil } from 'lodash';
+import React, { useMemo } from 'react';
 
 import Card from '../../components/card';
 import { UtilizationChart } from './utilization-chart';
@@ -53,7 +52,6 @@ const vcListColumns = [
     name: 'Name',
     isResizable: true,
     onRender(vc) {
-      vc.dedicated = true;
       return (
         <Stack verticalAlign='center' verticalFill>
           <Text variant='mediumPlus'>
@@ -182,14 +180,50 @@ if (isAdmin) {
   vcListColumns.push(action);
 }
 
-const VirtualClusterStatistics = ({ style, userInfo, virtualClusters }) => {
-  const vcNames = isAdmin
-    ? Object.keys(virtualClusters)
-    : userInfo.virtualCluster.filter(name => !isNil(virtualClusters[name]));
-  const { spacing } = getTheme();
-  const vcList = vcNames.map(vcName => {
-    return { name: vcName, ...virtualClusters[vcName] };
+export const VirtualClusterDetailsList = props => {
+  const virtualClusters = props.virtualClusters;
+  const otherProps = {
+    ...props,
+  };
+  delete otherProps.virtualClusters;
+  const vcList = Object.entries(virtualClusters).map(([key, val]) => {
+    return { name: key, ...val };
   });
+  return (
+    <DetailsList
+      columns={vcListColumns}
+      disableSelectionZone
+      items={vcList}
+      layoutMode={DetailsListLayoutMode.justified}
+      selectionMode={SelectionMode.none}
+      {...otherProps}
+    />
+  );
+};
+
+VirtualClusterDetailsList.propTypes = {
+  virtualClusters: PropTypes.object,
+};
+
+export const VirtualClusterStatistics = ({
+  style,
+  userInfo,
+  virtualClusters,
+}) => {
+  const { spacing } = getTheme();
+  const userVC = useMemo(() => {
+    if (isAdmin) {
+      return virtualClusters;
+    } else {
+      const result = {};
+      for (const [key, val] of Object.entries(virtualClusters)) {
+        if (userInfo.virtualCluster && userInfo.virtualCluster.includes(key)) {
+          result[key] = val;
+        }
+      }
+      return result;
+    }
+  }, [userInfo, virtualClusters]);
 
   return (
     <Card className={t.ph5} style={{ paddingRight: spacing.m, ...style }}>
@@ -198,8 +232,8 @@ const VirtualClusterStatistics = ({ style, userInfo, virtualClusters }) => {
           <Header
             headerName={
               isAdmin
-                ? `Virtual clusters (${vcNames.length})`
-                : `My virtual clusters (${vcNames.length})`
+                ? `Virtual clusters (${Object.keys(userVC).length})`
+                : `My virtual clusters (${Object.keys(userVC).length})`
             }
             linkHref={'/virtual-clusters.html'}
             linkName={'View all'}
@@ -208,13 +242,9 @@ const VirtualClusterStatistics = ({ style, userInfo, virtualClusters }) => {
         </Stack.Item>
         <Stack.Item styles={{ root: [t.relative] }} grow>
           <div className={c(t.absolute, t.absoluteFill, t.overflowAuto, t.pr4)}>
-            <DetailsList
+            <VirtualClusterDetailsList
               styles={{ root: { overflow: 'unset' } }}
-              columns={vcListColumns}
-              disableSelectionZone
-              items={vcList}
-              layoutMode={DetailsListLayoutMode.justified}
-              selectionMode={SelectionMode.none}
+              virtualClusters={userVC}
             />
           </div>
         </Stack.Item>
@@ -228,5 +258,3 @@ VirtualClusterStatistics.propTypes = {
   userInfo: PropTypes.object.isRequired,
   virtualClusters: PropTypes.object.isRequired,
 };
-
-export default VirtualClusterStatistics;

src/webportal/src/app/job-submission/utils/conn.js

@@ -15,7 +15,7 @@
 // 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 { userLogout } from '../../user/user-logout/user-logout.component.js';
+import { clearToken } from '../../user/user-logout/user-logout.component.js';
 
 import config from '../../config/webportal.config';
 import yaml from 'js-yaml';
@@ -39,7 +39,7 @@ async function fetchWrapper(...args) {
   } else {
     if (json.code === 'UnauthorizedUserError') {
       alert(json.message);
-      userLogout();
+      clearToken();
     } else {
       throw new Error(json.message);
     }

src/webportal/src/app/job/job-submit-v1/job-submit.component.js

@@ -27,6 +27,7 @@ const userAuth = require('../../user/user-auth/user-auth.component');
 const jobSchema = require('./job-submit.schema.js');
 const querystring = require('querystring');
 const stripJsonComments = require('strip-json-comments');
+const { clearToken } = require('../../user/user-logout/user-logout.component');
 
 const jobSubmitHtml = jobSubmitComponent({
   breadcrumb: breadcrumbComponent,
@@ -113,7 +114,7 @@ const submitJob = jobConfig => {
         const res = JSON.parse(xhr.responseText);
         alert(res.message);
         if (res.code === 'UnauthorizedUserError') {
-          userLogout();
+          clearToken();
         }
       },
     });

src/webportal/src/app/job/job-view/fabric/JobList/index.jsx

@@ -44,6 +44,7 @@ import Table from './Table';
 import TopBar from './TopBar';
 
 import webportalConfig from '../../../../config/webportal.config';
+import { clearToken } from '../../../../user/user-logout/user-logout.component';
 import userAuth from '../../../../user/user-auth/user-auth.component';
 import { initTheme } from '../../../../components/theme';
 
@@ -131,7 +132,7 @@ export default function JobList() {
                 return response.json().then(data => {
                   if (data.code === 'UnauthorizedUserError') {
                     alert(data.message);
-                    userLogout();
+                    clearToken();
                   } else {
                     throw new Error(data.message);
                   }

src/webportal/src/app/job/job-view/fabric/job-detail/conn.js

@@ -19,7 +19,7 @@ import yaml from 'js-yaml';
 import { get, isNil } from 'lodash';
 import qs from 'querystring';
 
-import { userLogout } from '../../../../user/user-logout/user-logout.component';
+import { clearToken } from '../../../../user/user-logout/user-logout.component';
 import { checkToken } from '../../../../user/user-auth/user-auth.component';
 import config from '../../../../config/webportal.config';
 import { isJobV2 } from './util';
@@ -201,7 +201,7 @@ export async function stopJob() {
     return json;
   } else if (res.code === 'UnauthorizedUserError') {
     alert(res.message);
-    userLogout();
+    clearToken();
   } else {
     throw new Error(json.message);
   }

src/webportal/src/app/layout/layout.component.ejs

@@ -68,6 +68,12 @@
               <span>Virtual Clusters</span>
             </a>
           </li>
+          <li id="sidebar-menu--user-profile">
+            <a href="/user-profile.html">
+              <i class="fa fa-user-circle"></i>
+              <span>My Profile</span>
+            </a>
+          </li>
           <li class="treeview" id="sidebar-menu--cluster-view" style="display: none">
             <a href="">
               <i class="fa fa-cogs"></i>

src/webportal/src/app/layout/layout.component.js

@@ -23,7 +23,6 @@ require('admin-lte/dist/css/AdminLTE.min.css');
 require('admin-lte/dist/css/skins/_all-skins.min.css');
 require('font-awesome/css/font-awesome.min.css');
 require('./layout.component.scss');
-const jwt = require('jsonwebtoken');
 
 const ReactDOM = require('react-dom');
 const React = require('react');
@@ -36,13 +35,8 @@ const pluginComponent = require('./plugins.component.ejs');
 const config = require('../config/webportal.config.js');
 
 const userLoginNavHtml = userLoginNavComponent({ cookies });
-const showUserToken = () => {
-  const token = cookies.get('token');
-  const expiration = new Date(jwt.decode(token).exp * 1000);
-  prompt(`Expiration date\n${expiration}\n\nToken`, token);
-};
 
-window.showUserToken = showUserToken;
+// used by navbar's ejs
 window.userLogout = userLogoutComponent.userLogout;
 
 $('#navbar').html(userLoginNavHtml);