Add log search bar charts.

Change-Id: I92a27e40b1e8d23f4f738571e337535cc7741ff4

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

@@ -18,23 +18,81 @@
     };
     $scope.total = 0;
     $scope.tableData = [];
+    $scope.chartsData = []; // 数据形如：{key_as_string: '2022-05-30T15:30:00.000+08:00', doc_count: 20}
 
-    $scope.getData = function() {
+    $scope.getData = function () {
       var config = {
         start_time: $scope.model.start_time.getTime() / 1000,
         end_time: $scope.model.end_time.getTime() / 1000,
         page_size: $scope.model.page_size,
         page_num: $scope.model.page_num
       };
-      venusSrv.getLogs(config).then(function(res) {
+      venusSrv.getLogs(config).then(function (res) {
         $scope.tableData = [];
         if (res.data.hasOwnProperty('data')) {
           $scope.tableData = res.data.data.values;
+          $scope.chartsData = res.data.data_stats.count;
           $scope.total = res.data.data.total;
         }
+        $scope.updateCharts();
       });
     };
 
+    $scope.updateCharts = function () {
+      var svg = d3.select('#svg');
+
+      var width = svg.node().getBoundingClientRect().width,
+          height = svg.node().getBoundingClientRect().height,
+          barHotZoneWidth = width / $scope.chartsData.length,
+          barHotZoneHighlight = '#ff0000',
+          barWidth = barHotZoneWidth - 2,
+          barBgColor = '#007ede';
+
+      var xScale = d3.scale.linear()
+          .domain([0, $scope.chartsData.length - 1])
+          .range([0, width]);
+
+      var hScale = d3.scale.linear()
+          .domain(d3.extent($scope.chartsData, d => d.doc_count))
+          .range([0, height]);
+
+      var bars = svg.selectAll('g')
+          .data($scope.chartsData);
+
+      var yAxis = d3.svg.axis()
+          .scale(hScale)
+          .orient('left');
+
+      svg.select('#yAxis')
+          .remove();
+
+      svg.append('g')
+          .attr('id', 'yAxis')
+          .attr('transform', 'translate(30,0)')
+          .call(yAxis);
+
+      // enter
+      bars.enter()
+          .append('g')
+          .append('rect')
+          .attr('fill', barBgColor)
+          .attr('x', (d, i) => xScale(i))
+          .attr('y', (d) => height - hScale(d.doc_count))
+          .attr('width', barWidth)
+          .attr('height', (d) => hScale(d.doc_count));
+
+      // update
+      bars.select('rect')
+          .attr('x', (d, i) => xScale(i))
+          .attr('y', (d) => height - hScale(d.doc_count))
+          .attr('width', barWidth)
+          .attr('height', (d) => hScale(d.doc_count));
+
+      // exit
+      bars.exit()
+          .remove();
+    };
+
     function init() {
       var end_time = new Date();
       end_time.setMilliseconds(0);

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

@@ -1,6 +1,6 @@
 <div ng-controller="LogSearchController as vm">
-    <div class="row">
-        <div class="col-xs-12">
+    <div>
+        <div>
             <form class="form-inline pull-right">
                 <div class="form-group">
                     <input type="datetime-local" class="form-control" ng-model="model.start_time">
@@ -22,9 +22,12 @@
                 </div>
             </form>
         </div>
-
-        <table class="table table-hover">
-            <thead>
+        <div>
+            <svg id="svg" style="width: 100%; height: 300px;"></svg>
+        </div>
+        <div>
+            <table class="table table-striped">
+                <thead>
                 <tr>
                     <th>时间</th>
                     <th>主机</th>
@@ -35,8 +38,8 @@
                     <th>用户ID</th>
                     <th>描述</th>
                 </tr>
-            </thead>
-            <tbody>
+                </thead>
+                <tbody>
                 <tr class="text-center" ng-if="tableData.length === 0">
                     <td colspan="8">暂无数据。</td>
                 </tr>
@@ -50,9 +53,8 @@
                     <td>{$ item.user_id $}</td>
                     <td>{$ item.desc $}</td>
                 </tr>
-            </tbody>
-        </table>
-        <div>
+                </tbody>
+            </table>
             <ul uib-pagination total-items="total" ng-model="model.page_num" items-per-page="model.page_size" max-size="5" ng-change="getData()" class="pagination-sm" boundary-link-numbers="true" rotate="false"></ul>
         </div>
     </div>