Place the Static HTML Page in kibana Dashboard - kibana

I need to add the Static HTML file in Kibana dashboard.where i can hold my HTML file in Kibana.
Note:Kibana version 5.6.3
I come across some kibana plugin like Kibana-html-plugin,kibana5-html-plugin , but it wont support for my kibana version 5.6.3.
i already change the package.json file but it wont help.
is there any otherway to do

import marked from 'marked';
import uiModules from 'ui/modules';
import 'angular-sanitize';
marked.setOptions({
gfm: true, // Github-flavored markdown
sanitize: true // Sanitize HTML tags
});
const module = uiModules.get('kibana/markdown_vis', ['kibana']);
module.controller('KbnMarkdownVisController', function ($scope, $sce) {
$scope.$watch('vis.params.markdown', function (html) {
if (!html) return;
$scope.html = $sce.trustAsHtml(html);
});
});
at last, I found the solution.
Paste the above code in kibana/src/core_plugins/markdown_vis/public/markdown_vis_controller.js

Related

nextjs links without strings

Im new to nextjs, and Im checking if it will be good for the app that will have pretty complex and messy internal navigation. Just checked their documentation and I see that they recommend usage
of Link component like this <Link href="/your_path">Path</Link>. A bit scary is that I have to provide 'your_path' as a string so every time i change page file name I have to manually update code that redirects to this page. Is there any solution that allows me to define routing on my own so I can write something like (pseudocode)
routes = [
...
{
page : 'page_name',
path : 'path_to_page'
}
...
]
So instead of using string I can do <Link href="{route.path}">Path</Link> or Im condemned to use this file-system based router with all consequences?
The simple answer is yes!
When you want to change a user route in NextJs you have 2 options,
The first is with the <Link> Element that you can specify a href to where it directs.
And you also have a useRouter hook for more complex routing for example if the user does an action that requires moving him into a different route you can do it internally in your handlers.
For more information about useRouter hook.
What I usually do is storing my routes in an object
const ROUTES = {
HOME: "/",
ABOUT: "/about"
}
and wherever you call routes you just use the object so F.E
With Link tag
<Link href={ROUTES.ABOUT}>ABOUT PAGE</Link>`
with useRouter hook
// Inside a React Component
const router = useRouter();
const handleNavigateToAbout = () => {
router.push(ROUTES.ABOUT);
}
return (
// SOME JSX
<button onClick={handleNavigateToAbout}> Go to about page! </button>
)

Nextjs nested routing not found

I'm trying to create a nested route inside my nextjs project, but i'm receiving a 404 page not found when trying to request the page.
I have a route named /dashboard/repository/blender where blender is a dynamic name that the user can input and that works fine.
But the next step is then to create a subpage for that dynamic route which is named tags, and that's where I receive the 404. (/dashboard/repository/blender/tags)
Here's a screenshot of what i've tried to achieve the tags nested routing
Secondly I have also tried doing the following
What can I do to achieve this ?
Try that structure please
dashboard (folder)
-repository (folder)
--[blender] (folder)
----tags.tsx (file)
example urls
/dashboard/repository/blender/tags
/dashboard/repository/surrender/tags
...
In your component, you can get it like below
tags.tsx
import { useRouter } from 'next/router'
const C = () => {
const router = useRouter()
const { blender } = router.query;
console.log(blender)
}
Solved it with
- /dashboard/repository/[repository]/index.js
- /dashboard/repository/[repository]/tags.js

Storybook + Vue3 - Error when trying to use custom directives

When trying to use custom directives with Vue3 and storybook, I get this error:
I don't understand the issue and have no idea where to even start to look. I'm still very new to Vue and storybook.
I created a small test directive just to make sure it wasn't something to do with a more complicated one:
app.directive('red-bg', {
beforeMount: (element, binding) => {
element.style.backgroundColor = "red";
}
});
and applied it:
<div class="wmr-select relative" ref="selectRef" v-red-bg>
It works in the normal app part of the the project (as you can see with the red bg):
But in story book I get the error in the first image.
I haven't been able to find any kind of answer for this.
Hoping someone will swoop in and save me.
Thanks.
Since Storybook is using another file to initialize your app, you need to define the directive in both file.
This is explained in the configuring storybook section of the doc.
In my case, I had defined the directive in my main.js file, but I also had to define it in the preview.js file, of the .storybook folder.
As a reference, here is was my .storybook/preview.js looks like:
import { app } from "#storybook/vue3";
/* all the other import needed for my project **/
import store from "#/store";
/** ... */
export const parameters = {
/** Some parameters specifics to the plugins of storybook. **/
/** For example, when using themes. **/
};
/** App specific initialization, ex defining locale */
const i18n = createI18n({
locale: "en",
fallbackLocale: "en",
messages: myLocaleMessageLoader()
});
/** registering directives */
app.directive("my-custom-directive", myCustomDirectiveHandler);
app
.use(i18n)
.use(store)
/** all the other `.use` that my app need.*/
Please note the usage of storybook own app in the import.
After adding the directive in the .storybook/preview.js I was successfully able to use it in my stories.

How to build a Vue.js project to use it in wordpress

Update : see edit at the end
Follow up of my previous question here : Include Vue.js component in Wordpress plugin without CDN
The very pertinent answer from Okba is causing me headaches. How do I build something with Vue.js that I can use in wordpress ?
I work with Vue-cli. I have tried to build my project as a library using this command line :
vue-cli-service build --target lib --name myVueLibrary ./src/main.js
And then importing the dist/* files in wordpress :
wp_enqueue_script('myPlugin', plugin_dir_url(__FILE__) . './my-plugin.js', [], '0.1', true);
wp_enqueue_script('myVueLibrary', './vue-plugin/myVueLibrary.common.js', [], '0.1.0');
where my-plugin.js looks like this (I am using shortcodes to replace a <div> content with whatever my plugin puts there) :
var elements = document.querySelectorAll('[my-plugin-atts]');
elements.forEach(function (element) {
var atts = JSON.parse(element.getAttribute('my-plugin-atts'));
var vm = new Vue({
el: element,
created: function () {
this.atts = atts;
},
template: '<div class="plugin-container">{{atts.id}}</div>'
});
});
And I get the following error :
Uncaught ReferenceError: Vue is not defined
But ! If I replace my vueBaoViz.common.js import by a Vue CDN import, my wordpress plugin displays what I want it to display.
wp_enqueue_script('myPlugin', plugin_dir_url(__FILE__) . './my-plugin.js', [], '0.1', true);
wp_enqueue_script('vue', 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js', [], '2.5.16');
My guess is my Vue build is not ok, how do I build something I can use like that, and that packs Vue.js within itself ?
So, turns out i'm an idiot, I forgot to add plugin_dir_url(__FILE__) before the path when loading a local file. This solved my problem.
1 - You can use vue js - non spa, from cdn or with webpack look at the https://v2.vuejs.org/v2/guide/#Composing-with-Components for how you will use vue js in regular js files.
2- You can use vue-cli like a standart spa project with wordpress rest api : https://developer.wordpress.org/rest-api/

Serving an "index.html" file in public/ when using MeteorJS and Iron Router?

I want to serve a static HTML file from MeteorJS's public folder (as is possible with Rails and Express). The reason I'm doing this is because I have one template for the dynamic "admin" part of my webapp and another for the sales-y "frontend" part of the app.
I don't want this file to be wrapped in a Meteor template as suggested in this answer as it will automatically bring in the minified CSS, etc... that the dynamic pages use.
Is there a way I can setup the public folder (and all its subfolders) so that it serves index.html? This way http://app.com/ will load public/index.html?
You could use the private folder instead and then use Assets.getText to load the contents of the file, then serve it with a server-side router from iron-router.
So off the top of my head the code would look something like this:
if (Meteor.isServer) {
Router.map(function() {
this.route('serverRoute', {
path: '/',
where: 'server',
action: function() {
var contents = Assets.getText('index.html');
this.response.end(contents);
}
});
});
}
this is what I put in bootstrap.js
Router.route('/', {
where: 'server'
}).get(function() {
var contents;
contents = Assets.getText('index.html');
return this.response.end(contents);
});

Resources