Skip to content

Commit 6e86d57

Browse files
authored
update config page (#391)
* add grafana/experimental * update config page * use custom divider component
1 parent 638d182 commit 6e86d57

File tree

4 files changed

+93
-18
lines changed

4 files changed

+93
-18
lines changed

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
"dependencies": {
3232
"@emotion/css": "^11.1.3",
3333
"@grafana/data": "10.1.4",
34+
"@grafana/experimental": "^1.7.4",
3435
"@grafana/runtime": "10.1.4",
3536
"@grafana/ui": "10.1.4",
3637
"dayjs": "^1.10.4",

src/components/ConfigEditor.tsx

Lines changed: 52 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,17 @@
1-
import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
2-
import { DataSourceHttpSettings, InlineField, InlineFieldRow, Input } from '@grafana/ui';
1+
import { DataSourcePluginOptionsEditorProps, GrafanaTheme2 } from '@grafana/data';
2+
import { Field, Input, useStyles2 } from '@grafana/ui';
33
import React, { ChangeEvent } from 'react';
44
import { JsonApiDataSourceOptions } from '../types';
5+
import {
6+
AdvancedHttpSettings,
7+
Auth,
8+
ConfigSection,
9+
ConnectionSettings,
10+
DataSourceDescription,
11+
convertLegacyAuthProps,
12+
} from '@grafana/experimental';
13+
import { css } from '@emotion/css';
14+
import { Divider } from './Divider';
515

616
type Props = DataSourcePluginOptionsEditorProps<JsonApiDataSourceOptions>;
717

@@ -10,6 +20,8 @@ type Props = DataSourcePluginOptionsEditorProps<JsonApiDataSourceOptions>;
1020
* authentication.
1121
*/
1222
export const ConfigEditor: React.FC<Props> = ({ options, onOptionsChange }) => {
23+
const styles = useStyles2(getStyles);
24+
1325
const onParamsChange = (e: ChangeEvent<HTMLInputElement>) => {
1426
onOptionsChange({
1527
...options,
@@ -22,29 +34,51 @@ export const ConfigEditor: React.FC<Props> = ({ options, onOptionsChange }) => {
2234

2335
return (
2436
<>
25-
{/* DataSourceHttpSettings handles most the settings for connecting over
26-
HTTP. */}
27-
<DataSourceHttpSettings
28-
defaultUrl="http://localhost:8080"
29-
dataSourceConfig={options}
30-
onChange={onOptionsChange}
37+
<DataSourceDescription
38+
dataSourceName="JSON API"
39+
docsLink="https://grafana.github.io/grafana-json-datasource/"
40+
hasRequiredFields={false}
41+
/>
42+
43+
<Divider />
44+
45+
<ConnectionSettings config={options} onChange={onOptionsChange} urlPlaceholder="http://localhost:8080" />
46+
47+
<Divider />
48+
49+
<Auth
50+
{...convertLegacyAuthProps({
51+
config: options,
52+
onChange: onOptionsChange,
53+
})}
3154
/>
3255

33-
{/* The Grafana proxy strips query parameters from the URL set in
34-
DataSourceHttpSettings. To support custom query parameters, the user need
35-
to set them explicitly. */}
36-
<h3 className="page-heading">Misc</h3>
37-
<InlineFieldRow>
38-
<InlineField label="Query string" tooltip="Add a custom query string to your queries.">
56+
<Divider />
57+
58+
<ConfigSection title="Additional settings" isCollapsible>
59+
<AdvancedHttpSettings config={options} onChange={onOptionsChange} />
60+
61+
<div className={styles.space} />
62+
63+
<Field label="Query string" description="Add a custom query string to your queries.">
3964
<Input
40-
width={50}
65+
width={40}
4166
value={options.jsonData.queryParams}
4267
onChange={onParamsChange}
4368
spellCheck={false}
44-
placeholder="page=1&limit=100"
69+
placeholder="limit=100"
4570
/>
46-
</InlineField>
47-
</InlineFieldRow>
71+
</Field>
72+
</ConfigSection>
4873
</>
4974
);
5075
};
76+
77+
const getStyles = (theme: GrafanaTheme2) => {
78+
return {
79+
space: css({
80+
width: '100%',
81+
height: theme.spacing(2),
82+
}),
83+
};
84+
};

src/components/Divider.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { css } from '@emotion/css';
2+
import React from 'react';
3+
4+
import { GrafanaTheme2 } from '@grafana/data';
5+
import { useStyles2 } from '@grafana/ui';
6+
7+
// this custom component is necessary because the Grafana UI <Divider /> component is not backwards compatible with Grafana < 10.1.0
8+
export const Divider = () => {
9+
const styles = useStyles2(getStyles);
10+
return <hr className={styles.horizontalDivider} />;
11+
};
12+
13+
const getStyles = (theme: GrafanaTheme2) => {
14+
return {
15+
horizontalDivider: css({
16+
borderTop: `1px solid ${theme.colors.border.weak}`,
17+
margin: theme.spacing(2, 0),
18+
width: '100%',
19+
}),
20+
};
21+
};

yarn.lock

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -900,6 +900,15 @@
900900
eslint-plugin-react-hooks "4.6.0"
901901
typescript "4.8.4"
902902

903+
"@grafana/experimental@^1.7.4":
904+
version "1.7.4"
905+
resolved "https://registry.yarnpkg.com/@grafana/experimental/-/experimental-1.7.4.tgz#5b5efe89abf38b1d3358251148d42b9111de539e"
906+
integrity sha512-uYkv9HRx+cqJRktsY43ApG0+kgG4fNR8lv+bkaFvGyCg46dcTeNqokujoPnHp6lt9MEn+0Y3jKEQbvCXjcz2bA==
907+
dependencies:
908+
"@types/uuid" "^8.3.3"
909+
semver "^7.5.4"
910+
uuid "^8.3.2"
911+
903912
"@grafana/faro-core@^1.1.0":
904913
version "1.2.1"
905914
resolved "https://registry.yarnpkg.com/@grafana/faro-core/-/faro-core-1.2.1.tgz#a95fd1376a928917f855068f101d356db067a0f4"
@@ -2248,6 +2257,11 @@
22482257
resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.3.tgz#3d06b6769518450871fbc40770b7586334bdfd90"
22492258
integrity sha512-THo502dA5PzG/sfQH+42Lw3fvmYkceefOspdCwpHRul8ik2Jv1K8I5OZz1AT3/rs46kwgMCe9bSBmDLYkkOMGg==
22502259

2260+
"@types/uuid@^8.3.3":
2261+
version "8.3.4"
2262+
resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.4.tgz#bd86a43617df0594787d38b735f55c805becf1bc"
2263+
integrity sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==
2264+
22512265
"@types/yargs-parser@*":
22522266
version "21.0.1"
22532267
resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.1.tgz#07773d7160494d56aa882d7531aac7319ea67c3b"
@@ -8295,6 +8309,11 @@ uuid@9.0.0:
82958309
resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"
82968310
integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==
82978311

8312+
uuid@^8.3.2:
8313+
version "8.3.2"
8314+
resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
8315+
integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
8316+
82988317
v8-compile-cache-lib@^3.0.1:
82998318
version "3.0.1"
83008319
resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"

0 commit comments

Comments
 (0)