mirror of https://github.com/portainer/portainer
fix(gitoptions): git app edit ui tweaks [EE-4584] (#8159)
Ali
GitHub
parent
eba5879ec8
commit
563ead85cc
|
|
@ -954,7 +954,7 @@
|
|||
<pr-icon icon="'boxes'"></pr-icon>
|
||||
Global
|
||||
</div>
|
||||
<p>Application will be deployed as a DaemonSet with an instance on each node of the sdfh</p>
|
||||
<p>Application will be deployed as a DaemonSet with an instance on each node of the cluster</p>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
Enter - Find next <br />
|
||||
Shift+Enter - Find previous <br />'"
|
||||
class-name="'[&>span]:!text-left'"
|
||||
set-html-message="true"
|
||||
>
|
||||
</portainer-tooltip>
|
||||
<portainer-tooltip
|
||||
|
|
@ -31,6 +32,7 @@
|
|||
Enter - Find next <br />
|
||||
Shift+Enter - Find previous <br />'"
|
||||
class-name="'[&>span]:!text-left'"
|
||||
set-html-message="true"
|
||||
>
|
||||
</portainer-tooltip>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@ import { FeatureId } from '@/react/portainer/feature-flags/enums';
|
|||
|
||||
class GitFormAutoUpdateFieldsetController {
|
||||
/* @ngInject */
|
||||
constructor($scope, clipboard) {
|
||||
Object.assign(this, { $scope, clipboard });
|
||||
constructor($scope, clipboard, StateManager) {
|
||||
Object.assign(this, { $scope, clipboard, StateManager });
|
||||
|
||||
this.onChangeAutoUpdate = this.onChangeField('RepositoryAutomaticUpdates');
|
||||
this.onChangeMechanism = this.onChangeField('RepositoryMechanism');
|
||||
|
|
@ -29,6 +29,10 @@ class GitFormAutoUpdateFieldsetController {
|
|||
});
|
||||
};
|
||||
}
|
||||
|
||||
$onInit() {
|
||||
this.environmentType = this.StateManager.getState().endpoint.mode.provider;
|
||||
}
|
||||
}
|
||||
|
||||
export default GitFormAutoUpdateFieldsetController;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,16 @@
|
|||
<ng-form name="autoUpdateForm">
|
||||
<ng-form name="autoUpdateForm form-group">
|
||||
<div class="small vertical-center mb-2">
|
||||
<pr-icon icon="'info'" mode="'primary'"></pr-icon>
|
||||
<span class="text-muted">
|
||||
When enabled, at each polling interval or webhook invocation, if the git repo differs from what was stored locally on the last git pull, the changes are deployed.</span
|
||||
>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-12">
|
||||
<por-switch-field
|
||||
name="'autoUpdate'"
|
||||
checked="$ctrl.model.RepositoryAutomaticUpdates"
|
||||
label="'Automatic Updates'"
|
||||
label="'Automatic updates'"
|
||||
label-class="'col-sm-3 col-lg-2'"
|
||||
on-change="($ctrl.onChangeAutoUpdate)"
|
||||
switch-values="{on:'Yes',off:'No'}"
|
||||
|
|
@ -13,8 +19,9 @@
|
|||
</div>
|
||||
<div class="small vertical-center" ng-if="$ctrl.model.RepositoryAutomaticUpdates">
|
||||
<pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon>
|
||||
<span class="text-warning"
|
||||
>Any changes to this stack or application made locally in Portainer will be overridden, which may cause service interruption. Do you wish to continue?</span
|
||||
<span class="text-muted"
|
||||
>Any changes to this stack or application that have been made locally via Portainer or directly in the cluster will be overwritten by the git repository content, which may
|
||||
cause service interruption.</span
|
||||
>
|
||||
</div>
|
||||
<div class="form-group mt-2" ng-if="$ctrl.model.RepositoryAutomaticUpdates">
|
||||
|
|
@ -34,7 +41,13 @@
|
|||
</div>
|
||||
|
||||
<div class="form-group" ng-if="$ctrl.model.RepositoryAutomaticUpdates && $ctrl.model.RepositoryMechanism === 'Webhook'">
|
||||
<label for="repository_mechanism" class="col-sm-3 col-lg-2 control-label text-left"> Webhook </label>
|
||||
<label for="repository_mechanism" class="col-sm-3 col-lg-2 control-label text-left">
|
||||
Webhook
|
||||
<portainer-tooltip
|
||||
message="'See <a href=\'https://docs.portainer.io/user/kubernetes/applications/manifest#automatic-updates\' target=\'_blank\' rel=\'noreferrer\'>Portainer documentation on webhook usage</a>.'"
|
||||
set-html-message="true"
|
||||
></portainer-tooltip>
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<span class="text-muted"> {{ $ctrl.model.RepositoryWebhookURL | truncatelr }} </span>
|
||||
<button type="button" class="btn btn-sm btn-light btn-sm space-left vertical-center" ng-if="$ctrl.model.RepositoryWebhookURL" ng-click="$ctrl.copyWebhook()">
|
||||
|
|
@ -46,7 +59,12 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="form-group" ng-if="$ctrl.model.RepositoryAutomaticUpdates && $ctrl.model.RepositoryMechanism === 'Interval'">
|
||||
<label for="repository_fetch_interval" class="col-sm-3 col-lg-2 control-label text-left required"> Fetch interval </label>
|
||||
<label for="repository_fetch_interval" class="col-sm-3 col-lg-2 control-label text-left required">
|
||||
Fetch interval
|
||||
<portainer-tooltip
|
||||
message="'Specify how frequently polling occurs using syntax such as, 5m = 5 minutes, 24h = 24 hours, 6h40m = 6 hours and 40 minutes.'"
|
||||
></portainer-tooltip>
|
||||
</label>
|
||||
<div class="col-sm-8">
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -90,18 +108,12 @@
|
|||
name="'forceUpdate'"
|
||||
feature-id="$ctrl.limitedFeature"
|
||||
checked="$ctrl.model.RepositoryAutomaticUpdatesForce"
|
||||
label="'Force Redeployment'"
|
||||
label="$ctrl.environmentType === 'KUBERNETES' ? 'Always apply manifest' : 'Force redeployment'"
|
||||
tooltip="$ctrl.environmentType === 'KUBERNETES' ? '<p>If enabled, then when redeploy is triggered via the webhook or polling, kubectl apply is always performed, even if Portainer detects no difference between the git repo and what was stored locally on last git pull.</ p><p>This is useful if you want your git repo to be the source of truth and are fine with changes made directly to resources in the cluster being overwritten.</ p>' : ''"
|
||||
set-tooltip-html-message="true"
|
||||
label-class="'col-sm-3 col-lg-2'"
|
||||
on-change="($ctrl.onChangeAutoUpdateForce)"
|
||||
></por-switch-field>
|
||||
</div>
|
||||
</div>
|
||||
<div class="small vertical-center" ng-if="$ctrl.model.RepositoryAutomaticUpdates">
|
||||
<pr-icon icon="'info'" mode="'primary'"></pr-icon>
|
||||
<span class="text-muted">When enabled, enforces automatic deployment at each interval or webhook invocation.</span>
|
||||
</div>
|
||||
<div class="small vertical-center" ng-if="!$ctrl.model.RepositoryAutomaticUpdates">
|
||||
<pr-icon icon="'info'" mode="'primary'"></pr-icon>
|
||||
<span class="text-muted">When enabled, updates from the git repository will occur automatically at an interval or webhook.</span>
|
||||
</div>
|
||||
</ng-form>
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ export const componentsModule = angular
|
|||
)
|
||||
.component(
|
||||
'portainerTooltip',
|
||||
r2a(Tooltip, ['message', 'position', 'className'])
|
||||
r2a(Tooltip, ['message', 'position', 'className', 'setHtmlMessage'])
|
||||
)
|
||||
.component('badge', r2a(Badge, ['type', 'className']))
|
||||
.component('fileUploadField', fileUploadField)
|
||||
|
|
|
|||
|
|
@ -14,4 +14,5 @@ export const switchField = r2a(SwitchField, [
|
|||
'onChange',
|
||||
'featureId',
|
||||
'switchClass',
|
||||
'setTooltipHtmlMessage',
|
||||
]);
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</div>
|
||||
<div class="row text-center">
|
||||
Logout in progress...
|
||||
<pr-icon icon="'settings'" class-name="'spin space-left'"></pr-icon>
|
||||
<pr-icon icon="'settings'" class-name="'animate-spin-slow space-left'"></pr-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import { HelpCircle } from 'lucide-react';
|
||||
import { useMemo } from 'react';
|
||||
import sanitize from 'sanitize-html';
|
||||
|
||||
import { TooltipWithChildren, Position } from '../TooltipWithChildren';
|
||||
|
||||
|
|
@ -6,12 +8,27 @@ export interface Props {
|
|||
position?: Position;
|
||||
message: string;
|
||||
className?: string;
|
||||
setHtmlMessage?: boolean;
|
||||
}
|
||||
|
||||
export function Tooltip({ message, position = 'bottom', className }: Props) {
|
||||
export function Tooltip({
|
||||
message,
|
||||
position = 'bottom',
|
||||
className,
|
||||
setHtmlMessage,
|
||||
}: Props) {
|
||||
// allow angular views to set html messages for the tooltip
|
||||
const htmlMessage = useMemo(() => {
|
||||
if (setHtmlMessage) {
|
||||
// eslint-disable-next-line react/no-danger
|
||||
return <div dangerouslySetInnerHTML={{ __html: sanitize(message) }} />;
|
||||
}
|
||||
return null;
|
||||
}, [setHtmlMessage, message]);
|
||||
|
||||
return (
|
||||
<TooltipWithChildren
|
||||
message={message}
|
||||
message={htmlMessage || message}
|
||||
position={position}
|
||||
className={className}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ export type Position = 'top' | 'right' | 'bottom' | 'left';
|
|||
|
||||
export interface Props {
|
||||
position?: Position;
|
||||
message: string;
|
||||
message: React.ReactNode;
|
||||
className?: string;
|
||||
children: React.ReactElement;
|
||||
heading?: string;
|
||||
|
|
|
|||
|
|
@ -53,4 +53,6 @@
|
|||
box-shadow: 0 2px 4px 0 rgb(34 36 38 / 12%), 0 2px 10px 0 rgb(34 36 38 / 15%);
|
||||
padding: 8px 12px;
|
||||
text-align: center;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ export interface Props {
|
|||
dataCy?: string;
|
||||
disabled?: boolean;
|
||||
featureId?: FeatureId;
|
||||
setTooltipHtmlMessage?: boolean;
|
||||
}
|
||||
|
||||
export function SwitchField({
|
||||
|
|
@ -34,6 +35,7 @@ export function SwitchField({
|
|||
onChange,
|
||||
featureId,
|
||||
switchClass,
|
||||
setTooltipHtmlMessage,
|
||||
}: Props) {
|
||||
const toggleName = name ? `toggle_${name}` : '';
|
||||
|
||||
|
|
@ -47,7 +49,9 @@ export function SwitchField({
|
|||
)}
|
||||
>
|
||||
{label}
|
||||
{tooltip && <Tooltip message={tooltip} />}
|
||||
{tooltip && (
|
||||
<Tooltip message={tooltip} setHtmlMessage={setTooltipHtmlMessage} />
|
||||
)}
|
||||
</span>
|
||||
<Switch
|
||||
className={clsx('space-right', switchClass)}
|
||||
|
|
|
|||
Loading…
Reference in New Issue