feat(ui): EE-3718 css portainer environments edit (#7318)

pull/7357/head^2
congs 2022-08-03 10:19:28 +12:00 committed by GitHub
parent b28f635fb2
commit 21fbd37bfb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 65 additions and 39 deletions

View File

@ -2,11 +2,13 @@
<!-- tls-checkbox -->
<div class="form-group">
<div class="col-sm-12">
<label for="tls" class="control-label text-left">
TLS
<portainer-tooltip message="'Enable this option if you need to connect to the Docker environment with TLS.'"></portainer-tooltip>
</label>
<label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="$ctrl.formData.TLS" /><i></i> </label>
<por-switch-field
label="'TLS'"
label-class="'col-sm-2'"
checked="$ctrl.formData.TLS"
on-change="($ctrl.onToggleTLS)"
tooltip="'Enable this option if you need to connect to the Docker environment with TLS.'"
></por-switch-field>
</div>
</div>
<!-- !tls-checkbox -->
@ -75,10 +77,10 @@
<label class="col-sm-3 col-lg-2 control-label text-left">TLS CA certificate</label>
<div class="col-sm-9 col-lg-10">
<button type="button" class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.formData.TLSCACert">Select file</button>
<span style="margin-left: 5px">
<span class="space-left">
{{ $ctrl.formData.TLSCACert.name }}
<i class="fa fa-check green-icon" ng-if="$ctrl.formData.TLSCACert && $ctrl.formData.TLSCACert === $ctrl.endpoint.TLSConfig.TLSCACert" aria-hidden="true"></i>
<i class="fa fa-times red-icon" ng-if="!$ctrl.formData.TLSCACert" aria-hidden="true"></i>
<pr-icon icon="'check'" ng-if="$ctrl.formData.TLSCACert && $ctrl.formData.TLSCACert === $ctrl.endpoint.TLSConfig.TLSCACert" mode="'success'" feather="true"></pr-icon>
<pr-icon icon="'x'" ng-if="!$ctrl.formData.TLSCACert" mode="'danger'" feather="true"></pr-icon>
</span>
</div>
</div>
@ -90,10 +92,10 @@
<label for="tls_cert" class="col-sm-3 col-lg-2 control-label text-left">TLS certificate</label>
<div class="col-sm-9 col-lg-10">
<button type="button" class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.formData.TLSCert">Select file</button>
<span style="margin-left: 5px">
<span class="space-left">
{{ $ctrl.formData.TLSCert.name }}
<i class="fa fa-check green-icon" ng-if="$ctrl.formData.TLSCert && $ctrl.formData.TLSCert === $ctrl.endpoint.TLSConfig.TLSCert" aria-hidden="true"></i>
<i class="fa fa-times red-icon" ng-if="!$ctrl.formData.TLSCert" aria-hidden="true"></i>
<pr-icon icon="'check'" ng-if="$ctrl.formData.TLSCert && $ctrl.formData.TLSCert === $ctrl.endpoint.TLSConfig.TLSCert" mode="'success'" feather="true"></pr-icon>
<pr-icon icon="'x'" ng-if="!$ctrl.formData.TLSCert" mode="'danger'" feather="true"></pr-icon>
</span>
</div>
</div>
@ -103,10 +105,10 @@
<label class="col-sm-3 col-lg-2 control-label text-left">TLS key</label>
<div class="col-sm-9 col-lg-10">
<button type="button" class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.formData.TLSKey">Select file</button>
<span style="margin-left: 5px">
<span class="space-left">
{{ $ctrl.formData.TLSKey.name }}
<i class="fa fa-check green-icon" ng-if="$ctrl.formData.TLSKey && $ctrl.formData.TLSKey === $ctrl.endpoint.TLSConfig.TLSKey" aria-hidden="true"></i>
<i class="fa fa-times red-icon" ng-if="!$ctrl.formData.TLSKey" aria-hidden="true"></i>
<pr-icon icon="'check'" ng-if="$ctrl.formData.TLSKey && $ctrl.formData.TLSKey === $ctrl.endpoint.TLSConfig.TLSKey" mode="'success'" feather="true"></pr-icon>
<pr-icon icon="'x'" ng-if="!$ctrl.formData.TLSKey" mode="'danger'" feather="true"></pr-icon>
</span>
</div>
</div>

View File

@ -1,7 +1,14 @@
angular.module('portainer.app').controller('porEndpointSecurityController', [
function () {
'$scope',
function ($scope) {
var ctrl = this;
ctrl.onToggleTLS = function (newValue) {
$scope.$evalAsync(() => {
ctrl.formData.TLS = newValue;
});
};
this.$onInit = $onInit;
function $onInit() {
if (ctrl.endpoint) {

View File

@ -4,8 +4,8 @@
<div ng-if="state.edgeEndpoint">
<information-panel ng-if="state.edgeAssociated" title-text="Edge information">
<span class="small text-muted">
<p>
<i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
<p class="vertical-center">
<pr-icon icon="'alert-circle'" mode="'primary'" feather="true"></pr-icon>
This Edge environment is associated to an Edge environment {{ state.kubernetesEndpoint ? '(Kubernetes)' : '(Docker)' }}.
</p>
<p>
@ -36,8 +36,8 @@
<rd-widget-body>
<div class="col-sm-12 form-section-title">Deploy an agent</div>
<span class="small text-muted">
<p>
<i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
<p class="vertical-center">
<pr-icon icon="'alert-circle'" mode="'primary'" feather="true"></pr-icon>
Refer to the platform related command below to deploy the Edge agent in your remote cluster.
</p>
<p>
@ -55,8 +55,8 @@
<span class="small text-muted">
<div class="col-sm-12 form-section-title" style="margin-top: 25px"> Join token </div>
<p>
<i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
<p class="vertical-center">
<pr-icon icon="'alert-circle'" mode="'primary'" feather="true"></pr-icon>
For those pre-staging the edge agent, use the following join token to associate the Edge agent with this environment.
</p>
<p> You can read more about pre-staging in the userguide available <a href="https://downloads.portainer.io/edge_agent_guide.pdf">here.</a> </p>
@ -64,9 +64,15 @@
<code>
{{ endpoint.EdgeKey }}
</code>
<div style="margin-top: 10px">
<span class="btn btn-primary btn-sm" ng-click="copyEdgeAgentKey()"><i class="fa fa-copy space-right" aria-hidden="true"></i>Copy token</span>
<span id="copyNotificationEdgeKey" style="margin-left: 7px; display: none; color: #23ae89"> <i class="fa fa-check" aria-hidden="true"></i> copied </span>
<div class="mt-2">
<span class="btn btn-primary btn-sm" ng-click="copyEdgeAgentKey()">
<pr-icon icon="'copy'" feather="true"></pr-icon>
Copy token
</span>
<span id="copyNotificationEdgeKey" class="vertical-center" style="margin-left: 7px; display: none; color: #23ae89">
<pr-icon icon="'check'" feather="true"></pr-icon>
copied
</span>
</div>
</div>
</span>
@ -76,15 +82,15 @@
</div>
<information-panel ng-if="state.kubernetesEndpoint && (!state.edgeEndpoint || state.edgeAssociated)" title-text="Kubernetes features configuration">
<span class="small text-muted">
<i class="fa fa-tools blue-icon" aria-hidden="true" style="margin-right: 2px"></i>
<span class="small text-muted vertical-center">
<pr-icon icon="'tool'" mode="'primary'" feather="true"></pr-icon>
You should configure the features available in this Kubernetes environment in the
<a ui-sref="kubernetes.cluster.setup({endpointId: endpoint.Id})">Kubernetes configuration</a> view.
</span>
</information-panel>
</div>
<div class="row">
<div class="row mt-4">
<div class="col-lg-12 col-md-12 col-xs-12">
<rd-widget>
<rd-widget-body>

View File

@ -2,6 +2,7 @@ import clsx from 'clsx';
import _ from 'lodash';
import { TagId } from '@/portainer/tags/types';
import { Icon } from '@/react/components/Icon';
import { useCreateTagMutation, useTags } from '@/portainer/tags/queries';
import { Creatable, Select } from '@@/form-components/ReactSelect';
@ -63,15 +64,17 @@ export function TagSelector({ value, allowCreate = false, onChange }: Props) {
<button
type="button"
title="Remove tag"
className={clsx(styles.removeTagBtn, 'space-left', 'tag')}
className={clsx(
styles.removeTagBtn,
'space-left',
'tag',
'vertical-center'
)}
onClick={() => handleRemove(tag.value)}
key={tag.value}
>
{tag.label}
<i
className="fa fa-trash-alt white-icon space-left"
aria-hidden="true"
/>
<Icon icon="trash-2" feather />
</button>
))}
</FormControl>

View File

@ -27,7 +27,7 @@ export function AddButton({ label, onClick, className, disabled }: Props) {
onClick={onClick}
disabled={disabled}
>
<Icon icon="plus" feather className="space-right" />
<Icon icon="plus-circle" feather />
{label}
</button>
);

View File

@ -33,14 +33,16 @@ export function CopyButton({
title="Copy Value"
type="button"
>
<Icon icon="copy" feather /> {children}
<Icon icon="copy" feather />
{children}
</Button>
<span
className={clsx(
copiedSuccessfully && styles.fadeout,
styles.displayText,
'space-left'
'space-left',
'vertical-center'
)}
>
<Icon icon="check" feather />

View File

@ -107,7 +107,11 @@ export function InputList<T = DefaultType>({
return (
<div
key={key}
className={clsx(styles.itemLine, { [styles.hasError]: !!error })}
className={clsx(
styles.itemLine,
{ [styles.hasError]: !!error },
'vertical-center'
)}
>
{Item ? (
<Item
@ -128,7 +132,7 @@ export function InputList<T = DefaultType>({
{!readOnly && movable && (
<>
<Button
size="small"
size="medium"
disabled={disabled || index === 0}
onClick={() => handleMoveUp(index)}
className="vertical-center btn-only-icon"
@ -136,7 +140,7 @@ export function InputList<T = DefaultType>({
<Icon icon="arrow-up" feather />
</Button>
<Button
size="small"
size="medium"
type="button"
disabled={disabled || index === value.length - 1}
onClick={() => handleMoveDown(index)}
@ -149,7 +153,7 @@ export function InputList<T = DefaultType>({
{!readOnly && (
<Button
color="dangerlight"
size="small"
size="medium"
onClick={() => handleRemoveItem(key, item)}
className="vertical-center btn-only-icon"
>

View File

@ -70,6 +70,8 @@ export function EdgeScriptSettingsFieldset({
setFieldValue('allowSelfSignedCertificates', value)
}
label="Allow self-signed certs"
labelClass="col-sm-3 col-lg-2"
switchValues={{ on: 'Yes', off: 'No' }}
tooltip="When allowing self-signed certificates the edge agent will ignore the domain validation when connecting to Portainer via HTTPS"
/>
</div>