Merge pull request #223 from floreks/label-format

bryk · bryk · commit d1ac65e270e0 · 2016-01-08T15:35:05.000+01:00
Added common label formatting (as chips) and unified across the project.
diff --git a/build/karma.conf.js b/build/karma.conf.js
@@ -49,7 +49,7 @@ function getFileList() {
  */
 module.exports = function(config) {
   let configuration = {
-    basePath: conf.paths.base,
+    basePath: '.',
 
     files: getFileList(),
 
@@ -109,7 +109,8 @@ module.exports = function(config) {
     // karma-ng-html2js-preprocessor plugin config.
     ngHtml2JsPreprocessor: {
       stripPrefix: `${conf.paths.frontendSrc}/`,
-      moduleName: conf.frontend.moduleName,
+      // Load all template related stuff under ng module as it's loaded with every module.
+      moduleName: 'ng',
     },
   };
 
diff --git a/src/app/frontend/common/components/components_module.js b/src/app/frontend/common/components/components_module.js
@@ -0,0 +1,25 @@
+// 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 labelsDirective from './labels/labels_directive';
+
+/**
+ * Module containing common components for the application.
+ */
+export default angular.module(
+                          'kubernetesDashboard.common.components',
+                          [
+                            'ngMaterial',
+                          ])
+    .directive('kdLabels', labelsDirective);
diff --git a/src/app/frontend/common/components/labels/labels.html b/src/app/frontend/common/components/labels/labels.html
@@ -0,0 +1,21 @@
+<!--
+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-content>
+  <div class="kd-labels" ng-repeat="(key, value) in ::labelsCtrl.labels">
+    {{key}}={{value}}
+  </div>
+</md-content>
diff --git a/src/app/frontend/common/components/labels/labels.scss b/src/app/frontend/common/components/labels/labels.scss
@@ -0,0 +1,30 @@
+// 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 '../../../variables';
+
+$label-height: $caption-font-size-base + 6;
+$label-margin: 0 $baseline-grid $baseline-grid 0;
+
+// Style taken(mostly) from angular material md-chip style.
+.kd-labels {
+  background-color: $body;
+  border-radius: $label-height / 2;
+  display: inline-block;
+  font-size: $caption-font-size-base;
+  line-height: $label-height;
+  margin: $label-margin;
+  padding: 0 $baseline-grid;
+  vertical-align: middle;
+}
diff --git a/src/app/frontend/common/components/labels/labels_controller.js b/src/app/frontend/common/components/labels/labels_controller.js
@@ -0,0 +1,27 @@
+// 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.
+
+/**
+ * @final
+ */
+export default class LabelsController {
+  /**
+   * Constructs labels controller.
+   * @ngInject
+   */
+  constructor() {
+    /** @export {Object<string, string>} Initialized from the scope. */
+    this.labels;
+  }
+}
diff --git a/src/app/frontend/common/components/labels/labels_directive.js b/src/app/frontend/common/components/labels/labels_directive.js
@@ -0,0 +1,32 @@
+// 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 LabelsController from './labels_controller';
+
+/**
+ * Returns directive definition for label.
+ *
+ * @return {!angular.Directive}
+ */
+export default function labelsDirective() {
+  return {
+    controller: LabelsController,
+    controllerAs: 'labelsCtrl',
+    templateUrl: 'common/components/labels/labels.html',
+    scope: {},
+    bindToController: {
+      'labels': '=',
+    },
+  };
+}
diff --git a/src/app/frontend/common/filters/filters_module.js b/src/app/frontend/common/filters/filters_module.js
@@ -19,7 +19,7 @@ import relativeTimeFilter from './relativetime_filter';
  * Module containing common filters for the application.
  */
 export default angular.module(
-                          'kubernetesDashboard.common.flters',
+                          'kubernetesDashboard.common.filters',
                           [
                             'ngMaterial',
                           ])
diff --git a/src/app/frontend/deploy/deploy_module.js b/src/app/frontend/deploy/deploy_module.js
@@ -42,4 +42,4 @@ export default angular.module(
     .directive('kdUniqueName', uniqueNameDirective)
     .directive('kdFileReader', fileReaderDirective)
     .directive('kdUpload', uploadDirective)
-    .directive('kdLabel', deployLabelDirective);
+    .directive('kdDeployLabel', deployLabelDirective);
diff --git a/src/app/frontend/deploy/deployfromsettings.html b/src/app/frontend/deploy/deployfromsettings.html
@@ -110,7 +110,7 @@
           <p flex>Value</p>
         </div>
         <div ng-repeat="label in ctrl.labels">
-          <kd-label layout="row" flex label="label" labels="ctrl.labels"></kd-label>
+          <kd-deploy-label layout="row" flex label="label" labels="ctrl.labels"></kd-deploy-label>
         </div>
       </div>
     </div>
diff --git a/src/app/frontend/replicasetdetail/replicasetdetail.html b/src/app/frontend/replicasetdetail/replicasetdetail.html
@@ -48,12 +48,12 @@
           </span>
           <span class="kd-replicasetdetail-sidebar-line">Label selector</span>
           <span class="kd-replicasetdetail-sidebar-subline">
-            {{ctrl.formatLabelString(ctrl.replicaSetDetail.labelSelector)}}
+            <kd-labels labels="::ctrl.replicaSetDetail.labelSelector"></kd-labels>
           </span>
           <span class="kd-replicasetdetail-sidebar-title">Replica Sets</span>
           <span class="kd-replicasetdetail-sidebar-line">Labels</span>
           <span class="kd-replicasetdetail-sidebar-subline">
-            {{ctrl.formatLabelString(ctrl.replicaSetDetail.labels)}}
+            <kd-labels labels="::ctrl.replicaSetDetail.labels"></kd-labels>
           </span>
           <span class="kd-replicasetdetail-sidebar-line">Images</span>
           <span class="kd-replicasetdetail-sidebar-subline"
@@ -65,7 +65,7 @@
             <span class="kd-replicasetdetail-sidebar-line">Label selector</span>
             <span class="kd-replicasetdetail-sidebar-subline"
                   ng-repeat="service in ::ctrl.replicaSetDetail.services">
-              {{::ctrl.formatLabelString(service.selector)}}
+              <kd-labels labels="::service.selector"></kd-labels>
             </span>
             <span class="kd-replicasetdetail-sidebar-line">Internal endpoint</span>
             <div class="kd-replicasetdetail-sidebar-subline"
diff --git a/src/app/frontend/replicasetdetail/replicasetdetail.scss b/src/app/frontend/replicasetdetail/replicasetdetail.scss
@@ -18,6 +18,7 @@ $replicasetdetails-sidebar-bg: #fafafa;
 $replicasetdetails-border: #ddd;
 $replicasetdetails-table-message: #000;
 $replicasetdetails-table-cell: #777;
+$replicasetdetails-sidebar-width: 315px;
 
 .kd-replicasetdetail-app-name {
   color: $foreground-2;
@@ -26,7 +27,8 @@ $replicasetdetails-table-cell: #777;
 
 .kd-replicasetdetail-sidebar {
   background-color: $replicasetdetails-sidebar-bg;
-  min-width: 315px;
+  max-width: $replicasetdetails-sidebar-width;
+  min-width: $replicasetdetails-sidebar-width;
 }
 
 .kd-replicasetdetail-table {
@@ -76,7 +78,6 @@ $replicasetdetails-table-cell: #777;
 .kd-replicasetdetail-sidebar-subline {
   color: $muted;
   font-size: $caption-font-size-base;
-  padding-bottom: 8px;
 }
 
 .kd-replicasetdetail-sidebar-icon {
diff --git a/src/app/frontend/replicasetdetail/replicasetdetail_controller.js b/src/app/frontend/replicasetdetail/replicasetdetail_controller.js
@@ -114,19 +114,6 @@ export default class ReplicaSetDetailController {
     this.eventsOrder = DOWNWARDS;
   }
 
-  /**
-   * TODO(floreks): Reuse this in replicasetlist controller.
-   * Formats labels object to readable string.
-   * @param {!Object} object
-   * @return {string}
-   * @export
-   */
-  formatLabelString(object) {
-    let result = '';
-    angular.forEach(object, function(value, key) { result += `,${key}=${value}`; });
-    return result.substring(1);
-  }
-
   /**
    * Returns true if event is a warning.
    * @param {!backendApi.Event} event
diff --git a/src/app/frontend/replicasetdetail/replicasetdetail_module.js b/src/app/frontend/replicasetdetail/replicasetdetail_module.js
@@ -12,6 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import componentsModule from './../common/components/components_module';
 import filtersModule from 'common/filters/filters_module';
 import serviceEndpointDirective from './serviceendpoint_directive';
 import stateConfig from './replicasetdetail_stateconfig';
@@ -30,6 +31,7 @@ export default angular.module(
                             'ngResource',
                             'ui.router',
                             filtersModule.name,
+                            componentsModule.name,
                           ])
     .config(stateConfig)
     .directive('kdServiceEndpoint', serviceEndpointDirective)
diff --git a/src/app/frontend/replicasetlist/replicasetcard.html b/src/app/frontend/replicasetlist/replicasetcard.html
@@ -28,10 +28,7 @@ <h3 class="md-title kd-replicaset-card-title">
         <kd-replica-set-card-menu replica-set="::ctrl.replicaSet"></kd-replica-set-card-menu>
       </div>
       <div flex class="md-caption">
-        <span ng-repeat="(label, value) in ::ctrl.replicaSet.labels"
-            class="kd-replicaset-card-label">
-          {{::label}}:{{::value}}
-        </span>
+        <kd-labels labels="::ctrl.replicaSet.labels"></kd-labels>
       </div>
     </div>
     <div class="md-caption">
diff --git a/src/app/frontend/replicasetlist/replicasetlist_module.js b/src/app/frontend/replicasetlist/replicasetlist_module.js
@@ -15,6 +15,7 @@
 import stateConfig from './replicasetlist_stateconfig';
 import logsMenuDirective from './logsmenu_directive';
 import filtersModule from 'common/filters/filters_module';
+import componentsModule from 'common/components/components_module';
 import replicaSetCardDirective from './replicasetcard_directive';
 import replicaSetCardMenuDirective from './replicasetcardmenu_directive';
 import replicaSetDetailModule from 'replicasetdetail/replicasetdetail_module';
@@ -33,6 +34,7 @@ export default angular.module(
                             'ui.router',
                             replicaSetDetailModule.name,
                             filtersModule.name,
+                            componentsModule.name,
                           ])
     .config(stateConfig)
     .directive('logsMenu', logsMenuDirective)
diff --git a/src/test/frontend/common/components/labels/labels_controller_test.js b/src/test/frontend/common/components/labels/labels_controller_test.js
@@ -0,0 +1,50 @@
+// 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 componentsModule from 'common/components/components_module';
+
+describe('Labels directive', () => {
+  /** @type {!angular.Scope} */
+  let scope;
+  /** @type {function(!angular.Scope):!angular.JQLite} */
+  let compileFn;
+
+  beforeEach(() => {
+    angular.mock.module(componentsModule.name);
+
+    angular.mock.inject(($rootScope, $compile) => {
+      scope = $rootScope.$new();
+      compileFn = $compile('<kd-labels labels="labels"></kd-labels>');
+    });
+  });
+
+  it('should render 3 labels', () => {
+    // given
+    scope.labels = {
+      app: 'app',
+      version: 'version',
+      testLabel: 'test',
+    };
+
+    // when
+    let element = compileFn(scope);
+    scope.$digest();
+
+    // then
+    let labels = element.find('div');
+    expect(labels.length).toEqual(3);
+    angular.forEach(
+        (key, value, index) => { expect(labels.eq(index).text()).toBe(`${key}=${value}`); });
+  });
+});

Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ import relativeTimeFilter from './relativetime_filter';`
`19`	`19`	`* Module containing common filters for the application.`
`20`	`20`	`*/`
`21`	`21`	`export default angular.module(`
`22`		`- 'kubernetesDashboard.common.flters',`
	`22`	`+ 'kubernetesDashboard.common.filters',`
`23`	`23`	`[`
`24`	`24`	`'ngMaterial',`
`25`	`25`	`])`