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

layout

Browse Source
This commit is contained in:
sunny 2017-07-27 16:17:38 +09:00
parent ea6deee6b7
commit 5dfc296761
14 changed files with 116 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/ts/@overflow/app/views/layout/AppLayout.tsx
View File

@ -34,15 +34,17 @@ export class AppLayout extends React.Component<Props, State> {
<Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}> <Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}>
<Header /> <Header />
<TitleBarContainer location={this.props.location.pathname}/> <TitleBarContainer location={this.props.location.pathname}/>
<Switch> <Segment basic>
<Route exact={true} path={`${this.props.match.url}`} component={Home}/> <Switch>
<Route exact={true} path={`${this.props.match.url}probes`} component={ProbeList}/> <Route exact={true} path={`${this.props.match.url}`} component={Home}/>
<Route exact={true} path={`${this.props.match.url}targets`} component={TargetList}/> <Route exact={true} path={`${this.props.match.url}probes`} component={ProbeList}/>
<Route exact={true} path={`${this.props.match.url}sensors`} component={SensorList}/> <Route exact={true} path={`${this.props.match.url}targets`} component={TargetList}/>
<Route exact={true} path={`${this.props.match.url}noauth_probes`} component={NoauthList}/> <Route exact={true} path={`${this.props.match.url}sensors`} component={SensorList}/>
<Route exact={true} path={`${this.props.match.url}probe_setup`} component={ProbeSetup}/> <Route exact={true} path={`${this.props.match.url}noauth_probes`} component={NoauthList}/>
<Redirect to='/error/404' /> <Route exact={true} path={`${this.props.match.url}probe_setup`} component={ProbeSetup}/>
</Switch> <Redirect to='/error/404' />
</Switch>
</Segment>
<Footer /> <Footer />
</Segment> </Segment>
</Container > </Container >

14
src/ts/@overflow/app/views/layout/ProbeDetailLayout.tsx
View File

@ -52,12 +52,14 @@ export class ProbeDetailLayout extends React.Component<Props, State> {
<Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}> <Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}>
<Header /> <Header />
<TitleBarContainer sub={sub} location={this.props.location.pathname}/> <TitleBarContainer sub={sub} location={this.props.location.pathname}/>
<Switch> <Segment basic>
<Route exact={true} path={`${this.props.match.url}/:id`} component={ProbeDetail} /> <Switch>
<Route exact={true} path={`${this.props.match.url}/:id/host`} component={ProbeHost} /> <Route exact={true} path={`${this.props.match.url}/:id`} component={ProbeDetail} />
<Route exact={true} path={`${this.props.match.url}/:id/history`} component={ProbeHistory} /> <Route exact={true} path={`${this.props.match.url}/:id/host`} component={ProbeHost} />
<Route exact={true} path={`${this.props.match.url}/:id/targets`} component={TargetList} /> <Route exact={true} path={`${this.props.match.url}/:id/history`} component={ProbeHistory} />
</Switch> <Route exact={true} path={`${this.props.match.url}/:id/targets`} component={TargetList} />
</Switch>
</Segment>
<Footer /> <Footer />
</Segment> </Segment>
</Container > </Container >

20
src/ts/@overflow/app/views/layout/SensorDetailLayout.tsx
View File

@ -47,15 +47,17 @@ class SensorDetailLayout extends React.Component<Props, State> {
<Header /> <Header />
<TitleBarContainer sub={sub} location={this.props.location.pathname} /> <TitleBarContainer sub={sub} location={this.props.location.pathname} />
{/*<TitleBar title='Sensor Details' sub={sub} />*/} {/*<TitleBar title='Sensor Details' sub={sub} />*/}
<Switch> <Segment basic>
<Route exact={true} path={`${this.props.match.url}/:id/`} component={SensorDetailInfo} /> <Switch>
<Route exact={true} path={`${this.props.match.url}/:id/info`} component={SensorDetailInfo} /> <Route exact={true} path={`${this.props.match.url}/:id/`} component={SensorDetailInfo} />
<Route exact={true} path={`${this.props.match.url}/:id/items`} component={SensorDetailItems} /> <Route exact={true} path={`${this.props.match.url}/:id/info`} component={SensorDetailInfo} />
{/*<Route path={`${this.props.match.url}/:id/history/`} component={EmailConfirm}/>*/} <Route exact={true} path={`${this.props.match.url}/:id/items`} component={SensorDetailItems} />
<Route exact={true} path={`${this.props.match.url}/:id/setup`} component={SensorSetup} /> {/*<Route path={`${this.props.match.url}/:id/history/`} component={EmailConfirm}/>*/}
<Route exact={true} path={`${this.props.match.url}/setup`} component={SensorSetup} /> <Route exact={true} path={`${this.props.match.url}/:id/setup`} component={SensorSetup} />
<Route exact={true} path={`${this.props.match.url}/:id/tree`} component={SensorItemTree} /> <Route exact={true} path={`${this.props.match.url}/setup`} component={SensorSetup} />
</Switch> <Route exact={true} path={`${this.props.match.url}/:id/tree`} component={SensorItemTree} />
</Switch>
</Segment>
<Footer /> <Footer />
</Segment> </Segment>
</Container > </Container >

10
src/ts/@overflow/app/views/layout/TargetDetailLayout.tsx
View File

@ -43,10 +43,12 @@ export class TargetDetailLayout extends React.Component<Props, State> {
<Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}> <Segment vertical style={{ margin: '0 0 0 210px', padding: '0' }}>
<Header /> <Header />
<TitleBarContainer title='Target Details' sub={sub} location={this.props.location.pathname} /> <TitleBarContainer title='Target Details' sub={sub} location={this.props.location.pathname} />
<Switch> <Segment basic>
<Route exact={true} path={`${this.props.match.url}/:id`} component={TargetDetail} /> <Switch>
<Route exact={true} path={`${this.props.match.url}/:id/sensor`} component={SensorList} /> <Route exact={true} path={`${this.props.match.url}/:id`} component={TargetDetail} />
</Switch> <Route exact={true} path={`${this.props.match.url}/:id/sensor`} component={SensorList} />
</Switch>
</Segment>
<Footer /> <Footer />
</Segment> </Segment>
</Container > </Container >

20
src/ts/@overflow/meta/react/components/SensorItemTree.tsx
View File

@ -79,11 +79,13 @@ export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorI
<List.Icon name={this.state.categoryState[key] ? 'chevron up' : 'chevron down'} <List.Icon name={this.state.categoryState[key] ? 'chevron up' : 'chevron down'}
onClick={this.onTypeClick.bind(this, key)} /> onClick={this.onTypeClick.bind(this, key)} />
<List.Content> <List.Content>
<List.Header> <Checkbox label={data.metaSensorItemType.name} checked={this.state.categoryCheckState[key]} onChange={ <List.Header>
(event: React.FormEvent<HTMLInputElement>, checkProps: CheckboxProps) => { <Checkbox label={data.metaSensorItemType.name} checked={this.state.categoryCheckState[key]} onChange={
this.onTypeCheckCBox(key, checkProps, data); (event: React.FormEvent<HTMLInputElement>, checkProps: CheckboxProps) => {
}} /> </List.Header> this.onTypeCheckCBox(key, checkProps, data);
<List.Description>Category</List.Description> }} />
</List.Header>
<List.Description style={{marginLeft:'26px'}}>Category</List.Description>
{this.state.categoryState[key] ? this.ViewSensorItem(data.metaSensorItemList, key) : ''} {this.state.categoryState[key] ? this.ViewSensorItem(data.metaSensorItemList, key) : ''}
</List.Content> </List.Content>
</List.Item>, </List.Item>,
@ -112,7 +114,7 @@ export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorI
(event: React.FormEvent<HTMLInputElement>, checkProps: CheckboxProps) => { (event: React.FormEvent<HTMLInputElement>, checkProps: CheckboxProps) => {
this.onItemCheckCBox(parentKey, checkProps, item); this.onItemCheckCBox(parentKey, checkProps, item);
}} /></List.Header> }} /></List.Header>
<List.Description>Sensor Item</List.Description> <List.Description style={{marginLeft:'26px'}}>Sensor Item</List.Description>
</List.Content> </List.Content>
</List.Item> </List.Item>
</List.List>, </List.List>,
@ -124,13 +126,13 @@ export class SensorItemTree extends React.Component<SensorItemTreeProps, SensorI
public render(): JSX.Element { public render(): JSX.Element {
return ( return (
<Container> <Container fluid>
<List selection> <List selection>
{this.ViewSensorItemType()} {this.ViewSensorItemType()}
</List> </List>
<Button label='test' onClick={() => { <Button primary floated='right' onClick={() => {
console.log(this.selectedItemMap); console.log(this.selectedItemMap);
}} /> }}>Test</Button><br /><br />
</Container> </Container>
); );
} }

13
src/ts/@overflow/probe/react/components/ProbeDetailInfo.tsx
View File

@ -97,7 +97,7 @@ export class ProbeDetailInfo extends React.Component<Props, State> {
public render(): JSX.Element { public render(): JSX.Element {
return ( return (
<Container> <Container fluid>
<Table celled={false} > <Table celled={false} >
<Table.Body> <Table.Body>
<Table.Row> <Table.Row>
@ -143,16 +143,9 @@ export class ProbeDetailInfo extends React.Component<Props, State> {
<Table.Cell>{this.state.probe.description}</Table.Cell> <Table.Cell>{this.state.probe.description}</Table.Cell>
</Table.Row> </Table.Row>
</Table.Body> </Table.Body>
<Table.Footer>
<Table.Row>
<Table.HeaderCell colSpan='2'>
{this.showStopBtn()}
<Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
</Table.HeaderCell>
</Table.Row>
</Table.Footer>
</Table> </Table>
{this.showStopBtn()}
<Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
{/*{this.renderDiscovery()}*/} {/*{this.renderDiscovery()}*/}
</Container> </Container>
); );

2
src/ts/@overflow/probe/react/components/ProbeHost.tsx
View File

@ -65,7 +65,7 @@ export class ProbeHost extends React.Component<Props, State> {
public render(): JSX.Element { public render(): JSX.Element {
return ( return (
<Container> <Container fluid>
<Table celled={false}> <Table celled={false}>
<Table.Body> <Table.Body>
<Table.Row> <Table.Row>

122
src/ts/@overflow/sensor/react/components/SensorConfiguration.tsx
View File

@ -30,7 +30,7 @@ export class SensorConfiguration extends React.Component<SensorConfigurationProp
public render(): JSX.Element { public render(): JSX.Element {
let steps = [<CrawlerSelector />, <SensorItemTree />, <ETCSelector />]; let steps = [<CrawlerSelector />, <Segment vertical><SensorItemTree /></Segment>, <ETCSelector />];
return ( return (
<ConfigStepper steps={steps} /> <ConfigStepper steps={steps} />
@ -121,21 +121,21 @@ export class ConfigStepper extends React.Component<ConfigStepperProps, ConfigSte
<Container fluid> <Container fluid>
<Step.Group fluid> <Step.Group fluid>
<Step active={this.handleActive(1)} completed={this.handleCompleted(1)}> <Step active={this.handleActive(1)} completed={this.handleCompleted(1)}>
<Icon name='settings' /> <Icon name='settings' color='grey'/>
<Step.Content title='Step 1' description='골라골라 크롤러를 골라' /> <Step.Content title='Step 1' description='골라골라 크롤러를 골라' />
</Step> </Step>
<Step active={this.handleActive(2)} completed={this.handleCompleted(2)}> <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.Content title='Step 2' description='골라골라 아이템도 골라' />
</Step> </Step>
<Step active={this.handleActive(3)} completed={this.handleCompleted(3)}> <Step active={this.handleActive(3)} completed={this.handleCompleted(3)}>
<Icon name='options' /> <Icon name='options' color='grey'/>
<Step.Content title='Step 3' description='나머지도 골라 아 빨리' /> <Step.Content title='Step 3' description='나머지도 골라 아 빨리' />
</Step> </Step>
</Step.Group> </Step.Group>
<br />
{this.showContent()} {this.showContent()}
<br /> <br />
<Button.Group floated='right'> {/* floated 사용시 레이아웃 깨지는 현상 */} <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 <Button content='Next' icon='right arrow' labelPosition='right' positive
onClick={this.handleNext.bind(this)} disabled={this.checkNextDisabled()} /> onClick={this.handleNext.bind(this)} disabled={this.checkNextDisabled()} />
</Button.Group> </Button.Group>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</Container> </Container>
); );
} }
@ -234,28 +233,26 @@ export class CrawlerSelector extends React.Component<CrawlerSelectorProps, Crawl
public render(): JSX.Element { public render(): JSX.Element {
return ( return (
<Container fluid> <Segment vertical>
<Segment raised> <Loader active={this.state.isInstalling} size='large' >Installing the Crawler</Loader>
<Loader active={this.state.isInstalling} size='large' >Installing the Crawler</Loader> <Icon name='checkmark' /> Choose a Crawler type.
<Icon name='checkmark' /> Choose a Crawler type. <br />
<br /> <br />
<br /> <Grid>
<Grid> <Grid.Row>
<Grid.Row> <Grid.Column width='4'>
<Grid.Column width='4'> <Dropdown openOnFocus
<Dropdown openOnFocus placeholder='Select Crawler' selection options={this.crawlers} onChange={this.handleCrawlerSelection.bind(this)} />
placeholder='Select Crawler' selection options={this.crawlers} onChange={this.handleCrawlerSelection.bind(this)} />
<br /> <br />
<br /> <br />
</Grid.Column> </Grid.Column>
<Grid.Column> <Grid.Column>
<CrawlerAuthInputs crawler={this.state.selected} /> <CrawlerAuthInputs crawler={this.state.selected} />
</Grid.Column> </Grid.Column>
</Grid.Row> </Grid.Row>
</Grid> </Grid>
</Segment> </Segment>
</Container>
); );
} }
} }
@ -323,7 +320,7 @@ export class CrawlerAuthInputs extends React.Component<CrawlerAuthInputsProps, C
let itemValues = item.keyValue.split('|'); let itemValues = item.keyValue.split('|');
let idx = 0; let idx = 0;
for (let itemValue of itemValues) { for (let itemValue of itemValues) {
elem.push(<Radio elem.push(<Form.Radio
key={idx++} key={idx++}
label={itemValue} label={itemValue}
name='radioGroup' name='radioGroup'
@ -332,10 +329,14 @@ export class CrawlerAuthInputs extends React.Component<CrawlerAuthInputsProps, C
} }
} }
return <Table.Row key={index}> return (
<Table.Cell collapsing>{item.keyName}</Table.Cell> <Table.Row key={index}>
<Table.Cell >{elem}</Table.Cell> <Table.Cell collapsing>{item.keyName}</Table.Cell>
</Table.Row >; <Table.Cell >
<Form.Group inline>{elem}</Form.Group>
</Table.Cell>
</Table.Row >
);
} }
public render(): JSX.Element { public render(): JSX.Element {
@ -343,33 +344,34 @@ export class CrawlerAuthInputs extends React.Component<CrawlerAuthInputsProps, C
return null; return null;
} }
return ( return (
<Table basic='very' celled collapsing > <Segment style={{width:'350px'}}>
<Table.Header> <Table basic='very' celled >
<Table.Row> <Table.Header>
<Table.HeaderCell colSpan='2'>{this.props.crawler} 접속 정보</Table.HeaderCell> <Table.Row>
</Table.Row> <Table.HeaderCell colSpan='2'>{this.props.crawler} 접속 정보</Table.HeaderCell>
</Table.Header> </Table.Row>
</Table.Header>
<Table.Body> <Table.Body>
{this.data.map((item: any, index: number) => ( {this.data.map((item: any, index: number) => (
this.renderRow(item, index) this.renderRow(item, index)
))} ))}
</Table.Body> </Table.Body>
<Table.Footer> <Table.Footer>
<Table.Row> <Table.Row>
<Table.HeaderCell /> <Table.HeaderCell colSpan='2'>
<Table.HeaderCell colSpan='2'> <Button primary floated={'right'} onClick={this.handleVerify.bind(this)} loading={this.state.isVerifying}>Verify</Button>
<Button primary floated={'right'} onClick={this.handleVerify.bind(this)} loading={this.state.isVerifying}>Verify</Button> </Table.HeaderCell>
</Table.HeaderCell> </Table.Row>
</Table.Row> </Table.Footer>
</Table>
</Table.Footer> </Segment>
</Table>
); );
} }
} }
export interface ETCSelectorProps { export interface ETCSelectorProps {
} }
@ -398,33 +400,29 @@ export class ETCSelector extends React.Component<ETCSelectorProps, ETCSelectorSt
Interval Interval
</Table.Cell> </Table.Cell>
<Table.Cell> <Table.Cell>
<Form.Field> <Form.Group inline>
<Radio <Form.Radio
label='5 seconds' label='5 seconds'
name='radioGroup' name='radioGroup'
value='5' value='5'
checked={this.state.interval === 5} checked={this.state.interval === 5}
onChange={this.handleIntervalChange} onChange={this.handleIntervalChange}
/> />
</Form.Field> <Form.Radio
<Form.Field>
<Radio
label='10 seconds' label='10 seconds'
name='radioGroup' name='radioGroup'
value='10' value='10'
checked={this.state.interval === 10} checked={this.state.interval === 10}
onChange={this.handleIntervalChange} onChange={this.handleIntervalChange}
/> />
</Form.Field> <Form.Radio
<Form.Field>
<Radio
label='15 seconds' label='15 seconds'
name='radioGroup' name='radioGroup'
value='15' value='15'
checked={this.state.interval === 15} checked={this.state.interval === 15}
onChange={this.handleIntervalChange} onChange={this.handleIntervalChange}
/> />
</Form.Field> </Form.Group>
</Table.Cell> </Table.Cell>
</Table.Row> </Table.Row>
<Table.Row> <Table.Row>

2
src/ts/@overflow/sensor/react/components/SensorDetail.tsx
View File

@ -93,8 +93,6 @@ export class SensorBasicInfo extends React.Component<SensorBasicInfoProps, Senso
public render(): JSX.Element { public render(): JSX.Element {
return ( return (
<Container fluid> <Container fluid>
<Header as='h3' dividing>Sensor Details</Header>
<Table celled> <Table celled>
<Table.Body> <Table.Body>
<Table.Row> <Table.Row>

2
src/ts/@overflow/sensor/react/components/SensorDetailInfo.tsx
View File

@ -56,8 +56,6 @@ export class SensorDetailInfo extends React.Component<SensorDetailInfoProps, Sen
public render(): JSX.Element { public render(): JSX.Element {
return ( return (
<Container fluid> <Container fluid>
<Table celled> <Table celled>
<Table.Body> <Table.Body>
<Table.Row> <Table.Row>

3
src/ts/@overflow/sensor/react/components/SensorDetailItems.tsx
View File

@ -36,12 +36,11 @@ export class SensorDetailItems extends React.Component<Props, State> {
public render(): JSX.Element { public render(): JSX.Element {
return ( return (
<Container fluid> <Container fluid>
<Header as='h3' dividing>Sensor Item</Header>
<Table celled> <Table celled>
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
<Table.HeaderCell>No.</Table.HeaderCell> <Table.HeaderCell>No.</Table.HeaderCell>
<Table.HeaderCell>Tyte</Table.HeaderCell> <Table.HeaderCell>Type</Table.HeaderCell>
<Table.HeaderCell>Name</Table.HeaderCell> <Table.HeaderCell>Name</Table.HeaderCell>
<Table.HeaderCell>Key</Table.HeaderCell> <Table.HeaderCell>Key</Table.HeaderCell>
</Table.Row> </Table.Row>

6
src/ts/@overflow/sensor/react/components/SensorList.tsx
View File

@ -141,17 +141,15 @@ export class SensorList extends React.Component<SensorListProps, SensorListState
<Table.Cell negative={this.checkCellStatus(sensor.metaSensorStatus)} textAlign={'center'}> <Table.Cell negative={this.checkCellStatus(sensor.metaSensorStatus)} textAlign={'center'}>
{sensor.metaSensorStatus.name} {sensor.metaSensorStatus.name}
</Table.Cell> </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>{sensor.description}</Table.Cell>
<Table.Cell>to do</Table.Cell> <Table.Cell>to do</Table.Cell>
{/* <Table.Cell collapsing>{this.showStartStopBtn(sensor.metaSensorStatus)}</Table.Cell> */} {/* <Table.Cell collapsing>{this.showStartStopBtn(sensor.metaSensorStatus)}</Table.Cell> */}
</Table.Row> </Table.Row>
))} ))}
</Table.Body> </Table.Body>
<Table.Footer>
<Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddSensor.bind(this)} />
</Table.Footer>
</Table> </Table>
<Button content='Add' icon='add' labelPosition='left' floated='right' positive onClick={this.handleAddSensor.bind(this)} />
</Container> </Container>
); );

10
src/ts/@overflow/target/react/components/TargetDetail.tsx
View File

@ -117,7 +117,6 @@ export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, Targe
public render(): JSX.Element { public render(): JSX.Element {
return ( return (
<Container fluid> <Container fluid>
<Header as='h3' dividing>Target Info</Header>
<Table celled={false}> <Table celled={false}>
<Table.Body> <Table.Body>
<Table.Row> <Table.Row>
@ -157,15 +156,8 @@ export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, Targe
</Table.Row> </Table.Row>
</Table.Body> </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> </Table>
<Button primary floated={'right'} negative onClick={this.handleRemoveTarget}>Remove</Button>
</Container> </Container>
); );
} }

2
src/ts/@overflow/target/react/components/TargetList.tsx
View File

@ -71,8 +71,8 @@ export class TargetList extends React.Component<Props, State> {
<Container fluid> <Container fluid>
{/*search bar */} {/*search bar */}
<Button content='Discovery' icon='search' labelPosition='left' floated='right' positive onClick={this.handleAddTarget.bind(this)} /> <Button content='Discovery' icon='search' labelPosition='left' floated='right' positive onClick={this.handleAddTarget.bind(this)} />
<br /><br />
<TargetTable onSelectTarget={this.handleSelectedTarget}/> <TargetTable onSelectTarget={this.handleSelectedTarget}/>
<br />
<Modal <Modal
open={this.state.openAddTarget} open={this.state.openAddTarget}