HAWKULAR-586 add new page server overview. Add all alerts to this pag…

…e, add graph about all alert in timeline, add graph about avarege JVM, add graph about connections to DB, add graph about web connections, add information about deployments. Show basic server information. Add labels to side panel, it is possible to add and remove them." HAWKULAR-586 create labels inside overview panel. Labels can be added and removed. Fix graph with alerts, not it is much understandale and it show actual alerts in time. Fix NaN in web session alerts
hawkular · Dec 11, 2015 · 812dcbe · 812dcbe
1 parent 5e713f0
commit 812dcbe
Show file tree

Hide file tree

Showing 23 changed files with 1,096 additions and 16 deletions.
diff --git a/console/src/main/scripts/bower.json b/console/src/main/scripts/bower.json
@@ -12,6 +12,7 @@
     "plugins"
   ],
   "dependencies": {
+    "c3": "~0.4.10",
     "angular-animate": "1.4.4",
     "angular-bootstrap": "0.13.4",
     "angular-md5": "0.1.7",
@@ -45,6 +46,7 @@
   "resolutions": {
     "lodash": "~3.2.0",
     "angular": "~1.4.8",
-    "keycloak": "1.3.1"
+    "keycloak": "1.3.1",
+    "d3": "3.5.5"
   }
 }
diff --git a/console/src/main/scripts/plugins/metrics/html/app-details/app-server-details.html b/console/src/main/scripts/plugins/metrics/html/app-details/app-server-details.html
@@ -18,11 +18,13 @@
   <ng-include ng-repeat="tab in tabs.availableTabs" src="tab.src" ng-if="tabs.activeTab === tab.id"
               ng-controller="tab.controller"></ng-include>
 
-  <div class="hk-nav-tabs-container">
-    <button type="button" class="btn btn-primary" ng-click="tabs.requestExportJDR()"
-            ng-disabled="tabs.jdrGenerating">
-      Export JDR
-    </button>
+  <div ng-if="tabs.activeTab !== 'overview'">
+    <div class="hk-nav-tabs-container">
+      <button type="button" class="btn btn-primary" ng-click="tabs.requestExportJDR()"
+              ng-disabled="tabs.jdrGenerating">
+        Export JDR
+      </button>
+    </div>
   </div>
 
 </div>
diff --git a/console/src/main/scripts/plugins/metrics/html/app-details/detail-overview.html b/console/src/main/scripts/plugins/metrics/html/app-details/detail-overview.html
@@ -0,0 +1,41 @@
+<div>
+  <div class="hk-info-top clearfix">
+    <h3 class="pull-left">Server overview</h3>
+    <span class="hk-update pull-right" tooltip-trigger tooltip-placement="top" tooltip="Last update">
+      <i class="fa fa-clock-o"></i>{{vm.endTimeStamp | date:'HH:mm:ss'}}
+    </span>
+  </div>
+  <div class="row">
+    <!-- Left panel -->
+    <div class="col-lg-3 col-md-4">
+      <div class="row row-cards-pf">
+        <div class="col-md-12">
+          <hk-server-details server-info="vm.serverInfo"></hk-server-details>
+          <hk-common-tasks></hk-common-tasks>
+        </div>
+      </div>
+    </div>
+    <!-- //Left panel -->
+    <div class="col-lg-6 col-md-8">
+      <div class="row row-cards-pf">
+        <div class="col-md-12">
+          <hk-status-overview
+            end-time-stamp="vm.endTimeStamp"
+            start-time-stamp="vm.startTimeStamp"
+            overview-info="vm.overviewInfo"
+            alert-info="vm.alertInfo"
+            datasource-info="vm.datasourceInfo"
+          ></hk-status-overview>
+        </div>
+      </div>
+    </div>
+    <!-- //Status overview -->
+    <!-- Server alerts -->
+    <div class="col-lg-3 col-md-4">
+      <hk-alert-info list="vm.alertList" limit="(vm.showAllAlerts ? 100000 : 3)"
+                     resource-id="vm.$routeParams.resourceId" title="Server">
+      </hk-alert-info>
+    </div>
+    <!-- //Server alerts -->
+  </div>
+</div>
diff --git a/console/src/main/scripts/plugins/metrics/html/app-server-list.html b/console/src/main/scripts/plugins/metrics/html/app-server-list.html
@@ -104,10 +104,10 @@ <h1>No application servers set up.</h1>
             {{res.state | firstUpper}}
           </td>
           <td>
-            <a href="/hawkular-ui/app/app-details/{{res.feedId}}/{{res.id | limitTo : res.id.length-2}}/jvm/{{hkParams.timeOffset}}">
+            <a href="/hawkular-ui/app/app-details/{{res.feedId}}/{{res.id | limitTo : res.id.length-2}}/{{vm.defaultTab}}/{{hkParams.timeOffset}}">
               {{res.name}}
             </a>
-            <a href="/hawkular-ui/app/app-details/{{res.id}}/jvm/{{hkParams.timeOffset}}" class="pull-right">
+            <a href="/hawkular-ui/app/app-details/{{res.id}}/{{vm.defaultTab}}/{{hkParams.timeOffset}}" class="pull-right">
               <span class="label label-danger label-alert" tooltip-trigger tooltip-placement="top"
                     tooltip="Server alerts" ng-show="res.alerts.length">{{res.alerts.length}}</span>
             </a>

diff --git a/console/src/main/scripts/plugins/metrics/html/directives/overview/common-tasks.html b/console/src/main/scripts/plugins/metrics/html/directives/overview/common-tasks.html
@@ -0,0 +1,22 @@
+<div>
+  <div class="card-pf card-pf-utilization">
+    <div class="card-pf-heading">
+      <h2 class="card-pf-title">Common Tasks</h2>
+    </div>
+    <div class="card-pf-body">
+      <div class="hk-box-v-item hk-action" ng-repeat="task in vm.tasksList">
+        <div class="hk-display-table">
+          <div class="hk-icon-container">
+            <i class="fa {{task.icon}}"></i>
+          </div>
+          <div class="hk-info-container">
+            <div class="hk-heading">
+              <a ng-click="vm.goToPage(task.direction, task.action)" href="">{{task.title}}</a>
+            </div>
+            <div class="hk-info">{{task.text}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/console/src/main/scripts/plugins/metrics/html/directives/overview/deployment-status.html b/console/src/main/scripts/plugins/metrics/html/directives/overview/deployment-status.html
diff --git a/console/src/main/scripts/plugins/metrics/html/directives/overview/donut-chart.html b/console/src/main/scripts/plugins/metrics/html/directives/overview/donut-chart.html
@@ -0,0 +1,13 @@
+<div>
+  <div class="hk-data-info">
+    <div class="hk-data">{{usage}}</div>
+    <div class="hk-info">
+      <div ng-if="chartConfig">
+        <div pf-c3-chart id="{{graphId}}"  config="chartConfig"></div>
+      </div>
+    </div>
+  </div>
+  <div class="hk-block-title">
+    {{graphTitle}}
+  </div>
+</div>
diff --git a/console/src/main/scripts/plugins/metrics/html/directives/overview/label-editor.html b/console/src/main/scripts/plugins/metrics/html/directives/overview/label-editor.html
@@ -0,0 +1,19 @@
+<div class="dropdown" dropdown auto-close="outsideClick" is-open="isOpen">
+  <div class="input-group dropdown-toggle" dropdown-toggle="" aria-haspopup="true" aria-expanded="false">
+    <div ng-transclude></div>
+  </div>
+  <div class="dropdown-menu infotip bottom-left label-editor-dropdown">
+    <div class="arrow"></div>
+    <div class="dropdown-menu-content hk-label-editor">
+      <h4>Label: </h4>
+      <form class="form-inline">
+        <div class="form-group">
+          <input type="text" class="form-control" ng-model="label.key"> :
+          <input type="text" class="form-control" ng-model="label.value">
+        </div>
+        <button type="button" ng-click="confirmDropDown()" class="btn btn-default"><i class="fa fa-check"></i></button>
+        <button type="button" ng-click="closeDropDown()" class="btn btn-danger"><i class="fa fa-times"></i></button>
+      </form>
+    </div>
+  </div>
+</div>
diff --git a/console/src/main/scripts/plugins/metrics/html/directives/overview/remove-label.html b/console/src/main/scripts/plugins/metrics/html/directives/overview/remove-label.html
@@ -0,0 +1,16 @@
+<div class="modal-header">
+  <button type="button" class="close" ng-click="lvm.cancel()">
+    <span class="pficon pficon-close"></span>
+  </button>
+  <h4 class="modal-title">Delete Driver</h4>
+</div>
+<div class="modal-body">
+  <div class="form-group">
+    <p class="primary-message">Are you sure you want to delete Label with key `{{lvm.currentLabel.key}}` and value `{{lvm.currentLabel.value}}`?</p>
+    <p>This action can't be undone.</p>
+  </div>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-default" ng-click="lvm.cancel()">Cancel</button>
+  <button type="button" class="btn btn-danger" ng-click="lvm.confirmDelete()">Delete</button>
+</div>
diff --git a/console/src/main/scripts/plugins/metrics/html/directives/overview/server-details.html b/console/src/main/scripts/plugins/metrics/html/directives/overview/server-details.html
@@ -0,0 +1,46 @@
+<div>
+  <div class="card-pf card-pf-utilization">
+    <div class="card-pf-heading">
+      <h2 class="card-pf-title">Server Details</h2>
+    </div>
+    <div class="card-pf-body">
+      <dl class="dl-horizontal">
+        <dt>Type</dt>
+        <dd><span class="hk-open">{{serverInfo.type.name}}</span></dd>
+        <dt>Version</dt>
+        <dd></dd>
+        <dt>Status</dt>
+        <dd>
+          <span ng-hide="serverInfo.state === 'up'">
+              Stopped <i class="fa fa-arrow-down"></i>
+          </span>
+          <span ng-show="serverInfo.state === 'up'">
+              Running <i class="fa fa-arrow-up"></i>
+          </span>
+        </dd>
+        <dt>Host</dt>
+        <dd class="hk-word-break">{{serverInfo.configuration.Hostname}}</dd>
+        <dt>Labels</dt>
+        <div ng-if="vm.serverInfo && vm.serverInfo.properties">
+            <div ng-repeat="(index, label) in vm.serverInfo.properties.labels" class="server-label">
+              <hk-detail-label-editor
+                confirm="vm.publishProperties(vm.serverInfo.properties)"
+                label="label"
+                close="vm.removeLabel(index)">
+                <span class="label label-primary label-clickable">{{label.key}} : {{label.value}}</span>
+              </hk-detail-label-editor>
+            </div>
+        </div>
+        <dd>
+          <hk-detail-label-editor
+            confirm="vm.confirmNewLabel()"
+            label="vm.newLabel"
+            close="vm.closeDropDown()">
+            <button class="btn btn-link"><i class="fa fa-plus-circle"></i>Add Label </button>
+          </hk-detail-label-editor>
+          </dd>
+      </dl>
+    </div>
+  </div>
+
+</div>
diff --git a/console/src/main/scripts/plugins/metrics/html/directives/overview/spark-line-chart.html b/console/src/main/scripts/plugins/metrics/html/directives/overview/spark-line-chart.html
@@ -0,0 +1,15 @@
+<div>
+  <div class="hk-data-info">
+    <div class="hk-data">
+      {{usage}}
+    </div>
+    <div class="hk-info">
+      <hawkular-sparkline-chart
+        data="usageGraph"
+        show-x-axis-values="false"
+        show-y-axis-values="false">
+      </hawkular-sparkline-chart>
+    </div>
+  </div>
+  <div class="hk-block-title">{{title}}</div>
+</div>
diff --git a/console/src/main/scripts/plugins/metrics/html/directives/overview/status-overview.html b/console/src/main/scripts/plugins/metrics/html/directives/overview/status-overview.html
@@ -0,0 +1,71 @@
+<div class="card-pf card-pf-utilization">
+  <div class="card-pf-heading">
+    <p class="card-pf-heading-details hk-definitions-link">{{startTimeStamp | date:'d MMM yyyy'}}, {{startTimeStamp | date:'HH:mm'}} - {{endTimeStamp | date:'HH:mm'}}</p>
+    <h2 class="card-pf-title">Status Overview</h2>
+  </div>
+  <div class="card-pf-body">
+    <div class="row">
+      <div class="col-md-6 hk-dashboard-block">
+        <div ng-show="alertInfo && alertInfo.graphData">
+          <hk-overview-spark-line-chart
+            title="Alerts"
+            usage-graph="alertInfo.graphData"
+            usage="alertInfo.alertCount">
+          </hk-overview-spark-line-chart>
+        </div>
+      </div>
+      <div ng-repeat="datasource in datasourceInfo track by $index">
+        <div class="col-md-6 hk-dashboard-block">
+          <div ng-show="datasource && datasource.chartConfig">
+            <hk-overview-donut-chart
+              graph-title="Used Connections for {{datasource.name}}"
+              graph-id="datasource-{{$index}}"
+              chart-config="datasource.chartConfig"
+              usage="0">
+            </hk-overview-donut-chart>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-6 hk-dashboard-block">
+        <div class="hk-data-info">
+          <div class="hk-data" ng-if="overviewInfo.deployments">{{overviewInfo.deployments.length}}</div>
+          <div class="hk-info">
+            <p class="card-pf-aggregate-status-notifications">
+              <span class="card-pf-aggregate-status-notification">
+                <i class="fa fa-times-circle-o" data-toggle="tooltip" data-placement="top" data-original-title="Failed"></i>
+                <span ng-if="overviewInfo.deployments">{{vm.filterByState(overviewInfo.deployments, 'failed').length}}</span>
+              </span>
+              <span class="card-pf-aggregate-status-notification">
+                <i class="fa fa-square" data-toggle="tooltip" data-placement="top" data-original-title="Stopped"></i>
+                <span ng-if="overviewInfo.deployments">{{vm.filterByState(overviewInfo.deployments, 'down').length}}</span>
+              </span>
+              <span class="card-pf-aggregate-status-notification">
+                <i class="fa fa-check-circle-o" data-toggle="tooltip" data-placement="top" data-original-title="OK"></i>
+                <span ng-if="overviewInfo.deployments">{{vm.filterByState(overviewInfo.deployments, 'up').length}}</span>
+              </span>
+            </p>
+          </div>
+        </div>
+        <div class="hk-block-title">Deployment status</div>
+      </div>
+      <div class="col-md-6 hk-dashboard-block">
+        <div ng-show="overviewInfo && overviewInfo.heapUsage">
+          <hk-overview-spark-line-chart
+            title="JVM (Average Heap Usage per MB)"
+            usage-graph="overviewInfo.heapUsage.graph"
+            usage="overviewInfo.heapUsage.last / 1024 / 1024 | number : 0">
+          </hk-overview-spark-line-chart>
+        </div>
+      </div>
+      <div class="col-md-6 hk-dashboard-block">
+        <div ng-if="overviewInfo && overviewInfo.activeWebSessions">
+          <hk-overview-spark-line-chart
+            title="Active Web Sessions"
+            usage-graph="overviewInfo.activeWebSessions.graph"
+            usage="overviewInfo.activeWebSessions.last">
+          </hk-overview-spark-line-chart>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/console/src/main/scripts/plugins/metrics/less/metrics.less b/console/src/main/scripts/plugins/metrics/less/metrics.less
@@ -43,6 +43,17 @@ body {
   float: none;
 }
 
+.label-editor-dropdown {
+  width: 400px;
+  padding: 15px;
+}
+
+.server-label {
+  display: inline-block;
+  padding-right: 5px;
+  cursor:pointer;
+}
+
 .container {
   @media (min-width: 1201px) and (max-width: 1440px) {
     width: calc(~"100% - 40px");
@@ -2458,6 +2469,7 @@ section {
 
   padding-bottom: @grid-gutter-width/2;
   padding-top: @grid-gutter-width/2;
+  height: 120px;
 
   .hk-data-info {
     display: table;
@@ -2575,4 +2587,4 @@ section {
 
     }
   }
-}
+}
diff --git a/console/src/main/scripts/plugins/metrics/ts/app-details/appServerDatasourcesDetails.ts b/console/src/main/scripts/plugins/metrics/ts/app-details/appServerDatasourcesDetails.ts
@@ -66,6 +66,7 @@ module HawkularMetrics {
                 private ErrorsManager:IErrorsManager,
                 private MetricsService:IMetricsService,
                 private $log:ng.ILogService,
+                private $location:ng.ILocationService,
                 private $modal:any) {
       $scope.vm = this;
 
@@ -78,6 +79,10 @@ module HawkularMetrics {
       this.chartRespData = {};
 
       this.defaultEmail = this.$rootScope.userDetails.email || 'myemail@company.com';
+      if ($routeParams.action && $routeParams.action === 'add-new') {
+        this.showDatasourceAddDialog();
+        $location.search('action', null);
+      }
 
       // handle drag ranges on charts to change the time range
       this.$scope.$on('ChartTimeRangeChanged', (event, data:Date[]) => {

diff --git a/console/src/main/scripts/plugins/metrics/ts/app-details/appServerDeploymentsDetails.ts b/console/src/main/scripts/plugins/metrics/ts/app-details/appServerDeploymentsDetails.ts
@@ -26,6 +26,7 @@ module HawkularMetrics {
 
     private autoRefreshPromise:ng.IPromise<number>;
     private resourceList;
+    public modalInstance;
     public alertList:any[] = [];
     public selectCount:number = 0;
     public lastUpdateTimestamp:Date;
@@ -45,12 +46,19 @@ module HawkularMetrics {
                 private HawkularInventory:any,
                 private HawkularMetric:any,
                 private HawkularOps:any,
+                private HawkularAlertsManager:IHawkularAlertsManager,
                 private HawkularAlertRouterManager: IHawkularAlertRouterManager,
+                private ErrorsManager:IErrorsManager,
+                private $location:ng.ILocationService,
                 private $q:ng.IQService,
                 private NotificationsService:INotificationsService) {
       $scope.vm = this;
       HawkularOps.init(this.NotificationsService);
 
+      if ($routeParams.action && $routeParams.action === 'add-new') {
+        this.showDeploymentAddDialog();
+        $location.search('action', null);
+      }
       this.startTimeStamp = +moment().subtract(($routeParams.timeOffset || 3600000), 'milliseconds');
       this.endTimeStamp = +moment();