I am attempting to add a welcome/intro page to Kibana 4 and need to modify the navigation menu. I have found the navigation source html document at /src/kibana/plugins/kibana/kibana.html but cannot figure out where the tab names are being injected from.
Here is the list code block where the call is being made:
<li ng-repeat="app in apps.inOrder | filter:{show: true}" ng-class="{active: activeApp === app}">
<a ng-href="#{{app.lastPath}}" bo-text="app.name"></a>
</li>
Which correlates to the words "Discover", "Visualize", "Dashboard", and "Settings" as shown here:
http://www.elasticsearch.org/content/uploads/2014/10/Screen-Shot-2014-09-30-at-4.07.15-PM.png
I would expect there to be a configuration file, but I can't seem to find it...
I added a page in Kibana 4.1.1 like this:
copy src/kibana/plugins/settings to src/kibana/plugins/help
remove
src/kibana/plugins/help/styles
src/kibana/plugins/help/saved_object_registry.js
src/kibana/plugins/help/sections/advanced
src/kibana/plugins/help/sections/indices
src/kibana/plugins/help/sections/objects
Then I refactored all code inside src/kibana/plugins/help (replace settings with help).
Surely not the easiest way of doing things, and very much not endorsed by elastic.co. I hope a supported way of doing things will not be too far away.
Related
I am writing a suite of automated UI tests. I have a set of tests that verifies the links in a navbar work correctly, they take an annoying long time because it's loading 2 pages per test and there are many links in the nav bar. I am wondering if it is necessary to actually click the links?
One of the links would look like this, they're all basically the same, all contained inside a list of of <li> elements:
<a href="/projects/7d9162e5-e59c-452e-b9f5-684a2e0f2924/home" data-reactid=".0.2.0.0.0.$0.0">
<span class="icon icon-home" data-reactid=".0.2.0.0.0.$0.0.0"></span>
<span class="label" data-reactid=".0.2.0.0.0.$0.0.1">Home</span>
</a>
I could grab the content from the href attribute and request the page programmatically (don't load it in the browser) to assert that the href is correct and this would be significantly faster.
Is there any chance that an element could have an href attribute that points to the page as expected, but for whatever reason clicking on this element could be broken?
This might be the solution that you are looking for:
Link to Page
That code would append the href attribute as text to the body every time a link was clicked but not actually go to that link. The return false; part of that code prevents the browser from performing the default action for that link. That exact thing could be written like this:
$("a").click(function(e) {
$("body").append($(this).attr("href"));
e.preventDefault();
}
By taking the href content, you might risk that your automation passes test even though the navbar link does not work. It could be that navbar link was disabled by mistake, but as the link is still present in the DOM your automation will not capture it.
Just my 10 cents...
I'd like to make a table of content for this web page I am making (the project is still offline for the time being).
Now I already know most of what I have to do (text boxes, lists, the CSS, etc) however I don't want the links going to new pages but rather it send the user to certain parts of the page like in a wiki.
Any idea on how one would code something like that?
Like this:
Jump to a section
Then in the location to jump to:
<a name="jump"></a>
You can use anchor link (or bookmarks)
The code will be:
<a href="#my-div>Link to 'my div'</a>
<div id="my-div"></div>
That link will scroll the page until the element with the corresponding ID
Someone was able to so quickly help me with a problem I'd spent hours and hours on, that I'm hoping I'll get lucky and someone can point me in the right direction on this one, too.
I didn't see anyone else with quite my issue here - and I'm new to working with WP templates instead of plain old HTML/CSS/JS stuff.
Basically - on a site we did (www.opted.org) with a purchased WP theme - I can't get the mobile version collapsible menu to stop defaulting on page load to the last item in the Main Menu.
So instead of something that makes sense - like About ASCO, or even being able to add "Select Page" - the drop down shows "-- past issues"
I don't care how I fix it really, but the client just doesn't want that page to be the default. I tried adding an extra menu item at the end called "Select Page" with an href='#' and using CSS to hide it on screens above 480px - but I couldn't get it to work no matter how I tried to refer to it.
I feel like this should be easy - but I don't know where to set the selected LI among the many WP files.
Thanks!!
I had a look at the plugin.js file on the site www.opted.org.
On line 22, there is 'header' : false // Boolean: Show header instead of the active item
and on line 41 there is jQuery('<option/>').text('Navigation')
Try setting line 22 to true, and text('Navigation') to your 'Select Page' if you prefer that over the text 'Navigation'
Or, according to the tinynav.js page (http://tinynav.viljamis.com/), you can customize that as an option like this:
$("#nav").tinyNav({
active: 'selected', // String: Set the "active" class
header: 'Navigation', // String: Specify text for "header" and show header instead of the active item
label: '' // String: Sets the <label> text for the <select> (if not set, no label will be added)
});
In your main.js file, your calling it on line 14. You should add that header: 'Navigation', option there.
It's hard to answer this question without knowing how the theme you are using works. However, you can certainly change the selected attribute using javascript.
Here's the code you would use to set it to 'About Asco' using jQuery:
jQuery('.tinynav').val('/about-asco/')
alternatively (a little clearer, but more verbose):
jQuery('.tinynav option:first').prop('selected', true);
I'm writing an application, a reporter with heirarchy of folders and files, in the lower heirarchy level there are 2 types of reports: the simple one is a flat (non link) report that being presented as a single simple line.
the second type is a link with a general description in the header and if you press the link you get a full report.
example: if I run a telnet command, I will see the command in the header and if I want to see the entire session with the device I will press the link and it will be presented.
My problem is that most of this lined-files are small but the OS reserve a minimum space for every file so I loss alot of disk space for nothing.
The solution I want to implement is a "dummy" links, which will be presented and will behave like a regular links but actually will be stored in the same file like their "parent" (probably with alot of other links like them).
The solutions I saw so far are only for "jumping" inside a page but this is not what I'm looking for, I want it to be presented like a seperated file and I dont want the "parent" file to present this information at all (the only way to see it will be by pressing the link and even then it will present only this information and not the other file content).
any idea guys?
To link to a specific part in a web page, place an anchor link where you want the user to go to when they click a link with:
<a name="anchor"></a>
and link to it with:
Click here
You can replace "anchor" with a more descriptive name if needed.
To hide/show a div (the following code is untested, but should work)
JQuery solution (If you're using JQuery):
function toggle(divname) {
$(divname).toggle();
}
The corresponding HTML:
<div id="content">some content</div>
<a onclick="toggle('content')">Click here to show/hide the content div!</a>
Non-JQuery Solution:
function toggle(divname) {
var adiv = document.getElementById(divname);
if (adiv.style.display === 'block' || adiv.style.display === '') {
adiv.style.display = 'none';
} else {
adiv.style.display = 'block'
}
}
The HTML:
<div style="display:hidden" id="content">Content</div>
<a onclick="toggle('content')">Click here to show/hide the content div!</a>
Is it possible to force the sitemap control to render the menu when the current action is not listed in the MVC.sitemap file?
I have a simple top nav. When the current action is in the sitemap, the call to .Menu() will render the correct <ul><li>.. data. However, if I got to a page that is not in the sitemap such as /Home/Login, then it will not render any html at all (not even a comment, just empty space). This isn't an [authorize] issue; the menu is fine when i'm in '/Home/Index'.
It seems like it should render what was requested, but just not set the IsCurrentNode and IsNodeInPath properties. Here is the call I am making
<div id="main-nav">
#Html.MvcSiteMap().Menu(0, true, true, 1)
</div>
The Mvc.sitemap file:
<mvcSiteMapNode title="Home" controller="Home" action="Index">
<mvcSiteMapNode title="Form New Human" controller="Person" action="Create"/>
<!-- there is no mvcSiteMapNode for "Home" "Login" -->
</mvcSiteMapNode>
Found the way around it. It apparently isn't a built in extension method, or at least I couldn't find one. You could call Html.MvcSitemap().Menu(Html.MvcSiteMap.Provider.RootNode,...) but I didn't want to instantiate the helper twice.
<div id="main-nav">
#{
var sm = Html.MvcSiteMap();
#sm.Menu(sm.Provider.RootNode, true, true, 2); // 2 levels (home, plus main nav)
}
</div>
Looking around in the disassembly seems to show that it works a little like this:
You really need a starting node
If you don't give it one, it tries to find one based on the current node
plus restrictions (forward searching, depth restrictions, etc)
if you want nodes from level 1, you have to know what level you are on
Since that returns null, starting node is null, which means the helper writes an empty string
There may be a combination of tricks, or an overload or two, which can be finagled into doing this, but I can't find it right now. This works for my needs (simple top menu). There has to be a simpler way to do this, something with wild cards, or route based, with a closest match thing going on. I figured menus were a fairly standard part of a web app, and this would be covered :)