history filter

src/ts/@overflow/app/config/index.ts

@@ -42,6 +42,7 @@ import DiscoveryInfraTargetRegistAllReducer from '@overflow/discovery/redux/redu
 
 import HistoryReadAllByProbeReducer from '@overflow/history/redux/reducer/read_all_by_probe';
 import HistoryReadAllByProbeAndTypeReducer from '@overflow/history/redux/reducer/read_all_by_probe_and_type';
+import HistoryTypeReadAllReducer from '@overflow/meta/redux/reducer/history_type_read_all';
 
 import AsyncRequest from '@overflow/app/redux/saga/AsyncRequest';
 
@@ -108,6 +109,7 @@ const reduxConfig: ReduxConfig = {
     HistoryReadAllByProbeAndTypeReducer,
     readAllTargetByInfraReducer,
     InfraReadServiceReducer,
+    HistoryTypeReadAllReducer,
   ],
   sagaWatchers: [
     AsyncRequest,

src/ts/@overflow/history/react/HistoryList.tsx

@@ -13,12 +13,14 @@ import MetaHistoryType from '@overflow/meta/api/model/MetaHistoryType';
 import * as readAllByProbeActions from '../redux/action/read_all_by_probe';
 import * as readAllByProbeAndTypeActions from '../redux/action/read_all_by_probe_and_type';
 import * as probeListActions from '@overflow/probe/redux/action/read_all_by_domain';
+import * as historyTypeListActions from '@overflow/meta/redux/action/history_type_read_all';
 
 export function mapStateToProps(state: any, ownProps?: any): HistoryStateProps {
   return {
     path: ownProps.params,
     probes: state.probeList,
     histories: state.historyPage,
+    historyTypes: state.historyTypes,
   };
 }
 
@@ -39,6 +41,9 @@ export function mapDispatchToProps(dispatch: Dispatch<HistoryDispatchProps>, own
     onReadAllProbeByDomain: (domain: Domain) => {
       dispatch(asyncRequestActions.request('ProbeService', 'readAllByDomain', probeListActions.REQUEST, JSON.stringify(domain)));
     },
+    onReadAllMetaHistoryType: () => {
+      dispatch(asyncRequestActions.request('MetaHistoryTypeService', 'readAll', historyTypeListActions.REQUEST));
+    },
   };
 }
 

src/ts/@overflow/history/react/components/HistoryFilter.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import { Table, Button, Header, Container, Menu, Icon } from 'semantic-ui-react';
-
-
-export interface StateProps {
-}
-
-export interface DispatchProps {
-}
-
-export type Props = StateProps & DispatchProps;
-
-export interface State {
-}
-
-export class HistoryFilter extends React.Component<Props, State> {
-
-  constructor(props: any, context: any) {
-    super(props, context);
-    this.state = {
-    };
-
-  }
-
-  public render(): JSX.Element {
-    return (
-      <Container>
-      </Container>
-    );
-  }
-
-
-}

src/ts/@overflow/history/react/components/HistoryList.tsx

@@ -13,10 +13,12 @@ export interface StateProps {
   probes: Probe[];
   histories: Page;
   path: any;
+  historyTypes: MetaHistoryType[];
 }
 
 export interface DispatchProps {
   onReadAllProbeByDomain?(domain: Domain): void;
+  onReadAllMetaHistoryType?(): void;
 
   onReadAllByDomain?(domain: Domain, pageNo: string, countPerPage: string): void;
   onReadAllByProbe?(probe: Probe, pageNo: string, countPerPage: string): void;
@@ -27,18 +29,17 @@ export type Props = StateProps & DispatchProps;
 
 export interface State {
   isTypedHistory: boolean;
-  selectedProbeId: number;
 }
 
 export class HistoryList extends React.Component<Props, State> {
 
   private countPerPage: number = 10;
+  private selectedProbeId: number = 0;
 
   constructor(props: Props, context: State) {
     super(props, context);
     this.state = {
       isTypedHistory: false,
-      selectedProbeId: 0,
     };
   }
 
@@ -47,6 +48,8 @@ export class HistoryList extends React.Component<Props, State> {
       id: 1,
     };
     this.props.onReadAllProbeByDomain(domain);
+    this.props.onReadAllMetaHistoryType();
+
     if (this.props.path === '/histories') {
       this.setState({
         isTypedHistory: false,
@@ -61,14 +64,14 @@ export class HistoryList extends React.Component<Props, State> {
   }
 
   public getAllHistory(pageNo: number): void {
-    if (this.state.selectedProbeId === 0) {
+    if (this.selectedProbeId === 0) {
       let domain: Domain = {
         id: Number(1),
       };
       this.props.onReadAllByDomain(domain, String(pageNo), String(this.countPerPage));
     } else {
       let probe: Probe = {
-        id: Number(this.state.selectedProbeId),
+        id: Number(this.selectedProbeId),
       };
       this.props.onReadAllByProbe(probe, String(pageNo), String(this.countPerPage));
     }
@@ -113,9 +116,6 @@ export class HistoryList extends React.Component<Props, State> {
   }
 
   public render(): JSX.Element {
-    if (this.props.probes !== undefined) {
-      console.log(this.props.probes);
-    }
     let historyList: JSX.Element = (
       <Container fluid>
         <Table celled selectable striped>
@@ -160,13 +160,101 @@ export class HistoryList extends React.Component<Props, State> {
       </Container>
     );
 
+    let filter = <HistoryFilter probes={this.props.probes}
+      onProbeChange={this.handleProbeChange}
+      historyTypes={this.props.historyTypes}
+    />;
     return (
       <ListContainer
+        filter={filter}
         contents={historyList}
         data={this.props.histories}
       />
     );
   }
+
+  private handleProbeChange = (probeId: number) => {
+    this.selectedProbeId = probeId;
+    this.getAllHistory(0);
+  }
 }
 
 
+
+
+export interface FilterProps {
+  probes: Probe[];
+  historyTypes: MetaHistoryType[];
+  onProbeChange(probeId: number): void;
+}
+
+export interface FilterState {
+  selectedProbeId: number;
+}
+
+import { Dropdown, Form, Radio } from 'semantic-ui-react';
+
+export class HistoryFilter extends React.Component<FilterProps, FilterState> {
+
+  constructor(props: any, context: any) {
+    super(props, context);
+    this.state = {
+      selectedProbeId: 0,
+    };
+  }
+
+  public render(): JSX.Element {
+    if (this.props.probes === null || this.props.probes === undefined) {
+      return null;
+    }
+    console.log(this.props.historyTypes);
+    return (
+      <Form>
+        <Form.Field>Probe</Form.Field>
+        <Form.Field>
+          <Dropdown selection placeholder='All' options={this.getOptions()}
+            onChange={(event: React.SyntheticEvent<HTMLElement>, data: any) => {
+              this.setState({
+                selectedProbeId: data.value,
+              });
+              this.props.onProbeChange(data.value);
+            }} />
+        </Form.Field>
+        <Form.Field>Type</Form.Field>
+        <Form.Field>
+          <Radio
+            label={this.props.historyTypes[0].name}
+            name='radioGroup'
+            value='this'
+          />
+        </Form.Field>
+        <Form.Field>
+          <Radio
+            label='Or that'
+            name='radioGroup'
+            value='that'
+          />
+        </Form.Field>
+      </Form>
+    );
+  }
+
+  private getOptions(): Array<object> {
+    let res = new Array;
+    let all = {
+      key: 0,
+      text: 'All',
+      value: 0,
+    };
+    res.push(all);
+    this.props.probes.map((probe: Probe, index: number) => {
+      let option = {
+        key: index + 1,
+        text: probe.displayName,
+        value: probe.id,
+      };
+      res.push(option);
+    });
+    return res;
+  }
+}

src/ts/@overflow/meta/redux/action/history_type_read_all.ts

@@ -0,0 +1,10 @@
+
+export type REQUEST = '@overflow/history_type/read_all/REQUEST';
+export type REQUEST_SUCCESS = '@overflow/history_type/read_all/REQUEST/SUCCESS';
+export type REQUEST_FAILURE = '@overflow/history_type/read_all/REQUEST/FAILURE';
+
+export const REQUEST: REQUEST = '@overflow/history_type/read_all/REQUEST';
+export const REQUEST_SUCCESS: REQUEST_SUCCESS = '@overflow/history_type/read_all/REQUEST/SUCCESS';
+export const REQUEST_FAILURE: REQUEST_FAILURE = '@overflow/history_type/read_all/REQUEST/FAILURE';
+
+

src/ts/@overflow/meta/redux/reducer/history_type_read_all.ts

@@ -0,0 +1,26 @@
+
+import Action from '@overflow/commons/redux/Action';
+import { ReducersMapObject } from 'redux';
+
+import * as HistoryTypeReadAllActions from '../action/history_type_read_all';
+import HistoryTypeReadAllState, { defaultState as HistoryTypeReadAllDefaultState } from '../state/HistoryTypeReadAll';
+
+import MetaHistoryType from '../../api/model/MetaHistoryType';
+
+const reducer: ReducersMapObject = {
+  [HistoryTypeReadAllActions.REQUEST_SUCCESS]:
+  (state: HistoryTypeReadAllState = HistoryTypeReadAllDefaultState, action: Action<MetaHistoryType[]>):
+   HistoryTypeReadAllState => {
+    return {
+      ...state,
+      historyTypes: <MetaHistoryType[]>action.payload,
+    };
+  },
+  [HistoryTypeReadAllActions.REQUEST_FAILURE]:
+  (state: HistoryTypeReadAllState = HistoryTypeReadAllDefaultState, action: Action<Error>):
+   HistoryTypeReadAllState => {
+    return state;
+  },
+};
+
+export default reducer;

src/ts/@overflow/meta/redux/state/HistoryTypeReadAll.ts

@@ -0,0 +1,14 @@
+
+import MetaHistoryType from '../../api/model/MetaHistoryType';
+
+export interface State {
+  readonly historyTypes: MetaHistoryType[];
+  readonly error?: Error;
+}
+
+export const defaultState: State = {
+  historyTypes: undefined,
+  error: undefined,
+};
+
+export default State;