Skip to content

Commit 86f2658

Browse files
brykbryk
committed
Merge pull request #759 from Draiken/deployment-detail-frontend
Deployment details frontend
2 parents cf3ed3e + c415bd3 commit 86f2658

10 files changed

+253
-5
lines changed

‎src/app/externs/backendapi.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -213,6 +213,40 @@ backendApi.Deployment;
213213
*/
214214
backendApi.DeploymentList;
215215

216+
/**
217+
* @typedef {{
218+
* maxSurge: !number,
219+
* maxUnavailabe: !number,
220+
* }}
221+
*/
222+
backendApi.RollingUpdateStrategy;
223+
224+
/**
225+
* @typedef {{
226+
* replicas: !number,
227+
* updated: !number,
228+
* available: !number,
229+
* unavailable: !number,
230+
* }}
231+
*/
232+
backendApi.DeploymentInfo;
233+
234+
/**
235+
* @typedef {{
236+
* objectMeta: !backendApi.ObjectMeta,
237+
* typeMeta: !backendApi.TypeMeta,
238+
* selector: !Array<backendApi.Label>,
239+
* status: !backendApi.DeploymentInfo,
240+
* strategy: !string,
241+
* minReadySeconds: !number,
242+
* rollingUpdateStrategy: !backendApi.RollingUpdateStrategy,
243+
* oldReplicaSetList: !backendApi.ReplicaSetList,
244+
* newReplicaSet: !backendApi.ReplicaSet,
245+
* events: !backendApi.EventList,
246+
* }}
247+
*/
248+
backendApi.DeploymentDetail;
249+
216250
/**
217251
* @typedef {{
218252
* pods: !Array<!backendApi.Pod>

‎src/app/frontend/deploymentdetail/deploymentdetail.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div layout="column">
2+
<md-content>
3+
<md-tabs md-border-bottom md-dynamic-height>
4+
<md-tab label="Overview">
5+
<kd-deployment-info deployment="::ctrl.deploymentDetail"></kd-deployment-info>
6+
</md-tab>
7+
<md-tab label="Events">
8+
<kd-event-card-list events="::ctrl.deploymentDetail.eventList.events"></kd-event-card-list>
9+
</md-tab>
10+
</md-tabs>
11+
</md-content>
12+
</div>

‎src/app/frontend/deploymentdetail/deploymentdetail_controller.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
2+
/**
3+
* @final
4+
*/
5+
export class DeploymentDetailController {
6+
/**
7+
* @param {!backendApi.DeploymentDetail} deploymentDetail
8+
* @ngInject
9+
*/
10+
constructor(deploymentDetail) {
11+
/** @export {!backendApi.DeploymentDetail} */
12+
this.deploymentDetail = deploymentDetail;
13+
}
14+
}

‎src/app/frontend/deploymentdetail/deploymentdetail_module.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,10 @@
1212
// See the License for the specific language governing permissions and
1313
// limitations under the License.
1414

15+
import stateConfig from './deploymentdetail_stateconfig';
1516
import filtersModule from 'common/filters/filters_module';
1617
import componentsModule from 'common/components/components_module';
17-
import stateConfig from './deploymentdetail_stateconfig';
18+
import {deploymentInfoComponent} from './deploymentinfo_component';
1819

1920
/**
2021
* Angular module for the Deployment details view.
@@ -31,4 +32,5 @@ export default angular
3132
componentsModule.name,
3233
filtersModule.name,
3334
])
34-
.config(stateConfig);
35+
.config(stateConfig)
36+
.component('kdDeploymentInfo', deploymentInfoComponent);

‎src/app/frontend/deploymentdetail/deploymentdetail_state.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@
1515
/** Name of the state. Can be used in, e.g., $state.go method. */
1616
export const stateName = 'deploymentdetail';
1717

18+
/** Absolute URL of the state. */
19+
export const stateUrl = '/deployment/:namespace/:deployment';
20+
1821
/**
1922
* Parameters for this state.
2023
*

‎src/app/frontend/deploymentdetail/deploymentdetail_stateconfig.js‎

Lines changed: 44 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,57 @@
1212
// See the License for the specific language governing permissions and
1313
// limitations under the License.
1414

15-
import {stateName} from './deploymentdetail_state';
15+
import {actionbarViewName} from 'chrome/chrome_state';
16+
import {breadcrumbsConfig} from 'common/components/breadcrumbs/breadcrumbs_service';
17+
import {DeploymentDetailController} from './deploymentdetail_controller';
18+
import {stateName as deploymentList} from 'deploymentlist/deploymentlist_state';
19+
import {stateName, stateUrl} from './deploymentdetail_state';
1620

1721
/**
18-
* Configures states for the replica set details view.
22+
* Configures states for the deployment detail view.
1923
*
2024
* @param {!ui.router.$stateProvider} $stateProvider
2125
* @ngInject
2226
*/
2327
export default function stateConfig($stateProvider) {
2428
$stateProvider.state(stateName, {
25-
url: '/deployment/:namespace/:deployment',
29+
url: stateUrl,
30+
resolve: {
31+
'deploymentDetailResource': getDeploymentDetailResource,
32+
'deploymentDetail': getDeploymentDetail,
33+
},
34+
data: {
35+
[breadcrumbsConfig]: {
36+
'label': '{{$stateParams.deployment}}',
37+
'parent': deploymentList,
38+
},
39+
},
40+
views: {
41+
'': {
42+
controller: DeploymentDetailController,
43+
controllerAs: 'ctrl',
44+
templateUrl: 'deploymentdetail/deploymentdetail.html',
45+
},
46+
[actionbarViewName]: {},
47+
},
2648
});
2749
}
50+
51+
/**
52+
* @param {!./deploymentdetail_state.StateParams} $stateParams
53+
* @param {!angular.$resource} $resource
54+
* @return {!angular.Resource<!backendApi.DeploymentDetail>}
55+
* @ngInject
56+
*/
57+
export function getDeploymentDetailResource($resource, $stateParams) {
58+
return $resource(`api/v1/deployment/${$stateParams.namespace}/${$stateParams.deployment}`);
59+
}
60+
61+
/**
62+
* @param {!angular.Resource<!backendApi.DeploymentDetail>} deploymentDetailResource
63+
* @return {!angular.$q.Promise}
64+
* @ngInject
65+
*/
66+
export function getDeploymentDetail(deploymentDetailResource) {
67+
return deploymentDetailResource.get().$promise;
68+
}

‎src/app/frontend/deploymentdetail/deploymentinfo.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<kd-info-card>
2+
<kd-info-card-header>Resource details</kd-info-card-header>
3+
<kd-info-card-section name="Details">
4+
<kd-info-card-entry title="Name">
5+
<kd-middle-ellipsis
6+
display-string="{{::$ctrl.deployment.objectMeta.name}}">
7+
</kd-middle-ellipsis>
8+
</kd-info-card-entry>
9+
<kd-info-card-entry title="Namespace">
10+
{{::$ctrl.deployment.objectMeta.namespace}}
11+
</kd-info-card-entry>
12+
<kd-info-card-entry title="Labels">
13+
<kd-labels labels="::$ctrl.deployment.objectMeta.labels"></kd-labels>
14+
</kd-info-card-entry>
15+
<kd-info-card-entry title="Selector">
16+
<kd-labels labels="::$ctrl.deployment.selector"></kd-labels>
17+
</kd-info-card-entry>
18+
<kd-info-card-entry title="Strategy">
19+
{{::$ctrl.deployment.strategy}}
20+
</kd-info-card-entry>
21+
<kd-info-card-entry title="Min Ready Seconds">
22+
{{::$ctrl.deployment.minReadySeconds}}
23+
</kd-info-card-entry>
24+
25+
<kd-info-card-entry title="Rolling Update Strategy" ng-if="$ctrl.rollingUpdateStrategy()">
26+
Max Surge: {{::$ctrl.deployment.rollingUpdateStrategy.maxSurge}}
27+
Max Unavailable: {{::$ctrl.deployment.rollingUpdateStrategy.maxUnavailable}}
28+
</kd-info-card-entry>
29+
30+
</kd-info-card-section>
31+
32+
<kd-info-card-section>
33+
<kd-info-card-entry title="Status">
34+
{{::$ctrl.deployment.statusInfo.updated}} updated,
35+
{{::$ctrl.deployment.statusInfo.replicas}} total,
36+
{{::$ctrl.deployment.statusInfo.available}} available,
37+
{{::$ctrl.deployment.statusInfo.unavailable}} unavailable
38+
</kd-info-card-entry>
39+
<kd-info-card-entry title="New Replica Set">
40+
<kd-middle-ellipsis display-string="{{$ctrl.deployment.newReplicaSet.objectMeta.name}}">
41+
</kd-middle-ellipsis>
42+
</kd-info-card-entry>
43+
<kd-info-card-entry title="Old Replica Sets">
44+
<div ng-repeat="rs in $ctrl.deployment.oldReplicaSets.replicaSets">
45+
{{rs.objectMeta.name}}
46+
</div>
47+
<div ng-if="!$ctrl.deployment.oldReplicaSets.replicaSets.length">
48+
None
49+
</div>
50+
</kd-info-card-entry>
51+
</kd-info-card-section>
52+
</kd-info-card>

‎src/app/frontend/deploymentdetail/deploymentinfo_component.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/**
2+
* @final
3+
*/
4+
export default class DeploymentInfoController {
5+
/**
6+
* Constructs replication controller info object.
7+
*/
8+
constructor() {
9+
/**
10+
* Deployment details. Initialized from the scope.
11+
* @export {!backendApi.DeploymentDetail}
12+
*/
13+
this.deployment;
14+
}
15+
16+
/**
17+
* Returns true if the deployment strategy is RollingUpdate
18+
* @return {boolean}
19+
* @export
20+
*/
21+
rollingUpdateStrategy() { return this.deployment.strategy === 'RollingUpdate'; }
22+
}
23+
24+
/**
25+
* Definition object for the component that displays replica set info.
26+
*
27+
* @return {!angular.Directive}
28+
*/
29+
export const deploymentInfoComponent = {
30+
controller: DeploymentInfoController,
31+
templateUrl: 'deploymentdetail/deploymentinfo.html',
32+
bindings: {
33+
/** {!backendApi.DeploymentDetail} */
34+
'deployment': '=',
35+
},
36+
};

‎src/test/frontend/deploymentdetail/deploymentdetail_controller_test.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
2+
import {DeploymentDetailController} from 'deploymentdetail/deploymentdetail_controller';
3+
import deploymentDetailModule from 'deploymentdetail/deploymentdetail_module';
4+
5+
describe('Deployment Detail controller', () => {
6+
7+
beforeEach(() => { angular.mock.module(deploymentDetailModule.name); });
8+
9+
it('should initialize deployment detail', angular.mock.inject(($controller) => {
10+
let data = {};
11+
/** @type {!DeploymentDetailController} */
12+
let ctrl = $controller(DeploymentDetailController, {deploymentDetail: data});
13+
14+
expect(ctrl.deploymentDetail).toBe(data);
15+
}));
16+
});

‎src/test/frontend/deploymentdetail/deploymentinfo_component_test.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import deploymentDetailModule from 'deploymentdetail/deploymentdetail_module';
2+
3+
describe('Deployment Info controller', () => {
4+
/**
5+
* Deployment Info controller.
6+
* @type {!DeploymentInfoController}
7+
*/
8+
let ctrl;
9+
10+
beforeEach(() => {
11+
angular.mock.module(deploymentDetailModule.name);
12+
13+
angular.mock.inject(
14+
($componentController) => { ctrl = $componentController('kdDeploymentInfo', {}); });
15+
});
16+
17+
describe('#rollingUpdateStrategy', () => {
18+
it('returns true when strategy is rolling update', () => {
19+
// given
20+
ctrl.deployment = {
21+
strategy: 'RollingUpdate',
22+
};
23+
24+
// then
25+
expect(ctrl.rollingUpdateStrategy()).toBeTruthy();
26+
});
27+
28+
it('returns true when strategy is rolling update', () => {
29+
// given
30+
ctrl.deployment = {
31+
strategy: 'Recreate',
32+
};
33+
34+
// then
35+
expect(ctrl.rollingUpdateStrategy()).toBeFalsy();
36+
});
37+
});
38+
});

0 commit comments

Comments
 (0)