Skip to content

Commit bfda9c4

Browse files
sg00dwinsg00dwin
committed
Addition of truncate class to tile headers and when no deployments have started.
And add word-break to empty-dc and empty-rc Fixes #1175
1 parent 3f779bc commit bfda9c4

File tree

10 files changed

+60
-62
lines changed

10 files changed

+60
-62
lines changed

‎app/styles/_overview.less

+17-8
Original file line numberDiff line numberDiff line change
@@ -299,6 +299,8 @@
299299
.flex-wrap(@wrap: wrap);
300300
.flex-direction(@direction: column);
301301
overview-service {
302+
// default width needed to enable truncation on elements within
303+
width: 100%;
302304
&:nth-child(n+3) {
303305
margin-top: @service-group-vertical-margin;
304306
}
@@ -380,8 +382,10 @@
380382
.service-name {
381383
.h3();
382384
font-weight: @overview-font-weight;
383-
margin-top: 3px;
384-
margin-bottom: 3px;
385+
// minimum line-height to prevent descender clipping since they use truncate
386+
line-height: 1.2;
387+
margin-top: 2px;
388+
margin-bottom: 2px;
385389
.pficon {
386390
margin-right: 7px;
387391
vertical-align: -2px;
@@ -398,8 +402,10 @@
398402
.rc-header {
399403
.text-muted();
400404
padding: 5px 10px;
401-
// Prevent the content from overlapping the deployment shield
402-
margin-right: @shield-width-lg;
405+
&.rc-header-shield {
406+
// Prevent the content from overlapping the deployment shield
407+
margin-right: @shield-width-lg;
408+
}
403409
}
404410
image-names {
405411
// truncate long image names
@@ -570,7 +576,6 @@
570576
width: 50%;
571577
}
572578
.no-child-services-message, .no-deployments-message {
573-
.text-center();
574579
.text-muted();
575580
.well();
576581
margin-bottom: 0;
@@ -589,23 +594,27 @@
589594
}
590595
}
591596
.no-deployments-message {
592-
.flex(@columns: 1 0 0%); // the parent overview-service is where width with flex-basis is set.
597+
width: 100%;
593598
}
594599
.no-child-services-message {
595600
display: none;
596601
@media (min-width: @two-column-min-width) {
597602
.flex-display(@display: flex);
598603
.flex(@columns: 1 0 0%);
599604
.flex-direction(@direction: column);
605+
height: 100%;
600606
}
601607
}
602608
.empty-tile {
603-
padding: 50px;
609+
.text-center();
610+
padding: 50px 20px;
611+
.word-break();
604612
}
605613
.empty-dc {
606614
.text-center();
607615
.text-muted();
608-
padding: 0 50px 70px;
616+
padding: 0 20px 70px;
617+
.word-break();
609618
}
610619
@media (min-width: @screen-md-min) {
611620
.overview-services.single-alternate-service {

‎app/views/overview/_dc.html

+5-9
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<div class="overview-tile" ng-class="{ 'deployment-in-progress': inProgressDeployment }">
22
<ng-include src="'views/overview/_service-header.html'"></ng-include>
33
<div class="overview-tile-header">
4-
<div class="rc-header">
5-
<div>
4+
<div class="rc-header" ng-class="{ 'rc-header-shield' : activeReplicationController}">
5+
<div class="truncate">
66
Deployment Config
77
<a ng-href="{{deploymentConfig | navigateResourceURL}}">{{deploymentConfig.metadata.name}}</a>
88
<small class="overview-timestamp" ng-if="activeReplicationController && !inProgressDeployment">
@@ -43,8 +43,7 @@ <h2>No deployments.</h2>
4343
A new deployment will start automatically when
4444
<span ng-if="imageChangeTriggers.length === 1">
4545
an image is available for
46-
<a ng-href="{{urlForImageChangeTrigger(imageChangeTriggers[0], deploymentConfig)}}">
47-
{{imageChangeTriggers[0].imageChangeParams.from | imageObjectRef : deploymentConfig.metadata.namespace}}</a>.
46+
<a ng-href="{{urlForImageChangeTrigger(imageChangeTriggers[0], deploymentConfig)}}">{{imageChangeTriggers[0].imageChangeParams.from | imageObjectRef : deploymentConfig.metadata.namespace}}</a>.
4847
</span>
4948
<span ng-if="imageChangeParams.length > 1">
5049
one of the images for this deployment config changes.
@@ -63,11 +62,8 @@ <h2>No deployments.</h2>
6362
</div>
6463
</div>
6564
<div ng-if="!pipelinesForDC[deploymentConfig.metadata.name].length">
66-
<p>
67-
No deployments have started for
68-
<a ng-href="{{deploymentConfig | navigateResourceURL}}">{{deploymentConfig.metadata.name}}</a>.
69-
</p>
70-
65+
<p>No deployments have started for
66+
<a ng-href="{{deploymentConfig | navigateResourceURL}}">{{deploymentConfig.metadata.name}}</a>.</p>
7167
<button ng-if="'deploymentconfigs' | canI : 'update'" class="btn btn-primary" ng-click="startDeployment(deploymentConfig)">
7268
Start Deployment
7369
</button>

‎app/views/overview/_deployment.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<div class="overview-tile" ng-class="{ 'deployment-in-progress': inProgressDeployment }">
22
<ng-include src="'views/overview/_service-header.html'"></ng-include>
33
<div class="overview-tile-header">
4-
<div class="rc-header">
5-
<div>
4+
<div class="rc-header" ng-class="{ 'rc-header-shield' : latestReplicaSet && latestRevision && !inProgressDeployment}">
5+
<div class="truncate">
66
Deployment
77
<a ng-href="{{deployment | navigateResourceURL}}">{{deploymentName}}</a>
88
<small class="overview-timestamp" ng-if="latestReplicaSet">

‎app/views/overview/_pod.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="overview-tile" ng-if="pod.kind === 'Pod'">
22
<ng-include src="'views/overview/_service-header.html'"></ng-include>
33
<div class="rc-header"> <!-- TODO may want different treatment for a pod-name? -->
4-
<div>
4+
<div class="truncate">
55
Pod
66
<a ng-href="{{pod | navigateResourceURL}}">{{pod.metadata.name}}</a>
77
<small class="overview-timestamp">

‎app/views/overview/_service-group.html

+4-5
Original file line numberDiff line numberDiff line change
@@ -67,14 +67,13 @@ <h3 class="route-title truncate">
6767
ng-repeat="service in childServices">
6868
</overview-service>
6969

70-
<div flex column ng-if="alternateServices.length === 0 && childServices.length === 0 && service" class="no-child-services-block">
70+
<div column ng-if="alternateServices.length === 0 && childServices.length === 0 && service" class="no-child-services-block">
7171
<div class="no-child-services-message">
7272
<div class="empty-tile">
7373
<h2>No grouped services.</h2>
74-
<p>
75-
No services are grouped with <a ng-href="{{service | navigateResourceURL}}">{{service.metadata.name}}</a>.
76-
<span ng-if="(services | hashSize) > 1 && ('services' | canI : 'update')">Add a service to group them together.</span>
77-
</p>
74+
<p>No services are grouped with <a ng-href="{{service | navigateResourceURL}}">{{service.metadata.name}}</a>.
75+
<span ng-if="(services | hashSize) > 1 && ('services' | canI : 'update')">Add a service to group them together.</span>
76+
</p>
7877
<div ng-if="(services | hashSize) > 1 && ('services' | canI : 'update')">
7978
<button class="btn btn-primary" ng-click="linkService()">
8079
Group Service

‎app/views/overview/_service-header.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div row class="service-title" ng-if="service">
2-
<div class="service-name">
2+
<div class="service-name truncate">
33
<span class="pficon pficon-service" aria-hidden="true" title="Service"></span>
44
<span class="sr-only">Service</span>
55
<a ng-href="{{service | navigateResourceURL}}">{{service.metadata.name}}</a>

‎app/views/overview/_service.html

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
<div ng-if="!tileCount" class="no-deployments-block">
2-
<div column class="no-deployments-message">
2+
<div column class="no-deployments-message overview-tile">
33
<ng-include src="'views/overview/_service-header.html'"></ng-include>
44
<div class="empty-tile">
55
<h2>No deployments or pods.</h2>
66
<p>
7-
Service
8-
<a ng-href="{{service | navigateResourceURL}}">{{service.metadata.name}}</a>
7+
Service <a ng-href="{{service | navigateResourceURL}}">{{service.metadata.name}}</a>
98
does not route to any deployments or pods.
109
</p>
1110
</div>

‎app/views/overview/_set.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<ng-include src="'views/overview/_service-header.html'"></ng-include>
33
<div class="overview-tile-header">
44
<div class="rc-header">
5-
<div>
5+
<div class="truncate">
66
{{set.kind | humanizeKind : true}}
77
<a ng-href="{{set | navigateResourceURL}}">{{set.metadata.name}}</a>
88
<small class="overview-timestamp">

‎dist/scripts/templates.js

+14-19
Original file line numberDiff line numberDiff line change
@@ -11362,8 +11362,8 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
1136211362
"<div class=\"overview-tile\" ng-class=\"{ 'deployment-in-progress': inProgressDeployment }\">\n" +
1136311363
"<ng-include src=\"'views/overview/_service-header.html'\"></ng-include>\n" +
1136411364
"<div class=\"overview-tile-header\">\n" +
11365-
"<div class=\"rc-header\">\n" +
11366-
"<div>\n" +
11365+
"<div class=\"rc-header\" ng-class=\"{ 'rc-header-shield' : activeReplicationController}\">\n" +
11366+
"<div class=\"truncate\">\n" +
1136711367
"Deployment Config\n" +
1136811368
"<a ng-href=\"{{deploymentConfig | navigateResourceURL}}\">{{deploymentConfig.metadata.name}}</a>\n" +
1136911369
"<small class=\"overview-timestamp\" ng-if=\"activeReplicationController && !inProgressDeployment\">\n" +
@@ -11401,8 +11401,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
1140111401
"A new deployment will start automatically when\n" +
1140211402
"<span ng-if=\"imageChangeTriggers.length === 1\">\n" +
1140311403
"an image is available for\n" +
11404-
"<a ng-href=\"{{urlForImageChangeTrigger(imageChangeTriggers[0], deploymentConfig)}}\">\n" +
11405-
"{{imageChangeTriggers[0].imageChangeParams.from | imageObjectRef : deploymentConfig.metadata.namespace}}</a>.\n" +
11404+
"<a ng-href=\"{{urlForImageChangeTrigger(imageChangeTriggers[0], deploymentConfig)}}\">{{imageChangeTriggers[0].imageChangeParams.from | imageObjectRef : deploymentConfig.metadata.namespace}}</a>.\n" +
1140611405
"</span>\n" +
1140711406
"<span ng-if=\"imageChangeParams.length > 1\">\n" +
1140811407
"one of the images for this deployment config changes.\n" +
@@ -11421,10 +11420,8 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
1142111420
"</div>\n" +
1142211421
"</div>\n" +
1142311422
"<div ng-if=\"!pipelinesForDC[deploymentConfig.metadata.name].length\">\n" +
11424-
"<p>\n" +
11425-
"No deployments have started for\n" +
11426-
"<a ng-href=\"{{deploymentConfig | navigateResourceURL}}\">{{deploymentConfig.metadata.name}}</a>.\n" +
11427-
"</p>\n" +
11423+
"<p>No deployments have started for\n" +
11424+
"<a ng-href=\"{{deploymentConfig | navigateResourceURL}}\">{{deploymentConfig.metadata.name}}</a>.</p>\n" +
1142811425
"<button ng-if=\"'deploymentconfigs' | canI : 'update'\" class=\"btn btn-primary\" ng-click=\"startDeployment(deploymentConfig)\">\n" +
1142911426
"Start Deployment\n" +
1143011427
"</button>\n" +
@@ -11493,8 +11490,8 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
1149311490
"<div class=\"overview-tile\" ng-class=\"{ 'deployment-in-progress': inProgressDeployment }\">\n" +
1149411491
"<ng-include src=\"'views/overview/_service-header.html'\"></ng-include>\n" +
1149511492
"<div class=\"overview-tile-header\">\n" +
11496-
"<div class=\"rc-header\">\n" +
11497-
"<div>\n" +
11493+
"<div class=\"rc-header\" ng-class=\"{ 'rc-header-shield' : latestReplicaSet && latestRevision && !inProgressDeployment}\">\n" +
11494+
"<div class=\"truncate\">\n" +
1149811495
"Deployment\n" +
1149911496
"<a ng-href=\"{{deployment | navigateResourceURL}}\">{{deploymentName}}</a>\n" +
1150011497
"<small class=\"overview-timestamp\" ng-if=\"latestReplicaSet\">\n" +
@@ -11564,7 +11561,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
1156411561
"<div class=\"overview-tile\" ng-if=\"pod.kind === 'Pod'\">\n" +
1156511562
"<ng-include src=\"'views/overview/_service-header.html'\"></ng-include>\n" +
1156611563
"<div class=\"rc-header\"> \n" +
11567-
"<div>\n" +
11564+
"<div class=\"truncate\">\n" +
1156811565
"Pod\n" +
1156911566
"<a ng-href=\"{{pod | navigateResourceURL}}\">{{pod.metadata.name}}</a>\n" +
1157011567
"<small class=\"overview-timestamp\">\n" +
@@ -11649,12 +11646,11 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
1164911646
"</overview-service>\n" +
1165011647
"<overview-service ng-init=\"isChild = true\" ng-repeat=\"service in childServices\">\n" +
1165111648
"</overview-service>\n" +
11652-
"<div flex column ng-if=\"alternateServices.length === 0 && childServices.length === 0 && service\" class=\"no-child-services-block\">\n" +
11649+
"<div column ng-if=\"alternateServices.length === 0 && childServices.length === 0 && service\" class=\"no-child-services-block\">\n" +
1165311650
"<div class=\"no-child-services-message\">\n" +
1165411651
"<div class=\"empty-tile\">\n" +
1165511652
"<h2>No grouped services.</h2>\n" +
11656-
"<p>\n" +
11657-
"No services are grouped with <a ng-href=\"{{service | navigateResourceURL}}\">{{service.metadata.name}}</a>.\n" +
11653+
"<p>No services are grouped with <a ng-href=\"{{service | navigateResourceURL}}\">{{service.metadata.name}}</a>.\n" +
1165811654
"<span ng-if=\"(services | hashSize) > 1 && ('services' | canI : 'update')\">Add a service to group them together.</span>\n" +
1165911655
"</p>\n" +
1166011656
"<div ng-if=\"(services | hashSize) > 1 && ('services' | canI : 'update')\">\n" +
@@ -11674,7 +11670,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
1167411670

1167511671
$templateCache.put('views/overview/_service-header.html',
1167611672
"<div row class=\"service-title\" ng-if=\"service\">\n" +
11677-
"<div class=\"service-name\">\n" +
11673+
"<div class=\"service-name truncate\">\n" +
1167811674
"<span class=\"pficon pficon-service\" aria-hidden=\"true\" title=\"Service\"></span>\n" +
1167911675
"<span class=\"sr-only\">Service</span>\n" +
1168011676
"<a ng-href=\"{{service | navigateResourceURL}}\">{{service.metadata.name}}</a>\n" +
@@ -11702,13 +11698,12 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
1170211698

1170311699
$templateCache.put('views/overview/_service.html',
1170411700
"<div ng-if=\"!tileCount\" class=\"no-deployments-block\">\n" +
11705-
"<div column class=\"no-deployments-message\">\n" +
11701+
"<div column class=\"no-deployments-message overview-tile\">\n" +
1170611702
"<ng-include src=\"'views/overview/_service-header.html'\"></ng-include>\n" +
1170711703
"<div class=\"empty-tile\">\n" +
1170811704
"<h2>No deployments or pods.</h2>\n" +
1170911705
"<p>\n" +
11710-
"Service\n" +
11711-
"<a ng-href=\"{{service | navigateResourceURL}}\">{{service.metadata.name}}</a>\n" +
11706+
"Service <a ng-href=\"{{service | navigateResourceURL}}\">{{service.metadata.name}}</a>\n" +
1171211707
"does not route to any deployments or pods.\n" +
1171311708
"</p>\n" +
1171411709
"</div>\n" +
@@ -11755,7 +11750,7 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
1175511750
"<ng-include src=\"'views/overview/_service-header.html'\"></ng-include>\n" +
1175611751
"<div class=\"overview-tile-header\">\n" +
1175711752
"<div class=\"rc-header\">\n" +
11758-
"<div>\n" +
11753+
"<div class=\"truncate\">\n" +
1175911754
"{{set.kind | humanizeKind : true}}\n" +
1176011755
"<a ng-href=\"{{set | navigateResourceURL}}\">{{set.metadata.name}}</a>\n" +
1176111756
"<small class=\"overview-timestamp\">\n" +

0 commit comments

Comments
 (0)