CSS refactoring of statistics sidepanel

Author: mariusoe

src/css/novatec-service-dependency-graph-panel.css

@@ -40,51 +40,53 @@
 
 .statistics.show {
   flex-basis: 30rem;
-  
+  padding-left: 0.5%;
 }
 
 .header--selection{
-  font-size: 1.7em;
-  display: block;
+  font-size: 1.25em;
   text-align: center;
-  padding-top: 15px;
-  border-bottom: 1px solid white;
+  border-bottom: 2px solid #161719;
+  font-weight: 500;
+  color: rgb(216, 217, 218);
 }
 
-.secondHeader--selection{
-
-  font-size: 1.5em;
-  display: block;
+.secondHeader--selection {
+  font-size: 1.2em;
   text-align: center;
-  padding-top: 30px;
-  padding-bottom: 10px;
+  padding-top: 1.5rem;
+  padding-bottom: 0.5rem;
 }
-.noSending--selection{
+.no-data--selection{
   font-size: 1.2em;
   display: block;
   text-align: center;
 }
 .table--selection {
   width: 99%;
+  table-layout: fixed;
+}
+
+.table--selection th, .table--selection td {
+  padding: 3px 5px;
 }
 
-.table--th--selection {
-  padding-left: 5px;
+.table--selection tr {
+  border-bottom: 2px solid #161719;
 }
 
 .table--td--selection {
-  padding: 0.25rem;
-  border: 1px solid white;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 12rem;
 }
 
 .table--th--selectionSmall {
-  width: 6rem;
+  width: 5.5rem;
 }
 
-.table--td--selectionSmall {
-  width: 6rem;
-}
+.table--selection--head {
+  background-color: #28282a;
+  border-top: 2px solid #161719;
+  color: #33b5e5;
+}

src/partials/module.html

@@ -14,37 +14,38 @@
         </div>
 
         <div ng-class="{statistics: true, 'show': ctrl.showStatistics}">
-            <label class="header--selection">{{ctrl.selectionId}}</label>
-            <label class="secondHeader--selection">Receiving</label>
-            <label class="noSending--selection" ng-show="ctrl.receiving.length == 0">No receiving Data</label>
+            <div class="header--selection">{{ctrl.selectionId}}</div>
+            <div class="secondHeader--selection">Receiving</div>
+            <div class="no-data--selection" ng-show="ctrl.receiving.length == 0">No receiving Data</div>
             <table class="table--selection" ng-show="ctrl.receiving.length > 0">
-                <tr>
-                    <th class="table--th--selection">Name</th>
-                    <th class="table--th--selection table--th--selectionSmall">Time</th>
-                    <th class="table--th--selection table--th--selectionSmall">Requests</th>
-                    <th class="table--th--selection table--th--selectionSmall">Error Rate</th>
+                <tr class="table--selection--head">
+                    <th>Name</th>
+                    <th class="table--th--selectionSmall">Time</th>
+                    <th class="table--th--selectionSmall">Requests</th>
+                    <th class="table--th--selectionSmall">Error Rate</th>
                 </tr>
                 <tr ng-repeat="node in ctrl.receiving">
                     <td class="table--td--selection">{{node.name}}</td>
-                    <td class="table--td--selection table--td--selectionSmall">{{node.responseTime}}</td>
-                    <td class="table--td--selection table--td--selectionSmall">{{node.rate}}</td>
-                    <td class="table--td--selection table--td--selectionSmall">{{node.error}}</td>
+                    <td class="table--td--selection">{{node.responseTime}}</td>
+                    <td class="table--td--selection">{{node.rate}}</td>
+                    <td class="table--td--selection">{{node.error}}</td>
                 </tr>
             </table>
-            <label class="secondHeader--selection">Sending</label>
-            <label class="noSending--selection" ng-show="ctrl.sending.length == 0">No sending Data</label>
+
+            <div class="secondHeader--selection">Sending</div>
+            <div class="no-data--selection" ng-show="ctrl.sending.length == 0">No sending Data</div>
             <table class="table--selection" ng-show="ctrl.sending.length>0">
-                <tr>
-                    <th class="table--th--selection">Name</th>
-                    <th class="table--th--selection table--th--selectionSmall">Time</th>
-                    <th class="table--th--selection table--th--selectionSmall">Requests</th>
-                    <th class="table--th--selection table--th--selectionSmall">Error Rate</th>
+                <tr class="table--selection--head">
+                    <th>Name</th>
+                    <th class="table--th--selectionSmall">Time</th>
+                    <th class="table--th--selectionSmall">Requests</th>
+                    <th class="table--th--selectionSmall">Error Rate</th>
                 </tr>
                 <tr ng-repeat="node in ctrl.sending">
                     <td class="table--td--selection">{{node.name}}</td>
-                    <td class="table--td--selection table--td--selectionSmall">{{node.responseTime}}</td>
-                    <td class="table--td--selection table--td--selectionSmall">{{node.rate}}</td>
-                    <td class="table--td--selection table--td--selectionSmall">{{node.error}}</td>
+                    <td class="table--td--selection">{{node.responseTime}}</td>
+                    <td class="table--td--selection">{{node.rate}}</td>
+                    <td class="table--td--selection">{{node.error}}</td>
                 </tr>
 
             </table>

src/service_dependency_graph_ctrl.ts

@@ -317,7 +317,7 @@ export class ServiceDependencyGraphCtrl extends MetricsPanelCtrl {
 				const actualEdge: EdgeSingular = edges[i];
 				const metrics: IGraphMetrics = actualEdge.data('metrics');
 				let { response_time, rate } = metrics;
-				let sendingCheck: boolean = actualEdge.source().data().id === this.selectionId;
+				let sendingCheck: boolean = actualEdge.source().id() === this.selectionId;
 				let node: NodeSingular;
 
 				if (sendingCheck) {