grafana/public/app/features/manage-dashboards/components/ImportDashboardOverview.tsx
Torkel Ödegaard 3d6380a0aa
QueryGroup & DataSourceSrv & DataSourcePicker changes simplify usage, error handling and reduce duplication, support for uid (#29542)
* Starting moving more stuff into data source picker

* WIP progress

* Progress on datasource picker rethink

* Things are working now some details to figure out

* Removed commented part

* Complex work on getting data source lists

* Fixed variable support showing correct data sources

* Tried fixing dashboard import but failed

* Fixes

* Fixed import dashboard

* Fixed unit test

* Fixed explore test

* Fixed test

* Fix

* fixed more tests

* fixed more tests

* fixed showing which option is default in picker

* Changed query variable to use data source picker, updated tests and e2e

* Fixed more tests

* Updated snapshots, had wrong typescript version
2020-12-04 14:24:55 +01:00

126 lines
3.7 KiB
TypeScript

import React, { PureComponent } from 'react';
import { dateTimeFormat } from '@grafana/data';
import { Legend, Form } from '@grafana/ui';
import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux';
import { ImportDashboardForm } from './ImportDashboardForm';
import { clearLoadedDashboard, importDashboard } from '../state/actions';
import { DashboardInputs, DashboardSource, ImportDashboardDTO } from '../state/reducers';
import { StoreState } from 'app/types';
interface OwnProps {}
interface ConnectedProps {
dashboard: ImportDashboardDTO;
inputs: DashboardInputs;
source: DashboardSource;
meta?: any;
folder: { id: number; title?: string };
}
interface DispatchProps {
clearLoadedDashboard: typeof clearLoadedDashboard;
importDashboard: typeof importDashboard;
}
type Props = OwnProps & ConnectedProps & DispatchProps;
interface State {
uidReset: boolean;
}
class ImportDashboardOverviewUnConnected extends PureComponent<Props, State> {
state: State = {
uidReset: false,
};
onSubmit = (form: ImportDashboardDTO) => {
this.props.importDashboard(form);
};
onCancel = () => {
this.props.clearLoadedDashboard();
};
onUidReset = () => {
this.setState({ uidReset: true });
};
render() {
const { dashboard, inputs, meta, source, folder } = this.props;
const { uidReset } = this.state;
return (
<>
{source === DashboardSource.Gcom && (
<div style={{ marginBottom: '24px' }}>
<div>
<Legend>
Importing Dashboard from{' '}
<a
href={`https://grafana.com/dashboards/${dashboard.gnetId}`}
className="external-link"
target="_blank"
rel="noreferrer"
>
Grafana.com
</a>
</Legend>
</div>
<table className="filter-table form-inline">
<tbody>
<tr>
<td>Published by</td>
<td>{meta.orgName}</td>
</tr>
<tr>
<td>Updated on</td>
<td>{dateTimeFormat(meta.updatedAt)}</td>
</tr>
</tbody>
</table>
</div>
)}
<Form
onSubmit={this.onSubmit}
defaultValues={{ ...dashboard, constants: [], dataSources: [], folder: folder }}
validateOnMount
validateFieldsOnMount={['title', 'uid']}
validateOn="onChange"
>
{({ register, errors, control, watch, getValues }) => (
<ImportDashboardForm
register={register}
errors={errors}
control={control}
getValues={getValues}
uidReset={uidReset}
inputs={inputs}
onCancel={this.onCancel}
onUidReset={this.onUidReset}
onSubmit={this.onSubmit}
watch={watch}
initialFolderId={folder.id}
/>
)}
</Form>
</>
);
}
}
const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = (state: StoreState) => ({
dashboard: state.importDashboard.dashboard,
meta: state.importDashboard.meta,
source: state.importDashboard.source,
inputs: state.importDashboard.inputs,
folder: state.location.routeParams.folderId ? { id: Number(state.location.routeParams.folderId) } : { id: 0 },
});
const mapDispatchToProps: MapDispatchToProps<DispatchProps, OwnProps> = {
clearLoadedDashboard,
importDashboard,
};
export const ImportDashboardOverview = connect(mapStateToProps, mapDispatchToProps)(ImportDashboardOverviewUnConnected);
ImportDashboardOverview.displayName = 'ImportDashboardOverview';