Compare commits
4 Commits
@nhost/das
...
@nhost/das
| Author | SHA1 | Date | |
|---|---|---|---|
|
5b087257e4 | ||
|
f1b2117c37 | ||
|
c1514eb098 | ||
|
|
21bddeed6a |
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nhost/dashboard",
|
||||
"version": "2.2.1",
|
||||
"version": "2.3.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"preinstall": "npx only-allow pnpm",
|
||||
|
||||
@@ -69,6 +69,7 @@ const projectSettingsPages = [
|
||||
},
|
||||
{ name: 'AI', slug: 'ai', route: 'ai' },
|
||||
{ name: 'Configuration Editor', slug: 'editor', route: 'editor' },
|
||||
{ name: 'Observability', slug: 'metrics', route: 'metrics' },
|
||||
].map((item) => ({
|
||||
label: item.name,
|
||||
value: item.slug,
|
||||
|
||||
@@ -152,6 +152,7 @@ const projectSettingsPages = [
|
||||
},
|
||||
{ name: 'AI', slug: 'ai', route: 'ai' },
|
||||
{ name: 'Configuration Editor', slug: 'editor', route: 'editor' },
|
||||
{ name: 'Observability', slug: 'metrics', route: 'metrics' },
|
||||
];
|
||||
|
||||
const createOrganization = (org: Org, isPlatform: boolean) => {
|
||||
|
||||
@@ -17,18 +17,18 @@ export default function SettingsLayout({ children }: SettingsLayoutProps) {
|
||||
return (
|
||||
<Box
|
||||
sx={{ backgroundColor: 'background.default' }}
|
||||
className="flex w-full flex-auto flex-col overflow-y-auto overflow-x-hidden"
|
||||
className="flex flex-col flex-auto w-full overflow-x-hidden overflow-y-auto"
|
||||
>
|
||||
<Box
|
||||
sx={{ backgroundColor: 'background.default' }}
|
||||
className="flex h-full flex-col"
|
||||
className="flex flex-col h-full"
|
||||
>
|
||||
<RetryableErrorBoundary>
|
||||
<div className="flex flex-col space-y-2">
|
||||
{hasGitRepo && (
|
||||
<Alert
|
||||
severity="warning"
|
||||
className="grid grid-flow-row place-content-center gap-2"
|
||||
className="grid grid-flow-row gap-2 place-content-center"
|
||||
>
|
||||
<Text color="warning" className="text-sm">
|
||||
As you have a connected repository, make sure to synchronize
|
||||
@@ -52,9 +52,9 @@ export default function SettingsLayout({ children }: SettingsLayoutProps) {
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline"
|
||||
href="https://docs.nhost.io/cli/overlays"
|
||||
href="https://docs.nhost.io/guides/cli/configuration-overlays#configuration-overlays"
|
||||
>
|
||||
docs.nhost.io/cli/overlays
|
||||
Configuration Overlays
|
||||
</a>{' '}
|
||||
for guidance.
|
||||
</Text>
|
||||
|
||||
@@ -52,9 +52,9 @@ export default function SettingsLayout({ children }: SettingsLayoutProps) {
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="underline"
|
||||
href="https://docs.nhost.io/cli/overlays"
|
||||
href="https://docs.nhost.io/guides/cli/configuration-overlays#configuration-overlays"
|
||||
>
|
||||
docs.nhost.io/cli/overlays
|
||||
Configuration Overlays
|
||||
</a>{' '}
|
||||
for guidance.
|
||||
</Text>
|
||||
|
||||
@@ -0,0 +1,200 @@
|
||||
import { ApplyLocalSettingsDialog } from '@/components/common/ApplyLocalSettingsDialog';
|
||||
import { useDialog } from '@/components/common/DialogProvider';
|
||||
import { useUI } from '@/components/common/UIProvider';
|
||||
import { Form } from '@/components/form/Form';
|
||||
import { SettingsContainer } from '@/components/layout/SettingsContainer';
|
||||
import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
|
||||
|
||||
import {
|
||||
GetObservabilitySettingsDocument,
|
||||
useGetObservabilitySettingsQuery,
|
||||
useUpdateConfigMutation,
|
||||
type ConfigConfigUpdateInput,
|
||||
} from '@/utils/__generated__/graphql';
|
||||
import { FormProvider, useForm } from 'react-hook-form';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
|
||||
import { Divider } from '@/components/ui/v2/Divider';
|
||||
import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
|
||||
import { useLocalMimirClient } from '@/features/orgs/projects/hooks/useLocalMimirClient';
|
||||
import { useProject } from '@/features/orgs/projects/hooks/useProject';
|
||||
import { DiscordFormSection } from '@/features/orgs/projects/metrics/settings/components/DiscordFormSection';
|
||||
import { EmailsFormSection } from '@/features/orgs/projects/metrics/settings/components/EmailsFormSection';
|
||||
import { PagerdutyFormSection } from '@/features/orgs/projects/metrics/settings/components/PagerdutyFormSection';
|
||||
import type { EventSeverity } from '@/features/orgs/projects/metrics/settings/components/PagerdutyFormSection/PagerdutyFormSectionTypes';
|
||||
import { SlackFormSection } from '@/features/orgs/projects/metrics/settings/components/SlackFormSection';
|
||||
import { WebhookFormSection } from '@/features/orgs/projects/metrics/settings/components/WebhookFormSection';
|
||||
import type { HttpMethod } from '@/features/orgs/projects/metrics/settings/components/WebhookFormSection/WebhookFormSectionTypes';
|
||||
import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
|
||||
import { removeTypename } from '@/utils/helpers';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
import type { ContactPointsFormValues } from './ContactPointsSettingsTypes';
|
||||
import { validationSchema } from './ContactPointsSettingsTypes';
|
||||
|
||||
export default function ContactPointsSettings() {
|
||||
const isPlatform = useIsPlatform();
|
||||
const { maintenanceActive } = useUI();
|
||||
const localMimirClient = useLocalMimirClient();
|
||||
const { project, refetch: refetchProject } = useProject();
|
||||
const { openDialog } = useDialog();
|
||||
|
||||
const { data, loading, error } = useGetObservabilitySettingsQuery({
|
||||
variables: { appId: project?.id },
|
||||
...(!isPlatform ? { client: localMimirClient } : {}),
|
||||
});
|
||||
|
||||
const { emails, pagerduty, discord, slack, webhook } =
|
||||
data?.config?.observability?.grafana?.contacts || {};
|
||||
|
||||
const form = useForm<ContactPointsFormValues>({
|
||||
defaultValues: {
|
||||
emails: [],
|
||||
discord: [],
|
||||
pagerduty: [],
|
||||
slack: [],
|
||||
webhook: [],
|
||||
},
|
||||
values: {
|
||||
emails: emails?.map((email) => ({ email })) || [],
|
||||
discord: discord || [],
|
||||
pagerduty:
|
||||
pagerduty?.map((elem) => ({
|
||||
...elem,
|
||||
severity: elem.severity as EventSeverity,
|
||||
})) || [],
|
||||
slack:
|
||||
slack?.map((elem) => ({
|
||||
...elem,
|
||||
mentionUsers: elem.mentionUsers.join(','),
|
||||
mentionGroups: elem.mentionGroups.join(','),
|
||||
})) || [],
|
||||
webhook:
|
||||
webhook?.map((elem) => ({
|
||||
...elem,
|
||||
httpMethod: elem.httpMethod as HttpMethod,
|
||||
})) || [],
|
||||
},
|
||||
reValidateMode: 'onSubmit',
|
||||
resolver: yupResolver(validationSchema),
|
||||
});
|
||||
|
||||
const [updateConfig] = useUpdateConfigMutation({
|
||||
refetchQueries: [GetObservabilitySettingsDocument],
|
||||
...(!isPlatform ? { client: localMimirClient } : {}),
|
||||
});
|
||||
|
||||
const getFormattedConfig = (values: ContactPointsFormValues) => {
|
||||
// Remove any __typename property from the values
|
||||
const sanitizedValues = removeTypename(values) as ContactPointsFormValues;
|
||||
const newEmails =
|
||||
sanitizedValues.emails?.map((email) => email.email) ?? null;
|
||||
const newPagerduty =
|
||||
sanitizedValues.pagerduty?.length > 0 ? sanitizedValues.pagerduty : null;
|
||||
const newDiscord =
|
||||
sanitizedValues.discord?.length > 0 ? sanitizedValues.discord : null;
|
||||
|
||||
const newSlack =
|
||||
sanitizedValues.slack?.length > 0
|
||||
? sanitizedValues.slack.map((elem) => ({
|
||||
...elem,
|
||||
mentionUsers: elem.mentionUsers.split(','),
|
||||
mentionGroups: elem.mentionGroups.split(','),
|
||||
}))
|
||||
: null;
|
||||
|
||||
const newWebhook =
|
||||
sanitizedValues.webhook?.length > 0 ? sanitizedValues.webhook : null;
|
||||
|
||||
const config: ConfigConfigUpdateInput = {
|
||||
observability: {
|
||||
grafana: {
|
||||
contacts: {
|
||||
emails: newEmails,
|
||||
pagerduty: newPagerduty,
|
||||
discord: newDiscord,
|
||||
slack: newSlack,
|
||||
webhook: newWebhook,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
return config;
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <ActivityIndicator delay={1000} label="Loading contact points..." />;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
const handleSubmit = async (formValues: ContactPointsFormValues) => {
|
||||
const config = getFormattedConfig(formValues);
|
||||
|
||||
const updateConfigPromise = updateConfig({
|
||||
variables: {
|
||||
appId: project.id,
|
||||
config,
|
||||
},
|
||||
});
|
||||
|
||||
await execPromiseWithErrorToast(
|
||||
async () => {
|
||||
await updateConfigPromise;
|
||||
form.reset(formValues);
|
||||
await refetchProject();
|
||||
|
||||
if (!isPlatform) {
|
||||
openDialog({
|
||||
title: 'Apply your changes',
|
||||
component: <ApplyLocalSettingsDialog />,
|
||||
props: {
|
||||
PaperProps: {
|
||||
className: 'max-w-2xl',
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
loadingMessage: 'Contact points are being updated...',
|
||||
successMessage: 'Contact points have been updated successfully.',
|
||||
errorMessage:
|
||||
'An error occurred while trying to update contact points.',
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<FormProvider {...form}>
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<SettingsContainer
|
||||
title="Contact Points"
|
||||
description="Define the contact points where your notifications will be sent."
|
||||
docsLink="https://docs.nhost.io/platform/metrics#configure-contact-points"
|
||||
rootClassName="gap-0"
|
||||
className={twMerge('my-2 px-0')}
|
||||
slotProps={{
|
||||
submitButton: {
|
||||
disabled: !form.formState.isDirty || maintenanceActive,
|
||||
loading: form.formState.isSubmitting,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Divider />
|
||||
<EmailsFormSection />
|
||||
<Divider />
|
||||
<PagerdutyFormSection />
|
||||
<Divider />
|
||||
<DiscordFormSection />
|
||||
<Divider />
|
||||
<SlackFormSection />
|
||||
<Divider />
|
||||
<WebhookFormSection />
|
||||
</SettingsContainer>
|
||||
</Form>
|
||||
</FormProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
import { EventSeverity } from '@/features/orgs/projects/metrics/settings/components/PagerdutyFormSection/PagerdutyFormSectionTypes';
|
||||
import { HttpMethod } from '@/features/orgs/projects/metrics/settings/components/WebhookFormSection/WebhookFormSectionTypes';
|
||||
import * as Yup from 'yup';
|
||||
|
||||
export const validationSchema = Yup.object({
|
||||
emails: Yup.array()
|
||||
.of(
|
||||
Yup.object({
|
||||
email: Yup.string().email('Invalid email address').required(),
|
||||
}),
|
||||
)
|
||||
.nullable(),
|
||||
discord: Yup.array()
|
||||
.of(
|
||||
Yup.object({
|
||||
url: Yup.string()
|
||||
.url('Invalid Discord URL')
|
||||
.required('Discord webhook URL is required'),
|
||||
avatarUrl: Yup.string().url('Invalid avatar URL'),
|
||||
}),
|
||||
)
|
||||
.nullable(),
|
||||
pagerduty: Yup.array()
|
||||
.of(
|
||||
Yup.object({
|
||||
integrationKey: Yup.string().required(
|
||||
'PagerDuty integration key is required',
|
||||
),
|
||||
severity: Yup.string()
|
||||
.oneOf(Object.values(EventSeverity))
|
||||
.required('PagerDuty severity is required'),
|
||||
class: Yup.string(),
|
||||
component: Yup.string(),
|
||||
group: Yup.string(),
|
||||
}),
|
||||
)
|
||||
.nullable(),
|
||||
slack: Yup.array()
|
||||
.of(
|
||||
Yup.object({
|
||||
recipient: Yup.string(),
|
||||
token: Yup.string(),
|
||||
username: Yup.string(),
|
||||
iconEmoji: Yup.string(),
|
||||
iconURL: Yup.string().url('Invalid icon URL'),
|
||||
mentionUsers: Yup.string(),
|
||||
mentionGroups: Yup.string(),
|
||||
mentionChannel: Yup.string(),
|
||||
url: Yup.string().url('Invalid Slack webhook URL'),
|
||||
endpointURL: Yup.string().url('Invalid endpoint URL'),
|
||||
}),
|
||||
)
|
||||
.test(
|
||||
'either-url-or-recipient-token',
|
||||
'Either URL or both recipient and token must be provided',
|
||||
(value) => {
|
||||
if (!value) {
|
||||
return true;
|
||||
}
|
||||
const result = value.every(
|
||||
(item) => item.url || (item.recipient && item.token),
|
||||
);
|
||||
if (result) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
)
|
||||
.nullable(),
|
||||
webhook: Yup.array()
|
||||
.of(
|
||||
Yup.object({
|
||||
url: Yup.string()
|
||||
.url('Invalid webhook URL')
|
||||
.required('URL is required'),
|
||||
httpMethod: Yup.string()
|
||||
.oneOf(Object.values(HttpMethod), 'Invalid HTTP method')
|
||||
.required('HTTP method is required'),
|
||||
username: Yup.string(),
|
||||
password: Yup.string(),
|
||||
authorizationScheme: Yup.string(),
|
||||
authorizationCredentials: Yup.string(),
|
||||
maxAlerts: Yup.number()
|
||||
.min(0, 'Max alerts must be greater than 0')
|
||||
.integer('Max alerts must be an integer'),
|
||||
}),
|
||||
)
|
||||
.nullable(),
|
||||
});
|
||||
|
||||
export type ContactPointsFormValues = Yup.InferType<typeof validationSchema>;
|
||||
@@ -0,0 +1 @@
|
||||
export { default as ContactPointsSettings } from './ContactPointsSettings';
|
||||
@@ -0,0 +1,92 @@
|
||||
import { Box } from '@/components/ui/v2/Box';
|
||||
import { Button } from '@/components/ui/v2/Button';
|
||||
import { InfoIcon } from '@/components/ui/v2/icons/InfoIcon';
|
||||
import { PlusIcon } from '@/components/ui/v2/icons/PlusIcon';
|
||||
import { TrashIcon } from '@/components/ui/v2/icons/TrashIcon';
|
||||
import { Input } from '@/components/ui/v2/Input';
|
||||
import { Text } from '@/components/ui/v2/Text';
|
||||
import { Tooltip } from '@/components/ui/v2/Tooltip';
|
||||
import type { ContactPointsFormValues } from '@/features/orgs/projects/metrics/settings/components/ContactPointsSettings/ContactPointsSettingsTypes';
|
||||
import { useFieldArray, useFormContext } from 'react-hook-form';
|
||||
|
||||
export default function DiscordFormSection() {
|
||||
const {
|
||||
register,
|
||||
formState: { errors },
|
||||
control,
|
||||
} = useFormContext<ContactPointsFormValues>();
|
||||
const { fields, append, remove } = useFieldArray({
|
||||
control,
|
||||
name: 'discord',
|
||||
});
|
||||
|
||||
return (
|
||||
<Box className="flex flex-col gap-4 p-4">
|
||||
<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">
|
||||
Discord
|
||||
</Text>
|
||||
<Tooltip
|
||||
title={
|
||||
<span>
|
||||
Receive alert notifications in your Discord channels when your
|
||||
Grafana alert rules are triggered and resolved.
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<InfoIcon aria-label="Info" className="h-4 w-4" color="primary" />
|
||||
</Tooltip>
|
||||
</Box>
|
||||
<Button
|
||||
variant="borderless"
|
||||
onClick={() => append({ url: '', avatarUrl: '' })}
|
||||
>
|
||||
<PlusIcon className="h-5 w-5" />
|
||||
</Button>
|
||||
</Box>
|
||||
{fields?.length > 0 ? (
|
||||
<Box className="flex flex-col gap-12">
|
||||
{fields.map((field, index) => (
|
||||
<Box key={field.id} className="flex w-full items-center gap-2">
|
||||
<Box className="flex flex-1 flex-col gap-2">
|
||||
<Input
|
||||
{...register(`discord.${index}.url`)}
|
||||
id={`${field.id}-discord`}
|
||||
label="Discord URL"
|
||||
placeholder="https://discord.com/api/webhooks/..."
|
||||
className="w-full"
|
||||
hideEmptyHelperText
|
||||
error={!!errors?.discord?.[index]?.url}
|
||||
helperText={errors?.discord?.[index]?.url?.message}
|
||||
fullWidth
|
||||
autoComplete="off"
|
||||
/>
|
||||
<Input
|
||||
{...register(`discord.${index}.avatarUrl`)}
|
||||
id={`${field.id}-discord-avatar`}
|
||||
label="Avatar URL"
|
||||
placeholder="https://discord.com/api/avatar/..."
|
||||
className="w-full"
|
||||
hideEmptyHelperText
|
||||
error={!!errors?.discord?.[index]?.avatarUrl}
|
||||
helperText={errors?.discord?.[index]?.avatarUrl?.message}
|
||||
fullWidth
|
||||
autoComplete="off"
|
||||
/>
|
||||
</Box>
|
||||
<Button
|
||||
variant="borderless"
|
||||
className=""
|
||||
color="error"
|
||||
onClick={() => remove(index)}
|
||||
>
|
||||
<TrashIcon className="h-6 w-4" />
|
||||
</Button>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
) : null}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export { default as DiscordFormSection } from './DiscordFormSection';
|
||||
@@ -0,0 +1,76 @@
|
||||
import { Box } from '@/components/ui/v2/Box';
|
||||
import { Button } from '@/components/ui/v2/Button';
|
||||
import { InfoIcon } from '@/components/ui/v2/icons/InfoIcon';
|
||||
import { PlusIcon } from '@/components/ui/v2/icons/PlusIcon';
|
||||
import { TrashIcon } from '@/components/ui/v2/icons/TrashIcon';
|
||||
import { Input } from '@/components/ui/v2/Input';
|
||||
import { Text } from '@/components/ui/v2/Text';
|
||||
import { Tooltip } from '@/components/ui/v2/Tooltip';
|
||||
import type { ContactPointsFormValues } from '@/features/orgs/projects/metrics/settings/components/ContactPointsSettings/ContactPointsSettingsTypes';
|
||||
import { useFieldArray, useFormContext } from 'react-hook-form';
|
||||
|
||||
export default function EmailsFormSection() {
|
||||
const {
|
||||
register,
|
||||
formState: { errors },
|
||||
control,
|
||||
} = useFormContext<ContactPointsFormValues>();
|
||||
const { fields, append, remove } = useFieldArray({
|
||||
control,
|
||||
name: 'emails',
|
||||
});
|
||||
|
||||
return (
|
||||
<Box className="flex flex-col gap-4 p-4">
|
||||
<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">
|
||||
Email
|
||||
</Text>
|
||||
<Tooltip
|
||||
title={
|
||||
<span>
|
||||
Select your preferred emails for receiving notifications when
|
||||
your alert rules are firing.
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<InfoIcon aria-label="Info" className="h-4 w-4" color="primary" />
|
||||
</Tooltip>
|
||||
</Box>
|
||||
<Button variant="borderless" onClick={() => append({ email: '' })}>
|
||||
<PlusIcon className="h-5 w-5" />
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{fields?.length > 0 ? (
|
||||
<Box className="flex flex-col gap-6">
|
||||
{fields.map((field, index) => (
|
||||
<Box key={field.id} className="flex w-full items-center gap-2">
|
||||
<Input
|
||||
{...register(`emails.${index}.email`)}
|
||||
id={`${field.id}-email`}
|
||||
placeholder="Enter email address"
|
||||
className="w-full"
|
||||
label={`Email #${index + 1}`}
|
||||
hideEmptyHelperText
|
||||
error={!!errors?.emails?.[index]?.email}
|
||||
helperText={errors?.emails?.[index]?.email?.message}
|
||||
fullWidth
|
||||
autoComplete="off"
|
||||
/>
|
||||
<Button
|
||||
variant="borderless"
|
||||
className="h-10 self-end"
|
||||
color="error"
|
||||
onClick={() => remove(index)}
|
||||
>
|
||||
<TrashIcon className="h-6 w-4" />
|
||||
</Button>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
) : null}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export { default as EmailsFormSection } from './EmailsFormSection';
|
||||
@@ -0,0 +1,206 @@
|
||||
import { ApplyLocalSettingsDialog } from '@/components/common/ApplyLocalSettingsDialog';
|
||||
import { useDialog } from '@/components/common/DialogProvider';
|
||||
import { useUI } from '@/components/common/UIProvider';
|
||||
import { Form } from '@/components/form/Form';
|
||||
import { SettingsContainer } from '@/components/layout/SettingsContainer';
|
||||
import { Input } from '@/components/ui/v2/Input';
|
||||
import {
|
||||
GetSmtpSettingsDocument,
|
||||
useGetObservabilitySettingsQuery,
|
||||
useUpdateConfigMutation,
|
||||
} from '@/utils/__generated__/graphql';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
import { FormProvider, useForm } from 'react-hook-form';
|
||||
import { type Optional } from 'utility-types';
|
||||
import * as yup from 'yup';
|
||||
|
||||
import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
|
||||
import { useLocalMimirClient } from '@/features/orgs/projects/hooks/useLocalMimirClient';
|
||||
import { useProject } from '@/features/orgs/projects/hooks/useProject';
|
||||
import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
|
||||
|
||||
const smtpValidationSchema = yup
|
||||
.object({
|
||||
host: yup.string().label('SMTP Host').required(),
|
||||
port: yup
|
||||
.number()
|
||||
.typeError('The SMTP port should contain only numbers.')
|
||||
.required(),
|
||||
user: yup.string().label('Username').required(),
|
||||
password: yup.string().label('Password'),
|
||||
sender: yup.string().label('SMTP Sender').email().required(),
|
||||
})
|
||||
.required();
|
||||
|
||||
export type MetricsSmtpFormValues = yup.InferType<typeof smtpValidationSchema>;
|
||||
|
||||
export default function MetricsSMTPSettings() {
|
||||
const { maintenanceActive } = useUI();
|
||||
const { openDialog } = useDialog();
|
||||
const isPlatform = useIsPlatform();
|
||||
const localMimirClient = useLocalMimirClient();
|
||||
const { project } = useProject();
|
||||
|
||||
const { data } = useGetObservabilitySettingsQuery({
|
||||
variables: { appId: project?.id },
|
||||
...(!isPlatform ? { client: localMimirClient } : {}),
|
||||
});
|
||||
|
||||
const { host, port, user, sender, password } =
|
||||
data?.config?.observability?.grafana?.smtp || {};
|
||||
|
||||
const form = useForm<Optional<MetricsSmtpFormValues, 'password'>>({
|
||||
reValidateMode: 'onSubmit',
|
||||
resolver: yupResolver(smtpValidationSchema),
|
||||
defaultValues: {
|
||||
host: '',
|
||||
port: undefined,
|
||||
user: '',
|
||||
password: '',
|
||||
sender: '',
|
||||
},
|
||||
values: {
|
||||
host: host || '',
|
||||
port,
|
||||
user: user || '',
|
||||
password: password || '',
|
||||
sender: sender || '',
|
||||
},
|
||||
mode: 'onSubmit',
|
||||
criteriaMode: 'all',
|
||||
});
|
||||
|
||||
const {
|
||||
register: registerSmtp,
|
||||
formState: { errors, isDirty, isSubmitting },
|
||||
} = form;
|
||||
|
||||
const [updateConfig] = useUpdateConfigMutation({
|
||||
refetchQueries: [GetSmtpSettingsDocument],
|
||||
...(!isPlatform ? { client: localMimirClient } : {}),
|
||||
});
|
||||
|
||||
const handleEditSMTPSettings = async (values: MetricsSmtpFormValues) => {
|
||||
const { password: newPassword, ...valuesWithoutPassword } = values;
|
||||
|
||||
const updateConfigPromise = updateConfig({
|
||||
variables: {
|
||||
appId: project.id,
|
||||
config: {
|
||||
provider: {
|
||||
smtp: newPassword ? values : valuesWithoutPassword,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
await execPromiseWithErrorToast(
|
||||
async () => {
|
||||
await updateConfigPromise;
|
||||
|
||||
if (!isPlatform) {
|
||||
openDialog({
|
||||
title: 'Apply your changes',
|
||||
component: <ApplyLocalSettingsDialog />,
|
||||
props: {
|
||||
PaperProps: {
|
||||
className: 'max-w-2xl',
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
loadingMessage: 'Metrics SMTP settings are being updated...',
|
||||
successMessage: 'Metrics SMTP settings have been updated successfully.',
|
||||
errorMessage:
|
||||
'An error occurred while trying to update the Metrics SMTP settings.',
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<FormProvider {...form}>
|
||||
<Form onSubmit={handleEditSMTPSettings}>
|
||||
<SettingsContainer
|
||||
title="SMTP Settings"
|
||||
description="Configure your SMTP settings to send emails as part of your alerting."
|
||||
docsLink="https://docs.nhost.io/platform/metrics#smtp"
|
||||
submitButtonText="Save"
|
||||
className="grid gap-4 lg:grid-cols-9"
|
||||
slotProps={{
|
||||
submitButton: {
|
||||
disabled: !isDirty || maintenanceActive,
|
||||
loading: isSubmitting,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Input
|
||||
{...registerSmtp('sender')}
|
||||
id="sender"
|
||||
name="sender"
|
||||
label="From Email"
|
||||
placeholder="admin@localhost"
|
||||
className="lg:col-span-4"
|
||||
hideEmptyHelperText
|
||||
fullWidth
|
||||
error={Boolean(errors.sender)}
|
||||
helperText={errors.sender?.message}
|
||||
/>
|
||||
|
||||
<Input
|
||||
{...registerSmtp('host')}
|
||||
id="host"
|
||||
name="host"
|
||||
label="SMTP Host"
|
||||
className="lg:col-span-4"
|
||||
placeholder="localhost"
|
||||
hideEmptyHelperText
|
||||
fullWidth
|
||||
error={Boolean(errors.host)}
|
||||
helperText={errors.host?.message}
|
||||
/>
|
||||
|
||||
<Input
|
||||
{...registerSmtp('port')}
|
||||
id="port"
|
||||
name="port"
|
||||
label="Port"
|
||||
type="number"
|
||||
placeholder="25"
|
||||
className="lg:col-span-1"
|
||||
hideEmptyHelperText
|
||||
fullWidth
|
||||
error={Boolean(errors.port)}
|
||||
helperText={errors.port?.message}
|
||||
/>
|
||||
|
||||
<Input
|
||||
{...registerSmtp('user')}
|
||||
id="user"
|
||||
label="SMTP Username"
|
||||
placeholder="Enter SMTP Username"
|
||||
className="lg:col-span-4"
|
||||
hideEmptyHelperText
|
||||
fullWidth
|
||||
error={Boolean(errors.user)}
|
||||
helperText={errors.user?.message}
|
||||
/>
|
||||
|
||||
<Input
|
||||
{...registerSmtp('password')}
|
||||
id="password"
|
||||
label="SMTP Password"
|
||||
type="password"
|
||||
placeholder="Enter SMTP password"
|
||||
className="lg:col-span-5"
|
||||
hideEmptyHelperText
|
||||
fullWidth
|
||||
error={Boolean(errors.password)}
|
||||
helperText={errors.password?.message}
|
||||
/>
|
||||
</SettingsContainer>
|
||||
</Form>
|
||||
</FormProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export { default as MetricsSMTPSettings } from './MetricsSMTPSettings';
|
||||
@@ -0,0 +1,155 @@
|
||||
import { ApplyLocalSettingsDialog } from '@/components/common/ApplyLocalSettingsDialog';
|
||||
import { useDialog } from '@/components/common/DialogProvider';
|
||||
import { useUI } from '@/components/common/UIProvider';
|
||||
import { Form } from '@/components/form/Form';
|
||||
import { SettingsContainer } from '@/components/layout/SettingsContainer';
|
||||
import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
|
||||
import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
|
||||
import { useLocalMimirClient } from '@/features/orgs/projects/hooks/useLocalMimirClient';
|
||||
import { useProject } from '@/features/orgs/projects/hooks/useProject';
|
||||
import { ContactPointsSettings } from '@/features/orgs/projects/metrics/settings/components/ContactPointsSettings';
|
||||
import { MetricsSMTPSettings } from '@/features/orgs/projects/metrics/settings/components/MetricsSMTPSettings';
|
||||
import { execPromiseWithErrorToast } from '@/features/orgs/utils/execPromiseWithErrorToast';
|
||||
import {
|
||||
GetObservabilitySettingsDocument,
|
||||
useGetObservabilitySettingsQuery,
|
||||
useUpdateConfigMutation,
|
||||
} from '@/generated/graphql';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
import { useEffect } from 'react';
|
||||
import { FormProvider, useForm } from 'react-hook-form';
|
||||
import * as Yup from 'yup';
|
||||
|
||||
const metricsAlertingValidationSchema = Yup.object({
|
||||
enabled: Yup.boolean(),
|
||||
});
|
||||
|
||||
export type MetricsAlertingFormValues = Yup.InferType<
|
||||
typeof metricsAlertingValidationSchema
|
||||
>;
|
||||
|
||||
export default function MetricsSettings() {
|
||||
const { openDialog } = useDialog();
|
||||
const isPlatform = useIsPlatform();
|
||||
const { maintenanceActive } = useUI();
|
||||
const localMimirClient = useLocalMimirClient();
|
||||
const { project, refetch: refetchProject } = useProject();
|
||||
const [updateConfig] = useUpdateConfigMutation({
|
||||
refetchQueries: [GetObservabilitySettingsDocument],
|
||||
...(!isPlatform ? { client: localMimirClient } : {}),
|
||||
});
|
||||
|
||||
const { data, loading, error } = useGetObservabilitySettingsQuery({
|
||||
variables: { appId: project?.id },
|
||||
...(!isPlatform ? { client: localMimirClient } : {}),
|
||||
});
|
||||
|
||||
const { enabled: alertingEnabled } =
|
||||
data?.config?.observability.grafana.alerting || {};
|
||||
|
||||
const alertingForm = useForm<MetricsAlertingFormValues>({
|
||||
reValidateMode: 'onSubmit',
|
||||
defaultValues: {
|
||||
enabled: alertingEnabled,
|
||||
},
|
||||
resolver: yupResolver(metricsAlertingValidationSchema),
|
||||
});
|
||||
|
||||
const { watch } = alertingForm;
|
||||
const alerting = watch('enabled');
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading) {
|
||||
alertingForm.reset({
|
||||
enabled: alertingEnabled,
|
||||
});
|
||||
}
|
||||
}, [loading, alertingEnabled, alertingForm]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<ActivityIndicator
|
||||
delay={1000}
|
||||
label="Loading Alerting settings..."
|
||||
className="justify-center"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
async function handleSubmit(formValues: MetricsAlertingFormValues) {
|
||||
const updateConfigPromise = updateConfig({
|
||||
variables: {
|
||||
appId: project.id,
|
||||
config: {
|
||||
observability: {
|
||||
grafana: {
|
||||
alerting: {
|
||||
enabled: formValues.enabled,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
await execPromiseWithErrorToast(
|
||||
async () => {
|
||||
await updateConfigPromise;
|
||||
alertingForm.reset(formValues);
|
||||
await refetchProject();
|
||||
|
||||
if (!isPlatform) {
|
||||
openDialog({
|
||||
title: 'Apply your changes',
|
||||
component: <ApplyLocalSettingsDialog />,
|
||||
props: {
|
||||
PaperProps: {
|
||||
className: 'max-w-2xl',
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
loadingMessage: 'Alerting settings are being updated...',
|
||||
successMessage: 'Alerting settings have been updated successfully.',
|
||||
errorMessage:
|
||||
'An error occurred while trying to update alerting settings.',
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid max-w-5xl grid-flow-row bg-transparent gap-y-6">
|
||||
<FormProvider {...alertingForm}>
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<SettingsContainer
|
||||
title="Alerting"
|
||||
description="Enable or disable Alerting."
|
||||
slotProps={{
|
||||
submitButton: {
|
||||
disabled: !alertingForm.formState.isDirty || maintenanceActive,
|
||||
loading: alertingForm.formState.isSubmitting,
|
||||
},
|
||||
}}
|
||||
switchId="enabled"
|
||||
docsTitle="enabling or disabling Alerting"
|
||||
docsLink="https://docs.nhost.io/platform/metrics#alerting"
|
||||
showSwitch
|
||||
className="hidden"
|
||||
/>
|
||||
</Form>
|
||||
</FormProvider>
|
||||
{alerting ? (
|
||||
<>
|
||||
<MetricsSMTPSettings />
|
||||
<ContactPointsSettings />
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export { default as MetricsSettings } from './MetricsSettings';
|
||||
@@ -0,0 +1,161 @@
|
||||
import { Box } from '@/components/ui/v2/Box';
|
||||
import { Button } from '@/components/ui/v2/Button';
|
||||
import { InfoIcon } from '@/components/ui/v2/icons/InfoIcon';
|
||||
import { PlusIcon } from '@/components/ui/v2/icons/PlusIcon';
|
||||
import { TrashIcon } from '@/components/ui/v2/icons/TrashIcon';
|
||||
import { Input } from '@/components/ui/v2/Input';
|
||||
import { Option } from '@/components/ui/v2/Option';
|
||||
import { Select } from '@/components/ui/v2/Select';
|
||||
import { Text } from '@/components/ui/v2/Text';
|
||||
import { Tooltip } from '@/components/ui/v2/Tooltip';
|
||||
import type { ContactPointsFormValues } from '@/features/orgs/projects/metrics/settings/components/ContactPointsSettings/ContactPointsSettingsTypes';
|
||||
import { useFieldArray, useFormContext, useWatch } from 'react-hook-form';
|
||||
import { EventSeverity } from './PagerdutyFormSectionTypes';
|
||||
|
||||
export default function PagerdutyFormSection() {
|
||||
const {
|
||||
register,
|
||||
formState: { errors },
|
||||
setValue,
|
||||
control,
|
||||
} = useFormContext<ContactPointsFormValues>();
|
||||
const formValues = useWatch<ContactPointsFormValues>();
|
||||
const { fields, append, remove } = useFieldArray({
|
||||
control,
|
||||
name: 'pagerduty',
|
||||
});
|
||||
|
||||
const onChangeSeverity = (value: string | undefined, index: number) =>
|
||||
setValue(`pagerduty.${index}.severity`, value as EventSeverity);
|
||||
|
||||
return (
|
||||
<Box className="flex flex-col gap-4 p-4">
|
||||
<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">
|
||||
PagerDuty
|
||||
</Text>
|
||||
<Tooltip
|
||||
title={
|
||||
<span>
|
||||
Receive notifications in PagerDuty when your alert rules are
|
||||
firing.
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<InfoIcon aria-label="Info" className="h-4 w-4" color="primary" />
|
||||
</Tooltip>
|
||||
</Box>
|
||||
<Button
|
||||
variant="borderless"
|
||||
onClick={() =>
|
||||
append({
|
||||
class: '',
|
||||
component: '',
|
||||
group: '',
|
||||
severity: EventSeverity.CRITICAL,
|
||||
integrationKey: '',
|
||||
})
|
||||
}
|
||||
>
|
||||
<PlusIcon className="h-5 w-5" />
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{fields?.length > 0 ? (
|
||||
<Box className="flex flex-col gap-12">
|
||||
{fields.map((field, index) => (
|
||||
<Box key={field.id} className="flex w-full items-center gap-2">
|
||||
<Box className="grid flex-grow gap-4 lg:grid-cols-9">
|
||||
<Input
|
||||
{...register(`pagerduty.${index}.integrationKey`)}
|
||||
id={`${field.id}-integrationKey`}
|
||||
placeholder="Enter PagerDuty Integration Key"
|
||||
className="w-full lg:col-span-7"
|
||||
hideEmptyHelperText
|
||||
error={!!errors?.pagerduty?.[index]?.integrationKey}
|
||||
helperText={
|
||||
errors?.pagerduty?.[index]?.integrationKey?.message
|
||||
}
|
||||
fullWidth
|
||||
label="Integration Key"
|
||||
autoComplete="off"
|
||||
/>
|
||||
|
||||
<Select
|
||||
fullWidth
|
||||
value={formValues.pagerduty.at(index)?.severity || ''}
|
||||
className="lg:col-span-2"
|
||||
label="Severity"
|
||||
onChange={(_event, inputValue) =>
|
||||
onChangeSeverity(inputValue as string, index)
|
||||
}
|
||||
placeholder="Select severity"
|
||||
slotProps={{
|
||||
listbox: { className: 'min-w-0 w-full' },
|
||||
popper: {
|
||||
disablePortal: false,
|
||||
className: 'z-[10000] w-[270px]',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{Object.values(EventSeverity).map((severity) => (
|
||||
<Option key={severity} value={severity}>
|
||||
{severity}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
|
||||
<Input
|
||||
{...register(`pagerduty.${index}.class`)}
|
||||
id={`${field.id}-class`}
|
||||
placeholder="Enter type of the event"
|
||||
label="Class"
|
||||
className="w-full lg:col-span-3"
|
||||
hideEmptyHelperText
|
||||
error={!!errors?.pagerduty?.[index]?.class}
|
||||
helperText={errors?.pagerduty?.[index]?.class?.message}
|
||||
fullWidth
|
||||
autoComplete="off"
|
||||
/>
|
||||
|
||||
<Input
|
||||
{...register(`pagerduty.${index}.component`)}
|
||||
id={`${field.id}-component`}
|
||||
placeholder="Enter component of the event"
|
||||
label="Component"
|
||||
className="w-full lg:col-span-3"
|
||||
hideEmptyHelperText
|
||||
error={!!errors?.pagerduty?.[index]?.component}
|
||||
helperText={errors?.pagerduty?.[index]?.component?.message}
|
||||
fullWidth
|
||||
autoComplete="off"
|
||||
/>
|
||||
<Input
|
||||
{...register(`pagerduty.${index}.group`)}
|
||||
id={`${field.id}-group`}
|
||||
placeholder="Enter logical group of components"
|
||||
label="Group"
|
||||
className="w-full lg:col-span-3"
|
||||
hideEmptyHelperText
|
||||
error={!!errors?.pagerduty?.[index]?.group}
|
||||
helperText={errors?.pagerduty?.[index]?.group?.message}
|
||||
fullWidth
|
||||
autoComplete="off"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
variant="borderless"
|
||||
color="error"
|
||||
onClick={() => remove(index)}
|
||||
>
|
||||
<TrashIcon className="h-6 w-4" />
|
||||
</Button>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
) : null}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
export enum EventSeverity {
|
||||
CRITICAL = 'critical',
|
||||
ERROR = 'error',
|
||||
WARNING = 'warning',
|
||||
INFO = 'info',
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export { default as PagerdutyFormSection } from './PagerdutyFormSection';
|
||||
@@ -0,0 +1,222 @@
|
||||
import { Alert } from '@/components/ui/v2/Alert';
|
||||
import { Box } from '@/components/ui/v2/Box';
|
||||
import { Button } from '@/components/ui/v2/Button';
|
||||
import { InfoIcon } from '@/components/ui/v2/icons/InfoIcon';
|
||||
import { PlusIcon } from '@/components/ui/v2/icons/PlusIcon';
|
||||
import { TrashIcon } from '@/components/ui/v2/icons/TrashIcon';
|
||||
import { Input } from '@/components/ui/v2/Input';
|
||||
import { Text } from '@/components/ui/v2/Text';
|
||||
import { Tooltip } from '@/components/ui/v2/Tooltip';
|
||||
import type { ContactPointsFormValues } from '@/features/orgs/projects/metrics/settings/components/ContactPointsSettings/ContactPointsSettingsTypes';
|
||||
import { useFieldArray, useFormContext } from 'react-hook-form';
|
||||
|
||||
export default function SlackFormSection() {
|
||||
const {
|
||||
control,
|
||||
register,
|
||||
formState: { errors },
|
||||
trigger: triggerValidation,
|
||||
} = useFormContext<ContactPointsFormValues>();
|
||||
const { fields, append, remove } = useFieldArray({
|
||||
control,
|
||||
name: 'slack',
|
||||
});
|
||||
|
||||
const handleRemove = (index: number) => {
|
||||
remove(index);
|
||||
if (fields?.length === 1) {
|
||||
triggerValidation();
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Box className="flex flex-col gap-4 p-4">
|
||||
<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">
|
||||
Slack
|
||||
</Text>
|
||||
<Tooltip
|
||||
title={
|
||||
<span>
|
||||
Select your preferred Slack channels for receiving notifications
|
||||
when your alert rules are firing.
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<InfoIcon aria-label="Info" className="h-4 w-4" color="primary" />
|
||||
</Tooltip>
|
||||
</Box>
|
||||
<Button
|
||||
variant="borderless"
|
||||
onClick={() =>
|
||||
append({
|
||||
recipient: '',
|
||||
token: '',
|
||||
username: '',
|
||||
iconEmoji: '',
|
||||
iconURL: '',
|
||||
mentionGroups: '',
|
||||
mentionUsers: '',
|
||||
mentionChannel: '',
|
||||
url: '',
|
||||
endpointURL: '',
|
||||
})
|
||||
}
|
||||
>
|
||||
<PlusIcon className="h-5 w-5" />
|
||||
</Button>
|
||||
</Box>
|
||||
{fields?.length > 0 ? (
|
||||
<Box className="flex flex-col gap-12">
|
||||
{!!errors?.slack?.root?.message && (
|
||||
<Alert severity="error" className="w-full">
|
||||
{errors?.slack?.root?.message}
|
||||
</Alert>
|
||||
)}
|
||||
{fields.map((field, index) => (
|
||||
<Box key={field.id} className="flex w-full items-center gap-2">
|
||||
<Box className="grid flex-grow gap-4 lg:grid-cols-9">
|
||||
<Input
|
||||
{...register(`slack.${index}.recipient`)}
|
||||
id={`${field.id}-recipient`}
|
||||
placeholder="Enter recipient"
|
||||
className="w-full lg:col-span-3"
|
||||
hideEmptyHelperText
|
||||
error={!!errors?.slack?.[index]?.recipient}
|
||||
helperText={errors?.slack?.[index]?.recipient?.message}
|
||||
fullWidth
|
||||
label="Recipient"
|
||||
autoComplete="off"
|
||||
/>
|
||||
|
||||
<Input
|
||||
{...register(`slack.${index}.token`)}
|
||||
id={`${field.id}-token`}
|
||||
placeholder="Enter Slack API token"
|
||||
label="Token"
|
||||
className="w-full lg:col-span-6"
|
||||
hideEmptyHelperText
|
||||
error={!!errors?.slack?.[index]?.token}
|
||||
helperText={errors?.slack?.[index]?.token?.message}
|
||||
fullWidth
|
||||
autoComplete="off"
|
||||
/>
|
||||
|
||||
<Input
|
||||
{...register(`slack.${index}.username`)}
|
||||
id={`${field.id}-username`}
|
||||
placeholder="Enter bot's username"
|
||||
label="Bot Username"
|
||||
className="w-full lg:col-span-5"
|
||||
hideEmptyHelperText
|
||||
error={!!errors?.slack?.[index]?.username}
|
||||
helperText={errors?.slack?.[index]?.username?.message}
|
||||
fullWidth
|
||||
autoComplete="off"
|
||||
/>
|
||||
<Input
|
||||
{...register(`slack.${index}.mentionChannel`)}
|
||||
id={`${field.id}-mentionChannel`}
|
||||
placeholder="Enter channel to mention"
|
||||
label="Mention Channel"
|
||||
className="w-full lg:col-span-4"
|
||||
hideEmptyHelperText
|
||||
error={!!errors?.slack?.[index]?.mentionChannel}
|
||||
helperText={errors?.slack?.[index]?.mentionChannel?.message}
|
||||
fullWidth
|
||||
autoComplete="off"
|
||||
/>
|
||||
|
||||
<Input
|
||||
{...register(`slack.${index}.mentionUsers`)}
|
||||
id={`${field.id}-mentionUsers`}
|
||||
placeholder="Enter users to mention (separated by commas)"
|
||||
label="Mention Users"
|
||||
className="w-full lg:col-span-9"
|
||||
hideEmptyHelperText
|
||||
error={!!errors?.slack?.[index]?.mentionUsers}
|
||||
helperText={errors?.slack?.[index]?.mentionUsers?.message}
|
||||
fullWidth
|
||||
autoComplete="off"
|
||||
/>
|
||||
|
||||
<Input
|
||||
{...register(`slack.${index}.mentionGroups`)}
|
||||
id={`${field.id}-mentionGroups`}
|
||||
placeholder="Enter groups to mention (separated by commas)"
|
||||
label="Mention Groups"
|
||||
className="w-full lg:col-span-9"
|
||||
hideEmptyHelperText
|
||||
error={!!errors?.slack?.[index]?.mentionGroups}
|
||||
helperText={errors?.slack?.[index]?.mentionGroups?.message}
|
||||
fullWidth
|
||||
autoComplete="off"
|
||||
/>
|
||||
|
||||
<Input
|
||||
{...register(`slack.${index}.iconEmoji`)}
|
||||
id={`${field.id}-iconEmoji`}
|
||||
placeholder="Enter emoji icon"
|
||||
label="Emoji Icon"
|
||||
className="w-full lg:col-span-3"
|
||||
hideEmptyHelperText
|
||||
error={!!errors?.slack?.[index]?.iconEmoji}
|
||||
helperText={errors?.slack?.[index]?.iconEmoji?.message}
|
||||
fullWidth
|
||||
autoComplete="off"
|
||||
/>
|
||||
<Input
|
||||
{...register(`slack.${index}.iconURL`)}
|
||||
id={`${field.id}-iconURL`}
|
||||
placeholder="Enter emoji icon URL"
|
||||
label="Emoji Icon URL"
|
||||
className="w-full lg:col-span-6"
|
||||
hideEmptyHelperText
|
||||
error={!!errors?.slack?.[index]?.iconURL}
|
||||
helperText={errors?.slack?.[index]?.iconURL?.message}
|
||||
fullWidth
|
||||
autoComplete="off"
|
||||
/>
|
||||
|
||||
<Input
|
||||
{...register(`slack.${index}.url`)}
|
||||
id={`${field.id}-url`}
|
||||
placeholder="Enter Slack Webhook URL"
|
||||
label="Slack Webhook URL"
|
||||
className="w-full lg:col-span-9"
|
||||
hideEmptyHelperText
|
||||
error={!!errors?.slack?.[index]?.url}
|
||||
helperText={errors?.slack?.[index]?.url?.message}
|
||||
fullWidth
|
||||
autoComplete="off"
|
||||
/>
|
||||
|
||||
<Input
|
||||
{...register(`slack.${index}.endpointURL`)}
|
||||
id={`${field.id}-endpointURL`}
|
||||
placeholder="Enter endpoint URL"
|
||||
label="Endpoint URL"
|
||||
className="w-full lg:col-span-9"
|
||||
hideEmptyHelperText
|
||||
error={!!errors?.slack?.[index]?.endpointURL}
|
||||
helperText={errors?.slack?.[index]?.endpointURL?.message}
|
||||
fullWidth
|
||||
autoComplete="off"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
variant="borderless"
|
||||
className=""
|
||||
color="error"
|
||||
onClick={() => handleRemove(index)}
|
||||
>
|
||||
<TrashIcon className="h-6 w-4" />
|
||||
</Button>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
) : null}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export { default as SlackFormSection } from './SlackFormSection';
|
||||
@@ -0,0 +1,218 @@
|
||||
import { Box } from '@/components/ui/v2/Box';
|
||||
import { Button } from '@/components/ui/v2/Button';
|
||||
import { IconButton } from '@/components/ui/v2/IconButton';
|
||||
import { EyeIcon } from '@/components/ui/v2/icons/EyeIcon';
|
||||
import { EyeOffIcon } from '@/components/ui/v2/icons/EyeOffIcon';
|
||||
import { InfoIcon } from '@/components/ui/v2/icons/InfoIcon';
|
||||
import { PlusIcon } from '@/components/ui/v2/icons/PlusIcon';
|
||||
import { TrashIcon } from '@/components/ui/v2/icons/TrashIcon';
|
||||
import { Input } from '@/components/ui/v2/Input';
|
||||
import { InputAdornment } from '@/components/ui/v2/InputAdornment';
|
||||
import { Option } from '@/components/ui/v2/Option';
|
||||
import { Select } from '@/components/ui/v2/Select';
|
||||
import { Text } from '@/components/ui/v2/Text';
|
||||
import { Tooltip } from '@/components/ui/v2/Tooltip';
|
||||
import type { ContactPointsFormValues } from '@/features/orgs/projects/metrics/settings/components/ContactPointsSettings/ContactPointsSettingsTypes';
|
||||
import { useState } from 'react';
|
||||
import { useFieldArray, useFormContext, useWatch } from 'react-hook-form';
|
||||
import { HttpMethod } from './WebhookFormSectionTypes';
|
||||
|
||||
export default function WebhookFormSection() {
|
||||
const {
|
||||
register,
|
||||
formState: { errors },
|
||||
setValue,
|
||||
control,
|
||||
} = useFormContext<ContactPointsFormValues>();
|
||||
const formValues = useWatch<ContactPointsFormValues>();
|
||||
const { fields, append, remove } = useFieldArray({
|
||||
control,
|
||||
name: 'webhook',
|
||||
});
|
||||
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
|
||||
const onChangeHttpMethod = (value: string | undefined, index: number) =>
|
||||
setValue(`webhook.${index}.httpMethod`, value as HttpMethod);
|
||||
|
||||
return (
|
||||
<Box className="flex flex-col gap-4 p-4">
|
||||
<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">
|
||||
Webhook
|
||||
</Text>
|
||||
<Tooltip
|
||||
title={
|
||||
<span>
|
||||
Send information about a state change to an external service
|
||||
over HTTP.
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<InfoIcon aria-label="Info" className="h-4 w-4" color="primary" />
|
||||
</Tooltip>
|
||||
</Box>
|
||||
<Button
|
||||
variant="borderless"
|
||||
onClick={() =>
|
||||
append({
|
||||
url: '',
|
||||
httpMethod: HttpMethod.POST,
|
||||
username: '',
|
||||
password: '',
|
||||
authorizationScheme: '',
|
||||
authorizationCredentials: '',
|
||||
maxAlerts: 0,
|
||||
})
|
||||
}
|
||||
>
|
||||
<PlusIcon className="h-5 w-5" />
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
{fields?.length > 0 ? (
|
||||
<Box className="flex flex-col gap-12">
|
||||
{fields.map((field, index) => (
|
||||
<Box key={field.id} className="flex w-full items-center space-x-2">
|
||||
<Box className="grid flex-grow gap-4 lg:grid-cols-9">
|
||||
<Input
|
||||
{...register(`webhook.${index}.url`)}
|
||||
id={`${field.id}-url`}
|
||||
placeholder="Enter URL"
|
||||
className="w-full lg:col-span-7"
|
||||
hideEmptyHelperText
|
||||
error={!!errors?.webhook?.[index]?.url}
|
||||
helperText={errors?.webhook?.[index]?.url?.message}
|
||||
fullWidth
|
||||
label="URL"
|
||||
autoComplete="off"
|
||||
/>
|
||||
|
||||
<Select
|
||||
fullWidth
|
||||
value={formValues.webhook.at(index)?.httpMethod || ''}
|
||||
className="lg:col-span-2"
|
||||
label="HTTP Method"
|
||||
onChange={(_event, inputValue) =>
|
||||
onChangeHttpMethod(inputValue as string, index)
|
||||
}
|
||||
placeholder="Select HTTP Method"
|
||||
slotProps={{
|
||||
listbox: { className: 'min-w-0 w-full' },
|
||||
popper: {
|
||||
disablePortal: false,
|
||||
className: 'z-[10000] w-[270px]',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{Object.values(HttpMethod).map((httpMethod) => (
|
||||
<Option key={httpMethod} value={httpMethod}>
|
||||
{httpMethod}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
|
||||
<Input
|
||||
{...register(`webhook.${index}.username`)}
|
||||
id={`${field.id}-username`}
|
||||
placeholder="Enter username"
|
||||
label="Username"
|
||||
className="w-full lg:col-span-3"
|
||||
hideEmptyHelperText
|
||||
error={!!errors?.webhook?.[index]?.username}
|
||||
helperText={errors?.webhook?.[index]?.username?.message}
|
||||
fullWidth
|
||||
autoComplete="off"
|
||||
/>
|
||||
|
||||
<Input
|
||||
{...register(`webhook.${index}.password`)}
|
||||
id={`${field.id}-password`}
|
||||
type={showPassword ? 'text' : 'password'}
|
||||
placeholder="Enter password"
|
||||
label="Password"
|
||||
className="w-full lg:col-span-4"
|
||||
hideEmptyHelperText
|
||||
error={!!errors?.webhook?.[index]?.password}
|
||||
helperText={errors?.webhook?.[index]?.password?.message}
|
||||
fullWidth
|
||||
autoComplete="off"
|
||||
endAdornment={
|
||||
<InputAdornment className="px-2" position="end">
|
||||
<IconButton
|
||||
variant="borderless"
|
||||
color="secondary"
|
||||
aria-label={
|
||||
showPassword ? 'Hide Password' : 'Show Password'
|
||||
}
|
||||
onClick={() => setShowPassword((show) => !show)}
|
||||
>
|
||||
{showPassword ? (
|
||||
<EyeOffIcon className="h-5 w-5" />
|
||||
) : (
|
||||
<EyeIcon className="h-5 w-5" />
|
||||
)}
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
}
|
||||
/>
|
||||
<Input
|
||||
type="number"
|
||||
{...register(`webhook.${index}.maxAlerts`)}
|
||||
id={`${field.id}-maxAlerts`}
|
||||
placeholder="Enter max alerts"
|
||||
label="Max Alerts (0 means no limit)"
|
||||
className="w-full lg:col-span-2"
|
||||
hideEmptyHelperText
|
||||
error={!!errors?.webhook?.[index]?.maxAlerts}
|
||||
helperText={errors?.webhook?.[index]?.maxAlerts?.message}
|
||||
fullWidth
|
||||
autoComplete="off"
|
||||
/>
|
||||
|
||||
<Input
|
||||
{...register(`webhook.${index}.authorizationScheme`)}
|
||||
id={`${field.id}-authorizationScheme`}
|
||||
placeholder="Enter authorization scheme"
|
||||
label="Authorization Scheme"
|
||||
className="w-full lg:col-span-3"
|
||||
hideEmptyHelperText
|
||||
error={!!errors?.webhook?.[index]?.authorizationScheme}
|
||||
helperText={
|
||||
errors?.webhook?.[index]?.authorizationScheme?.message
|
||||
}
|
||||
fullWidth
|
||||
autoComplete="off"
|
||||
/>
|
||||
<Input
|
||||
{...register(`webhook.${index}.authorizationCredentials`)}
|
||||
id={`${field.id}-authorizationCredentials`}
|
||||
placeholder="Enter authorization credentials"
|
||||
label="Authorization Credentials"
|
||||
className="w-full lg:col-span-6"
|
||||
hideEmptyHelperText
|
||||
error={!!errors?.webhook?.[index]?.authorizationCredentials}
|
||||
helperText={
|
||||
errors?.webhook?.[index]?.authorizationCredentials?.message
|
||||
}
|
||||
fullWidth
|
||||
autoComplete="off"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
variant="borderless"
|
||||
className=""
|
||||
color="error"
|
||||
onClick={() => remove(index)}
|
||||
>
|
||||
<TrashIcon className="h-6 w-4" />
|
||||
</Button>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
) : null}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
export enum HttpMethod {
|
||||
POST = 'POST',
|
||||
PUT = 'PUT',
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
export { default as WebhookFormSection } from './WebhookFormSection';
|
||||
@@ -0,0 +1,55 @@
|
||||
query GetObservabilitySettings($appId: uuid!) {
|
||||
config(appID: $appId, resolve: false) {
|
||||
id: __typename
|
||||
__typename
|
||||
observability {
|
||||
grafana {
|
||||
alerting {
|
||||
enabled
|
||||
}
|
||||
smtp {
|
||||
host
|
||||
password
|
||||
port
|
||||
sender
|
||||
user
|
||||
}
|
||||
contacts {
|
||||
emails
|
||||
discord {
|
||||
avatarUrl
|
||||
url
|
||||
}
|
||||
pagerduty {
|
||||
integrationKey
|
||||
severity
|
||||
class
|
||||
component
|
||||
group
|
||||
}
|
||||
slack {
|
||||
recipient
|
||||
token
|
||||
username
|
||||
iconEmoji
|
||||
iconURL
|
||||
mentionUsers
|
||||
mentionGroups
|
||||
mentionChannel
|
||||
url
|
||||
endpointURL
|
||||
}
|
||||
webhook {
|
||||
url
|
||||
httpMethod
|
||||
username
|
||||
password
|
||||
authorizationScheme
|
||||
authorizationCredentials
|
||||
maxAlerts
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import { Container } from '@/components/layout/Container';
|
||||
import { ActivityIndicator } from '@/components/ui/v2/ActivityIndicator';
|
||||
import { ProjectLayout } from '@/features/orgs/layout/ProjectLayout';
|
||||
import { SettingsLayout } from '@/features/orgs/layout/SettingsLayout';
|
||||
import { useIsPlatform } from '@/features/orgs/projects/common/hooks/useIsPlatform';
|
||||
import { useLocalMimirClient } from '@/features/orgs/projects/hooks/useLocalMimirClient';
|
||||
import { useProject } from '@/features/orgs/projects/hooks/useProject';
|
||||
import { MetricsSettings } from '@/features/orgs/projects/metrics/settings/components/MetricsSettings';
|
||||
import { useGetObservabilitySettingsQuery } from '@/generated/graphql';
|
||||
import type { ReactElement } from 'react';
|
||||
|
||||
export default function MetricsSettingsPage() {
|
||||
const isPlatform = useIsPlatform();
|
||||
const localMimirClient = useLocalMimirClient();
|
||||
const { project } = useProject();
|
||||
|
||||
const { loading, error } = useGetObservabilitySettingsQuery({
|
||||
variables: { appId: project?.id },
|
||||
...(!isPlatform ? { client: localMimirClient } : {}),
|
||||
});
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<ActivityIndicator
|
||||
delay={1000}
|
||||
label="Loading Observability settings..."
|
||||
className="justify-center"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
return (
|
||||
<Container
|
||||
className="grid max-w-5xl grid-flow-row bg-transparent gap-y-6"
|
||||
rootClassName="bg-transparent"
|
||||
>
|
||||
<MetricsSettings />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
MetricsSettingsPage.getLayout = function getLayout(page: ReactElement) {
|
||||
return (
|
||||
<ProjectLayout
|
||||
mainContainerProps={{
|
||||
className: 'flex h-full',
|
||||
}}
|
||||
>
|
||||
<SettingsLayout>
|
||||
<Container
|
||||
sx={{ backgroundColor: 'background.default' }}
|
||||
className="max-w-5xl"
|
||||
>
|
||||
{page}
|
||||
</Container>
|
||||
</SettingsLayout>
|
||||
</ProjectLayout>
|
||||
);
|
||||
};
|
||||
@@ -11,6 +11,7 @@ body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
#__next {
|
||||
|
||||
835
dashboard/src/utils/__generated__/graphql.ts
generated
835
dashboard/src/utils/__generated__/graphql.ts
generated
File diff suppressed because it is too large
Load Diff
2
pnpm-lock.yaml
generated
2
pnpm-lock.yaml
generated
@@ -6883,7 +6883,7 @@ packages:
|
||||
/@graphql-tools/relay-operation-optimizer@6.5.18(encoding@0.1.13)(graphql@16.8.1):
|
||||
resolution: {integrity: sha512-mc5VPyTeV+LwiM+DNvoDQfPqwQYhPV/cl5jOBjTgSniyaq8/86aODfMkrE2OduhQ5E00hqrkuL2Fdrgk0w1QJg==}
|
||||
peerDependencies:
|
||||
graphql: '>=16.8.1'
|
||||
graphql: 16.8.1
|
||||
dependencies:
|
||||
'@ardatan/relay-compiler': 12.0.0(encoding@0.1.13)(graphql@16.8.1)
|
||||
'@graphql-tools/utils': 9.2.1(graphql@16.8.1)
|
||||
|
||||
Reference in New Issue
Block a user