Hide details page sidebar on narrow screens

Author: Marcin Maciaszczyk

src/app/frontend/replicationcontrollerdetail/replicationcontrollerdetail.html

@@ -48,34 +48,6 @@ $table-cell-height-half: $table-cell-height / 2;
   border-bottom: 1px solid $foreground-4;
 }
 
-.kd-replicationcontrollerdetail-sidebar-title {
-  font-size: $subhead-font-size-base;
-  font-weight: $bold-font-weight;
-  padding-bottom: $baseline-grid;
-  padding-top: $baseline-grid;
-}
-
-.kd-replicationcontrollerdetail-sidebar-line {
-  color: $foreground-2;
-  display: block;
-  font-size: $body-font-size-base;
-  padding-bottom: 0;
-}
-
-.kd-replicationcontrollerdetail-sidebar-subline {
-  color: $foreground-1;
-  display: block;
-  font-size: $body-font-size-base;
-  overflow: hidden;
-  padding-bottom: $baseline-grid;
-  text-overflow: ellipsis;
-
-  &.kd-has-labels {
-    // To offset for labels margin.
-    margin-bottom: -$baseline-grid / 2;
-  }
-}
-
 .kd-replicationcontrollerdetail-warning-icon {
   color: $warning;
   font-size: $table-cell-height-half;
@@ -87,11 +59,6 @@ $table-cell-height-half: $table-cell-height / 2;
   margin: 2 * $baseline-grid;
 }
 
-.kd-replicationcontrollerdetail-sidebar-info {
-  // 6px needed to offset for md-button padding.
-  padding-left: $baseline-grid + 6px;
-}
-
 .kd-replicationcontrollerdetail-option-picker {
   padding-right: 2 * $baseline-grid;
   width: 15 * $baseline-grid;
@@ -131,7 +98,7 @@ $table-cell-height-half: $table-cell-height / 2;
 }
 
 .kd-replicationcontrollerdetail-no-events {
-  margin-top: 4 * $baseline-grid;
+  margin: (4 * $baseline-grid) 0 (4 * $baseline-grid);
   text-align: center;
 }
 

src/app/frontend/replicationcontrollerdetail/replicationcontrollerdetail.scss

@@ -13,9 +13,6 @@
 // limitations under the License.
 
 import {UPWARDS, DOWNWARDS} from 'replicationcontrollerdetail/sortedheader_controller';
-import {
-  stateName as replicationcontrollers,
-} from 'replicationcontrollerlist/replicationcontrollerlist_state';
 import {stateName as logsStateName} from 'logs/logs_state';
 import {StateParams as LogsStateParams} from 'logs/logs_state';
 
@@ -32,20 +29,22 @@ const EVENT_SOURCE_SYSTEM = 'System';
  */
 export default class ReplicationControllerDetailController {
   /**
+   * @param {function(string):boolean} $mdMedia Angular Material $mdMedia service
    * @param {!md.$dialog} $mdDialog
    * @param {!./replicationcontrollerdetail_state.StateParams} $stateParams
    * @param {!ui.router.$state} $state
    * @param {!angular.$resource} $resource
    * @param {!angular.$log} $log
    * @param {!backendApi.ReplicationControllerDetail} replicationControllerDetail
    * @param {!backendApi.Events} replicationControllerEvents
-   * @param {!./replicationcontroller_service.ReplicationControllerService}
-   * kdReplicationControllerService
    * @ngInject
    */
   constructor(
-      $mdDialog, $stateParams, $state, $resource, $log, replicationControllerDetail,
-      replicationControllerEvents, kdReplicationControllerService) {
+      $mdMedia, $mdDialog, $stateParams, $state, $resource, $log, replicationControllerDetail,
+      replicationControllerEvents) {
+    /** @export {function(string):boolean} */
+    this.mdMedia = $mdMedia;
+
     /** @export {!backendApi.ReplicationControllerDetail} */
     this.replicationControllerDetail = replicationControllerDetail;
 
@@ -82,9 +81,6 @@ export default class ReplicationControllerDetailController {
     /** @private {!angular.$log} */
     this.log_ = $log;
 
-    /** @private {!./replicationcontroller_service.ReplicationControllerService} */
-    this.kdReplicationControllerService_ = kdReplicationControllerService;
-
     /**
      * Name of column, that will be used for pods sorting.
      * @export {string}
@@ -110,6 +106,13 @@ export default class ReplicationControllerDetailController {
     this.eventsOrder = DOWNWARDS;
   }
 
+  /**
+   * Returns true if sidebar is visible, false if it is hidden.
+   * @returns {boolean}
+   * @export
+   */
+  isSidebarVisible() { return this.mdMedia('gt-sm'); }
+
   /**
    * Returns true if event is a warning.
    * @param {!backendApi.Event} event
@@ -181,36 +184,6 @@ export default class ReplicationControllerDetailController {
     }
   }
 
-  /**
-   * @return {boolean}
-   * @export
-   */
-  areDesiredPodsRunning() {
-    return this.replicationControllerDetail.podInfo.running ===
-        this.replicationControllerDetail.podInfo.desired;
-  }
-
-  /**
-   * Handles update of replicas count in replication controller dialog.
-   * @export
-   */
-  handleUpdateReplicasDialog() {
-    this.kdReplicationControllerService_.showUpdateReplicasDialog(
-        this.replicationControllerDetail.namespace, this.replicationControllerDetail.name,
-        this.replicationControllerDetail.podInfo.current,
-        this.replicationControllerDetail.podInfo.desired);
-  }
-
-  /**
-   * Handles replication controller delete dialog.
-   * @export
-   */
-  handleDeleteReplicationControllerDialog() {
-    this.kdReplicationControllerService_
-        .showDeleteDialog(this.stateParams_.namespace, this.stateParams_.replicationController)
-        .then(this.onReplicationControllerDeleteSuccess_.bind(this));
-  }
-
   /**
    * @param {!backendApi.ReplicationControllerPod} pod
    * @return {boolean}
@@ -228,20 +201,4 @@ export default class ReplicationControllerDetailController {
   hasMemoryUsage(pod) {
     return !!pod.metrics && (!!pod.metrics.memoryUsage || pod.metrics.memoryUsage === 0);
   }
-
-  /**
-   * Callbacks used after clicking dialog confirmation button in order to delete replication
-   * controller
-   * or log unsuccessful operation error.
-   */
-
-  /**
-   * Changes state back to replication controller list after successful deletion of replication
-   * controller.
-   * @private
-   */
-  onReplicationControllerDeleteSuccess_() {
-    this.log_.info('Replication controller successfully deleted.');
-    this.state_.go(replicationcontrollers);
-  }
 }

src/app/frontend/replicationcontrollerdetail/replicationcontrollerdetail_controller.js

@@ -15,6 +15,7 @@
 import componentsModule from './../common/components/components_module';
 import filtersModule from 'common/filters/filters_module';
 import logsModule from 'logs/logs_module';
+import replicationControllerInfo from './replicationcontrollerinfo_directive';
 import serviceEndpointDirective from './serviceendpoint_directive';
 import stateConfig from './replicationcontrollerdetail_stateconfig';
 import sortedHeaderDirective from './sortedheader_directive';
@@ -37,6 +38,7 @@ export default angular
           logsModule.name,
         ])
     .config(stateConfig)
+    .directive('kdReplicationControllerInfo', replicationControllerInfo)
     .directive('kdServiceEndpoint', serviceEndpointDirective)
     .directive('kdSortedHeader', sortedHeaderDirective)
     .service('kdReplicationControllerService', ReplicationControllerService);

src/app/frontend/replicationcontrollerdetail/replicationcontrollerdetail_module.js

@@ -0,0 +1,115 @@
+<!--
+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.
+-->
+
+<div flex="nogrow" class="kd-replicationcontrollerinfo-item">
+  <md-button class="md-primary" ng-click="infoCtrl.handleDeleteReplicationControllerDialog()">
+    <md-icon class="material-icons">delete</md-icon>
+    DELETE REPLICATION CONTROLLER
+  </md-button>
+</div>
+<div flex layout="column" class="kd-replicationcontrollerinfo-item">
+  <div flex layout="column" class="kd-replicationcontrollerinfo-info">
+    <span class="kd-replicationcontrollerinfo-title">
+      Replication controller
+    </span>
+    <span class="kd-replicationcontrollerinfo-line">Name</span>
+    <span class="kd-replicationcontrollerinfo-subline">
+      {{infoCtrl.details.name}}
+    </span>
+    <span class="kd-replicationcontrollerinfo-line">Namespace</span>
+    <span class="kd-replicationcontrollerinfo-subline">
+      {{::infoCtrl.details.namespace}}
+    </span>
+    <div layout="row" layout-align="start end">
+      <div flex="nogrow">
+        <span class="kd-replicationcontrollerinfo-line">Pods</span>
+        <span class="kd-replicationcontrollerinfo-subline"
+              ng-if="!infoCtrl.areDesiredPodsRunning()">
+          {{::infoCtrl.details.podInfo.current}} created,
+          {{::infoCtrl.details.podInfo.desired}} desired
+        </span>
+        <span class="kd-replicationcontrollerinfo-subline" ng-if="infoCtrl.areDesiredPodsRunning()">
+          {{::infoCtrl.details.running}} running
+        </span>
+      </div>
+      <div flex="nogrow">
+        <md-button class="md-icon-button md-primary">
+          <md-icon class="material-icons" ng-click="infoCtrl.handleUpdateReplicasDialog()">
+            mode_edit
+          </md-icon>
+        </md-button>
+      </div>
+    </div>
+    <div ng-if="!infoCtrl.areDesiredPodsRunning()">
+      <span class="kd-replicationcontrollerinfo-line">Pods status</span>
+      <span class="kd-replicationcontrollerinfo-subline">
+        <span ng-if="::infoCtrl.details.podInfo.pending" class="kd-comma-separated-item">
+          {{::infoCtrl.details.podInfo.pending}} pending<!-- Collapse whitespace
+        --></span>
+        <span ng-if="::infoCtrl.details.podInfo.failed" class="kd-comma-separated-item">
+          {{::infoCtrl.details.podInfo.failed}} failed<!-- Collapse whitespace
+        --></span>
+        <span ng-if="::infoCtrl.details.podInfo.running" class="kd-comma-separated-item">
+          {{::infoCtrl.details.podInfo.running}} running
+        </span>
+      </span>
+    </div>
+    <span class="kd-replicationcontrollerinfo-line">Label selector</span>
+    <span class="kd-replicationcontrollerinfo-subline kd-has-labels">
+      <kd-labels labels="::infoCtrl.details.labelSelector"></kd-labels>
+    </span>
+    <span class="kd-replicationcontrollerinfo-line">Labels</span>
+    <span class="kd-replicationcontrollerinfo-subline kd-has-labels">
+      <kd-labels labels="::infoCtrl.details.labels"></kd-labels>
+    </span>
+    <span class="kd-replicationcontrollerinfo-line">Images</span>
+    <span class="kd-replicationcontrollerinfo-subline"
+          ng-repeat="image in infoCtrl.details.containerImages">
+      {{image}}
+    </span>
+  </div>
+  <div flex layout="column" class="kd-replicationcontrollerinfo-info">
+    <div ng-if="::infoCtrl.details.services" layout="column">
+      <span class="kd-replicationcontrollerinfo-title">Services</span>
+      <div ng-repeat="service in ::infoCtrl.details.services">
+        <span class="kd-replicationcontrollerinfo-line">Name</span>
+        <span class="kd-replicationcontrollerinfo-subline">
+          {{::service.name}}
+        </span>
+        <span class="kd-replicationcontrollerinfo-line">Label selector</span>
+        <span class="kd-replicationcontrollerinfo-subline kd-has-labels">
+          <kd-labels labels="::service.selector"></kd-labels>
+        </span>
+        <span class="kd-replicationcontrollerinfo-line">Internal endpoint</span>
+        <div class="kd-replicationcontrollerinfo-subline">
+          <div ng-if="::service.internalEndpoint">
+            <kd-service-endpoint endpoint="::service.internalEndpoint"></kd-service-endpoint>
+          </div>
+          <span ng-hide="service.internalEndpoint">none</span>
+        </div>
+        <span class="kd-replicationcontrollerinfo-line">External endpoint</span>
+        <div class="kd-replicationcontrollerinfo-subline">
+          <div ng-repeat="endpoint in service.externalEndpoints">
+            <kd-service-endpoint endpoint="::endpoint"></kd-service-endpoint>
+          </div>
+          <span class="kd-replicationcontrollerinfo-subline" ng-hide="::service.externalEndpoints">
+            none
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/frontend/replicationcontrollerdetail/replicationcontrollerinfo.html

@@ -0,0 +1,53 @@
+// 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';
+
+.kd-replicationcontrollerinfo-item {
+  padding-left: 2 * $baseline-grid;
+  padding-right: $baseline-grid;
+}
+
+.kd-replicationcontrollerinfo-title {
+  font-size: $subhead-font-size-base;
+  font-weight: $bold-font-weight;
+  padding-bottom: $baseline-grid;
+  padding-top: $baseline-grid;
+}
+
+.kd-replicationcontrollerinfo-line {
+  color: $foreground-2;
+  display: block;
+  font-size: $body-font-size-base;
+  padding-bottom: 0;
+}
+
+.kd-replicationcontrollerinfo-subline {
+  color: $foreground-1;
+  display: block;
+  font-size: $body-font-size-base;
+  overflow: hidden;
+  padding-bottom: $baseline-grid;
+  text-overflow: ellipsis;
+
+  &.kd-has-labels {
+    // To offset for labels margin.
+    margin-bottom: -$baseline-grid / 2;
+  }
+}
+
+.kd-replicationcontrollerinfo-info {
+  // 6px needed to offset for md-button padding.
+  padding-left: $baseline-grid + 6px;
+}