fix(dashboard): include ingresses field when updating a run service (#2798)
### **User description** fixes https://github.com/nhost/nhost/issues/2797 ___ ### **PR Type** Bug fix, Enhancement ___ ### **Description** - Added `ingresses` field to various components and validation schema to support custom domains. - Introduced `removeTypename` utility function to sanitize GraphQL response objects. - Replaced `getPortURL` with `getRunServicePortURL` helper function for consistent URL generation. - Updated changeset to document the inclusion of the `ingresses` field. ___ ### **Changes walkthrough** 📝 <table><thead><tr><th></th><th align="left">Relevant files</th></tr></thead><tbody><tr><td><strong>Enhancement</strong></td><td><table> <tr> <td> <details> <summary><strong>ServiceForm.tsx</strong><dd><code>Add ingresses field and sanitize values in ServiceForm</code> </dd></summary> <hr> dashboard/src/features/services/components/ServiceForm/ServiceForm.tsx <li>Added <code>removeTypename</code> utility function to sanitize values.<br> <li> Included <code>ingresses</code> field in the ports mapping.<br> <li> Updated health check and other fields to use sanitized values.<br> </details> </td> <td><a href="https://github.com/nhost/nhost/pull/2798/files#diff-d62640c5c152c7b50a3a53deefcb29c6ed1fa685e15511863c09784497139c49">+19/-13</a> </td> </tr> <tr> <td> <details> <summary><strong>ServiceFormTypes.ts</strong><dd><code>Update validation schema to include ingresses field</code> </dd></summary> <hr> dashboard/src/features/services/components/ServiceForm/ServiceFormTypes.ts <li>Added <code>ingresses</code> field to the validation schema.<br> <li> Made <code>ingresses</code> field nullable.<br> </details> </td> <td><a href="https://github.com/nhost/nhost/pull/2798/files#diff-70dc64b40f78adad0ce3db0f56cddfe824f3eb2d116b2ea6411518546810f3af">+7/-0</a> </td> </tr> <tr> <td> <details> <summary><strong>PortsFormSection.tsx</strong><dd><code>Use helper function for port URL generation in PortsFormSection</code></dd></summary> <hr> dashboard/src/features/services/components/ServiceForm/components/PortsFormSection/PortsFormSection.tsx <li>Replaced <code>getPortURL</code> with <code>getRunServicePortURL</code> helper function.<br> <li> Minor formatting changes.<br> </details> </td> <td><a href="https://github.com/nhost/nhost/pull/2798/files#diff-64ce17ad73e4122e8c66a1968b6737ec98bd1623ac7e3cd3f4a34b549a78717b">+10/-13</a> </td> </tr> <tr> <td> <details> <summary><strong>ServiceDetailsDialog.tsx</strong><dd><code>Use helper function for port URL generation in ServiceDetailsDialog</code></dd></summary> <hr> dashboard/src/features/services/components/ServiceForm/components/ServiceDetailsDialog/ServiceDetailsDialog.tsx <li>Replaced <code>getPortURL</code> with <code>getRunServicePortURL</code> helper function.<br> <li> Filtered and displayed only published ports.<br> </details> </td> <td><a href="https://github.com/nhost/nhost/pull/2798/files#diff-2e157263deeb076634b004143232a0f97d3ab94e709c0dcf7e93fb09a62f267d">+15/-15</a> </td> </tr> <tr> <td> <details> <summary><strong>ServicesList.tsx</strong><dd><code>Include ingresses field in ServicesList ports mapping</code> </dd></summary> <hr> dashboard/src/features/services/components/ServicesList/ServicesList.tsx - Included `ingresses` field in the ports mapping. </details> </td> <td><a href="https://github.com/nhost/nhost/pull/2798/files#diff-efb3008c23436b2db5bb94de15e91c78cf76ef6481ecb02eb542cf660ba98653">+1/-0</a> </td> </tr> <tr> <td> <details> <summary><strong>helpers.ts</strong><dd><code>Add helper functions for port URL generation and typename removal</code></dd></summary> <hr> dashboard/src/utils/helpers/helpers.ts <li>Added <code>getRunServicePortURL</code> helper function.<br> <li> Enhanced <code>removeTypename</code> function.<br> </details> </td> <td><a href="https://github.com/nhost/nhost/pull/2798/files#diff-f640e7215f5f5ea78bbf43fa96267ecdd677214f0dd1d5e0d37bae8c4181a328">+23/-1</a> </td> </tr> </table></td></tr><tr><td><strong>Documentation</strong></td><td><table> <tr> <td> <details> <summary><strong>short-radios-retire.md</strong><dd><code>Add changeset for ingresses field inclusion</code> </dd></summary> <hr> .changeset/short-radios-retire.md - Added changeset for including `ingresses` field in run services. </details> </td> <td><a href="https://github.com/nhost/nhost/pull/2798/files#diff-f738014a2859f7ce7160422ab65bfaffd0d81f8e603a46febb468ac05f6087c0">+5/-0</a> </td> </tr> </table></td></tr></tr></tbody></table> ___ > 💡 **PR-Agent usage**: >Comment `/help` on the PR to get a list of all available PR-Agent tools and their descriptions
This commit is contained in:
Hassan Ben Jobrane
committed by
GitHub
GitHub
parent
abb24afad5
commit
e31eefae63
5
.changeset/short-radios-retire.md
Normal file
5
.changeset/short-radios-retire.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'@nhost/dashboard': patch
|
||||
---
|
||||
|
||||
fix: include ingresses field when updating run services
|
||||
@@ -31,6 +31,7 @@ import { useLocalMimirClient } from '@/hooks/useLocalMimirClient';
|
||||
import { RESOURCE_VCPU_MULTIPLIER } from '@/utils/constants/common';
|
||||
import { copy } from '@/utils/copy';
|
||||
import { execPromiseWithErrorToast } from '@/utils/execPromiseWithErrorToast';
|
||||
import { removeTypename } from '@/utils/helpers';
|
||||
import {
|
||||
useInsertRunServiceConfigMutation,
|
||||
useInsertRunServiceMutation,
|
||||
@@ -99,38 +100,43 @@ export default function ServiceForm({
|
||||
}, [isDirty, location, onDirtyStateChange]);
|
||||
|
||||
const getFormattedConfig = (values: ServiceFormValues) => {
|
||||
// Remove any __typename property from the values
|
||||
const sanitizedValues = removeTypename(values) as ServiceFormValues;
|
||||
|
||||
const config: ConfigRunServiceConfigInsertInput = {
|
||||
name: values.name,
|
||||
name: sanitizedValues.name,
|
||||
image: {
|
||||
image: values.image,
|
||||
image: sanitizedValues.image,
|
||||
},
|
||||
command: parse(values.command).map((item) => item.toString()),
|
||||
command: parse(sanitizedValues.command).map((item) => item.toString()),
|
||||
resources: {
|
||||
compute: {
|
||||
cpu: values.compute.cpu,
|
||||
memory: values.compute.memory,
|
||||
cpu: sanitizedValues.compute.cpu,
|
||||
memory: sanitizedValues.compute.memory,
|
||||
},
|
||||
storage: values.storage.map((item) => ({
|
||||
storage: sanitizedValues.storage.map((item) => ({
|
||||
name: item.name,
|
||||
path: item.path,
|
||||
capacity: item.capacity,
|
||||
})),
|
||||
replicas: values.replicas,
|
||||
replicas: sanitizedValues.replicas,
|
||||
},
|
||||
environment: values.environment.map((item) => ({
|
||||
environment: sanitizedValues.environment.map((item) => ({
|
||||
name: item.name,
|
||||
value: item.value,
|
||||
})),
|
||||
ports: values.ports.map((item) => ({
|
||||
ports: sanitizedValues.ports.map((item) => ({
|
||||
port: item.port,
|
||||
type: item.type,
|
||||
publish: item.publish,
|
||||
ingresses: item.ingresses,
|
||||
})),
|
||||
healthCheck: values.healthCheck
|
||||
healthCheck: sanitizedValues.healthCheck
|
||||
? {
|
||||
port: values.healthCheck?.port,
|
||||
initialDelaySeconds: values.healthCheck?.initialDelaySeconds,
|
||||
probePeriodSeconds: values.healthCheck?.probePeriodSeconds,
|
||||
port: sanitizedValues.healthCheck?.port,
|
||||
initialDelaySeconds:
|
||||
sanitizedValues.healthCheck?.initialDelaySeconds,
|
||||
probePeriodSeconds: sanitizedValues.healthCheck?.probePeriodSeconds,
|
||||
}
|
||||
: null,
|
||||
};
|
||||
|
||||
@@ -30,6 +30,13 @@ export const validationSchema = Yup.object({
|
||||
port: Yup.number().required(),
|
||||
type: Yup.mixed<PortTypes>().oneOf(Object.values(PortTypes)).required(),
|
||||
publish: Yup.boolean().default(false),
|
||||
ingresses: Yup.array()
|
||||
.of(
|
||||
Yup.object().shape({
|
||||
fqdn: Yup.array().of(Yup.string()),
|
||||
}),
|
||||
)
|
||||
.nullable(),
|
||||
}),
|
||||
),
|
||||
storage: Yup.array().of(
|
||||
|
||||
@@ -13,6 +13,7 @@ import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/
|
||||
import { InfoCard } from '@/features/projects/overview/components/InfoCard';
|
||||
import { PortTypes } from '@/features/services/components/ServiceForm/components/PortsFormSection/PortsFormSectionTypes';
|
||||
import { type ServiceFormValues } from '@/features/services/components/ServiceForm/ServiceFormTypes';
|
||||
import { getRunServicePortURL } from '@/utils/helpers';
|
||||
import { useFieldArray, useFormContext, useWatch } from 'react-hook-form';
|
||||
|
||||
export default function PortsFormSection() {
|
||||
@@ -40,14 +41,8 @@ export default function PortsFormSection() {
|
||||
formValues.ports[index]?.type === PortTypes.HTTP &&
|
||||
formValues.ports[index]?.publish;
|
||||
|
||||
const getPortURL = (_port: string | number, subdomain: string) => {
|
||||
const port = Number(_port) > 0 ? Number(_port) : '[port]';
|
||||
|
||||
return `https://${subdomain}-${port}.svc.${currentProject?.region.name}.${currentProject?.region.domain}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<Box className="space-y-4 rounded border-1 p-4">
|
||||
<Box className="p-4 space-y-4 rounded border-1">
|
||||
<Box className="flex flex-row items-center justify-between ">
|
||||
<Box className="flex flex-row items-center space-x-2">
|
||||
<Text variant="h4" className="font-semibold">
|
||||
@@ -69,14 +64,14 @@ export default function PortsFormSection() {
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<InfoIcon aria-label="Info" className="h-4 w-4" color="primary" />
|
||||
<InfoIcon aria-label="Info" className="w-4 h-4" color="primary" />
|
||||
</Tooltip>
|
||||
</Box>
|
||||
<Button
|
||||
variant="borderless"
|
||||
onClick={() => append({ port: null, type: null, publish: false })}
|
||||
>
|
||||
<PlusIcon className="h-5 w-5" />
|
||||
<PlusIcon className="w-5 h-5" />
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
@@ -133,16 +128,18 @@ export default function PortsFormSection() {
|
||||
color="error"
|
||||
onClick={() => remove(index)}
|
||||
>
|
||||
<TrashIcon className="h-4 w-4" />
|
||||
<TrashIcon className="w-4 h-4" />
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{showURL(index) && (
|
||||
<InfoCard
|
||||
title="URL"
|
||||
value={getPortURL(
|
||||
formValues.ports[index]?.port,
|
||||
formValues.subdomain,
|
||||
value={getRunServicePortURL(
|
||||
currentProject?.subdomain,
|
||||
currentProject?.region.name,
|
||||
currentProject?.region.domain,
|
||||
formValues.ports[index],
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -3,6 +3,7 @@ import { Button } from '@/components/ui/v2/Button';
|
||||
import { Text } from '@/components/ui/v2/Text';
|
||||
import { useCurrentWorkspaceAndProject } from '@/features/projects/common/hooks/useCurrentWorkspaceAndProject';
|
||||
import { InfoCard } from '@/features/projects/overview/components/InfoCard';
|
||||
import { getRunServicePortURL } from '@/utils/helpers';
|
||||
import type { ConfigRunServicePort } from '@/utils/__generated__/graphql';
|
||||
|
||||
export interface ServiceDetailsDialogProps {
|
||||
@@ -32,11 +33,7 @@ export default function ServiceDetailsDialog({
|
||||
|
||||
const { closeDialog } = useDialog();
|
||||
|
||||
const getPortURL = (_port: string | number) => {
|
||||
const port = Number(_port) > 0 ? Number(_port) : '[port]';
|
||||
|
||||
return `https://${subdomain}-${port}.svc.${currentProject?.region.name}.${currentProject?.region.domain}`;
|
||||
};
|
||||
const publishedPorts = ports.filter((port) => port.publish);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 px-6 pb-6">
|
||||
@@ -48,18 +45,21 @@ export default function ServiceDetailsDialog({
|
||||
/>
|
||||
</div>
|
||||
|
||||
{ports?.length > 0 && (
|
||||
{publishedPorts?.length > 0 && (
|
||||
<div className="flex flex-col gap-2">
|
||||
<Text color="secondary">Ports</Text>
|
||||
{ports
|
||||
.filter((port) => port.publish)
|
||||
.map((port) => (
|
||||
<InfoCard
|
||||
key={String(port.port)}
|
||||
title={`${port.type} <--> ${port.port}`}
|
||||
value={getPortURL(port.port)}
|
||||
/>
|
||||
))}
|
||||
{publishedPorts.map((port) => (
|
||||
<InfoCard
|
||||
key={String(port.port)}
|
||||
title={`${port.type} <--> ${port.port}`}
|
||||
value={getRunServicePortURL(
|
||||
subdomain,
|
||||
currentProject?.region.name,
|
||||
currentProject?.region.domain,
|
||||
port,
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
@@ -66,6 +66,7 @@ export default function ServicesList({
|
||||
port: item.port,
|
||||
type: item.type as PortTypes,
|
||||
publish: item.publish,
|
||||
ingresses: item.ingresses,
|
||||
})),
|
||||
compute: service.config?.resources?.compute ?? {
|
||||
cpu: 62,
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
import { ApplicationStatus } from '@/types/application';
|
||||
import type { DeploymentRowFragment } from '@/utils/__generated__/graphql';
|
||||
import type {
|
||||
ConfigRunServicePort,
|
||||
DeploymentRowFragment,
|
||||
} from '@/utils/__generated__/graphql';
|
||||
import slugify from 'slugify';
|
||||
|
||||
export function getLastLiveDeployment(deployments?: DeploymentRowFragment[]) {
|
||||
@@ -108,3 +111,22 @@ export const removeTypename = (obj: any) => {
|
||||
});
|
||||
return newObj;
|
||||
};
|
||||
|
||||
export const getRunServicePortURL = (
|
||||
subdomain: string,
|
||||
regionName: string,
|
||||
regionDomain: string,
|
||||
port: Partial<ConfigRunServicePort>,
|
||||
) => {
|
||||
const { port: servicePort, ingresses } = port;
|
||||
|
||||
const customDomain = ingresses?.[0]?.fqdn?.[0];
|
||||
|
||||
if (customDomain) {
|
||||
return `https://${customDomain}`;
|
||||
}
|
||||
|
||||
const servicePortNumber =
|
||||
Number(servicePort) > 0 ? Number(servicePort) : '[port]';
|
||||
return `https://${subdomain}-${servicePortNumber}.svc.${regionName}.${regionDomain}`;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user