log error feature page develop

Change-Id: I46c1619ae4033499af41eb639e40387d61963149

venus_dashboard/log_error/panel.py

@@ -0,0 +1,22 @@
+# Copyright 2023 Inspur
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+from django.utils.translation import ugettext_lazy as _
+
+import horizon
+
+
+class LogError(horizon.Panel):
+    name = _("Log Error")
+    slug = 'log_error'

venus_dashboard/log_error/templates/log_error/index.html

@@ -0,0 +1,13 @@
+{% extends 'base.html' %}
+{% load i18n %}
+{% block title %}Log Error{% endblock %}
+
+{% block page_header %}
+{% include "horizon/common/_page_header.html" with title=_("Log Error") %}
+{% endblock page_header %}
+
+{% block main %}
+    <div class="col-sm-12" ng-cloak ng-init="">
+        <ng-include src="'{{ STATIC_URL }}dashboard/admin/venus/logError/logError.html'"></ng-include>
+    </div>
+{% endblock %}

venus_dashboard/log_error/urls.py

@@ -0,0 +1,22 @@
+# Copyright 2023 Inspur
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+from django.conf.urls import url
+
+from venus_dashboard.api import venus_rest_api # noqa
+from venus_dashboard.log_error import views
+
+urlpatterns = [
+    url(r'^$', views.IndexView.as_view(), name='index'),
+]

venus_dashboard/log_error/views.py

@@ -0,0 +1,23 @@
+# Copyright 2023 Inspur
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+
+from horizon import views
+
+
+class IndexView(views.APIView):
+    template_name = 'log_error/index.html'
+
+    def get_data(self, request, context, *args, **kwargs):
+        return context

venus_dashboard/static/dashboard/admin/services/venus.service.js

@@ -50,11 +50,24 @@
           });
       }
     }
+    function getError(config) {
+      config = {params: config};
+      if (venusAPI) {
+        return venusAPI.getError(config)
+          .then(function (data) {
+            return data;
+          })
+          .catch(function (err) {
+            console.error(err);
+          });
+      }
+    }
 
     return {
       getLogStorageDays: getLogStorageDays,
       getLogs: getLogs,
-      getAnalysis: getAnalysis
+      getAnalysis: getAnalysis,
+      getError: getError
     };
   }
 })();

venus_dashboard/static/dashboard/admin/venus/logError/logError.controller.js

@@ -0,0 +1,146 @@
+(function () {
+  'use strict';
+
+  angular
+      .module('horizon.dashboard.admin.venus')
+      .controller('LogErrorController', LogErrorController);
+
+  LogErrorController.$inject = ['$scope', 'venusSrv'];
+
+  function LogErrorController($scope, venusSrv) {
+    $scope.STATIC_URL = STATIC_URL;
+    $scope.model = {
+      start_time: new Date(),
+      end_time: new Date()
+    };
+    $scope.total = 0;
+    $scope.chartsData = []; // 数据形如：{key_as_string: '2022-05-30T15:30:00.000+08:00', doc_count: 20}
+
+    $scope.getData = function () {
+      var config = {
+        start_time: $scope.model.start_time.getTime() / 1000,
+        end_time: $scope.model.end_time.getTime() / 1000
+      };
+      venusSrv.getError(config).then(function (res) {
+        if (res.data.hasOwnProperty('data')) {
+          $scope.chartsData = res.data.data.count;
+        }
+        $scope.updateChart();
+      });
+    };
+
+    $scope.updateChart = function () {
+      var data = $scope.chartsData;
+
+      var padding = {
+        top: 50,
+        right: 50,
+        bottom: 50,
+        left: 100
+      };
+
+      var barGap = 2;
+
+      var svg = d3.select('#svg');
+
+      var width = svg.node().getBoundingClientRect().width - padding.left - padding.right,
+          height = svg.node().getBoundingClientRect().height - padding.top - padding.bottom,
+          barHotZoneWidth = data.length != 0 ? width / data.length : 0,
+          barHotZoneHighlight = '#ddd',
+          barWidth = barHotZoneWidth - barGap,
+          barBgColor = '#007ede';
+
+      var xScale = d3.scale.linear()
+          .domain([0, data.length])
+          .range([0, width]);
+
+      var yScale = d3.scale.linear()
+          .domain(d3.extent(data, d => d.doc_count))
+          .range([height, 0]);
+
+      var xAxis = d3.svg.axis()
+          .scale(xScale)
+          .orient('bottom');
+
+      var yAxis = d3.svg.axis()
+          .scale(yScale)
+          .orient('left');
+
+      svg.select('#xAxis')
+          .remove();
+
+      svg.append('g')
+          .attr('id', 'xAxis')
+          .attr('transform', 'translate('+padding.left+', '+(height+padding.top)+')')
+          .attr("class", "axis")
+          .call(xAxis);
+
+      svg.select('#yAxis')
+          .remove();
+
+      svg.append('g')
+          .attr('id', 'yAxis')
+          .attr('transform', 'translate('+padding.left+', '+padding.top+')')
+          .attr("class", "axis")
+          .call(yAxis);
+
+      svg.select('#bar-container')
+          .remove();
+
+      var barContainer = svg.append('g')
+          .attr('id', 'bar-container')
+          .attr('transform', 'translate('+padding.left+', '+padding.top+')');
+
+      var bars = barContainer.selectAll('g')
+          .data(data);
+
+      // enter
+      var barG = bars.enter()
+          .append('g');
+
+      var barHotZone = barG.append('rect')
+          .attr('class', 'hotzone')
+          .attr('x', (d, i) => xScale(i))
+          .attr('y', 0)
+          .attr('width', barHotZoneWidth)
+          .attr('height', height)
+          .attr('fill', 'none')
+          .attr('pointer-events', 'all');
+
+      barG.append('rect')
+          .attr('fill', barBgColor)
+          .attr('x', (d, i) => xScale(i) + barGap / 2)
+          .attr('y', (d) => yScale(d.doc_count))
+          .attr('width', barWidth)
+          .attr('height', (d) => height - yScale(d.doc_count));
+
+      barG.append('text')
+          .attr('x', (d, i) => xScale(i) + barHotZoneWidth / 2)
+          .attr('y', (d) => yScale(d.doc_count) - 5)
+          .attr('text-anchor', 'middle')
+          .attr('font-size', 12)
+          .text((d) => d.doc_count);
+
+      barG.on('mouseenter', function () {
+          d3.select(this).select('.hotzone').attr('fill', barHotZoneHighlight);
+      }).on('mouseleave', function() {
+          d3.select(this).select('.hotzone').attr('fill', 'none');
+      });
+    };
+
+    function init() {
+      var end_time = new Date();
+      end_time.setMilliseconds(0);
+      var start_time = new Date();
+      start_time.setMilliseconds(0);
+      start_time.setTime(end_time.getTime() - 24 * 60 * 60 * 1000);
+      $scope.model.start_time = start_time;
+      $scope.model.end_time = end_time;
+
+      $scope.getData();
+    }
+
+    init();
+  }
+
+})();

venus_dashboard/static/dashboard/admin/venus/logError/logError.css

@@ -0,0 +1,17 @@
+.venus-chart-wrapper {
+    width: 100%;
+    margin-top: 12px;
+    background-color: #eee;
+}
+
+.venus-chart {
+    width: 100%;
+    height: 300px;
+}
+
+.venus-chart .axis path,
+.venus-chart .axis line {
+    fill: none;
+    stroke: black;
+    shape-rendering: crispEdges;
+}

venus_dashboard/static/dashboard/admin/venus/logError/logError.html

@@ -0,0 +1,29 @@
+<link rel="stylesheet" type="text/css" href="/static/dashboard/admin/venus/logError/logError.css">
+<div ng-controller="LogErrorController as vm">
+    <div>
+        <div>
+            <form class="form-inline pull-right">
+                <div class="form-group">
+                    <input type="datetime-local" class="form-control" ng-model="model.start_time">
+                </div>
+                -
+                <div class="form-group">
+                    <input type="datetime-local" class="form-control" ng-model="model.end_time">
+                </div>
+                <div class="form-group">
+                    <button type="button" class="btn btn-default" ng-click="getData()">查询</button>
+                </div>
+            </form>
+            <div class="clear"></div>
+        </div>
+        <div class="venus-chart-wrapper">
+            <div>
+                <span>主要组件调用错误</span>
+                <select>
+                    <option v-for="obj in compList" value="obj.id">{{ obj.name }}</option>
+                </select>
+            </div>
+            <svg id="svg" class="venus-chart"></svg>
+        </div>
+    </div>
+</div>