Skip to content

Commit 18fcf2d

Browse files
ooasisooasis
committed
refactored
1 parent 1885514 commit 18fcf2d

File tree

7 files changed

+2962
-3148
lines changed

7 files changed

+2962
-3148
lines changed

Diff for: ‎package.json

+7-6
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,13 @@
1313
"author": "Hang Sun",
1414
"license": "Apache-2.0",
1515
"devDependencies": {
16-
"@grafana/data": "latest",
17-
"@grafana/toolkit": "latest",
18-
"@grafana/ui": "latest",
19-
"@types/lodash": "latest",
20-
"@testing-library/jest-dom": "5.4.0",
21-
"@testing-library/react": "^10.0.2"
16+
"@grafana/data": "8.1.1",
17+
"@grafana/runtime": "8.1.1",
18+
"@grafana/toolkit": "8.1.1",
19+
"@grafana/ui": "8.1.1",
20+
"@testing-library/jest-dom": "5.14.1",
21+
"@testing-library/react": "^12.0.0",
22+
"@types/lodash": "4.14.172"
2223
},
2324
"engines": {
2425
"node": ">=14"

Diff for: ‎src/ConfigEditor.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import React, { ChangeEvent, PureComponent } from 'react';
2-
import { LegacyForms } from '@grafana/ui';
31
import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
4-
import { MyDataSourceOptions, MySecureJsonData } from './types';
2+
import { LegacyForms } from '@grafana/ui';
3+
import React, { ChangeEvent, PureComponent } from 'react';
4+
import { GitlabDataSourceOptions, GitlabSecureJsonData } from './types';
55

66
const { SecretFormField, FormField } = LegacyForms;
77

8-
interface Props extends DataSourcePluginOptionsEditorProps<MyDataSourceOptions> {}
8+
interface Props extends DataSourcePluginOptionsEditorProps<GitlabDataSourceOptions> {}
99

1010
interface State {}
1111

@@ -30,7 +30,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
3030
});
3131
};
3232

33-
onResetAPIKey = () => {
33+
onAPIKeyReset = () => {
3434
const { onOptionsChange, options } = this.props;
3535
onOptionsChange({
3636
...options,
@@ -48,7 +48,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
4848
render() {
4949
const { options } = this.props;
5050
const { jsonData, secureJsonFields } = options;
51-
const secureJsonData = (options.secureJsonData || {}) as MySecureJsonData;
51+
const secureJsonData = (options.secureJsonData || {}) as GitlabSecureJsonData;
5252

5353
return (
5454
<div className="gf-form-group">
@@ -58,7 +58,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
5858
label="API Endpoint"
5959
placeholder="api endpoint"
6060
labelWidth={10}
61-
inputWidth={40}
61+
inputWidth={20}
6262
onChange={this.onEndpointChange}
6363
/>
6464
</div>
@@ -72,7 +72,7 @@ export class ConfigEditor extends PureComponent<Props, State> {
7272
placeholder="private token"
7373
labelWidth={10}
7474
inputWidth={20}
75-
onReset={this.onResetAPIKey}
75+
onReset={this.onAPIKeyReset}
7676
onChange={this.onAPIKeyChange}
7777
/>
7878
</div>

Diff for: ‎src/QueryEditor.tsx

+10-19
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,25 @@
1-
import defaults from 'lodash/defaults';
2-
3-
import React, { ChangeEvent, PureComponent } from 'react';
4-
import { Button, LegacyForms } from '@grafana/ui';
51
import { QueryEditorProps } from '@grafana/data';
2+
import { Button, LegacyForms } from '@grafana/ui';
3+
import React, { ChangeEvent, PureComponent } from 'react';
64
import { DataSource } from './datasource';
7-
import { defaultQuery, MyDataSourceOptions, MyQuery } from './types';
5+
import { GitlabDataSourceOptions, GitlabQuery } from './types';
6+
87

98
const { FormField } = LegacyForms;
109

11-
type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;
10+
type Props = QueryEditorProps<DataSource, GitlabQuery, GitlabDataSourceOptions>;
1211

1312
export class QueryEditor extends PureComponent<Props> {
1413
onGroupChange = (event: ChangeEvent<HTMLInputElement>) => {
1514
const { onChange, query } = this.props;
1615
const newVal = event.target.value;
17-
onChange({ ...query, group: newVal ? parseInt(newVal, 10) : undefined });
16+
onChange({ ...query, groupId: newVal ? parseInt(newVal, 10) : undefined });
1817
};
1918

2019
onProjectChange = (event: ChangeEvent<HTMLInputElement>) => {
2120
const { onChange, query } = this.props;
2221
const newVal = event.target.value;
23-
onChange({ ...query, project: newVal ? parseInt(newVal, 10) : undefined });
22+
onChange({ ...query, projectId: newVal ? parseInt(newVal, 10) : undefined });
2423
};
2524

2625
onExecute = () => {
@@ -29,20 +28,12 @@ export class QueryEditor extends PureComponent<Props> {
2928
};
3029

3130
render() {
32-
const query = defaults(this.props.query, defaultQuery);
33-
const { group, project } = query;
31+
const { groupId: group, projectId: project } = this.props.query;
3432

3533
return (
3634
<div className="gf-form">
37-
<FormField width={8} value={group} onChange={this.onGroupChange} label="Group Id" type="number" step="1" />
38-
<FormField
39-
width={8}
40-
value={project}
41-
onChange={this.onProjectChange}
42-
label="Project Id"
43-
type="number"
44-
step="1"
45-
/>
35+
<FormField width={8} value={group} onChange={this.onGroupChange} label="Group" type="number" step="1" />
36+
<FormField width={8} value={project} onChange={this.onProjectChange} label="Project" type="number" step="1" />
4637
<Button onClick={this.onExecute}>Execute</Button>
4738
</div>
4839
);

Diff for: ‎src/datasource.ts

+41-56
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,46 @@
1-
// import defaults from 'lodash/defaults';
2-
31
// @ts-ignore
4-
import { getBackendSrv, logDebug, logInfo, logWarning, logError } from '@grafana/runtime';
5-
62
import {
73
DataQueryRequest,
84
DataQueryResponse,
95
DataSourceApi,
106
DataSourceInstanceSettings,
11-
MutableDataFrame,
127
FieldType,
8+
MutableDataFrame,
139
} from '@grafana/data';
14-
15-
import { MyQuery, MyDataSourceOptions } from './types';
10+
import { getBackendSrv } from '@grafana/runtime';
11+
import { GitlabDataSourceOptions, GitlabQuery } from './types';
1612

1713
const routePath = '/gitlab';
1814

19-
export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
15+
export class DataSource extends DataSourceApi<GitlabQuery, GitlabDataSourceOptions> {
2016
url?: string;
2117

22-
constructor(instanceSettings: DataSourceInstanceSettings<MyDataSourceOptions>) {
18+
constructor(instanceSettings: DataSourceInstanceSettings<GitlabDataSourceOptions>) {
2319
super(instanceSettings);
2420

2521
this.url = instanceSettings.url;
2622
}
2723

28-
async query(options: DataQueryRequest<MyQuery>): Promise<DataQueryResponse> {
29-
const promises = options.targets.map(async query => {
24+
async query(options: DataQueryRequest<GitlabQuery>): Promise<DataQueryResponse> {
25+
const promises = options.targets.map(async (query) => {
3026
const frame = await this.doRequest(query);
3127
return frame;
3228
});
3329
const data = await Promise.all(promises);
3430
return { data };
3531
}
3632

37-
async doRequest(query: MyQuery) {
38-
if (!query.group) {
33+
async doRequest(query: GitlabQuery) {
34+
if (!query.groupId) {
3935
return await this.fetchGroups(query);
40-
} else if (!query.project) {
36+
} else if (!query.projectId) {
4137
return await this.fetchProjects(query);
4238
} else {
4339
return await this.fetchTags(query);
4440
}
4541
}
4642

47-
async fetchTags(q: MyQuery) {
43+
async fetchTags(q: GitlabQuery) {
4844
const frame = new MutableDataFrame({
4945
refId: q.refId,
5046
fields: [
@@ -53,22 +49,17 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
5349
],
5450
});
5551

56-
try {
57-
const { data: projects } = await this.callGitlabAPI(`/projects/${q.project}/repository/tags`);
58-
59-
if (projects) {
60-
projects.forEach((r: any) => {
61-
frame.appendRow([r.name, r.message]);
62-
});
63-
}
64-
} catch (e) {
65-
logError(`Failed to fetch projects. Error: ${e}`);
52+
const { data: projects } = await this.callGitlabAPI(`/projects/${q.projectId}/repository/tags`);
53+
if (projects) {
54+
projects.forEach((r: any) => {
55+
frame.appendRow([r.name, r.message]);
56+
});
6657
}
6758

6859
return frame;
6960
}
7061

71-
async fetchProjects(q: MyQuery) {
62+
async fetchProjects(q: GitlabQuery) {
7263
const frame = new MutableDataFrame({
7364
refId: q.refId,
7465
fields: [
@@ -77,22 +68,17 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
7768
],
7869
});
7970

80-
try {
81-
const { data: projects } = await this.callGitlabAPI(`/groups/${q.group}/projects`);
82-
83-
if (projects) {
84-
projects.forEach((r: any) => {
85-
frame.appendRow([r.name, r.id]);
86-
});
87-
}
88-
} catch (e) {
89-
logError(`Failed to fetch projects. Error: ${e}`);
71+
const { data: projects } = await this.callGitlabAPI(`/groups/${q.groupId}/projects`);
72+
if (projects) {
73+
projects.forEach((r: any) => {
74+
frame.appendRow([r.name, r.id]);
75+
});
9076
}
9177

9278
return frame;
9379
}
9480

95-
async fetchGroups(q: MyQuery) {
81+
async fetchGroups(q: GitlabQuery) {
9682
const frame = new MutableDataFrame({
9783
refId: q.refId,
9884
fields: [
@@ -101,29 +87,29 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
10187
],
10288
});
10389

104-
try {
105-
const { data: groups } = await this.callGitlabAPI('/groups');
106-
107-
if (groups) {
108-
groups.forEach((r: any) => {
109-
frame.appendRow([r.name, r.id]);
110-
});
111-
}
112-
} catch (e) {
113-
logError(`Failed to fetch groups. Error: ${e}`);
90+
const { data: groups } = await this.callGitlabAPI('/groups');
91+
if (groups) {
92+
groups.forEach((r: any) => {
93+
frame.appendRow([r.name, r.id]);
94+
});
11495
}
11596

11697
return frame;
11798
}
11899

119-
async callGitlabAPI(path: string, params: any = {}) {
120-
const response = await getBackendSrv().datasourceRequest({
121-
method: 'GET',
122-
url: this.url + routePath + path,
123-
params,
124-
});
125-
logDebug(`Gitlab API response: ${response}`);
126-
return response;
100+
async callGitlabAPI(path: string, params: object = {}) {
101+
try {
102+
const response = await getBackendSrv().datasourceRequest({
103+
method: 'GET',
104+
url: this.url + routePath + path,
105+
params,
106+
});
107+
console.debug(`Gitlab API response: ${response}`);
108+
return response;
109+
} catch (e) {
110+
console.error(`Failed to fetch groups. Error: ${e}`);
111+
throw e;
112+
}
127113
}
128114

129115
async testDatasource() {
@@ -134,7 +120,6 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
134120
message: 'Success',
135121
};
136122
} catch (e) {
137-
logError(`Failed to fetch groups. Error: ${e}`);
138123
return {
139124
status: 'error',
140125
message: `Error: ${e}`,

Diff for: ‎src/module.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { DataSourcePlugin } from '@grafana/data';
22
import { DataSource } from './datasource';
33
import { ConfigEditor } from './ConfigEditor';
44
import { QueryEditor } from './QueryEditor';
5-
import { MyQuery, MyDataSourceOptions } from './types';
5+
import { GitlabQuery, GitlabDataSourceOptions } from './types';
66

7-
export const plugin = new DataSourcePlugin<DataSource, MyQuery, MyDataSourceOptions>(DataSource)
7+
export const plugin = new DataSourcePlugin<DataSource, GitlabQuery, GitlabDataSourceOptions>(DataSource)
88
.setConfigEditor(ConfigEditor)
99
.setQueryEditor(QueryEditor);

Diff for: ‎src/types.ts

+5-7
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
11
import { DataQuery, DataSourceJsonData } from '@grafana/data';
22

3-
export interface MyQuery extends DataQuery {
4-
group?: number;
5-
project?: number;
3+
export interface GitlabQuery extends DataQuery {
4+
groupId?: number;
5+
projectId?: number;
66
}
77

8-
export const defaultQuery: Partial<MyQuery> = {};
9-
108
/**
119
* These are options configured for each DataSource instance
1210
*/
13-
export interface MyDataSourceOptions extends DataSourceJsonData {
11+
export interface GitlabDataSourceOptions extends DataSourceJsonData {
1412
apiEndpoint: string;
1513
}
1614

1715
/**
1816
* Value that is used in the backend, but never sent over HTTP to the frontend
1917
*/
20-
export interface MySecureJsonData {
18+
export interface GitlabSecureJsonData {
2119
apiKey: string;
2220
}

0 commit comments

Comments
 (0)