dd

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

@@ -38,6 +38,10 @@ export function mapDispatchToProps(dispatch: Dispatch<HistoryDispatchProps>, own
       dispatch(asyncRequestActions.request('HistoryService', 'readAllByProbeAndType', readAllByProbeAndTypeActions.REQUEST,
                                            JSON.stringify(probe), JSON.stringify(type), pageNo, countPerPage));
     },
+    onReadAllByDomainAndType: (domain: Domain, type: MetaHistoryType, pageNo: string, countPerPage: string) => {
+      dispatch(asyncRequestActions.request('HistoryService', 'readAllByProbeAndType', readAllByProbeAndTypeActions.REQUEST,
+                                           JSON.stringify(domain), JSON.stringify(type), pageNo, countPerPage));
+    },
     onReadAllProbeByDomain: (domain: Domain) => {
       dispatch(asyncRequestActions.request('ProbeService', 'readAllByDomain', probeListActions.REQUEST, JSON.stringify(domain)));
     },

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

@@ -23,6 +23,7 @@ export interface DispatchProps {
   onReadAllByDomain?(domain: Domain, pageNo: string, countPerPage: string): void;
   onReadAllByProbe?(probe: Probe, pageNo: string, countPerPage: string): void;
   onReadAllByProbeAndType?(probe: Probe, type: MetaHistoryType, pageNo: string, countPerPage: string): void;
+  onReadAllByDomainAndType?(domain: Domain, type: MetaHistoryType, pageNo: string, countPerPage: string): void;
 }
 
 export type Props = StateProps & DispatchProps;
@@ -35,6 +36,7 @@ export class HistoryList extends React.Component<Props, State> {
 
   private countPerPage: number = 10;
   private selectedProbeId: number = 0;
+  private selectedTypeId: number = 0;
 
   constructor(props: Props, context: State) {
     super(props, context);
@@ -66,12 +68,12 @@ export class HistoryList extends React.Component<Props, State> {
   public getAllHistory(pageNo: number): void {
     if (this.selectedProbeId === 0) {
       let domain: Domain = {
-        id: Number(1),
+        id: 1,
       };
       this.props.onReadAllByDomain(domain, String(pageNo), String(this.countPerPage));
     } else {
       let probe: Probe = {
-        id: Number(this.selectedProbeId),
+        id: this.selectedProbeId,
       };
       this.props.onReadAllByProbe(probe, String(pageNo), String(this.countPerPage));
     }
@@ -79,7 +81,7 @@ export class HistoryList extends React.Component<Props, State> {
 
   public getTypedHistory(pageNo: number): void {
     let probe: Probe = {
-      id: Number(1),
+      id: this.selectedProbeId,
     };
     let type = this.props.path.split('/')[1];
     this.props.onReadAllByProbeAndType(probe, this.getMetaType(type), String(pageNo), String(this.countPerPage));
@@ -122,6 +124,7 @@ export class HistoryList extends React.Component<Props, State> {
           <Table.Header>
             <Table.Row>
               <Table.HeaderCell textAlign={'center'}>No.</Table.HeaderCell>
+              <Table.HeaderCell textAlign={'center'}>Probe</Table.HeaderCell>
               <Table.HeaderCell textAlign={'center'}>Type</Table.HeaderCell>
               <Table.HeaderCell textAlign={'center'}>Message</Table.HeaderCell>
               <Table.HeaderCell textAlign={'center'}>Created At</Table.HeaderCell>
@@ -133,17 +136,20 @@ export class HistoryList extends React.Component<Props, State> {
             {this.props.histories && this.props.histories.content ?
               this.props.histories.content.map((history: History, index: number) => (
                 <Table.Row key={index} >
-                  <Table.Cell textAlign={'center'}>{history.id}</Table.Cell>
+                  <Table.Cell textAlign={'center'} collapsing>{history.id}</Table.Cell>
-                  <Table.Cell textAlign={'center'}>
+                  <Table.Cell textAlign={'center'} collapsing>
+                    {history.probe.displayName}
+                  </Table.Cell>
+                  <Table.Cell textAlign={'center'} collapsing>
                     {history.type.name}
                   </Table.Cell>
                   <Table.Cell>
                     {history.message}
                   </Table.Cell>
-                  <Table.Cell>
+                  <Table.Cell collapsing>
                     {history.createDate}
                   </Table.Cell>
-                  <Table.Cell>
+                  <Table.Cell collapsing>
                     {history.member.name}
                   </Table.Cell>
                 </Table.Row>
@@ -163,6 +169,7 @@ export class HistoryList extends React.Component<Props, State> {
     let filter = <HistoryFilter probes={this.props.probes}
       onProbeChange={this.handleProbeChange}
       historyTypes={this.props.historyTypes}
+      onTypeChange={this.handleTypeChange}
     />;
     return (
       <ListContainer
@@ -173,9 +180,45 @@ export class HistoryList extends React.Component<Props, State> {
     );
   }
 
+  // todo. refactoring
   private handleProbeChange = (probeId: number) => {
     this.selectedProbeId = probeId;
-    this.getAllHistory(0);
+    this.getHistoryByFilter();
+  }
+  // todo. refactoring
+  private handleTypeChange = (typeId: number) => {
+    this.selectedTypeId = typeId;
+    this.getHistoryByFilter();
+  }
+  // todo. refactoring
+  private getHistoryByFilter = () => {
+    if (this.selectedProbeId === 0) {
+      // readAllByDomain or readAllByDomainAndType
+      const domain: Domain = {
+        id: 1,
+      };
+      if (this.selectedTypeId === 0) {
+        this.props.onReadAllByDomain(domain, String(0), String(this.countPerPage));
+      } else {
+        const type: MetaHistoryType = {
+          id: this.selectedTypeId,
+        };
+        this.props.onReadAllByDomainAndType(domain, type, String(0), String(this.countPerPage));
+      }
+    } else {
+      // readAllByProbe or readAllByProbeAndType
+      const probe: Probe = {
+        id: this.selectedProbeId,
+      };
+      if (this.selectedTypeId === 0) {
+        this.props.onReadAllByProbe(probe, String(0), String(this.countPerPage));
+      } else {
+        const type: MetaHistoryType = {
+          id: this.selectedTypeId,
+        };
+        this.props.onReadAllByProbeAndType(probe, type, String(0), String(this.countPerPage));
+      }
+    }
   }
 }
 
@@ -186,10 +229,12 @@ export interface FilterProps {
   probes: Probe[];
   historyTypes: MetaHistoryType[];
   onProbeChange(probeId: number): void;
+  onTypeChange(typeId: number): void;
 }
 
 export interface FilterState {
   selectedProbeId: number;
+  selectedTypeId: number;
 }
 
 import { Dropdown, Form, Radio } from 'semantic-ui-react';
@@ -200,6 +245,7 @@ export class HistoryFilter extends React.Component<FilterProps, FilterState> {
     super(props, context);
     this.state = {
       selectedProbeId: 0,
+      selectedTypeId: 0,
     };
   }
 
@@ -207,7 +253,6 @@ export class HistoryFilter extends React.Component<FilterProps, FilterState> {
     if (this.props.probes === null || this.props.probes === undefined) {
       return null;
     }
-    console.log(this.props.historyTypes);
     return (
       <Form>
         <Form.Field>Probe</Form.Field>
@@ -221,24 +266,35 @@ export class HistoryFilter extends React.Component<FilterProps, FilterState> {
             }} />
         </Form.Field>
         <Form.Field>Type</Form.Field>
-        <Form.Field>
+        {this.renderTypesRadio()}
-          <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 renderTypesRadio = (): JSX.Element[] => {
+    if (this.props.historyTypes === undefined) {
+      return null;
+    }
+    return this.props.historyTypes.map((type: MetaHistoryType, index: number) => (
+      <Form.Field key={index}>
+        <Radio
+          slider
+          label={type.name}
+          name='historyType'
+          value={type.id}
+          checked={this.state.selectedTypeId === type.id}
+          onChange={this.handleTypeChange}
+        />
+      </Form.Field>
+    ));
+  }
+
+  private handleTypeChange = (e: React.SyntheticEvent<HTMLInputElement>, data: any) => {
+    this.setState({ selectedTypeId: data.value });
+    this.props.onTypeChange(data.value);
+  }
+
   private getOptions(): Array<object> {
     let res = new Array;
     let all = {