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/09/05 08:57:06 UTC

[incubator-skywalking-ui] branch 6.0.0/dev updated (261fcd9 -> d2af186)

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

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


    from 261fcd9  Update submodule
     new 5521695  Refactor trace page for v6 protocol
     new d2af186  Refactor alarm page for v6 protocol

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:
 .roadhogrc.mock.js                 |  31 ++--
 mock/alarm.js                      |   9 ++
 mock/metadata.js                   |   6 +
 mock/trace.js                      | 299 +++++++++++++++++--------------------
 query-protocol                     |   2 +-
 src/components/TraceStack/index.js |  10 +-
 src/models/alarm.js                |  46 +++---
 src/models/service.js              |   2 +-
 src/models/trace.js                |  18 +--
 src/routes/Alarm/Alarm.js          |  38 ++---
 src/routes/Trace/TraceSearch.js    |  12 +-
 11 files changed, 238 insertions(+), 235 deletions(-)


[incubator-skywalking-ui] 01/02: Refactor trace page for v6 protocol

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

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

commit 5521695eb66ab9a257733cac7d51a7a8d8452f72
Author: Gao Hongtao <ha...@gmail.com>
AuthorDate: Wed Sep 5 15:21:18 2018 +0800

    Refactor trace page for v6 protocol
---
 .roadhogrc.mock.js                 |  27 ++--
 mock/metadata.js                   |   6 +
 mock/trace.js                      | 299 +++++++++++++++++--------------------
 query-protocol                     |   2 +-
 src/components/TraceStack/index.js |  10 +-
 src/models/service.js              |   2 +-
 src/models/trace.js                |  18 +--
 src/routes/Trace/TraceSearch.js    |  12 +-
 8 files changed, 184 insertions(+), 192 deletions(-)

diff --git a/.roadhogrc.mock.js b/.roadhogrc.mock.js
index 52159cb..9e34ccf 100644
--- a/.roadhogrc.mock.js
+++ b/.roadhogrc.mock.js
@@ -6,10 +6,10 @@ import { getAllApplication, getApplication } from './mock/application';
 import { searchServer, getServer } from './mock/server';
 import { searchService, getService } from './mock/service';
 import { getAlarm, getNoticeAlarm, AlarmTrend } from './mock/alarm';
-import { getAllApplication as getAllApplicationForTrace, getTrace, getSpans } from './mock/trace'
+import { TraceBrief, Trace } from './mock/trace'
 import { makeExecutableSchema, addMockFunctionsToSchema } from 'graphql-tools';
 import { graphql } from 'graphql';
-import { ClusterBrief } from './mock/metadata';
+import { ClusterBrief, getAllServices } from './mock/metadata';
 import { Thermodynamic } from './mock/metric';
 import { getTopN } from './mock/aggregation';
 
@@ -17,21 +17,33 @@ const noMock = process.env.NO_MOCK === 'true';
 
 const resolvers = {
   Query: {
-    getTopN
+    getTopN,
+    getAllServices,
   }
 }
 
 const schema = makeExecutableSchema({ typeDefs: [
+  "scalar Long",
   fs.readFileSync('query-protocol/common.graphqls', 'utf8'),
   fs.readFileSync('query-protocol/metadata.graphqls', 'utf8'),
   fs.readFileSync('query-protocol/alarm.graphqls', 'utf8'),
   fs.readFileSync('query-protocol/metric.graphqls', 'utf8'),
   fs.readFileSync('query-protocol/aggregation.graphqls', 'utf8'),
+  fs.readFileSync('query-protocol/trace.graphqls', 'utf8'),
 ], resolvers });
 
-addMockFunctionsToSchema({ schema, mocks: {
-  ClusterBrief, Thermodynamic, AlarmTrend
-}, preserveResolvers: true });
+addMockFunctionsToSchema({
+  schema,
+  mocks: {
+    Long: () => 1,
+    ClusterBrief,
+    Thermodynamic,
+    AlarmTrend,
+    TraceBrief,
+    Trace,
+  },
+  preserveResolvers: true 
+});
 
 const proxy = {
   'POST /api/graphql': (req, res) => {
@@ -48,9 +60,6 @@ const proxy = {
   'POST /api/service/options': getAllApplication,
   'POST /api/alarm': getAlarm,
   'POST /api/notice': getNoticeAlarm,
-  'POST /api/trace/options': getAllApplicationForTrace,
-  'POST /api/trace': getTrace,
-  'POST /api/spans': getSpans,
   'POST /api/login/account': (req, res) => {
     const { password, userName } = req.body;
     if (password === '888888' && userName === 'admin') {
diff --git a/mock/metadata.js b/mock/metadata.js
index cd1630d..351f7f6 100644
--- a/mock/metadata.js
+++ b/mock/metadata.js
@@ -26,4 +26,10 @@ export default {
       'numOfMQ|1-100': 1,
     })
   ,
+  getAllServices: () => {
+    const data = mockjs.mock({
+      'serviceId|20-50': [{ 'id|+1': 3, name: function() { return `app-${this.id}`; } }], // eslint-disable-line
+    });
+    return data.serviceId;
+  }
 };
diff --git a/mock/trace.js b/mock/trace.js
index 0a78633..3922bcf 100644
--- a/mock/trace.js
+++ b/mock/trace.js
@@ -19,170 +19,147 @@
 import mockjs from 'mockjs';
 
 export default {
-  getAllApplication(req, res) {
-    res.json(mockjs.mock(
-      {
-        data: {
-          'applicationId|20-50': [{ 'key|+1': 3, label: function() { return `app-${this.key}`; } }], // eslint-disable-line
-        },
-      }
-    ));
-  },
-  getTrace(req, res) {
+  TraceBrief: () => {
     let offset = 0;
-    res.json(mockjs.mock(
+    return mockjs.mock({
+      'traces|20': [{
+        segmentId: '@id',
+        'operationNames|1-2': ['@word(100)'],
+        duration: '@natural(100, 5000)',
+        start: function() { // eslint-disable-line
+          offset = offset + 3600000; // eslint-disable-line
+          const now = new Date().getTime(); // eslint-disable-line
+          return `${now + offset}`;
+        },// eslint-disable-line
+        'isError|1': true,
+        'traceIds|1-3': ['@guid'],
+      }],
+      total: '@natural(20, 1000)',
+    })
+  },
+  Trace: () => mockjs.mock({
+    spans: [
+      {
+        spanId: 1,
+        segmentId: 1,
+        startTime: 1516151345000,
+        serviceCode: 'xx',
+        endTime: 1516151355000,
+        operationName: '/user/tt',
+        'type|1': ['Local', 'Entry', 'Exit'],
+        'component|1': ['MySQL', 'H2', 'Spring'],
+        peer: '@ip',
+        tags: [{ key: 'db.type', value: 'aa' }],
+        'logs|2-10': [{ 'time|+1': 1516151345000,
+          data: [
+            { key: 'db.type', value: 'aa' },
+            { key: 'stack', value: 'java.lang.NullPointerException\nat com.a.eye.skywalking.test.cache.jedis.JedisServiceManager.findWithException(JedisServiceManager.java:52)\nat com.a.eye.skywalking.test.cache.CacheServiceImpl.findCacheWithException(CacheServiceImpl.java:49)\nat sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)\nat sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)\nat sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethod [...]
+          ] }],
+        'isError|1': true,
+      },
+      {
+        spanId: 2,
+        parentSpanId: 1,
+        segmentId: 1,
+        serviceCode: 'yy',
+        startTime: 1516151348000,
+        endTime: 1516151351000,
+        operationName: '/sql/qq',
+        'type|1': ['Local', 'Entry', 'Exit'],
+        'component|1': ['MySQL', 'H2', 'Spring'],
+        peer: '@ip',
+        tags: [{ key: 'db.type', value: 'aa' }],
+        'isError|1': true,
+      },
+      {
+        spanId: 3,
+        parentSpanId: 2,
+        segmentId: 1,
+        serviceCode: 'yy',
+        startTime: 1516151349312,
+        endTime: 1516151350728,
+        operationName: '/sql/qq/xxxxxxxfdfdfdfdf().xxxxx/jjjjjj',
+        'type|1': ['Local', 'Entry', 'Exit'],
+        'component|1': ['MySQL', 'H2', 'Spring'],
+        peer: '@ip',
+        tags: [{ key: 'db.type', value: 'aa' }],
+        'isError|1': true,
+      },
       {
-        data: {
-          queryBasicTraces: {
-            'traces|20': [{
-              key: '@id',
-              'operationNames|1-2': ['@word(100)'],
-              duration: '@natural(100, 5000)',
-              start: function() { // eslint-disable-line
-                offset = offset + 3600000; // eslint-disable-line
-                const now = new Date().getTime(); // eslint-disable-line
-                return `${now + offset}`;
-              },// eslint-disable-line
-              'isError|1': true,
-              'traceIds|1-3': ['@guid'],
-            }],
-            total: '@natural(20, 1000)',
+        spanId: 4,
+        parentSpanId: 1,
+        segmentId: 1,
+        serviceCode: 'zz',
+        startTime: 1516151351000,
+        endTime: 1516151354000,
+        operationName: '/sql/qq',
+        'type|1': ['Local', 'Entry', 'Exit'],
+        'component|1': ['MySQL', 'H2', 'Spring'],
+        peer: '@ip',
+        tags: [{ key: 'db.type', value: 'aa' }],
+        'isError|1': true,
+      },
+      {
+        spanId: 5,
+        parentSpanId: 1,
+        segmentId: 1,
+        serviceCode: 'zz',
+        startTime: 1516151351000,
+        endTime: 1516151354000,
+        operationName: '/mq/producer',
+        'type|1': ['Exit'],
+        'component|1': ['RockerMQ'],
+        peer: '@ip',
+        tags: [{ key: 'producer', value: 'tt' }],
+        'isError|1': true,
+      },
+      {
+        spanId: 6,
+        segmentId: 1,
+        serviceCode: 'kk',
+        startTime: 1516151355000,
+        endTime: 1516151360000,
+        operationName: '/mq/consumer',
+        'type|1': ['Entry'],
+        'component|1': ['RockerMQ'],
+        peer: '@ip',
+        tags: [{ key: 'consumer', value: 'tt' }],
+        refs: [
+          {
+            parentSpanId: 5,
+            parentSegmentId: 1,
           },
-        },
-      }
-    ));
-  },
-  getSpans(req, res) {
-    res.json(mockjs.mock(
+        ],
+        'isError|1': true,
+      },
       {
-        data: {
-          queryTrace: {
-            spans: [
-              {
-                spanId: 1,
-                segmentId: 1,
-                startTime: 1516151345000,
-                applicationCode: 'xx',
-                endTime: 1516151355000,
-                operationName: '/user/tt',
-                'type|1': ['Local', 'Entry', 'Exit'],
-                'component|1': ['MySQL', 'H2', 'Spring'],
-                peer: '@ip',
-                tags: [{ key: 'db.type', value: 'aa' }],
-                'logs|2-10': [{ 'time|+1': 1516151345000,
-                  data: [
-                    { key: 'db.type', value: 'aa' },
-                    { key: 'stack', value: 'java.lang.NullPointerException\nat com.a.eye.skywalking.test.cache.jedis.JedisServiceManager.findWithException(JedisServiceManager.java:52)\nat com.a.eye.skywalking.test.cache.CacheServiceImpl.findCacheWithException(CacheServiceImpl.java:49)\nat sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)\nat sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)\nat sun.reflect.DelegatingMethodAccessorImpl.invoke(Delegati [...]
-                  ] }],
-                'isError|1': true,
-              },
-              {
-                spanId: 2,
-                parentSpanId: 1,
-                segmentId: 1,
-                applicationCode: 'yy',
-                startTime: 1516151348000,
-                endTime: 1516151351000,
-                operationName: '/sql/qq',
-                'type|1': ['Local', 'Entry', 'Exit'],
-                'component|1': ['MySQL', 'H2', 'Spring'],
-                peer: '@ip',
-                tags: [{ key: 'db.type', value: 'aa' }],
-                'isError|1': true,
-              },
-              {
-                spanId: 3,
-                parentSpanId: 2,
-                segmentId: 1,
-                applicationCode: 'yy',
-                startTime: 1516151349312,
-                endTime: 1516151350728,
-                operationName: '/sql/qq/xxxxxxxfdfdfdfdf().xxxxx/jjjjjj',
-                'type|1': ['Local', 'Entry', 'Exit'],
-                'component|1': ['MySQL', 'H2', 'Spring'],
-                peer: '@ip',
-                tags: [{ key: 'db.type', value: 'aa' }],
-                'isError|1': true,
-              },
-              {
-                spanId: 4,
-                parentSpanId: 1,
-                segmentId: 1,
-                applicationCode: 'zz',
-                startTime: 1516151351000,
-                endTime: 1516151354000,
-                operationName: '/sql/qq',
-                'type|1': ['Local', 'Entry', 'Exit'],
-                'component|1': ['MySQL', 'H2', 'Spring'],
-                peer: '@ip',
-                tags: [{ key: 'db.type', value: 'aa' }],
-                'isError|1': true,
-              },
-              {
-                spanId: 5,
-                parentSpanId: 1,
-                segmentId: 1,
-                applicationCode: 'zz',
-                startTime: 1516151351000,
-                endTime: 1516151354000,
-                operationName: '/mq/producer',
-                'type|1': ['Exit'],
-                'component|1': ['RockerMQ'],
-                peer: '@ip',
-                tags: [{ key: 'producer', value: 'tt' }],
-                'isError|1': true,
-              },
-              {
-                spanId: 6,
-                segmentId: 1,
-                applicationCode: 'kk',
-                startTime: 1516151355000,
-                endTime: 1516151360000,
-                operationName: '/mq/consumer',
-                'type|1': ['Entry'],
-                'component|1': ['RockerMQ'],
-                peer: '@ip',
-                tags: [{ key: 'consumer', value: 'tt' }],
-                refs: [
-                  {
-                    parentSpanId: 5,
-                    parentSegmentId: 1,
-                  },
-                ],
-                'isError|1': true,
-              },
-              {
-                spanId: 6,
-                segmentId: 1,
-                applicationCode: 'kk',
-                startTime: 1516151355000,
-                endTime: 1516151360000,
-                operationName: '/mq/consumer',
-                'type|1': ['Entry'],
-                'component|1': ['Kafka'],
-                peer: '@ip',
-                tags: [{ key: 'consumer', value: 'tt' }],
-                refs: [
-                  {
-                    traceId: 121212,
-                    type: 'CROSS_PROCESS',
-                  },
-                  {
-                    traceId: 22223333,
-                    type: 'CROSS_THREAD',
-                  },
-                ],
-                'isError|1': true,
-                'logs|2-10': [{ 'time|+1': 1516151345000,
-                  data: [
-                    { key: 'db.type', value: 'aa' },
-                    { key: 'stack', value: 'java.lang.NullPointerException\nat com.a.eye.skywalking.test.cache.jedis.JedisServiceManager.findWithException(JedisServiceManager.java:52)\nat com.a.eye.skywalking.test.cache.CacheServiceImpl.findCacheWithException(CacheServiceImpl.java:49)\nat sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)\nat sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)\nat sun.reflect.DelegatingMethodAccessorImpl.invoke(Delegati [...]
-                  ] }],
-              },
-            ],
+        spanId: 6,
+        segmentId: 1,
+        serviceCode: 'kk',
+        startTime: 1516151355000,
+        endTime: 1516151360000,
+        operationName: '/mq/consumer',
+        'type|1': ['Entry'],
+        'component|1': ['Kafka'],
+        peer: '@ip',
+        tags: [{ key: 'consumer', value: 'tt' }],
+        refs: [
+          {
+            traceId: 121212,
+            type: 'CROSS_PROCESS',
           },
-        },
-      }
-    ));
-  },
+          {
+            traceId: 22223333,
+            type: 'CROSS_THREAD',
+          },
+        ],
+        'isError|1': true,
+        'logs|2-10': [{ 'time|+1': 1516151345000,
+          data: [
+            { key: 'db.type', value: 'aa' },
+            { key: 'stack', value: 'java.lang.NullPointerException\nat com.a.eye.skywalking.test.cache.jedis.JedisServiceManager.findWithException(JedisServiceManager.java:52)\nat com.a.eye.skywalking.test.cache.CacheServiceImpl.findCacheWithException(CacheServiceImpl.java:49)\nat sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)\nat sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)\nat sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethod [...]
+          ] }],
+      },
+    ],
+  }),
 };
diff --git a/query-protocol b/query-protocol
index 98e8b34..9a6bb77 160000
--- a/query-protocol
+++ b/query-protocol
@@ -1 +1 @@
-Subproject commit 98e8b340cdefb262083885b877722e46e9313ff6
+Subproject commit 9a6bb77ac06f36ab4949ea193b152f22d09ab8a8
diff --git a/src/components/TraceStack/index.js b/src/components/TraceStack/index.js
index de35ec6..a469bd6 100644
--- a/src/components/TraceStack/index.js
+++ b/src/components/TraceStack/index.js
@@ -54,8 +54,8 @@ class TraceStack extends PureComponent {
     let colorIndex = 0;
     spans.forEach((span) => {
       const { colorMap } = this.state;
-      if (!colorMap[span.applicationCode]) {
-        colorMap[span.applicationCode] = colors[colorIndex];
+      if (!colorMap[span.serviceCode]) {
+        colorMap[span.serviceCode] = colors[colorIndex];
         colorIndex = (colorIndex < colors.length - 1) ? (colorIndex + 1) : 0;
       }
       this.buildNode(span);
@@ -80,7 +80,7 @@ class TraceStack extends PureComponent {
   buildNode = (span) => {
     const { nodes, idMap } = this.state;
     const node = {};
-    node.applicationCode = span.applicationCode;
+    node.serviceCode = span.serviceCode;
     node.startTime = span.startTime;
     node.endTime = span.endTime;
     node.duration = span.endTime - span.startTime;
@@ -153,7 +153,7 @@ class TraceStack extends PureComponent {
     const positionMap = {};
     nodes.forEach((node, index) => {
       const { startOffset: startTime, duration, content,
-        applicationCode, spanSegId, parentSpanSegId } = node;
+        serviceCode, spanSegId, parentSpanSegId } = node;
 
       const rectWith = ((duration * width) / (bap[1] * (10 ** (bap[0] - 4)))) / 100;
       const beginX = ((startTime * width) / (bap[1] * (10 ** (bap[0] - 4)))) / 100;
@@ -176,7 +176,7 @@ class TraceStack extends PureComponent {
         .on('mouseover', () => { this.selectTimeline(container, true); })
         .on('mouseout', () => { this.selectTimeline(container, false); })
         .on('click', () => { this.showSpanModal(node, position, container); })
-        .style('fill', colorMap[applicationCode]);
+        .style('fill', colorMap[serviceCode]);
 
       bar.append('text')
         .attr('x', beginX + 5)
diff --git a/src/models/service.js b/src/models/service.js
index 4324b54..bd873ec 100644
--- a/src/models/service.js
+++ b/src/models/service.js
@@ -87,7 +87,7 @@ const spanQuery = `query Spans($traceId: ID!) {
         parentSpanId
         type
       }
-      applicationCode
+      serviceCode
       startTime
       endTime
       operationName
diff --git a/src/models/trace.js b/src/models/trace.js
index c118deb..9f99ebe 100644
--- a/src/models/trace.js
+++ b/src/models/trace.js
@@ -16,13 +16,13 @@
  */
 
 import moment from 'moment';
-import { query } from '../services/graphql';
-import { generateModal } from '../utils/models';
+import { exec } from '../services/graphql';
+import { base } from '../utils/models';
 import { generateDuration } from '../utils/time';
 
 const optionsQuery = `
-  query ApplicationOption($duration: Duration!) {
-    applicationId: getAllApplication(duration: $duration) {
+  query ServiceOption($duration: Duration!) {
+    serviceId: getAllServices(duration: $duration) {
       key: id
       label: name
     }
@@ -58,7 +58,7 @@ const spanQuery = `query Spans($traceId: ID!) {
         parentSpanId
         type
       }
-      applicationCode
+      serviceCode
       startTime
       endTime
       operationName
@@ -82,7 +82,7 @@ const spanQuery = `query Spans($traceId: ID!) {
   }
 }`;
 
-export default generateModal({
+export default base({
   namespace: 'trace',
   state: {
     queryBasicTraces: {
@@ -110,14 +110,14 @@ export default generateModal({
   },
   optionsQuery,
   defaultOption: {
-    applicationId: {
-      label: 'All Application',
+    serviceId: {
+      label: 'All Service',
     },
   },
   dataQuery,
   effects: {
     *fetchSpans({ payload }, { call, put }) {
-      const response = yield call(query, 'spans', { query: spanQuery, variables: payload.variables });
+      const response = yield call(exec, { query: spanQuery, variables: payload.variables });
       yield put({
         type: 'saveSpans',
         payload: response,
diff --git a/src/routes/Trace/TraceSearch.js b/src/routes/Trace/TraceSearch.js
index 26a3c6f..712caaa 100644
--- a/src/routes/Trace/TraceSearch.js
+++ b/src/routes/Trace/TraceSearch.js
@@ -231,13 +231,13 @@ export default class Trace extends PureComponent {
             />
           )}
         </FormItem>
-        <FormItem label="Application">
-          {getFieldDecorator('applicationId')(
-            <Select placeholder="All application" style={{ width: '100%' }}>
-              {options.applicationId && options.applicationId.map((app) => {
+        <FormItem label="Service">
+          {getFieldDecorator('serviceId')(
+            <Select placeholder="All service" style={{ width: '100%' }}>
+              {options.serviceId && options.serviceId.map((service) => {
                   return (
-                    <Option key={app.key ? app.key : -1} value={app.key}>
-                      {app.label}
+                    <Option key={service.key ? service.key : -1} value={service.key}>
+                      {service.label}
                     </Option>);
                 })}
             </Select>


[incubator-skywalking-ui] 02/02: Refactor alarm page for v6 protocol

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

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

commit d2af186efce9d1ec3d999701aec0571c3f001db5
Author: Gao Hongtao <ha...@gmail.com>
AuthorDate: Wed Sep 5 16:56:36 2018 +0800

    Refactor alarm page for v6 protocol
---
 .roadhogrc.mock.js        |  4 ++--
 mock/alarm.js             |  9 +++++++++
 query-protocol            |  2 +-
 src/models/alarm.js       | 46 ++++++++++++++++++++++------------------------
 src/routes/Alarm/Alarm.js | 38 +++++++++++++++++++++-----------------
 5 files changed, 55 insertions(+), 44 deletions(-)

diff --git a/.roadhogrc.mock.js b/.roadhogrc.mock.js
index 9e34ccf..9fa1e25 100644
--- a/.roadhogrc.mock.js
+++ b/.roadhogrc.mock.js
@@ -5,7 +5,7 @@ import { getTopology } from './mock/topology';
 import { getAllApplication, getApplication } from './mock/application';
 import { searchServer, getServer } from './mock/server';
 import { searchService, getService } from './mock/service';
-import { getAlarm, getNoticeAlarm, AlarmTrend } from './mock/alarm';
+import { Alarms, getNoticeAlarm, AlarmTrend } from './mock/alarm';
 import { TraceBrief, Trace } from './mock/trace'
 import { makeExecutableSchema, addMockFunctionsToSchema } from 'graphql-tools';
 import { graphql } from 'graphql';
@@ -39,6 +39,7 @@ addMockFunctionsToSchema({
     ClusterBrief,
     Thermodynamic,
     AlarmTrend,
+    Alarms,
     TraceBrief,
     Trace,
   },
@@ -58,7 +59,6 @@ const proxy = {
   'POST /api/service/search': searchService,
   'POST /api/service': getService,
   'POST /api/service/options': getAllApplication,
-  'POST /api/alarm': getAlarm,
   'POST /api/notice': getNoticeAlarm,
   'POST /api/login/account': (req, res) => {
     const { password, userName } = req.body;
diff --git a/mock/alarm.js b/mock/alarm.js
index 2358bfe..7af3253 100644
--- a/mock/alarm.js
+++ b/mock/alarm.js
@@ -50,6 +50,15 @@ export default {
       }
     ));
   },
+  Alarms: () => mockjs.mock({
+    'msgs|10': [{
+        'id|+1': 1,
+        message: '@paragraph(1)',
+        startTime: '@datetime("yyyy-MM-dd HH:mm:ss")',
+        scope: 'SERVICE',
+      }],
+      total: '@natural(5, 50)',
+  }),
   getAlarm(req, res) {
     const { variables: { alarmType } } = req.body;
     switch (alarmType) {
diff --git a/query-protocol b/query-protocol
index 9a6bb77..c6ee5d1 160000
--- a/query-protocol
+++ b/query-protocol
@@ -1 +1 @@
-Subproject commit 9a6bb77ac06f36ab4949ea193b152f22d09ab8a8
+Subproject commit c6ee5d15f38024c3be61be579eac4035ffbfd4bf
diff --git a/src/models/alarm.js b/src/models/alarm.js
index 576dda9..4b0fe44 100644
--- a/src/models/alarm.js
+++ b/src/models/alarm.js
@@ -16,80 +16,78 @@
  */
 
 
-import { generateModal } from '../utils/models';
+import { base } from '../utils/models';
 
 const dataQuery = `
-  query Alarm($keyword: String, $alarmType: AlarmType, $duration:Duration!, $paging: Pagination!){
-    loadAlarmList(keyword: $keyword, alarmType: $alarmType, duration: $duration, paging: $paging) {
-      items {
+  query Alarm($keyword: String, $scope: Scope, $duration:Duration!, $paging: Pagination!){
+    getAlarm(keyword: $keyword, scope: $scope, duration: $duration, paging: $paging) {
+      msgs {
         key: id
-        title
-        content
+        message
         startTime
-        causeType
       }
       total
     }
   }
 `;
 
-export default generateModal({
+export default base({
   namespace: 'alarm',
   state: {
-    applicationAlarmList: {
-      items: [],
+    serviceAlarmList: {
+      msgs: [],
       total: 0,
     },
-    serverAlarmList: {
-      items: [],
+    serviceInstanceAlarmList: {
+      msgs: [],
       total: 0,
     },
-    serviceAlarmList: {
-      items: [],
+    endpointAlarmList: {
+      msgs: [],
       total: 0,
     },
   },
   dataQuery,
   reducers: {
-    saveApplicationAlarmList(preState, { payload }) {
+    saveServiceAlarmList(preState, { payload }) {
       if (!payload) {
         return preState;
       }
-      const { loadAlarmList } = payload;
+      const { getAlarm } = payload;
       const { data } = preState;
       return {
         ...preState,
         data: {
           ...data,
-          applicationAlarmList: loadAlarmList,
+          serviceAlarmList: getAlarm,
         },
       };
     },
-    saveServerAlarmList(preState, { payload }) {
+    saveServiceInstanceAlarmList(preState, { payload }) {
       if (!payload) {
         return preState;
       }
-      const { loadAlarmList } = payload;
+      const { getAlarm } = payload;
       const { data } = preState;
       return {
         ...preState,
         data: {
           ...data,
-          serverAlarmList: loadAlarmList,
+          serviceInstanceAlarmList: getAlarm,
         },
       };
     },
-    saveServiceAlarmList(preState, { payload }) {
+    saveEndpointAlarmList(preState, { payload }) {
       if (!payload) {
         return preState;
       }
-      const { loadAlarmList } = payload;
+      const { getAlarm } = payload;
       const { data } = preState;
       return {
         ...preState,
         data: {
           ...data,
-          serviceAlarmList: loadAlarmList,
+          endpointAlarmList: getAlarm,
         },
       };
     },
@@ -101,7 +99,7 @@ export default generateModal({
           dispatch({
             type: 'saveVariables',
             payload: { values: {
-              alarmType: state.type.toUpperCase(),
+              scope: state.type.toUpperCase(),
             } },
           });
         }
diff --git a/src/routes/Alarm/Alarm.js b/src/routes/Alarm/Alarm.js
index 2443229..06d989b 100644
--- a/src/routes/Alarm/Alarm.js
+++ b/src/routes/Alarm/Alarm.js
@@ -30,6 +30,12 @@ const defaultPaging = {
   needTotal: true,
 };
 
+const funcMap = {
+  "SERVICE": "saveServiceAlarmList",
+  "SERVICE_INSTANCE": "saveServiceInstanceAlarmList",
+  "ENDPOINT": "saveEndpointAlarmList",
+}
+
 @connect(state => ({
   alarm: state.alarm,
   globalVariables: state.global.globalVariables,
@@ -38,11 +44,11 @@ const defaultPaging = {
 export default class Alarm extends PureComponent {
   componentDidMount() {
     const { alarm: { variables: { values } } } = this.props;
-    if (!values.alarmType) {
+    if (!values.scope) {
       this.props.dispatch({
         type: 'alarm/saveVariables',
         payload: { values: {
-          alarmType: 'APPLICATION',
+          scope: 'SERVICE',
           paging: defaultPaging,
         } },
       });
@@ -72,26 +78,25 @@ export default class Alarm extends PureComponent {
     });
   }
 
-  changeAlarmType = (alarmType) => {
+  changeScope = (scope) => {
     this.props.dispatch({
       type: 'alarm/saveVariables',
       payload: { values: {
-        alarmType,
+        scope,
         paging: defaultPaging,
       } },
     });
   }
 
   handleChange = (variables) => {
-    const type = variables.alarmType.charAt(0) + variables.alarmType.slice(1).toLowerCase();
     const { paging = defaultPaging } = variables;
     this.props.dispatch({
       type: 'alarm/fetchData',
-      payload: { variables: { ...variables, paging }, reducer: `save${type}AlarmList` },
+      payload: { variables: { ...variables, paging }, reducer: funcMap[variables.scope] },
     });
   }
 
-  renderList = ({ items, total }) => {
+  renderList = ({ msgs, total }) => {
     const { alarm: { variables: { values: { paging = defaultPaging } } }, loading } = this.props;
     const pagination = {
       pageSize: paging.pageSize,
@@ -104,20 +109,19 @@ export default class Alarm extends PureComponent {
         className="demo-loadmore-list"
         loading={loading}
         itemLayout="horizontal"
-        dataSource={items}
+        dataSource={msgs}
         pagination={pagination}
-        renderItem={item => (
+        renderItem={msg => (
           <List.Item>
             <List.Item.Meta
               avatar={
                 <Avatar
-                  style={item.causeType === 'LOW_SUCCESS_RATE' ? { backgroundColor: '#e68a00' } : { backgroundColor: '#b32400' }}
-                  icon={item.causeType === 'LOW_SUCCESS_RATE' ? 'clock-circle-o' : 'close'}
+                  style={{ backgroundColor: '#b32400' }}
+                  icon='close'
                 />}
-              title={item.title}
-              description={item.content}
+              description={msg.message}
             />
-            <div>{item.startTime}</div>
+            <div>{msg.startTime}</div>
           </List.Item>
         )}
       />);
@@ -145,10 +149,10 @@ export default class Alarm extends PureComponent {
           bordered={false}
           extra={extraContent}
         >
-          <Tabs activeKey={values.alarmType} onChange={this.changeAlarmType}>
-            <TabPane tab="Application" key="APPLICATION">{this.renderList(data.applicationAlarmList)}</TabPane>
-            <TabPane tab="Server" key="SERVER">{this.renderList(data.serverAlarmList)}</TabPane>
+          <Tabs activeKey={values.scope} onChange={this.changeScope}>
             <TabPane tab="Service" key="SERVICE">{this.renderList(data.serviceAlarmList)}</TabPane>
+            <TabPane tab="ServiceInstance" key="SERVICE_INSTANCE">{this.renderList(data.serviceInstanceAlarmList)}</TabPane>
+            <TabPane tab="Endpoint" key="ENDPOINT">{this.renderList(data.endpointAlarmList)}</TabPane>
           </Tabs>
         </Card>
       </Panel>