GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-10 04:49:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: [GH-4093]: move the name to the left and the actions to the right for widget header (#4130)

Browse Source
This commit is contained in:
Vikrant Gupta 2023-12-02 14:47:08 +05:30 committed by GitHub
parent a20693fa9f
commit 7104d8e0f5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 77 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/container/GridCardLayout/WidgetHeader/WidgetHeader.styles.scss Normal file
View File

@ -0,0 +1,30 @@
.widget-header-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 30px;
width: 100%;
padding: 0.5rem;
}
.widget-header-title {
max-width: 80%;
}
.widget-header-actions {
display: flex;
align-items: center;
}
.widget-header-more-options {
visibility: hidden;
border: none;
box-shadow: none;
}
.widget-header-hover {
visibility: visible;
}
.widget-api-actions {
padding-right: 0.25rem;
}

114
frontend/src/container/GridCardLayout/WidgetHeader/index.tsx
View File

@ -1,21 +1,23 @@
import './WidgetHeader.styles.scss';
import { import {
AlertOutlined, AlertOutlined,
CopyOutlined, CopyOutlined,
DeleteOutlined, DeleteOutlined,
DownOutlined,
EditFilled, EditFilled,
ExclamationCircleOutlined, ExclamationCircleOutlined,
FullscreenOutlined, FullscreenOutlined,
MoreOutlined,
WarningOutlined, WarningOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import { Dropdown, MenuProps, Tooltip, Typography } from 'antd'; import { Button, Dropdown, MenuProps, Tooltip, Typography } from 'antd';
import Spinner from 'components/Spinner'; import Spinner from 'components/Spinner';
import { QueryParams } from 'constants/query'; import { QueryParams } from 'constants/query';
import { PANEL_TYPES } from 'constants/queryBuilder'; import { PANEL_TYPES } from 'constants/queryBuilder';
import ROUTES from 'constants/routes'; import ROUTES from 'constants/routes';
import useComponentPermission from 'hooks/useComponentPermission'; import useComponentPermission from 'hooks/useComponentPermission';
import history from 'lib/history'; import history from 'lib/history';
import { ReactNode, useCallback, useMemo, useState } from 'react'; import { ReactNode, useCallback, useMemo } from 'react';
import { UseQueryResult } from 'react-query'; import { UseQueryResult } from 'react-query';
import { useSelector } from 'react-redux'; import { useSelector } from 'react-redux';
import { AppState } from 'store/reducers'; import { AppState } from 'store/reducers';
@ -23,23 +25,9 @@ import { ErrorResponse, SuccessResponse } from 'types/api';
import { Widgets } from 'types/api/dashboard/getAll'; import { Widgets } from 'types/api/dashboard/getAll';
import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange'; import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
import AppReducer from 'types/reducer/app'; import AppReducer from 'types/reducer/app';
import { popupContainer } from 'utils/selectPopupContainer';
import { import { errorTooltipPosition, WARNING_MESSAGE } from './config';
errorTooltipPosition,
overlayStyles,
spinnerStyles,
tooltipStyles,
WARNING_MESSAGE,
} from './config';
import { MENUITEM_KEYS_VS_LABELS, MenuItemKeys } from './contants'; import { MENUITEM_KEYS_VS_LABELS, MenuItemKeys } from './contants';
import {
ArrowContainer,
HeaderContainer,
HeaderContentContainer,
ThesholdContainer,
WidgetHeaderContainer,
} from './styles';
import { MenuItem } from './types'; import { MenuItem } from './types';
import { generateMenuList, isTWidgetOptions } from './utils'; import { generateMenuList, isTWidgetOptions } from './utils';
@ -72,9 +60,6 @@ function WidgetHeader({
headerMenuList, headerMenuList,
isWarning, isWarning,
}: IWidgetHeaderProps): JSX.Element | null { }: IWidgetHeaderProps): JSX.Element | null {
const [localHover, setLocalHover] = useState(false);
const [isOpen, setIsOpen] = useState<boolean>(false);
const onEditHandler = useCallback((): void => { const onEditHandler = useCallback((): void => {
const widgetId = widget.id; const widgetId = widget.id;
history.push( history.push(
@ -112,7 +97,6 @@ function WidgetHeader({
if (functionToCall) { if (functionToCall) {
functionToCall(); functionToCall();
setIsOpen(false);
} }
} }
}, },
@ -169,10 +153,6 @@ function WidgetHeader({
const updatedMenuList = useMemo(() => generateMenuList(actions), [actions]); const updatedMenuList = useMemo(() => generateMenuList(actions), [actions]);
const onClickHandler = (): void => {
setIsOpen(!isOpen);
};
const menu = useMemo( const menu = useMemo(
() => ({ () => ({
items: updatedMenuList, items: updatedMenuList,
@ -186,49 +166,49 @@ function WidgetHeader({
} }
return ( return (
<WidgetHeaderContainer> <div className="widget-header-container">
<Dropdown <Typography.Text
getPopupContainer={popupContainer} ellipsis
destroyPopupOnHide data-testid={title}
open={isOpen} className="widget-header-title"
onOpenChange={setIsOpen}
menu={menu}
trigger={['click']}
overlayStyle={overlayStyles}
> >
<HeaderContainer {title}
onMouseOver={(): void => setLocalHover(true)} </Typography.Text>
onMouseOut={(): void => setLocalHover(false)} <div className="widget-header-actions">
hover={localHover} <div className="widget-api-actions">{threshold}</div>
onClick={onClickHandler} {queryResponse.isFetching && !queryResponse.isError && (
> <Spinner style={{ paddingRight: '0.25rem' }} />
<HeaderContentContainer> )}
<Typography.Text style={{ maxWidth: '80%' }} ellipsis data-testid={title}> {queryResponse.isError && (
{title} <Tooltip
</Typography.Text> title={errorMessage}
<ArrowContainer hover={parentHover}> placement={errorTooltipPosition}
<DownOutlined /> className="widget-api-actions"
</ArrowContainer> >
</HeaderContentContainer> <ExclamationCircleOutlined />
</HeaderContainer> </Tooltip>
</Dropdown> )}
<ThesholdContainer>{threshold}</ThesholdContainer> {isWarning && (
{queryResponse.isFetching && !queryResponse.isError && ( <Tooltip
<Spinner height="5vh" style={spinnerStyles} /> title={WARNING_MESSAGE}
)} placement={errorTooltipPosition}
{queryResponse.isError && ( className="widget-api-actions"
<Tooltip title={errorMessage} placement={errorTooltipPosition}> >
<ExclamationCircleOutlined style={tooltipStyles} /> <WarningOutlined />
</Tooltip> </Tooltip>
)} )}
<Dropdown menu={menu} trigger={['hover']} placement="bottomRight">
{isWarning && ( <Button
<Tooltip title={WARNING_MESSAGE} placement={errorTooltipPosition}> type="default"
<WarningOutlined style={tooltipStyles} /> icon={<MoreOutlined />}
</Tooltip> className={`widget-header-more-options ${
)} parentHover ? 'widget-header-hover' : ''
</WidgetHeaderContainer> }`}
/>
</Dropdown>
</div>
</div>
); );
} }

2
frontend/src/container/GridCardLayout/WidgetHeader/styles.ts
View File

@ -41,8 +41,6 @@ export const WidgetHeaderContainer = styled.div`
export const ArrowContainer = styled.span<{ hover: boolean }>` export const ArrowContainer = styled.span<{ hover: boolean }>`
visibility: ${({ hover }): string => (hover ? 'visible' : 'hidden')}; visibility: ${({ hover }): string => (hover ? 'visible' : 'hidden')};
position: absolute;
right: -1rem;
`; `;
export const Typography = styled(TypographyComponent)` export const Typography = styled(TypographyComponent)`