schiwagoa/tianji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add dashboard add none placeholder and arrow rotate animation

Browse Source
This commit is contained in:
moonrailgun 2023-12-20 13:46:48 +00:00
parent 73651b9679
commit 604e6ef454
1 changed files with 112 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

189
src/client/components/dashboard/AddButton.tsx
View File

@ -1,9 +1,10 @@
import { Button, Dropdown, MenuProps, Space } from 'antd'; import { Button, Dropdown, MenuProps, Space } from 'antd';
import React from 'react'; import React, { useState } from 'react';
import { trpc } from '../../api/trpc'; import { trpc } from '../../api/trpc';
import { useCurrentWorkspaceId } from '../../store/user'; import { useCurrentWorkspaceId } from '../../store/user';
import { useDashboardStore } from '../../store/dashboard'; import { useDashboardStore } from '../../store/dashboard';
import { DownOutlined } from '@ant-design/icons'; import { DownOutlined } from '@ant-design/icons';
import clsx from 'clsx';
export const DashboardItemAddButton: React.FC = React.memo(() => { export const DashboardItemAddButton: React.FC = React.memo(() => {
const workspaceId = useCurrentWorkspaceId(); const workspaceId = useCurrentWorkspaceId();
@ -16,6 +17,7 @@ export const DashboardItemAddButton: React.FC = React.memo(() => {
workspaceId, workspaceId,
}); });
const { addItem } = useDashboardStore(); const { addItem } = useDashboardStore();
const [open, setOpen] = useState(false);
const isLoading = isWebsiteLoading || isMonitorLoading; const isLoading = isWebsiteLoading || isMonitorLoading;
@ -24,95 +26,128 @@ export const DashboardItemAddButton: React.FC = React.memo(() => {
{ {
key: 'website', key: 'website',
label: 'Website', label: 'Website',
children: websites.map((website) => ({ children:
key: `website#${website.id}`, websites.length > 0
label: website.name, ? websites.map((website) => ({
children: [ key: `website#${website.id}`,
{ label: website.name,
key: `website#${website.id}#overview`, children: [
label: 'Overview', {
onClick: () => { key: `website#${website.id}#overview`,
addItem( label: 'Overview',
'websiteOverview', onClick: () => {
website.id, addItem(
`${website.name}'s Overview` 'websiteOverview',
); website.id,
}, `${website.name}'s Overview`
}, );
{ },
key: `website#${website.id}#events`, },
label: 'Events', {
onClick: () => { key: `website#${website.id}#events`,
addItem( label: 'Events',
'websiteEvents', onClick: () => {
website.id, addItem(
`${website.name}'s Events` 'websiteEvents',
); website.id,
}, `${website.name}'s Events`
}, );
], },
})), },
],
}))
: [
{
key: `website#none`,
label: '(None)',
disabled: true,
},
],
}, },
{ {
key: 'monitor', key: 'monitor',
label: 'Monitor', label: 'Monitor',
children: monitors.map((monitor) => ({ children:
key: `monitor#${monitor.id}`, monitors.length > 0
label: monitor.name, ? monitors.map((monitor) => ({
children: [ key: `monitor#${monitor.id}`,
{ label: monitor.name,
key: `monitor#${monitor.id}#healthBar`, children: [
label: 'Health Bar', {
onClick: () => { key: `monitor#${monitor.id}#healthBar`,
addItem( label: 'Health Bar',
'monitorHealthBar', onClick: () => {
monitor.id, addItem(
`${monitor.name}'s Health` 'monitorHealthBar',
); monitor.id,
}, `${monitor.name}'s Health`
}, );
{ },
key: `monitor#${monitor.id}#metrics`, },
label: 'Metrics', {
onClick: () => { key: `monitor#${monitor.id}#metrics`,
addItem( label: 'Metrics',
'monitorMetrics', onClick: () => {
monitor.id, addItem(
`${monitor.name}'s Metrics` 'monitorMetrics',
); monitor.id,
}, `${monitor.name}'s Metrics`
}, );
{ },
key: `monitor#${monitor.id}#chart`, },
label: 'Chart', {
onClick: () => { key: `monitor#${monitor.id}#chart`,
addItem('monitorChart', monitor.id, `${monitor.name}'s Chart`); label: 'Chart',
}, onClick: () => {
}, addItem(
{ 'monitorChart',
key: `monitor#${monitor.id}#events`, monitor.id,
label: 'Events', `${monitor.name}'s Chart`
onClick: () => { );
addItem( },
'monitorEvents', },
monitor.id, {
`${monitor.name}'s Events` key: `monitor#${monitor.id}#events`,
); label: 'Events',
}, onClick: () => {
}, addItem(
], 'monitorEvents',
})), monitor.id,
`${monitor.name}'s Events`
);
},
},
],
}))
: [
{
key: `monitor#none`,
label: '(None)',
disabled: true,
},
],
}, },
], ],
}; };
return ( return (
<div> <div>
<Dropdown trigger={['click']} disabled={isLoading} menu={menu}> <Dropdown
trigger={['click']}
disabled={isLoading}
menu={menu}
open={open}
onOpenChange={setOpen}
>
<Button type="primary" size="large" className="w-32"> <Button type="primary" size="large" className="w-32">
<Space> <Space>
<span>Add</span> <span>Add</span>
<DownOutlined /> <DownOutlined
className={clsx(
'transition-transform scale-y-75',
open && 'rotate-180'
)}
/>
</Space> </Space>
</Button> </Button>
</Dropdown> </Dropdown>