diff --git a/frontend/src/assets/styles/base/_sidebar.scss b/frontend/src/assets/styles/base/_sidebar.scss
index 3930b23798f24b9496984b70952e357969bd2c96..37491875e16fa8b1d0f930ead98f73cc989b91eb 100644
--- a/frontend/src/assets/styles/base/_sidebar.scss
+++ b/frontend/src/assets/styles/base/_sidebar.scss
@@ -134,6 +134,8 @@ a {
}
> .sidebar-wrapper > .nav {
+ margin-top: 20px;
+
> li {
&.active {
border: 1px black;
diff --git a/frontend/src/components/SideBar/Nav.js b/frontend/src/components/SideBar/Nav.js
index 5123ed194c3b80fc307e864c5bd5053493276939..61d53ec5451da320890391980c6bc8c08e704532 100644
--- a/frontend/src/components/SideBar/Nav.js
+++ b/frontend/src/components/SideBar/Nav.js
@@ -13,9 +13,9 @@ class Nav extends Component {
return (
<ul className="nav">
<li className={location.pathname === '/' ? 'active' : null}>
- <Link to="/ueinfo">
+ <Link to="/">
<i className="pe-7s-network"/>
- <p>Dashboard</p>
+ <p>Realtime Status</p>
</Link>
</li>
diff --git a/frontend/src/pages/Dashboard/index.js b/frontend/src/pages/Dashboard/index.js
index d41536bf9e5c3af44501e29c7b7e791632cce690..09061c49f47cb00e760e40e6748ed93eafd3b1c7 100644
--- a/frontend/src/pages/Dashboard/index.js
+++ b/frontend/src/pages/Dashboard/index.js
@@ -1,44 +1,140 @@
-import React from 'react';
-import {Button, Jumbotron} from "react-bootstrap";
-import {Link} from "react-router-dom";
-
-const Dashboard = () => (
- <div className="content">
- <div className="container-fluid">
- <div className="row">
- <div className="col-md-12">
- <div className="card">
- {/*<div className="header">*/}
- {/* <h4>Dashboard</h4>*/}
- {/*</div>*/}
- <div className="content">
- <Jumbotron>
- <h2 style={{marginTop: 24}}>
- free5GC Web Console
- </h2>
- <p>
- Manage the 5G core network easily by this web console.<br/>
- To add SIM card information, go to manage subscribers page.
- </p>
- <p style={{marginTop: 24}}>
- <Button bsStyle="primary">
- <Link to={"/subscriber"}>Manage Subscribers</Link>
- </Button>
- </p>
- </Jumbotron>
- </div>
+import React, {Component} from 'react';
+import {Button} from "react-bootstrap";
+import {Link, withRouter} from "react-router-dom";
+import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
+import {connect} from "react-redux";
+import UEInfoApiHelper from "../../util/UEInfoApiHelper"
+
+// eslint-disable-next-line no-unused-vars
+var products = [{
+ supi: "imsi-2089300007487",
+ status: "CONNECTED"
+}, {
+ supi: "imsi-2089300007488",
+ status: "IDLE"
+},
+ {
+ supi: "imsi-2089300007489",
+ status: "CONNECTED"
+ },
+ {
+ supi: "imsi-2089300007485",
+ status: "IDLE"
+ },
+ {
+ supi: "imsi-2089300007484",
+ status: "CONNECTED"
+ }];
+
+// It's a data format example.
+
+class DetailButton extends Component {
+ constructor(props) {
+ super(props);
+ this.handleClick = this.handleClick.bind(this);
+ }
+
+ handleClick(cell, row, rowIndex) {
+ UEInfoApiHelper.fetchUEInfoDetail(cell).then(result => {
+
+ let success = result[0]
+ let smContextRef = result[1]
+
+ if (success) {
+ // console.log("After fetchUEInfoDetail")
+ // console.log(smContextRef)
+ UEInfoApiHelper.fetchUEInfoDetailSMF(smContextRef).then()
+ }
+
+
+ });
+ }
+
+ render() {
+ const {cell, row, rowIndex} = this.props;
+ return (
- <p> </p><p> </p>
- <p> </p><p> </p>
- <p> </p><p> </p>
- <p> </p><p> </p>
- <p> </p><p> </p>
+ <Button
+ bsStyle="primary"
+ onClick={() => this.handleClick(cell, row, rowIndex)}
+ ><Link to={`/ueinfo/${cell}`}>
+ Show Info
+ </Link>
+ </Button>
+ );
+ }
+}
+class UEInfo extends Component {
+
+ componentDidMount() {
+ UEInfoApiHelper.fetchRegisteredUE().then();
+
+ // Fetch ue info per 2 seconds
+ // setInterval(async () => {
+ // await UEInfoApiHelper.fetchRegisteredUE();
+ // }, 2000);
+ }
+
+ cellButton(cell, row, enumObject, rowIndex) {
+ return (
+ <DetailButton cell={cell} row={row} rowIndex={rowIndex}/>
+ );
+ }
+
+ rowStyleFormat(cell, row, enumObject, rowIndexx) {
+ if (cell.Status === "Registered") {
+
+ return {backgroundColor: "#4CBB17"};
+ } else if (cell.Status === "Disconnected") {
+
+ return {backgroundColor: "#CD5C5C"};
+ }
+ //return { backgroundColor: rowIndexx % 2 === 0 ? 'red' : 'blue' };
+ }
+
+ render() {
+ return (
+ <div className="container-fluid">
+ <div className="row">
+ <div className="col-md-12">
+ <div className="card">
+ <div className="header subscribers__header">
+ <h4>Registered UEs</h4>
+ </div>
+
+ <div className="content subscribers__content">
+ <div>
+ <div className="col-12">
+ {this.props.get_registered_ue_err ? (
+ <h5>{this.props.registered_ue_err_msg}</h5>
+ ) : (
+ <BootstrapTable data={this.props.registered_users} striped={true}
+ hover={true} /*trStyle={this.rowStyleFormat.bind(this)}*/>
+ <TableHeaderColumn dataField="supi" isKey={true} dataAlign="center"
+ dataSort={true}>SUPI</TableHeaderColumn>
+ <TableHeaderColumn dataField="status" dataSort={true}>Status</TableHeaderColumn>
+ <TableHeaderColumn dataField="supi"
+ dataFormat={this.cellButton.bind(this)}>Details</TableHeaderColumn>
+ </BootstrapTable>
+ )}
+ </div>
+ </div>
+
+ <p> </p><p> </p>
+ <p> </p><p> </p>
+ </div>
+ </div>
</div>
</div>
</div>
- </div>
- </div>
-);
+ );
+ }
+}
-export default Dashboard;
+export default withRouter(connect(state => ({
+ registered_users: state.ueinfo.registered_users,
+ get_registered_ue_err: state.ueinfo.get_registered_ue_err,
+ registered_ue_err_msg: state.ueinfo.registered_ue_err_msg,
+ smContextRef: state.ueinfo.smContextRef
+}))(UEInfo));
diff --git a/frontend/src/pages/Main/index.js b/frontend/src/pages/Main/index.js
index 44da97771355373d9e3dd113500a25b2e94cb6e3..af485509d5b17dc5a8cba2a5cefa91ab58d74fe3 100644
--- a/frontend/src/pages/Main/index.js
+++ b/frontend/src/pages/Main/index.js
@@ -12,7 +12,7 @@ import SideBar from '../../components/SideBar';
*/
import Subscribers from '../Subscribers';
import Tasks from '../Tasks';
-import UEInfo from '../UEInfo';
+import UEInfo from '../Dashboard';
import UEInfoDetail from '../UEInfoDetail'
const Main = ({
diff --git a/frontend/src/pages/UEInfo/index.js b/frontend/src/pages/UEInfo/index.js
deleted file mode 100644
index 74b05a21faacf148aaca08bcfa2da41e1e798e57..0000000000000000000000000000000000000000
--- a/frontend/src/pages/UEInfo/index.js
+++ /dev/null
@@ -1,133 +0,0 @@
-import React, {Component} from 'react';
-import {Button} from "react-bootstrap";
-import {Link, withRouter} from "react-router-dom";
-import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
-import {connect} from "react-redux";
-import UEInfoApiHelper from "../../util/UEInfoApiHelper"
-
-// eslint-disable-next-line no-unused-vars
-var products = [{
- supi: "imsi-2089300007487",
- status: "CONNECTED"
-},{
- supi: "imsi-2089300007488",
- status: "IDLE"
-},
-{
- supi: "imsi-2089300007489",
- status: "CONNECTED"
-},
-{
- supi: "imsi-2089300007485",
- status: "IDLE"
-},
-{
- supi: "imsi-2089300007484",
- status: "CONNECTED"
-}];
-// It's a data format example.
-
-class DetailButton extends Component {
- constructor(props) {
- super(props);
- this.handleClick = this.handleClick.bind(this);
- }
-
- handleClick(cell, row, rowIndex) {
- UEInfoApiHelper.fetchUEInfoDetail(cell).then( result => {
-
- let success = result[0]
- let smContextRef = result[1]
-
- if (success) {
- // console.log("After fetchUEInfoDetail")
- // console.log(smContextRef)
- UEInfoApiHelper.fetchUEInfoDetailSMF(smContextRef).then()
- }
-
-
- });
- }
-
- render() {
- const { cell, row, rowIndex } = this.props;
- return (
-
- <Button
- bsStyle="primary"
- onClick={() => this.handleClick(cell, row, rowIndex)}
- ><Link to={`/ueinfo/${cell}`}>
- Show Info
- </Link>
- </Button>
- );
- }
-}
-
-class UEInfo extends Component {
-
- componentDidMount() {
- UEInfoApiHelper.fetchRegisteredUE().then(() => {
-
- // console.log("After fetchRegisteredUE")
- // console.log(this.props.get_registered_ue_err)
- });
- }
-
- cellButton(cell, row, enumObject, rowIndex) {
- return (
- <DetailButton cell={cell} row={row} rowIndex={rowIndex} />
- );
- }
-
- rowStyleFormat(cell, row, enumObject, rowIndexx) {
- // console.log("In rowStyleFormat")
- // console.log(cell)
-
- if (cell.Status === "Registered") {
-
- return {backgroundColor: "#4CBB17"};
- } else if (cell.Status === "Disconnected") {
-
- return {backgroundColor: "#CD5C5C"};
- }
- //return { backgroundColor: rowIndexx % 2 === 0 ? 'red' : 'blue' };
- }
-
- render() {
- return (
- <div className="content">
- <div className="container-fluid">
- <div className="dashboard__title">
- <h2>Real Time Status</h2>
- </div>
- <div className="row">
- <div className="col-12">
- { !this.props.get_registered_ue_err &&
- <BootstrapTable data={this.props.registered_users} striped={true} hover={true} /*trStyle={this.rowStyleFormat.bind(this)}*/>
- <TableHeaderColumn dataField="supi" isKey={true} dataAlign="center" dataSort={true}>SUPI</TableHeaderColumn>
- <TableHeaderColumn dataField="status" dataSort={true}>Status</TableHeaderColumn>
- <TableHeaderColumn dataField="supi" dataFormat={this.cellButton.bind(this)}>Details</TableHeaderColumn>
- </BootstrapTable>
- }
- </div>
- <div className="col-12">
- { this.props.get_registered_ue_err &&
- <h2>
- {this.props.registered_ue_err_msg}
- </h2>
- }
- </div>
- </div>
- </div>
- </div>
- );
- }
-}
-
-export default withRouter(connect(state => ({
- registered_users: state.ueinfo.registered_users,
- get_registered_ue_err: state.ueinfo.get_registered_ue_err,
- registered_ue_err_msg: state.ueinfo.registered_ue_err_msg,
- smContextRef: state.ueinfo.smContextRef
-}))(UEInfo));
diff --git a/frontend/src/util/UEInfoApiHelper.js b/frontend/src/util/UEInfoApiHelper.js
index 2877ed5a70fa780f102de71c65cc9faddcf73285..82827f856750448a4d4041898dabc9846e9918a6 100644
--- a/frontend/src/util/UEInfoApiHelper.js
+++ b/frontend/src/util/UEInfoApiHelper.js
@@ -33,17 +33,16 @@ class UeInfoApiHelper {
if (response.data !== undefined){
err_msg = response.data
} else {
- err_msg = "Fetch Registered UE Request fail"
+ err_msg = "Error fetching registered UEs"
}
store.dispatch(ueinfoActions.setRegisteredUEError(err_msg));
}
} catch (error) {
- console.log(error)
let err_msg;
if (error.response !== undefined){
err_msg = error.response.data.cause
} else {
- err_msg = "Fetch Registered UE Request fail"
+ err_msg = "Error fetching registered UEs"
}
store.dispatch(ueinfoActions.setRegisteredUEError(err_msg));
}