mirror of
https://github.com/portainer/portainer.git
synced 2025-08-02 12:25:22 +02:00
feat(ui): UI improvements node details screen EE-3468 (#7256)
This commit is contained in:
Prabhat Khera
GitHub
parent
4997e9c7be
commit
6aa7fdb4f2
5 changed files with 111 additions and 83 deletions
|
|
@ -9,7 +9,7 @@
|
|||
<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>
|
||||
<uib-tab-heading class="flex-center gap-1"> <pr-icon icon="'hard-drive'" size="'sm'" feather="true"></pr-icon> Node </uib-tab-heading>
|
||||
|
||||
<form class="form-horizontal" name="kubernetesNodeUpdateForm" style="padding: 20px" autocomplete="off">
|
||||
<table class="table">
|
||||
|
|
@ -56,12 +56,12 @@
|
|||
<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>
|
||||
<span class="small vertical-center" ng-if="ctrl.state.isDrainOperation && ctrl.formValues.Availability === ctrl.availabilities.DRAIN">
|
||||
<pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
|
||||
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>
|
||||
<span class="small vertical-center" ng-if="ctrl.state.isContainPortainer && ctrl.formValues.Availability === ctrl.availabilities.DRAIN">
|
||||
<pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon>
|
||||
Cannot drain a node where this Portainer instance is running.
|
||||
</span>
|
||||
</td>
|
||||
|
|
@ -89,10 +89,10 @@
|
|||
<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>
|
||||
<span class="label label-default interactive vertical-center" ng-click="ctrl.addLabel()"> <pr-icon icon="'plus'" feather="true"></pr-icon> add label </span>
|
||||
</div>
|
||||
|
||||
<div class="form-inline" ng-repeat="label in ctrl.formValues.Labels" style="padding: 3px 0 3px 0">
|
||||
<div class="form-inline py-1" ng-repeat="label in ctrl.formValues.Labels">
|
||||
<div class="input-group col-sm-3 input-group-sm" ng-class="{ striked: label.NeedsDeletion }">
|
||||
<span class="input-group-addon">Key</span>
|
||||
<input
|
||||
|
|
@ -118,8 +118,13 @@
|
|||
</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
|
||||
ng-if="!ctrl.isSystemLabel($index) && !label.NeedsDeletion"
|
||||
class="btn btn-sm btn-dangerlight btn-only-icon"
|
||||
type="button"
|
||||
ng-click="ctrl.removeLabel($index)"
|
||||
>
|
||||
<pr-icon icon="'x'" feather="true" mode="'error'" size="'sm'"></pr-icon>
|
||||
</button>
|
||||
<button ng-if="!ctrl.isSystemLabel($index) && label.NeedsDeletion" class="btn btn-sm btn-primary" type="button" ng-click="ctrl.restoreLabel($index)">
|
||||
Restore
|
||||
|
|
@ -128,17 +133,13 @@
|
|||
<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"
|
||||
>
|
||||
<div class="small mt-2" 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>
|
||||
<p ng-message="required" class="vertical-center"> <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> 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
|
||||
>
|
||||
<p ng-if="ctrl.state.duplicateLabelKeys[$index] !== undefined" class="vertical-center">
|
||||
<pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This label key is already defined.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -149,7 +150,7 @@
|
|||
<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>
|
||||
<span class="label label-default interactive vertical-center" ng-click="ctrl.addTaint()"> <pr-icon icon="'plus'" feather="true"></pr-icon> add taint </span>
|
||||
</div>
|
||||
|
||||
<div class="form-inline" ng-repeat="taint in ctrl.formValues.Taints" style="padding: 3px 0 3px 0">
|
||||
|
|
@ -175,23 +176,23 @@
|
|||
</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 ng-if="!taint.NeedsDeletion" class="btn btn-sm btn-dangerlight btn-only-icon" type="button" ng-click="ctrl.removeTaint($index)">
|
||||
<pr-icon icon="'x'" feather="true" mode="'error'" size="'sm'"></pr-icon>
|
||||
</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"
|
||||
class="small"
|
||||
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>
|
||||
<p ng-message="required" class="vertical-center"> <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> 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
|
||||
>
|
||||
<p ng-if="ctrl.state.duplicateTaintKeys[$index] !== undefined">
|
||||
<pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This taint key is already defined.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -222,9 +223,9 @@
|
|||
</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>
|
||||
<div class="flex-center gap-1"> <pr-icon icon="'rotate-ccw'" size="'sm'" feather="true"></pr-icon> Events </div>
|
||||
<div class="flex-center gap-1" ng-if="ctrl.hasEventWarnings()">
|
||||
<pr-icon icon="'alert-circle'" mode="'warning-alt'" size="'sm'" feather="true"></pr-icon>
|
||||
{{ ctrl.state.eventWarningCount }} warning(s)
|
||||
</div>
|
||||
</uib-tab-heading>
|
||||
|
|
@ -241,7 +242,9 @@
|
|||
</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>
|
||||
<uib-tab-heading class="vertical-center">
|
||||
<div class="flex-center gap-1"> <pr-icon icon="'code'" size="'sm'" feather="true"></pr-icon> YAML </div>
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue