portainer/app/kubernetes/views/cluster/node/node.html

270 lines
14 KiB
HTML

<page-header ng-if="ctrl.state.viewReady" title="'Node details'" breadcrumbs="[{ label:'Cluster', link:'kubernetes.cluster' }, ctrl.node.Name]" reload="true"></page-header>
<kubernetes-view-loading view-ready="ctrl.state.viewReady"></kubernetes-view-loading>
<div ng-if="ctrl.state.viewReady">
<div class="row">
<div class="col-sm-12">
<rd-widget>
<rd-widget-body classes="no-padding">
<uib-tabset active="ctrl.state.activeTab" justified="true" type="pills">
<uib-tab index="0" classes="btn-sm" select="ctrl.selectTab(0)">
<uib-tab-heading> <i class="fa fa-hdd space-right" aria-hidden="true"></i> Node </uib-tab-heading>
<form class="form-horizontal" name="kubernetesNodeUpdateForm" style="padding: 20px" autocomplete="off">
<table class="table">
<tbody ng-if="ctrl.node">
<tr>
<td>Hostname</td>
<td>
{{ ctrl.node.Name }}
<span class="label label-primary image-tag" style="margin-left: 5px" ng-if="ctrl.node.Api">api</span>
</td>
</tr>
<tr ng-if="ctrl.node.Api">
<td> Kubernetes API </td>
<td>{{ ctrl.node.IPAddress }}:{{ ctrl.node.Port }}</td>
</tr>
<tr>
<td>Role</td>
<td>{{ ctrl.node.Role }}</td>
</tr>
<tr>
<td>Kubelet version</td>
<td>{{ ctrl.node.Version }}</td>
</tr>
<tr>
<td>Creation date</td>
<td>{{ ctrl.node.CreationDate | getisodate }}</td>
</tr>
<tr>
<td>Status</td>
<td>
<span class="label label-{{ ctrl.node.Status | kubernetesNodeStatusColor }}">
{{ ctrl.node.Status }}
</span>
<span ng-if="ctrl.node.Status == 'Warning'" class="text text-warning">
{{ ctrl.node.Conditions | kubernetesNodeConditionsMessage }}
</span>
</td>
</tr>
<tr>
<td class="col-xs-3"> Availability </td>
<td class="col-xs-9">
<select class="form-control" name="availability" style="display: inline-block; width: 16rem" ng-model="ctrl.formValues.Availability">
<option>{{ ctrl.availabilities.ACTIVE }}</option>
<option>{{ ctrl.availabilities.PAUSE }}</option>
<option>{{ ctrl.availabilities.DRAIN }}</option>
</select>
<span class="small text-warning" ng-if="ctrl.state.isDrainOperation && ctrl.formValues.Availability === ctrl.availabilities.DRAIN">
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
Cannot use this action while another node is currently being drained.
</span>
<span class="small text-warning" ng-if="ctrl.state.isContainPortainer && ctrl.formValues.Availability === ctrl.availabilities.DRAIN">
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
Cannot drain a node where this Portainer instance is running.
</span>
</td>
</tr>
</tbody>
</table>
<div style="padding: 8px">
<kubernetes-resource-reservation
ng-if="ctrl.resourceReservation"
cpu-reservation="ctrl.resourceReservation.CPU"
cpu-usage="ctrl.resourceUsage.CPU"
cpu-limit="ctrl.node.CPU"
memory-reservation="ctrl.resourceReservation.Memory"
memory-usage="ctrl.resourceUsage.Memory"
memory-limit="ctrl.memoryLimit"
description="Resource reservation represents the total amount of resource assigned to all the applications running on this node."
display-usage="ctrl.hasResourceUsageAccess()"
>
</kubernetes-resource-reservation>
</div>
<div style="padding: 8px">
<!-- #region labels -->
<div class="col-sm-12 form-section-title"> Labels </div>
<div style="margin-bottom: 10px">
<span class="label label-default interactive" ng-click="ctrl.addLabel()"> <i class="fa fa-plus-circle" aria-hidden="true"></i> add label </span>
</div>
<div class="form-inline" ng-repeat="label in ctrl.formValues.Labels" style="padding: 3px 0 3px 0">
<div class="input-group col-sm-3 input-group-sm" ng-class="{ striked: label.NeedsDeletion }">
<span class="input-group-addon">Key</span>
<input
type="text"
class="form-control"
name="label_key_{{ $index }}"
ng-model="label.Key"
ng-change="ctrl.onChangeLabelKey($index)"
ng-disabled="ctrl.isSystemLabel($index)"
required
/>
</div>
<div class="input-group col-sm-3 input-group-sm" ng-class="{ striked: label.NeedsDeletion }">
<span class="input-group-addon">Value</span>
<input
type="text"
class="form-control"
name="label_value_{{ $index }}"
ng-change="ctrl.onChangeLabel($index)"
ng-model="label.Value"
ng-disabled="ctrl.isSystemLabel($index)"
/>
</div>
<div class="input-group col-sm-1 input-group-sm">
<div style="white-space: nowrap">
<button ng-if="!ctrl.isSystemLabel($index) && !label.NeedsDeletion" class="btn btn-sm btn-danger" type="button" ng-click="ctrl.removeLabel($index)">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
<button ng-if="!ctrl.isSystemLabel($index) && label.NeedsDeletion" class="btn btn-sm btn-primary" type="button" ng-click="ctrl.restoreLabel($index)">
Restore
</button>
<span class="label label-warning label-sm image-tag" ng-if="label.IsUsed && !ctrl.isSystemLabel($index)" style="margin-left: 5px">used</span>
<span class="label label-info image-tag" ng-if="ctrl.isSystemLabel($index)" style="margin-left: 5px">system</span>
</div>
</div>
<div
class="small text-warning"
style="margin-top: 5px"
ng-show="kubernetesNodeUpdateForm['label_key_' + $index].$invalid || ctrl.state.duplicateLabelKeys[$index] !== undefined"
>
<ng-messages for="kubernetesNodeUpdateForm['label_key_' + $index].$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Label key is required.</p>
</ng-messages>
<p ng-if="ctrl.state.duplicateLabelKeys[$index] !== undefined"
><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This label key is already defined.</p
>
</div>
</div>
<!-- #endregion -->
<!-- #region taints -->
<div class="col-sm-12 form-section-title" style="margin-top: 20px"> Taints </div>
<div style="margin-bottom: 10px">
<span class="label label-default interactive" ng-click="ctrl.addTaint()"> <i class="fa fa-plus-circle" aria-hidden="true"></i> add taint </span>
</div>
<div class="form-inline" ng-repeat="taint in ctrl.formValues.Taints" style="padding: 3px 0 3px 0">
<div class="input-group col-sm-3 input-group-sm" ng-class="{ striked: taint.NeedsDeletion }">
<span class="input-group-addon">Key</span>
<input type="text" class="form-control" name="taint_key_{{ $index }}" ng-model="taint.Key" ng-change="ctrl.onChangeTaintKey($index)" required />
</div>
<div class="input-group col-sm-3 input-group-sm" ng-class="{ striked: taint.NeedsDeletion }">
<span class="input-group-addon">Value</span>
<input type="text" class="form-control" name="taint_value_{{ $index }}" ng-model="taint.Value" ng-change="ctrl.onChangeTaint($index)" />
</div>
<div class="input-group col-sm-3 input-group-sm" ng-class="{ striked: taint.NeedsDeletion }">
<span class="input-group-addon">Effect</span>
<select
id="taint_effect_{{ $index }}"
name="taint_effect_{{ $index }}"
class="form-control"
ng-model="taint.Effect"
ng-change="ctrl.onChangeTaint($index)"
;
ng-options="effect as effect for effect in ctrl.availableEffects"
></select>
</div>
<div class="input-group col-sm-1 input-group-sm">
<div>
<button ng-if="!taint.NeedsDeletion" class="btn btn-sm btn-danger" type="button" ng-click="ctrl.removeTaint($index)">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
<button ng-if="taint.NeedsDeletion" class="btn btn-sm btn-primary" type="button" ng-click="ctrl.restoreTaint($index)"> Restore </button>
</div>
</div>
<div
class="small text-warning"
style="margin-top: 5px"
ng-show="kubernetesNodeUpdateForm['taint_key_' + $index].$invalid || ctrl.state.duplicateTaintKeys[$index] !== undefined"
>
<ng-messages for="kubernetesNodeUpdateForm['taint_key_' + $index].$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Taint key is required.</p>
</ng-messages>
<p ng-if="ctrl.state.duplicateTaintKeys[$index] !== undefined"
><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This taint key is already defined.</p
>
</div>
</div>
<!-- #endregion -->
<!-- #region actions -->
<div class="col-sm-12 form-section-title" style="margin-top: 20px"> Actions </div>
<div class="form-group">
<div class="col-sm-12">
<button
class="btn btn-primary btn-sm"
type="button"
style="margin-left: 0"
ng-click="ctrl.updateNode()"
ng-disabled="kubernetesNodeUpdateForm.$invalid || !ctrl.isFormValid()"
>
Update node
</button>
<button class="btn btn-default btn-sm" type="button" ng-click="ctrl.resetFormValues()" ng-disabled="ctrl.isNoChangesMade()"> Cancel </button>
</div>
</div>
<!-- #endregion -->
</div>
</form>
</uib-tab>
<uib-tab index="1" classes="btn-sm" select="ctrl.selectTab(1)">
<uib-tab-heading>
<i class="fa fa-history space-right" aria-hidden="true"></i> Events
<div ng-if="ctrl.hasEventWarnings()">
<i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px"></i>
{{ ctrl.state.eventWarningCount }} warning(s)
</div>
</uib-tab-heading>
<kubernetes-events-datatable
title-text="Events"
title-icon="fa-history"
dataset="ctrl.events"
table-key="kubernetes.node.events"
order-by="Date"
reverse-order="true"
loading="ctrl.state.eventsLoading"
refresh-callback="ctrl.getEvents"
>
</kubernetes-events-datatable>
</uib-tab>
<uib-tab index="2" ng-if="ctrl.node.Yaml" select="ctrl.showEditor()" classes="btn-sm">
<uib-tab-heading> <i class="fa fa-code space-right" aria-hidden="true"></i> YAML </uib-tab-heading>
<div style="padding-right: 25px" ng-if="ctrl.state.showEditorTab">
<kubernetes-yaml-inspector key="node-yaml" data="ctrl.node.Yaml"> </kubernetes-yaml-inspector>
</div>
</uib-tab>
</uib-tabset>
</rd-widget-body>
</rd-widget>
</div>
</div>
<div class="row" ng-if="ctrl.applications && ctrl.applications.length > 0">
<div class="col-sm-12">
<kubernetes-node-applications-datatable
dataset="ctrl.applications"
table-key="kubernetes.node.applications"
order-by="Name"
refresh-callback="ctrl.getApplications"
loading="ctrl.state.applicationsLoading"
title-text="Applications running on this node"
title-icon="fa-laptop-code"
>
</kubernetes-node-applications-datatable>
</div>
</div>
</div>