fixed crawler list

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

@@ -12,6 +12,8 @@ import MetaCrawlerInputItem from '@overflow/meta/api/model/MetaCrawlerInputItem'
 import Target from '@overflow/target/api/model/Target';
 import SensorRegistInfo from '@overflow/sensor/api/model/SensorRegistInfo';
 
+import * as Utils from '@overflow/commons/util/Utils';
+
 export interface CrawlerSelectorStateProps {
   metaCralwerList?: MetaCrawler[];
   targetId?: number;
@@ -110,29 +112,67 @@ export class CrawlerSelector extends React.Component<CrawlerSelectorProps, Crawl
     // },          1500);
   }
 
-  public renderCrawler(): JSX.Element {
+  public handleSelect(crawler: MetaCrawler): void {
+    this.setState({
+      selected: crawler,
+    });
+
+    this.props.onCrawlerReadAllByMetaCrawler(crawler);
+    this.props.onSelectCrawlerId(crawler.id);
+
+    let sd = this.props.getSensor();
+    sd.crawler = crawler;
+    this.props.setSensor(sd);
+  }
+
+  public handleRowActive(crawler: MetaCrawler): boolean {
+    if (this.state.selected === crawler) {
+      return true;
+    }
+    return false;
+  }
+
+  public renderCrawler(): JSX.Element[] {
 
     if (this.props.metaCralwerList === undefined) {
       return null;
     }
 
-    this.convertCrawler();
-    console.log(this.selectOptions);
+    let elems: Array<JSX.Element> = new Array();
 
-    return (
-      <Grid.Row>
-        <Grid.Column width='4'>
-          <Dropdown openOnFocus
-            placeholder='Select Crawler' selection options={this.selectOptions} onChange={this.handleCrawlerSelection.bind(this)} />
-          <br />
-          <br />
-        </Grid.Column>
-        <Grid.Column>
-          <CrawlerAuthInputsContainer metaCrawlerInputItemList={this.props.metaCrawlerInputItemList}
-           getSensor={this.props.getSensor} setSensor={this.props.setSensor}/>
-        </Grid.Column>
-      </Grid.Row>
-    );
+    for(let index: number = 0 ; index < this.props.metaCralwerList.length; ++index) {
+      let crawler: MetaCrawler = this.props.metaCralwerList[index];
+
+      elems.push(
+        <Table.Row key={index} onClick={this.handleSelect.bind(this, crawler)} active={this.handleRowActive(crawler)}>
+        <Table.Cell textAlign={'center'}>{index + 1}</Table.Cell>
+        <Table.Cell textAlign={'center'}>{crawler.name}</Table.Cell>
+        <Table.Cell textAlign={'center'}>{crawler.description}</Table.Cell>
+        <Table.Cell>{Utils.date2date(crawler.createDate)}</Table.Cell>
+      </Table.Row>,
+      );
+
+    }
+
+    return elems;
+
+    // this.convertCrawler();
+    // console.log(this.selectOptions);
+
+    // return (
+    //   <Grid.Row>
+    //     <Grid.Column width='4'>
+    //       <Dropdown openOnFocus
+    //         placeholder='Select Crawler' selection options={this.selectOptions} onChange={this.handleCrawlerSelection.bind(this)} />
+    //       <br />
+    //       <br />
+    //     </Grid.Column>
+    //     <Grid.Column>
+    //       <CrawlerAuthInputsContainer metaCrawlerInputItemList={this.props.metaCrawlerInputItemList}
+    //        getSensor={this.props.getSensor} setSensor={this.props.setSensor}/>
+    //     </Grid.Column>
+    //   </Grid.Row>
+    // );
   }
 
   public render(): JSX.Element {
@@ -144,7 +184,21 @@ export class CrawlerSelector extends React.Component<CrawlerSelectorProps, Crawl
         <br />
         <br />
         <Grid>
-          {this.props.metaCralwerList ? this.renderCrawler() : ''}
+          {/* {this.props.metaCralwerList ? this.renderCrawler() : ''} */}
+          <Table celled selectable>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell textAlign={'center'}>No.</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Name</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Description</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Created at</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+
+          <Table.Body>
+            {this.renderCrawler()}
+          </Table.Body>
+        </Table>
         </Grid>
       </Segment>
     );

src/ts/@overflow/sensor/react/SensorConfigTargetSelect.tsx

@@ -2,7 +2,7 @@ import { connect, Dispatch } from 'react-redux';
 import {
   SensorConfigTargetSelect,
   Props as SensorConfigTargetSelectStateProps,
-  State as SensorConfigTargetSelectDispatchProps,
+  DispatchProps as SensorConfigTargetSelectDispatchProps,
 } from './components/SensorConfigTargetSelect';
 // import State from '../redux/state/ReadAllByTarget';
 import { push as routerPush } from 'react-router-redux';