overflow_backup_2018_0455/test_web_router
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Design edit

Browse Source
This commit is contained in:
sunny 2017-07-12 20:24:35 +09:00
parent 4f682fe79c
commit f6c7c04db1
6 changed files with 88 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
src/ts/containers/test/ProbeDetails.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { Button, Table, Label } from 'semantic-ui-react'; import { Button, Table, Label, Segment, Header } from 'semantic-ui-react';
import { TargetTable } from './Targets'; import { TargetTable } from './Targets';
export class ProbeDetails extends React.Component<any, any> { export class ProbeDetails extends React.Component<any, any> {
@ -40,53 +40,69 @@ export class ProbeDetails extends React.Component<any, any> {
elem = <div></div>; elem = <div></div>;
} else { } else {
elem = elem =
<div>Probe Details... <Segment.Group>
<Table celled={false}> <Segment inverted color='grey'>
<Table.Body> <h4>Probe Details</h4>
<Table.Row> </Segment>
<Table.Cell collapsing> <Segment>
<Label ribbon>Domain</Label> <Table celled={false} basic='very'>
</Table.Cell> <Table.Body>
<Table.Cell>{this.props.probe.domain.name}</Table.Cell> <Table.Row>
</Table.Row> <Table.Cell>
<Table.Row> <Header size='small'>Domain</Header>
<Table.Cell collapsing> </Table.Cell>
<Label ribbon>Status</Label> <Table.Cell>{this.props.probe.domain.name}</Table.Cell>
</Table.Cell> </Table.Row>
<Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell> <Table.Row>
</Table.Row> <Table.Cell>
<Table.Row> <Header size='small'>Status</Header>
<Table.Cell collapsing> </Table.Cell>
<Label ribbon >Host IP</Label> <Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
</Table.Cell> </Table.Row>
<Table.Cell>????</Table.Cell> <Table.Row>
</Table.Row> <Table.Cell>
<Table.Row> <Header size='small'>Host IP</Header>
<Table.Cell collapsing> </Table.Cell>
<Label ribbon >Host Name</Label> <Table.Cell>????</Table.Cell>
</Table.Cell> </Table.Row>
<Table.Cell>????</Table.Cell> <Table.Row>
</Table.Row> <Table.Cell>
<Table.Row> <Header size='small'>Host Name</Header>
<Table.Cell collapsing> </Table.Cell>
<Label ribbon>Authorized at</Label> <Table.Cell>????</Table.Cell>
</Table.Cell> </Table.Row>
<Table.Cell>{this.props.probe.createDate}</Table.Cell> <Table.Row>
</Table.Row> <Table.Cell>
<Table.Row> <Header size='small'>Authorized at</Header>
<Table.Cell collapsing> </Table.Cell>
<Label ribbon>Description</Label> <Table.Cell>{this.props.probe.createDate}</Table.Cell>
</Table.Cell> </Table.Row>
<Table.Cell>{this.props.probe.description}</Table.Cell> <Table.Row>
</Table.Row> <Table.Cell>
</Table.Body> <Header size='small'>Description</Header>
</Table> </Table.Cell>
<Button content='Back' icon='left arrow' labelPosition='left' onClick={this.handleBack} /> <Table.Cell>{this.props.probe.description}</Table.Cell>
<Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} /> </Table.Row>
{this.showStartStopBtn()}
<TargetTable probe={this.props.probe}/> <Table.Row>
</div>; <Table.Cell colSpan='4'>
<Button content='Back' icon='left arrow' labelPosition='left' onClick={this.handleBack} />
<Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
{this.showStartStopBtn()}
</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
</Segment>
<Segment inverted color='grey'>
<h4>Probe's Targets</h4>
</Segment>
<Segment>
<TargetTable probe={this.props.probe}/>
</Segment>
</Segment.Group>;
} }
return ( return (
<div> <div>

4
src/ts/containers/test/Probes.tsx
View File

@ -80,7 +80,7 @@ export class Probes extends React.Component<any, any> {
return ( return (
<div> <div>
<Table celled selectable striped collapsing> <Table selectable striped>
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell> <Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
@ -103,7 +103,7 @@ export class Probes extends React.Component<any, any> {
))} ))}
</Table.Body> </Table.Body>
</Table> </Table>
<div style={{ margin: '20px' }}> <div>
<ProbeDetails probe={this.state.selected} /> <ProbeDetails probe={this.state.selected} />
</div> </div>
</div> </div>

15
src/ts/containers/test/TopBar.tsx
View File

@ -60,10 +60,11 @@ export class TopBar extends React.Component<any, any> {
<div> <div>
<Menu inverted borderless size='tiny'> <Menu inverted borderless size='tiny'>
<Menu.Item> overFlow </Menu.Item>
<Menu.Item href='/' > Home </Menu.Item> <Menu.Item href='/' > Home </Menu.Item>
<Dropdown text='Monitoring' pointing className='link item'> <Dropdown text='Monitoring' pointing className='link item'>
<Dropdown.Menu> <Dropdown.Menu>
<Dropdown.Item> Probe </Dropdown.Item> <Dropdown.Item href='#/test14'> Probe </Dropdown.Item>
<Dropdown.Item>Sensors</Dropdown.Item> <Dropdown.Item>Sensors</Dropdown.Item>
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> </Dropdown>
@ -74,10 +75,10 @@ export class TopBar extends React.Component<any, any> {
<Dropdown.Item>Targets</Dropdown.Item> <Dropdown.Item>Targets</Dropdown.Item>
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> </Dropdown>
<Menu.Item> Dashboard </Menu.Item> <Menu.Item link> Dashboard </Menu.Item>
<Menu.Item> Metrics </Menu.Item> <Menu.Item link> Metrics </Menu.Item>
<Menu.Item> Alert </Menu.Item> <Menu.Item link> Alert </Menu.Item>
<Menu.Item> History </Menu.Item> <Menu.Item link> History </Menu.Item>
<Dropdown text='Custom' pointing className='link item'> <Dropdown text='Custom' pointing className='link item'>
<Dropdown.Menu> <Dropdown.Menu>
<Dropdown.Item href='#/test2'> SignUp </Dropdown.Item> <Dropdown.Item href='#/test2'> SignUp </Dropdown.Item>
@ -90,7 +91,7 @@ export class TopBar extends React.Component<any, any> {
</Dropdown> </Dropdown>
<Menu.Item position='right'> <Menu.Item position='right' link>
<Icon name='setting' size='large' /> <Icon name='setting' size='large' />
</Menu.Item> </Menu.Item>
<Menu.Item onClick={() => { <Menu.Item onClick={() => {
@ -98,7 +99,7 @@ export class TopBar extends React.Component<any, any> {
}}> }}>
<Label color='teal' horizontal>22</Label> <Label color='teal' horizontal>22</Label>
</Menu.Item> </Menu.Item>
<Menu.Item > <Menu.Item link>
<Dropdown icon='user' className='ui pointing dropdown top right'> <Dropdown icon='user' className='ui pointing dropdown top right'>
<Dropdown.Menu > <Dropdown.Menu >
<Dropdown.Item text='Log out' /> <Dropdown.Item text='Log out' />

4
src/ts/containers/test/commons/Tab.tsx
View File

@ -23,13 +23,13 @@ export class Tab extends React.Component<any, any> {
render() { render() {
return ( return (
<div> <div>
<Menu tabular> <Menu pointing secondary>
{this.props.panes.map((pane: any, index: number) => ( {this.props.panes.map((pane: any, index: number) => (
<Menu.Item key={index} name={pane.name} onClick={this.handleClick.bind(this, index)} active={this.state.active === index} /> <Menu.Item key={index} name={pane.name} onClick={this.handleClick.bind(this, index)} active={this.state.active === index} />
))} ))}
</Menu> </Menu>
<Segment> <Segment vertical>
{this.showContents()} {this.showContents()}
</Segment> </Segment>
</div> </div>

8
src/ts/containers/test/layout/Footer.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { Container } from 'semantic-ui-react'; import { Segment } from 'semantic-ui-react';
export class Footer extends React.Component<any, any> { export class Footer extends React.Component<any, any> {
@ -11,9 +11,9 @@ export class Footer extends React.Component<any, any> {
render() { render() {
return ( return (
<Container textAlign='center'> <Segment vertical textAlign='center' size='tiny'>
<div>Copyright LOAFLE.</div> Copyright LOAFLE.
</Container> </Segment>
); );
} }
} }

10
src/ts/containers/test/layout/Layout.tsx
View File

@ -1,5 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { Container, Menu, Sidebar, Segment, Icon } from 'semantic-ui-react'; import { Container, Menu, Sidebar, Segment, Icon, Breadcrumb } from 'semantic-ui-react';
import { Header } from './Header'; import { Header } from './Header';
import { Footer } from './Footer'; import { Footer } from './Footer';
@ -52,6 +52,14 @@ export class Layout extends React.Component<any, any> {
</Sidebar> </Sidebar>
<Sidebar.Pusher > <Sidebar.Pusher >
<Breadcrumb style={{ padding: '5px 20px 0px' }} size='mini'>
<Breadcrumb.Section link>Home</Breadcrumb.Section>
<Breadcrumb.Divider icon='right angle' />
<Breadcrumb.Section link>Monitoring</Breadcrumb.Section>
<Breadcrumb.Divider icon='right angle' />
<Breadcrumb.Section active>Probe</Breadcrumb.Section>
</Breadcrumb>
<Segment vertical> <Segment vertical>
<Container> <Container>
<Router history={history} > <Router history={history} >