alerting monitor request url bug fixed

service/alerting/monitor.go

@@ -1,7 +1,6 @@
 package alerting
 
 import (
-	"encoding/json"
 	"errors"
 	"fmt"
 	httprouter "infini.sh/framework/core/api/router"
@@ -200,8 +199,6 @@ func GetMonitors(w http.ResponseWriter, req *http.Request, ps httprouter.Params)
 		},
 	}
 	assignTo(params, sortPageData)
-	buf, _ := json.Marshal(params)
-	fmt.Println(string(buf))
 	config := getDefaultConfig()
 	reqUrl := fmt.Sprintf("%s/%s/_search", config.Endpoint, orm.GetIndexName(alerting.Config{}) )
 	res, err := doRequest(reqUrl, http.MethodGet, nil, params)
@@ -576,7 +573,7 @@ func AcknowledgeAlerts(w http.ResponseWriter, req *http.Request, ps httprouter.P
 	}
 
 	config := getDefaultConfig()
-	reqUrl := fmt.Sprintf("%s/%s/_update_by_query", getAlertIndexName(INDEX_ALERT), config.Endpoint)
+	reqUrl := fmt.Sprintf("%s/%s/_update_by_query", config.Endpoint, getAlertIndexName(INDEX_ALERT))
 	reqBody := IfaceMap{
 		"query": IfaceMap{
 			"bool": IfaceMap{

service/alerting/overview.go

@@ -16,6 +16,7 @@ func GetAlertOverview(w http.ResponseWriter, req *http.Request, ps httprouter.Pa
 		"metrics": IfaceMap{
 			"alert_day": alertDayMetricData,
 		},
+		"ok": true,
 	}, http.StatusOK)
 }
 

web/src/locales/en-US/alert.js

@@ -19,6 +19,7 @@ export default {
   'alert.dashboard.state-options.completed': 'Completed',
   'alert.dashboard.state-options.error': 'Error',
   'alert.dashboard.state-options.deleted': 'Deleted',
+  'alert.dashboard.state-options.normal': 'No alerts',
   'alert.dashboard.create-monitor-text': 'There are no existing alerts. Create a monitor to add triggers and actions. Once an alarm is triggered, the state will show in this table.',
   'alert.dashboard.create-trigger-text': 'There are no existing alerts. Create a trigger to start alerting. Once an alarm is triggered, the state will show in this table.',
   'alert.dashboard.table.columns.start_time': 'Alert start time',

web/src/locales/zh-CN/alert.js

@@ -19,6 +19,7 @@ export default {
   'alert.dashboard.state-options.completed': '已恢复',
   'alert.dashboard.state-options.error': '错误',
   'alert.dashboard.state-options.deleted': '已删除',
+  'alert.dashboard.state-options.normal': '正常',
   'alert.dashboard.create-monitor-text': '暂无监控项。 创建监控项以添加触发器和操作。 一旦触发警报，状态将显示在此表中。',
   'alert.dashboard.create-trigger-text': '暂无监控项。 创建触发器以开始警报。 一旦触发警报，状态将显示在此表中。',
   'alert.dashboard.table.columns.start_time': '告警开始时间',

web/src/pages/Alerting/pages/Dashboard/components/AlertList/alertitem.scss

@@ -23,16 +23,16 @@
       color: #fff;
       font-size: 20px;
       &.COMPLETED{
-        background-color: sandybrown;
+        background-color: rgb(208, 2, 27);
       }
       &.ACKNOWLEDGED{
-        background-color: seagreen;
+        background-color: pink;
       }
       &.ACTIVE{
-        background-color:tomato;
+        background-color: rgb(208, 2, 27);
       }
       &.ERROR{
-        background-color:red;
+        background-color:lightgrey;
       }
       &.DELETED{
         background-color: gray;

web/src/pages/Alerting/pages/Home/Home.js

@@ -22,6 +22,7 @@ import Monitors from '../Monitors/containers/Monitors';
 import DestinationsList from '../Destinations/containers/DestinationsList';
 import { formatMessage } from 'umi/locale';
 import {AlertOverview} from '../Dashboard/containers/AlertOverview';
+import Overview from '../Overview/Overview';
 
 const getSelectedTabId = (pathname) => {
   if (pathname.includes('monitors')) return 'monitors';
@@ -122,6 +123,12 @@ export default class Home extends Component {
                   notifications={notifications}
                 />
               )}
+            />
+             <Route
+              path="/overview"
+              render={(props) => (
+                <Overview {...props} httpClient={httpClient} notifications={notifications} />
+              )}
             />
              <Route
                 exact

web/src/pages/Alerting/pages/MonitorDetails/components/MonitorHistory/Legend/Legend.js

@@ -16,22 +16,23 @@
 import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
 import { ALERT_TIMELINE_COLORS_MAP } from '../../../containers/MonitorHistory/utils/constants';
+import { formatMessage } from 'umi/locale';
 
 const timeSeriesLegend = [
   {
-    title: 'Triggered',
+    title: formatMessage({ id: 'alert.dashboard.state-options.active' }),//'Triggered',
     color: ALERT_TIMELINE_COLORS_MAP.TRIGGERED,
   },
   {
-    title: 'Error',
+    title: formatMessage({ id: 'alert.dashboard.state-options.error' }),
     color: ALERT_TIMELINE_COLORS_MAP.ERROR,
   },
   {
-    title: 'Acknowledge',
+    title: formatMessage({ id: 'alert.dashboard.state-options.acknowledged' }), //'Acknowledge',
     color: ALERT_TIMELINE_COLORS_MAP.ACKNOWLEDGED,
   },
   {
-    title: 'No alerts',
+    title: formatMessage({ id: 'alert.dashboard.state-options.normal' }), 
     color: ALERT_TIMELINE_COLORS_MAP.NO_ALERTS,
   },
 ];

web/src/pages/Alerting/pages/Overview/Overview.js

@@ -1,9 +1,106 @@
-import React from "react";
+import React, {useEffect, useState} from "react";
+import {
+  Axis,
+  Chart,
+  CurveType,
+  LineSeries,
+  niceTimeFormatByDay,
+  Position,
+  ScaleType,
+  Settings,
+  timeFormatter,
+} from "@elastic/charts";
+
+const theme = {
+  legend: {
+      margin: 0,
+      padding: 0,
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+  },
+  chartMargins: {
+      left: 5,
+      right: 0,
+      top: 1,
+      bottom: 5,
+  },
+  chartPaddings: {
+      left: 5,
+      right: 5,
+      top: 0,
+      bottom: 0,
+  },
+  scales: {
+      barsPadding: 0.24,
+  },
+  axes: {
+      axisTitle: {
+          fill: '#333',
+          fontSize: 12,
+          fontStyle: 'bold',
+          fontFamily: "'Open Sans', Helvetica, Arial, sans-serif",
+          padding: 2,
+      },
+      axisLine: {
+          stroke: '#333',
+      },
+      tickLabel: {
+          fill: '#333',
+          fontSize: 10,
+          fontFamily: "'Open Sans', Helvetica, Arial, sans-serif",
+          fontStyle: 'normal',
+          padding: 2,
+      },
+      tickLine: {
+          visible: true,
+          stroke: '#333',
+          strokeWidth: 1,
+          padding: 0,
+      },
+  },
+}
+
 
 export default (props)=>{
+  const {httpClient, history} = props;
+  const [data, setData] = useState({
+    metrics: {
+      alert_day: [],
+    }
+  });
+  useEffect(()=>{
+    httpClient.get('/alerting/overview', {}).then((resp) => {
+      if (resp.ok) {
+        const { metrics } = resp;
+        setData({
+          metrics
+        });
+      } else {
+        console.log('error getting alerts:', resp);
+      }
+    });
+  }, [])
   return (
-    <div>
-      
+    <div style={{height:'150px'}}>
+       <Chart>
+        <Settings theme={theme} />
+        <Axis id="bottom" position={Position.Bottom} showOverlappingTicks tickFormat={timeFormatter(niceTimeFormatByDay(2))} /> 
+        <Axis
+          id="left"
+          title={'最近告警统计'}
+          position={Position.Left}
+        />
+        <LineSeries
+          id="lines"
+          xScaleType={ScaleType.Linear}
+          yScaleType={ScaleType.Linear}
+          xAccessor={0}
+          yAccessors={[1]}
+          data={data.metrics.alert_day}
+        />
+      </Chart>
     </div>
   );
 }