noauthlist
This commit is contained in:
parent
8e4b42b860
commit
8ba2bc5c3b
26
src/ts/@overflow/noauthprobe/react/NoauthProbeList.tsx
Normal file
26
src/ts/@overflow/noauthprobe/react/NoauthProbeList.tsx
Normal file
|
@ -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);
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user