probe modify

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

@@ -7,6 +7,7 @@ import signUpReducer from '@overflow/member/redux/reducer/signUp';
 import readAllProbeReducer from '@overflow/probe/redux/reducer/readAllByDomain';
 import readProbeReducer from '@overflow/probe/redux/reducer/read';
 import hostReadByProbeReducer from '@overflow/probe/redux/reducer/host_read_by_probe';
+import modifyProbeReducer from '@overflow/probe/redux/reducer/modify';
 
 import readNoAuthProbeReducer from '@overflow/noauthprobe/redux/reducer/read_all_by_domain';
 import noauthAcceptReducer from '@overflow/noauthprobe/redux/reducer/accept';
@@ -89,6 +90,7 @@ const reduxConfig: ReduxConfig = {
     hostReadByProbeReducer,
     noauthAcceptReducer,
     noauthDenyReducer,
+    modifyProbeReducer,
   ],
   sagaWatchers: [
     AsyncRequest,

src/ts/@overflow/probe/react/ProbeDetail.tsx

@@ -8,6 +8,7 @@ import { push as routerPush } from 'react-router-redux';
 import Probe from '@overflow/probe/api/model/Probe';
 import * as asyncRequestActions from '@overflow/commons/redux/action/asyncRequest';
 import * as probeReadActions from '../redux/action/read';
+import * as probeModifyActions from '../redux/action/modify';
 
 export function mapStateToProps(state: any, props: any): ProbeDetailStateProps {
     return {
@@ -24,6 +25,9 @@ export function mapDispatchToProps(dispatch: Dispatch<any>): ProbeDetailDispatch
         onDiscoveryClick: (id: string) => {
             dispatch(routerPush(id + '/ targets'));
         },
+        onModify: (probe: Probe) => {
+            dispatch(asyncRequestActions.request('ProbeService', 'modify', probeModifyActions.REQUEST, JSON.stringify(probe)));
+        },
     };
 }
 

src/ts/@overflow/probe/react/components/ProbeDetailInfo.tsx

@@ -6,6 +6,10 @@ import {
   Segment,
   Header,
   Container,
+  Input,
+  InputOnChangeData,
+  Loader,
+  Dimmer,
 } from 'semantic-ui-react';
 import Probe from '@overflow/probe/api/model/Probe';
 import { Discovery } from '@overflow/discovery/react/components/Discovery';
@@ -19,12 +23,15 @@ export interface StateProps {
 
 export interface DispatchProps {
   onRead?(id: string): void;
-  onDiscoveryClick?(id:string):void;
+  onDiscoveryClick?(id: string): void;
+  onModify?(probe: Probe): void;
 }
 
 export type Props = StateProps & DispatchProps;
 
 export interface State {
+  name: string;
+  desc: string;
 }
 
 
@@ -33,6 +40,8 @@ export class ProbeDetailInfo extends React.Component<Props, State> {
   constructor(props: Props, context: State) {
     super(props, context);
     this.state = {
+      name: undefined,
+      desc: undefined,
     };
   }
 
@@ -55,6 +64,19 @@ export class ProbeDetailInfo extends React.Component<Props, State> {
     }
   }
 
+  public handleNameModify = () => {
+    const p: Probe = this.props.probe;
+    p.displayName = this.state.name;
+    this.props.onModify(p);
+  }
+
+  public handleDescModify = () => {
+    let p: Probe = this.props.probe;
+    p.description = this.state.desc;
+    this.props.onModify(p);
+  }
+
+
   public render(): JSX.Element {
     if (this.props.probe === undefined) {
       return null;
@@ -67,7 +89,13 @@ export class ProbeDetailInfo extends React.Component<Props, State> {
               <Table.Cell collapsing>
                 <Header size='small'>Name</Header>
               </Table.Cell>
-              <Table.Cell>{this.props.probe.displayName}</Table.Cell>
+              <Table.Cell>
+                <Input action={{ color: 'teal', icon: 'edit', onClick: this.handleNameModify.bind(this) }}
+                  defaultValue={this.props.probe.displayName} size='small' onChange={
+                    (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                      this.setState({ name: data.value });
+                    }} />
+              </Table.Cell>
             </Table.Row>
             <Table.Row>
               <Table.Cell collapsing>
@@ -103,7 +131,13 @@ export class ProbeDetailInfo extends React.Component<Props, State> {
               <Table.Cell collapsing>
                 <Header size='small'>Description</Header>
               </Table.Cell>
-              <Table.Cell>{this.props.probe.description}</Table.Cell>
+              <Table.Cell>
+                <Input action={{ color: 'teal', icon: 'edit', onClick: this.handleDescModify }}
+                  defaultValue={this.props.probe.description} size='small' onChange={
+                    (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+                      this.setState({ desc: data.value });
+                    }} />
+              </Table.Cell>
             </Table.Row>
           </Table.Body>
         </Table>

src/ts/@overflow/probe/redux/action/modify.ts

@@ -0,0 +1,7 @@
+export type REQUEST = '@overflow/probe/modify/REQUEST';
+export type REQUEST_SUCCESS = '@overflow/probe/modify/REQUEST/SUCCESS';
+export type REQUEST_FAILURE = '@overflow/probe/modify/REQUEST/FAILURE';
+
+export const REQUEST: REQUEST = '@overflow/probe/modify/REQUEST';
+export const REQUEST_SUCCESS: REQUEST_SUCCESS = '@overflow/probe/modify/REQUEST/SUCCESS';
+export const REQUEST_FAILURE: REQUEST_FAILURE = '@overflow/probe/modify/REQUEST/FAILURE';

src/ts/@overflow/probe/redux/payload/ModifyPayload.ts

@@ -0,0 +1,7 @@
+import Probe from '../../api/model/Probe';
+
+interface ModifyPayload {
+    probe: Probe;
+}
+
+export default ModifyPayload;

src/ts/@overflow/probe/redux/reducer/modify.ts

@@ -0,0 +1,24 @@
+import Action from '@overflow/commons/redux/Action';
+import { ReducersMapObject } from 'redux';
+import Probe from '@overflow/probe/api/model/Probe';
+
+import * as ModifyActionTypes from '../action/modify';
+import ModifyState, { defaultState as modifyDefaultState } from '../state/Modify';
+
+const reducer: ReducersMapObject = {
+  [ModifyActionTypes.REQUEST_SUCCESS]:
+  (state: ModifyState = modifyDefaultState, action: Action<Probe>):
+  ModifyState => {
+      return {
+      ...state,
+      probe: <Probe>action.payload,
+    };
+  },
+  [ModifyActionTypes.REQUEST_FAILURE]:
+  (state: ModifyState = modifyDefaultState, action: Action<Error>):
+  ModifyState => {
+    return state;
+  },
+};
+
+export default reducer;

src/ts/@overflow/probe/redux/state/Modify.ts

@@ -0,0 +1,13 @@
+import Probe from '../../api/model/Probe';
+
+export interface State {
+  readonly probe?: Probe;
+  readonly error?: Error;
+}
+
+export const defaultState: State = {
+  probe: undefined,
+  error: undefined,
+};
+
+export default State;