Elastic UI for Kibana 6.1.3 Plugin?

andrei.costache · July 23, 2018, 2:11pm

Hi,

I have created a plugin for Kibana 6.1.3, using ReactJS for rendering.

I am trying to use components of the Kibana UI framework (KUI) and of Elastic UI (EUI); for example:

import { EuiPage, EuiPageHeader } from "@elastic/eui";
import { KuiLabel } from 'ui_framework/components';

My problem: EUI components are not rendered correctly. Not sure if it's a good idea to combine KUI and EUI. Nevertheless it seems the EUI components cause trouble: the HTML structure seems ok, but the styles are not considered at all.

My question: is there a version restriction regarding the combination of KUI, EUI and Kibana 6.1.3? Or am I missing a dependency (Sass/Scss) or am I just specifying dependencies incorrectly?

My package.json contains the following:

{
"version": "6.1.3",
"main": "index.js",
"kibana": {
"version": "6.1.3"
},
...
"devDependencies": {
"@elastic/eslint-config-kibana": "0.0.2",
"@elastic/plugin-helpers": "^6.0.0",
"@elastic/eui": "^3.0.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"babel-eslint": "4.1.8",
"chai": "^3.5.0",
"eslint": "1.10.3",
"eslint-plugin-mocha": "1.1.0"
}
}

Thank you in advance,
Andrei.

rashmi · July 23, 2018, 5:15pm

@dsnider - can you please provide some inputs here on EUI .

Thanks
Rashmi

dsnider · July 23, 2018, 5:57pm

Hi. EUI was added to Kibana in 6.2. That said, it's just a dependency, so you should be able to add the latest version of EUI into an older version of Kibana (or any JS project for that matter).

When doing so, you'll just need to make sure the CSS is included somewhere. We do this currently (post 6.2) by requiring the file here. You should be able to do the same.

github.com

elastic/kibana/blob/master/src/ui/public/autoload/styles.js

/*
 * 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.
 */

const theme = require('../theme');

This file has been truncated. show original

In general, I would advise building plugins with EUI as much as possible. KUI will slowly be removed from Kibana as we convert the templates to use EUI.

andrei.costache · July 25, 2018, 7:40am

Hi @dsnider,

Indeed it works now, after requiring the styles, as advised.

Thank you for the help and the advise on EUI/KUI.

Best regards,
Andrei.

system · August 22, 2018, 7:41am

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Can i update eui in my kibana? Kibana	4	677	December 27, 2019
Question about Kibana Plugin Development/Generators Kibana	3	413	August 27, 2018
React router with Eui Framework integrating issue Kibana	2	808	August 27, 2019
How to use elastic ui within angular plugin Kibana ccr-cross-cluster-replication	4	835	February 20, 2023
Angular or React for external kibana plugin Kibana kibana-plugin-development	6	567	November 23, 2022

Elastic UI for Kibana 6.1.3 Plugin?

Related topics