IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

PublicDashboards: Time range setting added (#60487)

Browse Source 
Time range added for public dashboard: 

- Enable/Disable switch added in public dashboard configuration.
- Time range picker shown in public dashboard for viewer user
This commit is contained in:
juanicabanas 2022-12-19 17:38:37 +03:00 committed by GitHub
parent 65f7b93e6b
commit 6f609dbced
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 180 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/grafana-e2e-selectors/src/selectors/pages.ts
View File

@ -188,6 +188,7 @@ export const Pages = {
CostIncreaseCheckbox: 'data-testid public dashboard cost may increase checkbox',
EnableSwitch: 'data-testid public dashboard on off switch',
EnableAnnotationsSwitch: 'data-testid public dashboard on off switch for annotations',
EnableTimeRangeSwitch: 'data-testid public dashboard on off switch for time range',
SaveConfigButton: 'data-testid public dashboard save config button',
DeleteButton: 'data-testid public dashboard delete button',
CopyUrlInput: 'data-testid public dashboard copy url input',

51
pkg/api/dashboard.go
View File

@ -101,9 +101,10 @@ func (hs *HTTPServer) GetDashboard(c *models.ReqContext) response.Response {
}
var (
hasPublicDashboard = false
publicDashboardEnabled = false
err error
hasPublicDashboard = false
publicDashboardEnabled = false
publicDashboardTimeSelectionEnabled = false
err error
)
// If public dashboards is enabled and we have a public dashboard, update meta
@ -116,6 +117,7 @@ func (hs *HTTPServer) GetDashboard(c *models.ReqContext) response.Response {
if publicDashboard != nil {
hasPublicDashboard = true
publicDashboardTimeSelectionEnabled = publicDashboard.TimeSelectionEnabled
publicDashboardEnabled = publicDashboard.IsEnabled
}
}
@ -167,27 +169,28 @@ func (hs *HTTPServer) GetDashboard(c *models.ReqContext) response.Response {
}
meta := dtos.DashboardMeta{
IsStarred: isStarred,
Slug: dash.Slug,
Type: models.DashTypeDB,
CanStar: c.IsSignedIn,
CanSave: canSave,
CanEdit: canEdit,
CanAdmin: canAdmin,
CanDelete: canDelete,
Created: dash.Created,
Updated: dash.Updated,
UpdatedBy: updater,
CreatedBy: creator,
Version: dash.Version,
HasACL: dash.HasACL,
IsFolder: dash.IsFolder,
FolderId: dash.FolderId,
Url: dash.GetUrl(),
FolderTitle: "General",
AnnotationsPermissions: annotationPermissions,
PublicDashboardEnabled: publicDashboardEnabled,
HasPublicDashboard: hasPublicDashboard,
IsStarred: isStarred,
Slug: dash.Slug,
Type: models.DashTypeDB,
CanStar: c.IsSignedIn,
CanSave: canSave,
CanEdit: canEdit,
CanAdmin: canAdmin,
CanDelete: canDelete,
Created: dash.Created,
Updated: dash.Updated,
UpdatedBy: updater,
CreatedBy: creator,
Version: dash.Version,
HasACL: dash.HasACL,
IsFolder: dash.IsFolder,
FolderId: dash.FolderId,
Url: dash.GetUrl(),
FolderTitle: "General",
AnnotationsPermissions: annotationPermissions,
PublicDashboardEnabled: publicDashboardEnabled,
HasPublicDashboard: hasPublicDashboard,
PublicDashboardTimeSelectionEnabled: publicDashboardTimeSelectionEnabled,
}
// lookup folder title

59
pkg/api/dtos/dashboard.go
View File

@ -7,35 +7,36 @@ import (
)
type DashboardMeta struct {
IsStarred bool `json:"isStarred,omitempty"`
IsSnapshot bool `json:"isSnapshot,omitempty"`
Type string `json:"type,omitempty"`
CanSave bool `json:"canSave"`
CanEdit bool `json:"canEdit"`
CanAdmin bool `json:"canAdmin"`
CanStar bool `json:"canStar"`
CanDelete bool `json:"canDelete"`
Slug string `json:"slug"`
Url string `json:"url"`
Expires time.Time `json:"expires"`
Created time.Time `json:"created"`
Updated time.Time `json:"updated"`
UpdatedBy string `json:"updatedBy"`
CreatedBy string `json:"createdBy"`
Version int `json:"version"`
HasACL bool `json:"hasAcl" xorm:"has_acl"`
IsFolder bool `json:"isFolder"`
FolderId int64 `json:"folderId"`
FolderUid string `json:"folderUid"`
FolderTitle string `json:"folderTitle"`
FolderUrl string `json:"folderUrl"`
Provisioned bool `json:"provisioned"`
ProvisionedExternalId string `json:"provisionedExternalId"`
AnnotationsPermissions *AnnotationPermission `json:"annotationsPermissions"`
HasPublicDashboard bool `json:"hasPublicDashboard"`
PublicDashboardAccessToken string `json:"publicDashboardAccessToken"`
PublicDashboardUID string `json:"publicDashboardUid"`
PublicDashboardEnabled bool `json:"publicDashboardEnabled"`
IsStarred bool `json:"isStarred,omitempty"`
IsSnapshot bool `json:"isSnapshot,omitempty"`
Type string `json:"type,omitempty"`
CanSave bool `json:"canSave"`
CanEdit bool `json:"canEdit"`
CanAdmin bool `json:"canAdmin"`
CanStar bool `json:"canStar"`
CanDelete bool `json:"canDelete"`
Slug string `json:"slug"`
Url string `json:"url"`
Expires time.Time `json:"expires"`
Created time.Time `json:"created"`
Updated time.Time `json:"updated"`
UpdatedBy string `json:"updatedBy"`
CreatedBy string `json:"createdBy"`
Version int `json:"version"`
HasACL bool `json:"hasAcl" xorm:"has_acl"`
IsFolder bool `json:"isFolder"`
FolderId int64 `json:"folderId"`
FolderUid string `json:"folderUid"`
FolderTitle string `json:"folderTitle"`
FolderUrl string `json:"folderUrl"`
Provisioned bool `json:"provisioned"`
ProvisionedExternalId string `json:"provisionedExternalId"`
AnnotationsPermissions *AnnotationPermission `json:"annotationsPermissions"`
HasPublicDashboard bool `json:"hasPublicDashboard"`
PublicDashboardAccessToken string `json:"publicDashboardAccessToken"`
PublicDashboardUID string `json:"publicDashboardUid"`
PublicDashboardEnabled bool `json:"publicDashboardEnabled"`
PublicDashboardTimeSelectionEnabled bool `json:"publicDashboardTimeSelectionEnabled"`
}
type AnnotationPermission struct {
Dashboard AnnotationActions `json:"dashboard"`

29
pkg/services/publicdashboards/api/query.go
View File

@ -29,20 +29,21 @@ func (api *Api) ViewPublicDashboard(c *models.ReqContext) response.Response {
}
meta := dtos.DashboardMeta{
Slug: dash.Slug,
Type: models.DashTypeDB,
CanStar: false,
CanSave: false,
CanEdit: false,
CanAdmin: false,
CanDelete: false,
Created: dash.Created,
Updated: dash.Updated,
Version: dash.Version,
IsFolder: false,
FolderId: dash.FolderId,
PublicDashboardAccessToken: pubdash.AccessToken,
PublicDashboardUID: pubdash.Uid,
Slug: dash.Slug,
Type: models.DashTypeDB,
CanStar: false,
CanSave: false,
CanEdit: false,
CanAdmin: false,
CanDelete: false,
Created: dash.Created,
Updated: dash.Updated,
Version: dash.Version,
IsFolder: false,
FolderId: dash.FolderId,
PublicDashboardAccessToken: pubdash.AccessToken,
PublicDashboardUID: pubdash.Uid,
PublicDashboardTimeSelectionEnabled: pubdash.TimeSelectionEnabled,
}
dto := dtos.DashboardFullWithMeta{Meta: meta, Dashboard: dash.Data}

2
public/app/features/dashboard/api/publicDashboardApi.ts
View File

@ -70,6 +70,7 @@ export const publicDashboardApi = createApi({
hasPublicDashboard: true,
publicDashboardUid: data.uid,
publicDashboardEnabled: data.isEnabled,
publicDashboardTimeSelectionEnabled: data.timeSelectionEnabled,
});
},
invalidatesTags: (result, error, { payload }) => [{ type: 'PublicDashboard', id: payload.dashboardUid }],
@ -90,6 +91,7 @@ export const publicDashboardApi = createApi({
hasPublicDashboard: true,
publicDashboardUid: data.uid,
publicDashboardEnabled: data.isEnabled,
publicDashboardTimeSelectionEnabled: data.timeSelectionEnabled,
});
},
invalidatesTags: (result, error, { payload }) => [{ type: 'PublicDashboard', id: payload.dashboardUid }],

1
public/app/features/dashboard/components/DashNav/DashNav.test.tsx
View File

@ -36,6 +36,7 @@ describe('Public dashboard title tag', () => {
isFullscreen={false}
onAddPanel={() => {}}
title="test"
isPublic={false}
/>
</Router>
</GrafanaContext.Provider>

11
public/app/features/dashboard/components/DashNav/DashNav.tsx
View File

@ -58,6 +58,7 @@ export interface OwnProps {
title: string;
shareModalActiveTab?: string;
onAddPanel: () => void;
isPublic: boolean;
}
interface DashNavButtonModel {
@ -198,7 +199,7 @@ export const DashNav = React.memo<Props>((props) => {
const { canStar, canShare, isStarred } = dashboard.meta;
const buttons: ReactNode[] = [];
if (kioskMode || isPlaylistRunning()) {
if (kioskMode || isPlaylistRunning() || props.isPublic) {
return [];
}
@ -321,6 +322,10 @@ export const DashNav = React.memo<Props>((props) => {
return [renderPlaylistControls(), renderTimeControls()];
}
if (props.isPublic && !!props.dashboard.meta.publicDashboardTimeSelectionEnabled) {
return [renderTimeControls()];
}
if (kioskMode === KioskMode.TV) {
return [renderTimeControls(), tvButton];
}
@ -418,8 +423,8 @@ export const DashNav = React.memo<Props>((props) => {
return (
<PageToolbar
pageIcon={isFullscreen ? undefined : 'apps'}
title={title}
pageIcon={isFullscreen || props.isPublic ? undefined : 'apps'}
title={props.isPublic ? undefined : title}
parent={folderTitle}
titleHref={titleHref}
parentHref={parentHref}

8
public/app/features/dashboard/components/ShareModal/SharePublicDashboard/Configuration.tsx
View File

@ -34,9 +34,15 @@ export const Configuration = ({
<FieldSet disabled={disabled} className={styles.dashboardConfig}>
<VerticalGroup spacing="md">
<Layout orientation={isDesktop ? 0 : 1} spacing="xs" justify="space-between">
<Label description="The public dashboard uses the default time settings of the dashboard">Time range</Label>
<Label description="The public dashboard uses the default time settings of the dashboard">
Default time range
</Label>
<TimeRangeInput value={timeRange} disabled onChange={() => {}} />
</Layout>
<Layout orientation={isDesktop ? 0 : 1} spacing="xs" justify="space-between">
<Label description="Allow viewers to change time range">Time range picker enabled</Label>
<Switch {...register('isTimeRangeEnabled')} data-testid={selectors.EnableTimeRangeSwitch} />
</Layout>
<Layout orientation={isDesktop ? 0 : 1} spacing="xs" justify="space-between">
<Label description="Show annotations on public dashboard">Show annotations</Label>
<Switch

47
public/app/features/dashboard/components/ShareModal/SharePublicDashboard/SharePublicDashboard.test.tsx
View File

@ -17,6 +17,8 @@ import { configureStore } from 'app/store/configureStore';
import { ShareModal } from '../ShareModal';
import { PublicDashboard } from './SharePublicDashboardUtils';
const server = setupServer();
jest.mock('@grafana/runtime', () => ({
@ -158,6 +160,7 @@ describe('SharePublic', () => {
expect(screen.getByTestId(selectors.LimitedDSCheckbox)).toBeDisabled();
expect(screen.getByTestId(selectors.CostIncreaseCheckbox)).toBeDisabled();
expect(screen.getByTestId(selectors.EnableSwitch)).toBeDisabled();
expect(screen.getByTestId(selectors.EnableTimeRangeSwitch)).toBeDisabled();
expect(screen.getByTestId(selectors.SaveConfigButton)).toBeDisabled();
expect(screen.queryByTestId(selectors.DeleteButton)).not.toBeInTheDocument();
});
@ -176,6 +179,7 @@ describe('SharePublic', () => {
expect(screen.getByTestId(selectors.LimitedDSCheckbox)).toBeDisabled();
expect(screen.getByTestId(selectors.CostIncreaseCheckbox)).toBeDisabled();
expect(screen.getByTestId(selectors.EnableSwitch)).toBeDisabled();
expect(screen.getByTestId(selectors.EnableTimeRangeSwitch)).toBeDisabled();
expect(screen.getByTestId(selectors.EnableAnnotationsSwitch)).toBeDisabled();
expect(screen.getByText('Save public dashboard')).toBeInTheDocument();
expect(screen.getByTestId(selectors.SaveConfigButton)).toBeDisabled();
@ -218,6 +222,7 @@ describe('SharePublic - New config setup', () => {
expect(screen.getByTestId(selectors.CostIncreaseCheckbox)).toBeEnabled();
expect(screen.getByTestId(selectors.EnableSwitch)).toBeEnabled();
expect(screen.getByTestId(selectors.EnableAnnotationsSwitch)).toBeEnabled();
expect(screen.getByTestId(selectors.EnableTimeRangeSwitch)).toBeEnabled();
expect(screen.queryByTestId(selectors.DeleteButton)).not.toBeInTheDocument();
expect(screen.getByText('Create public dashboard')).toBeInTheDocument();
@ -252,6 +257,15 @@ describe('SharePublic - New config setup', () => {
});
describe('SharePublic - Already persisted', () => {
const pubdashResponse: PublicDashboard = {
isEnabled: true,
annotationsEnabled: true,
timeSelectionEnabled: true,
uid: 'a-uid',
dashboardUid: '',
accessToken: 'an-access-token',
};
beforeEach(() => {
mockDashboard.meta.hasPublicDashboard = true;
server.use(
@ -259,11 +273,8 @@ describe('SharePublic - Already persisted', () => {
return res(
ctx.status(200),
ctx.json({
isEnabled: true,
annotationsEnabled: true,
uid: 'a-uid',
...pubdashResponse,
dashboardUid: req.params.dashboardUid,
accessToken: 'an-access-token',
})
);
})
@ -292,6 +303,33 @@ describe('SharePublic - Already persisted', () => {
expect(screen.getByTestId(selectors.EnableAnnotationsSwitch)).toBeEnabled();
expect(screen.getByTestId(selectors.EnableAnnotationsSwitch)).toBeChecked();
});
it('when modal is opened, then time range switch is enabled and checked when its checked in the db', async () => {
await renderSharePublicDashboard({ panel: mockPanel, dashboard: mockDashboard, onDismiss: () => {} });
await waitForElementToBeRemoved(screen.getAllByTestId('Spinner'));
expect(screen.getByTestId(selectors.EnableTimeRangeSwitch)).toBeEnabled();
expect(screen.getByTestId(selectors.EnableTimeRangeSwitch)).toBeChecked();
});
it('when modal is opened, then time range switch is enabled and not checked when its not checked in the db', async () => {
server.use(
rest.get('/api/dashboards/uid/:dashboardUid/public-dashboards', (req, res, ctx) => {
return res(
ctx.status(200),
ctx.json({
...pubdashResponse,
timeSelectionEnabled: false,
})
);
})
);
await renderSharePublicDashboard({ panel: mockPanel, dashboard: mockDashboard, onDismiss: () => {} });
await waitForElementToBeRemoved(screen.getAllByTestId('Spinner'));
expect(screen.getByTestId(selectors.EnableTimeRangeSwitch)).toBeEnabled();
expect(screen.getByTestId(selectors.EnableTimeRangeSwitch)).not.toBeChecked();
});
it('when fetch is done, then loader spinner is gone, inputs are disabled and save button is enabled', async () => {
await renderSharePublicDashboard({ panel: mockPanel, dashboard: mockDashboard, onDismiss: () => {} });
await waitForElementToBeRemoved(screen.getAllByTestId('Spinner'));
@ -301,6 +339,7 @@ describe('SharePublic - Already persisted', () => {
expect(screen.getByTestId(selectors.CostIncreaseCheckbox)).toBeDisabled();
expect(screen.getByTestId(selectors.EnableSwitch)).toBeEnabled();
expect(screen.getByTestId(selectors.EnableTimeRangeSwitch)).toBeEnabled();
expect(screen.getByText('Save public dashboard')).toBeInTheDocument();
expect(screen.getByTestId(selectors.SaveConfigButton)).toBeEnabled();
expect(screen.getByTestId(selectors.DeleteButton)).toBeEnabled();

4
public/app/features/dashboard/components/ShareModal/SharePublicDashboard/SharePublicDashboard.tsx
View File

@ -53,6 +53,7 @@ type SharePublicDashboardAcknowledgmentInputs = {
export type SharePublicDashboardInputs = {
isAnnotationsEnabled: boolean;
isTimeRangeEnabled: boolean;
enabledSwitch: boolean;
} & SharePublicDashboardAcknowledgmentInputs;
@ -88,6 +89,7 @@ export const SharePublicDashboard = (props: Props) => {
dataSourcesAcknowledgment: false,
usageAcknowledgment: false,
isAnnotationsEnabled: false,
isTimeRangeEnabled: false,
enabledSwitch: false,
},
});
@ -110,6 +112,7 @@ export const SharePublicDashboard = (props: Props) => {
dataSourcesAcknowledgment: isPublicDashboardPersisted,
usageAcknowledgment: isPublicDashboardPersisted,
isAnnotationsEnabled: publicDashboard?.annotationsEnabled,
isTimeRangeEnabled: publicDashboard?.timeSelectionEnabled,
enabledSwitch: publicDashboard?.isEnabled,
});
}, [publicDashboard, reset]);
@ -151,6 +154,7 @@ export const SharePublicDashboard = (props: Props) => {
...publicDashboard!,
isEnabled: values.enabledSwitch,
annotationsEnabled: values.isAnnotationsEnabled,
timeSelectionEnabled: values.isTimeRangeEnabled,
},
};

1
public/app/features/dashboard/components/ShareModal/SharePublicDashboard/SharePublicDashboardUtils.ts
View File

@ -13,6 +13,7 @@ export interface PublicDashboard {
uid: string;
dashboardUid: string;
timeSettings?: object;
timeSelectionEnabled: boolean;
}
export interface DashboardResponse {

15
public/app/features/dashboard/containers/DashboardPage.test.tsx
View File

@ -336,4 +336,19 @@ describe('DashboardPage', () => {
expect(screen.queryAllByLabelText(selectors.pages.Dashboard.SubMenu.submenu)).toHaveLength(0);
});
});
dashboardPageScenario('When dashboard is public and timeSelection is enabled', (ctx) => {
ctx.setup(() => {
locationService.partial({ kiosk: false });
ctx.mount({
queryParams: {},
dashboard: getTestDashboard(null, { publicDashboardTimeSelectionEnabled: true }),
});
ctx.rerender({ dashboard: ctx.dashboard, isPublic: true });
});
it('should render page toolbar because timeSelection is enabled, but not submenu', () => {
expect(screen.queryAllByTestId(selectors.pages.Dashboard.DashNav.navV2)).toHaveLength(1);
expect(screen.queryAllByLabelText(selectors.pages.Dashboard.SubMenu.submenu)).toHaveLength(0);
});
});
});

4
public/app/features/dashboard/containers/DashboardPage.tsx
View File

@ -352,7 +352,8 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
const inspectPanel = this.getInspectPanel();
const showSubMenu = !editPanel && !kioskMode && !this.props.queryParams.editview;
const toolbar = kioskMode !== KioskMode.Full && !queryParams.editview && (
const toolbar = ((kioskMode !== KioskMode.Full && !queryParams.editview) ||
(isPublic && !!this.props.dashboard?.meta.publicDashboardTimeSelectionEnabled)) && (
<header data-testid={selectors.pages.Dashboard.DashNav.navV2}>
<DashNav
dashboard={dashboard}
@ -363,6 +364,7 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
kioskMode={kioskMode}
hideTimePicker={dashboard.timepicker.hidden}
shareModalActiveTab={this.props.queryParams.shareView}
isPublic={!!isPublic}
/>
</header>
);

10
public/app/features/dashboard/services/PublicDashboardDataSource.test.ts
View File

@ -1,6 +1,6 @@
import { of } from 'rxjs';
import { DataQueryRequest, DataSourceInstanceSettings, DataSourceRef, TimeRange } from '@grafana/data';
import { DataQueryRequest, DataSourceInstanceSettings, DataSourceRef, dateTime, TimeRange } from '@grafana/data';
import { BackendSrvRequest, BackendSrv, DataSourceWithBackend } from '@grafana/runtime';
import { GrafanaQueryType } from 'app/plugins/datasource/grafana/types';
import { MIXED_DATASOURCE_NAME } from 'app/plugins/datasource/mixed/MixedDataSource';
@ -115,6 +115,14 @@ describe('PublicDashboardDatasource', () => {
intervalMs: 5000,
targets: [{ refId: 'A' }, { refId: 'B', datasource: { type: 'sample' } }],
panelId,
range: {
from: dateTime('2022-01-01T15:55:00Z'),
to: dateTime('2022-07-12T15:55:00Z'),
raw: {
from: 'now-15m',
to: 'now',
},
},
publicDashboardAccessToken,
} as DataQueryRequest);

15
public/app/features/dashboard/services/PublicDashboardDataSource.ts
View File

@ -80,7 +80,14 @@ export class PublicDashboardDataSource extends DataSourceApi<DataQuery, DataSour
* Ideally final -- any other implementation may not work as expected
*/
query(request: DataQueryRequest<DataQuery>): Observable<DataQueryResponse> {
const { intervalMs, maxDataPoints, requestId, publicDashboardAccessToken, panelId } = request;
const {
intervalMs,
maxDataPoints,
requestId,
publicDashboardAccessToken,
panelId,
range: { from: fromRange, to: toRange },
} = request;
let queries: DataQuery[];
// Return early if no queries exist
@ -100,7 +107,11 @@ export class PublicDashboardDataSource extends DataSourceApi<DataQuery, DataSour
// Its a datasource query
else {
const body = { intervalMs, maxDataPoints };
const body = {
intervalMs,
maxDataPoints,
timeRange: { from: fromRange.valueOf().toString(), to: toRange.valueOf().toString() },
};
return getBackendSrv()
.fetch<BackendDataSourceResponse>({

5
public/app/features/dashboard/services/TimeSrv.ts
View File

@ -280,11 +280,6 @@ export class TimeSrv {
}
setTime(time: RawTimeRange, updateUrl = true) {
// If we are in a public dashboard ignore time range changes
if (config.isPublicDashboardView) {
return;
}
extend(this.time, time);
// disable refresh if zoom in or zoom out

1
public/app/types/dashboard.ts
View File

@ -44,6 +44,7 @@ export interface DashboardMeta {
publicDashboardAccessToken?: string;
publicDashboardUid?: string;
publicDashboardEnabled?: boolean;
publicDashboardTimeSelectionEnabled?: boolean;
hasPublicDashboard?: boolean;
dashboardNotFound?: boolean;
}