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

feat: added links to integrations page in onboarding section (#5606)

Browse Source 
* feat: added links to integrations page in onboarding section

* feat: removed box shadow for button

* refactor: added routes object to navigate to integrations page

* feat: added new styles for data source name
This commit is contained in:
rahulkeswani101 2024-08-06 19:18:48 +05:30 committed by GitHub
parent a6848f6abd
commit b819a90c80
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 57 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.styles.scss
View File

@ -41,3 +41,37 @@ div[class*='-setup-instructions-container'] {
.service-name-container {
width: 100%;
}
.intgeration-page-container {
background-color: var(--bg-ink-400);
border-color: var(--bg-slate-500);
}
.intgeration-page-container-text {
color: var(--bg-vanilla-400);
}
.navigate-integrations-page-btn {
display: flex;
align-items: center;
color: var(--bg-vanilla-100);
background-color: var(--bg-slate-300);
box-shadow: none;
border: none;
}
.dataSourceName {
color: var(--bg-vanilla-100);
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
}
.lightMode {
.dataSourceName {
color: var(--bg-slate-500);
}
}

25
frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx
View File

@ -6,6 +6,7 @@ import { LoadingOutlined } from '@ant-design/icons';
import { Button, Card, Form, Input, Select, Space, Typography } from 'antd';
import logEvent from 'api/common/logEvent';
import cx from 'classnames';
import ROUTES from 'constants/routes';
import { useOnboardingContext } from 'container/OnboardingContainer/context/OnboardingContext';
import { useCases } from 'container/OnboardingContainer/OnboardingContainer';
import {
@ -14,9 +15,10 @@ import {
hasFrameworks,
} from 'container/OnboardingContainer/utils/dataSourceUtils';
import { useNotifications } from 'hooks/useNotifications';
import { Check } from 'lucide-react';
import { Blocks, Check } from 'lucide-react';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useHistory } from 'react-router-dom';
import { popupContainer } from 'utils/selectPopupContainer';
export interface DataSourceType {
@ -29,6 +31,7 @@ export interface DataSourceType {
export default function DataSource(): JSX.Element {
const [form] = Form.useForm();
const { t } = useTranslation(['common']);
const history = useHistory();
const {
serviceName,
@ -127,6 +130,10 @@ export default function DataSource(): JSX.Element {
}
};
const goToIntegrationsPage = (): void => {
history.push(ROUTES.INTEGRATIONS);
};
return (
<div className="module-container">
<Typography.Text className="data-source-title">
@ -156,7 +163,7 @@ export default function DataSource(): JSX.Element {
</div>
<div>
<Typography.Text className="serviceName">
<Typography.Text className="dataSourceName">
{dataSource.name}
</Typography.Text>
</div>
@ -214,6 +221,20 @@ export default function DataSource(): JSX.Element {
</>
)}
<div className="request-entity-container intgeration-page-container">
<Typography.Text className="intgeration-page-container-text">
Not able to find datasources you are looking for, check our Integrations
page which allows more sources of sending data
</Typography.Text>
<Button
onClick={goToIntegrationsPage}
icon={<Blocks size={14} />}
className="navigate-integrations-page-btn"
>
Go to integrations
</Button>
</div>
<div className="request-entity-container">
<Typography.Text>
Cannot find what you’re looking for? Request a data source