added history layout
This commit is contained in:
parent
40eaf2c0f3
commit
82c80888fd
21
src/ts/@overflow/app/views/history/List.tsx
Normal file
21
src/ts/@overflow/app/views/history/List.tsx
Normal file
|
@ -0,0 +1,21 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { RouteComponentProps } from 'react-router';
|
||||||
|
import HistoryListContainer from '@overflow/history/react/HistoryList';
|
||||||
|
|
||||||
|
class HistoryList extends React.Component<RouteComponentProps<object>, object> {
|
||||||
|
|
||||||
|
public constructor(props?: RouteComponentProps<object>, context?: object) {
|
||||||
|
super(props, context);
|
||||||
|
}
|
||||||
|
|
||||||
|
public render(): JSX.Element {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<HistoryListContainer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default HistoryList;
|
|
@ -11,6 +11,7 @@ import TargetList from '../../views/infrastructure/target/List';
|
||||||
import SensorList from '../monitoring/sensor/List';
|
import SensorList from '../monitoring/sensor/List';
|
||||||
import NoauthList from '../../views/monitoring/probe/NoAuth';
|
import NoauthList from '../../views/monitoring/probe/NoAuth';
|
||||||
import ProbeSetup from '../../views/monitoring/probe/Setup';
|
import ProbeSetup from '../../views/monitoring/probe/Setup';
|
||||||
|
import HistoryList from '../../views/history/List';
|
||||||
import TitleBarContainer from '@overflow/app/views/layout/TitleBarContainer';
|
import TitleBarContainer from '@overflow/app/views/layout/TitleBarContainer';
|
||||||
|
|
||||||
export interface Props extends RouteComponentProps<any> {
|
export interface Props extends RouteComponentProps<any> {
|
||||||
|
@ -42,6 +43,7 @@ export class AppLayout extends React.Component<Props, State> {
|
||||||
<Route exact={true} path={`${this.props.match.url}sensors`} component={SensorList}/>
|
<Route exact={true} path={`${this.props.match.url}sensors`} component={SensorList}/>
|
||||||
<Route exact={true} path={`${this.props.match.url}noauth_probes`} component={NoauthList}/>
|
<Route exact={true} path={`${this.props.match.url}noauth_probes`} component={NoauthList}/>
|
||||||
<Route exact={true} path={`${this.props.match.url}probe_setup`} component={ProbeSetup}/>
|
<Route exact={true} path={`${this.props.match.url}probe_setup`} component={ProbeSetup}/>
|
||||||
|
<Route exact={true} path={`${this.props.match.url}histories`} component={HistoryList}/>
|
||||||
<Redirect to='/error/404' />
|
<Redirect to='/error/404' />
|
||||||
</Switch>
|
</Switch>
|
||||||
</Segment>
|
</Segment>
|
||||||
|
|
|
@ -85,7 +85,7 @@ class LeftMenu extends React.Component<Props, State> {
|
||||||
<Header inverted sub icon='alarm' content='Alerts' />
|
<Header inverted sub icon='alarm' content='Alerts' />
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
|
|
||||||
<Menu.Item name='History' href='/'>
|
<Menu.Item name='History' onClick={(e) => this.props.onChangeUrl('/histories')} >
|
||||||
<Header inverted sub icon='book' content='History' />
|
<Header inverted sub icon='book' content='History' />
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
|
|
||||||
|
|
|
@ -7,6 +7,7 @@ import LeftMenu from './LeftMenu';
|
||||||
|
|
||||||
import TableSortView from '../../../temp/react/components/TableSortView';
|
import TableSortView from '../../../temp/react/components/TableSortView';
|
||||||
import DiscoveryTreeContainer from '@overflow/discovery/react/DiscoveryTree';
|
import DiscoveryTreeContainer from '@overflow/discovery/react/DiscoveryTree';
|
||||||
|
import HistoryListContainer from '@overflow/history/react/HistoryList';
|
||||||
|
|
||||||
export interface Props extends RouteComponentProps<any> {
|
export interface Props extends RouteComponentProps<any> {
|
||||||
}
|
}
|
||||||
|
@ -38,6 +39,7 @@ export class AppLayout extends React.Component<Props, State> {
|
||||||
<Header />
|
<Header />
|
||||||
<Route exact path={`${this.props.match.url}/tablesort`} component={TableSortView} />
|
<Route exact path={`${this.props.match.url}/tablesort`} component={TableSortView} />
|
||||||
<Route exact path={`${this.props.match.url}/discoveryTree`} component={DiscoveryTreeContainer} />
|
<Route exact path={`${this.props.match.url}/discoveryTree`} component={DiscoveryTreeContainer} />
|
||||||
|
<Route exact path={`${this.props.match.url}/historyList`} component={HistoryListContainer} />
|
||||||
<Footer />
|
<Footer />
|
||||||
</Segment>
|
</Segment>
|
||||||
</Container >
|
</Container >
|
||||||
|
|
8
src/ts/@overflow/history/api/model/History.ts
Normal file
8
src/ts/@overflow/history/api/model/History.ts
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
|
||||||
|
interface History {
|
||||||
|
id?: number;
|
||||||
|
createDate?: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default History;
|
31
src/ts/@overflow/history/react/HistoryList.tsx
Normal file
31
src/ts/@overflow/history/react/HistoryList.tsx
Normal file
|
@ -0,0 +1,31 @@
|
||||||
|
import { connect, Dispatch } from 'react-redux';
|
||||||
|
import {
|
||||||
|
HistoryList,
|
||||||
|
StateProps as HistoryStateProps,
|
||||||
|
DispatchProps as HistoryDispatchProps,
|
||||||
|
Props as SignInProps,
|
||||||
|
} from './components/HistoryList';
|
||||||
|
// import SignInState from '../redux/state/SignIn';
|
||||||
|
|
||||||
|
// import * as signinActions from '../redux/action/signIn';
|
||||||
|
import { push as routerPush } from 'react-router-redux';
|
||||||
|
import * as asyncRequestActions from '@overflow/commons/redux/action/asyncRequest';
|
||||||
|
|
||||||
|
export function mapStateToProps(state: any, ownProps?: any): HistoryStateProps {
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function mapDispatchToProps(dispatch: Dispatch<any>, ownProps?: any): HistoryDispatchProps {
|
||||||
|
return {
|
||||||
|
// onSignIn: (signinId: string, signinPw: string) => {
|
||||||
|
// dispatch(asyncRequestActions.request('MemberService', 'signin', signinActions.REQUEST, signinId, signinPw));
|
||||||
|
// },
|
||||||
|
// onRedirectHome: () => {
|
||||||
|
// dispatch(routerPush('/'));
|
||||||
|
// },
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(HistoryList);
|
114
src/ts/@overflow/history/react/components/HistoryList.tsx
Normal file
114
src/ts/@overflow/history/react/components/HistoryList.tsx
Normal file
|
@ -0,0 +1,114 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { Table, Button, Header, Container } from 'semantic-ui-react';
|
||||||
|
import { ListContainer } from '@overflow/commons/react/component/ListContainer';
|
||||||
|
|
||||||
|
import History from '@overflow/history/api/model/History';
|
||||||
|
|
||||||
|
export interface StateProps {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DispatchProps {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export type Props = StateProps & DispatchProps;
|
||||||
|
|
||||||
|
export interface State {
|
||||||
|
sampleList: History[];
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export class HistoryList extends React.Component<Props, State> {
|
||||||
|
|
||||||
|
|
||||||
|
constructor(props: Props, context: State) {
|
||||||
|
super(props, context);
|
||||||
|
this.state = {
|
||||||
|
sampleList: sampleHistory,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
public componentWillMount(): void {
|
||||||
|
console.log('HistoryList');
|
||||||
|
}
|
||||||
|
|
||||||
|
public render(): JSX.Element {
|
||||||
|
|
||||||
|
let historyList: JSX.Element = (
|
||||||
|
<Container fluid>
|
||||||
|
<Table celled selectable striped>
|
||||||
|
<Table.Header>
|
||||||
|
<Table.Row>
|
||||||
|
<Table.HeaderCell textAlign={'center'}>No.</Table.HeaderCell>
|
||||||
|
<Table.HeaderCell textAlign={'center'}>Status</Table.HeaderCell>
|
||||||
|
<Table.HeaderCell textAlign={'center'}>Type</Table.HeaderCell>
|
||||||
|
<Table.HeaderCell textAlign={'center'}>Message</Table.HeaderCell>
|
||||||
|
<Table.HeaderCell textAlign={'center'}>CreateDate</Table.HeaderCell>
|
||||||
|
</Table.Row>
|
||||||
|
</Table.Header>
|
||||||
|
|
||||||
|
<Table.Body>
|
||||||
|
{this.state.sampleList ? this.state.sampleList.map((history: History, index: number) => (
|
||||||
|
<Table.Row key={index} >
|
||||||
|
<Table.Cell textAlign={'center'}>{index + 1}</Table.Cell>
|
||||||
|
<Table.Cell textAlign={'center'}>
|
||||||
|
SP - PROCESS
|
||||||
|
</Table.Cell>
|
||||||
|
<Table.Cell><Header size='small'>SP - Target</Header></Table.Cell>
|
||||||
|
<Table.Cell>Create Target</Table.Cell>
|
||||||
|
<Table.Cell collapsing>{history.createDate}</Table.Cell>
|
||||||
|
</Table.Row>
|
||||||
|
)) : ''}
|
||||||
|
</Table.Body>
|
||||||
|
</Table>
|
||||||
|
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ListContainer
|
||||||
|
contents={historyList}
|
||||||
|
data={this.state.sampleList}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const sampleHistory: any = [
|
||||||
|
{
|
||||||
|
'id':'1',
|
||||||
|
'createDate':'1503287950244',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id':'2',
|
||||||
|
'createDate':'1503287950344',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id':'3',
|
||||||
|
'createDate':'1503287950444',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id':'4',
|
||||||
|
'createDate':'1503287950544',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id':'5',
|
||||||
|
'createDate':'1503287950644',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id':'6',
|
||||||
|
'createDate':'1503287950744',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id':'7',
|
||||||
|
'createDate':'1503287950844',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'id':'8',
|
||||||
|
'createDate':'1503287950944',
|
||||||
|
},
|
||||||
|
];
|
Loading…
Reference in New Issue
Block a user