Skip to content

Improve monitoring page collapsed rows #1812

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 19, 2017
+61 −28
Merged

Improve monitoring page collapsed rows #1812

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions app/scripts/controllers/monitoring.js
View file
Original file line number Diff line number Diff line change
@@ -266,12 +266,13 @@ angular.module('openshiftConsole')
}
};

$scope.viewPodsForReplicaSet = function(replicaSet) {
if (_.isEmpty($scope.podsByOwnerUID[replicaSet.metadata.uid])) {
$scope.viewPodsForSet = function(set) {
var pods = _.get($scope, ['podsByOwnerUID', set.metadata.uid], []);
if (_.isEmpty(pods)) {
return;
}

Navigate.toPodsForDeployment(replicaSet);
Navigate.toPodsForDeployment(set, pods);
};

ProjectsService
20 changes: 10 additions & 10 deletions app/views/directives/build-status.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<status-icon status="build.status.phase" disable-animation></status-icon>
<span ng-if="!build.status.reason || build.status.phase === 'Cancelled'">{{build.status.phase}}</span><span
ng-if="build.status.reason && build.status.phase !== 'Cancelled'">{{build.status.reason | sentenceCase}}</span><span
ng-switch="build.status.phase" class="hide-ng-leave" ng-if="build.status.startTimestamp"><span
ng-switch-when="Complete">, ran for {{build.status.startTimestamp | timeOnlyDurationFromTimestamps : build.status.completionTimestamp}}</span><span
ng-switch-when="Failed">, ran for {{build.status.startTimestamp | timeOnlyDurationFromTimestamps : build.status.completionTimestamp}}</span><span
ng-switch-when="Cancelled"> after {{build.status.startTimestamp | timeOnlyDurationFromTimestamps : build.status.completionTimestamp}}</span><span
ng-switch-when="Running"> for <time-only-duration-until-now timestamp="build.status.startTimestamp" time-only></time-only-duration-until-now></span><span
ng-switch-when="New"></span><span
ng-switch-when="Pending"></span><span
ng-switch-default>, ran for {{build.status.startTimestamp | duration : build.status.completionTimestamp}}</span>
<span ng-if="!build.status.reason || build.status.phase === 'Cancelled'">{{build.status.phase}}</span>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jwforres This is only used on the monitoring page. I wanted it to be consistent with container ready for pods (see screenshot in description), and I think it's easier to scan the page without the "ran for..." It also takes less space, and we're somewhat space constrained here.

$ rg -thtml build-status
app/views/builds.html
105:                        <!-- <build-status build="build"></build-status> -->

app/views/monitoring.html
386:                              <build-status build="build"></build-status>

<span ng-if="build.status.reason && build.status.phase !== 'Cancelled'">{{build.status.reason | sentenceCase}}</span>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is a pending build showing up correctly? i don't think it has a reason, its phase is not cancelled and it wouldn't have a startTimestamp

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah. If it doesn't have a reason, the first ng-if is true.

screen shot 2017-07-11 at 1 07 15 pm

<span ng-if="build.status.startTimestamp" class="small text-muted">
&ndash;
<span ng-if="build.status.completionTimestamp">
{{build.status.startTimestamp | timeOnlyDurationFromTimestamps : build.status.completionTimestamp}}
</span>
<span ng-if="!build.status.completionTimestamp">
<time-only-duration-until-now timestamp="build.status.startTimestamp" time-only></time-only-duration-until-now>
</span>
</span>
28 changes: 22 additions & 6 deletions app/views/monitoring.html
View file
Original file line number Diff line number Diff line change
@@ -96,6 +96,10 @@ <h2>Pods</h2>
<div class="list-group-item-text">
<status-icon status="pod | podStatus" disable-animation></status-icon>
{{pod | podStatus | sentenceCase}}
<small ng-if="(pod | podStatus) === 'Running'" class="text-muted">
&ndash;
{{pod | numContainersReady}}/{{pod.spec.containers.length}} ready
</small>
</div>
</div>
<div class="list-view-pf-additional-info">
@@ -177,8 +181,12 @@ <h2>Deployments</h2>
<small>created <span am-time-ago="replicationController.metadata.creationTimestamp"></span></small>
</div>
<div class="list-group-item-text">
<status-icon status="replicationController | deploymentStatus" disable-animation></status-icon>
{{replicationController | deploymentStatus | sentenceCase}}<span ng-if="(replicationController | deploymentStatus) === 'Active'">, {{replicationController.status.replicas}} replica<span ng-if="replicationController.status.replicas !== 1">s</span></span>
<a href=""
ng-click="viewPodsForSet(replicationController)"
class="mini-donut-link"
ng-class="{ 'disabled-link': !(podsByOwnerUID[replicationController.metadata.uid] | size) }">
<pod-donut pods="podsByOwnerUID[replicationController.metadata.uid]" mini="true"></pod-donut>
</a>
</div>
</div>
<div class="list-view-pf-additional-info">
@@ -235,7 +243,12 @@ <h2>Deployments</h2>
<small>created <span am-time-ago="replicaSet.metadata.creationTimestamp"></span></small>
</div>
<div class="list-group-item-text">
{{replicaSet.status.replicas}} replica<span ng-if="replicaSet.status.replicas !== 1">s</span>
<a href=""
ng-click="viewPodsForSet(replicaSet)"
class="mini-donut-link"
ng-class="{ 'disabled-link': !(podsByOwnerUID[replicaSet.metadata.uid] | size) }">
<pod-donut pods="podsByOwnerUID[replicaSet.metadata.uid]" mini="true"></pod-donut>
</a>
</div>
</div>
<div class="list-view-pf-additional-info">
@@ -301,9 +314,12 @@ <h2>Stateful Sets</h2>
<small>created <span am-time-ago="set.metadata.creationTimestamp"></span></small>
</div>
<div class="list-group-item-text">
<status-icon status="set | deploymentStatus" disable-animation></status-icon>
{{set | deploymentStatus | sentenceCase}},
<span ng-if="(podsByOwnerUID[set.metadata.uid] | hashSize) !== set.spec.replicas">{{podsByOwnerUID[set.metadata.uid] | hashSize}}/</span>{{set.spec.replicas}} replica<span ng-if="set.spec.replicas != 1">s</span>
<a href=""
ng-click="viewPodsForSet(set)"
class="mini-donut-link"
ng-class="{ 'disabled-link': !(podsByOwnerUID[set.metadata.uid] | size) }">
<pod-donut pods="podsByOwnerUID[set.metadata.uid]" mini="true"></pod-donut>
</a>
</div>
</div>
<div class="list-view-pf-additional-info">
5 changes: 3 additions & 2 deletions dist/scripts/scripts.js
View file
Original file line number Diff line number Diff line change
@@ -4612,8 +4612,9 @@ case "StatefulSet":
g = !c.expanded.statefulSets[e.metadata.name], c.expanded.statefulSets[e.metadata.name] = g, h = g ? "event.resource.highlight" :"event.resource.clear-highlight", n.$emit(h, e);
}
}
}, c.viewPodsForReplicaSet = function(a) {
_.isEmpty(c.podsByOwnerUID[a.metadata.uid]) || k.toPodsForDeployment(a);
}, c.viewPodsForSet = function(a) {
var b = _.get(c, [ "podsByOwnerUID", a.metadata.uid ], []);
_.isEmpty(b) || k.toPodsForDeployment(a, b);
}, m.get(a.project).then(_.spread(function(a, d) {
c.project = a, c.projectContext = d, f.watch("pods", d, function(a) {
c.podsByName = a.by("metadata.name"), c.pods = u(c.podsByName, !0), c.podsByOwnerUID = l.groupByOwnerUID(c.pods), c.podsLoaded = !0, _.each(c.pods, y), C(), i.log("pods", c.pods);
29 changes: 22 additions & 7 deletions dist/scripts/templates.js
View file
Original file line number Diff line number Diff line change
@@ -5942,7 +5942,16 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(

$templateCache.put('views/directives/build-status.html',
"<status-icon status=\"build.status.phase\" disable-animation></status-icon>\n" +
"<span ng-if=\"!build.status.reason || build.status.phase === 'Cancelled'\">{{build.status.phase}}</span><span ng-if=\"build.status.reason && build.status.phase !== 'Cancelled'\">{{build.status.reason | sentenceCase}}</span><span ng-switch=\"build.status.phase\" class=\"hide-ng-leave\" ng-if=\"build.status.startTimestamp\"><span ng-switch-when=\"Complete\">, ran for {{build.status.startTimestamp | timeOnlyDurationFromTimestamps : build.status.completionTimestamp}}</span><span ng-switch-when=\"Failed\">, ran for {{build.status.startTimestamp | timeOnlyDurationFromTimestamps : build.status.completionTimestamp}}</span><span ng-switch-when=\"Cancelled\"> after {{build.status.startTimestamp | timeOnlyDurationFromTimestamps : build.status.completionTimestamp}}</span><span ng-switch-when=\"Running\"> for <time-only-duration-until-now timestamp=\"build.status.startTimestamp\" time-only></time-only-duration-until-now></span><span ng-switch-when=\"New\"></span><span ng-switch-when=\"Pending\"></span><span ng-switch-default>, ran for {{build.status.startTimestamp | duration : build.status.completionTimestamp}}</span>\n" +
"<span ng-if=\"!build.status.reason || build.status.phase === 'Cancelled'\">{{build.status.phase}}</span>\n" +
"<span ng-if=\"build.status.reason && build.status.phase !== 'Cancelled'\">{{build.status.reason | sentenceCase}}</span>\n" +
"<span ng-if=\"build.status.startTimestamp\" class=\"small text-muted\">\n" +
"&ndash;\n" +
"<span ng-if=\"build.status.completionTimestamp\">\n" +
"{{build.status.startTimestamp | timeOnlyDurationFromTimestamps : build.status.completionTimestamp}}\n" +
"</span>\n" +
"<span ng-if=\"!build.status.completionTimestamp\">\n" +
"<time-only-duration-until-now timestamp=\"build.status.startTimestamp\" time-only></time-only-duration-until-now>\n" +
"</span>\n" +
"</span>"
);

@@ -10877,6 +10886,9 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
"<div class=\"list-group-item-text\">\n" +
"<status-icon status=\"pod | podStatus\" disable-animation></status-icon>\n" +
"{{pod | podStatus | sentenceCase}}\n" +
"<small ng-if=\"(pod | podStatus) === 'Running'\" class=\"text-muted\">\n" +
"&ndash; {{pod | numContainersReady}}/{{pod.spec.containers.length}} ready\n" +
"</small>\n" +
"</div>\n" +
"</div>\n" +
"<div class=\"list-view-pf-additional-info\">\n" +
@@ -10940,8 +10952,9 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
"<small>created <span am-time-ago=\"replicationController.metadata.creationTimestamp\"></span></small>\n" +
"</div>\n" +
"<div class=\"list-group-item-text\">\n" +
"<status-icon status=\"replicationController | deploymentStatus\" disable-animation></status-icon>\n" +
"{{replicationController | deploymentStatus | sentenceCase}}<span ng-if=\"(replicationController | deploymentStatus) === 'Active'\">, {{replicationController.status.replicas}} replica<span ng-if=\"replicationController.status.replicas !== 1\">s</span></span>\n" +
"<a href=\"\" ng-click=\"viewPodsForSet(replicationController)\" class=\"mini-donut-link\" ng-class=\"{ 'disabled-link': !(podsByOwnerUID[replicationController.metadata.uid] | size) }\">\n" +
"<pod-donut pods=\"podsByOwnerUID[replicationController.metadata.uid]\" mini=\"true\"></pod-donut>\n" +
"</a>\n" +
"</div>\n" +
"</div>\n" +
"<div class=\"list-view-pf-additional-info\">\n" +
@@ -10981,7 +10994,9 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
"<small>created <span am-time-ago=\"replicaSet.metadata.creationTimestamp\"></span></small>\n" +
"</div>\n" +
"<div class=\"list-group-item-text\">\n" +
"{{replicaSet.status.replicas}} replica<span ng-if=\"replicaSet.status.replicas !== 1\">s</span>\n" +
"<a href=\"\" ng-click=\"viewPodsForSet(replicaSet)\" class=\"mini-donut-link\" ng-class=\"{ 'disabled-link': !(podsByOwnerUID[replicaSet.metadata.uid] | size) }\">\n" +
"<pod-donut pods=\"podsByOwnerUID[replicaSet.metadata.uid]\" mini=\"true\"></pod-donut>\n" +
"</a>\n" +
"</div>\n" +
"</div>\n" +
"<div class=\"list-view-pf-additional-info\">\n" +
@@ -11037,9 +11052,9 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
"<small>created <span am-time-ago=\"set.metadata.creationTimestamp\"></span></small>\n" +
"</div>\n" +
"<div class=\"list-group-item-text\">\n" +
"<status-icon status=\"set | deploymentStatus\" disable-animation></status-icon>\n" +
"{{set | deploymentStatus | sentenceCase}},\n" +
"<span ng-if=\"(podsByOwnerUID[set.metadata.uid] | hashSize) !== set.spec.replicas\">{{podsByOwnerUID[set.metadata.uid] | hashSize}}/</span>{{set.spec.replicas}} replica<span ng-if=\"set.spec.replicas != 1\">s</span>\n" +
"<a href=\"\" ng-click=\"viewPodsForSet(set)\" class=\"mini-donut-link\" ng-class=\"{ 'disabled-link': !(podsByOwnerUID[set.metadata.uid] | size) }\">\n" +
"<pod-donut pods=\"podsByOwnerUID[set.metadata.uid]\" mini=\"true\"></pod-donut>\n" +
"</a>\n" +
"</div>\n" +
"</div>\n" +
"<div class=\"list-view-pf-additional-info\">\n" +