mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
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>
This commit is contained in:
Dominik Prokop
GitHub
@@ -1,7 +1,5 @@
|
||||
// Libraries
|
||||
import React, { PureComponent } from 'react';
|
||||
import { hot } from 'react-hot-loader';
|
||||
import { connect } from 'react-redux';
|
||||
import find from 'lodash/find';
|
||||
// Types
|
||||
import {
|
||||
@@ -18,9 +16,8 @@ import {
|
||||
PluginType,
|
||||
UrlQueryMap,
|
||||
} from '@grafana/data';
|
||||
import { AppNotificationSeverity, CoreEvents, StoreState } from 'app/types';
|
||||
import { AppNotificationSeverity } from 'app/types';
|
||||
import { Alert, InfoBox, Tooltip } from '@grafana/ui';
|
||||
|
||||
import Page from 'app/core/components/Page/Page';
|
||||
import { getPluginSettings } from './PluginSettingsCache';
|
||||
import { importAppPlugin, importDataSourcePlugin, importPanelPlugin } from './plugin_loader';
|
||||
@@ -30,55 +27,14 @@ import { AppConfigCtrlWrapper } from './wrappers/AppConfigWrapper';
|
||||
import { PluginDashboards } from './PluginDashboards';
|
||||
import { appEvents } from 'app/core/core';
|
||||
import { config } from 'app/core/config';
|
||||
import { ContextSrv } from '../../core/services/context_srv';
|
||||
import { contextSrv } from '../../core/services/context_srv';
|
||||
import { css } from 'emotion';
|
||||
import { PluginSignatureBadge } from './PluginSignatureBadge';
|
||||
import { selectors } from '@grafana/e2e-selectors';
|
||||
import { ShowModalEvent } from 'app/types/events';
|
||||
import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
|
||||
|
||||
export function getLoadingNav(): NavModel {
|
||||
const node = {
|
||||
text: 'Loading...',
|
||||
icon: 'icon-gf icon-gf-panel',
|
||||
};
|
||||
return {
|
||||
node: node,
|
||||
main: node,
|
||||
};
|
||||
}
|
||||
|
||||
export function loadPlugin(pluginId: string): Promise<GrafanaPlugin> {
|
||||
return getPluginSettings(pluginId).then((info) => {
|
||||
if (info.type === PluginType.app) {
|
||||
return importAppPlugin(info);
|
||||
}
|
||||
if (info.type === PluginType.datasource) {
|
||||
return importDataSourcePlugin(info);
|
||||
}
|
||||
if (info.type === PluginType.panel) {
|
||||
return importPanelPlugin(pluginId).then((plugin) => {
|
||||
// Panel Meta does not have the *full* settings meta
|
||||
return getPluginSettings(pluginId).then((meta) => {
|
||||
plugin.meta = {
|
||||
...meta, // Set any fields that do not exist
|
||||
...plugin.meta,
|
||||
};
|
||||
return plugin;
|
||||
});
|
||||
});
|
||||
}
|
||||
if (info.type === PluginType.renderer) {
|
||||
return Promise.resolve({ meta: info } as GrafanaPlugin);
|
||||
}
|
||||
return Promise.reject('Unknown Plugin type: ' + info.type);
|
||||
});
|
||||
}
|
||||
|
||||
interface Props {
|
||||
pluginId: string;
|
||||
query: UrlQueryMap;
|
||||
path: string; // the URL path
|
||||
$contextSrv: ContextSrv;
|
||||
}
|
||||
interface Props extends GrafanaRouteComponentProps<{ pluginId: string }, UrlQueryMap> {}
|
||||
|
||||
interface State {
|
||||
loading: boolean;
|
||||
@@ -102,10 +58,10 @@ class PluginPage extends PureComponent<Props, State> {
|
||||
}
|
||||
|
||||
async componentDidMount() {
|
||||
const { pluginId, path, query, $contextSrv } = this.props;
|
||||
const { location, queryParams } = this.props;
|
||||
const { appSubUrl } = config;
|
||||
|
||||
const plugin = await loadPlugin(pluginId);
|
||||
const plugin = await loadPlugin(this.props.match.params.pluginId);
|
||||
|
||||
if (!plugin) {
|
||||
this.setState({
|
||||
@@ -115,7 +71,13 @@ class PluginPage extends PureComponent<Props, State> {
|
||||
return; // 404
|
||||
}
|
||||
|
||||
const { defaultPage, nav } = getPluginTabsNav(plugin, appSubUrl, path, query, $contextSrv.hasRole('Admin'));
|
||||
const { defaultPage, nav } = getPluginTabsNav(
|
||||
plugin,
|
||||
appSubUrl,
|
||||
location.pathname,
|
||||
queryParams,
|
||||
contextSrv.hasRole('Admin')
|
||||
);
|
||||
|
||||
this.setState({
|
||||
loading: false,
|
||||
@@ -126,8 +88,8 @@ class PluginPage extends PureComponent<Props, State> {
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: Props) {
|
||||
const prevPage = prevProps.query.page as string;
|
||||
const page = this.props.query.page as string;
|
||||
const prevPage = prevProps.queryParams.page as string;
|
||||
const page = this.props.queryParams.page as string;
|
||||
|
||||
if (prevPage !== page) {
|
||||
const { nav, defaultPage } = this.state;
|
||||
@@ -146,7 +108,7 @@ class PluginPage extends PureComponent<Props, State> {
|
||||
}
|
||||
|
||||
renderBody() {
|
||||
const { query } = this.props;
|
||||
const { queryParams } = this.props;
|
||||
const { plugin, nav } = this.state;
|
||||
|
||||
if (!plugin) {
|
||||
@@ -159,7 +121,7 @@ class PluginPage extends PureComponent<Props, State> {
|
||||
if (plugin.configPages) {
|
||||
for (const tab of plugin.configPages) {
|
||||
if (tab.id === active.id) {
|
||||
return <tab.body plugin={plugin} query={query} />;
|
||||
return <tab.body plugin={plugin} query={queryParams} />;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -180,10 +142,12 @@ class PluginPage extends PureComponent<Props, State> {
|
||||
}
|
||||
|
||||
showUpdateInfo = () => {
|
||||
appEvents.emit(CoreEvents.showModal, {
|
||||
src: 'public/app/features/plugins/partials/update_instructions.html',
|
||||
model: this.state.plugin!.meta,
|
||||
});
|
||||
appEvents.publish(
|
||||
new ShowModalEvent({
|
||||
src: 'public/app/features/plugins/partials/update_instructions.html',
|
||||
model: this.state.plugin!.meta,
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
renderVersionInfo(meta: PluginMeta) {
|
||||
@@ -337,8 +301,7 @@ class PluginPage extends PureComponent<Props, State> {
|
||||
|
||||
render() {
|
||||
const { loading, nav, plugin } = this.state;
|
||||
const { $contextSrv } = this.props;
|
||||
const isAdmin = $contextSrv.hasRole('Admin');
|
||||
const isAdmin = contextSrv.hasRole('Admin');
|
||||
|
||||
return (
|
||||
<Page navModel={nav} aria-label={selectors.pages.PluginPage.page}>
|
||||
@@ -491,10 +454,42 @@ function getPluginIcon(type: string) {
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: StoreState) => ({
|
||||
pluginId: state.location.routeParams.pluginId,
|
||||
query: state.location.query,
|
||||
path: state.location.path,
|
||||
});
|
||||
export function getLoadingNav(): NavModel {
|
||||
const node = {
|
||||
text: 'Loading...',
|
||||
icon: 'icon-gf icon-gf-panel',
|
||||
};
|
||||
return {
|
||||
node: node,
|
||||
main: node,
|
||||
};
|
||||
}
|
||||
|
||||
export default hot(module)(connect(mapStateToProps)(PluginPage));
|
||||
export function loadPlugin(pluginId: string): Promise<GrafanaPlugin> {
|
||||
return getPluginSettings(pluginId).then((info) => {
|
||||
if (info.type === PluginType.app) {
|
||||
return importAppPlugin(info);
|
||||
}
|
||||
if (info.type === PluginType.datasource) {
|
||||
return importDataSourcePlugin(info);
|
||||
}
|
||||
if (info.type === PluginType.panel) {
|
||||
return importPanelPlugin(pluginId).then((plugin) => {
|
||||
// Panel Meta does not have the *full* settings meta
|
||||
return getPluginSettings(pluginId).then((meta) => {
|
||||
plugin.meta = {
|
||||
...meta, // Set any fields that do not exist
|
||||
...plugin.meta,
|
||||
};
|
||||
return plugin;
|
||||
});
|
||||
});
|
||||
}
|
||||
if (info.type === PluginType.renderer) {
|
||||
return Promise.resolve({ meta: info } as GrafanaPlugin);
|
||||
}
|
||||
return Promise.reject('Unknown Plugin type: ' + info.type);
|
||||
});
|
||||
}
|
||||
|
||||
export default PluginPage;
|
||||
|
||||
Reference in New Issue
Block a user