GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-14 03:05:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: added info funct for panels in dashaboard layout for showing description (#6133)

Browse Source 
* feat: added info funct for panels in dashaboard layout for showing description

* feat: position description info next to title

* feat: replaced error info icon
This commit is contained in:
SagarRajput-7 2024-10-09 13:33:14 +05:30 committed by GitHub
parent 78a924d378
commit 440fd4e02b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 44 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/container/GridCardLayout/WidgetHeader/WidgetHeader.styles.scss
View File

@ -20,6 +20,14 @@
} }
} }
.widget-header-title-container {
display: flex;
align-items: center;
gap: 8px;
overflow: hidden;
text-overflow: ellipsis;
}
.widget-header-title { .widget-header-title {
max-width: 80%; max-width: 80%;
} }
@ -58,3 +66,17 @@
} }
} }
} }
.long-tooltip {
.ant-tooltip-content {
max-height: 500px;
overflow: auto;
}
&.ant-tooltip {
max-width: 500px;
}
}
.info-tooltip {
cursor: pointer;
}

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

@ -6,8 +6,8 @@ import {
CopyOutlined, CopyOutlined,
DeleteOutlined, DeleteOutlined,
EditFilled, EditFilled,
ExclamationCircleOutlined,
FullscreenOutlined, FullscreenOutlined,
InfoCircleOutlined,
MoreOutlined, MoreOutlined,
SearchOutlined, SearchOutlined,
WarningOutlined, WarningOutlined,
@ -21,7 +21,7 @@ import useComponentPermission from 'hooks/useComponentPermission';
import history from 'lib/history'; import history from 'lib/history';
import { RowData } from 'lib/query/createTableColumnsFromQuery'; import { RowData } from 'lib/query/createTableColumnsFromQuery';
import { isEmpty } from 'lodash-es'; import { isEmpty } from 'lodash-es';
import { X } from 'lucide-react'; import { CircleX, X } from 'lucide-react';
import { unparse } from 'papaparse'; import { unparse } from 'papaparse';
import { ReactNode, useCallback, useMemo, useState } from 'react'; import { ReactNode, useCallback, useMemo, useState } from 'react';
import { UseQueryResult } from 'react-query'; import { UseQueryResult } from 'react-query';
@ -234,13 +234,25 @@ function WidgetHeader({
/> />
) : ( ) : (
<> <>
<Typography.Text <div className="widget-header-title-container">
ellipsis <Typography.Text
data-testid={title} ellipsis
className="widget-header-title" data-testid={title}
> className="widget-header-title"
{title} >
</Typography.Text> {title}
</Typography.Text>
{widget.description && (
<Tooltip
title={widget.description}
overlayClassName="long-tooltip"
className="info-tooltip"
placement="right"
>
<InfoCircleOutlined />
</Tooltip>
)}
</div>
<div className="widget-header-actions"> <div className="widget-header-actions">
<div className="widget-api-actions">{threshold}</div> <div className="widget-api-actions">{threshold}</div>
{isFetchingResponse && !queryResponse.isError && ( {isFetchingResponse && !queryResponse.isError && (
@ -252,7 +264,7 @@ function WidgetHeader({
placement={errorTooltipPosition} placement={errorTooltipPosition}
className="widget-api-actions" className="widget-api-actions"
> >
<ExclamationCircleOutlined /> <CircleX size={20} />
</Tooltip> </Tooltip>
)} )}