Merge pull request #759 from Draiken/deployment-detail-frontend

Deployment details frontend

src/app/externs/backendapi.js

@@ -213,6 +213,40 @@ backendApi.Deployment;
  */
 backendApi.DeploymentList;
 
+/**
+ * @typedef {{
+ *   maxSurge: !number,
+ *   maxUnavailabe: !number,
+ * }}
+ */
+backendApi.RollingUpdateStrategy;
+
+/**
+ * @typedef {{
+ *   replicas: !number,
+ *   updated: !number,
+ *   available: !number,
+ *   unavailable: !number,
+ * }}
+ */
+backendApi.DeploymentInfo;
+
+/**
+ * @typedef {{
+ *   objectMeta: !backendApi.ObjectMeta,
+ *   typeMeta: !backendApi.TypeMeta,
+ *   selector: !Array<backendApi.Label>,
+ *   status: !backendApi.DeploymentInfo,
+ *   strategy: !string,
+ *   minReadySeconds: !number,
+ *   rollingUpdateStrategy: !backendApi.RollingUpdateStrategy,
+ *   oldReplicaSetList: !backendApi.ReplicaSetList,
+ *   newReplicaSet: !backendApi.ReplicaSet,
+ *   events: !backendApi.EventList,
+ * }}
+ */
+backendApi.DeploymentDetail;
+
 /**
  * @typedef {{
  *   pods: !Array<!backendApi.Pod>

src/app/frontend/deploymentdetail/deploymentdetail.html

+<div layout="column">
+  <md-content>
+    <md-tabs md-border-bottom md-dynamic-height>
+      <md-tab label="Overview">
+        <kd-deployment-info deployment="::ctrl.deploymentDetail"></kd-deployment-info>
+      </md-tab>
+      <md-tab label="Events">
+        <kd-event-card-list events="::ctrl.deploymentDetail.eventList.events"></kd-event-card-list>
+      </md-tab>
+    </md-tabs>
+  </md-content>
+</div>

src/app/frontend/deploymentdetail/deploymentdetail_controller.js

+
+/**
+ * @final
+ */
+export class DeploymentDetailController {
+  /**
+   * @param {!backendApi.DeploymentDetail} deploymentDetail
+   * @ngInject
+   */
+  constructor(deploymentDetail) {
+    /** @export {!backendApi.DeploymentDetail} */
+    this.deploymentDetail = deploymentDetail;
+  }
+}

src/app/frontend/deploymentdetail/deploymentdetail_module.js

@@ -12,9 +12,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import stateConfig from './deploymentdetail_stateconfig';
 import filtersModule from 'common/filters/filters_module';
 import componentsModule from 'common/components/components_module';
-import stateConfig from './deploymentdetail_stateconfig';
+import {deploymentInfoComponent} from './deploymentinfo_component';
 
 /**
  * Angular module for the Deployment details view.
@@ -31,4 +32,5 @@ export default angular
           componentsModule.name,
           filtersModule.name,
         ])
-    .config(stateConfig);
+    .config(stateConfig)
+    .component('kdDeploymentInfo', deploymentInfoComponent);

src/app/frontend/deploymentdetail/deploymentdetail_state.js

@@ -15,6 +15,9 @@
 /** Name of the state. Can be used in, e.g., $state.go method. */
 export const stateName = 'deploymentdetail';
 
+/** Absolute URL of the state. */
+export const stateUrl = '/deployment/:namespace/:deployment';
+
 /**
  * Parameters for this state.
  *

src/app/frontend/deploymentdetail/deploymentdetail_stateconfig.js

@@ -12,16 +12,57 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {stateName} from './deploymentdetail_state';
+import {actionbarViewName} from 'chrome/chrome_state';
+import {breadcrumbsConfig} from 'common/components/breadcrumbs/breadcrumbs_service';
+import {DeploymentDetailController} from './deploymentdetail_controller';
+import {stateName as deploymentList} from 'deploymentlist/deploymentlist_state';
+import {stateName, stateUrl} from './deploymentdetail_state';
 
 /**
- * Configures states for the replica set details view.
+ * Configures states for the deployment detail view.
  *
  * @param {!ui.router.$stateProvider} $stateProvider
  * @ngInject
  */
 export default function stateConfig($stateProvider) {
   $stateProvider.state(stateName, {
-    url: '/deployment/:namespace/:deployment',
+    url: stateUrl,
+    resolve: {
+      'deploymentDetailResource': getDeploymentDetailResource,
+      'deploymentDetail': getDeploymentDetail,
+    },
+    data: {
+      [breadcrumbsConfig]: {
+        'label': '{{$stateParams.deployment}}',
+        'parent': deploymentList,
+      },
+    },
+    views: {
+      '': {
+        controller: DeploymentDetailController,
+        controllerAs: 'ctrl',
+        templateUrl: 'deploymentdetail/deploymentdetail.html',
+      },
+      [actionbarViewName]: {},
+    },
   });
 }
+
+/**
+ * @param {!./deploymentdetail_state.StateParams} $stateParams
+ * @param {!angular.$resource} $resource
+ * @return {!angular.Resource<!backendApi.DeploymentDetail>}
+ * @ngInject
+ */
+export function getDeploymentDetailResource($resource, $stateParams) {
+  return $resource(`api/v1/deployment/${$stateParams.namespace}/${$stateParams.deployment}`);
+}
+
+/**
+ * @param {!angular.Resource<!backendApi.DeploymentDetail>} deploymentDetailResource
+ * @return {!angular.$q.Promise}
+ * @ngInject
+ */
+export function getDeploymentDetail(deploymentDetailResource) {
+  return deploymentDetailResource.get().$promise;
+}

src/app/frontend/deploymentdetail/deploymentinfo.html

+<kd-info-card>
+  <kd-info-card-header>Resource details</kd-info-card-header>
+  <kd-info-card-section name="Details">
+    <kd-info-card-entry title="Name">
+      <kd-middle-ellipsis
+              display-string="{{::$ctrl.deployment.objectMeta.name}}">
+      </kd-middle-ellipsis>
+    </kd-info-card-entry>
+    <kd-info-card-entry title="Namespace">
+      {{::$ctrl.deployment.objectMeta.namespace}}
+    </kd-info-card-entry>
+    <kd-info-card-entry title="Labels">
+      <kd-labels labels="::$ctrl.deployment.objectMeta.labels"></kd-labels>
+    </kd-info-card-entry>
+    <kd-info-card-entry title="Selector">
+      <kd-labels labels="::$ctrl.deployment.selector"></kd-labels>
+    </kd-info-card-entry>
+    <kd-info-card-entry title="Strategy">
+      {{::$ctrl.deployment.strategy}}
+    </kd-info-card-entry>
+    <kd-info-card-entry title="Min Ready Seconds">
+      {{::$ctrl.deployment.minReadySeconds}}
+    </kd-info-card-entry>
+
+    <kd-info-card-entry title="Rolling Update Strategy" ng-if="$ctrl.rollingUpdateStrategy()">
+      Max Surge: {{::$ctrl.deployment.rollingUpdateStrategy.maxSurge}}
+      Max Unavailable: {{::$ctrl.deployment.rollingUpdateStrategy.maxUnavailable}}
+    </kd-info-card-entry>
+
+  </kd-info-card-section>
+
+  <kd-info-card-section>
+    <kd-info-card-entry title="Status">
+    {{::$ctrl.deployment.statusInfo.updated}} updated, 
+    {{::$ctrl.deployment.statusInfo.replicas}} total, 
+    {{::$ctrl.deployment.statusInfo.available}} available, 
+    {{::$ctrl.deployment.statusInfo.unavailable}} unavailable
+    </kd-info-card-entry>
+    <kd-info-card-entry title="New Replica Set">
+      <kd-middle-ellipsis display-string="{{$ctrl.deployment.newReplicaSet.objectMeta.name}}">
+      </kd-middle-ellipsis>
+    </kd-info-card-entry>
+    <kd-info-card-entry title="Old Replica Sets">
+      <div ng-repeat="rs in $ctrl.deployment.oldReplicaSets.replicaSets">
+        {{rs.objectMeta.name}}
+      </div>
+      <div ng-if="!$ctrl.deployment.oldReplicaSets.replicaSets.length">
+        None
+      </div>
+    </kd-info-card-entry>
+  </kd-info-card-section>
+</kd-info-card>

src/app/frontend/deploymentdetail/deploymentinfo_component.js

+/**
+ * @final
+ */
+export default class DeploymentInfoController {
+  /**
+   * Constructs replication controller info object.
+   */
+  constructor() {
+    /**
+     * Deployment details. Initialized from the scope.
+     * @export {!backendApi.DeploymentDetail}
+     */
+    this.deployment;
+  }
+
+  /**
+   * Returns true if the deployment strategy is RollingUpdate
+   * @return {boolean}
+   * @export
+   */
+  rollingUpdateStrategy() { return this.deployment.strategy === 'RollingUpdate'; }
+}
+
+/**
+ * Definition object for the component that displays replica set info.
+ *
+ * @return {!angular.Directive}
+ */
+export const deploymentInfoComponent = {
+  controller: DeploymentInfoController,
+  templateUrl: 'deploymentdetail/deploymentinfo.html',
+  bindings: {
+    /** {!backendApi.DeploymentDetail} */
+    'deployment': '=',
+  },
+};

src/test/frontend/deploymentdetail/deploymentdetail_controller_test.js

+
+import {DeploymentDetailController} from 'deploymentdetail/deploymentdetail_controller';
+import deploymentDetailModule from 'deploymentdetail/deploymentdetail_module';
+
+describe('Deployment Detail controller', () => {
+
+  beforeEach(() => { angular.mock.module(deploymentDetailModule.name); });
+
+  it('should initialize deployment detail', angular.mock.inject(($controller) => {
+    let data = {};
+    /** @type {!DeploymentDetailController} */
+    let ctrl = $controller(DeploymentDetailController, {deploymentDetail: data});
+
+    expect(ctrl.deploymentDetail).toBe(data);
+  }));
+});

src/test/frontend/deploymentdetail/deploymentinfo_component_test.js

+import deploymentDetailModule from 'deploymentdetail/deploymentdetail_module';
+
+describe('Deployment Info controller', () => {
+  /**
+* Deployment Info controller.
+* @type {!DeploymentInfoController}
+*/
+  let ctrl;
+
+  beforeEach(() => {
+    angular.mock.module(deploymentDetailModule.name);
+
+    angular.mock.inject(
+        ($componentController) => { ctrl = $componentController('kdDeploymentInfo', {}); });
+  });
+
+  describe('#rollingUpdateStrategy', () => {
+    it('returns true when strategy is rolling update', () => {
+      // given
+      ctrl.deployment = {
+        strategy: 'RollingUpdate',
+      };
+
+      // then
+      expect(ctrl.rollingUpdateStrategy()).toBeTruthy();
+    });
+
+    it('returns true when strategy is rolling update', () => {
+      // given
+      ctrl.deployment = {
+        strategy: 'Recreate',
+      };
+
+      // then
+      expect(ctrl.rollingUpdateStrategy()).toBeFalsy();
+    });
+  });
+});