Skip to content
Snippets Groups Projects
Commit 4c77d72d authored by Chi Chang's avatar Chi Chang
Browse files

Update realtime dashboard style

parent 5a156b05
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
frontend/src/assets/styles/base/_sidebar.scss
+ 2
− 0
View file @ 4c77d72d
......@@ -134,6 +134,8 @@ a {
}
> .sidebar-wrapper > .nav {
margin-top: 20px;
> li {
&.active {
border: 1px black;
......
frontend/src/components/SideBar/Nav.js
+ 2
− 2
View file @ 4c77d72d
......@@ -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>
......
frontend/src/pages/Dashboard/index.js
+ 134
− 38
View file @ 4c77d72d
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>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</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>&nbsp;</p><p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</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));
frontend/src/pages/Main/index.js
+ 1
− 1
View file @ 4c77d72d
......@@ -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 = ({
......
frontend/src/pages/UEInfo/index.js deleted 100644 → 0
+ 0
− 133
View file @ 5a156b05
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));
frontend/src/util/UEInfoApiHelper.js
+ 2
− 3
View file @ 4c77d72d
......@@ -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));
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment