-
Notifications
You must be signed in to change notification settings - Fork 358
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
upcoming: [DI-19062] - Dashboard Select component in cloudpulse globa…
…l filters view (#10589) * upcoming: [DI-19062] - Dashboard Select component in cloudpulse global filters view * upcoming: [DI-19062] - Added change set * upcoming: [DI-19062] - Replaced the hard-coded url with placeholder * upcoming: [DI-19062] - Updated placeholder in dashboard select component * upcoming: [DI-19062] - Added test cases
- Loading branch information
1 parent
ba34d6f
commit 4579280
Showing
13 changed files
with
347 additions
and
13 deletions.
There are no files selected for viewing
5 changes: 5 additions & 0 deletions
5
packages/api-v4/.changeset/pr-10589-upcoming-features-1718971604339.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"@linode/api-v4": Upcoming Features | ||
--- | ||
|
||
Added types needed for DashboardSelect component ([#10589](https://github.com/linode/manager/pull/10589)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import { ResourcePage } from 'src/types'; | ||
import Request, { setMethod, setURL } from '../request'; | ||
import { Dashboard } from './types'; | ||
import { API_ROOT } from 'src/constants'; | ||
|
||
//Returns the list of all the dashboards available | ||
export const getDashboards = () => | ||
Request<ResourcePage<Dashboard>>( | ||
setURL( | ||
`${API_ROOT}/monitor/services/linode/dashboards` | ||
), | ||
setMethod('GET'), | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export * from './types' | ||
|
||
export * from './dashboards' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
export interface Dashboard { | ||
id: number; | ||
label: string; | ||
widgets: Widgets[]; | ||
created: string; | ||
updated: string; | ||
time_duration: TimeDuration; | ||
service_type: string; | ||
} | ||
|
||
export interface TimeGranularity { | ||
unit: string; | ||
value: number; | ||
} | ||
|
||
export interface TimeDuration { | ||
unit: string; | ||
value: number; | ||
} | ||
|
||
export interface Widgets { | ||
label: string; | ||
metric: string; | ||
aggregate_function: string; | ||
group_by: string; | ||
region_id: number; | ||
namespace_id: number; | ||
color: string; | ||
size: number; | ||
chart_type: string; | ||
y_label: string; | ||
filters: Filters[]; | ||
serviceType: string; | ||
service_type: string; | ||
resource_id: string[]; | ||
time_granularity: TimeGranularity; | ||
time_duration: TimeDuration; | ||
unit: string; | ||
} | ||
|
||
export interface Filters { | ||
key: string; | ||
operator: string; | ||
value: string; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5 changes: 5 additions & 0 deletions
5
packages/manager/.changeset/pr-10589-upcoming-features-1718716331830.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"@linode/manager": Upcoming Features | ||
--- | ||
|
||
Added Dashboard Selection component inside the Global Filters of CloudPulse view. ([#10589](https://github.com/linode/manager/pull/10589)) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
72 changes: 72 additions & 0 deletions
72
packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,72 @@ | ||
import { renderWithTheme } from "src/utilities/testHelpers"; | ||
import { CloudPulseDashboardSelect, CloudPulseDashboardSelectProps } from "./CloudPulseDashboardSelect"; | ||
import React from "react"; | ||
import { fireEvent, screen } from '@testing-library/react'; | ||
|
||
const props: CloudPulseDashboardSelectProps = { | ||
handleDashboardChange: vi.fn(), | ||
} | ||
|
||
const queryMocks = vi.hoisted(() => ({ | ||
useCloudViewDashboardsQuery: vi.fn().mockReturnValue({}), | ||
})); | ||
|
||
vi.mock('src/queries/cloudpulse/dashboards', async () => { | ||
const actual = await vi.importActual('src/queries/cloudpulse/dashboards'); | ||
return { | ||
...actual, | ||
useCloudViewDashboardsQuery: queryMocks.useCloudViewDashboardsQuery, | ||
}; | ||
}); | ||
|
||
queryMocks.useCloudViewDashboardsQuery.mockReturnValue({ | ||
data: | ||
{ | ||
data: [ | ||
{ | ||
id: 1, | ||
type: "standard", | ||
service_type: "linode", | ||
label: "Dashboard 1", | ||
created: "2024-04-29T17:09:29", | ||
updated: null, | ||
widgets: {} | ||
} | ||
] | ||
} | ||
, | ||
isLoading: false, | ||
error: false | ||
}); | ||
|
||
describe("CloudPulse Dashboard select", () => { | ||
it("Should render dashboard select component", () => { | ||
const { getByTestId, getByPlaceholderText } = renderWithTheme( | ||
<CloudPulseDashboardSelect {...props} /> | ||
); | ||
|
||
expect(getByTestId('cloudview-dashboard-select')).toBeInTheDocument(); | ||
expect(getByPlaceholderText('Select a Dashboard')).toBeInTheDocument(); | ||
|
||
}), | ||
|
||
it("Should render dashboard select component with data", () => { | ||
|
||
|
||
renderWithTheme(<CloudPulseDashboardSelect {...props} />) | ||
|
||
fireEvent.click(screen.getByRole('button', { name: 'Open' })); | ||
|
||
expect(screen.getByRole('option', { name: 'Dashboard 1' })).toBeInTheDocument(); | ||
}), | ||
|
||
it("Should select the option on click", () => { | ||
|
||
renderWithTheme(<CloudPulseDashboardSelect {...props} />); | ||
|
||
fireEvent.click(screen.getByRole("button", { name: "Open" })); | ||
fireEvent.click(screen.getByRole("option", { name: "Dashboard 1" })); | ||
|
||
expect(screen.getByRole("combobox")).toHaveAttribute("value", "Dashboard 1"); | ||
}) | ||
}) |
79 changes: 79 additions & 0 deletions
79
packages/manager/src/features/CloudPulse/shared/CloudPulseDashboardSelect.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,79 @@ | ||
import React from 'react'; | ||
|
||
import { Dashboard } from '@linode/api-v4' | ||
import { Autocomplete } from 'src/components/Autocomplete/Autocomplete'; | ||
import { Box } from 'src/components/Box'; | ||
import { Typography } from 'src/components/Typography'; | ||
import { useCloudViewDashboardsQuery } from 'src/queries/cloudpulse/dashboards'; | ||
|
||
|
||
export interface CloudPulseDashboardSelectProps { | ||
handleDashboardChange: ( | ||
dashboard: Dashboard | undefined | ||
) => void | ||
} | ||
|
||
export const CloudPulseDashboardSelect = React.memo((props: CloudPulseDashboardSelectProps) => { | ||
|
||
const { | ||
data: dashboardsList, | ||
error, | ||
isLoading, | ||
} = useCloudViewDashboardsQuery(true); //Fetch the list of dashboards | ||
|
||
const errorText: string = error ? 'Error loading dashboards' : ''; | ||
|
||
const placeHolder = "Select a Dashboard"; | ||
|
||
// sorts dashboards by service type. Required due to unexpected autocomplete grouping behaviour | ||
const getSortedDashboardsList = (options: Dashboard[]) => { | ||
return options.sort( | ||
(a, b) => -b.service_type.localeCompare(a.service_type) | ||
); | ||
}; | ||
|
||
if (!dashboardsList) { | ||
return ( | ||
<Autocomplete | ||
options={[]} | ||
label='' | ||
disabled={true} | ||
onChange={() => { }} | ||
data-testid="cloudview-dashboard-select" | ||
placeholder={placeHolder} | ||
errorText={errorText} | ||
/> | ||
) | ||
} | ||
|
||
return ( | ||
<Autocomplete | ||
onChange={(_: any, dashboard: Dashboard) => { | ||
props.handleDashboardChange(dashboard); | ||
}} | ||
options={ getSortedDashboardsList(dashboardsList.data) } | ||
renderGroup={(params) => ( | ||
<Box key={params.key}> | ||
<Typography | ||
sx={{ marginLeft: '3.5%', textTransform: 'capitalize' }} | ||
variant="h3" | ||
> | ||
{params.group} | ||
</Typography> | ||
{params.children} | ||
</Box> | ||
)} | ||
autoHighlight | ||
clearOnBlur | ||
data-testid="cloudview-dashboard-select" | ||
errorText={errorText} | ||
fullWidth | ||
groupBy={(option: Dashboard) => option.service_type} | ||
isOptionEqualToValue={(option, value) => option.label === value.label} | ||
label="" | ||
loading={isLoading} | ||
noMarginTop | ||
placeholder={placeHolder} | ||
/> | ||
); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
19 changes: 8 additions & 11 deletions
19
packages/manager/src/features/CloudPulse/shared/CloudPulseRegionSelect.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.