Skip to content

Commit

Permalink
Object sidebar
Browse files Browse the repository at this point in the history 
bump upstream component dep to pick up fixes

Various bug fixes

Switch to filter for track by uid.  Hide osc-object hover styles at mobile.

remove extra clearObject call

Clean up extra args to overview controller

some review feedback

update asset readme

dont remove hover class if its about to get re-added
  • Loading branch information
@jwforres @liggitt
jwforres authored and liggitt committed May 1, 2015
1 parent 4433ed3 commit b7e0bae
Show file tree
Hide file tree
Showing 11 changed files with 70 additions and 60 deletions.
1 change: 1 addition & 0 deletions assets/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@ For more details on the expected scope arguments, see the source under [app/scri
* select-on-focus (attribute) - when the element is focused, all text within it will be selected
* tile-click (attribute or class) - for use with the `.tile` class, when anything on the tile is clicked, a simulated click to the `a.tile-target` link will be fired. Recommended use is by adding the `.tile-click` class to get the correct styles on hover.
* click-to-reveal (attribute) - the element will be hidden and a link to show the element will appear instead, link text is customizable
* osc-object (attribute or class) - When the element is clicked it will be shown in the details sidebar. Using as a class is preferred to pick up hover/active styles
##### Filters
Expand Down
11 changes: 0 additions & 11 deletions assets/app/scripts/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,17 +191,6 @@ angular
return durationFilter($(this).attr("data-timestamp")) || existing;
});
}, 1000);
})
.run(function($rootScope){
// register our common track by for ngRepeats on API objects
$rootScope.uid = function(obj) {
if (obj && obj.metadata && obj.metadata.uid) {
return obj.metadata.uid;
}
else {
return obj;
}
}
});

hawtioPluginLoader.addModule('openshiftConsole');
4 changes: 2 additions & 2 deletions assets/app/scripts/controllers/overview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
* Controller of the openshiftConsole
*/
angular.module('openshiftConsole')
.controller('OverviewController', function ($scope, DataService, $filter, LabelFilter, Logger, ImageStreamResolver, ObjectDescriber) {
.controller('OverviewController', function ($scope, DataService, $filter, LabelFilter, Logger, ImageStreamResolver) {
$scope.pods = {};
$scope.services = {};
$scope.unfilteredServices = {};
Expand Down Expand Up @@ -43,6 +43,7 @@ angular.module('openshiftConsole')
$scope.emptyMessage = "Loading...";
$scope.renderOptions = $scope.renderOptions || {};
$scope.renderOptions.showSidebarRight = true;

var watches = [];

watches.push(DataService.watch("pods", $scope, function(pods) {
Expand Down Expand Up @@ -343,6 +344,5 @@ angular.module('openshiftConsole')

$scope.$on('$destroy', function(){
DataService.unwatchAll(watches);
ObjectDescriber.clearObject();
});
});
5 changes: 3 additions & 2 deletions assets/app/scripts/directives/oscObjectDescriber.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ angular.module('openshiftConsole')
kind: '@'
},
link: function(scope, elem, attrs) {
// TODO need to make these elements selectable via the keyboard
$(elem).on("click.oscobject", function() {
if (scope.resource) {
ObjectDescriber.setObject(scope.resource, scope.kind || scope.resource.kind, {source: scope});
Expand All @@ -35,7 +36,7 @@ angular.module('openshiftConsole')

$(elem).on("mousemove.oscobject", function() {
if (scope.resource) {
$(".osc-object-hover").removeClass("osc-object-hover");
$(".osc-object-hover").not(this).removeClass("osc-object-hover");
$(this).addClass("osc-object-hover");
return false;
}
Expand Down Expand Up @@ -101,7 +102,7 @@ angular.module('openshiftConsole')
return this.source;
};

// Callback will never be called within the current digest loop
// Callback will never be called within a digest loop
ObjectDescriber.prototype.onResourceChanged = function(callback) {
this.callbacks.add(callback);
var self = this;
Expand Down
2 changes: 1 addition & 1 deletion assets/app/scripts/directives/resources.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ angular.module('openshiftConsole')
templateUrl: 'views/_pod-template.html'
};
})
.directive('pods', function() {
.directive('pods', function($rootScope) {
return {
restrict: 'E',
scope: {
Expand Down
12 changes: 12 additions & 0 deletions assets/app/scripts/filters/resources.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,18 @@
'use strict';

angular.module('openshiftConsole')
// this filter is intended for use with the "track by" in an ng-repeat
// when uid is not defined it falls back to object identity for uniqueness
.filter('uid', function() {
return function(resource) {
if (resource && resource.metadata && resource.metadata.uid) {
return resource.metadata.uid;
}
else {
return resource;
}
}
})
.filter('annotation', function() {
return function(resource, key) {
if (resource && resource.spec && resource.spec.tags && key.indexOf(".") !== -1){
Expand Down
16 changes: 9 additions & 7 deletions assets/app/styles/_core.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -363,13 +363,15 @@ select:invalid {
width: 60px;
}

.osc-object {
cursor: pointer;
@media (min-width: @screen-sm-min) {
.osc-object {
cursor: pointer;

&.osc-object-hover {
box-shadow: 0px 0px 0px 1px rgba(0, 168, 225, 0.5);
&.osc-object-hover {
box-shadow: 0px 0px 0px 1px rgba(0, 168, 225, 0.5);
}
&.osc-object-active {
box-shadow: 0px 0px 0px 2px #00a8e1;
}
}
&.osc-object-active {
box-shadow: 0px 0px 0px 2px #00a8e1;
}
}
2 changes: 1 addition & 1 deletion assets/app/views/_pods.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
pods - a hash of pod objects by id
-->
<div class="flex-row">
<span class="animate-repeat pod pod-{{pod.status.phase.toLowerCase()}} flex osc-object" ng-repeat="pod in pods track by uid(pod)" kind="Pod" resource="pod">
<span class="animate-repeat pod pod-{{pod.status.phase.toLowerCase()}} flex osc-object" ng-repeat="pod in pods track by (pod | uid)" kind="Pod" resource="pod">
<strong>{{pod.status.phase}}</strong><div ng-if="pod.status.podIP" class="small muted">{{pod.status.podIP}}</div><div ng-if="!pod.status.podIP" class="small muted">allocating IP...</div>
</span>
</div>
5 changes: 4 additions & 1 deletion assets/app/views/_project-page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,10 @@
<div class="container-fluid">
<div class="sidebar-header sidebar-header-bleed-left sidebar-header-bleed-right">
<div class="actions pull-right">
<a href="#"></a>
<!-- If we have any header actions for the sidebar in the future, they would go here
and be links like below
<a href="#">Example</a>
-->
</div>
<h2 class="h5">Details</h2>
</div>
Expand Down
70 changes: 36 additions & 34 deletions assets/app/views/project.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,10 +63,10 @@ <h2 class="service osc-object" ng-init="numPorts = service.spec.ports.length" ki
exists="deploymentConfigs[deploymentConfigId]"
different-service="!deploymentConfigsByService[serviceId][deploymentConfigId]">
</deployment-config-metadata>
<div ng-repeat="deployment in deployments | orderObjectsByDate : true track by uid(deployment)" style="margin-top: 10px; text-align: center;" class="osc-object" kind="ReplicationController" resource="deployment" ng-if="(podsByDeployment[deployment.metadata.name] | hashSize) > 0">
<!-- TODO right now we ONLY show deployments / RCs if they have pods, but we may also want to show
them if they are idled down to zero for example.
-->
<!-- TODO right now we ONLY show deployments / RCs if they have pods, but we may also want to show
them if they are idled down to zero for example.
-->
<div ng-repeat="deployment in deployments | orderObjectsByDate : true track by (deployment | uid)" style="margin-top: 10px; text-align: center;" class="osc-object" kind="ReplicationController" resource="deployment" ng-if="(podsByDeployment[deployment.metadata.name] | hashSize) > 0">
<div class="small muted" ng-if="deployment" style="margin-bottom: 10px;">
<relative-timestamp timestamp="deployment.metadata.creationTimestamp"></relative-timestamp>
<span ng-if="deployment.details && deployment.details.causes && deployment.details.causes.length > 0">
Expand Down Expand Up @@ -99,12 +99,12 @@ <h2 class="service osc-object" ng-init="numPorts = service.spec.ports.length" ki
</div>
</div>
</div>

<!-- TODO implement filters for empty and present to return booleans for cases like this -->
<div ng-if="(podsByService[serviceId] | hashSize) == 0" style="margin-top: 10px;">
<span style="margin-left: 20px;">There are currently no pods for this service.</span>
</div>
</div>

<!-- TODO implement filters for empty and present to return booleans for cases like this -->
<div ng-if="(podsByService[serviceId] | hashSize) == 0" style="margin-top: 10px;">
<span style="margin-left: 20px;">There are currently no pods for this service.</span>
</div>
</div>
</div>
</section>
Expand All @@ -126,33 +126,35 @@ <h2 class="service">
If things created from the deployment config in its current state would be routed to be a service
then any trigger details would be showing up under the service instead.
-->
<div ng-if="deploymentConfigs[deploymentConfigId] && deploymentConfigsByService[''][deploymentConfigId]">
<triggers triggers="deploymentConfigs[deploymentConfigId].triggers"></triggers>
</div>
<deployment-config-metadata
deployment-config-id="deploymentConfigId"
exists="deploymentConfigs[deploymentConfigId]"
different-service="!deploymentConfigsByService[''][deploymentConfigId]">
</deployment-config-metadata>
<div class="ng-scope" style="margin-top: 10px; text-align: center;">
<div class="small muted" style="margin-bottom: 10px;">
<relative-timestamp timestamp="deployment.metadata.creationTimestamp"></relative-timestamp>
<span ng-if="deployment.details && deployment.details.causes && deployment.details.causes.length > 0">
<span>, triggered by
<span ng-repeat="cause in deployment.details.causes">
<span ng-switch="cause.type">
<span ng-switch-when="ImageChange">new image for {{cause.imageTrigger.repositoryName | imageStreamName}}:{{cause.imageTrigger.tag}}</span>
<span ng-switch-when="ConfigChange">deployment configuration change</span>
<div class="osc-object" kind="DeploymentConfig" resource="deploymentConfigs[deploymentConfigId]">
<div ng-if="deploymentConfigs[deploymentConfigId] && deploymentConfigsByService[''][deploymentConfigId]">
<triggers triggers="deploymentConfigs[deploymentConfigId].triggers"></triggers>
</div>
<deployment-config-metadata
deployment-config-id="deploymentConfigId"
exists="deploymentConfigs[deploymentConfigId]"
different-service="!deploymentConfigsByService[''][deploymentConfigId]">
</deployment-config-metadata>
<div class="osc-object" style="margin-top: 10px; text-align: center;" kind="ReplicationController" resource="deployment">
<div class="small muted" style="margin-bottom: 10px;">
<relative-timestamp timestamp="deployment.metadata.creationTimestamp"></relative-timestamp>
<span ng-if="deployment.details && deployment.details.causes && deployment.details.causes.length > 0">
<span>, triggered by
<span ng-repeat="cause in deployment.details.causes">
<span ng-switch="cause.type">
<span ng-switch-when="ImageChange">new image for {{cause.imageTrigger.repositoryName | imageStreamName}}:{{cause.imageTrigger.tag}}</span>
<span ng-switch-when="ConfigChange">deployment configuration change</span>
</span>
</span>
</span>
</span>
</span>
</div>
<div style="display: inline-block;">
<pod-template ng-init="podTemplate = deployment.spec.template"></pod-template>
<pods pods="podsByDeployment[deployment.metadata.name]"></pods>
</div>
</div>
</span>
</div>
<div style="display: inline-block;">
<pod-template ng-init="podTemplate = deployment.spec.template"></pod-template>
<pods pods="podsByDeployment[deployment.metadata.name]"></pods>
</div>
</div>
</div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion assets/bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
"zeroclipboard": "2.2.0",
"messenger": "1.4.1",
"kubernetes-label-selector": "0.0.1",
"openshift-object-describer": "0.0.4"
"openshift-object-describer": "0.0.6"
},
"devDependencies": {
"angular-mocks": "1.3.8",
Expand Down

0 comments on commit b7e0bae

Please sign in to comment.