Fix #206

apache · Dec 10, 2018 · 875eea3 · 875eea3
1 parent 56f2d9a
commit 875eea3
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 32 deletions.
diff --git a/mock/aggregation.js b/mock/aggregation.js
@@ -31,7 +31,7 @@ export default {
     return data.array;
   },
   getAllEndpointTopN: () => {
-    const data =  mockjs.mock({ 'array|10': [{ 'id|+1': 1, name: '@name', 'value|200-1000': 1 }]});
+    const data =  mockjs.mock({ 'array|10': [{ 'id|+1': 100, name: '@name', 'value|200-1000': 1 }]});
     return data.array;
   },
 };
diff --git a/src/components/Page/Search/index.js b/src/components/Page/Search/index.js
@@ -37,53 +37,61 @@ export default class Search extends Component {
   componentDidMount() {
     const {...propsData} = this.props;
     if (propsData.variables && Object.keys(propsData.variables).length > 0) {
-      this.originFetchServer('', propsData.value.key);
+      this.originFetchServer('', propsData.value);
     }
   }
 
   componentDidUpdate(prevProps) {
     const {...propsData} = this.props;
     if (prevProps.variables !== propsData.variables) {
-      this.originFetchServer('', propsData.value.key);
+      this.originFetchServer('', propsData.value);
     }
   }
 
-  fetchServer = (value, key) => {
-    if (value === undefined) {
+  fetchServer = (keyword, value) => {
+    if (keyword === undefined) {
       return;
     }
     const { url, query, variables = {}, transform } = this.props;
-    this.lastFetchId += 1;
-    const fetchId = this.lastFetchId;
+    const that = this;
+    that.lastFetchId += 1;
+    const fetchId = that.lastFetchId;
     this.setState({ data: [], fetching: true });
     request(`/api${url}`, {
       method: 'POST',
       body: {
         variables: {
           ...variables,
-          keyword: value,
+          keyword,
         },
         query,
       },
     }).then(body => {
-      if (!body.data || fetchId !== this.lastFetchId) {
+      if (!body.data || fetchId !== that.lastFetchId) {
         // for fetch callback order
         return;
       }
       const list = body.data[Object.keys(body.data)[0]];
-      const that = this;
       this.setState({ data: transform ? list.map(transform) : list, fetching: false });
       if (that.state.data.length < 1) {
         return;
       }
-      if (!key) {
+      if (!value) {
+        return;
+      }
+      const { key, label } = value;
+      if (!key || key.length < 1) {
         this.handleSelect(that.state.data[0]);
         return;
       }
       const option = that.state.data.find(_ => _.key === key);
-      if (!option) {
-        this.handleSelect(that.state.data[0]);
+      if (option) {
+        return;
       }
+      const target = {key, label};
+      const newList = [...that.state.data, target];
+      this.setState({data: newList});
+      this.handleSelect(target);
     });
   };
 

diff --git a/src/models/endpoint.js b/src/models/endpoint.js
@@ -327,23 +327,6 @@ export default base({
     setup({ history, dispatch }) {
       return history.listen(({ pathname, state }) => {
         if (pathname === '/monitor/endpoint' && state) {
-          dispatch({
-            type: 'saveVariables',
-            payload: {
-              values: {
-                endpointId: state.key,
-              },
-              labels: {
-                endpointId: state.label,
-              },
-            },
-          });
-          dispatch({
-            type: 'saveData',
-            payload: {
-              endpointInfo: { key: state.key, label: state.label },
-            },
-          });
           dispatch({
             type: 'fetchInfo',
             payload: {

diff --git a/src/routes/Endpoint/Endpoint.js b/src/routes/Endpoint/Endpoint.js
@@ -264,6 +264,12 @@ export default class Endpoint extends PureComponent {
     const { getFieldDecorator } = form;
     const { variables: { options }, data } = endpoint;
     const { showTimeline, queryTrace, currentTraceId } = data;
+    if (!this.serviceInfo) {
+      this.serviceInfo = data.serviceInfo;
+    }
+    if (data.serviceInfo && this.serviceInfo.serviceId !== data.serviceInfo.serviceId) {
+      this.serviceInfo = data.serviceInfo;
+    }
     return (
       <div>
         {showTimeline ? (
@@ -293,14 +299,14 @@ export default class Endpoint extends PureComponent {
                   </Select>
                 )}
               </FormItem>
-              {data.serviceInfo && data.serviceInfo.serviceId  ? (
+              {this.serviceInfo && this.serviceInfo.serviceId  ? (
                 <FormItem>
                   {getFieldDecorator('endpointId')(
                     <Search
                       placeholder="Search a endpoint"
                       onSelect={this.handleSelect.bind(this)}
                       url="/graphql"
-                      variables={data.serviceInfo}
+                      variables={this.serviceInfo}
                       query={`
                         query SearchEndpoint($serviceId: ID!, $keyword: String!) {
                           searchEndpoint(serviceId: $serviceId, keyword: $keyword, limit: 10) {