replicasetdetail.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-content layout="row" layout-fill flex>
  <div class="kd-replicasetdetail-sidebar" layout="column" flex="noshrink">
    <div class="kd-replicasetdetail-sidebar-header-wrapper kd-replicasetdetail-sidebar-item"
        flex="nogrow">
      <div class="kd-replicasetdetail-sidebar-header" layout-align="start center" layout="row">
        <md-button class="md-icon-button" ui-sref="replicasets">
          <md-icon md-font-library="material-icons">arrow_back</md-icon>
        </md-button>
        <h1 flex class="md-title kd-replicasetdetail-app-name">
          {{ctrl.replicaSetDetail.name}}
        </h1>
      </div>
    </div>
    <div flex layout="column" class="kd-replicasetdetail-sidebar-item">
      <div layout="row" flex="nogrow" class="kd-replicasetdetail-sidebar-actions">
        <md-button class="md-primary" ng-click="ctrl.handleDeleteReplicaSetDialog()">
          <md-icon class="material-icons">delete</md-icon>
          DELETE
        </md-button>
      </div>
      <div flex layout="column" class="kd-replicasetdetail-sidebar-info">
        <div>
          <span class="kd-replicasetdetail-sidebar-title">
            {{ctrl.replicaSetDetail.podsDesired}} pods
          </span>
          <md-button class="md-icon-button md-primary">
            <md-icon class="material-icons"
                ng-click="ctrl.handleUpdateReplicasDialog()">
              mode_edit
            </md-icon>
          </md-button>
        </div>
        <span class="kd-replicasetdetail-sidebar-line">Label selector</span>
        <span class="kd-replicasetdetail-sidebar-subline">
          <kd-labels labels="::ctrl.replicaSetDetail.labelSelector"></kd-labels>
        </span>
        <span class="kd-replicasetdetail-sidebar-title">Replica Set</span>
        <span class="kd-replicasetdetail-sidebar-line">Labels</span>
        <span class="kd-replicasetdetail-sidebar-subline">
          <kd-labels labels="::ctrl.replicaSetDetail.labels"></kd-labels>
        </span>
        <span class="kd-replicasetdetail-sidebar-line">Images</span>
        <span class="kd-replicasetdetail-sidebar-subline"
              ng-repeat="image in ctrl.replicaSetDetail.containerImages">
          {{image}}
        </span>
        <div ng-if="::ctrl.replicaSetDetail.services" layout="column">
          <span class="kd-replicasetdetail-sidebar-title">Services</span>
          <span class="kd-replicasetdetail-sidebar-line">Label selector</span>
          <span class="kd-replicasetdetail-sidebar-subline"
                ng-repeat="service in ::ctrl.replicaSetDetail.services">
            <kd-labels labels="::service.selector"></kd-labels>
          </span>
          <span class="kd-replicasetdetail-sidebar-line">Internal endpoint</span>
          <div class="kd-replicasetdetail-sidebar-subline"
               ng-repeat="service in ::ctrl.replicaSetDetail.services">
            <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-replicasetdetail-sidebar-line">External endpoint</span>
          <div class="kd-replicasetdetail-sidebar-subline"
               ng-repeat="service in ::ctrl.replicaSetDetail.services">
            <div ng-repeat="endpoint in service.externalEndpoints">
              <kd-service-endpoint endpoint="::endpoint"></kd-service-endpoint>
            </div>
            <span class="kd-replicasetdetail-sidebar-subline"
                ng-hide="::service.externalEndpoints">
              none
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <md-tabs flex="grow" md-border-bottom md-dynamic-height>
    <md-tab label="Pods">
      <md-content>
        <table class="kd-replicasetdetail-table" cellspacing="0">
          <thead>
          <tr>
            <th class="kd-replicasetdetail-table-header">
              <kd-sorted-header currently-selected-column="ctrl.sortPodsBy"
                                currently-selected-order="ctrl.podsOrder"
                                column-name="name">
                Pod
              </kd-sorted-header>
            </th>
            <th class="kd-replicasetdetail-table-header">
              <kd-sorted-header currently-selected-column="ctrl.sortPodsBy"
                                currently-selected-order="ctrl.podsOrder"
                                column-name="restartCount"
                                tooltip="Restarts count and last restart time of the pod">
                Restarts
              </kd-sorted-header>
            </th>
            <th class="kd-replicasetdetail-table-header">
              <kd-sorted-header currently-selected-column="ctrl.sortPodsBy"
                                currently-selected-order="ctrl.podsOrder"
                                column-name="startTime" tooltip="Age of the pod">
                Age
              </kd-sorted-header>
            </th>
            <th class="kd-replicasetdetail-table-header">
              <kd-sorted-header currently-selected-column="ctrl.sortPodsBy"
                                currently-selected-order="ctrl.podsOrder"
                                column-name="cpu" tooltip="CPU used by the pod">
                CPU
              </kd-sorted-header>
            </th>
            <th class="kd-replicasetdetail-table-header">
              <kd-sorted-header currently-selected-column="ctrl.sortPodsBy"
                                currently-selected-order="ctrl.podsOrder"
                                column-name="memory" tooltip="Memory used by the pod">
                Memory
              </kd-sorted-header>
            </th>
            <th class="kd-replicasetdetail-table-header">
              <kd-sorted-header currently-selected-column="ctrl.sortPodsBy"
                                currently-selected-order="ctrl.podsOrder"
                                column-name="podIP" tooltip="In cluster IP adress of the pod">
                Cluster IP
              </kd-sorted-header>
            </th>
            <th class="kd-replicasetdetail-table-header">
              <kd-sorted-header currently-selected-column="ctrl.sortPodsBy"
                                currently-selected-order="ctrl.podsOrder"
                                column-name="nodeName"
                                tooltip="Name of the node, that the pod is running on">
                Node
              </kd-sorted-header>
            </th>
            <th class="kd-replicasetdetail-table-header">
              <span>Logs
                <i class="material-icons kd-replicasetdetail-help-icon">
                  help
                  <md-tooltip>Display logs from the pod</md-tooltip>
                </i>
              <span>
            </th>
            <th class="kd-replicasetdetail-table-header"/>
          </tr>
          </thead>
          <tbody>
          <tr ng-repeat="pod in ctrl.replicaSetDetail.pods | orderBy:ctrl.sortPodsBy:ctrl.podsOrder">
            <td class="kd-replicasetdetail-table-cell">{{pod.name}}</td>
            <td class="kd-replicasetdetail-table-cell">
              {{pod.restartCount}}<!-- TODO(maciaszczykm): Add info about last restart date. -->
            </td>
            <td class="kd-replicasetdetail-table-cell">
              {{pod.startTime | relativeTime}}
              <md-tooltip>{{pod.startTime | date:'short'}}</md-tooltip>
            </td>
            <td class="kd-replicasetdetail-table-cell">
              0.4 CPU<!-- TODO(maciaszczykm): Fill with data and plot. -->
            </td>
            <td class="kd-replicasetdetail-table-cell">
              12 MB<!-- TODO(maciaszczykm): Fill with data and plot. -->
            </td>
            <td class="kd-replicasetdetail-table-cell">{{pod.podIP}}</td>
            <td class="kd-replicasetdetail-table-cell">{{pod.nodeName}}</td>
            <td class="kd-replicasetdetail-table-cell">
              <span>
                Logs<i class="material-icons kd-replicasetdetail-table-icon">arrow_drop_down</i>
              </span>
              <!-- TODO(maciaszczykm): Handle it. -->
            </td>
            <td class="kd-replicasetdetail-table-cell">
              <md-button class="md-icon-button">
                <md-icon md-font-library="material-icons">more_vert</md-icon>
                <!-- TODO(maciaszczykm): Handle it. -->
              </md-button>
            </td>
          </tr>
          </tbody>
        </table>
      </md-content>
    </md-tab>
    <md-tab label="Events">
      <md-content flex>
        <div class="kd-replicasetdetail-options" layout="row">
          <md-input-container class="kd-replicasetdetail-option-picker">
            <label>Type</label>
            <md-select ng-model="ctrl.eventType"
                       ng-change="ctrl.handleEventFiltering()" required>
              <md-option ng-repeat="type in ctrl.eventTypeFilter" ng-value="type">
                {{type}}
              </md-option>
            </md-select>
          </md-input-container>
          <md-input-container class="kd-replicasetdetail-option-picker">
            <label>Source</label>
            <md-select ng-model="ctrl.eventSource"
                       ng-change="ctrl.handleEventFiltering()" required>
              <md-option ng-repeat="source in ctrl.eventSourceFilter" ng-value="source">
                {{source}}
              </md-option>
            </md-select>
          </md-input-container>
        </div>
        <table class="kd-replicasetdetail-table" cellspacing="0" cellpadding="15">
          <thead>
          <tr>
            <th class="kd-replicasetdetail-table-header">
              <kd-sorted-header currently-selected-column="ctrl.sortEventsBy"
                                currently-selected-order="ctrl.eventsOrder"
                                column-name="message" tooltip="Event message">
                Message
              </kd-sorted-header>
            </th>
            <th class="kd-replicasetdetail-table-header">
              <kd-sorted-header currently-selected-column="ctrl.sortEventsBy"
                                currently-selected-order="ctrl.eventsOrder"
                                column-name="['sourceComponent','sourceHost']"
                                tooltip="Source of the event, details of component and host">
                Source
              </kd-sorted-header>
            </th>
            <th class="kd-replicasetdetail-table-header">
              <kd-sorted-header currently-selected-column="ctrl.sortEventsBy"
                                currently-selected-order="ctrl.eventsOrder"
                                column-name="object" tooltip="Sub-object of the event">
                Sub-object
              </kd-sorted-header>
            </th>
            <th class="kd-replicasetdetail-table-header">
              <kd-sorted-header currently-selected-column="ctrl.sortEventsBy"
                                currently-selected-order="ctrl.eventsOrder"
                                column-name="count"
                                tooltip="Number of times, that the event occured">
                Count
              </kd-sorted-header>
            </th>
            <th class="kd-replicasetdetail-table-header">
              <kd-sorted-header currently-selected-column="ctrl.sortEventsBy"
                                currently-selected-order="ctrl.eventsOrder"
                                column-name="firstSeen"
                                tooltip="When the event was seen for the first time">
                First seen
              </kd-sorted-header>
            </th>
            <th class="kd-replicasetdetail-table-header">
              <kd-sorted-header currently-selected-column="ctrl.sortEventsBy"
                                currently-selected-order="ctrl.eventsOrder"
                                column-name="lastSeen"
                                tooltip="When the event was seen for the last time">
                Last seen
              </kd-sorted-header>
            </th>
          </tr>
          </thead>
          <tbody>
          <tr ng-repeat="event in ctrl.events | orderBy:ctrl.sortEventsBy:ctrl.eventsOrder">
            <td class="kd-replicasetdetail-table-cell">
              <i ng-if="ctrl.isEventWarning(event)"
                 class="material-icons kd-replicasetdetail-warning-icon">warning</i>
              {{event.message}}
            </td>
            <td class="kd-replicasetdetail-table-cell">
              {{event.sourceComponent}} {{event.sourceHost}}
            </td>
            <td class="kd-replicasetdetail-table-cell">{{event.object}}</td>
            <td class="kd-replicasetdetail-table-cell">{{event.count}}</td>
            <td class="kd-replicasetdetail-table-cell">{{event.firstSeen | date:'short'}}</td>
            <td class="kd-replicasetdetail-table-cell">{{event.lastSeen | date:'short'}}</td>
          </tr>
          </tbody>
        </table>
    </md-tab>
  </md-tabs>
</md-content>