IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-29 04:04:00 -06:00
Code Issues Packages Projects Releases Wiki Activity

Explore: page title indicates which datasource is being used (#36699)

Browse Source 
* Explore: quick fix for page title

* Explore: update page title in componentDidUpdate with info about the current datasources

* Explore: change tests to incorporate the new page title

* Explore: remove updatePageDocumentTitle since the recent changes replace it
This commit is contained in:
Olof Bourghardt 2021-07-13 14:21:49 +02:00 committed by GitHub
parent 0b95fd8ae6
commit 9ea2c601ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
public/app/features/explore/Wrapper.test.tsx
View File

@ -255,9 +255,34 @@ describe('Wrapper', () => {
await screen.findByText(`loki Editor input: { label="value"}`);
});
it('changes the document title of the explore page', async () => {
setup({ datasources: [] });
await waitFor(() => expect(document.title).toEqual('Explore - Grafana'));
it('changes the document title of the explore page to include the datasource in use', async () => {
const query = {
left: JSON.stringify(['now-1h', 'now', 'loki', { expr: '{ label="value"}' }]),
};
const { datasources } = setup({ query });
(datasources.loki.query as Mock).mockReturnValue(makeLogsQueryResponse());
// This is mainly to wait for render so that the left pane state is initialized as that is needed for the title
// to include the datasource
await screen.findByText(`loki Editor input: { label="value"}`);
await waitFor(() => expect(document.title).toEqual('Explore - loki - Grafana'));
});
it('changes the document title to include the two datasources in use in split view mode', async () => {
const query = {
left: JSON.stringify(['now-1h', 'now', 'loki', { expr: '{ label="value"}' }]),
};
const { datasources, store } = setup({ query });
(datasources.loki.query as Mock).mockReturnValue(makeLogsQueryResponse());
(datasources.elastic.query as Mock).mockReturnValue(makeLogsQueryResponse());
// This is mainly to wait for render so that the left pane state is initialized as that is needed for splitOpen
// to work
await screen.findByText(`loki Editor input: { label="value"}`);
store.dispatch(
splitOpen<any>({ datasourceUid: 'elastic', query: { expr: 'error' } }) as any
);
await waitFor(() => expect(document.title).toEqual('Explore - loki | elastic - Grafana'));
});
});

21
public/app/features/explore/Wrapper.tsx
View File

@ -6,7 +6,6 @@ import { lastSavedUrl, resetExploreAction, richHistoryUpdatedAction } from './st
import { getRichHistory } from '../../core/utils/richHistory';
import { ExplorePaneContainer } from './ExplorePaneContainer';
import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
import { NavModel } from '@grafana/data';
import { Branding } from '../../core/components/Branding/Branding';
import { getNavModel } from '../../core/selectors/navModel';
@ -18,6 +17,7 @@ interface OwnProps {}
const mapStateToProps = (state: StoreState) => {
return {
navModel: getNavModel(state.navIndex, 'explore'),
exploreState: state.explore,
};
};
@ -30,14 +30,6 @@ const connector = connect(mapStateToProps, mapDispatchToProps);
type Props = OwnProps & RouteProps & ConnectedProps<typeof connector>;
class WrapperUnconnected extends PureComponent<Props> {
updatePageDocumentTitle(navModel: NavModel) {
if (navModel) {
document.title = `${navModel.main.text} - ${Branding.AppTitle}`;
} else {
document.title = Branding.AppTitle;
}
}
componentWillUnmount() {
this.props.resetExploreAction({});
}
@ -48,7 +40,16 @@ class WrapperUnconnected extends PureComponent<Props> {
const richHistory = getRichHistory();
this.props.richHistoryUpdatedAction({ richHistory });
this.updatePageDocumentTitle(this.props.navModel);
}
componentDidUpdate() {
const { left, right } = this.props.queryParams;
const hasSplit = Boolean(left) && Boolean(right);
const datasourceTitle = hasSplit
? `${this.props.exploreState.left.datasourceInstance?.name} | ${this.props.exploreState.right?.datasourceInstance?.name}`
: `${this.props.exploreState.left.datasourceInstance?.name}`;
const documentTitle = `${this.props.navModel.main.text} - ${datasourceTitle} - ${Branding.AppTitle}`;
document.title = documentTitle;
}
render() {