You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@trafficcontrol.apache.org by mi...@apache.org on 2018/10/04 19:53:34 UTC
[trafficcontrol] 07/14: Aligned the chart with the ds table and
fixed resizing issues
This is an automated email from the ASF dual-hosted git repository.
mitchell852 pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/trafficcontrol.git
commit c314331d475544e9fe794f7deb9c1e7ab896b886
Author: cgillo000 <ch...@cable.comcast.com>
AuthorDate: Thu Sep 20 10:17:11 2018 -0600
Aligned the chart with the ds table and fixed resizing issues
---
.../WidgetDeliveryServicesController.js | 5 +-
.../deliveryServices/_widget.deliveryServices.scss | 32 ++++++++-----
.../widget.deliveryServices.tpl.html | 54 +++++++++-------------
3 files changed, 45 insertions(+), 46 deletions(-)
diff --git a/traffic_portal/app/src/common/modules/widget/deliveryServices/WidgetDeliveryServicesController.js b/traffic_portal/app/src/common/modules/widget/deliveryServices/WidgetDeliveryServicesController.js
index bf518e3..6e177b9 100644
--- a/traffic_portal/app/src/common/modules/widget/deliveryServices/WidgetDeliveryServicesController.js
+++ b/traffic_portal/app/src/common/modules/widget/deliveryServices/WidgetDeliveryServicesController.js
@@ -145,11 +145,10 @@ var WidgetDeliveryServicesController = function ($scope, $timeout, $filter, $q,
type: 'time',
time: {
displayFormats: {
- minute: 'h:mm'
+ hour: 'HH:mm'
},
- parser: 'h:mm',
tooltipFormat: 'll HH:mm'
- }
+ },
}, {
position: 'top',
ticks: {
diff --git a/traffic_portal/app/src/common/modules/widget/deliveryServices/_widget.deliveryServices.scss b/traffic_portal/app/src/common/modules/widget/deliveryServices/_widget.deliveryServices.scss
index 55b5f40..2673dd4 100644
--- a/traffic_portal/app/src/common/modules/widget/deliveryServices/_widget.deliveryServices.scss
+++ b/traffic_portal/app/src/common/modules/widget/deliveryServices/_widget.deliveryServices.scss
@@ -28,16 +28,18 @@
a:hover {
background-color: #F1FAF8;
}
- .widgetTable {
- width: 100%;
- max-width: 100%;
+ .widgetTableContainer {
+ margin-bottom:16px;
+ }
+ .whitespace {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- margin-bottom: 5px;
- .thead {
- vertical-align: bottom;
- }
+ }
+ .widgetTable {
+ color: #73879C;
+ font-family: 'Lato', sans-serif;
+ font-size: 13px;
}
.delivery-services-health {
height: 52px;
@@ -57,23 +59,29 @@
}
.delivery-services-search-form {
float: right;
- width: 250px;
+ width: 200px;
margin-bottom: 10px;
}
}
-
+.dsWidgetPagination {
+ height: 60px;
+}
.dsWidgetMessages {
margin-left: 62px;
- margin-bottom: 62px;
+ margin-bottom: 56px;
}
-
.dsWidgetButtonAlignFix {
margin-right: 16px;
}
.dsWidgetGray {
color: #efefef;
}
-
+.dsWidgetGreen {
+ color: #32CD32;
+}
+.dsmin {
+ min-width: 422px;
+}
#deliveryServicesLoadingContainer {
height: 555px;
background-color: transparent;
diff --git a/traffic_portal/app/src/common/modules/widget/deliveryServices/widget.deliveryServices.tpl.html b/traffic_portal/app/src/common/modules/widget/deliveryServices/widget.deliveryServices.tpl.html
index 79ee73d..7b95e71 100644
--- a/traffic_portal/app/src/common/modules/widget/deliveryServices/widget.deliveryServices.tpl.html
+++ b/traffic_portal/app/src/common/modules/widget/deliveryServices/widget.deliveryServices.tpl.html
@@ -23,36 +23,9 @@ under the License.
</div>
<div class="x_content">
<div class="row">
- <div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
+ <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 dsmin">
<div id="delivery-services-outer-container">
- <div id="deliveryServicesContainer">
- <div class="alert alert-info" ng-show="(deliveryServices | filter:search:strict).length == 0">
- No matching delivery services
- </div>
- <div class="list-group">
- <a class="delivery-services-health list-group-item"
- ng-repeat="ds in deliveryServices | filter:search:strict | offsetFilter:(currentDeliveryServicesPage-1)*deliveryServicesPerPage | limitTo:deliveryServicesPerPage track by $index"
- ng-click="getChartData(ds, ds.idx)">
- <div class="row">
- <table class="delivery-services-table widgetTable">
- <tbody>
- <tr>
- <td class="col-lg-9 col-md-9 col-sm-12" style="width:70%;">{{ds.displayName}}
- <small>({{ds.xmlId}})<br>{{ds.tenant}}</small>
- </td>
- <td class="col-lg-2 col-md-2 col-sm-12" style="width:30%;">{{ds.type}}</td>
- <td class="col-lg-1 col-md-1 col-sm-12" style="width:10%;"><i
- class="fa fa-check" ng-show="ds.idx == selectedIndex"></i><i
- class="fa fa-square dsWidgetGray" ng-show="ds.idx != selectedIndex"></i>
- </td>
- </tr>
- </tbody>
- </table>
- </div>
- </a>
- </div>
- </div>
- <div>
+ <div class="dsWidgetPagination">
<div ng-show="(deliveryServices | filter:search:strict).length > 0">
<uib-pagination class="delivery-services-pagination pagination-md" boundary-links="true"
max-size="2" total-items="(deliveryServices | filter:search:strict).length"
@@ -68,9 +41,28 @@ under the License.
</span>
</div>
</div>
+ <div id="deliveryServicesContainer">
+ <div class="alert alert-info" ng-show="(deliveryServices | filter:search:strict).length == 0">
+ No matching delivery services
+ </div>
+ <div class="widgetTableContainer">
+ <a class="delivery-services-health list-group-item widgetTable"
+ ng-repeat="ds in deliveryServices | filter:search:strict | offsetFilter:(currentDeliveryServicesPage-1)*deliveryServicesPerPage | limitTo:deliveryServicesPerPage track by $index"
+ ng-click="getChartData(ds, ds.idx)">
+ <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 whitespace">{{ds.displayName}}
+ <small>({{ds.xmlId}})<br>{{ds.tenant}}</small>
+ </div>
+ <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 whitespace">{{ds.type}}</div>
+ <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 whitespace">
+ <i class="fa fa-check pull-right dsWidgetGreen" ng-show="ds.idx == selectedIndex"></i>
+ <i class="fa fa-square pull-right dsWidgetGray" ng-show="ds.idx != selectedIndex"></i>
+ </div>
+ </a>
+ </div>
+ </div>
</div>
</div>
- <div class="col-lg-8 col-md-6 col-sm-6 col-xs-12">
+ <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<div ng-show="!isRequested">Select a Delivery Service to view bandwidth chart.</div>
<div class="alert alert-info" ng-show="isLoading">Loading data
for {{selectedDeliveryService.displayName}}</div>
@@ -83,7 +75,7 @@ under the License.
class="fa fa-bar-chart"></i></button>
</div>
</div>
- <div style="position: relative; height: 50vh">
+ <div style="position: relative; height: 540px">
<canvas id="line" class="chart chart-line" chart-data="dsChart.data"
chart-labels="dsChart.labels" chart-series="dsChart.series" chart-options="dsChart.options">
</canvas>