Skip to content

Commit 70238a5

Browse files
author
guyplusplus
committed
First plugin
1 parent 207287e commit 70238a5

14 files changed

+590
-0
lines changed

‎vis_type_custom_form_filter_accounts/README.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
Change keyword account / Account in all filenames and content. Recommended to use a single word to avoid camel case vs kebad situation
2+
3+
custom_form_filter_accounts_options.tsx [DONE]
4+
Setting Config Data UI
5+
6+
custom_form_filter_accounts_vis.ts [DONE]
7+
form attributes definitions and default values (field attributes and default values)
8+
9+
custom_form_filter_accounts_vis_controller.tsx
10+
Vis UI
11+
form attributes mapping in CustomFormFilterAccountsVisWrapper function
12+
13+
types.ts [DONE]
14+
form attributes definition
15+
16+
custom_form_filter_accounts_vis_request_handler [DONE]
17+
Add filters based on attributes
18+
19+
TODO:
20+
- internationalization
21+
- put one example of form class (such as mkdEditor inside a .scss file)
22+
- nice icon in customer_form_filter_accounts_vis
23+
- check meaning of
24+
customer_form_filter_accounts_vis enableAutoApply
25+
customer_form_filter_accounts_vis defaultSize
26+
- when in version 7.7 add back DefaultEditorSize in customer_form_filter_accounts_vis

‎vis_type_custom_form_filter_accounts/config.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/*
2+
* Licensed to Elasticsearch B.V. under one or more contributor
3+
* license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright
5+
* ownership. Elasticsearch B.V. licenses this file to you under
6+
* the Apache License, Version 2.0 (the "License"); you may
7+
* not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
20+
import { schema, TypeOf } from '@kbn/config-schema';
21+
22+
export const configSchema = schema.object({
23+
enabled: schema.boolean({ defaultValue: true }),
24+
});
25+
26+
export type ConfigSchema = TypeOf<typeof configSchema>;

‎vis_type_custom_form_filter_accounts/kibana.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"id": "visTypeCustomFormFilterAccounts",
3+
"version": "kibana",
4+
"ui": true,
5+
"server": true,
6+
"requiredPlugins": ["expressions", "visualizations"]
7+
}

‎vis_type_custom_form_filter_accounts/public/_custom_form_filter_accounts_vis.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.cffVis {
2+
padding: $euiSizeS;
3+
width: 100%;
4+
}

‎vis_type_custom_form_filter_accounts/public/custom_form_filter_accounts_fn.ts‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/*
2+
* Licensed to Elasticsearch B.V. under one or more contributor
3+
* license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright
5+
* ownership. Elasticsearch B.V. licenses this file to you under
6+
* the Apache License, Version 2.0 (the "License"); you may
7+
* not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
20+
//import { i18n } from '@kbn/i18n';
21+
import { ExpressionFunctionDefinition, Render } from '../../expressions/public';
22+
import { Arguments, CustomFormFilterAccountsVisParams } from './types';
23+
24+
interface RenderValue {
25+
visType: 'visTypeCustomFormFilterAccounts';
26+
visConfig: CustomFormFilterAccountsVisParams;
27+
}
28+
29+
export const createCustomFormFilterAccountsVisFn = (): ExpressionFunctionDefinition<
30+
'visTypeCustomFormFilterAccountsVis',
31+
unknown,
32+
Arguments,
33+
Render<RenderValue>
34+
> => ({
35+
name: 'visTypeCustomFormFilterAccountsVis',
36+
type: 'render',
37+
inputTypes: [],
38+
help: "Help me !",
39+
args: {
40+
openLinksInNewTab: {
41+
types: ['boolean'],
42+
default: false,
43+
help: 'Opens links in new tab',
44+
},
45+
},
46+
fn(input, args) {
47+
return {
48+
type: 'render',
49+
as: 'visualization',
50+
value: {
51+
visType: 'visTypeCustomFormFilterAccounts',
52+
visConfig: {
53+
filterCounter: 0,
54+
age: 20,
55+
minimumBalance: 1,
56+
maximumBalance: 2
57+
}
58+
},
59+
};
60+
},
61+
});

‎vis_type_custom_form_filter_accounts/public/custom_form_filter_accounts_options.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/*
2+
* Licensed to Elasticsearch B.V. under one or more contributor
3+
* license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright
5+
* ownership. Elasticsearch B.V. licenses this file to you under
6+
* the Apache License, Version 2.0 (the "License"); you may
7+
* not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
20+
import React, { useCallback } from 'react';
21+
import {
22+
EuiFieldNumber,
23+
EuiFormRow
24+
} from '@elastic/eui';
25+
import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
26+
import { CustomFormFilterAccountsVisParams } from './types';
27+
28+
29+
function CustomFormFilterAccountsOptions({ stateParams, setValue }: VisOptionsProps<CustomFormFilterAccountsVisParams>) {
30+
31+
const onCustomFormFilterAccountsUpdate = useCallback(
32+
(value: CustomFormFilterAccountsVisParams['maximumBalance']) => setValue('maximumBalance', value),
33+
[setValue]
34+
);
35+
36+
return (
37+
<EuiFormRow label="Maximum Balance">
38+
<EuiFieldNumber
39+
value={stateParams.maximumBalance}
40+
onChange={({ target: { value } }) => onCustomFormFilterAccountsUpdate(value)}
41+
step={1000}
42+
/>
43+
</EuiFormRow>
44+
);
45+
}
46+
47+
export { CustomFormFilterAccountsOptions };

‎vis_type_custom_form_filter_accounts/public/custom_form_filter_accounts_vis.ts‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/*
2+
* Licensed to Elasticsearch B.V. under one or more contributor
3+
* license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright
5+
* ownership. Elasticsearch B.V. licenses this file to you under
6+
* the Apache License, Version 2.0 (the "License"); you may
7+
* not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
20+
import { CustomFormFilterAccountsVis } from './custom_form_filter_accounts_vis_controller';
21+
import { CustomFormFilterAccountsOptions } from './custom_form_filter_accounts_options';
22+
import { customFormFilterAccountsVisRequestHandler } from './custom_form_filter_accounts_vis_request_handler';
23+
import { DefaultEditorSize } from '../../vis_default_editor/public';
24+
25+
export const customFormFilterAccountsVisDefinition = {
26+
name: 'customFormFilterAccounts',
27+
title: 'Form - Accounts',
28+
isAccessible: true,
29+
icon: 'visText',
30+
description: 'This sample custom visualization plugin contains a simple UI to adjust filter for accounts test data',
31+
visConfig: {
32+
component: CustomFormFilterAccountsVis, //CustomFormFilterAccountsVisWrapper,
33+
defaults: {
34+
filterCounter: 0, //0=no action -1=delete all filters,1=first time to add filters with clicking 'Apply filter', then 2 onward each time this button is click
35+
age: 20,
36+
minimumBalance: null,
37+
maximumBalance: 100000,
38+
},
39+
},
40+
editorConfig: {
41+
optionTabs: [
42+
{
43+
name: 'options',
44+
title: 'Options',
45+
editor: CustomFormFilterAccountsOptions,
46+
},
47+
],
48+
enableAutoApply: false,
49+
defaultSize: DefaultEditorSize.LARGE,
50+
},
51+
options: {
52+
showIndexSelection: false,
53+
showTimePicker: true,
54+
showFilterBar: true,
55+
},
56+
requestHandler: customFormFilterAccountsVisRequestHandler,
57+
//requestHandler: 'none',
58+
responseHandler: 'none',
59+
};

‎vis_type_custom_form_filter_accounts/public/custom_form_filter_accounts_vis_controller.tsx‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
/*
2+
* Licensed to Elasticsearch B.V. under one or more contributor
3+
* license agreements. See the NOTICE file distributed with
4+
* this work for additional information regarding copyright
5+
* ownership. Elasticsearch B.V. licenses this file to you under
6+
* the Apache License, Version 2.0 (the "License"); you may
7+
* not use this file except in compliance with the License.
8+
* You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
20+
import React, { useState } from 'react';
21+
22+
import {
23+
EuiButton,
24+
EuiForm,
25+
EuiFormRow,
26+
EuiFieldText,
27+
EuiSpacer,
28+
} from '@elastic/eui';
29+
30+
export class CustomFormFilterAccountsVis extends React.Component {
31+
32+
constructor(props) {
33+
super(props);
34+
props.visParams.filterCounter = 0;
35+
this.state = {
36+
age: "",
37+
minimumBalance: ""
38+
};
39+
if(props.visParams.age != null && !isNaN(props.visParams.age))
40+
this.state.age = String(props.visParams.age);
41+
if(props.visParams.minimumBalance != null && !isNaN(props.visParams.minimumBalance))
42+
this.state.minimumBalance = String(props.visParams.minimumBalance);
43+
}
44+
45+
/* return null if it is not a number */
46+
filterOutNonNumber = (s) => {
47+
if(s == null)
48+
return null;
49+
if(!isFinite(s))
50+
return null;
51+
return s;
52+
}
53+
54+
onClickButtonApplyFilter = () => {
55+
this.props.visParams.filterCounter++;
56+
this.props.visParams.age = parseInt(this.filterOutNonNumber(this.state.age));
57+
this.props.visParams.minimumBalance = parseFloat(this.filterOutNonNumber(this.state.minimumBalance));
58+
this.props.vis.updateState();
59+
this.props.vis.forceReload();
60+
};
61+
62+
onClickButtonDeleteFilter = () => {
63+
this.props.visParams.filterCounter = -1;
64+
//this.props.setValue('filterCounter', -1);
65+
//this.props.vis.updateState();
66+
//this.props.vis.forceReload();
67+
this.forceUpdate();
68+
};
69+
70+
onClickButtonClearForm = () => {
71+
this.props.visParams.filterCounter = -1;
72+
this.state.age = "";
73+
this.state.minimumBalance = "";
74+
this.props.vis.updateState();
75+
};
76+
77+
onFormChange = (event) => {
78+
const target = event.target;
79+
const valueStr = target.value;
80+
const name = target.name;
81+
//there is no typing validation in this sample code
82+
this.setState({
83+
[name]: valueStr
84+
});
85+
};
86+
87+
render() {
88+
const minimumBalanceHelpText = `Input accounts minimum balance (Maximum is ${this.props.visParams.maximumBalance})`;
89+
return (
90+
<div>
91+
<EuiForm>
92+
<EuiFormRow label="Age" helpText="Input customer age">
93+
<EuiFieldText name="age" onChange={e => this.onFormChange(e)} value={this.state.age} />
94+
</EuiFormRow>
95+
<EuiFormRow label="Minimum balance" helpText={minimumBalanceHelpText} >
96+
<EuiFieldText name="minimumBalance" onChange={e => this.onFormChange(e)} value={this.state.minimumBalance} />
97+
</EuiFormRow>
98+
<EuiSpacer />
99+
<EuiButton onClick={this.onClickButtonApplyFilter} fill>Apply filter</EuiButton>&nbsp;
100+
<EuiButton onClick={this.onClickButtonDeleteFilter} >Delete filter</EuiButton>&nbsp;
101+
<EuiButton onClick={this.onClickButtonClearForm} >Clear form</EuiButton>
102+
</EuiForm>
103+
</div>
104+
);
105+
}
106+
107+
componentDidMount() {
108+
this.props.renderComplete();
109+
}
110+
111+
componentDidUpdate() {
112+
this.props.renderComplete();
113+
}
114+
}

0 commit comments

Comments
 (0)