Merge pull request #261 from ammendonca/HAWKULAR-219

HAWKULAR-219 : Application Server Datasource Tab implementation

ui/console/src/main/scripts/plugins/directives/plugins/topbar/less/main.less

@@ -86,7 +86,7 @@
     -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
     transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
     display: inline-block;
-    font-size: ceil(@font-size-base * 1.1666666667);
+    font-size: ceil(@font-size-base + 2);
     min-width: 200px;
     text-align: left;
 

ui/console/src/main/scripts/plugins/metrics/plugins/metrics/html/app-details/detail-datasources.html

@@ -1,40 +1,92 @@
 <section id="hk-datasources" class="hk-tab-content">
 
-  <span class="hk-update pull-right" tooltip-trigger tooltip-placement="bottom" tooltip="Last update"><i class="fa fa-clock-o"></i>{{vm.endTimeStamp | date:'mediumTime'}}</span>
-  <h3 class="pull-left">Fake Datasource 1</h3>
-  <div class="panel panel-default hk-summary">
-    <div class="row">
-      <div class="col-sm-3 hk-summary-item">
-        <span class="hk-data">2 <i class="fa fa-flag"></i></span>
-        <span class="hk-item">Datasource Alerts</span>
-      </div>
-      <div class="col-sm-6 hk-summary-item">
-        <span class="hk-data">Chart TBD</span>
-        <span class="hk-item">Connections Used %</span>
-      </div>
-      <div class="col-sm-3 hk-summary-item">
-        <span class="hk-data">7 Available (of 28)</span>
-        <span class="hk-item">Available Connections (of Total)</span>
+  <div class="hk-resource-container" ng-repeat="ds in vm.resourceList">
+
+    <h3 class="pull-left">{{ds.properties.name}}</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:'mediumTime'}}</span>
+    <div class="panel panel-default hk-summary">
+      <div class="row">
+        <div class="col-sm-4 hk-summary-item">
+          <span class="hk-data">{{vm.alertList.length}} <i class="fa fa-flag" ng-show="vm.alertList.length > 0"></i></span>
+          <span class="hk-item">Datasources Alerts</span>
+        </div>
+        <div class="col-sm-4 hk-summary-item">
+          <span class="hk-data">{{ ds.inUseCount.value / ds.availableCount.value * 100 }} %</span>
+          <span class="hk-item">Connections Used (%)</span>
+        </div>
+        <div class="col-sm-4 hk-summary-item">
+          <span class="hk-data">{{ ds.availableCount.value - ds.inUseCount.value }} Available (of {{ ds.availableCount.value }})</span>
+          <span class="hk-item">Available Connections (of total)</span>
+        </div>
       </div>
     </div>
-  </div>
+    <div class="hk-panel-collapse-area" ng-class="{'hk-collapsed' : !vm.expandedList[ds.id]}">
+      <a href="#" ng-click="vm.expandedList[ds.id] = !vm.expandedList[ds.id]"><span ng-hide="vm.expandedList[ds.id]">View Metrics</span><span ng-show="vm.expandedList[ds.id]">Hide Metrics</span><i class="fa" ng-class="vm.expandedList[ds.id] ? 'fa-angle-up' : 'fa-angle-down'"></i></a>
+    </div>
 
-  <h3 class="pull-left">Fake Datasource 2</h3>
-  <div class="panel panel-default hk-summary">
-    <div class="row">
-      <div class="col-sm-3 hk-summary-item">
-        <span class="hk-data">2 <i class="fa fa-flag"></i></span>
-        <span class="hk-item">Datasource Alerts</span>
+    <div class="hk-collapsible-area" ng-class="{ 'hide': !vm.expandedList[ds.id]}">
+
+      <!-- Alerts -->
+      <div class="hk-info-top clearfix">
+        <h3 class="pull-left">
+          <button class="btn btn-link hk-trigger" ng-click="showAllAlerts = !showAllAlerts" tooltip-trigger tooltip-placement="top" tooltip="Expand/collapse"><i class="fa" ng-show="vm.alertList.length > 0" ng-class="showAllAlerts ? 'fa-minus-square-o' : 'fa-plus-square-o'"></i> Deployment Alerts <span ng-show="vm.alertList.length > 0">({{showAllAlerts ? vm.alertList.length : vm.math.min(vm.alertList.length, 3)}} of {{vm.alertList.length}})</span></button>
+        </h3>
+        <span class="hk-settings pull-right"><a href="#" ng-controller="MetricsAlertController as mac" ng-click="mac.openSetup()"><i class="fa fa-cog"></i>Alert Settings</a></span>
+      </div>
+      <div class="clearfix">
+        <!-- No Alerts -->
+        <div class="panel panel-default alert alert-info" ng-show="vm.alertList.length === 0">
+          <div class="hk-alert-icon"><i class="fa fa-flag gray"></i></div>
+          <div>No alerts have been fired in this category and time range.</div>
+        </div>
+        <!-- Alerts exist -->
+        <div class="panel panel-default alert alert-danger" ng-repeat="alert in vm.alertList | limitTo: (showAllAlerts ? 100000 : 3) track by $index">
+          <div class="hk-alert-icon"><i class="fa fa-flag"></i></div>
+          <div class="hk-date">{{alert.evalSets[0][0].evalTimestamp | date:'medium' }}</div>
+          <div class="hk-event"><strong>Alert Summary</strong>: alert details.</div>
+        </div>
       </div>
-      <div class="col-sm-6 hk-summary-item">
-        <span class="hk-data">Chart TBD</span>
-        <span class="hk-item">Connections Used %</span>
+
+      <div class="hk-info-top clearfix">
+        <h3 class="pull-left">Metrics</h3>
+        <div class="hk-update pull-right">
+          <button class="btn btn-link hk-chart-update" tooltip-trigger tooltip-placement="top" tooltip="Update chart"><i class="fa fa-refresh"></i></button>
+        </div>
       </div>
-      <div class="col-sm-3 hk-summary-item">
-        <span class="hk-data">45 Available (of 50)</span>
-        <span class="hk-item">Available Connections (of Total)</span>
+      <div class="panel panel-default hk-graph">
+        <h2>Availability and Responsiveness</h2>
+        <!-- <img src="img/graph-av-rp.png" alt="graph-av-rp"> -->
+        <div class="row hk-legend hk-legend-inline text-left">
+          <div class="col-md-7 col-lg-6">
+            <h4>Connection Availability<!-- <img src="img/legend-connection.png" alt="legend-connection" height="12"> --></h4>
+            <div class="hk-graphselector hk-blue">
+              <input type="checkbox" id="available1" checked="checked">
+              <label for="available1"><span>Available Connections</span></label>
+            </div>
+            <div class="hk-graphselector hk-green">
+              <input type="checkbox" id="connections1">
+              <label for="connections1"><span>Connections in Use</span></label>
+            </div>
+            <div class="hk-graphselector hk-gray">
+              <input type="checkbox" id="timed1">
+              <label for="timed1"><span>Timed-out Connections</span></label>
+            </div>
+          </div>
+          <div class="col-md-5 col-lg-6">
+            <h4>Responsiveness<!-- <img src="img/legend-responsiveness.png" alt="legend-responsiveness" height="12"> --></h4>
+            <div class="hk-graphselector hk-yellow">
+              <input type="checkbox" id="wait1">
+              <label for="wait1"><span>Wait Time (Avg.)</span></label>
+            </div>
+            <div class="hk-graphselector hk-purple">
+              <input type="checkbox" id="creation1">
+              <label for="creation1"><span>Creation Time (Avg.)</span></label>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
-  </div>
+
+  </div><!-- .hk-resource-container -->
 
 </section>

ui/console/src/main/scripts/plugins/metrics/plugins/metrics/html/app-server-list.html

@@ -69,7 +69,7 @@ <h1>No application servers set up.</h1>
       <div class="dataTables_header"><div id="DataTables_Table_0_filter" class="dataTables_filter"><label><input type="search" ng-model="vm.search" aria-controls="DataTables_Table_0"></label></div>
 
       <div class="dataTables_info" id="DataTables_Table_0_info" role="status" aria-live="polite">Showing <b>1</b> to <b>{{(vm.resourceList | filter:vm.search).length}}</b> of <b>{{vm.resourceList.length}}</b> Items</div></div>
-      <table class="datatable table table-striped table-bordered table-checkbox" ng-show="vm.resourceList.length > 0">
+      <table class="datatable table table-striped table-bordered" ng-show="vm.resourceList.length > 0">
         <thead>
           <tr>
             <th>State</th>