Design edit
This commit is contained in:
sunny
parent
4f682fe79c
commit
f6c7c04db1
@ -1,5 +1,5 @@
|
||||
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';
|
||||
|
||||
export class ProbeDetails extends React.Component<any, any> {
|
||||
@ -40,53 +40,69 @@ export class ProbeDetails extends React.Component<any, any> {
|
||||
elem = <div></div>;
|
||||
} else {
|
||||
elem =
|
||||
<div>Probe Details...
|
||||
<Table celled={false}>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
<Label ribbon>Domain</Label>
|
||||
</Table.Cell>
|
||||
<Table.Cell>{this.props.probe.domain.name}</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
<Label ribbon>Status</Label>
|
||||
</Table.Cell>
|
||||
<Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
<Label ribbon >Host IP</Label>
|
||||
</Table.Cell>
|
||||
<Table.Cell>????</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
<Label ribbon >Host Name</Label>
|
||||
</Table.Cell>
|
||||
<Table.Cell>????</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
<Label ribbon>Authorized at</Label>
|
||||
</Table.Cell>
|
||||
<Table.Cell>{this.props.probe.createDate}</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell collapsing>
|
||||
<Label ribbon>Description</Label>
|
||||
</Table.Cell>
|
||||
<Table.Cell>{this.props.probe.description}</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table>
|
||||
<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()}
|
||||
<Segment.Group>
|
||||
<Segment inverted color='grey'>
|
||||
<h4>Probe Details</h4>
|
||||
</Segment>
|
||||
<Segment>
|
||||
<Table celled={false} basic='very'>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Header size='small'>Domain</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>{this.props.probe.domain.name}</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Header size='small'>Status</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Header size='small'>Host IP</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>????</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Header size='small'>Host Name</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>????</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Header size='small'>Authorized at</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>{this.props.probe.createDate}</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell>
|
||||
<Header size='small'>Description</Header>
|
||||
</Table.Cell>
|
||||
<Table.Cell>{this.props.probe.description}</Table.Cell>
|
||||
</Table.Row>
|
||||
|
||||
<TargetTable probe={this.props.probe}/>
|
||||
</div>;
|
||||
<Table.Row>
|
||||
<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 (
|
||||
<div>
|
||||
|
||||
@ -80,7 +80,7 @@ export class Probes extends React.Component<any, any> {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Table celled selectable striped collapsing>
|
||||
<Table selectable striped>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
|
||||
@ -103,7 +103,7 @@ export class Probes extends React.Component<any, any> {
|
||||
))}
|
||||
</Table.Body>
|
||||
</Table>
|
||||
<div style={{ margin: '20px' }}>
|
||||
<div>
|
||||
<ProbeDetails probe={this.state.selected} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -60,10 +60,11 @@ export class TopBar extends React.Component<any, any> {
|
||||
|
||||
<div>
|
||||
<Menu inverted borderless size='tiny'>
|
||||
<Menu.Item> overFlow </Menu.Item>
|
||||
<Menu.Item href='/' > Home </Menu.Item>
|
||||
<Dropdown text='Monitoring' pointing className='link item'>
|
||||
<Dropdown.Menu>
|
||||
<Dropdown.Item> Probe </Dropdown.Item>
|
||||
<Dropdown.Item href='#/test14'> Probe </Dropdown.Item>
|
||||
<Dropdown.Item>Sensors</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
@ -74,10 +75,10 @@ export class TopBar extends React.Component<any, any> {
|
||||
<Dropdown.Item>Targets</Dropdown.Item>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
<Menu.Item> Dashboard </Menu.Item>
|
||||
<Menu.Item> Metrics </Menu.Item>
|
||||
<Menu.Item> Alert </Menu.Item>
|
||||
<Menu.Item> History </Menu.Item>
|
||||
<Menu.Item link> Dashboard </Menu.Item>
|
||||
<Menu.Item link> Metrics </Menu.Item>
|
||||
<Menu.Item link> Alert </Menu.Item>
|
||||
<Menu.Item link> History </Menu.Item>
|
||||
<Dropdown text='Custom' pointing className='link item'>
|
||||
<Dropdown.Menu>
|
||||
<Dropdown.Item href='#/test2'> SignUp </Dropdown.Item>
|
||||
@ -90,7 +91,7 @@ export class TopBar extends React.Component<any, any> {
|
||||
</Dropdown>
|
||||
|
||||
|
||||
<Menu.Item position='right'>
|
||||
<Menu.Item position='right' link>
|
||||
<Icon name='setting' size='large' />
|
||||
</Menu.Item>
|
||||
<Menu.Item onClick={() => {
|
||||
@ -98,7 +99,7 @@ export class TopBar extends React.Component<any, any> {
|
||||
}}>
|
||||
<Label color='teal' horizontal>22</Label>
|
||||
</Menu.Item>
|
||||
<Menu.Item >
|
||||
<Menu.Item link>
|
||||
<Dropdown icon='user' className='ui pointing dropdown top right'>
|
||||
<Dropdown.Menu >
|
||||
<Dropdown.Item text='Log out' />
|
||||
|
||||
@ -23,13 +23,13 @@ export class Tab extends React.Component<any, any> {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Menu tabular>
|
||||
<Menu pointing secondary>
|
||||
{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>
|
||||
|
||||
<Segment>
|
||||
<Segment vertical>
|
||||
{this.showContents()}
|
||||
</Segment>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
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> {
|
||||
|
||||
@ -11,9 +11,9 @@ export class Footer extends React.Component<any, any> {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Container textAlign='center'>
|
||||
<div>Copyright LOAFLE.</div>
|
||||
</Container>
|
||||
<Segment vertical textAlign='center' size='tiny'>
|
||||
Copyright LOAFLE.
|
||||
</Segment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
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 { Footer } from './Footer';
|
||||
|
||||
@ -52,6 +52,14 @@ export class Layout extends React.Component<any, any> {
|
||||
</Sidebar>
|
||||
|
||||
<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>
|
||||
<Container>
|
||||
<Router history={history} >
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user