Menu directive is hidden when the route changes

[jesusgn90]

Wazuh	Elastic	Rev
3.x	6/7	n/a

Description
Menu directive is hidden when the route changes.

Steps to reproduce
Let's say you are in Wazuh > Overview, now click on Wazuh > Management, the menu directive is hidden until the new controller loads.

Screenshots

Proposal
The menu directive should be persistent regardless of the route.

[adri9valle]

Update

I tried to load the .pugfile in an HTML to test if it was a rendering problem of the templates since DevTools does not use pug is a simple HTML file and the problem does not occur here.

I have tried to put the content of the .head into a <md-content> except the wz-menu.

I've simplified everything to a simple HTML file that only contains the wz-menu simulating the DevTools HTML and keeps blinking.

I'm trying to make all .pug files inherit from one but I think I would need a controller to manage which section it is in and depending on that select a title in the wz-menu and load the corresponding .pug.

[adri9valle]

Update

I've tried to create nested templates with ngView in order to the main template always contents the wz-menu directive.

Also, I tried to use ng-include instead of include and I change {file}.pub by {file}.html but is not working either.

[adri9valle]

Update

I changed overview.pug by single HTML file that contents all overview HTML files content and the menu is hidden when changing between sections.

[adri9valle]

Update

I set the resolve of DevTools route in all routes to check if this could be provoking the flick, but this change provokes several errors while navigating through the app.

[adri9valle]

Update

I've tried to extend all the pug from a template that only has the wz-menu but does not work either.

Pug documentation: https://pugjs.org/language/inheritance.html

[adri9valle]

Update

I thought in change the routing system to ui-router which permits use nested states and views, but while working on this I realized that the change will be huge.

Also, I've tried to use ng-view again but Kibana loads the Wazuh plugin with its loader and cannot use an index.html to implement ng-view.

[adri9valle]

Update

I've tried to use ng-include in an index template to modify the wz-menu directive in order to change the ng-include value to load the respective templates, I receive this error:

But the template is loaded:

Now, I'm trying to fix this problem, I think that if I could load the respective templates and changing the behavior of the wz-menu directive is possible to fix this problem.

[adri9valle]

Update

I've tried several ways to load the other controllers inside the main controller in order to the wz-menu directive is always visible but any way works fine.

I created an index template and the main controller:

Template

Any method worked properly.

Main controller

I tried to import in the controllers the HTML and PUG templates, from the HTML templates I receive the HTML code but when I used ng-bind-html doesn't work, from PUG templates I received an object:

At the moment, no methods work properly.

[adri9valle]

Update

I loaded ui-router in the app.js: c1e0d49.

Now I load ui-router only in the routes.js and I'm trying to create a simple route:

But when accessing the App I receive the following error:

[adri9valle]

Update

The error found in the previous comment is provoked because ngRoute is not loaded and when trying to access to $route fails:

Once is removed $route this error disappears but I get these others:

[$injector:modulerr] Failed to instantiate module kibana due to: Error: [$injector:modulerr] Failed to instantiate module app/wazuh due to: TypeError: Cannot read property 'otherwise' of undefined 

This error comes from:

[adri9valle]

Update

The error [$injector:modulerr] Failed to instantiate module kibana due to: Error: [$injector:modulerr] Failed to instantiate module app/wazuh due to: TypeError: Cannot read property 'otherwise' of undefined of the previous comment was solved, the $urlRouterProvider was not injected that's why it was undefined.

[adri9valle]

Update

I've made that a simple route works:

The resolve is executed properly:

But when trying to load the template fails:

I'm trying to solve this.

[adri9valle]

Update

The templateUrl parameter fails because expects a file, but we are using:

import devToolsTemplate from '../templates/dev-tools/dev-tools.html';

And when using devToolsTemplate variable in the templateUrl this var contains the HTML code not the link to the file.

If I use the path ../templates/dev-tools/dev-tools.html' still generating an error because the file is not found:

[adri9valle]

Update

I've been experimenting with JQuery in order to append to the Kibana navbar a div with the wz-menu below it.

This menu won't disappear when changing the view but we have a problem, the menu is not now in the scope of angularjs and is necessary to change its logic.

[adri9valle]

Update

Now is possible to navigate without losing the wz-menu but the previously commented problems persist:

[adri9valle]

Update

The menu does not disappear while changing view only the select API and index pattern for a while.

NOTE: Missing icons.

[adri9valle]

Update

The logic which makes that the wz-menu does not disappear was exported to an external file in order to clean the app.js.

Now only is necessary to import a function and execute it:

import { changeNavBar } from './utils/pin-wz-menu.js';

[adri9valle]

Update 30.07.19

I merged with 3.10-7.2 and resolved the conflicts. Also, I adapted to the dark mode theme and test it in the following browsers:

• Google chrome.
• Mozilla firefox.

[juankaromo]

Update 13/08/2019

All previous logic has been deleted. We have abandoned the solution approach using jQuery.

What has been done now is to use Kibana's setRootTemplate method. This method alters the root template through which the plugin is instantiated. This root template simply consists of an <ng-view> that loads the angular application and is affected by the routing module.

The solution we are going to adopt then is to take the wz-menu directive out of this ng-view, so it will not be affected when changing the route.

This is done here:

https://github.com/wazuh/wazuh-kibana-app/blob/7568e6d88a3d20ab4658140d94c2f78c350a4974/public/app.js#L91-L94

And that's what it looks like now:

[juankaromo]

Update 14/08/2019

Today I've fixed some minor things:

• Now, when we enter for the first time to de app, the suitable section is set as active in the wz-menu (first access or healt-check -> Overview, F5 o refresh the page -> previous location).
• Now, the wz-menu is not being shown when health-check is performing.
• I fixed some styles to adapt it to all browsers.
• Wazuh logos have been changed to adapt them to the new corporative colors.

[jesusgn90]

I've already merged (revert) #1558 @juankaromo but we still need some changes before closing this ticket:

1. Keep the old background color for the app.
2. Fix the menu size, not it differs from the Kibana left menu alignment, this was fixed previously and broken here.
3. Keep the health check sizes, as usual, the new logo is cool, but the size of it, and the size of the checks are not fine.
4. Fix the pattern selector, it's now broken

[juankaromo]

Hi @jesusgn90

1, 2 and 3 have been solved here: 513162c

4 I have not been able to replicate it. I will continue to investigate and debugging it.

[juankaromo]

Update

The 4th point has been fixed calling the initialization of the wz-menu controller after the main app.js execution, in order to load the menu data when the app is already loaded.