diff --git a/frontend/public/Icons/cable-car.svg b/frontend/public/Icons/cable-car.svg new file mode 100644 index 0000000000..0c7318debd --- /dev/null +++ b/frontend/public/Icons/cable-car.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/public/Icons/configure.svg b/frontend/public/Icons/configure.svg new file mode 100644 index 0000000000..088dfa9447 --- /dev/null +++ b/frontend/public/Icons/configure.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/public/Icons/group.svg b/frontend/public/Icons/group.svg new file mode 100644 index 0000000000..e293cebcd0 --- /dev/null +++ b/frontend/public/Icons/group.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/assets/Integrations/ConfigureIcon.tsx b/frontend/src/assets/Integrations/ConfigureIcon.tsx new file mode 100644 index 0000000000..84ddef5de0 --- /dev/null +++ b/frontend/src/assets/Integrations/ConfigureIcon.tsx @@ -0,0 +1,23 @@ +import { Color } from '@signozhq/design-tokens'; +import { useIsDarkMode } from 'hooks/useDarkMode'; + +function ConfigureIcon(): JSX.Element { + const isDarkMode = useIsDarkMode(); + return ( + + + + + + + ); +} + +export default ConfigureIcon; diff --git a/frontend/src/constants/query.ts b/frontend/src/constants/query.ts index d3bd2729d1..31ec5fcd20 100644 --- a/frontend/src/constants/query.ts +++ b/frontend/src/constants/query.ts @@ -27,5 +27,6 @@ export enum QueryParams { viewName = 'viewName', viewKey = 'viewKey', expandedWidgetId = 'expandedWidgetId', + integration = 'integration', pagination = 'pagination', } diff --git a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContent.tsx b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContent.tsx index 6083489b58..ec81d51db6 100644 --- a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContent.tsx +++ b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContent.tsx @@ -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( @@ -43,7 +44,7 @@ function IntegrationDetailContent( @@ -56,7 +57,7 @@ function IntegrationDetailContent( diff --git a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/Configure.tsx b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/Configure.tsx index ede3b41137..92a5e0c823 100644 --- a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/Configure.tsx +++ b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/Configure.tsx @@ -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 {
{configuration.map((config, index) => ( - - - + ))}
diff --git a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/DataCollected.tsx b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/DataCollected.tsx index a3c387dc3a..1c605ec863 100644 --- a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/DataCollected.tsx +++ b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/DataCollected.tsx @@ -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" />
@@ -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" />
diff --git a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/IntegrationDetailContentTabs.styles.scss b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/IntegrationDetailContentTabs.styles.scss index 8340d0d4c0..81dcb6bf59 100644 --- a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/IntegrationDetailContentTabs.styles.scss +++ b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailContentTabs/IntegrationDetailContentTabs.styles.scss @@ -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 { diff --git a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailHeader.tsx b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailHeader.tsx index 6b2a7b7c34..cab49391f5 100644 --- a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailHeader.tsx +++ b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailHeader.tsx @@ -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( Last recieved from - - {latestData.last_received_from} - +
+ + + {latestData.last_received_from} + +
Last recieved at - - {latestData.last_received_ts_ms - ? dayjs(latestData.last_received_ts_ms).format('DD MMM YYYY HH:mm') - : ''} - +
+ + + {latestData.last_received_ts_ms + ? dayjs(latestData.last_received_ts_ms).format('DD MMM YYYY HH:mm') + : ''} + +
) : connectionState === ConnectionStates.TestingConnection ? ( diff --git a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailPage.styles.scss b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailPage.styles.scss index d9982c3aab..b7630491ae 100644 --- a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailPage.styles.scss +++ b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailPage.styles.scss @@ -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); } diff --git a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailPage.tsx b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailPage.tsx index e9a975001a..88be0dc3a3 100644 --- a/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailPage.tsx +++ b/frontend/src/pages/Integrations/IntegrationDetailPage/IntegrationDetailPage.tsx @@ -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 ? (
- Please wait.. While we load the integration details + +
) : isError ? (
diff --git a/frontend/src/pages/Integrations/Integrations.tsx b/frontend/src/pages/Integrations/Integrations.tsx index 6d25a20a6f..bda4184eab 100644 --- a/frontend/src/pages/Integrations/Integrations.tsx +++ b/frontend/src/pages/Integrations/Integrations.tsx @@ -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( - 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(null); + const [activeDetailTab, setActiveDetailTab] = useState( + 'overview', + ); const [searchTerm, setSearchTerm] = useState(''); return (