Fix bugs in e2e test (#143)

* Rename favicon * Amend topology * Add default value to Search component * Rename favicon path * Fix #138 add a new avg function to filter 0 value * Fix #137 typo in Server and Service * Fix #141 render dependency map error * Fix #142 the default value of applicationId should be 'All application'
apache · Mar 8, 2018 · 0fa958c · 0fa958c
1 parent 3b64062
commit 0fa958c
Show file tree

Hide file tree

Showing 12 changed files with 58 additions and 105 deletions.
diff --git a/mock/server.js b/mock/server.js
@@ -43,10 +43,10 @@ export default {
       {
         data: {
           getServerResponseTimeTrend: {
-            'trendList|60': ['@natural(100, 1000)'],
+            'trendList|60': ['@natural(0, 1000)'],
           },
           getServerTPSTrend: {
-            'trendList|60': ['@natural(500, 10000)'],
+            'trendList|60': ['@natural(0, 10000)'],
           },
           getCPUTrend: {
             'cost|60': ['@natural(0, 99)'],

diff --git a/mock/service.js b/mock/service.js
@@ -87,8 +87,8 @@ export default {
               target: 1,
               'isAlert|1': true,
               'callType|1': ['rpc', 'http', 'dubbo'],
-              'callsPerSec|0-100': 1,
-              'avgResponseTime|500-5000': 1,
+              'callsPerSec|0-1000': 1,
+              'avgResponseTime|500-5000': 0,
             }))).concat(downNodes.nodes.map(node => (mockjs.mock({
               source: 1,
               target: node.id,

diff --git a/public/img/icon/favicon.png → public/favicon.png b/public/img/icon/favicon.png → public/favicon.png
diff --git a/src/components/Page/Search/index.js b/src/components/Page/Search/index.js
@@ -27,14 +27,18 @@ export default class Search extends PureComponent {
   constructor(props) {
     super(props);
     this.lastFetchId = 0;
+    this.originFetchServer = this.fetchServer;
     this.fetchServer = debounce(this.fetchServer, 800);
   }
   state = {
     data: [],
     fetching: false,
   }
-  fetchServer = (value) => {
-    if (!value || value.length < 1) {
+  componentDidMount() {
+    this.originFetchServer('', true);
+  }
+  fetchServer = (value, isSelectOne) => {
+    if (value === undefined) {
       return;
     }
     const { url, query, variables = {}, transform } = this.props;
@@ -57,6 +61,9 @@ export default class Search extends PureComponent {
         }
         const list = body.data[Object.keys(body.data)[0]];
         this.setState({ data: (transform ? list.map(transform) : list), fetching: false });
+        if (isSelectOne && this.state.data.length > 0) {
+          this.handleSelect(this.state.data[0]);
+        }
       });
   }
   handleSelect = (value) => {

diff --git a/src/models/trace.js b/src/models/trace.js
@@ -94,6 +94,11 @@ export default generateModal({
     },
   },
   optionsQuery,
+  defaultOption: {
+    applicationId: {
+      label: 'All Application',
+    },
+  },
   dataQuery,
   effects: {
     *fetchSpans({ payload }, { call, put }) {

diff --git a/src/routes/Application/Application.js b/src/routes/Application/Application.js
@@ -110,7 +110,7 @@ export default class Application extends PureComponent {
             bordered={false}
             bodyStyle={{ padding: 0, marginTop: 24 }}
           >
-            <AppTopology elements={data.getApplicationTopology} layout={{ name: 'concentric', minNodeSpacing: 200 }} />
+            <AppTopology elements={data.getApplicationTopology} layout={{ name: 'concentric', startAngle: Math.PI, minNodeSpacing: 250 }} />
           </Card>
           <Row gutter={24}>
             <Col {...middleColResponsiveProps}>

diff --git a/src/routes/Dashboard/Dashboard.js b/src/routes/Dashboard/Dashboard.js
@@ -23,6 +23,7 @@ import {
   ChartCard, Pie, MiniArea, Field,
 } from '../../components/Charts';
 import { axis } from '../../utils/time';
+import { avgTimeSeries } from '../../utils/utils';
 import { Panel, Ranking } from '../../components/Page';
 
 @connect(state => ({
@@ -47,7 +48,7 @@ export default class Dashboard extends PureComponent {
     let min = 0;
     if (numOfAlarmRate && numOfAlarmRate.length > 0) {
       visitData = axis(this.props.duration, numOfAlarmRate, ({ x, y }) => ({ x, y: y / accuracy }));
-      avg = numOfAlarmRate.reduce((acc, curr) => acc + curr) / numOfAlarmRate.length / accuracy;
+      avg = avgTimeSeries(numOfAlarmRate) / accuracy;
       max = numOfAlarmRate.reduce((acc, curr) => { return acc < curr ? curr : acc; }) / accuracy;
       min = numOfAlarmRate.reduce((acc, curr) => { return acc > curr ? curr : acc; }) / accuracy;
     }

diff --git a/src/routes/Server/Server.js b/src/routes/Server/Server.js
@@ -24,6 +24,7 @@ import {
 } from '../../components/Charts';
 import DescriptionList from '../../components/DescriptionList';
 import { axis } from '../../utils/time';
+import { avgTimeSeries } from '../../utils/utils';
 import { Panel, Search } from '../../components/Page';
 
 const { Description } = DescriptionList;
@@ -65,8 +66,6 @@ export default class Server extends PureComponent {
       payload: { variables },
     });
   }
-  avg = list => (list.length > 0 ?
-    parseFloat((list.reduce((acc, curr) => acc + curr) / list.length).toFixed(2)) : 0)
   bytesToMB = list => list.map(_ => parseFloat((_ / (1024 ** 2)).toFixed(2)))
   render() {
     const { form, duration, server } = this.props;
@@ -108,17 +107,18 @@ export default class Server extends PureComponent {
         >
           <Card title="Info" style={{ marginTop: 24 }} bordered={false}>
             <DescriptionList>
-              <Description term="OS">{serverInfo.name}</Description>
+              <Description term="Application Code">{serverInfo.applicationCode}</Description>
               <Description term="Host Name">{serverInfo.host}</Description>
-              <Description term="Process Id">{serverInfo.pid}</Description>
               <Description term="IPv4">{serverInfo.ipv4 ? serverInfo.ipv4.join() : ''}</Description>
+              <Description term="Process Id">{serverInfo.pid}</Description>
+              <Description term="OS">{serverInfo.name}</Description>
             </DescriptionList>
           </Card>
           <Row gutter={24}>
             <Col xs={24} sm={24} md={24} lg={12} xl={12} style={{ marginTop: 24 }}>
               <ChartCard
                 title="Avg Response Time"
-                total={`${this.avg(getServerResponseTimeTrend.trendList)} ms`}
+                total={`${avgTimeSeries(getServerResponseTimeTrend.trendList)} ms`}
                 contentHeight={46}
               >
                 {getServerResponseTimeTrend.trendList.length > 0 ? (
@@ -132,8 +132,8 @@ export default class Server extends PureComponent {
             </Col>
             <Col xs={24} sm={24} md={24} lg={12} xl={12} style={{ marginTop: 24 }}>
               <ChartCard
-                title="Avg Calls Per Second"
-                total={`${this.avg(getServerTPSTrend.trendList)} ms`}
+                title="Avg Throughput"
+                total={`${avgTimeSeries(getServerTPSTrend.trendList)}`}
               >
                 <MiniBar
                   animate={false}

diff --git a/src/routes/Service/Service.js b/src/routes/Service/Service.js
@@ -23,6 +23,7 @@ import {
   ChartCard, MiniArea, MiniBar, Sankey,
 } from '../../components/Charts';
 import { axis } from '../../utils/time';
+import { avgTimeSeries } from '../../utils/utils';
 import { Panel, Search } from '../../components/Page';
 
 const { Item: FormItem } = Form;
@@ -63,8 +64,7 @@ export default class Service extends PureComponent {
       payload: { variables },
     });
   }
-  avg = list => (list.length > 0 ?
-    (list.reduce((acc, curr) => acc + curr) / list.length).toFixed(2) : 0)
+  edgeWith = edge => edge.callsPerSec * edge.avgResponseTime;
   renderSankey = (data) => {
     if (data.nodes.length < 2) {
       return <span style={{ display: 'none' }} />;
@@ -76,7 +76,7 @@ export default class Service extends PureComponent {
     const nData = {
       nodes: data.nodes,
       edges: data.calls.map(_ =>
-        ({ ..._, value: (_.callsPerSec < 1 ? 1000 : _.callsPerSec * _.avgResponseTime), source: nodesMap.get(`${_.source}`), target: nodesMap.get(`${_.target}`) })),
+        ({ ..._, value: (this.edgeWith(_) < 1 ? 1000 : this.edgeWith(_)), source: nodesMap.get(`${_.source}`), target: nodesMap.get(`${_.target}`) })),
     };
     return (
       <Row gutter={24}>
@@ -134,8 +134,8 @@ export default class Service extends PureComponent {
           <Row gutter={24}>
             <Col xs={24} sm={24} md={24} lg={8} xl={8} style={{ marginTop: 24 }}>
               <ChartCard
-                title="Avg Throughout"
-                total={`${this.avg(getServiceTPSTrend.trendList)}`}
+                title="Avg Throughput"
+                total={`${avgTimeSeries(getServiceTPSTrend.trendList)}`}
                 contentHeight={46}
               >
                 <MiniArea
@@ -147,7 +147,7 @@ export default class Service extends PureComponent {
             <Col xs={24} sm={24} md={24} lg={8} xl={8} style={{ marginTop: 24 }}>
               <ChartCard
                 title="Avg Response Time"
-                total={`${this.avg(getServiceResponseTimeTrend.trendList)} ms`}
+                total={`${avgTimeSeries(getServiceResponseTimeTrend.trendList)} ms`}
                 contentHeight={46}
               >
                 <MiniArea
@@ -158,7 +158,7 @@ export default class Service extends PureComponent {
             <Col xs={24} sm={24} md={24} lg={8} xl={8} style={{ marginTop: 24 }}>
               <ChartCard
                 title="Avg SLA"
-                total={`${this.avg(getServiceSLATrend.trendList) / 100} %`}
+                total={`${(avgTimeSeries(getServiceSLATrend.trendList) / 100).toFixed(2)} %`}
               >
                 <MiniBar
                   animate={false}

diff --git a/src/routes/Trace/Trace.js b/src/routes/Trace/Trace.js
@@ -124,33 +124,36 @@ export default class Trace extends PureComponent {
     const { trace: { variables: { options } } } = this.props;
     return (
       <Form onSubmit={this.handleSearch} layout="inline">
-        <Row gutter={{ md: 8, lg: 8, xl: 8 }}>
-          <Col xl={4} sm={24}>
+        <Row gutter={{ md: 8, lg: 12, xl: 8 }}>
+          <Col xl={4} lg={12} sm={24}>
             <FormItem label="Application">
               {getFieldDecorator('applicationId')(
-                <Select placeholder="No application" style={{ width: '100%' }}>
+                <Select placeholder="All application" style={{ width: '100%' }}>
                   {options.applicationId && options.applicationId.map((app) => {
-                      return (<Option key={app.key} value={app.key}>{app.label}</Option>);
+                      return (
+                        <Option key={app.key ? app.key : -1} value={app.key}>
+                          {app.label}
+                        </Option>);
                     })}
                 </Select>
               )}
             </FormItem>
           </Col>
-          <Col xl={4} sm={24}>
+          <Col xl={4} lg={12} sm={24}>
             <FormItem label="TraceId">
               {getFieldDecorator('traceId')(
                 <Input placeholder="Input trace id" />
               )}
             </FormItem>
           </Col>
-          <Col xl={6} sm={24}>
+          <Col xl={6} lg={12} sm={24}>
             <FormItem label="OperationName">
               {getFieldDecorator('operationName')(
                 <Input placeholder="Input operation name" />
               )}
             </FormItem>
           </Col>
-          <Col xl={6} sm={24}>
+          <Col xl={6} lg={12} sm={24}>
             <FormItem label="DurationRange">
               {getFieldDecorator('minTraceDuration')(
                 <InputNumber style={{ width: '40%' }} />
@@ -160,7 +163,7 @@ export default class Trace extends PureComponent {
               )}
             </FormItem>
           </Col>
-          <Col xl={4} sm={24}>
+          <Col xl={4} lg={12} sm={24}>
             <span className={styles.submitButtons}>
               <Button type="primary" htmlType="submit">Search</Button>
             </span>

diff --git a/src/utils/models.js b/src/utils/models.js
@@ -18,7 +18,7 @@
 
 import { query as queryService } from '../services/graphql';
 
-export function generateModal({ namespace, dataQuery, optionsQuery, state = {},
+export function generateModal({ namespace, dataQuery, optionsQuery, defaultOption, state = {},
   effects = {}, reducers = {}, subscriptions = {} }) {
   return {
     namespace,
@@ -76,6 +76,12 @@ export function generateModal({ namespace, dataQuery, optionsQuery, state = {},
         Object.keys(allOptions).forEach((_) => {
           const thisOptions = allOptions[_];
           if (!values[_]) {
+            if (defaultOption[_]) {
+              defaultValues[_] = defaultOption[_].key;
+              defaultLabels[_] = defaultOption[_].label;
+              amendOptions[_] = [defaultOption[_], ...thisOptions];
+              return;
+            }
             if (thisOptions.length > 0) {
               defaultValues[_] = thisOptions[0].key;
               defaultLabels[_] = thisOptions[0].label;

diff --git a/src/utils/utils.js b/src/utils/utils.js
@@ -16,55 +16,15 @@
  */
 
 
-import moment from 'moment';
-
 export function fixedZero(val) {
   return val * 1 < 10 ? `0${val}` : val;
 }
 
-export function getTimeDistance(type) {
-  const now = new Date();
-  const oneDay = 1000 * 60 * 60 * 24;
-
-  if (type === 'today') {
-    now.setHours(0);
-    now.setMinutes(0);
-    now.setSeconds(0);
-    return [moment(now), moment(now.getTime() + (oneDay - 1000))];
-  }
-
-  if (type === 'week') {
-    let day = now.getDay();
-    now.setHours(0);
-    now.setMinutes(0);
-    now.setSeconds(0);
-
-    if (day === 0) {
-      day = 6;
-    } else {
-      day -= 1;
-    }
-
-    const beginTime = now.getTime() - (day * oneDay);
-
-    return [moment(beginTime), moment(beginTime + ((7 * oneDay) - 1000))];
-  }
-
-  if (type === 'month') {
-    const year = now.getFullYear();
-    const month = now.getMonth();
-    const nextDate = moment(now).add(1, 'months');
-    const nextYear = nextDate.year();
-    const nextMonth = nextDate.month();
-
-    return [moment(`${year}-${fixedZero(month + 1)}-01 00:00:00`), moment(moment(`${nextYear}-${fixedZero(nextMonth + 1)}-01 00:00:00`).valueOf() - 1000)];
-  }
-
-  if (type === 'year') {
-    const year = now.getFullYear();
-
-    return [moment(`${year}-01-01 00:00:00`), moment(`${year}-12-31 23:59:59`)];
-  }
+export function avgTimeSeries(list) {
+  const filteredList = list.filter(_ => _ > 0);
+  return filteredList.length > 0 ?
+    parseFloat((filteredList.reduce(
+      (acc, curr) => acc + curr) / filteredList.length).toFixed(2)) : 0;
 }
 
 export function getPlainNode(nodeList, parentPath = '') {
@@ -85,33 +45,6 @@ export function getPlainNode(nodeList, parentPath = '') {
   return arr;
 }
 
-export function digitUppercase(n) {
-  const fraction = ['角', '分'];
-  const digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
-  const unit = [
-    ['元', '万', '亿'],
-    ['', '拾', '佰', '仟'],
-  ];
-  let num = Math.abs(n);
-  let s = '';
-  fraction.forEach((item, index) => {
-    s += (digit[Math.floor(num * 10 * (10 ** index)) % 10] + item).replace(/零./, '');
-  });
-  s = s || '整';
-  num = Math.floor(num);
-  for (let i = 0; i < unit[0].length && num > 0; i += 1) {
-    let p = '';
-    for (let j = 0; j < unit[1].length && num > 0; j += 1) {
-      p = digit[num % 10] + unit[1][j] + p;
-      num = Math.floor(num / 10);
-    }
-    s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
-  }
-
-  return s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');
-}
-
-
 function getRelation(str1, str2) {
   if (str1 === str2) {
     console.warn('Two path are equal!');  // eslint-disable-line
@@ -131,9 +64,7 @@ function getRenderArr(routes) {
   renderArr.push(routes[0]);
   for (let i = 1; i < routes.length; i += 1) {
     let isAdd = false;
-    // 是否包含
     isAdd = renderArr.every(item => getRelation(item, routes[i]) === 3);
-    // 去重
     renderArr = renderArr.filter(item => getRelation(item, routes[i]) !== 1);
     if (isAdd) {
       renderArr.push(routes[i]);