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

fix: [SIG-565]: design feedback for integrations (#4723)

Browse Source 
* fix: [SIG-565]: design feedback for integrations

* feat: added dotted line in the test connection modal

* feat: handle the URL change for integration details page to support back navigation

* feat: added ghost loading states

* feat: added margin for details header

* feat: added margin for details header

* feat: increase the list sizes to 20

* fix: handle icons

* fix: remove unused classes
This commit is contained in:
Vikrant Gupta 2024-03-22 14:59:43 +05:30 committed by GitHub
parent ae0d685b29
commit 5745727031
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 140 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/public/Icons/cable-car.svg Normal file
View File

@ -0,0 +1 @@
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#prefix__clip0_2022_1972)" stroke="#fff" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round"><path d="M6.667 2h.006M9.333 1.333h.007M1.333 6l13.334-3.333M8 8V4.333M11.333 8H4.667a2 2 0 00-2 2v2.667a2 2 0 002 2h6.666a2 2 0 002-2V10a2 2 0 00-2-2zM6 8v3.333M10 8v3.333M2.667 11.334h10.666"/></g><defs><clipPath id="prefix__clip0_2022_1972"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
Side by Side

After

Width:  |  Height:  |  Size: 507 B

1
frontend/public/Icons/configure.svg Normal file
View File

@ -0,0 +1 @@
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><g stroke="#C0C1C3" stroke-width="1.333" stroke-linecap="round"><path d="M9.71 4.745a.576.576 0 000 .806l.922.922a.576.576 0 00.806 0l2.171-2.171a3.455 3.455 0 01-4.572 4.572l-3.98 3.98a1.222 1.222 0 11-1.727-1.728l3.98-3.98a3.455 3.455 0 014.572-4.572L9.717 4.739l-.006.006z" stroke-linejoin="round"/><path d="M4 7L2.527 5.566a1.333 1.333 0 01-.013-1.898l.81-.81a1.333 1.333 0 011.991.119L5.333 3M10.75 10.988l1.179 1.178m0 0l-.138.138a.833.833 0 00.387 1.397v0a.833.833 0 00.792-.219l.446-.446a.833.833 0 00.176-.917v0a.833.833 0 00-1.355-.261l-.308.308z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 644 B

1
frontend/public/Icons/group.svg Normal file
View File

@ -0,0 +1 @@
<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg"><g stroke="#C0C1C3" stroke-width="1.333" stroke-linecap="round" stroke-linejoin="round"><path d="M2 4.667V3.333C2 2.6 2.6 2 3.333 2h1.334M11.333 2h1.334C13.4 2 14 2.6 14 3.333v1.334M14 11.334v1.333C14 13.4 13.4 14 12.667 14h-1.334M4.667 14H3.333C2.6 14 2 13.4 2 12.667v-1.333M8.667 4.667H5.333a.667.667 0 00-.666.666v2c0 .368.298.667.666.667h3.334a.667.667 0 00.666-.667v-2a.667.667 0 00-.666-.667zM10.667 8H7.333a.667.667 0 00-.666.667v2c0 .368.298.666.666.666h3.334a.667.667 0 00.666-.666v-2A.667.667 0 0010.667 8z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 604 B

23
frontend/src/assets/Integrations/ConfigureIcon.tsx Normal file
View File

@ -0,0 +1,23 @@
import { Color } from '@signozhq/design-tokens';
import { useIsDarkMode } from 'hooks/useDarkMode';
function ConfigureIcon(): JSX.Element {
const isDarkMode = useIsDarkMode();
return (
<svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg">
<g
stroke={isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500}
strokeWidth="1.333"
strokeLinecap="round"
>
<path
d="M9.71 4.745a.576.576 0 000 .806l.922.922a.576.576 0 00.806 0l2.171-2.171a3.455 3.455 0 01-4.572 4.572l-3.98 3.98a1.222 1.222 0 11-1.727-1.728l3.98-3.98a3.455 3.455 0 014.572-4.572L9.717 4.739l-.006.006z"
strokeLinejoin="round"
/>
<path d="M4 7L2.527 5.566a1.333 1.333 0 01-.013-1.898l.81-.81a1.333 1.333 0 011.991.119L5.333 3M10.75 10.988l1.179 1.178m0 0l-.138.138a.833.833 0 00.387 1.397v0a.833.833 0 00.792-.219l.446-.446a.833.833 0 00.176-.917v0a.833.833 0 00-1.355-.261l-.308.308z" />
</g>
</svg>
);
}
export default ConfigureIcon;

1
frontend/src/constants/query.ts
View File

@ -27,5 +27,6 @@ export enum QueryParams {
viewName = 'viewName',
viewKey = 'viewKey',
expandedWidgetId = 'expandedWidgetId',
integration = 'integration',
pagination = 'pagination',
}

9
frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContent.tsx
View File

@ -1,7 +1,8 @@
import './IntegrationDetailPage.styles.scss';
import { Button, Tabs, TabsProps, Typography } from 'antd';
import { Drum, Hammer, Table2 } from 'lucide-react';
import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
import { CableCar, Group } from 'lucide-react';
import { IntegrationDetailedProps } from 'types/api/integrations/types';
import Configure from './IntegrationDetailContentTabs/Configure';
@ -24,7 +25,7 @@ function IntegrationDetailContent(
<Button
type="text"
className="integration-tab-btns"
icon={<Drum size={14} />}
icon={<CableCar size={14} />}
>
<Typography.Text className="typography">Overview</Typography.Text>
</Button>
@ -43,7 +44,7 @@ function IntegrationDetailContent(
<Button
type="text"
className="integration-tab-btns"
icon={<Hammer size={14} />}
icon={<ConfigureIcon />}
>
<Typography.Text className="typography">Configure</Typography.Text>
</Button>
@ -56,7 +57,7 @@ function IntegrationDetailContent(
<Button
type="text"
className="integration-tab-btns"
icon={<Table2 size={14} />}
icon={<Group size={14} />}
>
<Typography.Text className="typography">Data Collected</Typography.Text>
</Button>

26
frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/Configure.tsx
View File

@ -1,6 +1,6 @@
import './IntegrationDetailContentTabs.styles.scss';
import { Button, Tooltip, Typography } from 'antd';
import { Button, Typography } from 'antd';
import cx from 'classnames';
import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
import { useState } from 'react';
@ -21,18 +21,18 @@ function Configure(props: ConfigurationProps): JSX.Element {
<div className="integration-detail-configure">
<div className="configure-menu">
{configuration.map((config, index) => (
<Tooltip title={config.title} key={config.title} placement="left">
<Button
key={config.title}
type="text"
className={cx('configure-menu-item', {
active: selectedConfigStep === index,
})}
onClick={(): void => handleMenuClick(index)}
>
<Typography.Text ellipsis>{config.title}</Typography.Text>
</Button>
</Tooltip>
<Button
key={config.title}
type="text"
className={cx('configure-menu-item', {
active: selectedConfigStep === index,
})}
onClick={(): void => handleMenuClick(index)}
>
<Typography.Text className="configure-text">
{config.title}
</Typography.Text>
</Button>
))}
</div>
<div className="markdown-container">

4
frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/DataCollected.tsx
View File

@ -59,7 +59,7 @@ function DataCollected(props: DataCollectedProps): JSX.Element {
index % 2 === 0 ? 'table-row-dark' : ''
}
dataSource={logsData}
pagination={{ pageSize: 3 }}
pagination={{ pageSize: 20 }}
className="logs-section-table"
/>
</div>
@ -74,7 +74,7 @@ function DataCollected(props: DataCollectedProps): JSX.Element {
index % 2 === 0 ? 'table-row-dark' : ''
}
dataSource={metricsData}
pagination={{ pageSize: 3 }}
pagination={{ pageSize: 20 }}
className="metrics-section-table"
/>
</div>

9
frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/IntegrationDetailContentTabs.styles.scss
View File

@ -4,7 +4,7 @@
.integration-detail-overview-left-container {
display: flex;
flex-direction: column;
width: 25%;
width: 30%;
gap: 26px;
border-right: 1px solid var(--bg-slate-500);
padding: 16px 0;
@ -185,13 +185,14 @@
.configure-menu {
display: flex;
flex-direction: column;
width: 25%;
width: 30%;
padding: 16px 16px 0px 0px;
border-right: 1px solid var(--bg-slate-500);
gap: 8px;
.configure-menu-item {
padding: 4px 8px;
height: auto;
text-align: start;
color: var(--bg-vanilla-100);
font-family: Inter;
@ -199,6 +200,10 @@
font-style: normal;
font-weight: 400;
line-height: 18px; /* 128.571% */
.configure-text {
text-wrap: pretty;
}
}
.configure-menu-item:hover {

42
frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailHeader.tsx
View File

@ -1,7 +1,7 @@
/* eslint-disable no-nested-ternary */
import './IntegrationDetailPage.styles.scss';
import { Button, Modal, Typography } from 'antd';
import { Button, Modal, Tooltip, Typography } from 'antd';
import installIntegration from 'api/Integrations/installIntegration';
import { SOMETHING_WENT_WRONG } from 'constants/api';
import dayjs from 'dayjs';
@ -22,6 +22,7 @@ interface IntegrationDetailHeaderProps {
connectionState: ConnectionStates;
connectionData: IntegrationConnectionStatus;
}
// eslint-disable-next-line sonarjs/cognitive-complexity
function IntegrationDetailHeader(
props: IntegrationDetailHeaderProps,
): JSX.Element {
@ -154,19 +155,42 @@ function IntegrationDetailHeader(
<Typography.Text className="last-data">
Last recieved from
</Typography.Text>
<Typography.Text className="last-value">
{latestData.last_received_from}
</Typography.Text>
<div className="connection-line" />
<Tooltip
title={latestData.last_received_from}
key={latestData.last_received_from}
placement="right"
>
<Typography.Text className="last-value" ellipsis>
{latestData.last_received_from}
</Typography.Text>
</Tooltip>
</div>
<div className="data-info">
<Typography.Text className="last-data">
Last recieved at
</Typography.Text>
<Typography.Text className="last-value">
{latestData.last_received_ts_ms
? dayjs(latestData.last_received_ts_ms).format('DD MMM YYYY HH:mm')
: ''}
</Typography.Text>
<div className="connection-line" />
<Tooltip
title={
latestData.last_received_ts_ms
? // eslint-disable-next-line sonarjs/no-duplicate-string
dayjs(latestData.last_received_ts_ms).format('DD MMM YYYY HH:mm')
: ''
}
key={
latestData.last_received_ts_ms
? dayjs(latestData.last_received_ts_ms).format('DD MMM YYYY HH:mm')
: ''
}
placement="right"
>
<Typography.Text className="last-value" ellipsis>
{latestData.last_received_ts_ms
? dayjs(latestData.last_received_ts_ms).format('DD MMM YYYY HH:mm')
: ''}
</Typography.Text>
</Tooltip>
</div>
</>
) : connectionState === ConnectionStates.TestingConnection ? (

28
frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailPage.styles.scss
View File

@ -53,9 +53,17 @@
.loading-integration-details {
display: flex;
height: 400px;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 16px;
.skeleton-1 {
height: 125px;
width: 100%;
}
.skeleton-2 {
height: 250px;
width: 100%;
}
}
.all-integrations-btn {
@ -254,6 +262,7 @@
border-radius: 4px;
border: 1px solid rgba(218, 85, 101, 0.2);
background: rgba(218, 85, 101, 0.06);
gap: 32px;
.unintall-integration-bar-text {
display: flex;
@ -429,6 +438,15 @@
.data-info {
display: flex;
justify-content: space-between;
align-items: center;
.connection-line {
border: 1px dashed var(--bg-slate-200);
min-width: 20px;
height: 0px;
flex-grow: 1;
margin: 0px 8px;
}
.last-data {
color: var(--bg-vanilla-400);
@ -447,6 +465,7 @@
font-style: normal;
font-weight: 400;
line-height: 18px; /* 150% */
max-width: 320px;
}
}
.testingConnection {
@ -622,6 +641,9 @@
.connection-content {
.data-info {
.connection-line {
border: 1px dashed var(--bg-vanilla-400);
}
.last-data {
color: var(--bg-slate-400);
}

5
frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailPage.tsx
View File

@ -4,7 +4,7 @@
import './IntegrationDetailPage.styles.scss';
import { Color } from '@signozhq/design-tokens';
import { Button, Typography } from 'antd';
import { Button, Skeleton, Typography } from 'antd';
import { useGetIntegration } from 'hooks/Integrations/useGetIntegration';
import { useGetIntegrationStatus } from 'hooks/Integrations/useGetIntegrationStatus';
import { defaultTo } from 'lodash-es';
@ -71,7 +71,8 @@ function IntegrationDetailPage(props: IntegrationDetailPageProps): JSX.Element {
{loading ? (
<div className="loading-integration-details">
Please wait.. While we load the integration details
<Skeleton.Input active size="large" className="skeleton-1" />
<Skeleton.Input active size="large" className="skeleton-2" />
</div>
) : isError ? (
<div className="error-container">

29
frontend/src/pages/Integrations/Integrations.tsx
View File

@ -1,17 +1,38 @@
import './Integrations.styles.scss';
import { useState } from 'react';
import useUrlQuery from 'hooks/useUrlQuery';
import { useCallback, useMemo, useState } from 'react';
import { useHistory, useLocation } from 'react-router-dom';
import Header from './Header';
import IntegrationDetailPage from './IntegrationDetailPage/IntegrationDetailPage';
import IntegrationsList from './IntegrationsList';
function Integrations(): JSX.Element {
const [selectedIntegration, setSelectedIntegration] = useState<string | null>(
null,
const urlQuery = useUrlQuery();
const history = useHistory();
const location = useLocation();
const selectedIntegration = useMemo(() => urlQuery.get('integration'), [
urlQuery,
]);
const setSelectedIntegration = useCallback(
(integration: string | null) => {
if (integration) {
urlQuery.set('integration', integration);
} else {
urlQuery.set('integration', '');
}
const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
history.push(generatedUrl);
},
[history, location.pathname, urlQuery],
);
const [activeDetailTab, setActiveDetailTab] = useState<string | null>(null);
const [activeDetailTab, setActiveDetailTab] = useState<string | null>(
'overview',
);
const [searchTerm, setSearchTerm] = useState<string>('');
return (