noauthlist

src/ts/@overflow/noauthprobe/react/NoauthProbeList.tsx

@@ -0,0 +1,26 @@
+import { connect, Dispatch } from 'react-redux';
+import {
+    NoauthProbeList,
+    StateProps as ProbeListStateProps,
+    DispatchProps as ProbeListDispatchProps,
+} from './components/NoauthProbeList';
+import Domain from '@overflow/domain/api/model/Domain';
+
+import * as probeListActions from '../redux/action/read_all_by_domain';
+
+
+export function mapStateToProps(state: any): ProbeListStateProps {
+    return {
+
+    };
+}
+
+export function mapDispatchToProps(dispatch: Dispatch<any>): ProbeListDispatchProps {
+    return {
+        onReadAllByDomain: (domain: Domain) => {
+            dispatch(probeListActions.request(domain));
+        },
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(NoauthProbeList);

src/ts/@overflow/noauthprobe/react/components/NoauthProbeList.tsx

@@ -0,0 +1,153 @@
+import * as React from 'react';
+import { Table,
+  Checkbox,
+  Button,
+  Header,
+  Container,
+} from 'semantic-ui-react';
+import NoAuthProbe from '@overflow/noauthprobe/api/model/NoAuthProbe';
+import Domain from '@overflow/domain/api/model/Domain';
+
+export interface StateProps {
+}
+
+export interface DispatchProps {
+  onReadAllByDomain(domain: Domain): void;
+}
+
+export type Props = StateProps & DispatchProps;
+
+export interface State {
+    selected: NoAuthProbe[];
+}
+
+export class NoauthProbeList extends React.Component<any, any> {
+
+  private data: any;
+  private selectedIds: Array<string>;
+
+  constructor(props: Props, context: State) {
+    super(props, context);
+    this.state = {
+      selected: [],
+    };
+    this.selectedIds = new Array();
+  }
+
+  public componentWillMount(): void {
+    this.data = [
+      {
+        'id': '11',
+        'MetaNoAuthProbeStatus': {
+          'name': 'NORMAL',
+        },
+        'hostName': 'insanity windows',
+        'macAddress': '14:fe:b5:9d:54:7e',
+        'ipAddress': '192.168.1.105',
+        'tempProbeKey': '45374d4egsdfw332',
+        'apiKey': '45374d4egsdfw332',
+        'domain': {
+
+        },
+        'probe': {
+
+        },
+      },
+      {
+        'id': '22',
+        'MetaNoAuthProbeStatus': {
+          'name': 'NORMAL',
+        },
+        'hostName': 'insanity ubuntu',
+        'macAddress': '14:fe:b5:9d:54:7e',
+        'ipAddress': '192.168.1.105',
+        'tempProbeKey': '45374d4egsdfw332',
+        'apiKey': '45374d4egsdfw332',
+        'domain': {
+
+        },
+        'probe': {
+
+        },
+      },
+    ];
+  }
+
+  public handleSelect(id: string): void {
+    let idx = this.selectedIds.indexOf(id);
+    if (idx === -1) {
+      this.selectedIds.push(id);
+    } else {
+      this.selectedIds.splice(idx, 1);
+    }
+    this.setState({
+      selected: this.selectedIds,
+    });
+  }
+
+  public checkExist(id: string): boolean {
+    if (this.state.selected.indexOf(id) === -1) {
+      return false;
+    }
+    return true;
+  }
+
+  public handleAccept(): void {
+    alert(this.state.selected);
+  }
+
+  public handleDeny(): void {
+    alert(this.state.selected);
+  }
+
+  public handleRowActive(id: string):boolean {
+    if (this.state.selected.indexOf(id) === -1) {
+      return false;
+    }
+    return true;
+  }
+
+  public render(): JSX.Element {
+
+    return (
+      <Container fluid>
+        <Header as='h3' dividing>Noauth Probes</Header>
+        <Table celled selectable striped>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell />
+              <Table.HeaderCell textAlign={'center'}>No.</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Host IP</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Host Mac</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Host Name</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Created At</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>API Key</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+
+          <Table.Body>
+            {this.data.map((probe: any, index: number) => (
+              <Table.Row key={index} onClick={this.handleSelect.bind(this, probe.id)} active={this.handleRowActive(probe.id)}>
+                <Table.Cell collapsing>
+                  <Checkbox checked={this.checkExist(probe.id)} />
+                </Table.Cell>
+                <Table.Cell textAlign={'center'}>{index + 1}</Table.Cell>
+                <Table.Cell textAlign={'center'}>{probe.ipAddress}</Table.Cell>
+                <Table.Cell textAlign={'center'}>{probe.macAddress}</Table.Cell>
+                <Table.Cell>{probe.hostName}</Table.Cell>
+                <Table.Cell textAlign={'center'}></Table.Cell>
+                <Table.Cell textAlign={'center'}>{probe.apiKey}</Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+
+        <Button primary floated={'right'} onClick={this.handleAccept.bind(this)}>Accept</Button>
+        <Button floated={'right'} onClick={this.handleDeny.bind(this)}>Deny</Button>
+      </Container>
+    );
+  }
+}
+
+
+