github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
app/portainer/components/endpointSecurity/porEndpointSecurity.html
View File

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

9
app/portainer/components/endpointSecurity/porEndpointSecurityController.js
View File

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

30
app/portainer/views/endpoints/edit/endpoint.html
View File

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

13
app/react/components/TagSelector/TagSelector.tsx
View File

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

2
app/react/components/buttons/AddButton.tsx
View File

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

6
app/react/components/buttons/CopyButton/CopyButton.tsx
View File

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

12
app/react/components/form-components/InputList/InputList.tsx
View File

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

2
app/react/edge/components/EdgeScriptForm/EdgeScriptSettingsFieldset.tsx
View File

@ -70,6 +70,8 @@ export function EdgeScriptSettingsFieldset({
setFieldValue('allowSelfSignedCertificates', value) setFieldValue('allowSelfSignedCertificates', value)
} }
label="Allow self-signed certs" 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" tooltip="When allowing self-signed certificates the edge agent will ignore the domain validation when connecting to Portainer via HTTPS"
/> />
</div> </div>