diff --git a/src/ts/@overflow/infra/react/components/infra_map_zone_table.tsx b/src/ts/@overflow/infra/react/components/infra_map_zone_table.tsx
index 6a9f664..03d6bed 100644
--- a/src/ts/@overflow/infra/react/components/infra_map_zone_table.tsx
+++ b/src/ts/@overflow/infra/react/components/infra_map_zone_table.tsx
@@ -18,13 +18,13 @@ export type Props = StateProps & DispatchProps;
 export interface State {
 }
 
+
 export class InfraMapZoneTable extends React.Component<Props, State> {
 
   constructor(props: Props, context: State) {
     super(props, context);
 
     this.state = {
-      selected: null,
     };
   }
 
diff --git a/src/ts/@overflow/infra/react/components/infra_map_zone_table_row.tsx b/src/ts/@overflow/infra/react/components/infra_map_zone_table_row.tsx
index 9dc0613..afd2f7c 100644
--- a/src/ts/@overflow/infra/react/components/infra_map_zone_table_row.tsx
+++ b/src/ts/@overflow/infra/react/components/infra_map_zone_table_row.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import {
   Table, Header, Container, Form, Checkbox, Button, Rating,
-  List, Icon,
+  List, Icon, ButtonProps,
 } from 'semantic-ui-react';
-
+import {SensorConfigPopup} from '@overflow/sensor/react/components/sensor_config_popup';
 
 export interface StateProps {
 }
@@ -14,6 +14,7 @@ export interface DispatchProps {
 export type Props = StateProps & DispatchProps;
 
 export interface State {
+  sensorConfigStart: boolean;
 }
 
 export class InfraMapZoneTableRow extends React.Component<Props, State> {
@@ -22,10 +23,22 @@ export class InfraMapZoneTableRow extends React.Component<Props, State> {
     super(props, context);
 
     this.state = {
-      selected: null,
+      sensorConfigStart: false,
     };
   }
 
+  public openSensorConfig(event: React.MouseEvent<HTMLButtonElement>, data: ButtonProps): void {
+    this.setState({
+      sensorConfigStart: true,
+    });
+  }
+
+  public closeSensorConfig(): void {
+    this.setState({
+      sensorConfigStart: false,
+    });
+  }
+
 
   public render(): JSX.Element {
     return (
@@ -53,11 +66,12 @@ export class InfraMapZoneTableRow extends React.Component<Props, State> {
                     </List.Item>
               </List>
               <Button.Group floated='right'>
-                <Button>Add Sensor</Button>
+                <Button onClick={this.openSensorConfig.bind(this)}>Add Sensor</Button>
               </Button.Group>
             </List.Item>
           </List>
         </Table.Cell>
+        <SensorConfigPopup open={this.state.sensorConfigStart} closeCallback={this.closeSensorConfig.bind(this)}/>
       </Table.Row>
     );
   }
diff --git a/src/ts/@overflow/sensor/react/components/sensor_config_auth_crawler.tsx b/src/ts/@overflow/sensor/react/components/sensor_config_auth_crawler.tsx
index 93c7085..3abdde5 100644
--- a/src/ts/@overflow/sensor/react/components/sensor_config_auth_crawler.tsx
+++ b/src/ts/@overflow/sensor/react/components/sensor_config_auth_crawler.tsx
@@ -2,12 +2,16 @@ import * as React from 'react';
 import {
   Table, Header, Container, Form, Checkbox, Button, Rating,
   List, Icon, Radio, CheckboxProps, Input, InputOnChangeData,
-  Label,
+  Label, Segment,
 } from 'semantic-ui-react';
-
+import * as _ from 'lodash';
+import MetaCrawler from '@overflow/meta/api/model/MetaCrawler';
+import MetaCrawlerInputItem from '@overflow/meta/api/model/MetaCrawlerInputItem';
 
 
 export interface StateProps {
+  metaCrawler?: MetaCrawler;
+  metaCrawlerInputItemList?: Array<MetaCrawlerInputItem>;
 }
 
 export interface DispatchProps {
@@ -16,6 +20,9 @@ export interface DispatchProps {
 export type Props = StateProps & DispatchProps;
 
 export interface State {
+  isVerifying: boolean;
+  authJson: any;
+  testMetaCrawlerInputItemList?: Array<MetaCrawlerInputItem>;
 }
 
 export class SensorConfigAuthCrawler extends React.Component<Props, State> {
@@ -24,45 +31,383 @@ export class SensorConfigAuthCrawler extends React.Component<Props, State> {
     super(props, context);
 
     this.state = {
+      isVerifying: false,
+      authJson: {},
+      testMetaCrawlerInputItemList: testMeta,
     };
   }
 
 
-  public render(): JSX.Element {
-    return (
-      <Container>
-        <List>
-          <List.Item>
-            <Input label={'label'} placeholder={'item.defaultValue'} key={0} onChange={
-              (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                {/* this.onChangeAuth(item.name, data.value); */ }
-              }} />
-          </List.Item>
-          <List.Item>
-            <Input label={'label'} type='password' placeholder={'item.defaultValue'} key={0} onChange={
-              (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
-                {/* this.onChangeAuth(item.name, data.value); */ }
-              }} />
-          </List.Item>
-          <List.Item>
-            <Label pointing='below'>{'aaaa'}</Label>
+  public onChangeAuth = (key: string, data: string) => {
+    let newJson: any = _.clone(this.state.authJson);
+    newJson[key] = data;
+    this.setState({ authJson: newJson });
+
+    console.log(newJson);
+  }
+
+  public handleVerify(): void {
+    this.setState({
+      isVerifying: true,
+    });
+
+    // this.props.onVerifyCrawler(sd.infra.id, sd.crawler, sd.crawlerAuth);
+
+    // let authCrawler: AuthCrawler = {
+    //   crawler: { id: sd.crawler.id },
+    //   target: { id: sd.infra.target.id },
+    //   authJson: JSON.stringify(sd.crawlerAuth),
+    // };
+
+    // this.props.onRegistAuthCrawler(authCrawler);
+  }
+
+
+  public renderRow(item: MetaCrawlerInputItem, index: number): JSX.Element {
+    let elem = new Array();
+    if (item.inputType.name === 'TEXT_TYPE') {
+      elem.push(<Input label={item.name} placeholder={item.defaultValue} key={index} onChange={
+        (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+          this.onChangeAuth(item.name, data.value);
+        }} />);
+    } else if (item.inputType.name === 'PASSWORD_TYPE') {
+      elem.push(<Input label={item.name} type='password' placeholder={item.defaultValue} key={index} onChange={
+        (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+          this.onChangeAuth(item.name, data.value);
+        }} />);
+    } else if (item.inputType.name === 'SELECT_TYPE') {
+      let itemValues = item.keyValue.split('|');
+      let idx = 0;
+      elem.push(<Label key={index} pointing='below'>{item.name}</Label>);
+
+      if(this.state.authJson[item.name] === undefined) {
+        //  this.onChangeAuth(item.name, item.defaultValue);
+      }
+
+      for (let itemValue of itemValues) {
+           elem.push(
             <Form.Radio
-              key={11}
-              label={'itemValue'}
-              name={'radioGroup' + String('item.id')}
-              value={'itemValue'}
-              checked={null}
-              defaultChecked={true ? true : false}
+              key={String(idx++) + '-' + String(index)}
+              label={itemValue}
+              name={'radioGroup' + String(item.id)}
+              value={itemValue}
+              checked={this.state.authJson[item.name] ? this.state.authJson[item.name] === itemValue : itemValue === item.defaultValue}
+              defaultChecked={itemValue === item.defaultValue ? true : false}
               onChange={
                 (event: React.FormEvent<HTMLInputElement>, data: CheckboxProps) => {
                   {/* this.onChangeAuth(item.name, itemValue); */}
                 }
               }
-            />
-          </List.Item>
-        </List>
-      </Container>
+            />);
+        }
+    }
+
+    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 renderAuth(): JSX.Element[] {
+
+    let mciil: Array<MetaCrawlerInputItem> = this.state.testMetaCrawlerInputItemList;
+
+    if (mciil === undefined) {
+      return null;
+    }
+
+    let elements: Array<JSX.Element> = new Array();
+    let elem: JSX.Element;
+    for (let index: number = 0; index < mciil.length; ++index) {
+      elem = this.renderRow(mciil[index], index);
+      elements.push(elem);
+    }
+
+    return elements;
+  }
+
+
+  public render(): JSX.Element {
+    return (
+      <Segment style={{ width: '350px' }}>
+        <Table basic='very' celled >
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell colSpan='2'>{this.props.metaCrawler} 접속 정보</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+
+          <Table.Body>
+            {this.renderAuth()}
+          </Table.Body>
+
+          <Table.Footer>
+            <Table.Row>
+              <Table.HeaderCell colSpan='2'>
+                {/*loading={this.state.isVerifying}*/}
+                <Button primary floated={'right'} onClick={this.handleVerify.bind(this)} loading={this.state.isVerifying}>Verify</Button>
+              </Table.HeaderCell>
+            </Table.Row>
+          </Table.Footer>
+        </Table>
+      </Segment>
     );
   }
 
 }
+
+
+
+const testMeta: any[] = [
+  {
+    'id' : 1,
+    'create_date' : '2017-06-25T08:01:00Z',
+    'default_value' : 'Loafle',
+    'description' : 'Windows Account ID',
+    'keyName' : '',
+    'keyValue' : '',
+    'name' : 'ID',
+    'pattern' : '',
+    'required' : true,
+    'crawler_id' : 23,
+    'type_id' : 1,
+    'inputType' : {
+      'id' : 1,
+      'create_date' : '2017-06-25T08:00:53Z',
+      'description' : 'TEXT',
+      'name' : 'TEXT_TYPE',
+    },
+  },
+  {
+    'id' : 2,
+    'create_date' : '2017-06-25T08:01:00Z',
+    'default_value' : '',
+    'description' : 'Windows Account PW',
+    'keyName' : '',
+    'keyValue' : '',
+    'name' : 'PassWord',
+    'pattern' : '',
+    'required' : true,
+    'crawler_id' : 23,
+    'type_id' : 2,
+    'inputType' : {
+      'id' : 2,
+      'create_date' : '2017-06-25T08:00:53Z',
+      'description' : 'PASSWORD',
+      'name' : 'PASSWORD_TYPE',
+    },
+  },
+  {
+    'id' : 3,
+    'create_date' : '2017-06-25T08:01:00Z',
+    'default_value' : 'public',
+    'description' : 'SNMP V2 Community',
+    'keyName' : '',
+    'keyValue' : '',
+    'name' : 'Community',
+    'pattern' : '',
+    'required' : true,
+    'crawler_id' : 20,
+    'type_id' : 1,
+    'inputType' : {
+      'id' : 1,
+      'create_date' : '2017-06-25T08:00:53Z',
+      'description' : 'TEXT',
+      'name' : 'TEXT_TYPE',
+    },
+  },
+  {
+    'id' : 4,
+    'create_date' : '2017-06-25T08:01:00Z',
+    'default_value' : 'mysqldb',
+    'description' : 'MYSQL DB Name',
+    'keyName' : '',
+    'keyValue' : '',
+    'name' : 'DB Name',
+    'pattern' : '',
+    'required' : true,
+    'crawler_id' : 11,
+    'type_id' : 1,
+    'inputType' : {
+      'id' : 1,
+      'create_date' : '2017-06-25T08:00:53Z',
+      'description' : 'TEXT',
+      'name' : 'TEXT_TYPE',
+    },
+  },
+  {
+    'id' : 5,
+    'create_date' : '2017-06-25T08:01:00Z',
+    'default_value' : 'Loafle',
+    'description' : 'MYSQL Account ID',
+    'keyName' : '',
+    'keyValue' : '',
+    'name' : 'ID',
+    'pattern' : '',
+    'required' : true,
+    'crawler_id' : 11,
+    'type_id' : 1,
+    'inputType' : {
+      'id' : 1,
+      'create_date' : '2017-06-25T08:00:53Z',
+      'description' : 'TEXT',
+      'name' : 'TEXT_TYPE',
+    },
+  },
+  {
+    'id' : 6,
+    'create_date' : '2017-06-25T08:01:00Z',
+    'default_value' : '',
+    'description' : 'MYSQL Account PW',
+    'keyName' : '',
+    'keyValue' : '',
+    'name' : 'PassWord',
+    'pattern' : '',
+    'required' : true,
+    'crawler_id' : 11,
+    'type_id' : 2,
+    'inputType' : {
+      'id' : 2,
+      'create_date' : '2017-06-25T08:00:53Z',
+      'description' : 'PASSWORD',
+      'name' : 'PASSWORD_TYPE',
+    },
+  },
+  {
+    'id' : 7,
+    'create_date' : '2017-06-25T08:01:00Z',
+    'default_value' : 'Loafle',
+    'description' : 'JMX Account ID',
+    'keyName' : '',
+    'keyValue' : '',
+    'name' : 'ID',
+    'pattern' : '',
+    'required' : true,
+    'crawler_id' : 17,
+    'type_id' : 1,
+    'inputType' : {
+      'id' : 1,
+      'create_date' : '2017-06-25T08:00:53Z',
+      'description' : 'TEXT',
+      'name' : 'TEXT_TYPE',
+    },
+  },
+  {
+    'id' : 8,
+    'create_date' : '2017-06-25T08:01:00Z',
+    'default_value' : '',
+    'description' : 'JMX Account PW',
+    'keyName' : '',
+    'keyValue' : '',
+    'name' : 'PassWord',
+    'pattern' : '',
+    'required' : true,
+    'crawler_id' : 17,
+    'type_id' : 2,
+    'inputType' : {
+      'id' : 2,
+      'create_date' : '2017-06-25T08:00:53Z',
+      'description' : 'PASSWORD',
+      'name' : 'PASSWORD_TYPE',
+    },
+  },
+  {
+    'id' : 9,
+    'create_date' : '2017-09-11T09:41:00Z',
+    'default_value' : 'MD5',
+    'description' : 'SNMP V3 Auth Type',
+    'keyName' : '',
+    'keyValue' : 'MD5|SHA',
+    'name' : 'AuthType',
+    'pattern' : '',
+    'required' : true,
+    'crawler_id' : 25,
+    'type_id' : 5,
+    'inputType' : {
+      'id' : 5,
+      'create_date' : '2017-06-25T08:00:53Z',
+      'description' : 'SELECT',
+      'name' : 'SELECT_TYPE',
+    },
+  },
+  {
+    'id' : 10,
+    'create_date' : '2017-09-11T09:41:00Z',
+    'default_value' : 'Loafle',
+    'description' : 'SNMP V3 User ID',
+    'keyName' : '',
+    'keyValue' : '',
+    'name' : 'ID',
+    'pattern' : '',
+    'required' : true,
+    'crawler_id' : 25,
+    'type_id' : 1,
+    'inputType' : {
+      'id' : 1,
+      'create_date' : '2017-06-25T08:00:53Z',
+      'description' : 'TEXT',
+      'name' : 'TEXT_TYPE',
+    },
+  },
+  {
+    'id' : 11,
+    'create_date' : '2017-09-11T09:41:00Z',
+    'default_value' : '',
+    'description' : 'SNMP V3 PassWord',
+    'keyName' : '',
+    'keyValue' : '',
+    'name' : 'PassWord',
+    'pattern' : '',
+    'required' : true,
+    'crawler_id' : 25,
+    'type_id' : 2,
+    'inputType' : {
+      'id' : 2,
+      'create_date' : '2017-06-25T08:00:53Z',
+      'description' : 'PASSWORD',
+      'name' : 'PASSWORD_TYPE',
+    },
+  },
+  {
+    'id' : 12,
+    'create_date' : '2017-09-11T09:41:00Z',
+    'default_value' : 'DES',
+    'description' : 'SNMP V3 Encryption Type',
+    'keyName' : '',
+    'keyValue' : 'DES|AES',
+    'name' : 'Encryption Type',
+    'pattern' : '',
+    'required' : true,
+    'crawler_id' : 25,
+    'type_id' : 5,
+    'inputType' : {
+      'id' : 5,
+      'create_date' : '2017-06-25T08:00:53Z',
+      'description' : 'SELECT',
+      'name' : 'SELECT_TYPE',
+    },
+  },
+  {
+    'id' : 13,
+    'create_date' : '2017-09-11T09:41:00Z',
+    'default_value' : 'Loafle',
+    'description' : 'SNMP V3 Encryption Key',
+    'keyName' : '',
+    'keyValue' : '',
+    'name' : 'Encryption Key',
+    'pattern' : '',
+    'required' : true,
+    'crawler_id' : 25,
+    'type_id' : 1,
+    'inputType' : {
+      'id' : 1,
+      'create_date' : '2017-06-25T08:00:53Z',
+      'description' : 'TEXT',
+      'name' : 'TEXT_TYPE',
+    },
+  },
+];
diff --git a/src/ts/@overflow/sensor/react/components/sensor_config_crawler.tsx b/src/ts/@overflow/sensor/react/components/sensor_config_crawler.tsx
index 3bee240..26cbf13 100644
--- a/src/ts/@overflow/sensor/react/components/sensor_config_crawler.tsx
+++ b/src/ts/@overflow/sensor/react/components/sensor_config_crawler.tsx
@@ -3,10 +3,12 @@ import {
   Table, Header, Container, Form, Checkbox, Button, Rating,
   List, Icon, Radio, CheckboxProps,
 } from 'semantic-ui-react';
+import MetaCrawler from '@overflow/meta/api/model/MetaCrawler';
 
 
 
 export interface StateProps {
+  metaCrawlerList?: Array<MetaCrawler>;
 }
 
 export interface DispatchProps {
@@ -15,7 +17,8 @@ export interface DispatchProps {
 export type Props = StateProps & DispatchProps;
 
 export interface State {
-  selectedValue: number|string;
+  selectedValue: number | string;
+  testMetaCrawlerList: Array<MetaCrawler>;
 }
 
 export class SensorConfigCrawler extends React.Component<Props, State> {
@@ -25,6 +28,7 @@ export class SensorConfigCrawler extends React.Component<Props, State> {
 
     this.state = {
       selectedValue: null,
+      testMetaCrawlerList: testMetaCrawler,
     };
   }
 
@@ -33,34 +37,194 @@ export class SensorConfigCrawler extends React.Component<Props, State> {
   }
 
 
+  public renderCrawler(): JSX.Element[] {
+
+    let mcl: Array<MetaCrawler> = this.state.testMetaCrawlerList;
+
+
+    let elems: JSX.Element[] = new Array();
+
+    let mc: MetaCrawler = null;
+    for(let idx: number = 0; idx < mcl.length; idx++) {
+      mc = mcl[idx];
+
+      elems.push(
+        <Form.Field>
+          <Radio
+            label={mc.name}
+            name='crawlerGroup'
+            value={mc.name}
+            checked={this.state.selectedValue === mc.name}
+            onChange={this.handleChange}
+          />
+        </Form.Field>,
+      );
+    }
+
+    return elems;
+  }
+
   public render(): JSX.Element {
     return (
-      <Container>
-         <Form>
+      <Form>
         <Form.Field>
           Selected Crawler : <b>{this.state.selectedValue}</b>
         </Form.Field>
-        <Form.Field>
-          <Radio
-            label='SSH Crawler'
-            name='radioGroup'
-            value='SSH Crawler'
-            checked={this.state.selectedValue === 'SSH Crawler'}
-            onChange={this.handleChange}
-          />
-        </Form.Field>
-        <Form.Field>
-          <Radio
-            label='WMI Crawler'
-            name='radioGroup'
-            value='WMI Crawler'
-            checked={this.state.selectedValue === 'WMI Crawler'}
-            onChange={this.handleChange}
-          />
-        </Form.Field>
+        {this.renderCrawler()}
       </Form>
-      </Container>
     );
   }
 
 }
+
+
+const testMetaCrawler: any[] = [{
+  'id': 1,
+  'createDate': 1498794968791,
+  'name': 'ACTIVEDIRECTORY_CRAWLER',
+  'description': 'ACTIVEDIRECTORY',
+},
+{
+  'id': 2,
+  'createDate': 1498794968791,
+  'name': 'CASSANDRA_CRAWLER',
+  'description': 'CASSANDRA',
+},
+{
+  'id': 3,
+  'createDate': 1498794968791,
+  'name': 'DHCP_CRAWLER',
+  'description': 'DHCP',
+},
+{
+  'id': 4,
+  'createDate': 1498794968791,
+  'name': 'DNS_CRAWLER',
+  'description': 'DNS',
+},
+{
+  'id': 5,
+  'createDate': 1498794968791,
+  'name': 'FTP_CRAWLER',
+  'description': 'FTP',
+},
+{
+  'id': 6,
+  'createDate': 1498794968791,
+  'name': 'HTTP_CRAWLER',
+  'description': 'HTTP',
+},
+{
+  'id': 7,
+  'createDate': 1498794968791,
+  'name': 'IMAP_CRAWLER',
+  'description': 'IMAP',
+},
+{
+  'id': 8,
+  'createDate': 1498794968791,
+  'name': 'LDAP_CRAWLER',
+  'description': 'LDAP',
+},
+{
+  'id': 9,
+  'createDate': 1498794968791,
+  'name': 'MONGODB_CRAWLER',
+  'description': 'MONGODB',
+},
+{
+  'id': 10,
+  'createDate': 1498794968791,
+  'name': 'MSSQL_CRAWLER',
+  'description': 'MSSQL',
+},
+{
+  'id': 11,
+  'createDate': 1498794968791,
+  'name': 'MYSQL_CRAWLER',
+  'description': 'MYSQL',
+},
+{
+  'id': 12,
+  'createDate': 1498794968791,
+  'name': 'NETBIOS_CRAWLER',
+  'description': 'NETBIOS',
+},
+{
+  'id': 13,
+  'createDate': 1498794968791,
+  'name': 'ORACLE_CRAWLER',
+  'description': 'ORACLE',
+},
+{
+  'id': 14,
+  'createDate': 1498794968791,
+  'name': 'POP_CRAWLER',
+  'description': 'POP',
+},
+{
+  'id': 15,
+  'createDate': 1498794968791,
+  'name': 'POSTGRESQL_CRAWLER',
+  'description': 'POSTGRESQL',
+},
+{
+  'id': 16,
+  'createDate': 1498794968791,
+  'name': 'REDIS_CRAWLER',
+  'description': 'REDIS',
+},
+{
+  'id': 17,
+  'createDate': 1498794968791,
+  'name': 'JMX_CRAWLER',
+  'description': 'JMX',
+},
+{
+  'id': 18,
+  'createDate': 1498794968791,
+  'name': 'SMB_CRAWLER',
+  'description': 'SMB',
+},
+{
+  'id': 19,
+  'createDate': 1498794968791,
+  'name': 'SMTP_CRAWLER',
+  'description': 'SMTP',
+},
+{
+  'id': 20,
+  'createDate': 1498794968791,
+  'name': 'SNMP_CRAWLER',
+  'description': 'SNMP',
+},
+{
+  'id': 21,
+  'createDate': 1498794968791,
+  'name': 'SSH_CRAWLER',
+  'description': 'SSH',
+},
+{
+  'id': 22,
+  'createDate': 1498794968791,
+  'name': 'TELNET_CRAWLER',
+  'description': 'TELNET',
+},
+{
+  'id': 23,
+  'createDate': 1498794968791,
+  'name': 'WMI_CRAWLER',
+  'description': 'WMI',
+},
+{
+  'id': 24,
+  'createDate': 1498794968791,
+  'name': 'UNKNOWN_CRAWLER',
+  'description': 'UNKNOWN',
+},
+{
+  'id': 25,
+  'createDate': 1498794968791,
+  'name': 'SNMPV3_CRAWLER',
+  'description': 'SNMP V3',
+}];
diff --git a/src/ts/@overflow/sensor/react/components/sensor_config_popup.tsx b/src/ts/@overflow/sensor/react/components/sensor_config_popup.tsx
new file mode 100644
index 0000000..a8d14e9
--- /dev/null
+++ b/src/ts/@overflow/sensor/react/components/sensor_config_popup.tsx
@@ -0,0 +1,73 @@
+import * as React from 'react';
+import {
+  Table, Header, Container, Form, Checkbox, Button, Rating,
+  List, Icon, Grid, Modal,
+} from 'semantic-ui-react';
+import {SensorConfig} from './sensor_config';
+
+export interface StateProps {
+  open?: boolean;
+  closeCallback?(): void;
+}
+
+export interface DispatchProps {
+}
+
+export type Props = StateProps & DispatchProps;
+
+export interface State {
+  startPopup: boolean;
+}
+
+export class SensorConfigPopup extends React.Component<Props, State> {
+
+  constructor(props: Props, context: State) {
+    super(props, context);
+
+    this.state = {
+      startPopup: false,
+    };
+  }
+
+  public handlePopupClose = () => {
+    this.props.closeCallback();
+  }
+
+  // public handleCancel = () => this.setState({ startPopup: false });
+
+  public handleSubmit(): void {
+    this.setState({ startPopup: false });
+  }
+
+  public render(): JSX.Element {
+    return (
+      <Modal
+        open={this.props.open}
+      >
+        <Modal.Content>
+          <Container fluid>
+            <Header as='h3' dividing> Discovery Details</Header>
+            <br />
+
+            <Modal size='small' open={this.props.open} onClose={this.handlePopupClose.bind(this)}>
+              <Modal.Header>Discovery</Modal.Header>
+              <Modal.Content >
+                <SensorConfig />
+              </Modal.Content>
+              <Modal.Actions>
+                <Button onClick={this.handlePopupClose}>              Cancel      </Button>
+                <Button onClick={this.handleSubmit.bind(this)} primary>              Submit      </Button>
+              </Modal.Actions>
+            </Modal>
+
+          </Container>
+        </Modal.Content>
+        <Modal.Actions>
+          <Button onClick={this.handlePopupClose.bind(this)}>Cancel</Button>
+          {/* <Button primary >Done</Button> */}
+        </Modal.Actions>
+      </Modal>
+    );
+  }
+
+}