grafana/public/app/features/manage-dashboards/state/actions.ts
Dominik Prokop a55a272276
Routing NG: Replace Angular routing with react-router (#31463)
* Add router packages

* Get react app root work instead of Angular one

* Logger util

* Patch Angular routing ($routeProvider, $routeParamsProvider)

* Use react-router-dom history instead of separate dependency

* Add test routes

* Sidemenu - use Link instead of anchors

* Patch Angular $location service (stub)

* WIP: geting rid of $location provider from TimeSrv

* Intercept anchor clicks to use history under the hood

* Sync Redux location slice with history state

* Make login/logout work

* Debug routes for testing

* Make force login work

* Make sure query param change does not recreate page components

* Hide side menu in specified locations

* Make the dashboar route query parameters work, make panel edit menu work

* Enable more routes

* Fix side menu

* Handle view modes

* Disable playlist routes

* Make SafeDynamicImport work again

* Bring back router-debug

* Separate redux location sync from route rendering

* Refactor updateLocation to thunk and move force refresh(login) to it

* Fixing init dashboard issue

* Support switching between dashboards without an unmount of DashboardPage

* More fixes for init dashboard and panel edit

* More type fixes

* Moving angular location wrapper out of main LocationService, and fixing typescript issues

* Fixed last typescript errors

* LocationService: Move to runtime and  remove getLocationService and export singleston const instead (#31523)

* Moving location service implementation to runtime and removing get function and making it a package const singleton

* Added test that used locationService directly

* removed unused import

* AngularApp: Moving angular dependencies and the app boot out of the main app into it's own file  (#31525)

* Fixes angular panels by calling the monkey patch

* Moving angular stuff to to it's own files

* udpated

* Fixing clicking on divs and spans inside anchor

* Moving app notifications out of angular app and removing angular directive wrapper

* Moving search from angular to react and removing angular search wrapper

* Clean up, tried to remove the redux location wrapper but requires a big update for DashboardPage, so adding it back

* Moving AppWrapper to root to limit circular dependencies (app/core -> app/routing and back)

* Open and close search now works

* Hide sidemenu when in kiosk mode

* Restoring some keybindings like ESC key

* Removed kiosk events and simplified it, just handled through updating URL

* Fixing typescript errors

* Simplified GrafanaRouteComponentProps and renamed to ContainerProps

* renamed back

* Changed AlertRuleList to use GrafanaRouteComponentProps and location.search passed to it

* Removing the reloadOnSearch property, this is not needed now for react as react by default does not unmount components when only url match or query parmas change

* SafeDynamicImport causing unmount un every search update, not sure how to fix yet

* Fix signature for SafeDynamicImport so we do not create new route components on every route render

* Removing the redux location wrapper as it was causing errors, and making dashboard page work with RouteProps (location, match) etc

* Updating DashboardPage and SoloPanelPage to use match params and history location

* Fixed DashboardPage tests

* Fixing solo route tests

* LocationService: Rename getCurrentLocation to just getLocation

* do not intercept link clicks with target blank or self

* Experimental useUrlParams hook

* Update DataSourceSettingsPage to use router match params

* fix links with urls that have no starting / to work like before

* Fix forceLogin

* Add queryParams to GrafanaRouteComponentProps

* PanelEditor get rid of updateLocation and location state

* Improve grafana route query params typing

* Add getSearchObject to LocationService

* Use DashboardPAge queryParams instead of location.search parsing

* Fix DashboardPage typing

* Fix some tests weirdness

* Bring back KeyboardSrv

* Fixes typescript issues

* Team pages now use router match params

* Get rid of  from GrafanaRouteComponent props

* Removed unnessary calls to getSearchObject when calling locationService.partial

* Updated DashboardPage tests after queryParams was added

* Fixing dashboard settings back

* GrafanaRoute: Adding tests and remove use of global locationService

* Fixing tests and typescript errors

* Bring back kiosk modes and add tests

* Fix TimeSrv tests

* Fix typecheck errors

* Fixing tests

* Updated SideMenu test to react-testing and wrapped component in Router, and fixed issue importing createMemoryHistory

* Get rid of routeChange event from TimeSrv from

* Fixed TopSectionItem test

* Trying to make basename work but failing

* Update TopSectionItem snapshot

* Fix TopSectionItem snapshot test

* Fix API keys creation

* Remove Angular dependencies from KeybindingSrv (#31617)

* Remove Angular dependency from KeybindingsSrv

* Fix tests and typecheck issues

* basename is starting to work

* Make dashboard save work

* KeybindingSrv: Remove as angular service and no usage angular scope

* So long bridge_srv, we won't miss you

* Update snapshots

* Dashboard: Refactoring ChangeTracker to use History api and no angular (#31653)

* Dashboard: Refactoring ChangeTracker to use History api and no angular

* Updated

* Removed logging

* fixed unit tests

* updated snapshots

* Mechanism for force reloading routes (#31683)

* e2e: Fixes various things in e2e scenarios after router migration (#31685)

* Explore: Update reading query params from router props and updating location via locationService (ReactRouter)  (#31688)

* RoutingNG: Initial explore redux location to router location migration

* Updated explore Wrapper tests

* Fixing more tests

* remove loggin

* rename back to make naming consistent

* Fixing return to dashboard button

* fixing navigation to explore from dashboard

* updated routeProps

* Updated tests

* Make DashboardListPage work

* Fixing navigation after add new data source, and fixes explore e2e

* Fixing solo panel page

* PluginsPage now works

* RoutingNG: When parsing and rendering url search/query params preseve old logic of handling booleans and arrays (#31725)

* RoutingNG: When parsing and rendering url search/query params preserve old logic of handling booleans and arrays

* Fixed test

* Make snapshots list work

* fixed alert notification channel edit page

* Simplify LocationService, did not need special handling for login or forceLogin as target _self on link already handles that

* fixed UserAdminPage

* fixed edit orgs page

* Fixing LdapPage

* fixing dashboard import

* Fixed new folder page

* Fixed data source dashboards page

* fixing Folder permissions and folder settings page

* fixing snapshot list page nav model

* remove unused file

* Added placeholder page for playlist

* Moved browser compatability to index-template

* Restored 404/default page

* Fixed reset password page

* Fixed SignUpInvited page

* Fixing CreateTeam, Create user page, add panel widget

* Restore browwser file to make tests happy

* Fixed unit tests

* Removed unused import

* Replacing usage of updateLocation

* Fixed test

* Updating search filters to use history / location service for filters

* remove unused file

* AppRootPage fixed

* Fixing test and search issue

* Changes to support enterprise extensions

* remove console.log

* Removing more use of redux location

* Fixed signup page

* removed unused old angular controllers

* Fixing bugs

* one final bugfix

* Removed location from redux state

* Fixing ts issues and tests

* Fixing test issue

* fixing tests

* Fixing tests

* removed unused stuff

* Fixed search test

* Adding some doc comments

* Routing NG: Angular location provider patch (#31773)

* Patch Angulars $location provider

* Update public/app/angular/bridgeReactAngularRouting.ts

* Remove only test

* Update tests, disable loggers in test env

* Routing NG: remove $location provider usage (#31816)

* Remove dashboard_loaders

* Remove $location from Analytics service, track page views form GrafanaRoute

* Remove NotificationsEditCtrl

* Remove Angular dependencies from uploadDashboardDirective

* Update public/app/features/dashboard/containers/DashboardPage.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Update public/app/features/dashboard/containers/DashboardPage.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Remove unused test helpers (#31831)

* Playlist react (#31829)

* playlist list in react

* Playlist start

* Things started to work

* Updated

* Handle empty list

* Fix ts

* Fixes and kiosk mode stuff

* Removed unused events

* fixing ts issue

* Another ts issue

* Fixing tests

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

* fixed test

* Update public/app/AppWrapper.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Update public/app/AppWrapper.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

* Remove Angular dependency from DashboardLoaderSrv (#31863)

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>
Co-authored-by: Torkel Ödegaard <torkel@grafana.org>
Co-authored-by: Hugo Häggmark <hugo.haggmark@grafana.com>
Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>
2021-03-10 18:03:36 +01:00

238 lines
6.7 KiB
TypeScript

import { AppEvents, DataSourceInstanceSettings, locationUtil } from '@grafana/data';
import { getBackendSrv } from 'app/core/services/backend_srv';
import {
clearDashboard,
setInputs,
setGcomDashboard,
setJsonDashboard,
InputType,
ImportDashboardDTO,
} from './reducers';
import { ThunkResult, FolderInfo, DashboardDTO, DashboardDataDTO } from 'app/types';
import { appEvents } from '../../../core/core';
import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
import { getDataSourceSrv, locationService } from '@grafana/runtime';
export function fetchGcomDashboard(id: string): ThunkResult<void> {
return async (dispatch) => {
try {
const dashboard = await getBackendSrv().get(`/api/gnet/dashboards/${id}`);
dispatch(setGcomDashboard(dashboard));
dispatch(processInputs(dashboard.json));
} catch (error) {
appEvents.emit(AppEvents.alertError, [error.data.message || error]);
}
};
}
export function importDashboardJson(dashboard: any): ThunkResult<void> {
return async (dispatch) => {
dispatch(setJsonDashboard(dashboard));
dispatch(processInputs(dashboard));
};
}
function processInputs(dashboardJson: any): ThunkResult<void> {
return (dispatch) => {
if (dashboardJson && dashboardJson.__inputs) {
const inputs: any[] = [];
dashboardJson.__inputs.forEach((input: any) => {
const inputModel: any = {
name: input.name,
label: input.label,
info: input.description,
value: input.value,
type: input.type,
pluginId: input.pluginId,
options: [],
};
if (input.type === InputType.DataSource) {
getDataSourceOptions(input, inputModel);
} else if (!inputModel.info) {
inputModel.info = 'Specify a string constant';
}
inputs.push(inputModel);
});
dispatch(setInputs(inputs));
}
};
}
export function clearLoadedDashboard(): ThunkResult<void> {
return (dispatch) => {
dispatch(clearDashboard());
};
}
export function importDashboard(importDashboardForm: ImportDashboardDTO): ThunkResult<void> {
return async (dispatch, getState) => {
const dashboard = getState().importDashboard.dashboard;
const inputs = getState().importDashboard.inputs;
let inputsToPersist = [] as any[];
importDashboardForm.dataSources?.forEach((dataSource: DataSourceInstanceSettings, index: number) => {
const input = inputs.dataSources[index];
inputsToPersist.push({
name: input.name,
type: input.type,
pluginId: input.pluginId,
value: dataSource.name,
});
});
importDashboardForm.constants?.forEach((constant: any, index: number) => {
const input = inputs.constants[index];
inputsToPersist.push({
value: constant,
name: input.name,
type: input.type,
});
});
const result = await getBackendSrv().post('api/dashboards/import', {
dashboard: { ...dashboard, title: importDashboardForm.title, uid: importDashboardForm.uid },
overwrite: true,
inputs: inputsToPersist,
folderId: importDashboardForm.folder.id,
});
const dashboardUrl = locationUtil.stripBaseFromUrl(result.importedUrl);
locationService.push(dashboardUrl);
};
}
const getDataSourceOptions = (input: { pluginId: string; pluginName: string }, inputModel: any) => {
const sources = getDataSourceSrv().getList({ pluginId: input.pluginId });
if (sources.length === 0) {
inputModel.info = 'No data sources of type ' + input.pluginName + ' found';
} else if (!inputModel.info) {
inputModel.info = 'Select a ' + input.pluginName + ' data source';
}
};
export function moveDashboards(dashboardUids: string[], toFolder: FolderInfo) {
const tasks = [];
for (const uid of dashboardUids) {
tasks.push(createTask(moveDashboard, true, uid, toFolder));
}
return executeInOrder(tasks).then((result: any) => {
return {
totalCount: result.length,
successCount: result.filter((res: any) => res.succeeded).length,
alreadyInFolderCount: result.filter((res: any) => res.alreadyInFolder).length,
};
});
}
async function moveDashboard(uid: string, toFolder: FolderInfo) {
const fullDash: DashboardDTO = await getBackendSrv().getDashboardByUid(uid);
if ((!fullDash.meta.folderId && toFolder.id === 0) || fullDash.meta.folderId === toFolder.id) {
return { alreadyInFolder: true };
}
const options = {
dashboard: fullDash.dashboard,
folderId: toFolder.id,
overwrite: false,
};
try {
await saveDashboard(options);
return { succeeded: true };
} catch (err) {
if (err.data?.status !== 'plugin-dashboard') {
return { succeeded: false };
}
err.isHandled = true;
options.overwrite = true;
try {
await saveDashboard(options);
return { succeeded: true };
} catch (e) {
return { succeeded: false };
}
}
}
function createTask(fn: (...args: any[]) => Promise<any>, ignoreRejections: boolean, ...args: any[]) {
return async (result: any) => {
try {
const res = await fn(...args);
return Array.prototype.concat(result, [res]);
} catch (err) {
if (ignoreRejections) {
return result;
}
throw err;
}
};
}
export function deleteFoldersAndDashboards(folderUids: string[], dashboardUids: string[]) {
const tasks = [];
for (const folderUid of folderUids) {
tasks.push(createTask(deleteFolder, true, folderUid, true));
}
for (const dashboardUid of dashboardUids) {
tasks.push(createTask(deleteDashboard, true, dashboardUid, true));
}
return executeInOrder(tasks);
}
export interface SaveDashboardOptions {
dashboard: DashboardDataDTO;
message?: string;
folderId?: number;
overwrite?: boolean;
}
export function saveDashboard(options: SaveDashboardOptions) {
dashboardWatcher.ignoreNextSave();
return getBackendSrv().post('/api/dashboards/db/', {
dashboard: options.dashboard,
message: options.message ?? '',
overwrite: options.overwrite ?? false,
folderId: options.folderId,
});
}
function deleteFolder(uid: string, showSuccessAlert: boolean) {
return getBackendSrv().request({
method: 'DELETE',
url: `/api/folders/${uid}`,
showSuccessAlert: showSuccessAlert === true,
});
}
export function createFolder(payload: any) {
return getBackendSrv().post('/api/folders', payload);
}
export function deleteDashboard(uid: string, showSuccessAlert: boolean) {
return getBackendSrv().request({
method: 'DELETE',
url: `/api/dashboards/uid/${uid}`,
showSuccessAlert: showSuccessAlert === true,
});
}
function executeInOrder(tasks: any[]) {
return tasks.reduce((acc, task) => {
return Promise.resolve(acc).then(task);
}, []);
}