-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(asset): add the query type and group by buttons for calibration …
…forecast (#64) Co-authored-by: rmilea <robert.milea@ni.com> Co-authored-by: vpstoynova <100705307+vpstoynova@users.noreply.github.com>
- Loading branch information
3 people
authored
Aug 28, 2024
1 parent
fe929af
commit 7ab470b
Showing
10 changed files
with
798 additions
and
322 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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
43 changes: 43 additions & 0 deletions
43
src/datasources/asset/__snapshots__/AssetDataSource.test.ts.snap
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
71 changes: 71 additions & 0 deletions
71
src/datasources/asset/components/AssetQueryCalibrationForecastEditor.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,71 @@ | ||
| import { screen, waitFor } from '@testing-library/react'; | ||
| import { setupRenderer } from '../../../test/fixtures'; | ||
| import { SystemMetadata } from '../../system/types'; | ||
| import { AssetDataSource } from '../AssetDataSource'; | ||
| import { AssetQueryEditor } from './AssetQueryEditor'; | ||
| import { AssetCalibrationForecastGroupByType, AssetCalibrationForecastQuery, AssetQueryType } from '../types'; | ||
| import { select } from 'react-select-event'; | ||
|
|
||
| const fakeSystems: SystemMetadata[] = [ | ||
| { | ||
| id: '1', | ||
| state: 'CONNECTED', | ||
| workspace: '1', | ||
| }, | ||
| { | ||
| id: '2', | ||
| state: 'CONNECTED', | ||
| workspace: '2', | ||
| }, | ||
| ]; | ||
|
|
||
| class FakeAssetDataSource extends AssetDataSource { | ||
| querySystems(filter?: string, projection?: string[]): Promise<SystemMetadata[]> { | ||
| return Promise.resolve(fakeSystems); | ||
| } | ||
| } | ||
|
|
||
| const render = setupRenderer(AssetQueryEditor, FakeAssetDataSource); | ||
|
|
||
| it('renders with query type calibration forecast', async () => { | ||
| render({ queryKind: AssetQueryType.CalibrationForecast } as AssetCalibrationForecastQuery); | ||
|
|
||
| const groupBy = screen.getAllByRole('combobox')[1]; | ||
| expect(groupBy).not.toBeNull(); | ||
| }); | ||
|
|
||
| it('renders with query type calibration forecast and updates group by', async () => { | ||
| const [onChange] = render({ | ||
| queryKind: AssetQueryType.CalibrationForecast, | ||
| groupBy: [AssetCalibrationForecastGroupByType.Month], | ||
| } as AssetCalibrationForecastQuery); | ||
|
|
||
| // User selects group by day | ||
| const groupBy = screen.getAllByRole('combobox')[1]; | ||
| await select(groupBy, "Day", { container: document.body }); | ||
| await waitFor(() => { | ||
| expect(onChange).toHaveBeenCalledWith( | ||
| expect.objectContaining({ groupBy: [AssetCalibrationForecastGroupByType.Day] }) | ||
| ); | ||
| }); | ||
|
|
||
| // User selects group by location and week, overrides time | ||
| await select(groupBy,"Week", { container: document.body }); | ||
| await waitFor(() => { | ||
| expect(onChange).toHaveBeenCalledWith( | ||
| expect.objectContaining({ | ||
| groupBy: [AssetCalibrationForecastGroupByType.Week], | ||
| }) | ||
| ); | ||
| }); | ||
|
|
||
| // User selects group by location and month, overrides time | ||
| await select(groupBy, "Month", { container: document.body }); | ||
| await waitFor(() => { | ||
| expect(onChange).toHaveBeenCalledWith( | ||
| expect.objectContaining({ | ||
| groupBy: [AssetCalibrationForecastGroupByType.Month], | ||
| }) | ||
| ); | ||
| }); | ||
| }); |
62 changes: 62 additions & 0 deletions
62
src/datasources/asset/components/AssetQueryCalibrationForecastEditor.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,62 @@ | ||
| import { SelectableValue, toOption } from '@grafana/data'; | ||
| import { AssetDataSource } from '../AssetDataSource'; | ||
| import { AssetCalibrationForecastGroupByType, AssetCalibrationForecastQuery, AssetQuery } from '../types'; | ||
| import { InlineField, MultiSelect } from '@grafana/ui'; | ||
| import React from 'react'; | ||
| import { enumToOptions } from '../../../core/utils'; | ||
| import _ from 'lodash'; | ||
|
|
||
| type Props = { | ||
| query: AssetCalibrationForecastQuery; | ||
| handleQueryChange: (value: AssetQuery, runQuery: boolean) => void; | ||
| datasource: AssetDataSource; | ||
| }; | ||
|
|
||
| export function QueryCalibrationForecastEditor({ query, handleQueryChange, datasource }: Props) { | ||
| query = datasource.prepareQuery(query) as AssetCalibrationForecastQuery; | ||
| const handleGroupByChange = (items?: Array<SelectableValue<string>>): void => { | ||
| if (!items || _.isEqual(query.groupBy, items)) { | ||
| return; | ||
| } | ||
|
|
||
| let groupBy: string[] = []; | ||
| let timeGrouping: string = null!; | ||
|
|
||
| for (let item of items) { | ||
| if (item.value === AssetCalibrationForecastGroupByType.Day || item.value === AssetCalibrationForecastGroupByType.Week || item.value === AssetCalibrationForecastGroupByType.Month) { | ||
| timeGrouping = item.value; | ||
| continue; | ||
| } | ||
|
|
||
| groupBy.push(item.value!); | ||
| } | ||
|
|
||
| if (timeGrouping) { | ||
| groupBy.push(timeGrouping); | ||
| } | ||
| groupBy = groupBy.slice(-2); | ||
|
|
||
| if (!_.isEqual(query.groupBy, groupBy)) { | ||
| handleQueryChange({ ...query, groupBy: groupBy }, groupBy.length !== 0); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <InlineField label="Group by" tooltip={tooltips.calibrationForecast.groupBy} labelWidth={22}> | ||
| <MultiSelect | ||
| options={enumToOptions(AssetCalibrationForecastGroupByType)} | ||
| onChange={handleGroupByChange} | ||
| width={85} | ||
| value={query.groupBy.map(toOption) || []} | ||
| /> | ||
| </InlineField> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| const tooltips = { | ||
| calibrationForecast: { | ||
| groupBy: `Group the calibration forecast by day, week, month. Only one time-based grouping is allowed. Only two groupings are allowed. This is a required field.`, | ||
| }, | ||
| }; |
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.