1import React, { PureComponent } from 'react';
2import { dateTimeFormat } from '@grafana/data';
3import { Form, Legend } from '@grafana/ui';
4import { connect, ConnectedProps } from 'react-redux';
5import { ImportDashboardForm } from './ImportDashboardForm';
6import { clearLoadedDashboard, importDashboard } from '../state/actions';
7import { DashboardSource, ImportDashboardDTO } from '../state/reducers';
8import { StoreState } from 'app/types';
9import { locationService } from '@grafana/runtime';
10
11const mapStateToProps = (state: StoreState) => {
12  const searchObj = locationService.getSearchObject();
13
14  return {
15    dashboard: state.importDashboard.dashboard,
16    meta: state.importDashboard.meta,
17    source: state.importDashboard.source,
18    inputs: state.importDashboard.inputs,
19    folder: searchObj.folderId ? { id: Number(searchObj.folderId) } : { id: 0 },
20  };
21};
22
23const mapDispatchToProps = {
24  clearLoadedDashboard,
25  importDashboard,
26};
27
28const connector = connect(mapStateToProps, mapDispatchToProps);
29
30type Props = ConnectedProps<typeof connector>;
31
32interface State {
33  uidReset: boolean;
34}
35
36class ImportDashboardOverviewUnConnected extends PureComponent<Props, State> {
37  state: State = {
38    uidReset: false,
39  };
40
41  onSubmit = (form: ImportDashboardDTO) => {
42    this.props.importDashboard(form);
43  };
44
45  onCancel = () => {
46    this.props.clearLoadedDashboard();
47  };
48
49  onUidReset = () => {
50    this.setState({ uidReset: true });
51  };
52
53  render() {
54    const { dashboard, inputs, meta, source, folder } = this.props;
55    const { uidReset } = this.state;
56
57    return (
58      <>
59        {source === DashboardSource.Gcom && (
60          <div style={{ marginBottom: '24px' }}>
61            <div>
62              <Legend>
63                Importing dashboard from{' '}
64                <a
65                  href={`https://grafana.com/dashboards/${dashboard.gnetId}`}
66                  className="external-link"
67                  target="_blank"
68                  rel="noreferrer"
69                >
70                  Grafana.com
71                </a>
72              </Legend>
73            </div>
74            <table className="filter-table form-inline">
75              <tbody>
76                <tr>
77                  <td>Published by</td>
78                  <td>{meta.orgName}</td>
79                </tr>
80                <tr>
81                  <td>Updated on</td>
82                  <td>{dateTimeFormat(meta.updatedAt)}</td>
83                </tr>
84              </tbody>
85            </table>
86          </div>
87        )}
88        <Form
89          onSubmit={this.onSubmit}
90          defaultValues={{ ...dashboard, constants: [], dataSources: [], elements: [], folder: folder }}
91          validateOnMount
92          validateFieldsOnMount={['title', 'uid']}
93          validateOn="onChange"
94        >
95          {({ register, errors, control, watch, getValues }) => (
96            <ImportDashboardForm
97              register={register}
98              errors={errors}
99              control={control}
100              getValues={getValues}
101              uidReset={uidReset}
102              inputs={inputs}
103              onCancel={this.onCancel}
104              onUidReset={this.onUidReset}
105              onSubmit={this.onSubmit}
106              watch={watch}
107              initialFolderId={folder.id}
108            />
109          )}
110        </Form>
111      </>
112    );
113  }
114}
115
116export const ImportDashboardOverview = connector(ImportDashboardOverviewUnConnected);
117ImportDashboardOverview.displayName = 'ImportDashboardOverview';
118