1b3a3dfc21
* Various UX, UI and Functional Improvements in Dashboards & Cards - Depth filter of Sankey chart data in frontend - Dashboard & Cards empty state view updates - Disabled save image feature on cards * Fixed empty views and headers * Various improvements across dashboards and cards.
96 lines
No EOL
2.8 KiB
TypeScript
96 lines
No EOL
2.8 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { PageTitle } from 'UI';
|
|
import { Button, Popover, Space, Dropdown, Menu } from 'antd';
|
|
import { PlusOutlined, DownOutlined } from '@ant-design/icons';
|
|
import AddCardSection from '../AddCardSection/AddCardSection';
|
|
import MetricsSearch from '../MetricsSearch';
|
|
import { useStore } from 'App/mstore';
|
|
import { observer } from 'mobx-react-lite';
|
|
import { DROPDOWN_OPTIONS } from 'App/constants/card';
|
|
|
|
const options = [
|
|
{
|
|
key: 'all',
|
|
label: 'All Types',
|
|
},
|
|
...DROPDOWN_OPTIONS.map((option) => ({
|
|
key: option.value,
|
|
label: option.label,
|
|
})),
|
|
{
|
|
key: 'monitors',
|
|
label: 'Monitors',
|
|
},
|
|
{
|
|
key: 'web_analytics',
|
|
label: 'Web Analytics',
|
|
},
|
|
];
|
|
|
|
function MetricViewHeader() {
|
|
const { metricStore } = useStore();
|
|
const filter = metricStore.filter;
|
|
const cardsLength = metricStore.filteredCards.length;
|
|
|
|
// Determine if a filter is active (search query or metric type other than 'all')
|
|
const isFilterActive = filter.query !== '' || (filter.type && filter.type !== 'all');
|
|
// Show header if there are cards or if a filter is active
|
|
const showHeader = cardsLength > 0 || isFilterActive;
|
|
|
|
useEffect(() => {
|
|
metricStore.updateKey('sort', { by: 'desc' });
|
|
}, [metricStore]);
|
|
|
|
const handleMenuClick = ({ key }: { key: string }) => {
|
|
metricStore.updateKey('filter', { ...filter, type: key });
|
|
};
|
|
|
|
const menu = (
|
|
<Menu onClick={handleMenuClick}>
|
|
{options.map((option) => (
|
|
<Menu.Item key={option.key}>{option.label}</Menu.Item>
|
|
))}
|
|
</Menu>
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex items-center justify-between pr-4">
|
|
<div className="flex items-center gap-2 ps-4">
|
|
<PageTitle title="Cards" className="cursor-default" />
|
|
|
|
{showHeader && (
|
|
<Space>
|
|
<Dropdown overlay={menu} trigger={['click']}>
|
|
<Button type="text" size="small" className="mt-1">
|
|
{options.find((opt) => opt.key === filter.type)?.label || 'Select Type'}
|
|
<DownOutlined />
|
|
</Button>
|
|
</Dropdown>
|
|
</Space>
|
|
)}
|
|
</div>
|
|
|
|
{showHeader && (
|
|
<div className="ml-auto flex items-center gap-3">
|
|
<Popover
|
|
arrow={false}
|
|
overlayInnerStyle={{ padding: 0, borderRadius: '0.75rem' }}
|
|
content={<AddCardSection fit inCards />}
|
|
trigger="click"
|
|
>
|
|
<Button type="primary" icon={<PlusOutlined />} className="btn-create-card">
|
|
Create Card
|
|
</Button>
|
|
</Popover>
|
|
<Space>
|
|
<MetricsSearch />
|
|
</Space>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default observer(MetricViewHeader); |