Extract replica set card to a separate directive

* this is a refactoring change - no functional changes
* added missing tests
* added missing module dependency (tests found it)
* this is a prerequisite PR for future work on the card

src/app/frontend/replicasetlist/replicasetcard.html

+<!--
+Copyright 2015 Google Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<md-card>
+  <md-card-content class="kd-replicaset-card">
+    <div layout="row" layout-align="space-between center">
+      <div flex layout="column">
+        <a ng-href="{{::ctrl.getReplicaSetDetailHref()}}" flex>
+          {{::ctrl.replicaSet.name}}
+        </a>
+        <div flex class="md-caption">
+          <span ng-repeat="(label, value) in ::ctrl.replicaSet.labels"
+              class="kd-replicaset-card-label">
+            {{::label}}:{{::value}}
+          </span>
+        </div>
+      </div>
+      <md-button class="md-icon-button">
+        <md-icon md-font-library="material-icons">more_vert</md-icon>
+      </md-button>
+    </div>
+    <div class="md-caption">
+      <div layout="row">
+        <span flex="60">
+          {{::ctrl.replicaSet.podsRunning}} pods running, {{::ctrl.replicaSet.podsPending}} pending
+        </span>
+        <logs-menu flex="40" namespace="::ctrl.replicaSet.namespace"
+                   replica-set-name="::ctrl.replicaSet.name">
+        </logs-menu>
+      </div>
+      <hr class="kd-replicaset-card-divider"></hr>
+      <div layout="row" layout-wrap>
+        <div ng-if="::ctrl.replicaSet.description" flex="100" layout="column"
+            class="kd-replicaset-card-section">
+          <span flex>Description</span>
+          <div flex>
+            {{::ctrl.replicaSet.description}}
+          </div>
+        </div>
+
+        <div flex="60" layout="column" class="kd-replicaset-card-section">
+          <span flex>Image</span>
+          <div flex>
+            <div ng-repeat="image in ::ctrl.replicaSet.containerImages track by $index"
+                class="kd-replicaset-card-section-image">
+              {{::image}}
+            </div>
+          </div>
+        </div>
+
+        <div flex="40" layout="column" class="kd-replicaset-card-section">
+          <span flex="initial">Creation time</span>
+          <span flex>{{::ctrl.replicaSet.creationTime}}</span>
+        </div>
+
+        <div flex="60" layout="column" class="kd-replicaset-card-section">
+          <span flex="initial">Internal Endpoint</span>
+          <div flex>
+            <div ng-repeat="endpoint in ::ctrl.replicaSet.internalEndpoints track by $index">
+              {{::endpoint}}
+            </div>
+            <div ng-if="::!ctrl.replicaSet.internalEndpoints.length">
+              none
+            </div>
+          </div>
+        </div>
+
+        <div flex="40" layout="column" class="kd-replicaset-card-section">
+          <span flex="initial">External Endpoint</span>
+          <div flex>
+            <div ng-repeat="endpoint in ::ctrl.replicaSet.externalEndpoints track by $index">
+              <a ng-href="http://{{::endpoint}}" target="_blank">{{::endpoint}}</a>
+            </div>
+            <div ng-if="::!ctrl.replicaSet.externalEndpoints.length">
+              none
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </md-card-content>
+</md-card>

src/app/frontend/replicasetlist/replicasetcard_controller.js

+// Copyright 2015 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import {StateParams} from 'replicasetdetail/replicasetdetail_state';
+import {stateName} from 'replicasetdetail/replicasetdetail_state';
+
+/**
+ * Controller for the replica set card.
+ *
+ * @final
+ */
+export default class ReplicaSetCardController {
+  /**
+   * @param {!ui.router.$state} $state
+   * @ngInject
+   */
+  constructor($state) {
+    /**
+     * Initialized from the scope.
+     * @export {!backendApi.ReplicaSet}
+     */
+    this.replicaSet;
+
+    /** @private {!ui.router.$state} */
+    this.state_ = $state;
+  }
+
+  /**
+   * @return {string}
+   * @export
+   */
+  getReplicaSetDetailHref() {
+    return this.state_.href(
+        stateName, new StateParams(this.replicaSet.namespace, this.replicaSet.name));
+  }
+}

src/app/frontend/replicasetlist/replicasetcard_directive.js

+// Copyright 2015 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import ReplicaSetCardController from './replicasetcard_controller';
+
+/**
+ * Returns directive definition object for logs menu.
+ * @return {!angular.Directive}
+ */
+export default function logsMenuDirective() {
+  return {
+    scope: {},
+    bindToController: {
+      'replicaSet': '=',
+    },
+    controller: ReplicaSetCardController,
+    controllerAs: 'ctrl',
+    templateUrl: 'replicasetlist/replicasetcard.html',
+  };
+}

src/app/frontend/replicasetlist/replicasetlist.html

@@ -15,83 +15,7 @@ limitations under the License.
 -->
 
 <div layout="row" layout-wrap layout-margin layout-align="center center">
-  <md-card ng-repeat="replicaSet in ::ctrl.replicaSets">
-    <md-card-content class="kd-replicaset-card">
-      <div layout="row" layout-align="space-between center">
-        <div flex layout="column">
-          <a ng-href="{{::ctrl.getReplicaSetDetailHref(replicaSet)}}" flex>
-            {{::replicaSet.name}}
-          </a>
-          <div flex class="md-caption">
-            <span ng-repeat="(label, value) in ::replicaSet.labels"
-                class="kd-replicaset-card-label">
-              {{::label}}:{{::value}}
-            </span>
-          </div>
-        </div>
-        <md-button class="md-icon-button">
-          <md-icon md-font-library="material-icons">more_vert</md-icon>
-        </md-button>
-      </div>
-      <div class="md-caption">
-        <div layout="row">
-          <span flex="60">
-            {{::replicaSet.podsRunning}} pods running, {{::replicaSet.podsPending}} pending
-          </span>
-          <logs-menu flex="40" namespace="::replicaSet.namespace"
-                     replica-set-name="::replicaSet.name">
-          </logs-menu>
-        </div>
-        <hr class="kd-replicaset-card-divider"></hr>
-        <div layout="row" layout-wrap>
-          <div ng-if="::replicaSet.description" flex="100" layout="column"
-              class="kd-replicaset-card-section">
-            <span flex>Description</span>
-            <div flex>
-              {{::replicaSet.description}}
-            </div>
-          </div>
-
-          <div flex="60" layout="column" class="kd-replicaset-card-section">
-            <span flex>Image</span>
-            <div flex>
-              <div ng-repeat="image in ::replicaSet.containerImages track by $index"
-                  class="kd-replicaset-card-section-image">
-                {{::image}}
-              </div>
-            </div>
-          </div>
-
-          <div flex="40" layout="column" class="kd-replicaset-card-section">
-            <span flex="initial">Creation time</span>
-            <span flex>{{::replicaSet.creationTime}}</span>
-          </div>
-
-          <div flex="60" layout="column" class="kd-replicaset-card-section">
-            <span flex="initial">Internal Endpoint</span>
-            <div flex>
-              <div ng-repeat="endpoint in ::replicaSet.internalEndpoints track by $index">
-                {{::endpoint}}
-              </div>
-              <div ng-if="::!replicaSet.internalEndpoints.length">
-                none
-              </div>
-            </div>
-          </div>
-
-          <div flex="40" layout="column" class="kd-replicaset-card-section">
-            <span flex="initial">External Endpoint</span>
-            <div flex>
-              <div ng-repeat="endpoint in ::replicaSet.externalEndpoints track by $index">
-                <a ng-href="http://{{::endpoint}}" target="_blank">{{::endpoint}}</a>
-              </div>
-              <div ng-if="::!replicaSet.externalEndpoints.length">
-                none
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </md-card-content>
-  </md-card>
+  <div ng-repeat="replicaSet in ::ctrl.replicaSets">
+    <kd-replica-set-card replica-set="::replicaSet"></kd-replica-set-card>
+  </div>
 </div>

src/app/frontend/replicasetlist/replicasetlist_controller.js

@@ -12,9 +12,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import {StateParams} from 'replicasetdetail/replicasetdetail_state';
-import {stateName} from 'replicasetdetail/replicasetdetail_state';
-
 /**
  * Controller for the replica set list view.
  *
@@ -22,24 +19,11 @@ import {stateName} from 'replicasetdetail/replicasetdetail_state';
  */
 export default class ReplicaSetListController {
   /**
-   * @param {!ui.router.$state} $state
    * @param {!backendApi.ReplicaSetList} replicaSets
    * @ngInject
    */
-  constructor($state, replicaSets) {
-    /** @export {!Array<backendApi.ReplicaSet>} */
+  constructor(replicaSets) {
+    /** @export {!Array<!backendApi.ReplicaSet>} */
     this.replicaSets = replicaSets.replicaSets;
-
-    /** @private {!ui.router.$state} */
-    this.state_ = $state;
-  }
-
-  /**
-   * @param {!backendApi.ReplicaSet} replicaSet
-   * @return {string}
-   * @export
-   */
-  getReplicaSetDetailHref(replicaSet) {
-    return this.state_.href(stateName, new StateParams(replicaSet.namespace, replicaSet.name));
   }
 }

src/app/frontend/replicasetlist/replicasetlist_module.js

@@ -14,7 +14,9 @@
 
 import stateConfig from './replicasetlist_state';
 import logsMenuDirective from './logsmenu_directive';
-import middleEllipsisFilter from './../common/filters/middleellipsis_filter';
+import middleEllipsisFilter from 'common/filters/middleellipsis_filter';
+import replicaSetCardDirective from './replicasetcard_directive';
+import replicaSetDetailModule from 'replicasetdetail/replicasetdetail_module';
 
 /**
  * Angular module for the Replica Set list view.
@@ -27,7 +29,9 @@ export default angular.module(
                             'ngMaterial',
                             'ngResource',
                             'ui.router',
+                            replicaSetDetailModule.name,
                           ])
     .config(stateConfig)
     .filter('middleEllipsis', middleEllipsisFilter)
-    .directive('logsMenu', logsMenuDirective);
+    .directive('logsMenu', logsMenuDirective)
+    .directive('kdReplicaSetCard', replicaSetCardDirective);

src/test/frontend/replicasetlist/replicasetcard_controller_test.js

+// Copyright 2015 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import ReplicaSetCardController from 'replicasetlist/replicasetcard_controller';
+import replicaSetListModule from 'replicasetlist/replicasetlist_module';
+
+describe('Logs menu controller', () => {
+  /**
+   * @type {!ReplicaSetCardController}
+   */
+  let ctrl;
+
+  beforeEach(() => {
+    angular.mock.module(replicaSetListModule.name);
+
+    angular.mock.inject(($controller) => { ctrl = $controller(ReplicaSetCardController); });
+  });
+
+  it('should construct details href', () => {
+    // given
+    ctrl.replicaSet = {
+      name: 'foo-name',
+      namespace: 'foo-namespace',
+    };
+
+    // then
+    expect(ctrl.getReplicaSetDetailHref()).toEqual('#/replicasets/foo-namespace/foo-name');
+  });
+});