Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-24 15:59:41 +02:00
Code Issues Releases Activity

fix(ui): kubernetes create from manifest page misalignments and incorrect loading icon [R8S-68] (#88)

Browse source
This commit is contained in:
Malcolm Lockyer 2024-11-07 09:04:24 +13:00 • committed by GitHub
parent 458d722d47
commit 81322664ea
5 changed files with 31 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

3
app/kubernetes/components/helm/helm-templates/helm-templates.html
View file

@ -41,8 +41,7 @@
Show custom values Show custom values
</button> </button>
<span class="small interactive vertical-center" ng-if="$ctrl.state.loadingValues" role="status"> <span class="small interactive vertical-center" ng-if="$ctrl.state.loadingValues" role="status">
<pr-icon icon="'refresh-cw'" class="mr-1"></pr-icon> <inline-loader children="'Loading values.yaml...'" />
Loading values.yaml...
</span> </span>
<button ng-if="$ctrl.state.showCustomValues" class="btn btn-xs btn-default vertical-center !ml-0 mr-2" ng-click="$ctrl.state.showCustomValues = false;"> <button ng-if="$ctrl.state.showCustomValues" class="btn btn-xs btn-default vertical-center !ml-0 mr-2" ng-click="$ctrl.state.showCustomValues = false;">
<pr-icon icon="'minus'" class="vertical-center"></pr-icon> <pr-icon icon="'minus'" class="vertical-center"></pr-icon>

21
app/kubernetes/views/deploy/deploy.html
View file

@ -31,7 +31,7 @@
<portainer-tooltip message="'If you have defined namespaces in your deployment file turning this on will enforce the use of those only in the deployment'"> <portainer-tooltip message="'If you have defined namespaces in your deployment file turning this on will enforce the use of those only in the deployment'">
</portainer-tooltip> </portainer-tooltip>
</label> </label>
<div class="col-sm-8 vertical-center pt-3"> <div class="col-sm-8 vertical-center pt-1">
<label class="switch"> <label class="switch">
<input type="checkbox" name="toggle_logo" ng-model="ctrl.formValues.namespace_toggle" data-cy="use-namespce-from-menifest" /> <input type="checkbox" name="toggle_logo" ng-model="ctrl.formValues.namespace_toggle" data-cy="use-namespce-from-menifest" />
<span class="slider round"></span> <span class="slider round"></span>
@ -135,14 +135,17 @@
></custom-templates-variables-field> ></custom-templates-variables-field>
</div> </div>
<span ng-if="ctrl.state.BuildMethod === ctrl.BuildMethods.CUSTOM_TEMPLATE && ctrl.state.templateId && ctrl.state.templateLoadFailed"> <span ng-if="ctrl.state.BuildMethod === ctrl.BuildMethods.CUSTOM_TEMPLATE && ctrl.state.templateId && ctrl.state.templateLoadFailed" class="row">
<p class="small vertical-center text-danger mb-5" ng-if="ctrl.currentUser.isAdmin || ctrl.currentUser.id === ctrl.state.template.CreatedByUserId"> <span class="col-sm-offset-3 col-lg-offset-2 col-sm-8">
<pr-icon icon="'alert-triangle'" mode="'danger'" size="'md'" feather="true"></pr-icon>Custom template could not be loaded, please <p class="small vertical-center text-danger mb-5" ng-if="ctrl.currentUser.isAdmin || ctrl.currentUser.id === ctrl.state.template.CreatedByUserId">
<a ui-sref="kubernetes.templates.custom.edit({id: ctrl.state.templateId})">click here</a> for configuration.</p <pr-icon icon="'alert-triangle'" mode="'danger'" size="'md'" feather="true"></pr-icon>Custom template could not be loaded, please
> <a ui-sref="kubernetes.templates.custom.edit({id: ctrl.state.templateId})">click here</a> for configuration.</p
<p class="small vertical-center text-danger mb-5" ng-if="!(ctrl.currentUser.isAdmin || ctrl.currentUser.id === ctrl.state.template.CreatedByUserId)"> >
<pr-icon icon="'alert-triangle'" mode="'danger'" size="'md'" feather="true"></pr-icon>Custom template could not be loaded, please contact your administrator.</p <p class="small vertical-center text-danger mb-5" ng-if="!(ctrl.currentUser.isAdmin || ctrl.currentUser.id === ctrl.state.template.CreatedByUserId)">
> <pr-icon icon="'alert-triangle'" mode="'danger'" size="'md'" feather="true"></pr-icon>Custom template could not be loaded, please contact your
administrator.</p
>
</span>
</span> </span>
<!-- editor --> <!-- editor -->

5
app/portainer/react/components/index.ts
View file

@ -38,6 +38,7 @@ import { BETeaserButton } from '@@/BETeaserButton';
import { CodeEditor } from '@@/CodeEditor'; import { CodeEditor } from '@@/CodeEditor';
import { HelpLink } from '@@/HelpLink'; import { HelpLink } from '@@/HelpLink';
import { TextTip } from '@@/Tip/TextTip'; import { TextTip } from '@@/Tip/TextTip';
import { InlineLoader } from '@@/InlineLoader/InlineLoader';
import { fileUploadField } from './file-upload-field'; import { fileUploadField } from './file-upload-field';
import { switchField } from './switch-field'; import { switchField } from './switch-field';
@ -244,6 +245,10 @@ export const ngModule = angular
'childrenWrapperClassName', 'childrenWrapperClassName',
]) ])
) )
.component(
'inlineLoader',
r2a(InlineLoader, ['children', 'className', 'size'])
)
.component( .component(
'groupAssociationTable', 'groupAssociationTable',
r2a(withReactQuery(GroupAssociationTable), [ r2a(withReactQuery(GroupAssociationTable), [

18
app/portainer/views/stacks/create/createstack.html
View file

@ -107,14 +107,16 @@
on-change="(onChangeTemplateVariables)" on-change="(onChangeTemplateVariables)"
></custom-templates-variables-field> ></custom-templates-variables-field>
<span ng-if="state.Method === 'template' && state.selectedTemplateId && state.templateLoadFailed"> <span ng-if="state.Method === 'template' && state.selectedTemplateId && state.templateLoadFailed" class="row">
<p class="small vertical-center text-danger mb-5" ng-if="currentUser.isAdmin || currentUser.id === state.selectedTemplate.CreatedByUserId"> <span class="col-sm-offset-3 col-lg-offset-2 col-sm-8">
<pr-icon icon="'alert-triangle'" mode="'danger'" size="'md'" feather="true"></pr-icon>Custom template could not be loaded, please <p class="small vertical-center text-danger mb-5" ng-if="currentUser.isAdmin || currentUser.id === state.selectedTemplate.CreatedByUserId">
<a ui-sref="docker.templates.custom.edit({id: state.selectedTemplateId})">click here</a> for configuration.</p <pr-icon icon="'alert-triangle'" mode="'danger'" size="'md'" feather="true"></pr-icon>Custom template could not be loaded, please
> <a ui-sref="docker.templates.custom.edit({id: state.selectedTemplateId})">click here</a> for configuration.</p
<p class="small vertical-center text-danger mb-5" ng-if="!(currentUser.isAdmin || currentUser.id === state.selectedTemplate.CreatedByUserId)"> >
<pr-icon icon="'alert-triangle'" mode="'danger'" size="'md'" feather="true"></pr-icon>Custom template could not be loaded, please contact your administrator.</p <p class="small vertical-center text-danger mb-5" ng-if="!(currentUser.isAdmin || currentUser.id === state.selectedTemplate.CreatedByUserId)">
> <pr-icon icon="'alert-triangle'" mode="'danger'" size="'md'" feather="true"></pr-icon>Custom template could not be loaded, please contact your administrator.</p
>
</span>
</span> </span>
</div> </div>
</div> </div>

9
app/react/components/InlineLoader/InlineLoader.tsx
View file

@ -1,5 +1,5 @@
import { Loader2 } from 'lucide-react'; import { Loader2 } from 'lucide-react';
import { PropsWithChildren } from 'react'; import { ReactNode } from 'react';
import clsx from 'clsx'; import clsx from 'clsx';
import { Icon } from '@@/Icon'; import { Icon } from '@@/Icon';
@ -7,6 +7,7 @@ import { Icon } from '@@/Icon';
type Size = 'xs' | 'sm' | 'md'; type Size = 'xs' | 'sm' | 'md';
export type Props = { export type Props = {
children: ReactNode;
className?: string; className?: string;
size?: Size; size?: Size;
}; };
@ -17,11 +18,7 @@ const sizeStyles: Record<Size, string> = {
md: 'text-md', md: 'text-md',
}; };
export function InlineLoader({ export function InlineLoader({ children, className, size = 'sm' }: Props) {
children,
className,
size = 'sm',
}: PropsWithChildren<Props>) {
return ( return (
<div <div
className={clsx( className={clsx(