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

revised dashboard widget header

Browse source
This commit is contained in:
Sudheer Salavadi 2024-06-27 13:43:33 +05:30
parent 9ad4f31d08
commit 01dac68214
1 changed files with 38 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
frontend/app/components/Dashboard/components/WidgetView/WidgetViewHeader.tsx
View file

@ -1,47 +1,48 @@
import React from 'react';
import cn from 'classnames';
import WidgetName from 'Components/Dashboard/components/WidgetName';
import { useStore } from 'App/mstore';
import { useObserver } from 'mobx-react-lite';
import AddToDashboardButton from 'Components/Dashboard/components/AddToDashboardButton';
import WidgetDateRange from 'Components/Dashboard/components/WidgetDateRange/WidgetDateRange';
import { Button, Space } from 'antd';
import CardViewMenu from 'Components/Dashboard/components/WidgetView/CardViewMenu';
import cn from "classnames";
import WidgetName from "Components/Dashboard/components/WidgetName";
import {useStore} from "App/mstore";
import {useObserver} from "mobx-react-lite";
import AddToDashboardButton from "Components/Dashboard/components/AddToDashboardButton";
import WidgetDateRange from "Components/Dashboard/components/WidgetDateRange/WidgetDateRange";
import {Button, Space} from "antd";
import CardViewMenu from "Components/Dashboard/components/WidgetView/CardViewMenu";
interface Props {
onClick?: () => void;
onSave: () => void;
undoChanges?: () => void;
onClick?: () => void;
onSave: () => void;
undoChanges?: () => void;
}
function WidgetViewHeader({ onClick, onSave, undoChanges }: Props) {
const { metricStore, dashboardStore } = useStore();
const widget = useObserver(() => metricStore.instance);
function WidgetViewHeader({onClick, onSave, undoChanges}: Props) {
const {metricStore, dashboardStore} = useStore();
const widget = useObserver(() => metricStore.instance);
return (
<div className={cn('flex justify-between items-center')} onClick={onClick}>
<h1 className="mb-0 text-2xl mr-4 min-w-fit">
<WidgetName
name={widget.name}
onUpdate={(name) => metricStore.merge({ name })}
canEdit={true}
/>
</h1>
<Space>
<WidgetDateRange label="" />
<AddToDashboardButton metricId={widget.metricId} />
<Button
type="primary"
onClick={onSave}
loading={metricStore.isSaving}
disabled={metricStore.isSaving || !widget.hasChanged}
return (
<div
className={cn('flex justify-between items-center')}
onClick={onClick}
>
{metricStore.isSaving ? 'Saving...' : 'Update'}
</Button>
<CardViewMenu />
</Space>
</div>
);
<h1 className="mb-0 text-2xl mr-4 min-w-fit">
<WidgetName name={widget.name}
onUpdate={(name) => metricStore.merge({name})}
canEdit={true}/>
</h1>
<Space>
<WidgetDateRange label=""/>
<AddToDashboardButton metricId={widget.metricId}/>
<Button
type="primary"
onClick={onSave}
loading={metricStore.isSaving}
disabled={metricStore.isSaving || !widget.hasChanged}
>
Update
</Button>
<CardViewMenu/>
</Space>
</div>
);
}
export default WidgetViewHeader;