浏览代码

HUE-8649 [frontend] Add a performance graph component

Johan Ahlen 7 年之前
父节点
当前提交
63622251ac

+ 1 - 1
apps/jobbrowser/src/jobbrowser/templates/job_browser.mako

@@ -1305,7 +1305,7 @@ ${ commonheader("Job Browser", "jobbrowser", user, request) | n,unicode }
           <div class="tab-pane active" id="servicesLoad">
             <div class="wxm-poc" style="clear: both;">
               <div style="float:left; margin-right: 10px; margin-bottom: 10px;">
-                <img src="${ static('desktop/art/wxm_fake/trend.svg') }" style="height: 440px"/>
+                <!-- ko component: { name: 'performance-graph', params: { type: 'cpu' } } --><!-- /ko -->
               </div>
             </div>
           </div>

文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue-embedded.css


文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 1 - 1
desktop/core/src/desktop/static/desktop/js/nv.d3.js

@@ -1251,7 +1251,7 @@ nv.utils.optionsFunc = function(args) {
                 .attr('text-anchor', 'end')
                 .text(function(d,i) {
                   var v = fmt(d);
-                  return ('' + v).match('NaN') ? '' : v.substr(0, 8);
+                  return ('' + v).match('NaN') ? '' : v.toString().substr(0, 8);
                 });
             axisMaxMin.transition()
                 .attr('transform', function(d,i) {

+ 53 - 0
desktop/core/src/desktop/static/desktop/less/components/hue-performance-graph.less

@@ -0,0 +1,53 @@
+/*
+ Licensed to Cloudera, Inc. under one
+ or more contributor license agreements.  See the NOTICE file
+ distributed with this work for additional information
+ regarding copyright ownership.  Cloudera, Inc. licenses this file
+ to you 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.
+*/
+
+// NV D3 Adjustments
+.performance-graph {
+
+  h3 {
+    font-size: 34px;
+    font-weight: 300;
+  }
+
+  svg {
+    .nvtooltip {
+      font-family:  @font-family-sans-serif;
+    }
+
+    text {
+      font: 400 12px @font-family-sans-serif;
+    }
+
+    .title {
+      font: 700 14px @font-family-sans-serif;
+    }
+
+    .nvd3 .nv-axis {
+      fill: #AAA;
+    }
+
+    .nvd3 .nv-axis path {
+      stroke: #AAA;
+    }
+
+    .nvd3.nv-bullet {
+      font: 10px @font-family-sans-serif;
+    }
+  }
+}
+

+ 1 - 0
desktop/core/src/desktop/static/desktop/less/hue-cross-version.less

@@ -28,6 +28,7 @@
 @import "components/hue-inputautocomplete.less";
 @import "components/hue-nav-properties.less";
 @import "components/hue-notify.less";
+@import "components/hue-performance-graph.less";
 @import "components/hue-popover.less";
 @import "components/hue-qq-upload.less";
 @import "components/hue-query-builder.less";

+ 2 - 0
desktop/core/src/desktop/templates/ko_components.mako

@@ -32,6 +32,7 @@
 <%namespace name="koMultiClusterSidebar" file="/ko_components/ko_multi_cluster_sidebar.mako" />
 <%namespace name="koNavProperties" file="/ko_components/ko_nav_properties.mako" />
 <%namespace name="koNavTags" file="/ko_components/ko_nav_tags.mako" />
+<%namespace name="koPerformanceGraph" file="/ko_components/ko_performance_graph.mako" />
 <%namespace name="koSentryPrivileges" file="/ko_components/ko_sentry_privileges.mako" />
 <%namespace name="koSimpleAceEditor" file="/ko_components/ko_simple_ace_editor.mako" />
 <%namespace name="koSqlColumnsTable" file="/ko_components/ko_sql_columns_table.mako" />
@@ -55,6 +56,7 @@
   ${ koMultiClusterSidebar.multiClusterSidebar() }
   ${ koNavProperties.navProperties() }
   ${ koNavTags.navTags() }
+  ${ koPerformanceGraph.performanceGraph() }
   ${ koSentryPrivileges.sentryPrivileges() }
   ${ koSimpleAceEditor.simpleAceEditor() }
   ${ koSqlColumnsTable.sqlColumnsTable() }

+ 143 - 0
desktop/core/src/desktop/templates/ko_components/ko_performance_graph.mako

@@ -0,0 +1,143 @@
+## Licensed to Cloudera, Inc. under one
+## or more contributor license agreements.  See the NOTICE file
+## distributed with this work for additional information
+## regarding copyright ownership.  Cloudera, Inc. licenses this file
+## to you 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 desktop.views import _ko
+from django.utils.translation import ugettext as _
+%>
+
+<%def name="performanceGraph()">
+
+  <script type="text/html" id="performance-graph-d3-template">
+    <svg data-bind="style: { height: graphHeight + 'px', width: graphWidth + 'px' }"></svg>
+  </script>
+
+  <script type="text/html" id="performance-graph-template">
+    <div class="performance-graph" style="position: relative">
+      <h3 data-bind="text: header"></h3>
+      <div style="position: absolute; right: 20px; top: 3px;">
+        ${ _("Min") } <span style="font-weight: 300; margin-right: 10px" data-bind="text: min"></span> ${ _("Max") } <span style="font-weight: 300; margin-right: 10px" data-bind="text: max"></span> ${ _("Average") } <span style="font-weight: 300; margin-right: 10px" data-bind="text: average"></span>
+      </div>
+      <!-- ko template: { name: 'performance-graph-d3-template', afterRender: graphContainerRendered } --><!-- /ko -->
+    </div>
+  </script>
+
+  <script type="text/javascript">
+
+
+    (function () {
+      var generateFakeData = function () {
+        var entries = 100;
+        var timeDiff = 300000; // 5 minutes
+        var startTime = Date.now() - entries * timeDiff;
+        var result = [];
+
+        var lastVal = 0;
+        for (var i = 0; i < 100; i++) {
+          lastVal = Math.round(Math.max(Math.min(lastVal + (Math.random()-0.5) * 20, 100), 0));
+          result.push({
+            x: startTime + timeDiff * i,
+            y: lastVal
+          });
+        }
+        return result;
+      };
+
+      var AVAILABLE_TYPES = {
+        'cpu': {
+          header: '${ _("CPU") }'
+        }
+      };
+
+      /**
+       * @param {object} params
+       *
+       * @constructor
+       */
+      function PerformanceGraph(params) {
+        var self = this;
+        self.type = params.type;
+        self.header = AVAILABLE_TYPES[self.type].header;
+        self.graphHeight = 300;
+        self.graphWidth = 750;
+        self.graphMargin = { top: 15, right: 30, bottom: 20, left: 25 };
+
+        self.average = ko.observable('-');
+        self.max = ko.observable('-');
+        self.min = ko.observable('-');
+        self.datum = ko.observable();
+
+        self.fetchData();
+
+        self.graphContainerRendered = function (domTree) {
+          var graphElement = domTree[1];
+
+          var chart = nv.models.lineChart()
+                  .margin(self.graphMargin)
+                  .useInteractiveGuideline(true)
+                  .transitionDuration(350)
+                  .yDomain([0, 100])
+                  .showLegend(false)
+                  .showYAxis(true)
+                  .showXAxis(true);
+
+          chart.xAxis
+                  .tickFormat(function(d){return moment(d).format('HH:mm:ss');})
+                  .showMaxMin(false)
+                  .tickPadding(10);
+
+          chart.yAxis
+                  .axisLabel('Percentage');
+
+          d3.select(graphElement).datum(self.datum()).call(chart);
+        }
+      }
+
+      PerformanceGraph.prototype.fetchData = function () {
+        var self = this;
+        var series = [];
+
+        var values = generateFakeData();
+        var max = 0, min = 0, average = 0;
+        values.forEach(function (val) {
+          if (val.y > max) {
+            max = val.y;
+          }
+          if (val.y < min) {
+            min = val.y
+          }
+          average += val.y;
+        });
+        average = average / values.length;
+
+        series.push({
+          values: values,
+          key: AVAILABLE_TYPES[self.type].label,
+          color: '#0B7FAD'
+        });
+        self.min(min + '%');
+        self.max(max + '%');
+        self.average(Math.round(average) + '%');
+        self.datum(series);
+      };
+
+      ko.components.register('performance-graph', {
+        viewModel: PerformanceGraph,
+        template: { element: 'performance-graph-template' }
+      });
+    })();
+  </script>
+</%def>

部分文件因为文件数量过多而无法显示