mirror of
https://github.com/grafana/grafana.git
synced 2025-02-16 02:23:31 -06:00
* 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
126 lines
3.7 KiB
TypeScript
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';
|