forked from acouzens/open5gs
update it
This commit is contained in:
parent
e42a1a82b3
commit
f1f6af985c
|
@ -4,7 +4,7 @@ import withRedux from 'next-redux-wrapper';
|
||||||
import { initStore } from '../src/store.js';
|
import { initStore } from '../src/store.js';
|
||||||
import withSession from '../src/lib/with-session';
|
import withSession from '../src/lib/with-session';
|
||||||
import Login from '../src/components/Login';
|
import Login from '../src/components/Login';
|
||||||
import App from '../src/App';
|
import App from '../src/containers/App';
|
||||||
|
|
||||||
const Restricted = (Component) => {
|
const Restricted = (Component) => {
|
||||||
const checkAuth = (props) => {
|
const checkAuth = (props) => {
|
||||||
|
|
134
webui/src/App.js
134
webui/src/App.js
|
@ -1,134 +0,0 @@
|
||||||
import Package from '../package';
|
|
||||||
|
|
||||||
import { Component } from 'react';
|
|
||||||
import Head from 'next/head';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
import { bindActionCreators } from 'redux';
|
|
||||||
import compose from 'recompose/compose';
|
|
||||||
|
|
||||||
import Session from './lib/session';
|
|
||||||
import withWidth, { SMALL } from './lib/with-width';
|
|
||||||
import * as sidebarActions from './modules/sidebar';
|
|
||||||
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import oc from 'open-color';
|
|
||||||
import { media, transitions } from './lib/style-utils';
|
|
||||||
|
|
||||||
import Header from './components/Header';
|
|
||||||
import Sidebar from './components/Sidebar';
|
|
||||||
import Container from './components/Container';
|
|
||||||
import PdnContainer from './containers/PdnContainer';
|
|
||||||
import UserContainer from './containers/UserContainer';
|
|
||||||
|
|
||||||
const Body = styled.div`
|
|
||||||
display: flex;
|
|
||||||
height: calc(100vh - 4rem);
|
|
||||||
`
|
|
||||||
const Content = styled.div`
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
font-size: 4rem;
|
|
||||||
line-height: 8rem;
|
|
||||||
color: ${oc.gray[5]};
|
|
||||||
|
|
||||||
border-top: 1px solid ${oc.gray[4]};
|
|
||||||
box-shadow: 3px 3px 6px rgba(0,0,0,0.10), 3px 3px 6px rgba(0,0,0,0.20);
|
|
||||||
|
|
||||||
background-color: white;
|
|
||||||
`;
|
|
||||||
|
|
||||||
class App extends Component {
|
|
||||||
static propTypes = {
|
|
||||||
session: PropTypes.string.isRequired,
|
|
||||||
width: PropTypes.number.isRequired
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillMount() {
|
|
||||||
const {
|
|
||||||
width,
|
|
||||||
SidebarActions
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
if (width !== SMALL) {
|
|
||||||
SidebarActions.setVisibility(true);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
handleToggle = () => {
|
|
||||||
const { SidebarActions } = this.props;
|
|
||||||
SidebarActions.toggle();
|
|
||||||
}
|
|
||||||
|
|
||||||
handleSelect = (view) => {
|
|
||||||
const {
|
|
||||||
width,
|
|
||||||
SidebarActions
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
SidebarActions.setView(view);
|
|
||||||
if (width === SMALL) {
|
|
||||||
SidebarActions.toggle();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const title = 'Next.EPC ' + Package.version;
|
|
||||||
const session = this.props.session;
|
|
||||||
|
|
||||||
const {
|
|
||||||
visible,
|
|
||||||
view
|
|
||||||
} = this.props;
|
|
||||||
|
|
||||||
const {
|
|
||||||
handleToggle,
|
|
||||||
handleSelect
|
|
||||||
} = this;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Head>
|
|
||||||
<title>{title}</title>
|
|
||||||
</Head>
|
|
||||||
<Header onMenuAction={handleToggle}/>
|
|
||||||
<Body>
|
|
||||||
<Sidebar
|
|
||||||
visible={visible}
|
|
||||||
selected={view}
|
|
||||||
onSelect={handleSelect}/>
|
|
||||||
<Container visible={view === 'pdn'}>
|
|
||||||
<PdnContainer/>
|
|
||||||
</Container>
|
|
||||||
<Container visible={view === 'user'}>
|
|
||||||
<UserContainer/>
|
|
||||||
</Container>
|
|
||||||
<Container visible={view === 'test1'}>
|
|
||||||
<Content>{view}</Content>
|
|
||||||
</Container>
|
|
||||||
<Container visible={view === 'test3'}>
|
|
||||||
<Content>{view}</Content>
|
|
||||||
</Container>
|
|
||||||
</Body>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const enhance = compose(
|
|
||||||
withWidth(),
|
|
||||||
connect(
|
|
||||||
(state) => ({
|
|
||||||
visible: state.sidebar.get('visible'),
|
|
||||||
view: state.sidebar.get('view')
|
|
||||||
}),
|
|
||||||
(dispatch) => ({
|
|
||||||
SidebarActions: bindActionCreators(sidebarActions, dispatch)
|
|
||||||
})
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
export default enhance(App);
|
|
|
@ -1,4 +1,3 @@
|
||||||
import { Component } from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
@ -7,11 +6,6 @@ import oc from 'open-color';
|
||||||
import MenuIcon from 'react-icons/lib/md/menu';
|
import MenuIcon from 'react-icons/lib/md/menu';
|
||||||
import ThumbnailIcon from './Thumbnail';
|
import ThumbnailIcon from './Thumbnail';
|
||||||
|
|
||||||
import Session from '../lib/session';
|
|
||||||
|
|
||||||
import Logout from './Logout';
|
|
||||||
import Dimmed from './Dimmed';
|
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -46,77 +40,25 @@ const Thumbnail = styled.div`
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
class Header extends Component {
|
const propTypes = {
|
||||||
state = {
|
onSidebarToggle: PropTypes.func.isRequired,
|
||||||
logout: {
|
onLogout: PropTypes.func.isRequired
|
||||||
visible: false,
|
|
||||||
dimmed: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
logoutHandler = {
|
|
||||||
show: () => {
|
|
||||||
this.setState({
|
|
||||||
logout: {
|
|
||||||
...this.state.logout,
|
|
||||||
visible: true,
|
|
||||||
dimmed: true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
hide: () => {
|
|
||||||
this.setState({
|
|
||||||
logout: {
|
|
||||||
...this.state.logout,
|
|
||||||
visible: false,
|
|
||||||
dimmed: false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
action: async () => {
|
|
||||||
this.setState({
|
|
||||||
logout: {
|
|
||||||
...this.state.logout,
|
|
||||||
visible: false,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const session = new Session()
|
|
||||||
await session.signout()
|
|
||||||
|
|
||||||
// @FIXME next/router not working reliably so using window.location
|
|
||||||
window.location = '/'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const {
|
|
||||||
logoutHandler
|
|
||||||
} = this;
|
|
||||||
|
|
||||||
const {
|
|
||||||
logout
|
|
||||||
} = this.state;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Wrapper>
|
|
||||||
<Menu onClick={this.props.onMenuAction}>
|
|
||||||
<MenuIcon/>
|
|
||||||
</Menu>
|
|
||||||
<Title>
|
|
||||||
Next.EPC
|
|
||||||
</Title>
|
|
||||||
<Thumbnail onClick={this.logoutHandler.show}>
|
|
||||||
<ThumbnailIcon size="2rem" color={oc['pink'][4]} />
|
|
||||||
</Thumbnail>
|
|
||||||
<Logout
|
|
||||||
{...logout}
|
|
||||||
onHide={logoutHandler.hide}
|
|
||||||
onAction={logoutHandler.action} />
|
|
||||||
<Dimmed visible={logout.dimmed} />
|
|
||||||
</Wrapper>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const Header = ({ onSidebarToggle, onLogout }) => (
|
||||||
|
<Wrapper>
|
||||||
|
<Menu onClick={onSidebarToggle}>
|
||||||
|
<MenuIcon/>
|
||||||
|
</Menu>
|
||||||
|
<Title>
|
||||||
|
Next.EPC
|
||||||
|
</Title>
|
||||||
|
<Thumbnail onClick={onLogout}>
|
||||||
|
<ThumbnailIcon size="2rem" color={oc['pink'][4]} />
|
||||||
|
</Thumbnail>
|
||||||
|
</Wrapper>
|
||||||
|
)
|
||||||
|
|
||||||
|
Header.propTypes = propTypes;
|
||||||
|
|
||||||
export default Header;
|
export default Header;
|
|
@ -0,0 +1,52 @@
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import { media, transitions} from '../lib/style-utils';
|
||||||
|
import oc from 'open-color';
|
||||||
|
|
||||||
|
import Head from 'next/head';
|
||||||
|
|
||||||
|
import HeaderContainer from '../containers/HeaderContainer';
|
||||||
|
import SidebarContainer from '../containers/SidebarContainer';
|
||||||
|
|
||||||
|
const Main = styled.div`
|
||||||
|
display: flex;
|
||||||
|
height: calc(100vh - 4rem);
|
||||||
|
`
|
||||||
|
|
||||||
|
const propTypes = {
|
||||||
|
title: PropTypes.string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Layout = ({title, children}) => (
|
||||||
|
<div>
|
||||||
|
<Head>
|
||||||
|
<title>{title}</title>
|
||||||
|
</Head>
|
||||||
|
<HeaderContainer/>
|
||||||
|
<Main>
|
||||||
|
<SidebarContainer/>
|
||||||
|
{children}
|
||||||
|
</Main>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
Layout.propTypes = propTypes;
|
||||||
|
|
||||||
|
Layout.Content = styled.div`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
font-size: 4rem;
|
||||||
|
line-height: 8rem;
|
||||||
|
color: ${oc.gray[5]};
|
||||||
|
|
||||||
|
border-top: 1px solid ${oc.gray[4]};
|
||||||
|
box-shadow: 3px 3px 6px rgba(0,0,0,0.10), 3px 3px 6px rgba(0,0,0,0.20);
|
||||||
|
|
||||||
|
background-color: white;
|
||||||
|
`;
|
||||||
|
|
||||||
|
|
||||||
|
export default Layout;
|
|
@ -105,7 +105,7 @@ Sidebar.propTypes = {
|
||||||
Sidebar.defaultProps = {
|
Sidebar.defaultProps = {
|
||||||
visible: false,
|
visible: false,
|
||||||
width: "16rem",
|
width: "16rem",
|
||||||
selected: "PDN"
|
selected: "pdn"
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Sidebar;
|
export default Sidebar;
|
||||||
|
|
|
@ -0,0 +1,36 @@
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
|
import Layout from '../components/Layout';
|
||||||
|
import Container from '../components/Container';
|
||||||
|
import PdnContainer from '../containers/PdnContainer';
|
||||||
|
import UserContainer from '../containers/UserContainer';
|
||||||
|
|
||||||
|
import Package from '../../package';
|
||||||
|
|
||||||
|
const App = ({ session, view }) => (
|
||||||
|
<Layout title={`Next.EPC ${Package.version}`}>
|
||||||
|
<Container visible={view === 'pdn'}>
|
||||||
|
<PdnContainer/>
|
||||||
|
</Container>
|
||||||
|
<Container visible={view === 'user'}>
|
||||||
|
<UserContainer/>
|
||||||
|
</Container>
|
||||||
|
<Container visible={view === 'test1'}>
|
||||||
|
<Layout.Content>{view}</Layout.Content>
|
||||||
|
</Container>
|
||||||
|
<Container visible={view === 'test3'}>
|
||||||
|
<Layout.Content>{view}</Layout.Content>
|
||||||
|
</Container>
|
||||||
|
</Layout>
|
||||||
|
)
|
||||||
|
|
||||||
|
App.propTypes = {
|
||||||
|
session: PropTypes.object.isRequired,
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(
|
||||||
|
(state) => ({
|
||||||
|
view: state.sidebar.get('view')
|
||||||
|
})
|
||||||
|
)(App);
|
|
@ -0,0 +1,100 @@
|
||||||
|
import { Component } from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { bindActionCreators } from 'redux';
|
||||||
|
|
||||||
|
import * as sidebarActions from '../modules/sidebar';
|
||||||
|
|
||||||
|
import Session from '../lib/session';
|
||||||
|
|
||||||
|
import Header from '../components/Header';
|
||||||
|
import Logout from '../components//Logout';
|
||||||
|
import Dimmed from '../components//Dimmed';
|
||||||
|
|
||||||
|
class HeaderContainer extends Component {
|
||||||
|
componentWillMount() {
|
||||||
|
const {
|
||||||
|
SidebarActions
|
||||||
|
} = this.props;
|
||||||
|
}
|
||||||
|
|
||||||
|
handleToggle = () => {
|
||||||
|
const { SidebarActions } = this.props;
|
||||||
|
SidebarActions.toggle();
|
||||||
|
}
|
||||||
|
|
||||||
|
state = {
|
||||||
|
logout: {
|
||||||
|
visible: false,
|
||||||
|
dimmed: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
logoutHandler = {
|
||||||
|
show: () => {
|
||||||
|
this.setState({
|
||||||
|
logout: {
|
||||||
|
...this.state.logout,
|
||||||
|
visible: true,
|
||||||
|
dimmed: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
hide: () => {
|
||||||
|
this.setState({
|
||||||
|
logout: {
|
||||||
|
...this.state.logout,
|
||||||
|
visible: false,
|
||||||
|
dimmed: false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
action: async () => {
|
||||||
|
this.setState({
|
||||||
|
logout: {
|
||||||
|
...this.state.logout,
|
||||||
|
visible: false,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const session = new Session()
|
||||||
|
await session.signout()
|
||||||
|
|
||||||
|
// @FIXME next/router not working reliably so using window.location
|
||||||
|
window.location = '/'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
handleSidebarToggle,
|
||||||
|
logoutHandler
|
||||||
|
} = this;
|
||||||
|
|
||||||
|
const {
|
||||||
|
logout
|
||||||
|
} = this.state;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Header
|
||||||
|
onSidebarToggle={handleSidebarToggle}
|
||||||
|
onLogout={logoutHandler.show}
|
||||||
|
/>
|
||||||
|
<Logout
|
||||||
|
{...logout}
|
||||||
|
onHide={logoutHandler.hide}
|
||||||
|
onAction={logoutHandler.action} />
|
||||||
|
<Dimmed visible={logout.dimmed} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(
|
||||||
|
null,
|
||||||
|
(dispatch) => ({
|
||||||
|
SidebarActions: bindActionCreators(sidebarActions, dispatch)
|
||||||
|
})
|
||||||
|
)(HeaderContainer);
|
|
@ -0,0 +1,79 @@
|
||||||
|
import { Component } from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { bindActionCreators } from 'redux';
|
||||||
|
import compose from 'recompose/compose';
|
||||||
|
|
||||||
|
import withWidth, { SMALL } from '../lib/with-width';
|
||||||
|
import * as sidebarActions from '../modules/sidebar';
|
||||||
|
|
||||||
|
import Sidebar from '../components/Sidebar';
|
||||||
|
|
||||||
|
class SidebarContainer extends Component {
|
||||||
|
static propTypes = {
|
||||||
|
width: PropTypes.number.isRequired
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillMount() {
|
||||||
|
const {
|
||||||
|
width,
|
||||||
|
SidebarActions
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
if (width !== SMALL) {
|
||||||
|
SidebarActions.setVisibility(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handleToggle = () => {
|
||||||
|
const { SidebarActions } = this.props;
|
||||||
|
SidebarActions.toggle();
|
||||||
|
}
|
||||||
|
|
||||||
|
handleSelect = (view) => {
|
||||||
|
const {
|
||||||
|
width,
|
||||||
|
SidebarActions
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
SidebarActions.setView(view);
|
||||||
|
if (width === SMALL) {
|
||||||
|
SidebarActions.toggle();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
visible,
|
||||||
|
view
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const {
|
||||||
|
handleToggle,
|
||||||
|
handleSelect
|
||||||
|
} = this;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Sidebar
|
||||||
|
visible={visible}
|
||||||
|
selected={view}
|
||||||
|
onSelect={handleSelect}/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const enhance = compose(
|
||||||
|
withWidth(),
|
||||||
|
connect(
|
||||||
|
(state) => ({
|
||||||
|
visible: state.sidebar.get('isOpen'),
|
||||||
|
view: state.sidebar.get('view')
|
||||||
|
}),
|
||||||
|
(dispatch) => ({
|
||||||
|
SidebarActions: bindActionCreators(sidebarActions, dispatch)
|
||||||
|
})
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
export default enhance(SidebarContainer);
|
|
@ -6,16 +6,16 @@ const SET_VISIBILITY = 'sidebar/SET_VISIBILITY';
|
||||||
const SET_VIEW = 'sidebar/SET_VIEW';
|
const SET_VIEW = 'sidebar/SET_VIEW';
|
||||||
|
|
||||||
export const toggle = createAction(TOGGLE); // No payload
|
export const toggle = createAction(TOGGLE); // No payload
|
||||||
export const setVisibility = createAction(SET_VISIBILITY); // visible
|
export const setVisibility = createAction(SET_VISIBILITY); // isOpen
|
||||||
export const setView = createAction(SET_VIEW); // view
|
export const setView = createAction(SET_VIEW); // view
|
||||||
|
|
||||||
const initialState = Map({
|
const initialState = Map({
|
||||||
visible: false,
|
isOpen: false,
|
||||||
view: 'pdn'
|
view: 'pdn'
|
||||||
});
|
});
|
||||||
|
|
||||||
export default handleActions({
|
export default handleActions({
|
||||||
[TOGGLE]: (state, action) => state.set('visible', !state.get('visible')),
|
[TOGGLE]: (state, action) => state.set('isOpen', !state.get('isOpen')),
|
||||||
[SET_VISIBILITY]: (state, action) => state.set('visible', action.payload),
|
[SET_VISIBILITY]: (state, action) => state.set('isOpen', action.payload),
|
||||||
[SET_VIEW]: (state, action) => state.set('view', action.payload)
|
[SET_VIEW]: (state, action) => state.set('view', action.payload)
|
||||||
}, initialState);
|
}, initialState);
|
Loading…
Reference in New Issue