layout

src/ts/@overflow/app/views/layout/AppLayout.tsx

@@ -34,15 +34,17 @@ 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}/>
-            <Switch>
-              <Route exact={true} path={`${this.props.match.url}`} component={Home}/>
-              <Route exact={true} path={`${this.props.match.url}probes`} component={ProbeList}/>
-              <Route exact={true} path={`${this.props.match.url}targets`} component={TargetList}/>
-              <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}probe_setup`} component={ProbeSetup}/>
-              <Redirect to='/error/404' />
-            </Switch>
+            <Segment basic>
+              <Switch>
+                <Route exact={true} path={`${this.props.match.url}`} component={Home}/>
+                <Route exact={true} path={`${this.props.match.url}probes`} component={ProbeList}/>
+                <Route exact={true} path={`${this.props.match.url}targets`} component={TargetList}/>
+                <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}probe_setup`} component={ProbeSetup}/>
+                <Redirect to='/error/404' />
+              </Switch>
+            </Segment>
           <Footer />
         </Segment>
       </Container >

src/ts/@overflow/app/views/layout/ProbeDetailLayout.tsx

@@ -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}/>
-          <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 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 >

src/ts/@overflow/app/views/layout/SensorDetailLayout.tsx

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

src/ts/@overflow/app/views/layout/TargetDetailLayout.tsx

@@ -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} />
-          <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 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 >

src/ts/@overflow/meta/react/components/SensorItemTree.tsx

@@ -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={
-              (event: React.FormEvent<HTMLInputElement>, checkProps: CheckboxProps) => {
-                this.onTypeCheckCBox(key, checkProps, data);
-              }} />   </List.Header>
-            <List.Description>Category</List.Description>
+            <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 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>
     );
   }

src/ts/@overflow/probe/react/components/ProbeDetailInfo.tsx

@@ -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'>
-                {this.showStopBtn()}
-                <Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
-              </Table.HeaderCell>
-            </Table.Row>
-          </Table.Footer>
-
         </Table>
+        {this.showStopBtn()}
+        <Button content='Discovery' icon='search' labelPosition='left' floated={'right'} positive onClick={this.handleDiscovery} />
         {/*{this.renderDiscovery()}*/}
       </Container>
     );

src/ts/@overflow/probe/react/components/ProbeHost.tsx

@@ -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>

src/ts/@overflow/sensor/react/components/SensorConfiguration.tsx

@@ -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,28 +233,26 @@ export class CrawlerSelector extends React.Component<CrawlerSelectorProps, Crawl
   public render(): JSX.Element {
 
     return (
-      <Container fluid>
-        <Segment raised>
-          <Loader active={this.state.isInstalling} size='large' >Installing the Crawler</Loader>
-          <Icon name='checkmark' /> Choose a Crawler type.
-          <br />
-          <br />
-          <Grid>
-            <Grid.Row>
-              <Grid.Column width='4'>
-                <Dropdown openOnFocus
-                  placeholder='Select Crawler' selection options={this.crawlers} onChange={this.handleCrawlerSelection.bind(this)} />
+      <Segment vertical>
+        <Loader active={this.state.isInstalling} size='large' >Installing the Crawler</Loader>
+        <Icon name='checkmark' /> Choose a Crawler type.
+        <br />
+        <br />
+        <Grid>
+          <Grid.Row>
+            <Grid.Column width='4'>
+              <Dropdown openOnFocus
+                placeholder='Select Crawler' selection options={this.crawlers} onChange={this.handleCrawlerSelection.bind(this)} />
 
-                <br />
-                <br />
-              </Grid.Column>
-              <Grid.Column>
-                <CrawlerAuthInputs crawler={this.state.selected} />
-              </Grid.Column>
-            </Grid.Row>
-          </Grid>
-        </Segment>
-      </Container>
+              <br />
+              <br />
+            </Grid.Column>
+            <Grid.Column>
+              <CrawlerAuthInputs crawler={this.state.selected} />
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+      </Segment>
     );
   }
 }
@@ -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}>
-      <Table.Cell collapsing>{item.keyName}</Table.Cell>
-      <Table.Cell >{elem}</Table.Cell>
-    </Table.Row >;
+    return (
+      <Table.Row key={index}>
+        <Table.Cell collapsing>{item.keyName}</Table.Cell>
+        <Table.Cell >
+          <Form.Group inline>{elem}</Form.Group>
+        </Table.Cell>
+      </Table.Row >
+    );
   }
 
   public render(): JSX.Element {
@@ -343,33 +344,34 @@ export class CrawlerAuthInputs extends React.Component<CrawlerAuthInputsProps, C
       return null;
     }
     return (
-      <Table basic='very' celled collapsing >
-        <Table.Header>
-          <Table.Row>
-            <Table.HeaderCell colSpan='2'>{this.props.crawler} 접속 정보</Table.HeaderCell>
-          </Table.Row>
-        </Table.Header>
+      <Segment style={{width:'350px'}}>
+        <Table basic='very' celled >
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell colSpan='2'>{this.props.crawler} 접속 정보</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
 
-        <Table.Body>
-          {this.data.map((item: any, index: number) => (
-            this.renderRow(item, index)
-          ))}
-        </Table.Body>
+          <Table.Body>
+            {this.data.map((item: any, index: number) => (
+              this.renderRow(item, index)
+            ))}
+          </Table.Body>
 
-        <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>
+          <Table.Footer>
+            <Table.Row>
+              <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>

src/ts/@overflow/sensor/react/components/SensorDetail.tsx

@@ -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>

src/ts/@overflow/sensor/react/components/SensorDetailInfo.tsx

@@ -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>

src/ts/@overflow/sensor/react/components/SensorDetailItems.tsx

@@ -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>

src/ts/@overflow/sensor/react/components/SensorList.tsx

@@ -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>
     );

src/ts/@overflow/target/react/components/TargetDetail.tsx

@@ -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>
     );
   }

src/ts/@overflow/target/react/components/TargetList.tsx

@@ -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}