layout
This commit is contained in:
parent
ea6deee6b7
commit
5dfc296761
|
@ -34,6 +34,7 @@ export class AppLayout extends React.Component<Props, State> {
|
|||
<Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}>
|
||||
<Header />
|
||||
<TitleBarContainer location={this.props.location.pathname}/>
|
||||
<Segment basic>
|
||||
<Switch>
|
||||
<Route exact={true} path={`${this.props.match.url}`} component={Home}/>
|
||||
<Route exact={true} path={`${this.props.match.url}probes`} component={ProbeList}/>
|
||||
|
@ -43,6 +44,7 @@ export class AppLayout extends React.Component<Props, State> {
|
|||
<Route exact={true} path={`${this.props.match.url}probe_setup`} component={ProbeSetup}/>
|
||||
<Redirect to='/error/404' />
|
||||
</Switch>
|
||||
</Segment>
|
||||
<Footer />
|
||||
</Segment>
|
||||
</Container >
|
||||
|
|
|
@ -52,12 +52,14 @@ export class ProbeDetailLayout extends React.Component<Props, State> {
|
|||
<Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}>
|
||||
<Header />
|
||||
<TitleBarContainer sub={sub} location={this.props.location.pathname}/>
|
||||
<Segment basic>
|
||||
<Switch>
|
||||
<Route exact={true} path={`${this.props.match.url}/:id`} component={ProbeDetail} />
|
||||
<Route exact={true} path={`${this.props.match.url}/:id/host`} component={ProbeHost} />
|
||||
<Route exact={true} path={`${this.props.match.url}/:id/history`} component={ProbeHistory} />
|
||||
<Route exact={true} path={`${this.props.match.url}/:id/targets`} component={TargetList} />
|
||||
</Switch>
|
||||
</Segment>
|
||||
<Footer />
|
||||
</Segment>
|
||||
</Container >
|
||||
|
|
|
@ -47,6 +47,7 @@ class SensorDetailLayout extends React.Component<Props, State> {
|
|||
<Header />
|
||||
<TitleBarContainer sub={sub} location={this.props.location.pathname} />
|
||||
{/*<TitleBar title='Sensor Details' sub={sub} />*/}
|
||||
<Segment basic>
|
||||
<Switch>
|
||||
<Route exact={true} path={`${this.props.match.url}/:id/`} component={SensorDetailInfo} />
|
||||
<Route exact={true} path={`${this.props.match.url}/:id/info`} component={SensorDetailInfo} />
|
||||
|
@ -56,6 +57,7 @@ class SensorDetailLayout extends React.Component<Props, State> {
|
|||
<Route exact={true} path={`${this.props.match.url}/setup`} component={SensorSetup} />
|
||||
<Route exact={true} path={`${this.props.match.url}/:id/tree`} component={SensorItemTree} />
|
||||
</Switch>
|
||||
</Segment>
|
||||
<Footer />
|
||||
</Segment>
|
||||
</Container >
|
||||
|
|
|
@ -43,10 +43,12 @@ export class TargetDetailLayout extends React.Component<Props, State> {
|
|||
<Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}>
|
||||
<Header />
|
||||
<TitleBarContainer title='Target Details' sub={sub} location={this.props.location.pathname} />
|
||||
<Segment basic>
|
||||
<Switch>
|
||||
<Route exact={true} path={`${this.props.match.url}/:id`} component={TargetDetail} />
|
||||
<Route exact={true} path={`${this.props.match.url}/:id/sensor`} component={SensorList} />
|
||||
</Switch>
|
||||
</Segment>
|
||||
<Footer />
|
||||
</Segment>
|
||||
</Container >
|
||||
|
|
|
@ -79,11 +79,13 @@ export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorI
|
|||
<List.Icon name={this.state.categoryState[key] ? 'chevron up' : 'chevron down'}
|
||||
onClick={this.onTypeClick.bind(this, key)} />
|
||||
<List.Content>
|
||||
<List.Header> <Checkbox label={data.metaSensorItemType.name} checked={this.state.categoryCheckState[key]} onChange={
|
||||
<List.Header>
|
||||
<Checkbox label={data.metaSensorItemType.name} checked={this.state.categoryCheckState[key]} onChange={
|
||||
(event: React.FormEvent<HTMLInputElement>, checkProps: CheckboxProps) => {
|
||||
this.onTypeCheckCBox(key, checkProps, data);
|
||||
}} /> </List.Header>
|
||||
<List.Description>Category</List.Description>
|
||||
}} />
|
||||
</List.Header>
|
||||
<List.Description style={{marginLeft:'26px'}}>Category</List.Description>
|
||||
{this.state.categoryState[key] ? this.ViewSensorItem(data.metaSensorItemList, key) : ''}
|
||||
</List.Content>
|
||||
</List.Item>,
|
||||
|
@ -112,7 +114,7 @@ export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorI
|
|||
(event: React.FormEvent<HTMLInputElement>, checkProps: CheckboxProps) => {
|
||||
this.onItemCheckCBox(parentKey, checkProps, item);
|
||||
}} /></List.Header>
|
||||
<List.Description>Sensor Item</List.Description>
|
||||
<List.Description style={{marginLeft:'26px'}}>Sensor Item</List.Description>
|
||||
</List.Content>
|
||||
</List.Item>
|
||||
</List.List>,
|
||||
|
@ -124,13 +126,13 @@ export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorI
|
|||
|
||||
public render(): JSX.Element {
|
||||
return (
|
||||
<Container>
|
||||
<Container fluid>
|
||||
<List selection>
|
||||
{this.ViewSensorItemType()}
|
||||
</List>
|
||||
<Button label='test' onClick={() => {
|
||||
<Button primary floated='right' onClick={() => {
|
||||
console.log(this.selectedItemMap);
|
||||
}} />
|
||||
}}>Test</Button><br /><br />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -97,7 +97,7 @@ export class ProbeDetailInfo extends React.Component<Props, State> {
|
|||
|
||||
public render(): JSX.Element {
|
||||
return (
|
||||
<Container>
|
||||
<Container fluid>
|
||||
<Table celled={false} >
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
|
@ -143,16 +143,9 @@ export class ProbeDetailInfo extends React.Component<Props, State> {
|
|||
<Table.Cell>{this.state.probe.description}</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
<Table.Footer>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell colSpan='2'>
|
||||
</Table>
|
||||
{this.showStopBtn()}
|
||||
<Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
|
||||
</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Footer>
|
||||
|
||||
</Table>
|
||||
{/*{this.renderDiscovery()}*/}
|
||||
</Container>
|
||||
);
|
||||
|
|
|
@ -65,7 +65,7 @@ export class ProbeHost extends React.Component<Props, State> {
|
|||
|
||||
public render(): JSX.Element {
|
||||
return (
|
||||
<Container>
|
||||
<Container fluid>
|
||||
<Table celled={false}>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
|
|
|
@ -30,7 +30,7 @@ export class SensorConfiguration extends React.Component<SensorConfigurationProp
|
|||
|
||||
|
||||
public render(): JSX.Element {
|
||||
let steps = [<CrawlerSelector />, <SensorItemTree />, <ETCSelector />];
|
||||
let steps = [<CrawlerSelector />, <Segment vertical><SensorItemTree /></Segment>, <ETCSelector />];
|
||||
|
||||
return (
|
||||
<ConfigStepper steps={steps} />
|
||||
|
@ -121,21 +121,21 @@ export class ConfigStepper extends React.Component<ConfigStepperProps, ConfigSte
|
|||
<Container fluid>
|
||||
<Step.Group fluid>
|
||||
<Step active={this.handleActive(1)} completed={this.handleCompleted(1)}>
|
||||
<Icon name='settings' />
|
||||
<Icon name='settings' color='grey'/>
|
||||
<Step.Content title='Step 1' description='골라골라 크롤러를 골라' />
|
||||
</Step>
|
||||
|
||||
<Step active={this.handleActive(2)} completed={this.handleCompleted(2)}>
|
||||
<Icon name='list ul' />
|
||||
<Icon name='list ul' color='grey'/>
|
||||
<Step.Content title='Step 2' description='골라골라 아이템도 골라' />
|
||||
</Step>
|
||||
|
||||
<Step active={this.handleActive(3)} completed={this.handleCompleted(3)}>
|
||||
<Icon name='options' />
|
||||
<Icon name='options' color='grey'/>
|
||||
<Step.Content title='Step 3' description='나머지도 골라 아 빨리' />
|
||||
</Step>
|
||||
</Step.Group>
|
||||
<br />
|
||||
|
||||
{this.showContent()}
|
||||
<br />
|
||||
<Button.Group floated='right'> {/* floated 사용시 레이아웃 깨지는 현상 */}
|
||||
|
@ -145,7 +145,6 @@ export class ConfigStepper extends React.Component<ConfigStepperProps, ConfigSte
|
|||
<Button content='Next' icon='right arrow' labelPosition='right' positive
|
||||
onClick={this.handleNext.bind(this)} disabled={this.checkNextDisabled()} />
|
||||
</Button.Group>
|
||||
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
@ -234,8 +233,7 @@ export class CrawlerSelector extends React.Component<CrawlerSelectorProps, Crawl
|
|||
public render(): JSX.Element {
|
||||
|
||||
return (
|
||||
<Container fluid>
|
||||
<Segment raised>
|
||||
<Segment vertical>
|
||||
<Loader active={this.state.isInstalling} size='large' >Installing the Crawler</Loader>
|
||||
<Icon name='checkmark' /> Choose a Crawler type.
|
||||
<br />
|
||||
|
@ -255,7 +253,6 @@ export class CrawlerSelector extends React.Component<CrawlerSelectorProps, Crawl
|
|||
</Grid.Row>
|
||||
</Grid>
|
||||
</Segment>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -323,7 +320,7 @@ export class CrawlerAuthInputs extends React.Component<CrawlerAuthInputsProps, C
|
|||
let itemValues = item.keyValue.split('|');
|
||||
let idx = 0;
|
||||
for (let itemValue of itemValues) {
|
||||
elem.push(<Radio
|
||||
elem.push(<Form.Radio
|
||||
key={idx++}
|
||||
label={itemValue}
|
||||
name='radioGroup'
|
||||
|
@ -332,10 +329,14 @@ export class CrawlerAuthInputs extends React.Component<CrawlerAuthInputsProps, C
|
|||
}
|
||||
}
|
||||
|
||||
return <Table.Row key={index}>
|
||||
return (
|
||||
<Table.Row key={index}>
|
||||
<Table.Cell collapsing>{item.keyName}</Table.Cell>
|
||||
<Table.Cell >{elem}</Table.Cell>
|
||||
</Table.Row >;
|
||||
<Table.Cell >
|
||||
<Form.Group inline>{elem}</Form.Group>
|
||||
</Table.Cell>
|
||||
</Table.Row >
|
||||
);
|
||||
}
|
||||
|
||||
public render(): JSX.Element {
|
||||
|
@ -343,7 +344,8 @@ export class CrawlerAuthInputs extends React.Component<CrawlerAuthInputsProps, C
|
|||
return null;
|
||||
}
|
||||
return (
|
||||
<Table basic='very' celled collapsing >
|
||||
<Segment style={{width:'350px'}}>
|
||||
<Table basic='very' celled >
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell colSpan='2'>{this.props.crawler} 접속 정보</Table.HeaderCell>
|
||||
|
@ -358,18 +360,18 @@ export class CrawlerAuthInputs extends React.Component<CrawlerAuthInputsProps, C
|
|||
|
||||
<Table.Footer>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell />
|
||||
<Table.HeaderCell colSpan='2'>
|
||||
<Button primary floated={'right'} onClick={this.handleVerify.bind(this)} loading={this.state.isVerifying}>Verify</Button>
|
||||
</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
|
||||
</Table.Footer>
|
||||
</Table>
|
||||
</Segment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export interface ETCSelectorProps {
|
||||
|
||||
}
|
||||
|
@ -398,33 +400,29 @@ export class ETCSelector extends React.Component<ETCSelectorProps, ETCSelectorSt
|
|||
Interval
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Form.Field>
|
||||
<Radio
|
||||
<Form.Group inline>
|
||||
<Form.Radio
|
||||
label='5 seconds'
|
||||
name='radioGroup'
|
||||
value='5'
|
||||
checked={this.state.interval === 5}
|
||||
onChange={this.handleIntervalChange}
|
||||
/>
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<Radio
|
||||
<Form.Radio
|
||||
label='10 seconds'
|
||||
name='radioGroup'
|
||||
value='10'
|
||||
checked={this.state.interval === 10}
|
||||
onChange={this.handleIntervalChange}
|
||||
/>
|
||||
</Form.Field>
|
||||
<Form.Field>
|
||||
<Radio
|
||||
<Form.Radio
|
||||
label='15 seconds'
|
||||
name='radioGroup'
|
||||
value='15'
|
||||
checked={this.state.interval === 15}
|
||||
onChange={this.handleIntervalChange}
|
||||
/>
|
||||
</Form.Field>
|
||||
</Form.Group>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
|
|
|
@ -93,8 +93,6 @@ export class SensorBasicInfo extends React.Component<SensorBasicInfoProps, Senso
|
|||
public render(): JSX.Element {
|
||||
return (
|
||||
<Container fluid>
|
||||
<Header as='h3' dividing>Sensor Details</Header>
|
||||
|
||||
<Table celled>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
|
|
|
@ -56,8 +56,6 @@ export class SensorDetailInfo extends React.Component<SensorDetailInfoProps, Sen
|
|||
public render(): JSX.Element {
|
||||
return (
|
||||
<Container fluid>
|
||||
|
||||
|
||||
<Table celled>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
|
|
|
@ -36,12 +36,11 @@ export class SensorDetailItems extends React.Component<Props, State> {
|
|||
public render(): JSX.Element {
|
||||
return (
|
||||
<Container fluid>
|
||||
<Header as='h3' dividing>Sensor Item</Header>
|
||||
<Table celled>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell>No.</Table.HeaderCell>
|
||||
<Table.HeaderCell>Tyte</Table.HeaderCell>
|
||||
<Table.HeaderCell>Type</Table.HeaderCell>
|
||||
<Table.HeaderCell>Name</Table.HeaderCell>
|
||||
<Table.HeaderCell>Key</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
|
|
|
@ -141,17 +141,15 @@ export class SensorList extends React.Component<SensorListProps, SensorListState
|
|||
<Table.Cell negative={this.checkCellStatus(sensor.metaSensorStatus)} textAlign={'center'}>
|
||||
{sensor.metaSensorStatus.name}
|
||||
</Table.Cell>
|
||||
<Table.Cell>{sensor.metaCrawler.name}</Table.Cell>
|
||||
<Table.Cell><Header size='small'>{sensor.metaCrawler.name}</Header></Table.Cell>
|
||||
<Table.Cell>{sensor.description}</Table.Cell>
|
||||
<Table.Cell>to do</Table.Cell>
|
||||
{/* <Table.Cell collapsing>{this.showStartStopBtn(sensor.metaSensorStatus)}</Table.Cell> */}
|
||||
</Table.Row>
|
||||
))}
|
||||
</Table.Body>
|
||||
<Table.Footer>
|
||||
<Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddSensor.bind(this)} />
|
||||
</Table.Footer>
|
||||
</Table>
|
||||
<Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddSensor.bind(this)} />
|
||||
|
||||
</Container>
|
||||
);
|
||||
|
|
|
@ -117,7 +117,6 @@ export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, Targe
|
|||
public render(): JSX.Element {
|
||||
return (
|
||||
<Container fluid>
|
||||
<Header as='h3' dividing>Target Info</Header>
|
||||
<Table celled={false}>
|
||||
<Table.Body>
|
||||
<Table.Row>
|
||||
|
@ -157,15 +156,8 @@ export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, Targe
|
|||
</Table.Row>
|
||||
|
||||
</Table.Body>
|
||||
<Table.Footer>
|
||||
<Table.Row>
|
||||
<Table.HeaderCell colSpan='2'>
|
||||
<Button primary floated={'right'} negative onClick={this.handleRemoveTarget}>Remove</Button>
|
||||
</Table.HeaderCell>
|
||||
</Table.Row>
|
||||
</Table.Footer>
|
||||
</Table>
|
||||
|
||||
<Button primary floated={'right'} negative onClick={this.handleRemoveTarget}>Remove</Button>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -71,8 +71,8 @@ export class TargetList extends React.Component<Props, State> {
|
|||
<Container fluid>
|
||||
{/*search bar */}
|
||||
<Button content='Discovery' icon='search' labelPosition='left' floated='right' positive onClick={this.handleAddTarget.bind(this)} />
|
||||
<br /><br />
|
||||
<TargetTable onSelectTarget={this.handleSelectedTarget}/>
|
||||
<br />
|
||||
|
||||
<Modal
|
||||
open={this.state.openAddTarget}
|
||||
|
|
Loading…
Reference in New Issue
Block a user