jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ui: fix integration fetch, side menu align

Browse source
This commit is contained in:
nick-delirium 2024-10-30 11:39:29 +01:00
parent 4762f37414
commit 131f5663fa
No known key found for this signature in database
GPG key ID: 93ABD695DF5FDBA0
2 changed files with 48 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
frontend/app/components/Client/Integrations/apiMethods.ts
View file

@ -1,8 +1,8 @@
import { client } from "App/mstore";
import { client } from 'App/mstore';
import { useQuery, useMutation } from '@tanstack/react-query';
import { toast } from 'react-toastify';
export type ServiceName = 'datadog' | 'dynatrace' | 'elasticsearch' | 'sentry'
export type ServiceName = 'datadog' | 'dynatrace' | 'elasticsearch' | 'sentry';
export const serviceNames: Record<ServiceName, string> = {
datadog: 'Datadog',
dynatrace: 'Dynatrace',
@ -10,21 +10,25 @@ export const serviceNames: Record<ServiceName, string> = {
sentry: 'Sentry',
};
export async function getIntegrationData<T>(name: ServiceName, projectId: string): Promise<T> {
export async function getIntegrationData<T>(
name: ServiceName,
projectId: string
): Promise<T> {
const r = await client.get(
`/integrations/v1/integrations/${name}/${projectId}`
);
return r.json();
}
export function useIntegration<T>(name: ServiceName, projectId: string, initialValues: T) {
export function useIntegration<T>(
name: ServiceName,
projectId: string,
initialValues: T
) {
const { data, isPending } = useQuery({
queryKey: ['integrationData', name],
queryFn: async () => {
const resp = await getIntegrationData<T>(
name,
projectId
);
const resp = await getIntegrationData<T>(name, projectId);
if (resp) {
return resp;
}
@ -34,17 +38,19 @@ export function useIntegration<T>(name: ServiceName, projectId: string, initialV
});
const saveMutation = useMutation({
mutationFn: ({ values, siteId, exists }: {
mutationFn: ({
values,
siteId,
exists,
}: {
values: T;
siteId: string;
exists?: boolean;
}) =>
saveIntegration(name, values, siteId, exists),
}) => saveIntegration(name, values, siteId, exists),
});
const removeMutation = useMutation({
mutationFn: ({ siteId }: {
siteId: string;
}) => removeIntegration(name, siteId),
mutationFn: ({ siteId }: { siteId: string }) =>
removeIntegration(name, siteId),
});
return {
@ -62,24 +68,36 @@ export async function saveIntegration<T>(
exists?: boolean
) {
const method = exists ? 'patch' : 'post';
const r = await client[method](
`/integrations/v1/integrations/${name}/${projectId}`,
{ data }
);
if (r.ok) {
toast.success(`${name} integration saved`);
} else {
try {
const r = await client[method](
`/integrations/v1/integrations/${name}/${projectId}`,
{ data }
);
if (r.ok) {
toast.success(`${name} integration saved`);
} else {
toast.error(`Failed to save ${name} integration`);
}
return r.ok;
} catch (e) {
console.error(e);
toast.error(`Failed to save ${name} integration`);
}
return r.ok;
}
export async function removeIntegration(name: string, projectId: string) {
const r = await client.delete(`/integrations/v1/integrations/${name}/${projectId}`);
if (r.ok) {
toast.success(`${name} integration removed`);
} else {
try {
const r = await client.delete(
`/integrations/v1/integrations/${name}/${projectId}`
);
if (r.ok) {
toast.success(`${name} integration removed`);
} else {
toast.error(`Failed to remove ${name} integration`);
}
return r.ok;
} catch (e) {
console.error(e);
toast.error(`Failed to remove ${name} integration`);
}
return r.ok;
}

6
frontend/app/layout/SideMenu.tsx
View file

@ -277,7 +277,8 @@ function SideMenu(props: Props) {
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center'
alignItems: 'center',
width: '100%'
}}
>
{item.label}
@ -286,8 +287,7 @@ function SideMenu(props: Props) {
bordered={false}
className="text-xs"
>
{' '}
Beta{' '}
Beta
</Tag>
</div>
</Menu.Item>