feat(jsbattle-admin): display details of user

jamro · jamro · commit 34138fac1880 · 2020-06-25T18:58:05.000+02:00
diff --git a/packages/jsbattle-admin/src/actions/index.js b/packages/jsbattle-admin/src/actions/index.js
@@ -63,3 +63,7 @@ export const getSystemInfo = () => {
 export const getDashboardInfo = () => {
   return fetchFromApi(`/api/admin/dashboard` , "DASHBOARD_INFO");
 };
+
+export const getUserDetails = (id) => {
+  return fetchFromApi(`/api/admin/users/${id}/summary` , "USER_VIEW");
+};
diff --git a/packages/jsbattle-admin/src/containers/App.js b/packages/jsbattle-admin/src/containers/App.js
@@ -13,6 +13,7 @@ import {
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {Route, Redirect, HashRouter as Router} from 'react-router-dom';
 import UserList from "./UserList.js";
+import UserView from "./UserView.js";
 import SystemView from "./SystemView.js";
 import ScriptList from "./ScriptList.js";
 import SessionList from "./SessionList.js";
@@ -44,7 +45,8 @@ class App extends Component {
                 <Redirect to="/dashboard" />
               </Route>
               <Route path="/dashboard" component={Dashboard} />
-              <Route path="/users" component={UserList} />
+              <Route path="/users/:id" component={UserView} />
+              <Route path="/users" exact component={UserList} />
               <Route path="/sessions" component={SessionList} />
               <Route path="/scripts" component={ScriptList} />
               <Route path="/battles" component={BattleList} />
diff --git a/packages/jsbattle-admin/src/containers/BattleList.js b/packages/jsbattle-admin/src/containers/BattleList.js
@@ -9,10 +9,13 @@ import Loading from '../components/Loading.js';
 import {connect} from 'react-redux';
 import {getBattleList} from '../actions';
 
-function vsFormatter(value) {
+function vsFormatter(value, row) {
   let parts = new RegExp(/(.+)\/(.+) vs (.+)\/(.+)/).exec(value);
-
-  return <span style={{color: "#333"}}><strong style={{color: "#000"}}>{parts[1]}</strong>/{parts[2]} <span style={{color: "#888"}}>vs</span> <strong style={{color: "#000"}}>{parts[3]}</strong>/{parts[4]}</span>;
+  let baseUrl = window.location.href.replace(/(.*)#.*/, '$1').replace(/(.*)(admin\/?)/, '$1');
+  let url = `${baseUrl}#/league/replay/${row.id}`;
+  return <a href={url}>
+      <span><strong>{parts[1]}</strong>/{parts[2]} <span>vs</span> <strong>{parts[3]}</strong>/{parts[4]}</span>
+    </a>;
 }
 
 class BattleList extends Component {
@@ -38,20 +41,11 @@ class BattleList extends Component {
             </Col>
             <Col lg={9} xl={10} style={{paddingTop: '1em'}}>
               <Breadcrumb>
-                <Breadcrumb.Item href="/#/dashboard">Dashboard</Breadcrumb.Item>
+                <Breadcrumb.Item href="#/dashboard">Dashboard</Breadcrumb.Item>
                 <Breadcrumb.Item active>Battles</Breadcrumb.Item>
               </Breadcrumb>
               <SmartTable
                 columns={[
-                  {
-                    name: 'ID',
-                    field: 'id',
-                    format: (value) => {
-                        let baseUrl = window.location.href.replace(/(.*)#.*/, '$1').replace(/(.*)(admin\/?)/, '$1');
-                        let url = `${baseUrl}#/league/replay/${value}`;
-                        return <a href={url}>{value}</a>;
-                      }
-                  },
                   {name: 'Description', field: 'description', format: vsFormatter},
                   {name: 'Create Date', field: 'createdAt', format: 'datetime'},
                   {name: 'Expire Date', field: 'expiresAt', format: 'datetime'}
diff --git a/packages/jsbattle-admin/src/containers/LeagueList.js b/packages/jsbattle-admin/src/containers/LeagueList.js
@@ -32,7 +32,7 @@ class LeagueList extends Component {
             </Col>
             <Col lg={9} xl={10} style={{paddingTop: '1em'}}>
               <Breadcrumb>
-                <Breadcrumb.Item href="/#/dashboard">Dashboard</Breadcrumb.Item>
+                <Breadcrumb.Item href="#/dashboard">Dashboard</Breadcrumb.Item>
                 <Breadcrumb.Item active>League</Breadcrumb.Item>
               </Breadcrumb>
               <SmartTable
diff --git a/packages/jsbattle-admin/src/containers/ScriptList.js b/packages/jsbattle-admin/src/containers/ScriptList.js
@@ -33,7 +33,7 @@ class ScriptList extends Component {
             </Col>
             <Col lg={9} xl={10} style={{paddingTop: '1em'}}>
               <Breadcrumb>
-                <Breadcrumb.Item href="/#/dashboard">Dashboard</Breadcrumb.Item>
+                <Breadcrumb.Item href="#/dashboard">Dashboard</Breadcrumb.Item>
                 <Breadcrumb.Item active>Scripts</Breadcrumb.Item>
               </Breadcrumb>
               <SmartTable
diff --git a/packages/jsbattle-admin/src/containers/SessionList.js b/packages/jsbattle-admin/src/containers/SessionList.js
@@ -9,6 +9,13 @@ import Loading from '../components/Loading.js';
 import {connect} from 'react-redux';
 import {getSessionList} from '../actions';
 
+function userFormatter(value, row) {
+  console.log(row);
+  let baseUrl = window.location.href.replace(/(.*)#.*/, '$1');
+  let url = `${baseUrl}#/users/${row.userId}`;
+  return <a href={url}>{value}</a>;
+}
+
 class SessionList extends Component {
 
   constructor(props) {
@@ -32,12 +39,12 @@ class SessionList extends Component {
             </Col>
             <Col lg={9} xl={10} style={{paddingTop: '1em'}}>
               <Breadcrumb>
-                <Breadcrumb.Item href="/#/dashboard">Dashboard</Breadcrumb.Item>
+                <Breadcrumb.Item href="#/dashboard">Dashboard</Breadcrumb.Item>
                 <Breadcrumb.Item active>Sessions</Breadcrumb.Item>
               </Breadcrumb>
               <SmartTable
                 columns={[
-                  {name: 'User', field: 'username'},
+                  {name: 'User', field: 'username', format: userFormatter},
                   {name: 'Role', field: 'role', format: (v) => v == 'admin' ? <span className="badge badge-danger">{v}</span> : <span className="badge badge-info">{v}</span>},
                   {name: 'Last Activity', field: 'lastAction', format: [
                     (value) => new Date().getTime() - new Date(value.timestamp).getTime(),
diff --git a/packages/jsbattle-admin/src/containers/UserList.js b/packages/jsbattle-admin/src/containers/UserList.js
@@ -9,6 +9,12 @@ import SmartTable from '../components/SmartTable.js';
 import {connect} from 'react-redux';
 import {getUserList} from '../actions';
 
+function userFormatter(value, row) {
+  let baseUrl = window.location.href.replace(/(.*)#.*/, '$1');
+  let url = `${baseUrl}#/users/${row.id}`;
+  return <a href={url}>{value}</a>;
+}
+
 class UserList extends Component {
 
   constructor(props) {
@@ -32,12 +38,12 @@ class UserList extends Component {
             </Col>
             <Col lg={9} xl={10} style={{paddingTop: '1em'}}>
               <Breadcrumb>
-                <Breadcrumb.Item href="/#/dashboard">Dashboard</Breadcrumb.Item>
+                <Breadcrumb.Item href="#/dashboard">Dashboard</Breadcrumb.Item>
                 <Breadcrumb.Item active>Users</Breadcrumb.Item>
               </Breadcrumb>
               <SmartTable
                 columns={[
-                  {name: 'User Name', field: 'username'},
+                  {name: 'User Name', field: 'username', format: userFormatter},
                   {name: 'Display Name', field: 'displayName'},
                   {name: 'Auth Provider', field: 'provider'},
                   {
diff --git a/packages/jsbattle-admin/src/containers/UserView.js b/packages/jsbattle-admin/src/containers/UserView.js
@@ -0,0 +1,114 @@
+import React, {Component} from "react";
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Breadcrumb from 'react-bootstrap/Breadcrumb';
+import SideMenu from '../components/SideMenu.js';
+import Loading from '../components/Loading.js';
+import {connect} from 'react-redux';
+import {getUserDetails} from '../actions';
+import {
+  faUser,
+  faChartBar
+} from '@fortawesome/free-solid-svg-icons';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+
+class UserView extends Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    this.props.getUserDetails(this.props.match.params.id);
+  }
+
+  render() {
+    if(this.props.isLoading) {
+      return<Loading />;
+    }
+    if(!this.props.user) {
+      return <span>User not found</span>;
+    }
+    return (
+      <div>
+        <Container fluid>
+          <Row>
+            <Col lg={3} xl={2} style={{backgroundColor: '#f7f7f7', borderRight: '1px solid #ececec'}} >
+              <SideMenu />
+            </Col>
+            <Col lg={9} xl={10} style={{paddingTop: '1em'}}>
+              <Breadcrumb>
+                <Breadcrumb.Item href="#/dashboard">Dashboard</Breadcrumb.Item>
+                <Breadcrumb.Item href="#/users">Users</Breadcrumb.Item>
+                <Breadcrumb.Item  active>{this.props.user.account.displayName} ({this.props.user.account.username})</Breadcrumb.Item>
+              </Breadcrumb>
+                <div className="card">
+                  <div className="card-header">
+                    <FontAwesomeIcon size="lg" icon={faUser} /> &nbsp; <strong>Account</strong>
+                  </div>
+                  <ul className="list-group list-group-flush">
+                    <li className="list-group-item d-flex justify-content-between align-items-center">
+                      User name <span className="badge badge-primary badge-pill">{this.props.user.account.username}</span>
+                    </li>
+                    <li className="list-group-item d-flex justify-content-between align-items-center">
+                      Display name <span className="badge badge-primary badge-pill">{this.props.user.account.displayName}</span>
+                    </li>
+                    <li className="list-group-item d-flex justify-content-between align-items-center">
+                      Provider <span className="badge badge-primary badge-pill">{this.props.user.account.provider}</span>
+                    </li>
+                    <li className="list-group-item d-flex justify-content-between align-items-center">
+                      Email <span className="badge badge-primary badge-pill">{this.props.user.account.email}</span>
+                    </li>
+                    <li className="list-group-item d-flex justify-content-between align-items-center">
+                      Status <span className="badge badge-primary badge-pill">{this.props.user.account.registered ? 'Registered' : 'Unregistered'}</span>
+                    </li>
+                    <li className="list-group-item d-flex justify-content-between align-items-center">
+                      Role <span className="badge badge-primary badge-pill">{this.props.user.account.role}</span>
+                    </li>
+                    <li className="list-group-item d-flex justify-content-between align-items-center">
+                      Joined at <span className="badge badge-primary badge-pill">{new Date(this.props.user.account.createdAt).toLocaleString()}</span>
+                    </li>
+                    <li className="list-group-item d-flex justify-content-between align-items-center">
+                      Last login <span className="badge badge-primary badge-pill">{new Date(this.props.user.account.lastLoginAt).toLocaleString()}</span>
+                    </li>
+                  </ul>
+                </div>
+                <hr />
+                <div className="card">
+                  <div className="card-header">
+                    <FontAwesomeIcon size="lg" icon={faChartBar} /> &nbsp; <strong>Stats</strong>
+                  </div>
+                  <ul className="list-group list-group-flush">
+                    <li className="list-group-item d-flex justify-content-between align-items-center">
+                      Challenges Completed <span className="badge badge-primary badge-pill">{this.props.user.challenges.length}</span>
+                    </li>
+                    <li className="list-group-item d-flex justify-content-between align-items-center">
+                      Scripts stored <span className="badge badge-primary badge-pill">{this.props.user.scripts.length}</span>
+                    </li>
+                    <li className="list-group-item d-flex justify-content-between align-items-center">
+                      Battles stored <span className="badge badge-primary badge-pill">{this.props.user.battles.length}</span>
+                    </li>
+                  </ul>
+                </div>
+            </Col>
+          </Row>
+        </Container>
+      </div>
+    );
+  }
+}
+
+// eslint-disable-next-line no-unused-vars
+const mapStateToProps = (state) => ({
+  user: state.users.selected,
+  isLoading: state.loading.USER_VIEW
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  getUserDetails: (id) => dispatch(getUserDetails(id))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(UserView);
diff --git a/packages/jsbattle-admin/src/reducers/usersReducer.js b/packages/jsbattle-admin/src/reducers/usersReducer.js
@@ -1,5 +1,6 @@
 const initState = {
-  page: null
+  page: null,
+  selected: null
 };
 
 const usersReducer = (state, action) => {
@@ -11,6 +12,8 @@ const usersReducer = (state, action) => {
   switch (action.type) {
     case 'USER_LIST_SUCCESS':
       return {...state, page: action.payload};
+      case 'USER_VIEW_SUCCESS':
+        return {...state, selected: action.payload};
     default:
       return state;
   }
diff --git a/packages/jsbattle-mockserver/app/MockServer.js b/packages/jsbattle-mockserver/app/MockServer.js
@@ -132,6 +132,7 @@ class MockServer {
         "/api/user/league": "/user,league",
         "/api/user/league/submission": "/user,league,submission",
         "/api/user/league/replay/:id": "/user,league,replay/:id",
+        "/api/admin/users/:id/:a": "/admin,users,:id,:a",
         "/api/:a/:b": "/:a,:b",
         "/api/:a/:b/:c": "/:a,:b/:c",
         "/api/:a/:b/:c/:d": "/:a,:b/:c/:d",
diff --git a/packages/jsbattle-mockserver/app/init_db.json b/packages/jsbattle-mockserver/app/init_db.json
@@ -163,6 +163,95 @@
       "lastLoginAt": "2020-01-01T00:00:00.000Z"
     }
   ],
+  "admin,users,8si8Su024sj2cZwo0,summary": {
+      "account": {
+          "id": "uqnGXXnSKTs6Xl5h",
+          "username": "alpha",
+          "displayName": "Alpha Centauri",
+          "provider": "mock",
+          "extUserId": "mock_01",
+          "email": "mock@example.com",
+          "registered": true,
+          "role": "admin",
+          "createdAt": "2020-06-25T11:59:37.453Z",
+          "lastLoginAt": "2020-06-25T11:59:39.119Z"
+      },
+      "scripts": [
+          {
+              "id": "1TFcBHuTSNuKVZyH",
+              "scriptName": "sharma",
+              "createdAt": "2020-06-25T11:59:59.872Z",
+              "modifiedAt": "2020-06-25T11:59:59.872Z",
+              "hash": "90b359ff9cbe540a42c200e096d0a59e"
+          },
+          {
+              "id": "FIoRSZ4A7jzzjVkr",
+              "scriptName": "venom",
+              "createdAt": "2020-06-25T11:59:51.087Z",
+              "modifiedAt": "2020-06-25T11:59:51.087Z",
+              "hash": "90b359ff9cbe540a42c200e096d0a59e"
+          }
+      ],
+      "league": {
+          "id": "qTYS3Rq5TYCsVIq1",
+          "scriptId": "FIoRSZ4A7jzzjVkr",
+          "scriptName": "venom",
+          "joinedAt": "2020-06-25T11:59:57.311Z",
+          "fights_total": 2,
+          "fights_win": 0,
+          "fights_lose": 2,
+          "fights_error": 0,
+          "score": 0
+      },
+      "battles": [
+          {
+              "id": "H60MduWgZHatFE14",
+              "meta": [
+                  {
+                      "id": "qTYS3Rq5TYCsVIq1",
+                      "name": "mock/venom",
+                      "battleScore": 20,
+                      "winner": false
+                  },
+                  {
+                      "id": "BtMRNA9fNoTmwlcv",
+                      "name": "jsbattle/jamro",
+                      "battleScore": 215.39000000000001,
+                      "winner": true
+                  }
+              ],
+              "description": "mock/venom vs jsbattle/jamro",
+              "createdAt": "2020-06-25T12:00:18.565Z",
+              "expiresAt": "2020-06-28T12:00:18.565Z"
+          },
+          {
+              "id": "kdmOGcB6yBuGllca",
+              "meta": [
+                  {
+                      "id": "qTYS3Rq5TYCsVIq1",
+                      "name": "mock/venom",
+                      "battleScore": 0,
+                      "winner": false
+                  },
+                  {
+                      "id": "J9Ws7fDPv0JsjPsK",
+                      "name": "jsbattle/crawler",
+                      "battleScore": 41.150000000000006,
+                      "winner": true
+                  }
+              ],
+              "description": "mock/venom vs jsbattle/crawler",
+              "createdAt": "2020-06-25T12:00:03.599Z",
+              "expiresAt": "2020-06-28T12:00:03.599Z"
+          }
+      ],
+      "challenges": [
+          {
+              "challengeId": "challenge-8UCUaNvC",
+              "modifiedAt": "2020-06-25T11:59:41.729Z"
+          }
+      ]
+  },
   "admin,sessions": [
     {
       "userId": "Ek4kFhe50m6RWLic",
diff --git a/packages/jsbattle-server/app/services/ApiGateway.service.js b/packages/jsbattle-server/app/services/ApiGateway.service.js
@@ -52,6 +52,7 @@ class ApiGatewayService extends Service {
                 aliases: {
                   "PATCH users/:id": "userStore.update",
                   "GET users": "userStore.list",
+                  "GET users/:id/summary": "stats.getUserSummary",
                   "GET sessions": "activityMonitor.listActiveSessions",
                   "PATCH scripts/:id": "scriptStore.update",
                   "GET scripts": "scriptStore.list",
diff --git a/packages/jsbattle-server/app/services/Stats.service.js b/packages/jsbattle-server/app/services/Stats.service.js
diff --git a/packages/jsbattle-server/test/unit/services/Stats.spec.js b/packages/jsbattle-server/test/unit/services/Stats.spec.js
