Refactor avail and response charts into separate charts to allow them…

… to diverge more easily.
hawkular · Mar 16, 2015 · abf2e57 · abf2e57
1 parent 928433a
commit abf2e57
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 64 deletions.
diff --git a/dist/hawkular-ui-components-metrics.css b/dist/hawkular-ui-components-metrics.css
@@ -61,6 +61,9 @@ h2 {
 #metrics-chart {
   height: 270px;
 }
+#avail-chart {
+  height: 270px;
+}
 #control-bar .select-url-container {
   margin: -10px 0 0 -20px;
 }

diff --git a/dist/hawkular-ui-components-metrics.js b/dist/hawkular-ui-components-metrics.js
diff --git a/plugins/metrics/plugins/metrics/html/response-time.html b/plugins/metrics/plugins/metrics/html/response-time.html
@@ -26,24 +26,34 @@ <h1 ng-switch-when="false">Responsiveness </h1>
       <li ng-class="{'active': vm.isResponseTab}"><a href="#" ng-click="vm.responseTabClick()">Response Time</a></li>
       <li ng-class="{'active': !vm.isResponseTab}"><a href="#" ng-click="vm.responseTabClick()">Responsiveness</a></li>
     </ul>
-    <div id="metrics-chart-container" ng-switch="vm.chartData.dataPoints.length > 1">
-      <p class="label label-info" ng-switch-when="false" style="margin-bottom: 25px;">We are collecting your
-        initial data. Please be patient(could be up to a minute)...</p>
+    <div id="metrics-chart-container" ng-switch="vm.isResponseTab" ng-show="vm.chartData.dataPoints.length > 0">
 
       <div id="metrics-chart" ng-switch-when="true">
         <!-- HINT: colors for the chart can be changed in the hawkular-charts.css -->
         <hawkular-chart
           data="{{vm.chartData.dataPoints}}"
-          chart-type="{{vm.getChartType()}}"
-          show-avg-line="false"
+          chart-type="hawkulararea"
           alert-value="600"
           hide-high-low-values="true"
-          y-axis-units="{{vm.getYAxisUnits()}}"
+          y-axis-units="Response Time (ms)"
           chart-title="Monitored Resource: {{vm.selectedResource.parameters.url}}"
           chart-height="250">
         </hawkular-chart>
       </div>
+      <div id="avail-chart" ng-switch-when="false">
+        <!-- HINT: colors for the chart can be changed in the hawkular-charts.css -->
+        <hawkular-chart
+          data="{{vm.chartData.dataPoints}}"
+          chart-type="histogram"
+          y-axis-units="Status Code "
+          chart-title="Monitored Resource: {{vm.selectedResource.parameters.url}}"
+          chart-height="250">
+        </hawkular-chart>
+      </div>
+
     </div>
+    <p class="label label-info" ng-hide="vm.chartData.dataPoints.length > 0" style="margin-bottom: 25px;">We are
+      collecting your initial data. Please be patient(could be up to a minute)...</p>
 
   </div>
 

diff --git a/plugins/metrics/plugins/metrics/less/metrics-main.less b/plugins/metrics/plugins/metrics/less/metrics-main.less
@@ -93,6 +93,10 @@ h2 {
   height: 270px;
 }
 
+#avail-chart {
+  height: 270px;
+}
+
 #control-bar {
 
   .select-url-container {

diff --git a/plugins/metrics/plugins/metrics/ts/addUrlPage.ts b/plugins/metrics/plugins/metrics/ts/addUrlPage.ts
@@ -52,16 +52,16 @@ module HawkularMetrics {
       this.HawkularInventory.Resource.save({tenantId: globalTenantId}, resource).$promise
         .then((newResource) => {
           // we now have a resourceId from this call
-          globalResourceId = newResource.id;
+          globalMetricId = newResource.id;
           globalResourceUrl = resource.parameters.url;
           console.dir(newResource);
-          this.$log.info("New Resource ID: " + globalResourceId + " created for url: " + globalResourceUrl);
+          this.$log.info("New Resource ID: " + globalMetricId + " created for url: " + globalResourceUrl);
           var metrics = [{
-            name: globalResourceId + '.status.duration',
+            name: globalMetricId + '.status.duration',
             unit: 'MILLI_SECOND',
             description: 'Response Time in ms.'
           }, {
-            name: globalResourceId + '.status.code',
+            name: globalMetricId + '.status.code',
             unit: 'NONE',
             description: 'Status Code'
           }];

diff --git a/plugins/metrics/plugins/metrics/ts/metricsGlobals.ts b/plugins/metrics/plugins/metrics/ts/metricsGlobals.ts
@@ -30,7 +30,7 @@ module HawkularMetrics {
   /// @todo: this will go away once we have KeyCloak integration
   export var globalTenantId = "test";
 
-  export var globalResourceId = "";
+  export var globalMetricId = "";
   export var globalResourceUrl = "";
 
   export var globalResourceList = [];

diff --git a/plugins/metrics/plugins/metrics/ts/metricsResponseAlertForm.ts b/plugins/metrics/plugins/metrics/ts/metricsResponseAlertForm.ts
@@ -77,9 +77,9 @@ module HawkularMetrics {
     }
 
     saveQuickAlert():void {
-      if (sharedMetricId !== '.status.duration' && sharedMetricId !== '.status.code') {
+      if (globalMetricId !== '.status.duration' && globalMetricId !== '.status.code') {
         var newTrigger:any = {};
-        newTrigger.id = sharedMetricId + 'ResponseTime' + '-' + this.$scope.quickTrigger.operator + '-' + this.$scope.quickTrigger.threshold;
+        newTrigger.id = globalMetricId + 'ResponseTime' + '-' + this.$scope.quickTrigger.operator + '-' + this.$scope.quickTrigger.threshold;
         newTrigger.name = newTrigger.id;
         newTrigger.description = 'Created on ' + new Date();
         newTrigger.match = 'ALL';
@@ -112,7 +112,7 @@ module HawkularMetrics {
             this.$log.debug('Success Dampening save', dampening);
             var newThresholdCondition = {
               triggerId: dampening.triggerId,
-              dataId: sharedMetricId,
+              dataId: globalMetricId,
               conditionSetSize: 1,
               conditionSetIndex: 1,
               operator: this.$scope.quickTrigger.operator,

diff --git a/plugins/metrics/plugins/metrics/ts/metricsResponsePage.ts b/plugins/metrics/plugins/metrics/ts/metricsResponsePage.ts
@@ -32,7 +32,6 @@ module HawkularMetrics {
   }
 
 
-  export var sharedMetricId:string;
 
   /**
    * @ngdoc controller
@@ -42,7 +41,8 @@ module HawkularMetrics {
    * @param $rootScope for publishing $broadcast events only
    * @param $interval
    * @param $log
-   * @param metricDataService
+   * @param HawkularMetric
+   * @param HawkularInventory
    */
   export class MetricsViewController {
     /// for minification only
@@ -65,26 +65,26 @@ module HawkularMetrics {
       + ' (' + moment(this.endTimeStamp).from(moment(this.startTimeStamp), true) + ')';
 
       $scope.$on('RefreshChart', (event) => {
-        $scope.vm.refreshChartDataNow(this.getMetricId());
+        this.refreshChartDataNow(this.getMetricId());
       });
 
       $scope.$watch('vm.selectedResource', (resource) => {
         if (resource) {
           /// made a selection from url switcher
-          globalResourceId = resource.id;
-          $scope.vm.refreshChartDataNow(this.getMetricId());
+          globalMetricId = resource.id;
+          this.refreshChartDataNow(this.getMetricId());
         } else {
           /// case when coming from addUrl screen
           globalResourceList = this.HawkularInventory.Resource.query({tenantId: globalTenantId}).$promise.
             then((resources)=> {
               this.resourceList = resources;
-              this.selectedResource = resources[resources.length - 1];
-              $scope.vm.refreshChartDataNow(this.getMetricId());
+              this.selectedResource = _.last(resources);
+              this.refreshChartDataNow(this.getMetricId());
             });
         }
 
       });
-      $scope.vm.onCreate();
+      this.onCreate();
     }
 
     private bucketedDataPoints:IChartDataPoint[] = [];
@@ -110,7 +110,7 @@ module HawkularMetrics {
       this.autoRefresh(60);
       this.HawkularInventory.Resource.query({tenantId: globalTenantId}, (aResourceList) => {
         this.resourceList = aResourceList;
-        this.selectedResource = this.resourceList[this.resourceList.length - 1];
+        this.selectedResource = _.last(this._resourceList);
         this.refreshChartDataNow(this.getMetricId());
       });
     }
@@ -151,26 +151,17 @@ module HawkularMetrics {
     }
 
     getMetricId():string {
-      var metricId = this.isResponseTab ? MetricsViewController.getResourceDurationMetricId() : MetricsViewController.getResourceCodeMetricId();
-      sharedMetricId = metricId;
-      return metricId;
+      return this.isResponseTab ? MetricsViewController.getResourceDurationMetricId() : MetricsViewController.getResourceCodeMetricId();
     }
 
     private static getResourceDurationMetricId() {
-      return globalResourceId + '.status.duration';
+      return globalMetricId + '.status.duration';
     }
 
     private static getResourceCodeMetricId() {
-      return globalResourceId + '.status.code';
-    }
-
-    getChartType():string {
-      return this.isResponseTab ? 'hawkulararea' : 'histogram';
+      return globalMetricId + '.status.code';
     }
 
-    getYAxisUnits():string {
-      return this.isResponseTab ? 'Response time (ms)' : 'Status Code';
-    }
 
     responseTabClick():void {
       this.isResponseTab = !this.isResponseTab;