Added marvel.navigation

This commit is contained in:
Rashid Khan 2014-01-21 11:42:17 -07:00
parent a29141d142
commit c37ffaeff9
12 changed files with 276 additions and 3 deletions

View file

@ -256,6 +256,11 @@
"timefield": "@timestamp",
"now": true,
"filter_id": 0
},
{
"type": "marvel.navigation",
"source": "url",
"url": "app/panels/marvel/navigation/marvelLinks.json"
}
],
"loader": {

View file

@ -42,6 +42,16 @@ dashboard.index = {
dashboard.refresh="1m";
dashboard.nav = [
{
type:'timepicker'
},
{
type: "marvel.navigation",
source: "url",
url: "app/panels/marvel/navigation/marvelLinks.json"
}
];
// In this dashboard we let users pass nodes as comma seperated list to the query parameter.
// If nodes are defined, split into a list of query objects, otherwise, show all

View file

@ -42,6 +42,18 @@ dashboard.index = {
dashboard.refresh = "1m";
dashboard.nav = [
{
type:'timepicker'
},
{
type: "marvel.navigation",
source: "url",
url: "app/panels/marvel/navigation/marvelLinks.json"
}
];
// In this dashboard we let users pass nodes as comma seperated list to the query parameter.
// If nodes are defined, split into a list of query objects, otherwise, show all
// NOTE: ids must be integers, hence the parseInt()s

View file

@ -378,7 +378,6 @@
"collapse": false,
"notice": false,
"enable": true,
"status": "Stable",
"time_options": [
"5m",
"15m",
@ -405,6 +404,11 @@
"timefield": "@timestamp",
"now": true,
"filter_id": 0
},
{
"type": "marvel.navigation",
"source": "url",
"url": "app/panels/marvel/navigation/marvelLinks.json"
}
],
"loader": {

View file

@ -1298,6 +1298,11 @@
"timefield": "@timestamp",
"now": true,
"filter_id": 1
},
{
"type": "marvel.navigation",
"source": "url",
"url": "app/panels/marvel/navigation/marvelLinks.json"
}
],
"loader": {

View file

@ -2,11 +2,31 @@
<h2>Welcome to Elasticsearch Marvel</h2>
<div>
You're all set up! In case you need some help you can always visit
<p>
You're all set up! If you need a bit of help you can always visit
TODO: ADD URL HERE
<br/>
<p/>
<h5>A humble request</h5>
<p>The dev team humbly asks for your help in making Elasticsearch even better.<p>
<p>You can make a valuable contribution to improving Elasticsearch by periodically sharing cluster statistics with us. The information is 100% anonymous and we will never share your stats reports with any third parties.
To view a sample report, <span class="link" ng-click="showSample=true">click here</span>.</p>
<p>Your help is very much appreciated and makes all the difference to us.</p>
<p>Enjoy Marvel!</p>
<p>Many thanks,<br>
@Kimchy & The Elasticsearch Dev Team</p>
<div ng-show="showSample">
<h5>Sample Statistics</h5>
<pre>{{ data | json }}</pre>
</div>
<!--
<h5>Cluster statistics</h5>
Help improve Elasticsearch by reporting <strong>anonymous</strong>
@ -19,6 +39,7 @@
<pre>{{ data | json }}</pre>
</div>
</div>
-->
</div>
<div class="modal-footer">

View file

@ -0,0 +1,78 @@
<div class="modal-body">
<style>
.timepicker-to-column {
margin-top: 10px;
}
.timepicker-input input {
outline: 0 !important;
border: 0px !important;
-webkit-box-shadow: 0;
-moz-box-shadow: 0;
box-shadow: 0;
position: relative;
}
.timepicker-input input::-webkit-outer-spin-button,
.timepicker-input input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input.timepicker-date {
width: 90px;
}
input.timepicker-hms {
width: 20px;
}
input.timepicker-ms {
width: 25px;
}
div.timepicker-now {
float: right;
}
</style>
<div class="timepicker form-horizontal">
<form name="input">
<div class="timepicker-from-column">
<label class="small">From</label>
<div class="fake-input timepicker-input">
<input class="timepicker-date" type="text" ng-change="validate(temptime)" ng-model="temptime.from.date" data-date-format="yyyy-mm-dd" required bs-datepicker />@
<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.from.hour" required ng-pattern="patterns.hour" onClick="this.select();"/>:
<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.from.minute" required ng-pattern="patterns.minute" onClick="this.select();"/>:
<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.from.second" required ng-pattern="patterns.second" onClick="this.select();"/>.
<input class="timepicker-ms" type="text" maxlength="3" ng-change="validate(temptime)" ng-model="temptime.from.millisecond" required ng-pattern="patterns.millisecond" onClick="this.select();"/>
</div>
</div>
<div class="timepicker-to-column">
<label class="small">To (<a class="link" ng-class="{'strong':panel.now}" ng-click="setNow();panel.now=true">now</a>)</label>
<div class="fake-input timepicker-input">
<div ng-hide="panel.now">
<input class="timepicker-date" type="text" ng-change="validate(temptime)" ng-model="temptime.to.date" data-date-format="yyyy-mm-dd" required bs-datepicker />@
<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.to.hour" required ng-pattern="patterns.hour" onClick="this.select();"/>:
<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.to.minute" required ng-pattern="patterns.minute" onClick="this.select();"/>:
<input class="timepicker-hms" type="text" maxlength="2" ng-change="validate(temptime)" ng-model="temptime.to.second" required ng-pattern="patterns.second" onClick="this.select();"/>.
<input class="timepicker-ms" type="text" maxlength="3" ng-change="validate(temptime)" ng-model="temptime.to.millisecond" required ng-pattern="patterns.millisecond" onClick="this.select();"/>
</div>
<span type="text" ng-show="panel.now" ng-disabled="panel.now">&nbsp <i class="pointer icon-remove-sign" ng-click="setNow();panel.now=false"></i> Right Now <input type="text" name="dummy" style="visibility:hidden" /></span>
</div>
</div>
</form>
<div class="clearfix"></div>
</div>
</div>
<div class="modal-footer">
<form name="input" style="margin-bottom:0">
<span class="" ng-hide="input.$valid">Invalid date or range</span>
<button ng-click="setAbsoluteTimeFilter(validate(temptime));dismiss();" ng-disabled="!input.$valid" class="btn btn-success">Apply</button>
<button ng-click="dismiss();" class="btn btn-danger">Cancel</button>
</form>
</div>

View file

@ -0,0 +1,16 @@
<div class="editor-row">
<div class="section">
<div class="editor-option">
<label class="small">Relative time options <small>comma seperated</small></label>
<input type="text" array-join class="input-large" ng-model="panel.time_options">
</div>
<div class="editor-option">
<label class="small">Auto-refresh options <small>comma seperated</small></label>
<input type="text" array-join class="input-large" ng-model="panel.refresh_intervals">
</div>
<div class="editor-option">
<label class="small">Time Field</label>
<input type="text" class="input-small" ng-model="panel.timefield">
</div>
</div>
</div>

View file

@ -0,0 +1,12 @@
{
"links": [
{
"name": "Google",
"url": "http://google.com"
},
{
"name": "Yahoo",
"url": "http://yahoo.com"
}
]
}

View file

@ -0,0 +1,25 @@
<div ng-controller='marvel.navigation' ng-init="init()">
<style>
.marvel-navigation-dropdown {
margin: 0px !important;
}
</style>
<!-- This is a complete hack. The form actually exists in the modal, but due to transclusion
$scope.input isn't available on the controller unless the form element is in this file -->
<form name="input" style="margin:3px 0 0 0">
<ul class="nav nav-pills marvel-navigation-dropdown">
<li class="dropdown">
<a class="dropdown-toggle marvel-navigation-dropdown" data-toggle="dropdown" href="" bs-tooltip="'Goto'" data-placement="bottom" ng-click="dismiss();">
<i ng-class="panel.icon"></i>
</a>
<ul class="dropdown-menu">
<li ng-repeat='link in links track by $index'>
<a ng-href="{{link.url}}">{{link.name}}</a>
</li>
</ul>
</li>
</ul>
</form>
</div>

View file

@ -0,0 +1,80 @@
/** @scratch /panels/5
* include::panels/marvel.navigation.asciidoc[]
*/
/** @scratch /panels/marvel.navigation/0
* == marvel.navigation
* Status: *Experimental*
*
* This simple nav panel lives in the nav bar with the timepicker. It can be used to store a list of
* links
*
*/
define([
'angular',
'app',
'underscore',
],
function (angular, app, _) {
'use strict';
var module = angular.module('kibana.panels.marvel.navigation', []);
app.useModule(module);
module.controller('marvel.navigation', function($scope, $http) {
$scope.panelMeta = {
status : "Experimental",
description : "A simple dropdown panel with a list of links"
};
// Set and populate defaults
var _d = {
/** @scratch /panels/marvel.navigation/5
* === Parameters
*
* source:: 'panel' or 'url'.
*/
source: 'panel',
/** @scratch /panels/marvel.navigation/5
* links:: An array containing link objects similar to the following example. Only used if
* source is set to "panel"
*
* [source,javascript]
* ----
* {
* url: 'index.html#dashboard/file/mydashboard.json'
* name: 'Some route'
* }
* ----
*
*/
links: [],
/** @scratch /panels/marvel.navigation/5
* url:: File at URL should contain JSON in the same structure as the panel.links object.
*/
url: undefined,
/** @scratch /panels/marvel.navigation/5
* icon:: A font-awesome icon to use for this list of links
*/
icon: "icon-globe",
};
_.defaults($scope.panel,_d);
$scope.init = function() {
if($scope.panel.source === 'panel') {
$scope.links = $scope.panel.links;
}
if($scope.panel.source === 'url') {
$http.get($scope.panel.url).then(function(response) {
console.log(response);
$scope.links = response.data.links;
});
}
};
});
});

View file

@ -0,0 +1,5 @@
<form name="refreshPopover" class='form-inline input-append' style="margin:0px">
<label><small>Interval (seconds)</small></label><br>
<input type="number" class="input-mini" ng-model="refresh_interval">
<button type="button" class="btn" ng-click="set_interval(refresh_interval);dismiss()"><i class="icon-ok"></i></button>
</form>