Skip to content

D
dashboard

凌波微步_大先生 / dashboard
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
D
dashboard

体验新版 GitCode，发现更多精彩内容 >>

提交 585dc56e 编写于 作者: P Piotr Bryk
浏览文件
操作

Merge pull request #343 from maciaszczykm/details-styling 

Hide details page sidebar on narrow screens into tab
上级 ccd9e02e eaa78d45
隐藏空白更改
内联 并排
Showing with 491 addition and 292 deletion
src/app/frontend/replicationcontrollerdetail/replicationcontrollerdetail.html
浏览文件 @ 585dc56e
......@@ -15,10 +15,12 @@ limitations under the License.
-->
<md-content layout="row" layout-fill flex>
<div class="kd-replicationcontrollerdetail-sidebar" layout="column" flex="noshrink">
<div class="kd-replicationcontrollerdetail-sidebar" layout="column" flex="noshrink"
ng-show="ctrl.isSidebarVisible()">
<div class="kd-replicationcontrollerdetail-sidebar-header-wrapper kd-replicationcontrollerdetail-sidebar-item"
flex="nogrow">
<div class="kd-replicationcontrollerdetail-sidebar-header" layout-align="start center" layout="row">
<div class="kd-replicationcontrollerdetail-sidebar-header" layout-align="start center"
layout="row">
<md-button class="md-icon-button" ui-sref="replicationcontrollers">
<md-icon md-font-library="material-icons">arrow_back</md-icon>
</md-button>
......@@ -27,103 +29,20 @@ limitations under the License.
</h1>
</div>
</div>
<div flex layout="column" class="kd-replicationcontrollerdetail-sidebar-item">
<div layout="row" flex="nogrow">
<md-button class="md-primary" ng-click="ctrl.handleDeleteReplicationControllerDialog()">
<md-icon class="material-icons">delete</md-icon>
DELETE REPLICATION CONTROLLER
</md-button>
</div>
<span class="kd-replicationcontrollerdetail-sidebar-title kd-replicationcontrollerdetail-sidebar-info">
Replication controller
</span>
<div flex layout="column" class="kd-replicationcontrollerdetail-sidebar-info">
<span class="kd-replicationcontrollerdetail-sidebar-line">Name</span>
<span class="kd-replicationcontrollerdetail-sidebar-subline">
{{::ctrl.replicationControllerDetail.name}}
</span>
<span class="kd-replicationcontrollerdetail-sidebar-line">Namespace</span>
<span class="kd-replicationcontrollerdetail-sidebar-subline">
{{::ctrl.replicationControllerDetail.namespace}}
</span>
<div layout="row" layout-align="start end">
<div flex="nogrow">
<span class="kd-replicationcontrollerdetail-sidebar-line">Pods</span>
<span class="kd-replicationcontrollerdetail-sidebar-subline" ng-if="!ctrl.areDesiredPodsRunning()">
{{::ctrl.replicationControllerDetail.podInfo.current}} created,
{{::ctrl.replicationControllerDetail.podInfo.desired}} desired
</span>
<span class="kd-replicationcontrollerdetail-sidebar-subline" ng-if="ctrl.areDesiredPodsRunning()">
{{::ctrl.replicationControllerDetail.podInfo.running}} running
</span>
</div>
<div flex="nogrow">
<md-button class="md-icon-button md-primary">
<md-icon class="material-icons"
ng-click="ctrl.handleUpdateReplicasDialog()">
mode_edit
</md-icon>
</md-button>
</div>
</div>
<div ng-if="!ctrl.areDesiredPodsRunning()">
<span class="kd-replicationcontrollerdetail-sidebar-line">Pods status</span>
<span class="kd-replicationcontrollerdetail-sidebar-subline">
<span ng-if="::ctrl.replicationControllerDetail.podInfo.pending" class="kd-comma-separated-item">
{{::ctrl.replicationControllerDetail.podInfo.pending}} pending<!-- Collapse whitespace
--></span>
<span ng-if="::ctrl.replicationControllerDetail.podInfo.failed" class="kd-comma-separated-item">
{{::ctrl.replicationControllerDetail.podInfo.failed}} failed<!-- Collapse whitespace
--></span>
<span ng-if="::ctrl.replicationControllerDetail.podInfo.running" class="kd-comma-separated-item">
{{::ctrl.replicationControllerDetail.podInfo.running}} running
</span>
</span>
</div>
<span class="kd-replicationcontrollerdetail-sidebar-line">Label selector</span>
<span class="kd-replicationcontrollerdetail-sidebar-subline kd-has-labels">
<kd-labels labels="::ctrl.replicationControllerDetail.labelSelector"></kd-labels>
</span>
<span class="kd-replicationcontrollerdetail-sidebar-line">Labels</span>
<span class="kd-replicationcontrollerdetail-sidebar-subline kd-has-labels">
<kd-labels labels="::ctrl.replicationControllerDetail.labels"></kd-labels>
</span>
<span class="kd-replicationcontrollerdetail-sidebar-line">Images</span>
<span class="kd-replicationcontrollerdetail-sidebar-subline"
ng-repeat="image in ctrl.replicationControllerDetail.containerImages">
{{image}}
</span>
<div ng-if="::ctrl.replicationControllerDetail.services" layout="column">
<span class="kd-replicationcontrollerdetail-sidebar-title">Services</span>
<div ng-repeat="service in ::ctrl.replicationControllerDetail.services">
<span class="kd-replicationcontrollerdetail-sidebar-line">Name</span>
<span class="kd-replicationcontrollerdetail-sidebar-subline">
{{::service.name}}
</span>
<span class="kd-replicationcontrollerdetail-sidebar-line">Label selector</span>
<span class="kd-replicationcontrollerdetail-sidebar-subline kd-has-labels">
<kd-labels labels="::service.selector"></kd-labels>
</span>
<span class="kd-replicationcontrollerdetail-sidebar-line">Internal endpoint</span>
<div class="kd-replicationcontrollerdetail-sidebar-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-replicationcontrollerdetail-sidebar-line">External endpoint</span>
<div class="kd-replicationcontrollerdetail-sidebar-subline">
<div ng-repeat="endpoint in service.externalEndpoints">
<kd-service-endpoint endpoint="::endpoint"></kd-service-endpoint>
</div>
<span class="kd-replicationcontrollerdetail-sidebar-subline"
ng-hide="::service.externalEndpoints">
none
</span>
</div>
</div>
</div>
</div>
<kd-replication-controller-info details="::ctrl.replicationControllerDetail">
</kd-replication-controller-info>
</div>
<div flex>
<div class="kd-replicationcontrollerdetail-sidebar-header-wrapper kd-replicationcontrollerdetail-sidebar-item"
flex="nogrow" ng-show="!ctrl.isSidebarVisible()">
<div class="kd-replicationcontrollerdetail-sidebar-header" layout-align="start center"
layout="row">
<md-button class="md-icon-button" ui-sref="replicationcontrollers">
<md-icon md-font-library="material-icons">arrow_back</md-icon>
</md-button>
<h1 flex class="md-title kd-replicationcontrollerdetail-app-name">
{{::ctrl.replicationControllerDetail.name}}
</h1>
</div>
</div>
<md-tabs flex="grow" md-border-bottom md-dynamic-height>
......@@ -134,15 +53,13 @@ limitations under the License.
<tr>
<th class="kd-replicationcontrollerdetail-table-header">
<kd-sorted-header currently-selected-column="ctrl.sortPodsBy"
currently-selected-order="ctrl.podsOrder"
column-name="name">
currently-selected-order="ctrl.podsOrder" column-name="name">
Pod
</kd-sorted-header>
</th>
<th class="kd-replicationcontrollerdetail-table-header">
<kd-sorted-header currently-selected-column="ctrl.sortPodsBy"
currently-selected-order="ctrl.podsOrder"
column-name="status"
currently-selected-order="ctrl.podsOrder" column-name="status"
tooltip="Status of the pod">
Status
</kd-sorted-header>
......@@ -157,38 +74,37 @@ limitations under the License.
</th>
<th class="kd-replicationcontrollerdetail-table-header">
<kd-sorted-header currently-selected-column="ctrl.sortPodsBy"
currently-selected-order="ctrl.podsOrder"
column-name="startTime" tooltip="Time the pod was last started">
currently-selected-order="ctrl.podsOrder" column-name="startTime"
tooltip="Time the pod was last started">
Age
</kd-sorted-header>
</th>
<th class="kd-replicationcontrollerdetail-table-header"
ng-if="::ctrl.replicationControllerDetail.hasMetrics">
<kd-sorted-header currently-selected-column="ctrl.sortPodsBy"
currently-selected-order="ctrl.podsOrder"
column-name="cpu" tooltip="CPU used by the pod">
currently-selected-order="ctrl.podsOrder" column-name="cpu"
tooltip="CPU used by the pod">
CPU
</kd-sorted-header>
</th>
<th class="kd-replicationcontrollerdetail-table-header"
ng-if="::ctrl.replicationControllerDetail.hasMetrics">
<kd-sorted-header currently-selected-column="ctrl.sortPodsBy"
currently-selected-order="ctrl.podsOrder"
column-name="memory" tooltip="Memory used by the pod">
currently-selected-order="ctrl.podsOrder" column-name="memory"
tooltip="Memory used by the pod">
Memory
</kd-sorted-header>
</th>
<th class="kd-replicationcontrollerdetail-table-header">
<kd-sorted-header currently-selected-column="ctrl.sortPodsBy"
currently-selected-order="ctrl.podsOrder"
column-name="podIP" tooltip="IP adress of the pod in the cluster">
currently-selected-order="ctrl.podsOrder" column-name="podIP"
tooltip="IP adress of the pod in the cluster">
Cluster IP
</kd-sorted-header>
</th>
<th class="kd-replicationcontrollerdetail-table-header">
<kd-sorted-header currently-selected-column="ctrl.sortPodsBy"
currently-selected-order="ctrl.podsOrder"
column-name="nodeName"
currently-selected-order="ctrl.podsOrder" column-name="nodeName"
tooltip="Name of the node the pod is running on">
Node
</kd-sorted-header>
......@@ -221,7 +137,8 @@ limitations under the License.
-
</span>
</td>
<td class="kd-replicationcontrollerdetail-table-cell" ng-if="::ctrl.replicationControllerDetail.hasMetrics">
<td class="kd-replicationcontrollerdetail-table-cell"
ng-if="::ctrl.replicationControllerDetail.hasMetrics">
<span ng-if="::ctrl.hasCpuUsage(pod)">
{{::(pod.metrics.cpuUsage | kdCores)}}
</span>
......@@ -229,7 +146,8 @@ limitations under the License.
-
</span>
</td>
<td class="kd-replicationcontrollerdetail-table-cell" ng-if="::ctrl.replicationControllerDetail.hasMetrics">
<td class="kd-replicationcontrollerdetail-table-cell"
ng-if="::ctrl.replicationControllerDetail.hasMetrics">
<span ng-if="::ctrl.hasMemoryUsage(pod)">
{{::(pod.metrics.memoryUsage | kdMemory)}}
</span>
......@@ -281,13 +199,13 @@ limitations under the License.
</md-input-container>
<!-- TODO(maciaszczykm): Add event filtering by source (all, system and user). -->
</div>
<table class="kd-replicationcontrollerdetail-table" cellspacing="0" cellpadding="15" ng-if="ctrl.hasEvents()">
<table class="kd-replicationcontrollerdetail-table" cellspacing="0" cellpadding="15"
ng-if="ctrl.hasEvents()">
<thead>
<tr>
<th class="kd-replicationcontrollerdetail-table-header">
<kd-sorted-header currently-selected-column="ctrl.sortEventsBy"
currently-selected-order="ctrl.eventsOrder"
column-name="message">
currently-selected-order="ctrl.eventsOrder" column-name="message">
Message
</kd-sorted-header>
</th>
......@@ -301,31 +219,27 @@ limitations under the License.
</th>
<th class="kd-replicationcontrollerdetail-table-header">
<kd-sorted-header currently-selected-column="ctrl.sortEventsBy"
currently-selected-order="ctrl.eventsOrder"
column-name="object">
currently-selected-order="ctrl.eventsOrder" column-name="object">
Sub-object
</kd-sorted-header>
</th>
<th class="kd-replicationcontrollerdetail-table-header">
<kd-sorted-header currently-selected-column="ctrl.sortEventsBy"
currently-selected-order="ctrl.eventsOrder"
column-name="count"
tooltip="Number of times the event occurred">
column-name="count" tooltip="Number of times the event occurred">
Count
</kd-sorted-header>
</th>
<th class="kd-replicationcontrollerdetail-table-header">
<kd-sorted-header currently-selected-column="ctrl.sortEventsBy"
currently-selected-order="ctrl.eventsOrder"
column-name="firstSeen"
currently-selected-order="ctrl.eventsOrder" column-name="firstSeen"
tooltip="Time the event was seen for the first time">
First seen
</kd-sorted-header>
</th>
<th class="kd-replicationcontrollerdetail-table-header">
<kd-sorted-header currently-selected-column="ctrl.sortEventsBy"
currently-selected-order="ctrl.eventsOrder"
column-name="lastSeen"
currently-selected-order="ctrl.eventsOrder" column-name="lastSeen"
tooltip="Time the event was seen for the last time">
Last seen
</kd-sorted-header>
......@@ -353,16 +267,22 @@ limitations under the License.
</tr>
</tbody>
</table>
<div class="kd-replicationcontrollerdetail-no-events" ng-if="!ctrl.hasEvents()">
<md-icon class="material-icons kd-replicationcontrollerdetail-no-events-icon">info_outline</md-icon>
<div class="kd-replicationcontrollerdetail-no-events-text">No events were found</div>
<span class="kd-replicationcontrollerdetail-no-events-info">
There are no events to display. It's possible that all of them have expired.
<a href="">Learn more</a>
</span>
</div>
<div class="kd-replicationcontrollerdetail-no-events" ng-if="!ctrl.hasEvents()">
<md-icon class="material-icons kd-replicationcontrollerdetail-no-events-icon">
info_outline
</md-icon>
<div class="kd-replicationcontrollerdetail-no-events-text">No events were found</div>
<span class="kd-replicationcontrollerdetail-no-events-info">
There are no events to display. It's possible that all of them have expired.
<a href="">Learn more</a>
</span>
</div>
</md-content>
</md-tab>
</md-tabs>
</md-tab>
<md-tab label="Details" ng-if="!ctrl.isSidebarVisible()">
<kd-replication-controller-info details="::ctrl.replicationControllerDetail">
</kd-replication-controller-info>
</md-tab>
</md-tabs>
</div>
</md-content>
src/app/frontend/replicationcontrollerdetail/replicationcontrollerdetail.scss
浏览文件 @ 585dc56e
......@@ -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_controller.js
浏览文件 @ 585dc56e
......@@ -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,6 +29,7 @@ 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
......@@ -39,13 +37,14 @@ export default class ReplicationControllerDetailController {
* @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_module.js
浏览文件 @ 585dc56e
......@@ -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/replicationcontrollerinfo.html 0 → 100644
浏览文件 @ 585dc56e
<!--
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.scss 0 → 100644
浏览文件 @ 585dc56e
// 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;
}
src/app/frontend/replicationcontrollerdetail/replicationcontrollerinfo_controller.js 0 → 100644
浏览文件 @ 585dc56e
// 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 {
stateName as replicationcontrollers,
} from 'replicationcontrollerlist/replicationcontrollerlist_state';
/**
* Controller for the replication controller info directive.
* @final
*/
export default class ReplicationControllerInfoController {
/**
* @param {!./replicationcontrollerdetail_state.StateParams} $stateParams
* @param {!ui.router.$state} $state
* @param {!angular.$log} $log
* @param {!./replicationcontroller_service.ReplicationControllerService}
* kdReplicationControllerService
*
* @ngInject
*/
constructor($stateParams, $state, $log, kdReplicationControllerService) {
/** @private {!./replicationcontrollerdetail_state.StateParams} */
this.stateParams_ = $stateParams;
/** @private {!./replicationcontroller_service.ReplicationControllerService} */
this.kdReplicationControllerService_ = kdReplicationControllerService;
/** @private {!ui.router.$state} */
this.state_ = $state;
/** @private {!angular.$log} */
this.log_ = $log;
/**
* Replication controller details. Initialized from the scope.
* @export {!backendApi.ReplicationControllerDetail}
*/
this.details;
}
/**
* @return {boolean}
* @export
*/
areDesiredPodsRunning() { return this.details.podInfo.running === this.details.podInfo.desired; }
/**
* Handles update of replicas count in replication controller dialog.
* @export
*/
handleUpdateReplicasDialog() {
this.kdReplicationControllerService_.showUpdateReplicasDialog(
this.details.namespace, this.details.name, this.details.podInfo.current,
this.details.podInfo.desired);
}
/**
* Handles replication controller delete dialog.
* @export
*/
handleDeleteReplicationControllerDialog() {
this.kdReplicationControllerService_
.showDeleteDialog(this.stateParams_.namespace, this.stateParams_.replicationController)
.then(this.onReplicationControllerDeleteSuccess_.bind(this));
}
/**
* 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/replicationcontrollerinfo_directive.js 0 → 100644
浏览文件 @ 585dc56e
// 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 ReplicationControllerInfoController from 'replicationcontrollerdetail/replicationcontrollerinfo_controller';
/**
* Returns directive definition object for the component that displays replication controller info.
* @return {!angular.Directive}
*/
export default function replicationControllerInfoDirective() {
return {
controller: ReplicationControllerInfoController,
controllerAs: 'infoCtrl',
templateUrl: 'replicationcontrollerdetail/replicationcontrollerinfo.html',
scope: {},
bindToController: {
'details': '=',
},
};
}
src/test/frontend/replicationcontrollerdetail/replicationcontrollerdetail_controller_test.js
浏览文件 @ 585dc56e
......@@ -21,18 +21,11 @@ describe('Replication Controller Detail controller', () => {
* @type {!ReplicationControllerDetailController}
*/
let ctrl;
/** @type
* {!replicationcontrollerdetail/replicationcontroller_service.ReplicationControllerService} */
let kdReplicationControllerService;
/** @type {!angular.$q} */
let q;
beforeEach(() => {
angular.mock.module(replicationControllerDetailModule.name);
angular.mock.inject(($controller, $resource, $q, _kdReplicationControllerService_) => {
q = $q;
kdReplicationControllerService = _kdReplicationControllerService_;
angular.mock.inject(($controller, $resource) => {
ctrl = $controller(ReplicationControllerDetailController, {
replicationControllerDetail: {},
replicationControllerEvents: {},
......@@ -90,43 +83,12 @@ describe('Replication Controller Detail controller', () => {
expect(result.length).toEqual(1);
});
it('should show edit replicas dialog', () => {
// given
ctrl.replicationControllerDetail = {
namespace: 'foo-namespace',
name: 'foo-name',
podInfo: {
current: 3,
desired: 3,
},
};
spyOn(kdReplicationControllerService, 'showUpdateReplicasDialog');
// when
ctrl.handleUpdateReplicasDialog();
// then
expect(kdReplicationControllerService.showUpdateReplicasDialog).toHaveBeenCalled();
});
it('should create logs href', () => {
expect(ctrl.getPodLogsHref({
name: 'foo-pod',
})).toBe('#/logs/foo-namespace/foo-replicationcontroller/foo-pod/');
});
it('should show delete replicas dialog', () => {
// given
let deferred = q.defer();
spyOn(kdReplicationControllerService, 'showDeleteDialog').and.returnValue(deferred.promise);
// when
ctrl.handleDeleteReplicationControllerDialog();
// then
expect(kdReplicationControllerService.showDeleteDialog).toHaveBeenCalled();
});
it('should return true when there are events to display', () => {
// given
ctrl.events = ["Some event"];
......@@ -146,32 +108,6 @@ describe('Replication Controller Detail controller', () => {
expect(result).toBeFalsy();
});
it('should return true when all desired pods are running', () => {
// given
ctrl.replicationControllerDetail = {
podInfo: {
running: 0,
desired: 0,
},
};
// then
expect(ctrl.areDesiredPodsRunning()).toBeTruthy();
});
it('should return false when not all desired pods are running', () => {
// given
ctrl.replicationControllerDetail = {
podInfo: {
running: 0,
desired: 1,
},
};
// then
expect(ctrl.areDesiredPodsRunning()).toBeFalsy();
});
it('should show/hide cpu and memory metrics for pods', () => {
expect(ctrl.hasMemoryUsage({})).toBe(false);
expect(ctrl.hasMemoryUsage({metrics: {}})).toBe(false);
......
src/test/frontend/replicationcontrollerdetail/replicationcontrollerinfo_controller_test.js 0 → 100644
浏览文件 @ 585dc56e
// 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 ReplicationControllerInfoController from 'replicationcontrollerdetail/replicationcontrollerinfo_controller';
import replicationControllerDetailModule from 'replicationcontrollerdetail/replicationcontrollerdetail_module';
import {
stateName as replicationcontrollers,
} from 'replicationcontrollerlist/replicationcontrollerlist_state';
describe('Replication Controller Detail controller', () => {
/**
* Replication Controller Detail controller.
* @type {!ReplicationControllerDetailController}
*/
let ctrl;
/** @type
* {!replicationcontrollerdetail/replicationcontroller_service.ReplicationControllerService} */
let kdReplicationControllerService;
/** @type {!angular.$q} */
let q;
/** @type {!ui.router.$state} */
let state;
/** @type {!angular.$log} */
let log;
beforeEach(() => {
angular.mock.module(replicationControllerDetailModule.name);
angular.mock.inject(
($controller, $state, $log, $resource, $q, _kdReplicationControllerService_) => {
q = $q;
state = $state;
log = $log;
kdReplicationControllerService = _kdReplicationControllerService_;
ctrl = $controller(ReplicationControllerInfoController, {
replicationControllerDetail: {},
replicationControllerEvents: {},
replicationControllerDetailResource: $resource('/foo'),
replicationControllerSpecPodsResource: $resource('/bar'),
});
});
});
it('should show edit replicas dialog', () => {
// given
ctrl.details = {
namespace: 'foo-namespace',
name: 'foo-name',
podInfo: {
current: 3,
desired: 3,
},
};
spyOn(kdReplicationControllerService, 'showUpdateReplicasDialog');
// when
ctrl.handleUpdateReplicasDialog();
// then
expect(kdReplicationControllerService.showUpdateReplicasDialog).toHaveBeenCalled();
});
it('should show delete replicas dialog', () => {
// given
let deferred = q.defer();
spyOn(kdReplicationControllerService, 'showDeleteDialog').and.returnValue(deferred.promise);
// when
ctrl.handleDeleteReplicationControllerDialog();
// then
expect(kdReplicationControllerService.showDeleteDialog).toHaveBeenCalled();
});
it('should return true when all desired pods are running', () => {
// given
ctrl.details = {
podInfo: {
running: 0,
desired: 0,
},
};
// then
expect(ctrl.areDesiredPodsRunning()).toBeTruthy();
});
it('should return false when not all desired pods are running', () => {
// given
ctrl.details = {
podInfo: {
running: 0,
desired: 1,
},
};
// then
expect(ctrl.areDesiredPodsRunning()).toBeFalsy();
});
it('should change state to replication controller and log on delete success', () => {
// given
spyOn(state, 'go');
spyOn(log, 'info');
// when
ctrl.onReplicationControllerDeleteSuccess_();
// then
expect(state.go).toHaveBeenCalledWith(replicationcontrollers);
expect(log.info).toHaveBeenCalledWith('Replication controller successfully deleted.');
});
});
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或