Skip to content

Commit 8e40552

Browse files
author
OpenShift Bot
authored
Merge pull request #1035 from rhamilto/issue-1023
Merged by openshift-bot
2 parents cfc61cd + 33af1dc commit 8e40552

18 files changed

+123
-113
lines changed

‎app/scripts/directives/statusIcon.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,7 @@ angular.module('openshiftConsole')
88
templateUrl: 'views/directives/_status-icon.html',
99
scope: {
1010
status: '=',
11-
disableAnimation: "@",
12-
fixedWidth: "=?"
11+
disableAnimation: "@"
1312
},
1413
link: function($scope, $elem, $attrs) {
1514
$scope.spinning = !angular.isDefined($attrs.disableAnimation);

‎app/styles/_core.less

+30-12
Original file line numberDiff line numberDiff line change
@@ -190,9 +190,6 @@ mark {
190190
}
191191
.last-status {
192192
margin-right: 5px;
193-
.status-icon {
194-
width: 20px;
195-
}
196193
}
197194
// Indent icon width to align with text above.
198195
.last-timestamp {
@@ -1040,12 +1037,39 @@ a.disabled-link {
10401037

10411038
.status {
10421039
min-width: 130px;
1043-
.status-icon {
1044-
margin-right: 6px;
1045-
width: 13px;
1040+
}
1041+
1042+
status-icon {
1043+
// when status-icon is child of [row], add margin-right to the icon
1044+
// because the space resulting from display: inline-block collapses
1045+
[row] > & {
1046+
margin-right: 3px;
1047+
}
1048+
// so that status-icons have a fixed width (like .fa-fw, but better sized)
1049+
// this ensures when the icons change, the text that follows doesn't shift
1050+
.fa, .pficon {
10461051
text-align: center;
1052+
width: 1.230769em; // ~16px at 13px font size
1053+
.latest-build-status & {
1054+
width: 20px;
1055+
}
1056+
}
1057+
// fixes wobble that occurs when status-icons utilize fa-spin (see https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment-249591495)
1058+
.fa-spin {
1059+
font-size: 14px;
1060+
line-height: normal;
1061+
}
1062+
// so that spinners match width of .fa/.pficon (16px or 20px)
1063+
.spinner.spinner-inline {
1064+
margin-left: 0.153846em; // ~2px at 13px font size
1065+
margin-right: 0.153846em; // ~2px at 13px font size
1066+
.latest-build-status & {
1067+
margin-left: 4px;
1068+
margin-right: 4px;
1069+
}
10471070
}
10481071
}
1072+
10491073
pre.clipped {
10501074
display: inline-block;
10511075
margin-top: 10px;
@@ -1185,9 +1209,3 @@ copy-to-clipboard .input-group.limit-width {
11851209
width: 100%;
11861210
}
11871211
}
1188-
1189-
// fixes wobble that occurs when status-icons utilize fa-spin (see https://github.com/FortAwesome/Font-Awesome/issues/671#issuecomment-249591495)
1190-
.status-icon > .fa-spin {
1191-
font-size: 14px;
1192-
line-height: normal;
1193-
}

‎app/styles/_pipeline.less

-7
Original file line numberDiff line numberDiff line change
@@ -229,13 +229,6 @@
229229
.small();
230230
}
231231

232-
.build-phase .status-icon {
233-
margin-right: 2px;
234-
.spinner.spinner-inline {
235-
margin-right: 0;
236-
}
237-
}
238-
239232
.build-summary, .stage {
240233
.text-center();
241234
}

‎app/views/browse/build-config.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@ <h2>No builds.</h2>
200200
</td>
201201
<td data-title="Status">
202202
<div row class="status">
203-
<status-icon status="build.status.phase" disable-animation fixed-width="true"></status-icon>
203+
<status-icon status="build.status.phase" disable-animation></status-icon>
204204
<span ng-if="!build.status.reason || build.status.phase === 'Cancelled'">{{build.status.phase}}</span>
205205
<span ng-if="build.status.reason && build.status.phase !== 'Cancelled'">{{build.status.reason | sentenceCase}}</span>
206206
</div>

‎app/views/browse/deployment-config.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ <h1>
155155
</td>
156156
<td data-title="Status">
157157
<div row class="status">
158-
<status-icon status="deployment | deploymentStatus" disable-animation fixed-width="true"></status-icon>
158+
<status-icon status="deployment | deploymentStatus" disable-animation></status-icon>
159159
<span flex>
160160
{{deployment | deploymentStatus}}<span ng-if="(deployment | deploymentStatus) == 'Active' || (deployment | deploymentStatus) == 'Running'">,
161161
<span ng-if="deployment.spec.replicas !== deployment.status.replicas">{{deployment.status.replicas}}/</span>{{deployment.spec.replicas}} replica<span ng-if="deployment.spec.replicas != 1">s</span></span>

‎app/views/browse/route.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ <h1>
5858
<span ng-if="!route.status.ingress">
5959
{{route | routeLabel : null : true}}
6060
<span data-toggle="popover" data-trigger="hover" data-content="The route is not accepting traffic yet because it has not been admitted by a router." style="cursor: help; padding-left: 5px;">
61-
<status-icon status="'Pending'" disable-animation></status-icon>
61+
<status-icon status="'Pending'"></status-icon>
6262
<span class="sr-only">Pending</span>
6363
</span>
6464
</span>

‎app/views/browse/routes.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ <h1>
6161
{{route | routeLabel}}
6262
</span>
6363
<span ng-if="!route.status.ingress" data-toggle="popover" data-trigger="hover" data-content="The route is not accepting traffic yet because it has not been admitted by a router." style="cursor: help; padding-left: 5px;">
64-
<status-icon status="'Pending'" disable-animation></status-icon>
64+
<status-icon status="'Pending'"></status-icon>
6565
<span class="sr-only">Pending</span>
6666
</span>
6767
</td>

‎app/views/builds.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ <h1>
8383
<td data-title="Status">
8484
<div row class="status">
8585
<!-- <build-status build="build"></build-status> -->
86-
<status-icon status="latestBuild.status.phase" disable-animation fixed-width="true"></status-icon>
86+
<status-icon status="latestBuild.status.phase" disable-animation></status-icon>
8787
<span ng-if="!latestBuild.status.reason || latestBuild.status.phase === 'Cancelled'">{{latestBuild.status.phase}}</span>
8888
<span ng-if="latestBuild.status.reason && latestBuild.status.phase !== 'Cancelled'">{{latestBuild.status.reason | sentenceCase}}</span>
8989
</div>

‎app/views/deployments.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ <h3 ng-if="(deployments | hashSize) || (replicaSets | hashSize)">Deployment Conf
7474
</td>
7575
<td data-title="Status">
7676
<div row class="status">
77-
<status-icon status="replicationController | deploymentStatus" disable-animation fixed-width="true"></status-icon>
77+
<status-icon status="replicationController | deploymentStatus" disable-animation></status-icon>
7878
<span flex>
7979
{{replicationController | deploymentStatus}}<span ng-if="(replicationController | deploymentStatus) == 'Active' || (replicationController | deploymentStatus) == 'Running'">,
8080
<span ng-if="replicationController.spec.replicas !== replicationController.status.replicas">{{replicationController.status.replicas}}/</span>{{replicationController.spec.replicas}} replica<span ng-if="replicationController.spec.replicas != 1">s</span></span>

‎app/views/directives/_build-pipeline-expanded.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@
77
<span class="status-icon" ng-class="build.status.phase">
88
<span ng-switch="build.status.phase" class="hide-ng-leave">
99
<span ng-switch-when="Complete" aria-hidden="true">
10-
<i class="fa fa-check-circle"></i>
10+
<i class="fa fa-check-circle fa-fw"></i>
1111
</span>
1212
<span ng-switch-when="Failed" aria-hidden="true">
13-
<i class="fa fa-times-circle"></i>
13+
<i class="fa fa-times-circle fa-fw"></i>
1414
</span>
1515
<span ng-switch-default>
1616
<status-icon status="build.status.phase"></status-icon>

‎app/views/directives/_status-icon.html

+28-28
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
11
<span ng-switch="status" class="hide-ng-leave status-icon">
2-
<span ng-switch-when="Cancelled" class="fa fa-ban text-muted" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
3-
<span ng-switch-when="Complete" class="fa fa-check text-success" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
4-
<span ng-switch-when="Completed" class="fa fa-check text-success" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
5-
<span ng-switch-when="Active" class="fa fa-refresh" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
6-
<span ng-switch-when="Error" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
7-
<span ng-switch-when="Failed" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
8-
<span ng-switch-when="New" class="spinner spinner-xs spinner-inline" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
9-
<span ng-switch-when="Pending" class="spinner spinner-xs spinner-inline" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
10-
<span ng-switch-when="Running" class="fa fa-refresh" aria-hidden="true" ng-class="{'fa-spin' : spinning, 'fa-fw': fixedWidth}"></span>
11-
<span ng-switch-when="Succeeded" class="fa fa-check text-success" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
12-
<span ng-switch-when="Bound" class="fa fa-check text-success" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
13-
<span ng-switch-when="Terminating" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
14-
<span ng-switch-when="Terminated" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
15-
<span ng-switch-when="Unknown" class="fa fa-question text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
2+
<span ng-switch-when="Cancelled" class="fa fa-ban text-muted" aria-hidden="true"></span>
3+
<span ng-switch-when="Complete" class="fa fa-check text-success" aria-hidden="true"></span>
4+
<span ng-switch-when="Completed" class="fa fa-check text-success" aria-hidden="true"></span>
5+
<span ng-switch-when="Active" class="fa fa-refresh" aria-hidden="true"></span>
6+
<span ng-switch-when="Error" class="fa fa-times text-danger" aria-hidden="true"></span>
7+
<span ng-switch-when="Failed" class="fa fa-times text-danger" aria-hidden="true"></span>
8+
<span ng-switch-when="New" class="spinner spinner-xs spinner-inline" aria-hidden="true"></span>
9+
<span ng-switch-when="Pending" class="spinner spinner-xs spinner-inline" aria-hidden="true"></span>
10+
<span ng-switch-when="Running" class="fa fa-refresh" aria-hidden="true" ng-class="{'fa-spin' : spinning}"></span>
11+
<span ng-switch-when="Succeeded" class="fa fa-check text-success" aria-hidden="true"></span>
12+
<span ng-switch-when="Bound" class="fa fa-check text-success" aria-hidden="true"></span>
13+
<span ng-switch-when="Terminating" class="fa fa-times text-danger" aria-hidden="true"></span>
14+
<span ng-switch-when="Terminated" class="fa fa-times text-danger" aria-hidden="true"></span>
15+
<span ng-switch-when="Unknown" class="fa fa-question text-danger" aria-hidden="true"></span>
1616

1717
<!-- Container Runtime States -->
18-
<span ng-switch-when="ContainerCreating" class="spinner spinner-xs spinner-inline" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
19-
<span ng-switch-when="CrashLoopBackOff" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
20-
<span ng-switch-when="ImagePullBackOff" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
21-
<span ng-switch-when="ImageInspectError" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
22-
<span ng-switch-when="ErrImagePull" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
23-
<span ng-switch-when="ErrImageNeverPull" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
24-
<span ng-switch-when="no matching container" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
25-
<span ng-switch-when="RegistryUnavailable" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
26-
<span ng-switch-when="RunContainerError" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
27-
<span ng-switch-when="KillContainerError" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
28-
<span ng-switch-when="VerifyNonRootError" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
29-
<span ng-switch-when="SetupNetworkError" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
30-
<span ng-switch-when="TeardownNetworkError" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
31-
<span ng-switch-when="DeadlineExceeded" class="fa fa-times text-danger" aria-hidden="true" ng-class="{'fa-fw': fixedWidth}"></span>
18+
<span ng-switch-when="ContainerCreating" class="spinner spinner-xs spinner-inline" aria-hidden="true"></span>
19+
<span ng-switch-when="CrashLoopBackOff" class="fa fa-times text-danger" aria-hidden="true"></span>
20+
<span ng-switch-when="ImagePullBackOff" class="fa fa-times text-danger" aria-hidden="true"></span>
21+
<span ng-switch-when="ImageInspectError" class="fa fa-times text-danger" aria-hidden="true"></span>
22+
<span ng-switch-when="ErrImagePull" class="fa fa-times text-danger" aria-hidden="true"></span>
23+
<span ng-switch-when="ErrImageNeverPull" class="fa fa-times text-danger" aria-hidden="true"></span>
24+
<span ng-switch-when="no matching container" class="fa fa-times text-danger" aria-hidden="true"></span>
25+
<span ng-switch-when="RegistryUnavailable" class="fa fa-times text-danger" aria-hidden="true"></span>
26+
<span ng-switch-when="RunContainerError" class="fa fa-times text-danger" aria-hidden="true"></span>
27+
<span ng-switch-when="KillContainerError" class="fa fa-times text-danger" aria-hidden="true"></span>
28+
<span ng-switch-when="VerifyNonRootError" class="fa fa-times text-danger" aria-hidden="true"></span>
29+
<span ng-switch-when="SetupNetworkError" class="fa fa-times text-danger" aria-hidden="true"></span>
30+
<span ng-switch-when="TeardownNetworkError" class="fa fa-times text-danger" aria-hidden="true"></span>
31+
<span ng-switch-when="DeadlineExceeded" class="fa fa-times text-danger" aria-hidden="true"></span>
3232
</span>

‎app/views/directives/build-status.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<status-icon status="build.status.phase" disable-animation fixed-width="true"></status-icon>
1+
<status-icon status="build.status.phase" disable-animation></status-icon>
22
<span ng-if="!build.status.reason || build.status.phase === 'Cancelled'">{{build.status.phase}}</span>
33
<span ng-if="build.status.reason && build.status.phase !== 'Cancelled'">{{build.status.reason | sentenceCase}}</span><span
44
ng-switch="build.status.phase" class="hide-ng-leave" ng-if="build.status.startTimestamp"><span

‎app/views/directives/traffic-table.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
{{routes[routeName] | routeLabel}}
4545
</span>
4646
<span ng-if="!routes[routeName].status.ingress" data-toggle="popover" data-trigger="hover" data-content="The route is not accepting traffic yet because it has not been admitted by a router." style="cursor: help; padding-left: 5px;">
47-
<status-icon status="'Pending'" disable-animation></status-icon>
47+
<status-icon status="'Pending'"></status-icon>
4848
<span class="sr-only">Pending</span>
4949
</span>
5050
</td>
@@ -75,4 +75,4 @@
7575
</td>
7676
</tr>
7777
</tbody>
78-
</table>
78+
</table>

‎app/views/monitoring.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ <h2>Pods</h2>
9090
<small>created <span am-time-ago="pod.metadata.creationTimestamp"></span></small>
9191
</div>
9292
<div class="list-group-item-text">
93-
<status-icon status="pod | podStatus" disable-animation fixed-width="true"></status-icon>
93+
<status-icon status="pod | podStatus" disable-animation></status-icon>
9494
{{pod | podStatus | sentenceCase}}
9595
</div>
9696
</div>
@@ -180,7 +180,7 @@ <h2>Deployments</h2>
180180
<small>created <span am-time-ago="replicationController.metadata.creationTimestamp"></span></small>
181181
</div>
182182
<div class="list-group-item-text">
183-
<status-icon status="replicationController | deploymentStatus" disable-animation fixed-width="true"></status-icon>
183+
<status-icon status="replicationController | deploymentStatus" disable-animation></status-icon>
184184
{{replicationController | deploymentStatus | sentenceCase}}<span ng-if="(replicationController | deploymentStatus) === 'Active'">, {{replicationController.status.replicas}} replica<span ng-if="replicationController.status.replicas !== 1">s</span></span>
185185
</div>
186186
</div>

‎app/views/overview/_dc.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ <h2>No deployments.</h2>
111111

112112
</div>
113113
<div ng-if="orderedReplicationControllers.length === 1" class="deployment-status-msg">
114-
<status-icon status="orderedReplicationControllers[0] | deploymentStatus" class="mar-right-xs"></status-icon>
114+
<status-icon status="orderedReplicationControllers[0] | deploymentStatus"></status-icon>
115115
Deployment&nbsp;#{{orderedReplicationControllers[0] | annotation : 'deploymentVersion'}}
116116
{{orderedReplicationControllers[0] | deploymentStatus | lowercase}}
117117
</div>

‎dist/scripts/scripts.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -11731,8 +11731,7 @@ restrict:"E",
1173111731
templateUrl:"views/directives/_status-icon.html",
1173211732
scope:{
1173311733
status:"=",
11734-
disableAnimation:"@",
11735-
fixedWidth:"=?"
11734+
disableAnimation:"@"
1173611735
},
1173711736
link:function(a, b, c) {
1173811737
a.spinning = !angular.isDefined(c.disableAnimation);

0 commit comments

Comments
 (0)