Chore/update request texts and integrations (#8305)

* chore: update request dashboard and integrations text

* chore: hide tab/table when data is not available

* chore: add new template text

* fix: test case
This commit is contained in:
Vishal Sharma 2025-06-23 19:54:47 +05:30 committed by GitHub
parent ebcb172614
commit 50f3fc0ff9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 63 additions and 41 deletions

View File

@ -14,7 +14,7 @@ function CloudIntegrationPage(): JSX.Element {
<HeroSection />
<RequestIntegrationBtn
type={IntegrationType.AWS_SERVICES}
message="Cannot find the AWS service you're looking for? Request more integrations"
message="Can't find the AWS service you're looking for? Request more integrations"
/>
<ServicesTabs />
</div>

View File

@ -60,26 +60,30 @@ function CloudServiceDataCollected({
return (
<div className="cloud-service-data-collected">
<div className="cloud-service-data-collected__table">
<div className="cloud-service-data-collected__table-heading">Logs</div>
<Table
columns={logsColumns}
dataSource={logsData}
// eslint-disable-next-line react/jsx-props-no-spreading
{...tableProps}
className="cloud-service-data-collected__table-logs"
/>
</div>
<div className="cloud-service-data-collected__table">
<div className="cloud-service-data-collected__table-heading">Metrics</div>
<Table
columns={metricsColumns}
dataSource={metricsData}
// eslint-disable-next-line react/jsx-props-no-spreading
{...tableProps}
className="cloud-service-data-collected__table-metrics"
/>
</div>
{logsData && logsData.length > 0 && (
<div className="cloud-service-data-collected__table">
<div className="cloud-service-data-collected__table-heading">Logs</div>
<Table
columns={logsColumns}
dataSource={logsData}
// eslint-disable-next-line react/jsx-props-no-spreading
{...tableProps}
className="cloud-service-data-collected__table-logs"
/>
</div>
)}
{metricsData && metricsData.length > 0 && (
<div className="cloud-service-data-collected__table">
<div className="cloud-service-data-collected__table-heading">Metrics</div>
<Table
columns={metricsColumns}
dataSource={metricsData}
// eslint-disable-next-line react/jsx-props-no-spreading
{...tableProps}
className="cloud-service-data-collected__table-metrics"
/>
</div>
)}
</div>
);
}

View File

@ -51,6 +51,33 @@ function ServiceStatus({
return <div className={`service-status ${className}`}>{text}</div>;
}
function getTabItems(serviceDetailsData: any): TabsProps['items'] {
const dashboards = serviceDetailsData?.assets.dashboards || [];
const dataCollected = serviceDetailsData?.data_collected || {};
const items: TabsProps['items'] = [];
if (dashboards.length) {
items.push({
key: 'dashboards',
label: `Dashboards (${dashboards.length})`,
children: <CloudServiceDashboards service={serviceDetailsData} />,
});
}
items.push({
key: 'data-collected',
label: 'Data Collected',
children: (
<CloudServiceDataCollected
logsData={dataCollected.logs || []}
metricsData={dataCollected.metrics || []}
/>
),
});
return items;
}
function ServiceDetails(): JSX.Element | null {
const urlQuery = useUrlQuery();
const cloudAccountId = urlQuery.get('cloudAccountId');
@ -106,23 +133,7 @@ function ServiceDetails(): JSX.Element | null {
return null;
}
const tabItems: TabsProps['items'] = [
{
key: 'dashboards',
label: `Dashboards (${serviceDetailsData?.assets.dashboards.length})`,
children: <CloudServiceDashboards service={serviceDetailsData} />,
},
{
key: 'data-collected',
label: 'Data Collected',
children: (
<CloudServiceDataCollected
logsData={serviceDetailsData?.data_collected.logs || []}
metricsData={serviceDetailsData?.data_collected.metrics || []}
/>
),
},
];
const tabItems = getTabItems(serviceDetailsData);
return (
<div className="service-details">

View File

@ -34,7 +34,7 @@ describe('Request AWS integration', () => {
expect(
screen.getByText(
/cannot find what youre looking for\? request more integrations/i,
/can't find what youre looking for\? request more integrations/i,
),
).toBeInTheDocument();

View File

@ -58,7 +58,14 @@ export function RequestDashboardBtn(): JSX.Element {
return (
<div className="request-entity-container">
<Typography.Text>
Can&apos;t find the dashboard you need? Request a new Dashboard.
<a
href="https://github.com/SigNoz/dashboards"
target="_blank"
rel="noopener noreferrer"
>
Browse dashboard templates
</a>{' '}
or Request new template
</Typography.Text>
<div className="form-section">

View File

@ -116,5 +116,5 @@ export function RequestIntegrationBtn({
RequestIntegrationBtn.defaultProps = {
type: IntegrationType.INTEGRATIONS_LIST,
message: 'Cannot find what youre looking for? Request more integrations',
message: "Can't find what youre looking for? Request more integrations",
};