Complete Bootstrap 3 conversion.
- use the autocomplete plugin from https://github.com/bassjobsen/Bootstrap-3-Typeahead - use native Bootstrap tabs - make everything look much nicer (hopefully) - other minor fixes/additions
This commit is contained in:
Julius Volz
parent
ff5eeb49fa
commit
d96d4933d9
|
|
@ -2,12 +2,7 @@ body {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
a { color: black; }
|
||||
a:hover { color: gray; }
|
||||
a:active { color: black; }
|
||||
|
||||
.eval_stats {
|
||||
float: right;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
|
|
@ -15,30 +10,37 @@ a:active { color: black; }
|
|||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.graph_wrapper .input-append, .graph_wrapper select {
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.graph_container {
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
.graph {
|
||||
position: relative;
|
||||
left: 40px;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
#add_graph {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.nav-tabs > li > a {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.tab-pane {
|
||||
border-left: 1px solid #ddd;
|
||||
border-right: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.graph svg {
|
||||
border-top: 1px solid #aaa;
|
||||
border-right: 1px solid #aaa;
|
||||
border-bottom: 1px solid #aaa;
|
||||
}
|
||||
|
||||
#add_graph {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.legend {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
|
|
@ -92,10 +94,6 @@ a:active { color: black; }
|
|||
margin: 2px 2px 0 8px;
|
||||
}
|
||||
|
||||
.refresh_interval {
|
||||
width: 102px
|
||||
}
|
||||
|
||||
input[title=*]:hover:after {
|
||||
content: attr(title);
|
||||
}
|
||||
|
|
@ -110,38 +108,14 @@ input[title=*]:hover:after {
|
|||
}
|
||||
|
||||
.console_table {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.ui-widget {
|
||||
margin: 5px 0px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
span.input-append {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
select name="insert_metric" {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.ui-tabs .ui-tabs-panel {
|
||||
display: block;
|
||||
border-width: 0;
|
||||
padding: .5em 1em;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.ui-tabs .ui-tabs-nav li {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 11pt;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
#graph_container .grouping_box {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
|
||||
.config button {
|
||||
|
|
@ -175,56 +149,28 @@ select name="insert_metric" {
|
|||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.config label.checkbox {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.grouping_box {
|
||||
position: relative;
|
||||
padding: 0 5px 0 5px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
margin: 0 8px 2px 8px;
|
||||
}
|
||||
|
||||
.grouping_box .head, .eval_stats {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.grouping_box .head .opts {
|
||||
float: right;
|
||||
}
|
||||
|
||||
input[name="end_input"], input[name="range_input"] {
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
margin-left: -1px;
|
||||
margin-right: -1px;
|
||||
}
|
||||
|
||||
.error {
|
||||
padding: 5px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.btn, .form-control {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.square_corners {
|
||||
.btn, .form-control, .nav-tabs > li > a {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.prometheus_input_group {
|
||||
display: inline-block;
|
||||
margin: 10px 0;
|
||||
margin: 10px 10px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.prometheus_input_group .prometheus_checkbox {
|
||||
height: 25px;
|
||||
line-height: 2;
|
||||
.prometheus_input_group .btn {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.prometheus_input_group .input {
|
||||
|
|
@ -248,12 +194,22 @@ input[name="end_input"], input[name="range_input"] {
|
|||
width: 200px;
|
||||
}
|
||||
|
||||
.expression_input_group {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.expression_input_group .input-group-btn {
|
||||
/* Without this, the .input-group-btn has "width: auto" and extends to the
|
||||
* right past the contained button's width */
|
||||
width: 1px !important;
|
||||
}
|
||||
|
||||
.form-group .input-group .expression_input {
|
||||
width: 450px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.expression_select {
|
||||
max-width: 350px;
|
||||
width: 210px !important;
|
||||
}
|
||||
|
||||
.graph_container .rickshaw_legend {
|
||||
|
|
|
|||
|
|
@ -1,23 +1,3 @@
|
|||
// Graph options we might want:
|
||||
// Grid off/on
|
||||
// Stacked off/on
|
||||
// Area off/on
|
||||
// Legend position
|
||||
// Short link
|
||||
// Graph title
|
||||
// Palette
|
||||
// Background
|
||||
// Enable tooltips
|
||||
// width/height
|
||||
// Axis options
|
||||
// Y-Range min/max
|
||||
// (X-Range min/max)
|
||||
// X-Axis format
|
||||
// Y-Axis format
|
||||
// Y-Axis title
|
||||
// X-Axis title
|
||||
// Log scale
|
||||
|
||||
var Prometheus = Prometheus || {};
|
||||
var graphs = [];
|
||||
var graphTemplate;
|
||||
|
|
@ -57,7 +37,6 @@ Prometheus.Graph.prototype.initialize = function() {
|
|||
// Set default options.
|
||||
self.options["id"] = self.id;
|
||||
self.options["range_input"] = self.options["range_input"] || "1h";
|
||||
self.options["stacked_checked"] = self.options["stacked"] ? "checked" : "";
|
||||
if (self.options["tab"] === undefined) {
|
||||
self.options["tab"] = 1;
|
||||
}
|
||||
|
|
@ -72,24 +51,24 @@ Prometheus.Graph.prototype.initialize = function() {
|
|||
var graphWrapper = self.el.find("#graph_wrapper" + self.id);
|
||||
self.queryForm = graphWrapper.find(".query_form");
|
||||
self.expr = graphWrapper.find("input[name=expr]");
|
||||
self.expr.change(storeGraphOptionsInURL);
|
||||
self.rangeInput = self.queryForm.find("input[name=range_input]");
|
||||
self.stackedBtn = self.queryForm.find(".stacked_btn");
|
||||
self.stacked = self.queryForm.find("input[name=stacked]");
|
||||
self.insertMetric = self.queryForm.find("select[name=insert_metric]");
|
||||
self.refreshInterval = self.queryForm.find("select[name=refresh]");
|
||||
|
||||
self.consoleTab = graphWrapper.find(".console");
|
||||
self.graphTab = graphWrapper.find(".graph_container");
|
||||
self.tabs = graphWrapper.find(".tabs");
|
||||
self.tab = $(self.tabs.find("> div")[self.options["tab"]]); // active tab
|
||||
|
||||
self.tabs.tabs({
|
||||
active: self.options["tab"],
|
||||
activate: function(e, ui) {
|
||||
storeGraphOptionsInUrl();
|
||||
self.tab = ui.newPanel;
|
||||
if (self.tab.hasClass("reload")) { // reload if flagged with class "reload"
|
||||
self.submitQuery();
|
||||
}
|
||||
self.tabs = graphWrapper.find("a[data-toggle='tab']");
|
||||
self.tabs.eq(self.options["tab"]).tab("show");
|
||||
self.tabs.on("shown.bs.tab", function(e) {
|
||||
var target = $(e.target);
|
||||
self.options["tab"] = target.parent().index();
|
||||
storeGraphOptionsInURL();
|
||||
if ($("#" + target.attr("aria-controls")).hasClass("reload")) {
|
||||
self.submitQuery();
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -101,7 +80,7 @@ Prometheus.Graph.prototype.initialize = function() {
|
|||
return e.preventDefault();
|
||||
})
|
||||
|
||||
self.error = graphWrapper.find(".error");
|
||||
self.error = graphWrapper.find(".error").hide();
|
||||
self.graph = graphWrapper.find(".graph");
|
||||
self.yAxis = graphWrapper.find(".y_axis");
|
||||
self.legend = graphWrapper.find(".legend");
|
||||
|
|
@ -120,7 +99,30 @@ Prometheus.Graph.prototype.initialize = function() {
|
|||
self.endDate.change(function() { self.submitQuery() });
|
||||
self.refreshInterval.change(function() { self.updateRefresh() });
|
||||
|
||||
self.stacked.change(function() { self.updateGraph(); });
|
||||
self.isStacked = function() {
|
||||
return self.stacked.val() === '1';
|
||||
};
|
||||
|
||||
var styleStackBtn = function() {
|
||||
var icon = self.stackedBtn.find('.glyphicon');
|
||||
if (self.isStacked()) {
|
||||
self.stackedBtn.addClass("btn-primary");
|
||||
icon.addClass("glyphicon-check");
|
||||
icon.removeClass("glyphicon-unchecked");
|
||||
} else {
|
||||
self.stackedBtn.removeClass("btn-primary");
|
||||
icon.addClass("glyphicon-unchecked");
|
||||
icon.removeClass("glyphicon-check");
|
||||
}
|
||||
};
|
||||
styleStackBtn();
|
||||
|
||||
self.stackedBtn.click(function() {
|
||||
self.stacked.val(self.isStacked() ? '0' : '1');
|
||||
styleStackBtn();
|
||||
self.updateGraph();
|
||||
});
|
||||
|
||||
self.queryForm.submit(function() {
|
||||
self.consoleTab.addClass("reload");
|
||||
self.graphTab.addClass("reload");
|
||||
|
|
@ -161,7 +163,7 @@ Prometheus.Graph.prototype.populateInsertableMetrics = function() {
|
|||
self.insertMetric[0].options.add(new Option(json[i], json[i]));
|
||||
availableMetrics.push(json[i]);
|
||||
}
|
||||
self.expr.autocomplete({source: availableMetrics});
|
||||
self.expr.typeahead({source: availableMetrics});
|
||||
},
|
||||
error: function() {
|
||||
self.showError("Error loading available metrics!");
|
||||
|
|
@ -188,14 +190,10 @@ Prometheus.Graph.prototype.getOptions = function() {
|
|||
self.queryForm.find("input").each(function(index, element) {
|
||||
var name = element.name;
|
||||
if ($.inArray(name, optionInputs) >= 0) {
|
||||
if (name == "stacked") {
|
||||
options[name] = element.checked;
|
||||
} else {
|
||||
options[name] = element.value;
|
||||
}
|
||||
options[name] = element.value;
|
||||
}
|
||||
});
|
||||
options["tab"] = self.tabs.tabs("option", "active");
|
||||
options["tab"] = self.options["tab"];
|
||||
return options;
|
||||
};
|
||||
|
||||
|
|
@ -299,7 +297,7 @@ Prometheus.Graph.prototype.submitQuery = function() {
|
|||
}
|
||||
var url;
|
||||
var success;
|
||||
if (self.tab[0] == self.graphTab[0]) {
|
||||
if (self.options["tab"] === 0) {
|
||||
url = self.queryForm.attr("action");
|
||||
success = function(json, textStatus) { self.handleGraphResponse(json, textStatus); };
|
||||
} else {
|
||||
|
|
@ -414,7 +412,7 @@ Prometheus.Graph.prototype.showGraph = function() {
|
|||
element: self.graph[0],
|
||||
height: Math.max(self.graph.innerHeight(), 100),
|
||||
width: Math.max(self.graph.innerWidth() - 80, 200),
|
||||
renderer: (self.stacked.is(":checked") ? "stack" : "line"),
|
||||
renderer: (self.isStacked() ? "stack" : "line"),
|
||||
interpolation: "linear",
|
||||
series: self.data,
|
||||
min: "auto",
|
||||
|
|
@ -442,7 +440,7 @@ Prometheus.Graph.prototype.updateGraph = function(reloadGraph) {
|
|||
self.showGraph();
|
||||
} else {
|
||||
self.rickshawGraph.configure({
|
||||
renderer: (self.stacked.is(":checked") ? "stack" : "line"),
|
||||
renderer: (self.isStacked() ? "stack" : "line"),
|
||||
interpolation: "linear",
|
||||
series: self.data
|
||||
});
|
||||
|
|
@ -530,13 +528,21 @@ Prometheus.Graph.prototype.handleConsoleResponse = function(data, textStatus) {
|
|||
|
||||
switch(data.Type) {
|
||||
case "vector":
|
||||
if (data.Value.length === 0) {
|
||||
tBody.append("<tr><td colspan='2'><i>no data</i></td></tr>")
|
||||
return;
|
||||
}
|
||||
for (var i = 0; i < data.Value.length; i++) {
|
||||
var v = data.Value[i];
|
||||
var tsName = self.metricToTsName(v.Metric);
|
||||
tBody.append("<tr><td>" + escapeHTML(tsName) + "</td><td>" + v.Value + "</td></tr>")
|
||||
tBody.append("<tr><td>" + escapeHTML(tsName) + "</td><td>" + v.Value + "</td></tr>");
|
||||
}
|
||||
break;
|
||||
case "matrix":
|
||||
if (data.Value.length === 0) {
|
||||
tBody.append("<tr><td colspan='2'><i>no data</i></td></tr>")
|
||||
return;
|
||||
}
|
||||
for (var i = 0; i < data.Value.length; i++) {
|
||||
var v = data.Value[i];
|
||||
var tsName = self.metricToTsName(v.Metric);
|
||||
|
|
@ -559,7 +565,7 @@ Prometheus.Graph.prototype.handleConsoleResponse = function(data, textStatus) {
|
|||
}
|
||||
}
|
||||
|
||||
function parseGraphOptionsFromUrl() {
|
||||
function parseGraphOptionsFromURL() {
|
||||
var hashOptions = window.location.hash.slice(1);
|
||||
if (!hashOptions) {
|
||||
return [];
|
||||
|
|
@ -570,7 +576,7 @@ function parseGraphOptionsFromUrl() {
|
|||
}
|
||||
|
||||
// NOTE: This needs to be kept in sync with rules/helpers.go:GraphLinkForExpression!
|
||||
function storeGraphOptionsInUrl() {
|
||||
function storeGraphOptionsInURL() {
|
||||
var allGraphsOptions = [];
|
||||
for (var i = 0; i < graphs.length; i++) {
|
||||
allGraphsOptions.push(graphs[i].getOptions());
|
||||
|
|
@ -583,7 +589,7 @@ function addGraph(options) {
|
|||
var graph = new Prometheus.Graph($("#graph_container"), options);
|
||||
graphs.push(graph);
|
||||
graph.onChange(function() {
|
||||
storeGraphOptionsInUrl();
|
||||
storeGraphOptionsInURL();
|
||||
});
|
||||
$(window).resize(function() {
|
||||
graph.resizeGraph();
|
||||
|
|
@ -614,7 +620,7 @@ function init() {
|
|||
url: "/static/js/graph_template.handlebar",
|
||||
success: function(data) {
|
||||
graphTemplate = Handlebars.compile(data);
|
||||
var options = parseGraphOptionsFromUrl();
|
||||
var options = parseGraphOptionsFromURL();
|
||||
if (options.length == 0) {
|
||||
options.push({});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,123 +1,133 @@
|
|||
<div id="graph_wrapper{{id}}" class="graph_wrapper">
|
||||
<form action="/api/query_range" method="GET" class="query_form form-inline">
|
||||
<div class="grouping_box square_corners">
|
||||
<div class="head">
|
||||
<div class="form-group">
|
||||
<span class="input-group">
|
||||
<input placeholder="Expression" type="text" name="expr" id="expr{{id}}" value="{{expr}}" class="form-control expression_input">
|
||||
<span class="input-group-btn">
|
||||
<input class="btn btn-primary" type="submit" value="Execute" name="submit">
|
||||
</span>
|
||||
<div class="row">
|
||||
<div class="col-lg-10">
|
||||
<span class="input-group expression_input_group">
|
||||
<input placeholder="Expression" type="text" name="expr" id="expr{{id}}" value="{{expr}}" class="form-control expression_input" data-provide="typeahead" autocomplete="off">
|
||||
<span class="input-group-btn">
|
||||
<input class="btn btn-primary execute_btn" type="submit" value="Execute" name="submit">
|
||||
</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<select class="form-control expression_select" name="insert_metric">
|
||||
<option value="">- Insert Metric at Cursor -</option>
|
||||
</select>
|
||||
</div>
|
||||
</span>
|
||||
<select class="form-control expression_select" name="insert_metric">
|
||||
<option value="">- Insert Metric at Cursor -</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-lg-2">
|
||||
<div class="eval_stats pull-right"></div>
|
||||
<img src="/static/img/ajax-loader.gif" class="spinner" alt="ajax_spinner">
|
||||
</div>
|
||||
<div class="eval_stats"></div>
|
||||
<img src="/static/img/ajax-loader.gif" class="spinner" alt="ajax_spinner">
|
||||
<div class="error alert alert-error hide"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="error alert alert-danger"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--
|
||||
TODO: Convert this to Bootstrap navbar. This requires Javascript
|
||||
refresh.
|
||||
-->
|
||||
<div class="grouping_box tabs square_corners">
|
||||
<ul class="square_corners">
|
||||
<li class="square_corners"><a href="#graph{{id}}">Graph</a></li>
|
||||
<li class="square_corners"><a href="#console{{id}}">Tabular</a></li>
|
||||
</ul>
|
||||
<div id="graph{{id}}" class="graph_container reload">
|
||||
<div>
|
||||
<!-- Extracted to force grouped inputs. -->
|
||||
<input type="hidden" name="range">
|
||||
<div class="prometheus_input_group">
|
||||
<button
|
||||
class="btn btn-default pull-left"
|
||||
type="button"
|
||||
name="dec_range"
|
||||
title="Shrink the time range.">
|
||||
<i class="glyphicon glyphicon-minus"></i>
|
||||
</button>
|
||||
<input
|
||||
class="pull-left input"
|
||||
id="range_input{{id}}"
|
||||
title="Time range of graph"
|
||||
type="text"
|
||||
name="range_input"
|
||||
size="3"
|
||||
value="{{range_input}}">
|
||||
<button
|
||||
class="btn btn-default pull-left"
|
||||
type="button"
|
||||
name="inc_range"
|
||||
title="Grow the time range.">
|
||||
<i class="glyphicon glyphicon-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div role="tabpanel">
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li role="presentation"><a href="#graph{{id}}" aria-controls="graph{{id}}" role="tab" data-toggle="tab">Graph</a></li>
|
||||
<li role="presentation" class="active"><a href="#console{{id}}" aria-controls="console{{id}}" role="tab" data-toggle="tab">Console</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div role="tabpanel" class="tab-pane graph_container reload" id="graph{{id}}">
|
||||
<div>
|
||||
<!-- Extracted to force grouped inputs. -->
|
||||
<input type="hidden" name="range">
|
||||
<div class="prometheus_input_group">
|
||||
<button
|
||||
class="btn btn-default pull-left"
|
||||
type="button"
|
||||
name="dec_range"
|
||||
title="Shrink the time range.">
|
||||
<i class="glyphicon glyphicon-minus"></i>
|
||||
</button>
|
||||
<input
|
||||
class="pull-left input"
|
||||
id="range_input{{id}}"
|
||||
title="Time range of graph"
|
||||
type="text"
|
||||
name="range_input"
|
||||
size="3"
|
||||
value="{{range_input}}">
|
||||
<button
|
||||
class="btn btn-default pull-left"
|
||||
type="button"
|
||||
name="inc_range"
|
||||
title="Grow the time range.">
|
||||
<i class="glyphicon glyphicon-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Extracted to force grouped inputs. -->
|
||||
<input type="hidden" name="end">
|
||||
<div class="prometheus_input_group">
|
||||
<!-- Extracted to force grouped inputs. -->
|
||||
<input type="hidden" name="end">
|
||||
<div class="prometheus_input_group">
|
||||
|
||||
<button
|
||||
class="btn btn-default pull-left"
|
||||
type="button"
|
||||
name="dec_end"
|
||||
title="Rewind the end time.">
|
||||
<i class="glyphicon glyphicon-backward"></i>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-default pull-left"
|
||||
type="button"
|
||||
name="dec_end"
|
||||
title="Rewind the end time.">
|
||||
<i class="glyphicon glyphicon-backward"></i>
|
||||
</button>
|
||||
|
||||
<input
|
||||
class="pull-left date_input input"
|
||||
id="end{{id}}"
|
||||
title="End time of graph"
|
||||
placeholder="Until"
|
||||
data-format="yyyy-MM-dd"
|
||||
type="text"
|
||||
name="end_input"
|
||||
size="16"
|
||||
value="{{end}}">
|
||||
<input
|
||||
class="pull-left date_input input"
|
||||
id="end{{id}}"
|
||||
title="End time of graph"
|
||||
placeholder="Until"
|
||||
data-format="yyyy-MM-dd"
|
||||
type="text"
|
||||
name="end_input"
|
||||
size="16"
|
||||
value="{{end}}">
|
||||
|
||||
<button
|
||||
class="btn btn-default pull-left"
|
||||
type="button"
|
||||
name="inc_end"
|
||||
title="Advance the end time.">
|
||||
<i class="glyphicon glyphicon-forward"></i>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-default pull-left"
|
||||
type="button"
|
||||
name="inc_end"
|
||||
title="Advance the end time.">
|
||||
<i class="glyphicon glyphicon-forward"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="prometheus_input_group">
|
||||
<input class="input" title="Resolution in seconds" placeholder="Res. (s)" type="text" name="step_input" id="step_input{{id}}" value="{{step_input}}" size="6">
|
||||
<input type="hidden" name="step">
|
||||
</div>
|
||||
<div class="prometheus_input_group">
|
||||
<input class="input" title="Resolution in seconds" placeholder="Res. (s)" type="text" name="step_input" id="step_input{{id}}" value="{{step_input}}" size="6">
|
||||
<input type="hidden" name="step">
|
||||
</div>
|
||||
|
||||
<div class="prometheus_input_group">
|
||||
<label class="prometheus_checkbox">
|
||||
<input type="checkbox" name="stacked" {{stacked_checked}}>
|
||||
Stacked
|
||||
</label>
|
||||
<div class="prometheus_input_group">
|
||||
<button type="button" class="btn btn-default stacked_btn">
|
||||
<i class="glyphicon"></i> stacked
|
||||
</button>
|
||||
<input type="hidden" name="stacked" value="{{stacked}}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="graph_area">
|
||||
<div class="y_axis"></div>
|
||||
<div class="graph"></div>
|
||||
</div>
|
||||
<div class="legend"></div>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane active console reload" id="console{{id}}">
|
||||
<table class="table table-condensed table-hover console_table">
|
||||
<thead>
|
||||
<th>Element</th>
|
||||
<th>Value</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td colspan="2"><i>no data</i></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="graph_area">
|
||||
<div class="y_axis"></div>
|
||||
<div class="graph"></div>
|
||||
</div>
|
||||
<div class="legend"></div>
|
||||
</div>
|
||||
<div id="console{{id}}" class="console reload">
|
||||
<table class="table table-condensed table-bordered table-hover console_table">
|
||||
<thead>
|
||||
<th>Element</th>
|
||||
<th>Value</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 178 B |
Binary file not shown.
|
Before Width: | Height: | Size: 105 B |
Binary file not shown.
|
Before Width: | Height: | Size: 111 B |
Binary file not shown.
|
Before Width: | Height: | Size: 110 B |
Binary file not shown.
|
Before Width: | Height: | Size: 101 B |
|
|
@ -1,473 +0,0 @@
|
|||
/*! jQuery UI - v1.9.1 - 2012-10-25
|
||||
* http://jqueryui.com
|
||||
* Includes: jquery.ui.core.css, jquery.ui.accordion.css, jquery.ui.autocomplete.css, jquery.ui.button.css, jquery.ui.datepicker.css, jquery.ui.dialog.css, jquery.ui.menu.css, jquery.ui.progressbar.css, jquery.ui.resizable.css, jquery.ui.selectable.css, jquery.ui.slider.css, jquery.ui.spinner.css, jquery.ui.tabs.css, jquery.ui.tooltip.css, jquery.ui.theme.css
|
||||
* Copyright 2012 jQuery Foundation and other contributors; Licensed MIT */
|
||||
|
||||
/* Layout helpers
|
||||
----------------------------------*/
|
||||
.ui-helper-hidden { display: none; }
|
||||
.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }
|
||||
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
|
||||
.ui-helper-clearfix:before, .ui-helper-clearfix:after { content: ""; display: table; }
|
||||
.ui-helper-clearfix:after { clear: both; }
|
||||
.ui-helper-clearfix { zoom: 1; }
|
||||
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
|
||||
|
||||
|
||||
/* Interaction Cues
|
||||
----------------------------------*/
|
||||
.ui-state-disabled { cursor: default !important; }
|
||||
|
||||
|
||||
/* Icons
|
||||
----------------------------------*/
|
||||
|
||||
/* states and images */
|
||||
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
|
||||
|
||||
|
||||
/* Misc visuals
|
||||
----------------------------------*/
|
||||
|
||||
/* Overlays */
|
||||
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
|
||||
|
||||
.ui-accordion .ui-accordion-header { display: block; cursor: pointer; position: relative; margin-top: 2px; padding: .5em .5em .5em .7em; zoom: 1; }
|
||||
.ui-accordion .ui-accordion-icons { padding-left: 2.2em; }
|
||||
.ui-accordion .ui-accordion-noicons { padding-left: .7em; }
|
||||
.ui-accordion .ui-accordion-icons .ui-accordion-icons { padding-left: 2.2em; }
|
||||
.ui-accordion .ui-accordion-header .ui-accordion-header-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
|
||||
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; overflow: auto; zoom: 1; }
|
||||
|
||||
.ui-autocomplete {
|
||||
position: absolute;
|
||||
top: 0; /* #8656 */
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* workarounds */
|
||||
* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
|
||||
|
||||
.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
|
||||
.ui-button, .ui-button:link, .ui-button:visited, .ui-button:hover, .ui-button:active { text-decoration: none; }
|
||||
.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
|
||||
button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
|
||||
.ui-button-icons-only { width: 3.4em; }
|
||||
button.ui-button-icons-only { width: 3.7em; }
|
||||
|
||||
/*button text element */
|
||||
.ui-button .ui-button-text { display: block; line-height: 1.4; }
|
||||
.ui-button-text-only .ui-button-text { padding: .4em 1em; }
|
||||
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }
|
||||
.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
|
||||
.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; }
|
||||
.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
|
||||
/* no icon support for input elements, provide padding by default */
|
||||
input.ui-button { padding: .4em 1em; }
|
||||
|
||||
/*button icon element(s) */
|
||||
.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }
|
||||
.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }
|
||||
.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }
|
||||
.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
|
||||
.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
|
||||
|
||||
/*button sets*/
|
||||
.ui-buttonset { margin-right: 7px; }
|
||||
.ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; }
|
||||
|
||||
/* workarounds */
|
||||
button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */
|
||||
|
||||
.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; }
|
||||
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
|
||||
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
|
||||
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
|
||||
.ui-datepicker .ui-datepicker-prev { left:2px; }
|
||||
.ui-datepicker .ui-datepicker-next { right:2px; }
|
||||
.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
|
||||
.ui-datepicker .ui-datepicker-next-hover { right:1px; }
|
||||
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; }
|
||||
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
|
||||
.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
|
||||
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
|
||||
.ui-datepicker select.ui-datepicker-month,
|
||||
.ui-datepicker select.ui-datepicker-year { width: 49%;}
|
||||
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
|
||||
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; }
|
||||
.ui-datepicker td { border: 0; padding: 1px; }
|
||||
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
|
||||
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
|
||||
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
|
||||
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }
|
||||
|
||||
/* with multiple calendars */
|
||||
.ui-datepicker.ui-datepicker-multi { width:auto; }
|
||||
.ui-datepicker-multi .ui-datepicker-group { float:left; }
|
||||
.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
|
||||
.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
|
||||
.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
|
||||
.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
|
||||
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
|
||||
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
|
||||
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
|
||||
.ui-datepicker-row-break { clear:both; width:100%; font-size:0em; }
|
||||
|
||||
/* RTL support */
|
||||
.ui-datepicker-rtl { direction: rtl; }
|
||||
.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
|
||||
.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
|
||||
.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
|
||||
.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
|
||||
.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
|
||||
.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
|
||||
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
|
||||
.ui-datepicker-rtl .ui-datepicker-group { float:right; }
|
||||
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
|
||||
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
|
||||
|
||||
/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
|
||||
.ui-datepicker-cover {
|
||||
position: absolute; /*must have*/
|
||||
z-index: -1; /*must have*/
|
||||
filter: mask(); /*must have*/
|
||||
top: -4px; /*must have*/
|
||||
left: -4px; /*must have*/
|
||||
width: 200px; /*must have*/
|
||||
height: 200px; /*must have*/
|
||||
}
|
||||
.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
|
||||
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; }
|
||||
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; }
|
||||
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
|
||||
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
|
||||
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
|
||||
.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
|
||||
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
|
||||
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
|
||||
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
|
||||
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
|
||||
.ui-draggable .ui-dialog-titlebar { cursor: move; }
|
||||
|
||||
.ui-menu { list-style:none; padding: 2px; margin: 0; display:block; outline: none; }
|
||||
.ui-menu .ui-menu { margin-top: -3px; position: absolute; }
|
||||
.ui-menu .ui-menu-item { margin: 0; padding: 0; zoom: 1; width: 100%; }
|
||||
.ui-menu .ui-menu-divider { margin: 5px -2px 5px -2px; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0 0; }
|
||||
.ui-menu .ui-menu-item a { text-decoration: none; display: block; padding: 2px .4em; line-height: 1.5; zoom: 1; font-weight: normal; }
|
||||
.ui-menu .ui-menu-item a.ui-state-focus,
|
||||
.ui-menu .ui-menu-item a.ui-state-active { font-weight: normal; margin: -1px; }
|
||||
|
||||
.ui-menu .ui-state-disabled { font-weight: normal; margin: .4em 0 .2em; line-height: 1.5; }
|
||||
.ui-menu .ui-state-disabled a { cursor: default; }
|
||||
|
||||
/* icon support */
|
||||
.ui-menu-icons { position: relative; }
|
||||
.ui-menu-icons .ui-menu-item a { position: relative; padding-left: 2em; }
|
||||
|
||||
/* left-aligned */
|
||||
.ui-menu .ui-icon { position: absolute; top: .2em; left: .2em; }
|
||||
|
||||
/* right-aligned */
|
||||
.ui-menu .ui-menu-icon { position: static; float: right; }
|
||||
|
||||
.ui-progressbar { height:2em; text-align: left; overflow: hidden; }
|
||||
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }
|
||||
.ui-resizable { position: relative;}
|
||||
.ui-resizable-handle { position: absolute;font-size: 0.1px; display: block; }
|
||||
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
|
||||
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
|
||||
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
|
||||
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
|
||||
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
|
||||
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
|
||||
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
|
||||
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
|
||||
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
|
||||
.ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; }
|
||||
|
||||
.ui-slider { position: relative; text-align: left; }
|
||||
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
|
||||
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }
|
||||
|
||||
.ui-slider-horizontal { height: .8em; }
|
||||
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
|
||||
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
|
||||
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
|
||||
.ui-slider-horizontal .ui-slider-range-max { right: 0; }
|
||||
|
||||
.ui-slider-vertical { width: .8em; height: 100px; }
|
||||
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
|
||||
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
|
||||
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
|
||||
.ui-slider-vertical .ui-slider-range-max { top: 0; }
|
||||
.ui-spinner { position:relative; display: inline-block; overflow: hidden; padding: 0; vertical-align: middle; }
|
||||
.ui-spinner-input { border: none; background: none; padding: 0; margin: .2em 0; vertical-align: middle; margin-left: .4em; margin-right: 22px; }
|
||||
.ui-spinner-button { width: 16px; height: 50%; font-size: .5em; padding: 0; margin: 0; text-align: center; position: absolute; cursor: default; display: block; overflow: hidden; right: 0; }
|
||||
.ui-spinner a.ui-spinner-button { border-top: none; border-bottom: none; border-right: none; } /* more specificity required here to overide default borders */
|
||||
.ui-spinner .ui-icon { position: absolute; margin-top: -8px; top: 50%; left: 0; } /* vertical centre icon */
|
||||
.ui-spinner-up { top: 0; }
|
||||
.ui-spinner-down { bottom: 0; }
|
||||
|
||||
/* TR overrides */
|
||||
.ui-spinner .ui-icon-triangle-1-s {
|
||||
/* need to fix icons sprite */
|
||||
background-position:-65px -16px;
|
||||
}
|
||||
|
||||
.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
|
||||
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
|
||||
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 0; margin: 1px .2em 0 0; border-bottom: 0; padding: 0; white-space: nowrap; }
|
||||
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
|
||||
.ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px; }
|
||||
.ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-tabs-loading a { cursor: text; }
|
||||
.ui-tabs .ui-tabs-nav li a, .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
|
||||
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
|
||||
|
||||
.ui-tooltip {
|
||||
padding: 8px;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
max-width: 300px;
|
||||
-webkit-box-shadow: 0 0 5px #aaa;
|
||||
box-shadow: 0 0 5px #aaa;
|
||||
}
|
||||
/* Fades and background-images don't work well together in IE6, drop the image */
|
||||
* html .ui-tooltip {
|
||||
background-image: none;
|
||||
}
|
||||
body .ui-tooltip { border-width: 2px; }
|
||||
|
||||
/* Component containers
|
||||
----------------------------------*/
|
||||
.ui-widget { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1.1em/*{fsDefault}*/; }
|
||||
.ui-widget .ui-widget { font-size: 1em; }
|
||||
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif/*{ffDefault}*/; font-size: 1em; }
|
||||
.ui-widget-content { border: 1px solid #aaaaaa/*{borderColorContent}*/; background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/; color: #222222/*{fcContent}*/; }
|
||||
.ui-widget-content a { color: #222222/*{fcContent}*/; }
|
||||
.ui-widget-header { border: 1px solid #aaaaaa/*{borderColorHeader}*/; background: #cccccc/*{bgColorHeader}*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png)/*{bgImgUrlHeader}*/ 50%/*{bgHeaderXPos}*/ 50%/*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/; color: #222222/*{fcHeader}*/; font-weight: bold; }
|
||||
.ui-widget-header a { color: #222222/*{fcHeader}*/; }
|
||||
|
||||
/* Interaction states
|
||||
----------------------------------*/
|
||||
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3/*{borderColorDefault}*/; background: #e6e6e6/*{bgColorDefault}*/ url(images/ui-bg_glass_75_e6e6e6_1x400.png)/*{bgImgUrlDefault}*/ 50%/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #555555/*{fcDefault}*/; }
|
||||
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555/*{fcDefault}*/; text-decoration: none; }
|
||||
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #999999/*{borderColorHover}*/; background: #dadada/*{bgColorHover}*/ url(images/ui-bg_glass_75_dadada_1x400.png)/*{bgImgUrlHover}*/ 50%/*{bgHoverXPos}*/ 50%/*{bgHoverYPos}*/ repeat-x/*{bgHoverRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcHover}*/; }
|
||||
.ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited { color: #212121/*{fcHover}*/; text-decoration: none; }
|
||||
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa/*{borderColorActive}*/; background: #ffffff/*{bgColorActive}*/ url(images/ui-bg_glass_65_ffffff_1x400.png)/*{bgImgUrlActive}*/ 50%/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcActive}*/; }
|
||||
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121/*{fcActive}*/; text-decoration: none; }
|
||||
|
||||
/* Interaction Cues
|
||||
----------------------------------*/
|
||||
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid #fcefa1/*{borderColorHighlight}*/; background: #fbf9ee/*{bgColorHighlight}*/ url(images/ui-bg_glass_55_fbf9ee_1x400.png)/*{bgImgUrlHighlight}*/ 50%/*{bgHighlightXPos}*/ 50%/*{bgHighlightYPos}*/ repeat-x/*{bgHighlightRepeat}*/; color: #363636/*{fcHighlight}*/; }
|
||||
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636/*{fcHighlight}*/; }
|
||||
.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a/*{borderColorError}*/; background: #fef1ec/*{bgColorError}*/ url(images/ui-bg_glass_95_fef1ec_1x400.png)/*{bgImgUrlError}*/ 50%/*{bgErrorXPos}*/ 50%/*{bgErrorYPos}*/ repeat-x/*{bgErrorRepeat}*/; color: #cd0a0a/*{fcError}*/; }
|
||||
.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #cd0a0a/*{fcError}*/; }
|
||||
.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #cd0a0a/*{fcError}*/; }
|
||||
.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
|
||||
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
|
||||
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
|
||||
.ui-state-disabled .ui-icon { filter:Alpha(Opacity=35); } /* For IE8 - See #6059 */
|
||||
|
||||
/* Icons
|
||||
----------------------------------*/
|
||||
|
||||
/* states and images */
|
||||
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
|
||||
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
|
||||
.ui-widget-header .ui-icon {background-image: url(images/ui-icons_222222_256x240.png)/*{iconsHeader}*/; }
|
||||
.ui-state-default .ui-icon { background-image: url(images/ui-icons_888888_256x240.png)/*{iconsDefault}*/; }
|
||||
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_454545_256x240.png)/*{iconsHover}*/; }
|
||||
.ui-state-active .ui-icon {background-image: url(images/ui-icons_454545_256x240.png)/*{iconsActive}*/; }
|
||||
.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_2e83ff_256x240.png)/*{iconsHighlight}*/; }
|
||||
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_cd0a0a_256x240.png)/*{iconsError}*/; }
|
||||
|
||||
/* positioning */
|
||||
.ui-icon-carat-1-n { background-position: 0 0; }
|
||||
.ui-icon-carat-1-ne { background-position: -16px 0; }
|
||||
.ui-icon-carat-1-e { background-position: -32px 0; }
|
||||
.ui-icon-carat-1-se { background-position: -48px 0; }
|
||||
.ui-icon-carat-1-s { background-position: -64px 0; }
|
||||
.ui-icon-carat-1-sw { background-position: -80px 0; }
|
||||
.ui-icon-carat-1-w { background-position: -96px 0; }
|
||||
.ui-icon-carat-1-nw { background-position: -112px 0; }
|
||||
.ui-icon-carat-2-n-s { background-position: -128px 0; }
|
||||
.ui-icon-carat-2-e-w { background-position: -144px 0; }
|
||||
.ui-icon-triangle-1-n { background-position: 0 -16px; }
|
||||
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
|
||||
.ui-icon-triangle-1-e { background-position: -32px -16px; }
|
||||
.ui-icon-triangle-1-se { background-position: -48px -16px; }
|
||||
.ui-icon-triangle-1-s { background-position: -64px -16px; }
|
||||
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
|
||||
.ui-icon-triangle-1-w { background-position: -96px -16px; }
|
||||
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
|
||||
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
|
||||
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
|
||||
.ui-icon-arrow-1-n { background-position: 0 -32px; }
|
||||
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
|
||||
.ui-icon-arrow-1-e { background-position: -32px -32px; }
|
||||
.ui-icon-arrow-1-se { background-position: -48px -32px; }
|
||||
.ui-icon-arrow-1-s { background-position: -64px -32px; }
|
||||
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
|
||||
.ui-icon-arrow-1-w { background-position: -96px -32px; }
|
||||
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
|
||||
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
|
||||
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
|
||||
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
|
||||
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
|
||||
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
|
||||
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
|
||||
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
|
||||
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
|
||||
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
|
||||
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
|
||||
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
|
||||
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
|
||||
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
|
||||
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
|
||||
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
|
||||
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
|
||||
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
|
||||
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
|
||||
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
|
||||
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
|
||||
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
|
||||
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
|
||||
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
|
||||
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
|
||||
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
|
||||
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
|
||||
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
|
||||
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
|
||||
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
|
||||
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
|
||||
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
|
||||
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
|
||||
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
|
||||
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
|
||||
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
|
||||
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
|
||||
.ui-icon-arrow-4 { background-position: 0 -80px; }
|
||||
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
|
||||
.ui-icon-extlink { background-position: -32px -80px; }
|
||||
.ui-icon-newwin { background-position: -48px -80px; }
|
||||
.ui-icon-refresh { background-position: -64px -80px; }
|
||||
.ui-icon-shuffle { background-position: -80px -80px; }
|
||||
.ui-icon-transfer-e-w { background-position: -96px -80px; }
|
||||
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
|
||||
.ui-icon-folder-collapsed { background-position: 0 -96px; }
|
||||
.ui-icon-folder-open { background-position: -16px -96px; }
|
||||
.ui-icon-document { background-position: -32px -96px; }
|
||||
.ui-icon-document-b { background-position: -48px -96px; }
|
||||
.ui-icon-note { background-position: -64px -96px; }
|
||||
.ui-icon-mail-closed { background-position: -80px -96px; }
|
||||
.ui-icon-mail-open { background-position: -96px -96px; }
|
||||
.ui-icon-suitcase { background-position: -112px -96px; }
|
||||
.ui-icon-comment { background-position: -128px -96px; }
|
||||
.ui-icon-person { background-position: -144px -96px; }
|
||||
.ui-icon-print { background-position: -160px -96px; }
|
||||
.ui-icon-trash { background-position: -176px -96px; }
|
||||
.ui-icon-locked { background-position: -192px -96px; }
|
||||
.ui-icon-unlocked { background-position: -208px -96px; }
|
||||
.ui-icon-bookmark { background-position: -224px -96px; }
|
||||
.ui-icon-tag { background-position: -240px -96px; }
|
||||
.ui-icon-home { background-position: 0 -112px; }
|
||||
.ui-icon-flag { background-position: -16px -112px; }
|
||||
.ui-icon-calendar { background-position: -32px -112px; }
|
||||
.ui-icon-cart { background-position: -48px -112px; }
|
||||
.ui-icon-pencil { background-position: -64px -112px; }
|
||||
.ui-icon-clock { background-position: -80px -112px; }
|
||||
.ui-icon-disk { background-position: -96px -112px; }
|
||||
.ui-icon-calculator { background-position: -112px -112px; }
|
||||
.ui-icon-zoomin { background-position: -128px -112px; }
|
||||
.ui-icon-zoomout { background-position: -144px -112px; }
|
||||
.ui-icon-search { background-position: -160px -112px; }
|
||||
.ui-icon-wrench { background-position: -176px -112px; }
|
||||
.ui-icon-gear { background-position: -192px -112px; }
|
||||
.ui-icon-heart { background-position: -208px -112px; }
|
||||
.ui-icon-star { background-position: -224px -112px; }
|
||||
.ui-icon-link { background-position: -240px -112px; }
|
||||
.ui-icon-cancel { background-position: 0 -128px; }
|
||||
.ui-icon-plus { background-position: -16px -128px; }
|
||||
.ui-icon-plusthick { background-position: -32px -128px; }
|
||||
.ui-icon-minus { background-position: -48px -128px; }
|
||||
.ui-icon-minusthick { background-position: -64px -128px; }
|
||||
.ui-icon-close { background-position: -80px -128px; }
|
||||
.ui-icon-closethick { background-position: -96px -128px; }
|
||||
.ui-icon-key { background-position: -112px -128px; }
|
||||
.ui-icon-lightbulb { background-position: -128px -128px; }
|
||||
.ui-icon-scissors { background-position: -144px -128px; }
|
||||
.ui-icon-clipboard { background-position: -160px -128px; }
|
||||
.ui-icon-copy { background-position: -176px -128px; }
|
||||
.ui-icon-contact { background-position: -192px -128px; }
|
||||
.ui-icon-image { background-position: -208px -128px; }
|
||||
.ui-icon-video { background-position: -224px -128px; }
|
||||
.ui-icon-script { background-position: -240px -128px; }
|
||||
.ui-icon-alert { background-position: 0 -144px; }
|
||||
.ui-icon-info { background-position: -16px -144px; }
|
||||
.ui-icon-notice { background-position: -32px -144px; }
|
||||
.ui-icon-help { background-position: -48px -144px; }
|
||||
.ui-icon-check { background-position: -64px -144px; }
|
||||
.ui-icon-bullet { background-position: -80px -144px; }
|
||||
.ui-icon-radio-on { background-position: -96px -144px; }
|
||||
.ui-icon-radio-off { background-position: -112px -144px; }
|
||||
.ui-icon-pin-w { background-position: -128px -144px; }
|
||||
.ui-icon-pin-s { background-position: -144px -144px; }
|
||||
.ui-icon-play { background-position: 0 -160px; }
|
||||
.ui-icon-pause { background-position: -16px -160px; }
|
||||
.ui-icon-seek-next { background-position: -32px -160px; }
|
||||
.ui-icon-seek-prev { background-position: -48px -160px; }
|
||||
.ui-icon-seek-end { background-position: -64px -160px; }
|
||||
.ui-icon-seek-start { background-position: -80px -160px; }
|
||||
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
|
||||
.ui-icon-seek-first { background-position: -80px -160px; }
|
||||
.ui-icon-stop { background-position: -96px -160px; }
|
||||
.ui-icon-eject { background-position: -112px -160px; }
|
||||
.ui-icon-volume-off { background-position: -128px -160px; }
|
||||
.ui-icon-volume-on { background-position: -144px -160px; }
|
||||
.ui-icon-power { background-position: 0 -176px; }
|
||||
.ui-icon-signal-diag { background-position: -16px -176px; }
|
||||
.ui-icon-signal { background-position: -32px -176px; }
|
||||
.ui-icon-battery-0 { background-position: -48px -176px; }
|
||||
.ui-icon-battery-1 { background-position: -64px -176px; }
|
||||
.ui-icon-battery-2 { background-position: -80px -176px; }
|
||||
.ui-icon-battery-3 { background-position: -96px -176px; }
|
||||
.ui-icon-circle-plus { background-position: 0 -192px; }
|
||||
.ui-icon-circle-minus { background-position: -16px -192px; }
|
||||
.ui-icon-circle-close { background-position: -32px -192px; }
|
||||
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
|
||||
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
|
||||
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
|
||||
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
|
||||
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
|
||||
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
|
||||
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
|
||||
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
|
||||
.ui-icon-circle-zoomin { background-position: -176px -192px; }
|
||||
.ui-icon-circle-zoomout { background-position: -192px -192px; }
|
||||
.ui-icon-circle-check { background-position: -208px -192px; }
|
||||
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
|
||||
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
|
||||
.ui-icon-circlesmall-close { background-position: -32px -208px; }
|
||||
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
|
||||
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
|
||||
.ui-icon-squaresmall-close { background-position: -80px -208px; }
|
||||
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
|
||||
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
|
||||
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
|
||||
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
|
||||
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
|
||||
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
|
||||
|
||||
|
||||
/* Misc visuals
|
||||
----------------------------------*/
|
||||
|
||||
/* Corner radius */
|
||||
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 4px/*{cornerRadius}*/; -webkit-border-top-left-radius: 4px/*{cornerRadius}*/; -khtml-border-top-left-radius: 4px/*{cornerRadius}*/; border-top-left-radius: 4px/*{cornerRadius}*/; }
|
||||
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 4px/*{cornerRadius}*/; -webkit-border-top-right-radius: 4px/*{cornerRadius}*/; -khtml-border-top-right-radius: 4px/*{cornerRadius}*/; border-top-right-radius: 4px/*{cornerRadius}*/; }
|
||||
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 4px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-left-radius: 4px/*{cornerRadius}*/; border-bottom-left-radius: 4px/*{cornerRadius}*/; }
|
||||
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 4px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-right-radius: 4px/*{cornerRadius}*/; border-bottom-right-radius: 4px/*{cornerRadius}*/; }
|
||||
|
||||
/* Overlays */
|
||||
.ui-widget-overlay { background: #aaaaaa/*{bgColorOverlay}*/ url(images/ui-bg_flat_0_aaaaaa_40x100.png)/*{bgImgUrlOverlay}*/ 50%/*{bgOverlayXPos}*/ 50%/*{bgOverlayYPos}*/ repeat-x/*{bgOverlayRepeat}*/; opacity: .3;filter:Alpha(Opacity=30)/*{opacityOverlay}*/; }
|
||||
.ui-widget-shadow { margin: -8px/*{offsetTopShadow}*/ 0 0 -8px/*{offsetLeftShadow}*/; padding: 8px/*{thicknessShadow}*/; background: #aaaaaa/*{bgColorShadow}*/ url(images/ui-bg_flat_0_aaaaaa_40x100.png)/*{bgImgUrlShadow}*/ 50%/*{bgShadowXPos}*/ 50%/*{bgShadowYPos}*/ repeat-x/*{bgShadowRepeat}*/; opacity: .3;filter:Alpha(Opacity=30)/*{opacityShadow}*/; -moz-border-radius: 8px/*{cornerRadiusShadow}*/; -khtml-border-radius: 8px/*{cornerRadiusShadow}*/; -webkit-border-radius: 8px/*{cornerRadiusShadow}*/; border-radius: 8px/*{cornerRadiusShadow}*/; }
|
||||
|
|
@ -1,9 +1,6 @@
|
|||
{{define "head"}}
|
||||
<script src="/static/vendor/jqueryui/jquery-ui.min.js"></script>
|
||||
<script src="/static/vendor/bootstrap-3.3.1/js/bootstrap.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="/static/vendor/jqueryui/themes/base/jquery-ui.css" />
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="/static/css/graph.css">
|
||||
|
||||
<link type="text/css" rel="stylesheet" href="/static/vendor/rickshaw/rickshaw.min.css">
|
||||
|
|
@ -13,6 +10,7 @@
|
|||
<script src="/static/vendor/rickshaw/vendor/d3.layout.min.js"></script>
|
||||
<script src="/static/vendor/rickshaw/rickshaw.min.js"></script>
|
||||
<script src="/static/vendor/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
|
||||
<script src="/static/vendor/bootstrap3-typeahead/bootstrap3-typeahead.min.js"></script>
|
||||
|
||||
<script src="/static/vendor/js/handlebars.js"></script>
|
||||
<script src="/static/vendor/js/jquery.selection.js"></script>
|
||||
|
|
@ -24,7 +22,9 @@
|
|||
{{end}}
|
||||
|
||||
{{define "content"}}
|
||||
<div id="graph_container" class="container_fluid">
|
||||
<div id="graph_container" class="container-fluid">
|
||||
</div>
|
||||
<div class="container-fluid">
|
||||
<div><input class="btn btn-primary" type="submit" value="Add Graph" id="add_graph"></div>
|
||||
</div>
|
||||
<div><input class="btn btn-primary" type="submit" value="Add Graph" id="add_graph"></div>
|
||||
{{end}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue