CODEWITHSUNDEEP
angularjselasticsearchvisualizationkibana
Morta1
Morta1

Reputation: 619

Kibana 6.1.1 Custom Plugin (visualization)

I'm pretty new to Kibana, and I'm trying to make my own visualization custom plugin (for kibana 6.1.1).

At that moment I just want to see something on the screen that says "hello world" or something.

Firstly, this is my folder structure:

.
├── package.json
├── public
|   ├── mainTemplate.html
|   ├── optionTemplate.html
|   ├── mortaController.js
|   └── morta.js
├── index.js

This is morta.js looks like:

import 'plugins/morta/mortaController';
//core methods
import {CATEGORY} from 'ui/vis/vis_category';
import {VisFactoryProvider} from 'ui/vis/vis_factory';
import {VisSchemasProvider} from 'ui/vis/editors/default/schemas';
import {VisTypesRegistryProvider} from 'ui/registry/vis_types';
//templates
import mainTemplate from 'plugins/morta/mainTemplate.html';
import optionTemplate from 'plugins/morta/optionTemplate.html';

VisTypesRegistryProvider.register(MortaProvider);

function MortaProvider(Private) {
    const VisFactory = Private(VisFactoryProvider);
    const Schemas = Private(VisSchemasProvider);

    return VisFactory.createAngularVisualization({
        name: "morta",
        title: "Morta Vis",
        icon: "fa-terminal",
        description: "Morta visualization",
        category: CATEGORY.BASIC,
        visConfig: {
            defaults: {},
            template: mainTemplate
        },
        editorConfig: {
            optionsTemplate: optionTemplate,
            schemas: new Schemas([{
                group: 'metrics',
                name: 'test_metrics',
                title: "Testing metrics",
                min: 1,
                max: 1,
                aggFilter: ['count', 'avg', 'sum', 'min', 'max', 'cardinality', 'std_dev'],
                defaults: [
                    {schema: 'metric', type: 'count'}
                ]
            }])
        }
    });
}

export default MortaProvider;

This is my controller: 

import { uiModules } from 'ui/modules';

const module = uiModules.get('morta', ['kibana']);

module.controller('MortaController', mortaController);

mortaController.$inject = ['$scope'];

function mortaController($scope){
    let vm = this;
}

This is the mainTemplate: 

<div data-ng-controller="MortaController as vm">
    <h1>Morta Visualize View</h1>
</div>

This is the optionTemplate:

<p>Test Options</p>

I've got my kibana and elasticsearch servers up and running, then i'm trying to create a new visualization with my custom plugin but i'm getting an error saying :

"Visualize: cannot read property 'group' of undefined"

I'm not sure if I'm missing something or doing something wrong, let me know if you need more information that I can provide.

Upvotes: 2

Views: 731

Answers (1)

wullub
wullub

Reputation: 1

This can happen in the create visualization screen after changing the name and forcing a refresh.

name: 'test_metrics',

Exit out of the 'create visualization' screen e.g. click the 'visualize' tab, and the '+' create visualization button to get back to where you were

This worked for me (on version 6.3.2)

Upvotes: 0

Related Questions