GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-14 00:05:53 +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 {
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,
DeleteOutlined,
EditFilled,
ExclamationCircleOutlined,
FullscreenOutlined,
InfoCircleOutlined,
MoreOutlined,
SearchOutlined,
WarningOutlined,
@ -21,7 +21,7 @@ import useComponentPermission from 'hooks/useComponentPermission';
import history from 'lib/history';
import { RowData } from 'lib/query/createTableColumnsFromQuery';
import { isEmpty } from 'lodash-es';
import { X } from 'lucide-react';
import { CircleX, X } from 'lucide-react';
import { unparse } from 'papaparse';
import { ReactNode, useCallback, useMemo, useState } from 'react';
import { UseQueryResult } from 'react-query';
@ -234,13 +234,25 @@ function WidgetHeader({
/>
) : (
<>
<Typography.Text
ellipsis
data-testid={title}
className="widget-header-title"
>
{title}
</Typography.Text>
<div className="widget-header-title-container">
<Typography.Text
ellipsis
data-testid={title}
className="widget-header-title"
>
{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-api-actions">{threshold}</div>
{isFetchingResponse && !queryResponse.isError && (
@ -252,7 +264,7 @@ function WidgetHeader({
placement={errorTooltipPosition}
className="widget-api-actions"
>
<ExclamationCircleOutlined />
<CircleX size={20} />
</Tooltip>
)}