You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@skywalking.apache.org by ha...@apache.org on 2018/06/29 03:23:48 UTC

[incubator-skywalking-ui] branch 5.0.0/beta2 updated (bf2649f -> 611711d)

This is an automated email from the ASF dual-hosted git repository.

hanahmily pushed a change to branch 5.0.0/beta2
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git.


    from bf2649f  Transform 'operationName' to 'operationNames' in models
     new f472336  Add applicationId to the link is from topN service list to service page
     new 611711d  Refactor link parameter

The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


Summary of changes:
 mock/application.js                   |  2 +-
 mock/dashboard.js                     |  2 +-
 src/components/Page/Search/index.js   |  3 ++-
 src/models/application.js             |  8 ++++++--
 src/models/dashboard.js               |  8 ++++++--
 src/models/service.js                 | 13 +++++++++++++
 src/models/trace.js                   |  5 +++--
 src/routes/Application/Application.js |  7 +++++--
 src/routes/Dashboard/Dashboard.js     |  7 +++++--
 src/routes/Service/Service.js         |  5 +++--
 src/routes/Topology/Topology.js       | 11 ++++++++++-
 src/utils/models.js                   | 15 +++++++++++++++
 12 files changed, 70 insertions(+), 16 deletions(-)


[incubator-skywalking-ui] 01/02: Add applicationId to the link is from topN service list to service page

Posted by ha...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

hanahmily pushed a commit to branch 5.0.0/beta2
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git

commit f47233628643621e1169d204ba28b75cbe872929
Author: Gao Hongtao <ha...@gmail.com>
AuthorDate: Fri Jun 29 10:21:41 2018 +0800

    Add applicationId to the link is from topN service list to service
    page
---
 mock/application.js                   |  2 +-
 mock/dashboard.js                     |  2 +-
 src/components/Page/Search/index.js   |  3 ++-
 src/models/application.js             |  8 ++++++--
 src/models/dashboard.js               |  8 ++++++--
 src/models/service.js                 | 13 +++++++++++++
 src/routes/Application/Application.js |  7 +++++--
 src/routes/Dashboard/Dashboard.js     |  7 +++++--
 src/routes/Service/Service.js         |  5 +++--
 9 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/mock/application.js b/mock/application.js
index 5edd30f..4da9fe8 100644
--- a/mock/application.js
+++ b/mock/application.js
@@ -32,7 +32,7 @@ export default {
     res.json(mockjs.mock(
       {
         data: {
-          'getSlowService|10': [{ 'key|+1': 1, label: '@url', 'value|200-1000': 1 }],
+          'getSlowService|10': [{ service: { 'key|+1': 1, label: '@url', 'applicationId|+1': 1, applicationName: '@name' }, 'value|200-1000': 1 }],
           'getServerThroughput|10': [{
             'key|+1': 3,
             osName: 'Linux-@name',
diff --git a/mock/dashboard.js b/mock/dashboard.js
index 1c5ef14..0d58909 100644
--- a/mock/dashboard.js
+++ b/mock/dashboard.js
@@ -48,7 +48,7 @@ export default {
             },
             responseTimeStep: 50,
           },
-          'getTopNSlowService|10': [{ 'key|+1': 1, label: '@url', 'value|200-1000': 1 }],
+          'getTopNSlowService|10': [{ service: { 'key|+1': 1, label: '@url', 'applicationId|+1': 1, applicationName: '@name' }, 'value|200-1000': 1 }],
           'getTopNApplicationThroughput|10': [{ 'key|+1': 1, label: '@name', 'value|100-10000': 1 }],
         },
       }
diff --git a/src/components/Page/Search/index.js b/src/components/Page/Search/index.js
index a7060a8..3337fde 100644
--- a/src/components/Page/Search/index.js
+++ b/src/components/Page/Search/index.js
@@ -36,7 +36,7 @@ export default class Search extends PureComponent {
   }
   componentDidMount() {
     if (this.props.variables && Object.keys(this.props.variables).length > 0) {
-      this.originFetchServer('', true);
+      this.originFetchServer('', !this.props.value.key);
     }
   }
   componentDidUpdate(prevProps) {
@@ -49,6 +49,7 @@ export default class Search extends PureComponent {
       return;
     }
     const { url, query, variables = {}, transform } = this.props;
+    console.info(variables);
     this.lastFetchId += 1;
     const fetchId = this.lastFetchId;
     this.setState({ data: [], fetching: true });
diff --git a/src/models/application.js b/src/models/application.js
index 7b04d70..cd40b39 100644
--- a/src/models/application.js
+++ b/src/models/application.js
@@ -31,8 +31,12 @@ const optionsQuery = `
 const dataQuery = `
   query Application($applicationId: ID!, $duration: Duration!) {
     getSlowService(applicationId: $applicationId, duration: $duration, topN: 10) {
-      key: id
-      label: name
+      service {
+        key: id
+        label: name
+        applicationId
+        applicationName
+      }
       value: avgResponseTime
     }
     getServerThroughput(applicationId: $applicationId, duration: $duration, topN: 999999) {
diff --git a/src/models/dashboard.js b/src/models/dashboard.js
index 58ea75c..b5d14ee 100644
--- a/src/models/dashboard.js
+++ b/src/models/dashboard.js
@@ -55,8 +55,12 @@ export default generateModal({
         responseTimeStep
       }
       getTopNSlowService(duration: $duration, topN: 10) {
-        key: id
-        label: name
+        service {
+          key: id
+          label: name
+          applicationId
+          applicationName
+        }
         value: avgResponseTime
       }
       getTopNApplicationThroughput(duration: $duration, topN: 10) {
diff --git a/src/models/service.js b/src/models/service.js
index af8dfed..4324b54 100644
--- a/src/models/service.js
+++ b/src/models/service.js
@@ -164,6 +164,9 @@ export default generateModal({
         return rawState;
       }
       const { variables: { values } } = rawState;
+      if (!values.applicationId) {
+        return rawState;
+      }
       return {
         ...rawState,
         data: {
@@ -187,17 +190,27 @@ export default generateModal({
     setup({ history, dispatch }) {
       return history.listen(({ pathname, state }) => {
         if (pathname === '/monitor/service' && state) {
+          console.info(state);
           dispatch({
             type: 'saveVariables',
             payload: {
               values: {
                 serviceId: state.key,
+                applicationId: state.applicationId,
               },
               labels: {
                 serviceId: state.label,
+                applicationId: state.applicationName,
               },
             },
           });
+          dispatch({
+            type: 'saveData',
+            payload: {
+              appInfo: { applicationId: state.applicationId },
+              serviceInfo: { key: state.key, label: state.label },
+            },
+          });
         }
       });
     },
diff --git a/src/routes/Application/Application.js b/src/routes/Application/Application.js
index 6b9d89c..4bdde2b 100644
--- a/src/routes/Application/Application.js
+++ b/src/routes/Application/Application.js
@@ -200,9 +200,12 @@ export default class Application extends PureComponent {
                 bodyStyle={{ padding: '0px 10px' }}
               >
                 <RankList
-                  data={data.getSlowService}
+                  data={data.getSlowService.map(_ => ({ ..._.service, value: _.value }))}
                   renderValue={_ => `${_.value} ms`}
-                  onClick={(key, item) => redirect(this.props.history, '/monitor/service', { key, label: item.label })}
+                  onClick={(key, item) => redirect(this.props.history, '/monitor/service', { key,
+                    label: item.label,
+                    applicationId: item.applicationId,
+                    applicationName: item.applicationName })}
                 />
               </Card>
             </Col>
diff --git a/src/routes/Dashboard/Dashboard.js b/src/routes/Dashboard/Dashboard.js
index 6b454d9..8680d61 100644
--- a/src/routes/Dashboard/Dashboard.js
+++ b/src/routes/Dashboard/Dashboard.js
@@ -150,9 +150,12 @@ export default class Dashboard extends PureComponent {
               bodyStyle={{ padding: '0px 10px' }}
             >
               <RankList
-                data={data.getTopNSlowService}
+                data={data.getTopNSlowService.map(_ => ({ ..._.service, value: _.value }))}
                 renderValue={_ => `${_.value} ms`}
-                onClick={(key, item) => redirect(this.props.history, '/monitor/service', { key, label: item.label })}
+                onClick={(key, item) => redirect(this.props.history, '/monitor/service', { key,
+                    label: item.label,
+                    applicationId: item.applicationId,
+                    applicationName: item.applicationName })}
               />
             </Card>
           </Col>
diff --git a/src/routes/Service/Service.js b/src/routes/Service/Service.js
index cabe194..2bfc47c 100644
--- a/src/routes/Service/Service.js
+++ b/src/routes/Service/Service.js
@@ -99,7 +99,7 @@ export default class Service extends PureComponent {
     if (!values.applicationId) {
       return;
     }
-    const { key: serviceId, label: serviceName } = variables;
+    const { key: serviceId, label: serviceName, duration } = variables;
     if (!serviceId) {
       return;
     }
@@ -107,10 +107,11 @@ export default class Service extends PureComponent {
       type: 'service/fetchData',
       payload: { variables: {
         serviceId,
+        duration,
         traceCondition: {
           applicationId: values.applicationId,
           operationName: serviceName,
-          queryDuration: variables.duration,
+          queryDuration: duration,
           traceState: 'ALL',
           queryOrder: 'BY_DURATION',
           paging: {


[incubator-skywalking-ui] 02/02: Refactor link parameter

Posted by ha...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

hanahmily pushed a commit to branch 5.0.0/beta2
in repository https://gitbox.apache.org/repos/asf/incubator-skywalking-ui.git

commit 611711d54d079579771013cb973edd1268300dbb
Author: Gao Hongtao <ha...@gmail.com>
AuthorDate: Fri Jun 29 10:48:29 2018 +0800

    Refactor link parameter
---
 src/models/trace.js             |  5 +++--
 src/routes/Topology/Topology.js | 11 ++++++++++-
 src/utils/models.js             | 15 +++++++++++++++
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/models/trace.js b/src/models/trace.js
index d6ef5df..c118deb 100644
--- a/src/models/trace.js
+++ b/src/models/trace.js
@@ -153,10 +153,11 @@ export default generateModal({
     setup({ history, dispatch }) {
       return history.listen(({ pathname, state }) => {
         if (pathname === '/trace' && state) {
+          const { traceState = 'ALL', queryOrder = 'BY_START_TIME' } = state;
           dispatch({
-            type: 'saveVariables',
+            type: 'initVariables',
             payload: {
-              values: state.values,
+              values: { ...state.values, traceState, queryOrder },
               labels: state.labels,
             },
           });
diff --git a/src/routes/Topology/Topology.js b/src/routes/Topology/Topology.js
index 5ba2fd7..21127c1 100644
--- a/src/routes/Topology/Topology.js
+++ b/src/routes/Topology/Topology.js
@@ -118,7 +118,16 @@ export default class Topology extends PureComponent {
     const { data: { appInfo } } = this.props.topology;
     return [
       <Icon type="appstore" onClick={() => redirect(this.props.history, '/monitor/application', { key: appInfo.id, label: appInfo.name })} />,
-      <Icon type="exception" onClick={() => redirect(this.props.history, '/trace', { values: { applicationId: appInfo.id }, labels: { applicationId: appInfo.name } })} />,
+      <Icon
+        type="exception"
+        onClick={() => redirect(this.props.history, '/trace',
+        { values: {
+            applicationId: appInfo.id,
+            duration: { ...this.props.duration, input: this.props.globalVariables.duration },
+          },
+          labels: { applicationId: appInfo.name },
+        })}
+      />,
       appInfo.isAlarm ? <Icon type="bell" onClick={() => redirect(this.props.history, '/monitor/alarm')} /> : null,
     ];
   }
diff --git a/src/utils/models.js b/src/utils/models.js
index 3c22d22..16a32c6 100644
--- a/src/utils/models.js
+++ b/src/utils/models.js
@@ -180,6 +180,21 @@ export function generateModal({ namespace, dataQuery, optionsQuery, defaultOptio
           },
         };
       },
+      initVariables(preState, { payload: { values: variableValues, labels = {} } }) {
+        const { variables: preVariables } = preState;
+        return {
+          ...preState,
+          variables: {
+            ...preVariables,
+            values: {
+              ...variableValues,
+            },
+            labels: {
+              ...labels,
+            },
+          },
+        };
+      },
       ...reducers,
     },
     subscriptions: {