Working plugin

Author: guyplusplus

README.md

@@ -1,10 +1,10 @@
 # Kibana Plugin - Custom Form Filter Visualization 
 
-This project is a simple tutorial for Kibana new comers trying to developer their own vizualisation plugin. The actual usecase is to create a custom form to filter data to help end-users search their data.
+This project is a simple tutorial for Kibana new comers trying to developer their own vizualisation plugin. The actual usecase of this plugin is to create a custom form to filter data and tailor dashboard output.
 
 This plugin is a demo for the accounts data which can be downloaded from elastic web site [here](https://download.elastic.co/demos/kibana/gettingstarted/accounts.zip) then uploaded via `curl -H 'Content-Type: application/x-ndjson' -XPOST 'localhost:9200/bank/account/_bulk?pretty' --data-binary @accounts.json`.
 
-As plugin architecture is being under heavy redesign in 7.x and documentation is rather obscure, I did my best to create something simple that works.
+As plugin architecture is being under heavy redesign in 7.x and documentation is rather obscure, I did my best to create something simple that works. The code is also basic, I am JavaScript beginner!
 
 This repository is for Kibana v7.7 while [this repository](https://github.com/guyplusplus/Kibana-Plugin-Custom-Form-Filter-Visualization-Legacy) is for 7.6.2 legacy architecture.
 
@@ -132,9 +132,11 @@ The form code looks like this and is very simple to modify, based on EUI React c
 </div>
 ```
 
+I use [Microsoft Code](https://code.visualstudio.com/) to edit code and [Google Chrome](https://www.google.com/chrome/) to debug.
+
 ## Packaging the plugin as a zip file
 
-Simply add the plugin directory inside a `kibana` folder and zip the file. Do not include the `kibana/target` directory. The zip structure is
+Simply add the plugin directory inside a `kibana` folder and zip the file. Do not include the `my-plugin/target` directory in the zip file. The zip structure is
 
 ```
 my-plugin_7.7.0.zip
@@ -153,8 +155,8 @@ my-plugin_7.7.0.zip
 The plugin can then be installed like this for an apt installed Kibana.
 
 ```
-$ sudo ./bin/kibana-plugin --allow-root install file:///home/john/downloads/kbn_tp_custom_form_filter_accounts_7.7.0_1.0.0.zip
-$ sudo ./bin/kibana-plugin --allow-root install https://github.com/guyplusplus/Kibana-Plugin-Custom-Form-Filter-Visualization/releases/download/1.0.0/kbn_tp_custom_form_filter_accounts_7.7.0_1.0.0.zip
+$ sudo ./bin/kibana-plugin --allow-root install file:///home/john/downloads/vis_type_custom_form_filter_accounts_7.7.0_1.0.0.zip
+$ sudo ./bin/kibana-plugin --allow-root install https://github.com/guyplusplus/Kibana-Plugin-Custom-Form-Filter-Visualization/releases/download/1.0.0/vis_type_custom_form_filter_accounts_7.7.0_1.0.0.zip
 ```
 
 Deleting then installing the plugin often fails for me. I fix it by running this command.

vis_type_custom_form_filter_accounts/kibana.json

@@ -3,5 +3,5 @@
     "version": "kibana",
     "ui": true,
     "server": true,
-    "requiredPlugins": ["expressions", "visualizations"]
+    "requiredPlugins": ["expressions", "visualizations", "data"]
 }

vis_type_custom_form_filter_accounts/public/custom_form_filter_accounts_options.tsx

@@ -22,7 +22,7 @@ import {
   EuiFieldNumber,
   EuiFormRow
 } from '@elastic/eui';
-import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
+import { VisOptionsProps } from '../../../src/plugins/vis_default_editor/public';
 import { CustomFormFilterAccountsVisParams } from './types';
 
 
@@ -37,7 +37,7 @@ function CustomFormFilterAccountsOptions({ stateParams, setValue }: VisOptionsPr
     <EuiFormRow label="Maximum Balance">
       <EuiFieldNumber
         value={stateParams.maximumBalance}
-        onChange={({ target: { value } }) => onCustomFormFilterAccountsUpdate(value)}
+        onChange={({ target: { value } }) => onCustomFormFilterAccountsUpdate(Number(value))}
         step={1000}
       />
     </EuiFormRow>

vis_type_custom_form_filter_accounts/public/custom_form_filter_accounts_vis.ts

@@ -0,0 +1,75 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { KibanaContextProvider } from '../../../src/plugins/kibana_react/public';
+import { DefaultEditorSize } from '../../../src/plugins/vis_default_editor/public';
+import { DataPublicPluginSetup } from '../../../src/plugins/data/public';
+import { ExprVis, VisParams } from '../../../src/plugins/visualizations/public';
+import { CustomFormFilterAccountsVisWrapper } from './custom_form_filter_accounts_vis_controller';
+import { CustomFormFilterAccountsOptions } from './custom_form_filter_accounts_options';
+import { CustomFormFilterAccountsVisDependencies } from './plugin';
+
+export interface CustomFormFilterAccountsVisComponentProp {
+  vis: ExprVis;
+  data: DataPublicPluginSetup;
+  visParams: VisParams;
+}
+
+export function getCustomFormFilterAccountsVisDefinition(dependencies: CustomFormFilterAccountsVisDependencies) {
+
+  return {
+    name: 'customFormFilterAccounts',
+    title: 'Form - Accounts',
+    isAccessible: true,
+    icon: 'visText',
+    description: 'This sample custom visualization plugin contains a simple UI to adjust filter for accounts test data',
+    visConfig: {
+      defaults: {
+        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
+        age: 20,
+        minimumBalance: null,
+        maximumBalance: 100000,
+      },
+      component:  (props: CustomFormFilterAccountsVisComponentProp) => (
+        <KibanaContextProvider services={{ ...dependencies }}>
+          <CustomFormFilterAccountsVisWrapper {...props} />
+        </KibanaContextProvider>
+      ),
+    },
+    editorConfig: {
+      optionTabs: [
+        {
+          name: 'options',
+          title: 'Options',
+          editor: CustomFormFilterAccountsOptions,
+        },
+      ],
+      enableAutoApply: false,
+      defaultSize: DefaultEditorSize.LARGE,
+    },
+    options: {
+      showIndexSelection: false,
+      showTimePicker: true,
+      showFilterBar: true,
+    },
+    requestHandler: 'none',
+    responseHandler: 'none',
+  };
+}