fix(microk8s): PO ui fixes [EE-5900] (#10032)

Co-authored-by: testa113 <testa113>
pull/10054/head
Ali 1 year ago committed by GitHub
parent e1951baac0
commit 53679f9381
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -352,7 +352,7 @@
<!-- #region CONFIGMAPS --> <!-- #region CONFIGMAPS -->
<div class="form-group"> <div class="form-group">
<div class="col-sm-12 vertical-center"> <div class="col-sm-12 vertical-center">
<label class="control-label !pt-0 text-left">ConfigMap</label> <label class="control-label !pt-0 text-left">ConfigMaps</label>
</div> </div>
<div class="col-sm-12 small text-muted vertical-center" style="margin-top: 15px" ng-if="ctrl.formValues.ConfigMaps.length"> <div class="col-sm-12 small text-muted vertical-center" style="margin-top: 15px" ng-if="ctrl.formValues.ConfigMaps.length">
<pr-icon icon="'info'" mode="'primary'"></pr-icon> <pr-icon icon="'info'" mode="'primary'"></pr-icon>
@ -503,7 +503,7 @@
<!-- #region SECRETS --> <!-- #region SECRETS -->
<div class="form-group"> <div class="form-group">
<div class="col-sm-12 vertical-center pt-2.5"> <div class="col-sm-12 vertical-center pt-2.5">
<label class="control-label !pt-0 text-left">Secret</label> <label class="control-label !pt-0 text-left">Secrets</label>
</div> </div>
<div class="col-sm-12 small text-muted vertical-center" style="margin-top: 15px" ng-if="ctrl.formValues.Secrets.length"> <div class="col-sm-12 small text-muted vertical-center" style="margin-top: 15px" ng-if="ctrl.formValues.Secrets.length">
<pr-icon icon="'info'" mode="'primary'"></pr-icon> <pr-icon icon="'info'" mode="'primary'"></pr-icon>

@ -117,8 +117,8 @@ export function createMockEnvironment(): Environment {
StartTime: '', StartTime: '',
}, },
StatusMessage: { StatusMessage: {
Detail: '', detail: '',
Summary: '', summary: '',
}, },
}; };
} }

@ -20,12 +20,12 @@ export function ApplicationEnvVarsTable({ namespace, app }: Props) {
<> <>
<div className="text-muted mb-4 mt-6 flex items-center"> <div className="text-muted mb-4 mt-6 flex items-center">
<Icon icon={File} className="!mr-2" /> <Icon icon={File} className="!mr-2" />
Configuration Environment variables, ConfigMaps or Secrets
</div> </div>
{appEnvVars.length === 0 && ( {appEnvVars.length === 0 && (
<TextTip color="blue"> <TextTip color="blue">
This application is not using any environment variable or This application is not using any environment variable, ConfigMap or
configuration. Secret.
</TextTip> </TextTip>
)} )}
{appEnvVars.length > 0 && ( {appEnvVars.length > 0 && (

@ -133,7 +133,11 @@ export function CreateIngressView() {
...group, ...group,
options: [ options: [
...group.options, ...group.options,
{ label: service.Name, value: service.Name }, {
label: service.Name,
selectedLabel: `${service.Name} (${service.Type})`,
value: service.Name,
},
], ],
}; };
} }
@ -540,14 +544,14 @@ export function CreateIngressView() {
return ( return (
<> <>
<PageHeader <PageHeader
title={isEdit ? 'Edit ingress' : 'Add ingress'} title={isEdit ? 'Edit ingress' : 'Create ingress'}
breadcrumbs={[ breadcrumbs={[
{ {
link: 'kubernetes.ingresses', link: 'kubernetes.ingresses',
label: 'Ingresses', label: 'Ingresses',
}, },
{ {
label: isEdit ? 'Edit ingress' : 'Add ingress', label: isEdit ? 'Edit ingress' : 'Create ingress',
}, },
]} ]}
/> />

@ -489,7 +489,10 @@ export function IngressForm({
path.ServiceName path.ServiceName
? { ? {
value: path.ServiceName, value: path.ServiceName,
label: path.ServiceName, label: getServiceLabel(
serviceOptions,
path.ServiceName
),
} }
: null : null
} }
@ -728,3 +731,9 @@ export function IngressForm({
</Widget> </Widget>
); );
} }
function getServiceLabel(options: GroupedServiceOptions, value: string) {
const allOptions = options.flatMap((group) => group.options);
const option = allOptions.find((o) => o.value === value);
return option?.selectedLabel || '';
}

@ -32,7 +32,11 @@ export interface ServicePorts {
[serviceName: string]: Option<string>[]; [serviceName: string]: Option<string>[];
} }
interface ServiceOption extends Option<string> {
selectedLabel: string;
}
export type GroupedServiceOptions = { export type GroupedServiceOptions = {
label: string; label: string;
options: Option<string>[]; options: ServiceOption[];
}[]; }[];

@ -30,6 +30,7 @@ export function confirmUpdateNamespace(
a service interruption for these applications. a service interruption for these applications.
</p> </p>
)} )}
<p>Are you sure you want to continue?</p>
</> </>
); );

@ -1,5 +1,5 @@
import { CellContext } from '@tanstack/react-table'; import { CellContext } from '@tanstack/react-table';
import { AlertCircle, HelpCircle, Settings } from 'lucide-react'; import { AlertCircle, HelpCircle, Loader2 } from 'lucide-react';
import { import {
EnvironmentStatus, EnvironmentStatus,
@ -10,6 +10,8 @@ import { notifySuccess } from '@/portainer/services/notifications';
import { TooltipWithChildren } from '@@/Tip/TooltipWithChildren'; import { TooltipWithChildren } from '@@/Tip/TooltipWithChildren';
import { Button } from '@@/buttons'; import { Button } from '@@/buttons';
import { Icon } from '@@/Icon';
import { Tooltip } from '@@/Tip/Tooltip';
import { EnvironmentListItem } from '../types'; import { EnvironmentListItem } from '../types';
import { useUpdateEnvironmentMutation } from '../../queries/useUpdateEnvironmentMutation'; import { useUpdateEnvironmentMutation } from '../../queries/useUpdateEnvironmentMutation';
@ -33,17 +35,17 @@ function Cell({
return ( return (
<> <>
{environment.URL} {environment.URL}
{environment.StatusMessage?.Summary && {environment.StatusMessage?.summary &&
environment.StatusMessage?.Detail && ( environment.StatusMessage?.detail && (
<div className="ml-2 inline-block"> <div className="ml-2 inline-block">
<span className="text-danger vertical-center inline-flex"> <span className="text-danger vertical-center inline-flex">
<AlertCircle className="lucide" aria-hidden="true" /> <AlertCircle className="lucide" aria-hidden="true" />
<span>{environment.StatusMessage.Summary}</span> <span>{environment.StatusMessage.summary}</span>
</span> </span>
<TooltipWithChildren <TooltipWithChildren
message={ message={
<div> <div>
{environment.StatusMessage.Detail} {environment.StatusMessage.detail}
{environment.URL && ( {environment.URL && (
<div className="mt-2 text-right"> <div className="mt-2 text-right">
<Button <Button
@ -71,27 +73,19 @@ function Cell({
); );
} }
if (environment.Type === 4) { if (environment.Type === EnvironmentType.EdgeAgentOnDocker) {
return <>-</>; return <>-</>;
} }
if (environment.Status === 3) { if (environment.Status === EnvironmentStatus.Provisioning) {
const status = (
<span className="vertical-center inline-flex text-base">
<Settings className="lucide animate-spin-slow" />
{environment.StatusMessage?.Summary}
</span>
);
if (!environment.StatusMessage?.Detail) {
return status;
}
return ( return (
<TooltipWithChildren <div className="inline-flex items-center text-base">
message={environment.StatusMessage?.Detail} <Icon icon={Loader2} className="!mr-1 animate-spin-slow" />
position="bottom" {environment.StatusMessage?.summary}
> {environment.StatusMessage?.detail && (
{status} <Tooltip message={environment.StatusMessage?.detail} />
</TooltipWithChildren> )}
</div>
); );
} }

@ -133,8 +133,8 @@ interface EndpointChangeWindow {
EndTime: string; EndTime: string;
} }
export interface EnvironmentStatusMessage { export interface EnvironmentStatusMessage {
Summary: string; summary: string;
Detail: string; detail: string;
} }
export type Environment = { export type Environment = {

Loading…
Cancel
Save