142 lines
3.9 KiB
TypeScript
142 lines
3.9 KiB
TypeScript
import { Button, Form, Input, message, Popconfirm, Tabs } from 'antd';
|
|
import React from 'react';
|
|
import { useNavigate, useParams } from 'react-router';
|
|
import { deleteWorkspaceWebsite } from '../../api/model/website';
|
|
import { useRequest } from '../../hooks/useRequest';
|
|
import { useCurrentWorkspaceId } from '../../store/user';
|
|
import { ErrorTip } from '../ErrorTip';
|
|
import { Loading } from '../Loading';
|
|
import { NoWorkspaceTip } from '../NoWorkspaceTip';
|
|
import { MonitorPicker } from '../monitor/MonitorPicker';
|
|
import {
|
|
defaultErrorHandler,
|
|
defaultSuccessHandler,
|
|
getQueryKey,
|
|
trpc,
|
|
} from '../../api/trpc';
|
|
import { useQueryClient } from '@tanstack/react-query';
|
|
import { useEvent } from '../../hooks/useEvent';
|
|
|
|
export const WebsiteInfo: React.FC = React.memo(() => {
|
|
const workspaceId = useCurrentWorkspaceId();
|
|
const { websiteId } = useParams<{
|
|
websiteId: string;
|
|
}>();
|
|
const navigate = useNavigate();
|
|
const queryClient = useQueryClient();
|
|
|
|
const { data: website, isLoading } = trpc.website.info.useQuery({
|
|
workspaceId,
|
|
websiteId: websiteId!,
|
|
});
|
|
|
|
const updateMutation = trpc.website.updateInfo.useMutation({
|
|
onSuccess: () => {
|
|
queryClient.resetQueries(getQueryKey(trpc.website.info));
|
|
defaultSuccessHandler();
|
|
},
|
|
onError: defaultErrorHandler,
|
|
});
|
|
|
|
const handleSave = useEvent(
|
|
async (values: { name: string; domain: string; monitorId: string }) => {
|
|
await updateMutation.mutateAsync({
|
|
workspaceId,
|
|
websiteId: websiteId!,
|
|
name: values.name,
|
|
domain: values.domain,
|
|
monitorId: values.monitorId,
|
|
});
|
|
}
|
|
);
|
|
|
|
const [, handleDeleteWebsite] = useRequest(async () => {
|
|
await deleteWorkspaceWebsite(workspaceId, websiteId!);
|
|
|
|
message.success('Delete Success');
|
|
|
|
navigate('/settings/websites');
|
|
});
|
|
|
|
if (!workspaceId) {
|
|
return <NoWorkspaceTip />;
|
|
}
|
|
|
|
if (!websiteId) {
|
|
return <ErrorTip />;
|
|
}
|
|
|
|
if (isLoading) {
|
|
return <Loading />;
|
|
}
|
|
|
|
if (!website) {
|
|
return <ErrorTip />;
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div className="h-24 flex items-center">
|
|
<div className="text-2xl flex-1">Website Info</div>
|
|
</div>
|
|
|
|
<div>
|
|
<Tabs>
|
|
<Tabs.TabPane key={'detail'} tab={'Detail'}>
|
|
<Form
|
|
layout="vertical"
|
|
initialValues={{
|
|
id: website.id,
|
|
name: website.name,
|
|
domain: website.domain,
|
|
monitorId: website.monitorId,
|
|
}}
|
|
onFinish={handleSave}
|
|
>
|
|
<Form.Item label="Website ID" name="id">
|
|
<Input size="large" disabled={true} />
|
|
</Form.Item>
|
|
<Form.Item label="Name" name="name" rules={[{ required: true }]}>
|
|
<Input size="large" />
|
|
</Form.Item>
|
|
<Form.Item
|
|
label="Domain"
|
|
name="domain"
|
|
rules={[{ required: true }]}
|
|
>
|
|
<Input size="large" />
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
|
label="Monitor"
|
|
name="monitorId"
|
|
tooltip="You can bind a monitor which will display health status in website overview"
|
|
>
|
|
<MonitorPicker size="large" allowClear={true} />
|
|
</Form.Item>
|
|
|
|
<Form.Item>
|
|
<Button size="large" htmlType="submit">
|
|
Save
|
|
</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
</Tabs.TabPane>
|
|
|
|
<Tabs.TabPane key={'data'} tab={'Data'}>
|
|
<Popconfirm
|
|
title="Delete Website"
|
|
onConfirm={() => handleDeleteWebsite()}
|
|
>
|
|
<Button type="primary" danger={true}>
|
|
Delete Website
|
|
</Button>
|
|
</Popconfirm>
|
|
</Tabs.TabPane>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
WebsiteInfo.displayName = 'WebsiteInfo';
|