New admin interface.
parent
4c501cd86f
commit
c2f2735f3b
|
|
@ -0,0 +1,15 @@
|
|||
# InfluxDB Admin Interface
|
||||
|
||||
This is the built-in admin interface that ships with InfluxDB. An emphasis has been placed on making it minimalistic and able to be bundled with the server without adding lots of overhead or preprocessing steps.
|
||||
|
||||
## Building
|
||||
|
||||
The only step required to bundle this with InfluxDB is to create a compressed file system using `statik` as follows:
|
||||
|
||||
```
|
||||
go get github.com/rakyll/statik
|
||||
$GOPATH/bin/statik -src=./shared/admin
|
||||
go fmt statik/statik.go
|
||||
```
|
||||
|
||||
That should update the file located at `statik/statik.go`, which will get automatically build into the InfluxDB binary when it is compiled. This step should also be completed in any pull requests that make modifications to the admin interface, as it won't be run as a separate step in the release process.
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
body {
|
||||
padding-top: 70px;
|
||||
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
/* The html and body elements cannot have any padding or margin. */
|
||||
}
|
||||
|
||||
code {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#settings {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#settings form > div {
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
#settings form input#port {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
#settings form label {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
div#content {
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
||||
textarea#content-data {
|
||||
font-family: "Courier New";
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
div#query-alerts {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
div#modal-error, div#modal-success, div#query-error, div#query-success {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Wrapper for page content to push down footer */
|
||||
#wrap {
|
||||
min-height: 100%;
|
||||
height: auto !important;
|
||||
height: 100%;
|
||||
/* Negative indent footer by it's height */
|
||||
margin: 0 auto -60px;
|
||||
}
|
||||
|
||||
/* Set the fixed height of the footer here */
|
||||
#push,
|
||||
#footer {
|
||||
height: 60px;
|
||||
}
|
||||
#footer {
|
||||
background-color: #f5f5f5;
|
||||
border-top: 1px solid #dfdfdf;
|
||||
}
|
||||
|
||||
#footer p {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
/* Lastly, apply responsive CSS fixes as necessary */
|
||||
@media (max-width: 767px) {
|
||||
#footer {
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,476 +0,0 @@
|
|||
/*!
|
||||
* Bootstrap v3.3.4 (http://getbootstrap.com)
|
||||
* Copyright 2011-2015 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
.btn-default,
|
||||
.btn-primary,
|
||||
.btn-success,
|
||||
.btn-info,
|
||||
.btn-warning,
|
||||
.btn-danger {
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
|
||||
}
|
||||
.btn-default:active,
|
||||
.btn-primary:active,
|
||||
.btn-success:active,
|
||||
.btn-info:active,
|
||||
.btn-warning:active,
|
||||
.btn-danger:active,
|
||||
.btn-default.active,
|
||||
.btn-primary.active,
|
||||
.btn-success.active,
|
||||
.btn-info.active,
|
||||
.btn-warning.active,
|
||||
.btn-danger.active {
|
||||
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
|
||||
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
|
||||
}
|
||||
.btn-default .badge,
|
||||
.btn-primary .badge,
|
||||
.btn-success .badge,
|
||||
.btn-info .badge,
|
||||
.btn-warning .badge,
|
||||
.btn-danger .badge {
|
||||
text-shadow: none;
|
||||
}
|
||||
.btn:active,
|
||||
.btn.active {
|
||||
background-image: none;
|
||||
}
|
||||
.btn-default {
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
|
||||
background-image: -o-linear-gradient(top, #fff 0%, #e0e0e0 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0));
|
||||
background-image: linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||
background-repeat: repeat-x;
|
||||
border-color: #dbdbdb;
|
||||
border-color: #ccc;
|
||||
}
|
||||
.btn-default:hover,
|
||||
.btn-default:focus {
|
||||
background-color: #e0e0e0;
|
||||
background-position: 0 -15px;
|
||||
}
|
||||
.btn-default:active,
|
||||
.btn-default.active {
|
||||
background-color: #e0e0e0;
|
||||
border-color: #dbdbdb;
|
||||
}
|
||||
.btn-default.disabled,
|
||||
.btn-default:disabled,
|
||||
.btn-default[disabled] {
|
||||
background-color: #e0e0e0;
|
||||
background-image: none;
|
||||
}
|
||||
.btn-primary {
|
||||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #265a88 100%);
|
||||
background-image: -o-linear-gradient(top, #337ab7 0%, #265a88 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#265a88));
|
||||
background-image: linear-gradient(to bottom, #337ab7 0%, #265a88 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||
background-repeat: repeat-x;
|
||||
border-color: #245580;
|
||||
}
|
||||
.btn-primary:hover,
|
||||
.btn-primary:focus {
|
||||
background-color: #265a88;
|
||||
background-position: 0 -15px;
|
||||
}
|
||||
.btn-primary:active,
|
||||
.btn-primary.active {
|
||||
background-color: #265a88;
|
||||
border-color: #245580;
|
||||
}
|
||||
.btn-primary.disabled,
|
||||
.btn-primary:disabled,
|
||||
.btn-primary[disabled] {
|
||||
background-color: #265a88;
|
||||
background-image: none;
|
||||
}
|
||||
.btn-success {
|
||||
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
|
||||
background-image: -o-linear-gradient(top, #5cb85c 0%, #419641 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#419641));
|
||||
background-image: linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||
background-repeat: repeat-x;
|
||||
border-color: #3e8f3e;
|
||||
}
|
||||
.btn-success:hover,
|
||||
.btn-success:focus {
|
||||
background-color: #419641;
|
||||
background-position: 0 -15px;
|
||||
}
|
||||
.btn-success:active,
|
||||
.btn-success.active {
|
||||
background-color: #419641;
|
||||
border-color: #3e8f3e;
|
||||
}
|
||||
.btn-success.disabled,
|
||||
.btn-success:disabled,
|
||||
.btn-success[disabled] {
|
||||
background-color: #419641;
|
||||
background-image: none;
|
||||
}
|
||||
.btn-info {
|
||||
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
|
||||
background-image: -o-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#2aabd2));
|
||||
background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||
background-repeat: repeat-x;
|
||||
border-color: #28a4c9;
|
||||
}
|
||||
.btn-info:hover,
|
||||
.btn-info:focus {
|
||||
background-color: #2aabd2;
|
||||
background-position: 0 -15px;
|
||||
}
|
||||
.btn-info:active,
|
||||
.btn-info.active {
|
||||
background-color: #2aabd2;
|
||||
border-color: #28a4c9;
|
||||
}
|
||||
.btn-info.disabled,
|
||||
.btn-info:disabled,
|
||||
.btn-info[disabled] {
|
||||
background-color: #2aabd2;
|
||||
background-image: none;
|
||||
}
|
||||
.btn-warning {
|
||||
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
|
||||
background-image: -o-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#eb9316));
|
||||
background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||
background-repeat: repeat-x;
|
||||
border-color: #e38d13;
|
||||
}
|
||||
.btn-warning:hover,
|
||||
.btn-warning:focus {
|
||||
background-color: #eb9316;
|
||||
background-position: 0 -15px;
|
||||
}
|
||||
.btn-warning:active,
|
||||
.btn-warning.active {
|
||||
background-color: #eb9316;
|
||||
border-color: #e38d13;
|
||||
}
|
||||
.btn-warning.disabled,
|
||||
.btn-warning:disabled,
|
||||
.btn-warning[disabled] {
|
||||
background-color: #eb9316;
|
||||
background-image: none;
|
||||
}
|
||||
.btn-danger {
|
||||
background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
|
||||
background-image: -o-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c12e2a));
|
||||
background-image: linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||
background-repeat: repeat-x;
|
||||
border-color: #b92c28;
|
||||
}
|
||||
.btn-danger:hover,
|
||||
.btn-danger:focus {
|
||||
background-color: #c12e2a;
|
||||
background-position: 0 -15px;
|
||||
}
|
||||
.btn-danger:active,
|
||||
.btn-danger.active {
|
||||
background-color: #c12e2a;
|
||||
border-color: #b92c28;
|
||||
}
|
||||
.btn-danger.disabled,
|
||||
.btn-danger:disabled,
|
||||
.btn-danger[disabled] {
|
||||
background-color: #c12e2a;
|
||||
background-image: none;
|
||||
}
|
||||
.thumbnail,
|
||||
.img-thumbnail {
|
||||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
|
||||
}
|
||||
.dropdown-menu > li > a:hover,
|
||||
.dropdown-menu > li > a:focus {
|
||||
background-color: #e8e8e8;
|
||||
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
|
||||
background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
|
||||
background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.dropdown-menu > .active > a,
|
||||
.dropdown-menu > .active > a:hover,
|
||||
.dropdown-menu > .active > a:focus {
|
||||
background-color: #2e6da4;
|
||||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
|
||||
background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
|
||||
background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.navbar-default {
|
||||
background-image: -webkit-linear-gradient(top, #fff 0%, #f8f8f8 100%);
|
||||
background-image: -o-linear-gradient(top, #fff 0%, #f8f8f8 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f8f8f8));
|
||||
background-image: linear-gradient(to bottom, #fff 0%, #f8f8f8 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||
background-repeat: repeat-x;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
|
||||
}
|
||||
.navbar-default .navbar-nav > .open > a,
|
||||
.navbar-default .navbar-nav > .active > a {
|
||||
background-image: -webkit-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%);
|
||||
background-image: -o-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#dbdbdb), to(#e2e2e2));
|
||||
background-image: linear-gradient(to bottom, #dbdbdb 0%, #e2e2e2 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdbdbdb', endColorstr='#ffe2e2e2', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
|
||||
box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
|
||||
}
|
||||
.navbar-brand,
|
||||
.navbar-nav > li > a {
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
|
||||
}
|
||||
.navbar-inverse {
|
||||
background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222 100%);
|
||||
background-image: -o-linear-gradient(top, #3c3c3c 0%, #222 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#222));
|
||||
background-image: linear-gradient(to bottom, #3c3c3c 0%, #222 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.navbar-inverse .navbar-nav > .open > a,
|
||||
.navbar-inverse .navbar-nav > .active > a {
|
||||
background-image: -webkit-linear-gradient(top, #080808 0%, #0f0f0f 100%);
|
||||
background-image: -o-linear-gradient(top, #080808 0%, #0f0f0f 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#080808), to(#0f0f0f));
|
||||
background-image: linear-gradient(to bottom, #080808 0%, #0f0f0f 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
-webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
|
||||
box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
|
||||
}
|
||||
.navbar-inverse .navbar-brand,
|
||||
.navbar-inverse .navbar-nav > li > a {
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
|
||||
}
|
||||
.navbar-static-top,
|
||||
.navbar-fixed-top,
|
||||
.navbar-fixed-bottom {
|
||||
border-radius: 0;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.navbar .navbar-nav .open .dropdown-menu > .active > a,
|
||||
.navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
|
||||
.navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
|
||||
color: #fff;
|
||||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
|
||||
background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
|
||||
background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
}
|
||||
.alert {
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
|
||||
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
|
||||
}
|
||||
.alert-success {
|
||||
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
|
||||
background-image: -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc));
|
||||
background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
border-color: #b2dba1;
|
||||
}
|
||||
.alert-info {
|
||||
background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
|
||||
background-image: -o-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#b9def0));
|
||||
background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
border-color: #9acfea;
|
||||
}
|
||||
.alert-warning {
|
||||
background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
|
||||
background-image: -o-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#f8efc0));
|
||||
background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
border-color: #f5e79e;
|
||||
}
|
||||
.alert-danger {
|
||||
background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
|
||||
background-image: -o-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#e7c3c3));
|
||||
background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
border-color: #dca7a7;
|
||||
}
|
||||
.progress {
|
||||
background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
|
||||
background-image: -o-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#f5f5f5));
|
||||
background-image: linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.progress-bar {
|
||||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #286090 100%);
|
||||
background-image: -o-linear-gradient(top, #337ab7 0%, #286090 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#286090));
|
||||
background-image: linear-gradient(to bottom, #337ab7 0%, #286090 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff286090', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.progress-bar-success {
|
||||
background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%);
|
||||
background-image: -o-linear-gradient(top, #5cb85c 0%, #449d44 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#449d44));
|
||||
background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.progress-bar-info {
|
||||
background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
|
||||
background-image: -o-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#31b0d5));
|
||||
background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.progress-bar-warning {
|
||||
background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
|
||||
background-image: -o-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#ec971f));
|
||||
background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.progress-bar-danger {
|
||||
background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%);
|
||||
background-image: -o-linear-gradient(top, #d9534f 0%, #c9302c 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c9302c));
|
||||
background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.progress-bar-striped {
|
||||
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
|
||||
}
|
||||
.list-group {
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
|
||||
}
|
||||
.list-group-item.active,
|
||||
.list-group-item.active:hover,
|
||||
.list-group-item.active:focus {
|
||||
text-shadow: 0 -1px 0 #286090;
|
||||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2b669a 100%);
|
||||
background-image: -o-linear-gradient(top, #337ab7 0%, #2b669a 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2b669a));
|
||||
background-image: linear-gradient(to bottom, #337ab7 0%, #2b669a 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
border-color: #2b669a;
|
||||
}
|
||||
.list-group-item.active .badge,
|
||||
.list-group-item.active:hover .badge,
|
||||
.list-group-item.active:focus .badge {
|
||||
text-shadow: none;
|
||||
}
|
||||
.panel {
|
||||
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
|
||||
}
|
||||
.panel-default > .panel-heading {
|
||||
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
|
||||
background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
|
||||
background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.panel-primary > .panel-heading {
|
||||
background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
|
||||
background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
|
||||
background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.panel-success > .panel-heading {
|
||||
background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
|
||||
background-image: -o-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#d0e9c6));
|
||||
background-image: linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.panel-info > .panel-heading {
|
||||
background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
|
||||
background-image: -o-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#c4e3f3));
|
||||
background-image: linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.panel-warning > .panel-heading {
|
||||
background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
|
||||
background-image: -o-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#faf2cc));
|
||||
background-image: linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.panel-danger > .panel-heading {
|
||||
background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
|
||||
background-image: -o-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#ebcccc));
|
||||
background-image: linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
.well {
|
||||
background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
|
||||
background-image: -o-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#f5f5f5));
|
||||
background-image: linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);
|
||||
background-repeat: repeat-x;
|
||||
border-color: #dcdcdc;
|
||||
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
|
||||
}
|
||||
/*# sourceMappingURL=bootstrap-theme.css.map */
|
||||
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
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,294 @@
|
|||
.dropdown-menu > li > label {
|
||||
display: block;
|
||||
padding: 3px 20px;
|
||||
clear: both;
|
||||
font-weight: normal;
|
||||
line-height: 1.42857143;
|
||||
color: #333333;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.dropdown-menu > li > label:hover,
|
||||
.dropdown-menu > li > label:focus {
|
||||
text-decoration: none;
|
||||
color: #262626;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.dropdown-menu > li > input:checked ~ label,
|
||||
.dropdown-menu > li > input:checked ~ label:hover,
|
||||
.dropdown-menu > li > input:checked ~ label:focus,
|
||||
.dropdown-menu > .active > label,
|
||||
.dropdown-menu > .active > label:hover,
|
||||
.dropdown-menu > .active > label:focus {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
background-color: #428bca;
|
||||
}
|
||||
.dropdown-menu > li > input[disabled] ~ label,
|
||||
.dropdown-menu > li > input[disabled] ~ label:hover,
|
||||
.dropdown-menu > li > input[disabled] ~ label:focus,
|
||||
.dropdown-menu > .disabled > label,
|
||||
.dropdown-menu > .disabled > label:hover,
|
||||
.dropdown-menu > .disabled > label:focus {
|
||||
color: #999999;
|
||||
}
|
||||
.dropdown-menu > li > input[disabled] ~ label:hover,
|
||||
.dropdown-menu > li > input[disabled] ~ label:focus,
|
||||
.dropdown-menu > .disabled > label:hover,
|
||||
.dropdown-menu > .disabled > label:focus {
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.dropdown-menu > li > label {
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.dropdown-menu > li > input[type="radio"],
|
||||
.dropdown-menu > li > input[type="checkbox"] {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -9999em;
|
||||
left: -9999em;
|
||||
}
|
||||
.dropdown-menu > li > label:focus,
|
||||
.dropdown-menu > li > input:focus ~ label {
|
||||
outline: thin dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
.dropdown-menu.pull-right {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
.dropdown-menu.pull-top {
|
||||
bottom: 100%;
|
||||
top: auto;
|
||||
margin: 0 0 2px;
|
||||
-webkit-box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.175);
|
||||
box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.175);
|
||||
}
|
||||
.dropdown-menu.pull-center {
|
||||
right: 50%;
|
||||
left: auto;
|
||||
}
|
||||
.dropdown-menu.pull-middle {
|
||||
right: 100%;
|
||||
margin: 0 2px 0 0;
|
||||
box-shadow: -5px 0 10px rgba(0, 0, 0, 0.2);
|
||||
left: auto;
|
||||
}
|
||||
.dropdown-menu.pull-middle.pull-right {
|
||||
right: auto;
|
||||
left: 100%;
|
||||
margin: 0 0 0 2px;
|
||||
box-shadow: 5px 0 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.dropdown-menu.pull-middle.pull-center {
|
||||
right: 50%;
|
||||
margin: 0;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.dropdown-menu.bullet {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.dropdown-menu.bullet:before {
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
-webkit-transform: rotate(360deg);
|
||||
border-width: 0 7px 7px;
|
||||
border-bottom-color: #cccccc;
|
||||
border-bottom-color: rgba(0, 0, 0, 0.15);
|
||||
top: -7px;
|
||||
left: 9px;
|
||||
}
|
||||
.dropdown-menu.bullet:after {
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
-webkit-transform: rotate(360deg);
|
||||
border-width: 0 6px 6px;
|
||||
border-bottom-color: #ffffff;
|
||||
top: -6px;
|
||||
left: 10px;
|
||||
}
|
||||
.dropdown-menu.bullet.pull-right:before {
|
||||
left: auto;
|
||||
right: 9px;
|
||||
}
|
||||
.dropdown-menu.bullet.pull-right:after {
|
||||
left: auto;
|
||||
right: 10px;
|
||||
}
|
||||
.dropdown-menu.bullet.pull-top {
|
||||
margin-top: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.dropdown-menu.bullet.pull-top:before {
|
||||
top: auto;
|
||||
bottom: -7px;
|
||||
border-bottom-width: 0;
|
||||
border-top-width: 7px;
|
||||
border-top-color: #cccccc;
|
||||
border-top-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.dropdown-menu.bullet.pull-top:after {
|
||||
top: auto;
|
||||
bottom: -6px;
|
||||
border-bottom: none;
|
||||
border-top-width: 6px;
|
||||
border-top-color: #ffffff;
|
||||
}
|
||||
.dropdown-menu.bullet.pull-center:before {
|
||||
left: auto;
|
||||
right: 50%;
|
||||
margin-right: -7px;
|
||||
}
|
||||
.dropdown-menu.bullet.pull-center:after {
|
||||
left: auto;
|
||||
right: 50%;
|
||||
margin-right: -6px;
|
||||
}
|
||||
.dropdown-menu.bullet.pull-middle {
|
||||
margin-right: 8px;
|
||||
}
|
||||
.dropdown-menu.bullet.pull-middle:before {
|
||||
top: 50%;
|
||||
left: 100%;
|
||||
right: auto;
|
||||
margin-top: -7px;
|
||||
border-right-width: 0;
|
||||
border-bottom-color: transparent;
|
||||
border-top-width: 7px;
|
||||
border-left-color: #cccccc;
|
||||
border-left-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.dropdown-menu.bullet.pull-middle:after {
|
||||
top: 50%;
|
||||
left: 100%;
|
||||
right: auto;
|
||||
margin-top: -6px;
|
||||
border-right-width: 0;
|
||||
border-bottom-color: transparent;
|
||||
border-top-width: 6px;
|
||||
border-left-color: #ffffff;
|
||||
}
|
||||
.dropdown-menu.bullet.pull-middle.pull-right {
|
||||
margin-right: 0;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.dropdown-menu.bullet.pull-middle.pull-right:before {
|
||||
left: -7px;
|
||||
border-left-width: 0;
|
||||
border-right-width: 7px;
|
||||
border-right-color: #cccccc;
|
||||
border-right-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.dropdown-menu.bullet.pull-middle.pull-right:after {
|
||||
left: -6px;
|
||||
border-left-width: 0;
|
||||
border-right-width: 6px;
|
||||
border-right-color: #ffffff;
|
||||
}
|
||||
.dropdown-menu.bullet.pull-middle.pull-center {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
.dropdown-menu.bullet.pull-middle.pull-center:before {
|
||||
border: none;
|
||||
display: none;
|
||||
}
|
||||
.dropdown-menu.bullet.pull-middle.pull-center:after {
|
||||
border: none;
|
||||
display: none;
|
||||
}
|
||||
.dropdown-submenu {
|
||||
position: relative;
|
||||
}
|
||||
.dropdown-submenu > .dropdown-menu {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
margin-top: -6px;
|
||||
margin-left: -1px;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
.dropdown-submenu > a:before {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: "";
|
||||
margin-top: 6px;
|
||||
margin-right: -8px;
|
||||
border-width: 4px 0 4px 4px;
|
||||
border-style: solid;
|
||||
border-left-style: dashed;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.navbar-nav .dropdown-submenu > a:before {
|
||||
margin-top: 8px;
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: 4px 4px 0;
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
.navbar-nav .dropdown-submenu > a {
|
||||
padding-left: 40px;
|
||||
}
|
||||
.navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > a,
|
||||
.navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > label {
|
||||
padding-left: 35px;
|
||||
}
|
||||
.navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > a,
|
||||
.navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > label {
|
||||
padding-left: 45px;
|
||||
}
|
||||
.navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > a,
|
||||
.navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > label {
|
||||
padding-left: 55px;
|
||||
}
|
||||
.navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > a,
|
||||
.navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > label {
|
||||
padding-left: 65px;
|
||||
}
|
||||
.navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > a,
|
||||
.navbar-nav > .open > .dropdown-menu > .dropdown-submenu > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > .dropdown-menu > li > label {
|
||||
padding-left: 75px;
|
||||
}
|
||||
}
|
||||
.navbar-default .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a,
|
||||
.navbar-default .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:hover,
|
||||
.navbar-default .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:focus {
|
||||
background-color: #e7e7e7;
|
||||
color: #555555;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.navbar-default .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:before {
|
||||
border-top-color: #555555;
|
||||
}
|
||||
}
|
||||
.navbar-inverse .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a,
|
||||
.navbar-inverse .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:hover,
|
||||
.navbar-inverse .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:focus {
|
||||
background-color: #080808;
|
||||
color: #ffffff;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.navbar-inverse .navbar-nav .open > .dropdown-menu > .dropdown-submenu.open > a:before {
|
||||
border-top-color: #ffffff;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
|
|
@ -1,94 +1,199 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<title>Bare - Start Bootstrap Template</title>
|
||||
<title>InfluxDB - Admin Interface</title>
|
||||
|
||||
<!-- Bootstrap Core CSS -->
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<style>
|
||||
body {
|
||||
padding-top: 70px;
|
||||
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
<link href="css/bootstrap.css" rel="stylesheet">
|
||||
<link href="css/dropdowns-enhancement.css" rel="stylesheet">
|
||||
<link href="css/admin.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="wrap">
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
|
||||
<div class="container">
|
||||
<!-- Brand and toggle get grouped for better mobile display -->
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="#">
|
||||
<img src="img/influxdb-light400.png" style="height:28px; margin-top:-4px;" />
|
||||
</a>
|
||||
</div>
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
||||
<ul class="nav navbar-nav">
|
||||
<li>
|
||||
<a href="#" data-toggle="modal" data-target="#myModal">Write Data</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
|
||||
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span>Database:</span> <span id="content-current-database">…</span> <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu" id="content-database-list">
|
||||
<!-- Available databases will go here -->
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#" id="action-settings"><i class="glyphicon glyphicon-cog"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /.navbar-collapse -->
|
||||
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</nav>
|
||||
|
||||
|
||||
<!-- Page Content -->
|
||||
<div class="container">
|
||||
<!-- Brand and toggle get grouped for better mobile display -->
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">InfluxDB</a>
|
||||
</div>
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
|
||||
<ul class="nav navbar-nav">
|
||||
<li>
|
||||
<a href="#">A</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">B</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">C</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /.navbar-collapse -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</nav>
|
||||
|
||||
<!-- Page Content -->
|
||||
<div class="container">
|
||||
<div id="example"></div>
|
||||
<script type="text/jsx">
|
||||
console.log("hello");
|
||||
</script>
|
||||
<div class="row">
|
||||
<div class="col-lg-12 text-center" id="content">
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
<!-- Settings Pane -->
|
||||
<div id="settings">
|
||||
<div class="panel panel-info">
|
||||
<div class="panel-heading">
|
||||
<h3 class="panel-title">Connection Settings</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<form class="form-inline" id="form-settings">
|
||||
<div class="form-group">
|
||||
<label for="hostname">Host</label>
|
||||
<input type="text" class="form-control" id="hostname" placeholder="localhost">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="port">Port</label>
|
||||
<input type="text" class="form-control" id="port" placeholder="8086" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" class="form-control" id="username" placeholder="">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="text" class="form-control" id="password" placeholder="">
|
||||
</div>
|
||||
|
||||
<div class="checkbox form-group">
|
||||
<label>
|
||||
<input type="checkbox" id="ssl"> SSL
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="submit" class="btn btn-default">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="queries"></div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12" id="content">
|
||||
<form id="query-form">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<label class="input-group-addon">Query: </label>
|
||||
<input type="text" class="form-control" id="query" style="width:100%">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12" id="content">
|
||||
|
||||
<div class="dropdown text-right" id="template-container">
|
||||
<button class="btn btn-default dropdown-toggle" id="dropdown-templates" data-toggle="dropdown">Query Templates <span class="caret"></span> </button>
|
||||
<ul class="dropdown-menu pull-right" id="action-template">
|
||||
<li><label data-query="SHOW DATABASES">Show Databases</label></li>
|
||||
<li><label data-query="CREATE DATABASE name">Create Database</label></li>
|
||||
<li><label data-query="DROP DATABASE name">Drop Database</label></li>
|
||||
<li class="divider"></li>
|
||||
<li><label data-query="SHOW MEASUREMENTS">Show Measurements</label></li>
|
||||
<li><label data-query="SHOW TAG KEYS FROM measurement_name">Show Tag Keys</label></li>
|
||||
<li><label data-query="SHOW TAG VALUES FROM measurement_name WITH KEY = tag_key">Show Tag Values</label></li>
|
||||
<li class="divider"></li>
|
||||
<li><label data-query="SHOW RETENTION POLICIES db_name">Show Retention Policies</label></li>
|
||||
<li><label data-query="CREATE RETENTION POLICY rp_name ON db_name DURATION 30d REPLICATION 1 DEFAULT">Create Retention Policy</label></li>
|
||||
<li><label data-query="DROP RETENTION POLICY rp_name">Drop Retention Policy</label></li>
|
||||
<li class="divider"></li>
|
||||
<li><label data-query="SHOW USERS">Show Users</label></li>
|
||||
<li><label data-query="CREATE USER username WITH PASSWORD 'password'">Create User</label></li>
|
||||
<li><label data-query="CREATE USER username WITH PASSWORD 'password' WITH ALL PRIVILEGES">Create Admin User</label></li>
|
||||
<li><label data-query="DROP USER username">Drop User</label></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="query-alerts">
|
||||
<div class="col-sm-12">
|
||||
<div class="alert alert-danger" id="query-error"></div>
|
||||
<div class="alert alert-success" id="query-success"></div>
|
||||
<div class="alert alert-warning" id="database-warning"></div>
|
||||
</div>
|
||||
<div class="col-sm-12" id="alert"></div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12" id="table"></div>
|
||||
</div>
|
||||
|
||||
<div id="push"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- /.container -->
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<p class="text-muted text-right credit"><b>InfluxDB</b> v0.9.1</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- jQuery Version 1.11.1 -->
|
||||
<script src="js/jquery-2.1.4.min.js"></script>
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title" id="myModalLabel">Write Data to InfluxDB</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<textarea class="form-control" id="content-data"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
<div class="alert alert-danger" role="alert" id="modal-error"></div>
|
||||
<div class="alert alert-success" role="alert" id="modal-success"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary" id="action-send">Send Data</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap Core JavaScript -->
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
|
||||
<script src="javascripts/vendor/react-0.13.3.min.js"></script>
|
||||
<script src="javascripts/vendor/JSXTransformer.js"></script>
|
||||
<script src="javascripts/admin.js"></script>
|
||||
<script src="js/vendor/react-0.13.3.min.js"></script>
|
||||
<script src="js/vendor/jquery-2.1.4.min.js"></script>
|
||||
<script src="js/vendor/bootstrap-3.3.5.min.js"></script>
|
||||
<script src="js/vendor/dropdowns-enhancement.js"></script>
|
||||
<script src="js/admin.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,29 +0,0 @@
|
|||
var QueryField = react.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" id="query">
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
});
|
||||
|
||||
var DataTable = react.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<table class="table">
|
||||
<th>
|
||||
<td>Field</td>
|
||||
</th>
|
||||
<TableRow data={this.state.data} />
|
||||
</table>
|
||||
)
|
||||
}
|
||||
};)
|
||||
|
||||
React.render(
|
||||
<QueryField />,
|
||||
document.getElementById('content')
|
||||
);
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,412 @@
|
|||
// allow the user to store recent queries for quick retrieval
|
||||
var recentQueries = [];
|
||||
var queryPointer = null;
|
||||
|
||||
// keep track of the databases that exist on the server
|
||||
var availableDatabases = [];
|
||||
var currentlySelectedDatabase = null;
|
||||
|
||||
// connection settings for the server, with sensible defaults
|
||||
var connectionSettings = {
|
||||
hostname: "localhost",
|
||||
port: "8086",
|
||||
username: "",
|
||||
password: "",
|
||||
ssl: false
|
||||
}
|
||||
|
||||
var connectionString = function() {
|
||||
var protocol = (connectionSettings.ssl ? "https" : "http");
|
||||
var host = connectionSettings.hostname + ":" + connectionSettings.port;
|
||||
|
||||
return protocol + "://" + host;
|
||||
}
|
||||
|
||||
var getSeriesFromJSON = function(data) {
|
||||
var results = data.results[0].series;
|
||||
return results;
|
||||
}
|
||||
|
||||
// gets settings from the browser's localStorage and sets defaults if they aren't found
|
||||
var loadSettings = function() {
|
||||
var cs = localStorage.getItem("connectionSettings");
|
||||
|
||||
if (cs != null) { connectionSettings = JSON.parse(cs); }
|
||||
|
||||
document.getElementById('hostname').value = connectionSettings.hostname;
|
||||
document.getElementById('port').value = connectionSettings.port;
|
||||
document.getElementById('username').value = connectionSettings.username;
|
||||
document.getElementById('password').value = connectionSettings.password;
|
||||
document.getElementById('ssl').checked = connectionSettings.ssl;
|
||||
}
|
||||
|
||||
var updateSettings = function() {
|
||||
var hostname = document.getElementById('hostname').value;
|
||||
var port = document.getElementById('port').value;
|
||||
var username = document.getElementById('username').value;
|
||||
var password = document.getElementById('password').value;
|
||||
var ssl = document.getElementById('ssl').checked;
|
||||
|
||||
if (hostname == "") { hostname = "localhost"; }
|
||||
|
||||
if (port == "") { port = "8086"; }
|
||||
|
||||
connectionSettings.hostname = hostname;
|
||||
connectionSettings.port = port;
|
||||
connectionSettings.username = username;
|
||||
connectionSettings.password = password;
|
||||
connectionSettings.ssl = ssl;
|
||||
|
||||
localStorage.setItem("connectionSettings", JSON.stringify(connectionSettings));
|
||||
|
||||
getDatabases();
|
||||
}
|
||||
|
||||
// hide errors within the Write Data modal
|
||||
var hideModalError = function() {
|
||||
$("div#modal-error").empty().hide();
|
||||
}
|
||||
|
||||
// show errors within the Write Data modal
|
||||
var showModalError = function(message) {
|
||||
hideModalSuccess();
|
||||
|
||||
$("div#modal-error").html("<p>" + message + "</p>").show();
|
||||
}
|
||||
|
||||
// hide success messages within the Write Data modal
|
||||
var hideModalSuccess = function() {
|
||||
$("div#modal-success").empty().hide();
|
||||
}
|
||||
|
||||
// show success messages within the Write Data modal
|
||||
var showModalSuccess = function(message) {
|
||||
hideModalError();
|
||||
|
||||
$("div#modal-success").html("<p>" + message + "</p>").show();
|
||||
}
|
||||
|
||||
// hide errors from queries
|
||||
var hideQueryError = function() {
|
||||
$("div#query-error").empty().hide();
|
||||
}
|
||||
|
||||
// show errors from queries
|
||||
var showQueryError = function(message) {
|
||||
hideQuerySuccess();
|
||||
|
||||
$("div#query-error").html("<p>" + message + "</p>").show();
|
||||
}
|
||||
|
||||
// hide success messages from queries
|
||||
var hideQuerySuccess = function() {
|
||||
$("div#query-success").empty().hide();
|
||||
}
|
||||
|
||||
// show success messages from queries
|
||||
var showQuerySuccess = function(message) {
|
||||
hideQueryError();
|
||||
|
||||
$("div#query-success").html("<p>" + message + "</p>").show();
|
||||
}
|
||||
|
||||
// hide warning from database lookup
|
||||
var hideDatabaseWarning = function() {
|
||||
$("div#database-warning").empty().hide();
|
||||
}
|
||||
|
||||
// show warning from database lookup
|
||||
var showDatabaseWarning = function(message) {
|
||||
$("div#database-warning").html("<p>" + message + "</p>").show();
|
||||
}
|
||||
|
||||
// clear out the results table
|
||||
var clearResults = function() {
|
||||
$("div#table").empty();
|
||||
}
|
||||
|
||||
// handle submissions of the query bar
|
||||
var handleSubmit = function(e) {
|
||||
var queryElement = document.getElementById('query');
|
||||
var q = queryElement.value;
|
||||
|
||||
clearResults();
|
||||
|
||||
var query = $.get(connectionString() + "/query", {q: q, db: currentlySelectedDatabase}, function() {
|
||||
hideQueryError();
|
||||
hideQuerySuccess();
|
||||
});
|
||||
|
||||
recentQueries.push(q);
|
||||
queryPointer = recentQueries.length - 1;
|
||||
|
||||
query.fail(function (e) {
|
||||
if (e.status == 400) {
|
||||
var response = JSON.parse(e.responseText)
|
||||
showQueryError(response.error);
|
||||
}
|
||||
else {
|
||||
showQueryError("Couldn't connect to host (" + connectionString() + "): " + e.statusText);
|
||||
}
|
||||
});
|
||||
|
||||
query.done(function (data) {
|
||||
var firstRow = data.results[0];
|
||||
if (firstRow.error) {
|
||||
showQueryError("Server returned error: " + firstRow.error);
|
||||
return
|
||||
}
|
||||
|
||||
var series = getSeriesFromJSON(data);
|
||||
|
||||
if (series == null) {
|
||||
showQuerySuccess("Success!");
|
||||
getDatabases();
|
||||
return
|
||||
}
|
||||
|
||||
var values = series[0].values;
|
||||
|
||||
if ((values == null) || (values.length == 0)) {
|
||||
showQueryError("Query returned no results!");
|
||||
} else {
|
||||
availableDatabases = values.map(function(value) {
|
||||
return value[0];
|
||||
});
|
||||
|
||||
React.render(
|
||||
React.createElement(DataTable, {series: series}),
|
||||
document.getElementById('table')
|
||||
);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
if (e != null) { e.preventDefault(); }
|
||||
return false;
|
||||
};
|
||||
|
||||
var handleKeypress = function(e) {
|
||||
var queryElement = document.getElementById('query');
|
||||
|
||||
// key press == enter
|
||||
if (e.keyCode == 13) {
|
||||
e.preventDefault();
|
||||
handleSubmit();
|
||||
return false;
|
||||
}
|
||||
|
||||
// if we don't have any recent queries, ignore the arrow keys
|
||||
if (recentQueries.length == 0 ) { return }
|
||||
|
||||
// key press == up arrow
|
||||
if (e.keyCode == 38) {
|
||||
// TODO: stash the current query, if there is one?
|
||||
if (queryPointer == recentQueries.length - 1) {
|
||||
// this is buggy.
|
||||
//recentQueries.push(queryElement.value);
|
||||
//queryPointer = recentQueries.length - 1;
|
||||
}
|
||||
|
||||
if (queryPointer != null && queryPointer > 0) {
|
||||
queryPointer -= 1;
|
||||
queryElement.value = recentQueries[queryPointer];
|
||||
}
|
||||
}
|
||||
|
||||
// key press == down arrow
|
||||
if (e.keyCode == 40) {
|
||||
if (queryPointer != null && queryPointer < recentQueries.length - 1) {
|
||||
queryPointer += 1;
|
||||
queryElement.value = recentQueries[queryPointer];
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var QueryError = React.createClass({
|
||||
render: function() {
|
||||
return React.createElement("div", {className: "alert alert-danger"}, this.props.message)
|
||||
}
|
||||
});
|
||||
|
||||
var DataTable = React.createClass({
|
||||
render: function() {
|
||||
var tables = this.props.series.map(function(series) {
|
||||
return React.createElement("div", null,
|
||||
React.createElement("h1", null, series.name),
|
||||
React.createElement("table", {className: "table"},
|
||||
React.createElement(TableHeader, {data: series.columns}),
|
||||
React.createElement(TableBody, {data: series})
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
return React.createElement("div", null, tables);
|
||||
}
|
||||
});
|
||||
|
||||
var TableHeader = React.createClass({
|
||||
render: function() {
|
||||
var headers = this.props.data.map(function(column) {
|
||||
return React.createElement("th", null, column);
|
||||
});
|
||||
|
||||
return React.createElement("tr", null, headers);
|
||||
}
|
||||
});
|
||||
|
||||
var TableBody = React.createClass({
|
||||
render: function() {
|
||||
var tableRows = this.props.data.values.map(function (row) {
|
||||
return React.createElement(TableRow, {data: row});
|
||||
});
|
||||
|
||||
return React.createElement("tbody", null, tableRows);
|
||||
}
|
||||
});
|
||||
|
||||
var TableRow = React.createClass({
|
||||
render: function() {
|
||||
var tableData = this.props.data.map(function (data) {
|
||||
return React.createElement("td", null, data)
|
||||
});
|
||||
|
||||
return React.createElement("tr", null, tableData);
|
||||
}
|
||||
});
|
||||
|
||||
var chooseDatabase = function (databaseName) {
|
||||
currentlySelectedDatabase = databaseName;
|
||||
document.getElementById("content-current-database").innerHTML = currentlySelectedDatabase;
|
||||
}
|
||||
|
||||
var getDatabases = function () {
|
||||
var q = "SHOW DATABASES";
|
||||
|
||||
var query = $.get(connectionString() + "/query", {q: q, db: currentlySelectedDatabase}, function() {
|
||||
hideDatabaseWarning();
|
||||
});
|
||||
|
||||
query.fail(function (e) {
|
||||
if (e.status == 400) {
|
||||
var response = JSON.parse(e.responseText)
|
||||
showQueryError(response.error);
|
||||
}
|
||||
else {
|
||||
showDatabaseWarning("Couldn't fetch database list from InfluxDB (" + connectionString() + "). Try updating your connection settings and make sure the server is running.")
|
||||
availableDatabases = [];
|
||||
currentlySelectedDatabase = null;
|
||||
updateDatabaseList();
|
||||
}
|
||||
});
|
||||
|
||||
query.done(function (data) {
|
||||
var firstRow = data.results[0];
|
||||
if (firstRow.error) {
|
||||
showDatabaseWarning(firstRow.error);
|
||||
return;
|
||||
}
|
||||
|
||||
var series = getSeriesFromJSON(data);
|
||||
var values = series[0].values;
|
||||
|
||||
if ((values == null) || (values.length == 0)) {
|
||||
availableDatabases = [];
|
||||
updateDatabaseList();
|
||||
|
||||
showDatabaseWarning("Couldn't find any databases.")
|
||||
} else {
|
||||
availableDatabases = values.map(function(value) {
|
||||
return value[0];
|
||||
}).sort();
|
||||
|
||||
if (currentlySelectedDatabase == null) {
|
||||
chooseDatabase(availableDatabases[0]);
|
||||
} else if (availableDatabases.indexOf(currentlySelectedDatabase) == -1) {
|
||||
chooseDatabase(availableDatabases[0]);
|
||||
}
|
||||
updateDatabaseList();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var updateDatabaseList = function() {
|
||||
var databaseList = $("ul#content-database-list");
|
||||
|
||||
databaseList.empty();
|
||||
availableDatabases.forEach(function(database) {
|
||||
var li = $("<li><a href=\"#\">" + database + "</a></li>");
|
||||
databaseList.append(li);
|
||||
});
|
||||
|
||||
if (availableDatabases.length == 0) {
|
||||
document.getElementById("content-current-database").innerHTML = "…";
|
||||
}
|
||||
}
|
||||
|
||||
// when the page is ready, start everything up
|
||||
$(document).ready(function () {
|
||||
loadSettings();
|
||||
|
||||
getDatabases();
|
||||
|
||||
// bind to the settings cog in the navbar
|
||||
$("#action-settings").click(function (e) {
|
||||
$("#settings").toggle();
|
||||
});
|
||||
|
||||
// bind to the save button in the settings form
|
||||
$("#form-settings").submit(function (e) {
|
||||
$("#settings").hide();
|
||||
updateSettings();
|
||||
});
|
||||
|
||||
// bind to the items in the query template dropdown
|
||||
$("ul#action-template label").click(function (e) {
|
||||
var el = $(e.target);
|
||||
$("input#query").val(el.data("query")).focus();
|
||||
});
|
||||
|
||||
$("ul#content-database-list").on("click", function(e) {
|
||||
if (e.target.tagName != "A") { return; }
|
||||
|
||||
chooseDatabase(e.target.innerHTML);
|
||||
e.preventDefault();
|
||||
})
|
||||
|
||||
// load the Write Data modal
|
||||
$("button#action-send").click(function (e) {
|
||||
var data = $("textarea#content-data").val();
|
||||
|
||||
var startTime = new Date().getTime();
|
||||
var write = $.post(connectionString() + "/write?db=" + currentlySelectedDatabase, data, function() {
|
||||
});
|
||||
|
||||
write.fail(function (e) {
|
||||
if (e.status == 400) {
|
||||
showModalError("Failed to write: " + e.responseText)
|
||||
}
|
||||
else {
|
||||
showModalError("Failed to contact server: " + e.statusText)
|
||||
}
|
||||
});
|
||||
|
||||
write.done(function (data) {
|
||||
var endTime = new Date().getTime();
|
||||
var elapsed = endTime - startTime;
|
||||
showModalSuccess("Write succeeded. (" + elapsed + "ms)");
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// handle submit actions on the query bar
|
||||
var form = document.getElementById('query-form');
|
||||
form.addEventListener("submit", handleSubmit);
|
||||
|
||||
// handle keypresses on the query bar so we can get arrow keys and enter
|
||||
var query = document.getElementById('query');
|
||||
query.addEventListener("keydown", handleKeypress);
|
||||
|
||||
// make sure we start out with the query bar in focus
|
||||
document.getElementById('query').focus();
|
||||
})
|
||||
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
|
|
@ -0,0 +1,267 @@
|
|||
/* ========================================================================
|
||||
* Bootstrap Dropdowns Enhancement: dropdowns-enhancement.js v3.1.1 (Beta 1)
|
||||
* http://behigh.github.io/bootstrap_dropdowns_enhancement/
|
||||
* ========================================================================
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* ======================================================================== */
|
||||
|
||||
(function($) {
|
||||
"use strict";
|
||||
|
||||
var toggle = '[data-toggle="dropdown"]',
|
||||
disabled = '.disabled, :disabled',
|
||||
backdrop = '.dropdown-backdrop',
|
||||
menuClass = 'dropdown-menu',
|
||||
subMenuClass = 'dropdown-submenu',
|
||||
namespace = '.bs.dropdown.data-api',
|
||||
eventNamespace = '.bs.dropdown',
|
||||
openClass = 'open',
|
||||
touchSupport = 'ontouchstart' in document.documentElement,
|
||||
opened;
|
||||
|
||||
|
||||
function Dropdown(element) {
|
||||
$(element).on('click' + eventNamespace, this.toggle)
|
||||
}
|
||||
|
||||
var proto = Dropdown.prototype;
|
||||
|
||||
proto.toggle = function(event) {
|
||||
var $element = $(this);
|
||||
|
||||
if ($element.is(disabled)) return;
|
||||
|
||||
var $parent = getParent($element);
|
||||
var isActive = $parent.hasClass(openClass);
|
||||
var isSubMenu = $parent.hasClass(subMenuClass);
|
||||
var menuTree = isSubMenu ? getSubMenuParents($parent) : null;
|
||||
|
||||
closeOpened(event, menuTree);
|
||||
|
||||
if (!isActive) {
|
||||
if (!menuTree)
|
||||
menuTree = [$parent];
|
||||
|
||||
if (touchSupport && !$parent.closest('.navbar-nav').length && !menuTree[0].find(backdrop).length) {
|
||||
// if mobile we use a backdrop because click events don't delegate
|
||||
$('<div class="' + backdrop.substr(1) + '"/>').appendTo(menuTree[0]).on('click', closeOpened)
|
||||
}
|
||||
|
||||
for (var i = 0, s = menuTree.length; i < s; i++) {
|
||||
if (!menuTree[i].hasClass(openClass)) {
|
||||
menuTree[i].addClass(openClass);
|
||||
positioning(menuTree[i].children('.' + menuClass), menuTree[i]);
|
||||
}
|
||||
}
|
||||
opened = menuTree[0];
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
proto.keydown = function (e) {
|
||||
if (!/(38|40|27)/.test(e.keyCode)) return;
|
||||
|
||||
var $this = $(this);
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
if ($this.is('.disabled, :disabled')) return;
|
||||
|
||||
var $parent = getParent($this);
|
||||
var isActive = $parent.hasClass('open');
|
||||
|
||||
if (!isActive || (isActive && e.keyCode == 27)) {
|
||||
if (e.which == 27) $parent.find(toggle).trigger('focus');
|
||||
return $this.trigger('click')
|
||||
}
|
||||
|
||||
var desc = ' li:not(.divider):visible a';
|
||||
var desc1 = 'li:not(.divider):visible > input:not(disabled) ~ label';
|
||||
var $items = $parent.find(desc1 + ', ' + '[role="menu"]' + desc + ', [role="listbox"]' + desc);
|
||||
|
||||
if (!$items.length) return;
|
||||
|
||||
var index = $items.index($items.filter(':focus'));
|
||||
|
||||
if (e.keyCode == 38 && index > 0) index--; // up
|
||||
if (e.keyCode == 40 && index < $items.length - 1) index++; // down
|
||||
if (!~index) index = 0;
|
||||
|
||||
$items.eq(index).trigger('focus')
|
||||
};
|
||||
|
||||
proto.change = function (e) {
|
||||
|
||||
var
|
||||
$parent,
|
||||
$menu,
|
||||
$toggle,
|
||||
selector,
|
||||
text = '',
|
||||
$items;
|
||||
|
||||
$menu = $(this).closest('.' + menuClass);
|
||||
|
||||
$toggle = $menu.parent().find('[data-label-placement]');
|
||||
|
||||
if (!$toggle || !$toggle.length) {
|
||||
$toggle = $menu.parent().find(toggle);
|
||||
}
|
||||
|
||||
if (!$toggle || !$toggle.length || $toggle.data('placeholder') === false)
|
||||
return; // do nothing, no control
|
||||
|
||||
($toggle.data('placeholder') == undefined && $toggle.data('placeholder', $.trim($toggle.text())));
|
||||
text = $.data($toggle[0], 'placeholder');
|
||||
|
||||
$items = $menu.find('li > input:checked');
|
||||
|
||||
if ($items.length) {
|
||||
text = [];
|
||||
$items.each(function () {
|
||||
var str = $(this).parent().find('label').eq(0),
|
||||
label = str.find('.data-label');
|
||||
|
||||
if (label.length) {
|
||||
var p = $('<p></p>');
|
||||
p.append(label.clone());
|
||||
str = p.html();
|
||||
}
|
||||
else {
|
||||
str = str.html();
|
||||
}
|
||||
|
||||
|
||||
str && text.push($.trim(str));
|
||||
});
|
||||
|
||||
text = text.length < 4 ? text.join(', ') : text.length + ' selected';
|
||||
}
|
||||
|
||||
var caret = $toggle.find('.caret');
|
||||
|
||||
$toggle.html(text || ' ');
|
||||
if (caret.length)
|
||||
$toggle.append(' ') && caret.appendTo($toggle);
|
||||
|
||||
};
|
||||
|
||||
function positioning($menu, $control) {
|
||||
if ($menu.hasClass('pull-center')) {
|
||||
$menu.css('margin-right', $menu.outerWidth() / -2);
|
||||
}
|
||||
|
||||
if ($menu.hasClass('pull-middle')) {
|
||||
$menu.css('margin-top', ($menu.outerHeight() / -2) - ($control.outerHeight() / 2));
|
||||
}
|
||||
}
|
||||
|
||||
function closeOpened(event, menuTree) {
|
||||
if (opened) {
|
||||
|
||||
if (!menuTree) {
|
||||
menuTree = [opened];
|
||||
}
|
||||
|
||||
var parent;
|
||||
|
||||
if (opened[0] !== menuTree[0][0]) {
|
||||
parent = opened;
|
||||
} else {
|
||||
parent = menuTree[menuTree.length - 1];
|
||||
if (parent.parent().hasClass(menuClass)) {
|
||||
parent = parent.parent();
|
||||
}
|
||||
}
|
||||
|
||||
parent.find('.' + openClass).removeClass(openClass);
|
||||
|
||||
if (parent.hasClass(openClass))
|
||||
parent.removeClass(openClass);
|
||||
|
||||
if (parent === opened) {
|
||||
opened = null;
|
||||
$(backdrop).remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getSubMenuParents($submenu) {
|
||||
var result = [$submenu];
|
||||
var $parent;
|
||||
while (!$parent || $parent.hasClass(subMenuClass)) {
|
||||
$parent = ($parent || $submenu).parent();
|
||||
if ($parent.hasClass(menuClass)) {
|
||||
$parent = $parent.parent();
|
||||
}
|
||||
if ($parent.children(toggle)) {
|
||||
result.unshift($parent);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function getParent($this) {
|
||||
var selector = $this.attr('data-target');
|
||||
|
||||
if (!selector) {
|
||||
selector = $this.attr('href');
|
||||
selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, ''); //strip for ie7
|
||||
}
|
||||
|
||||
var $parent = selector && $(selector);
|
||||
|
||||
return $parent && $parent.length ? $parent : $this.parent()
|
||||
}
|
||||
|
||||
// DROPDOWN PLUGIN DEFINITION
|
||||
// ==========================
|
||||
|
||||
var old = $.fn.dropdown;
|
||||
|
||||
$.fn.dropdown = function (option) {
|
||||
return this.each(function () {
|
||||
var $this = $(this);
|
||||
var data = $this.data('bs.dropdown');
|
||||
|
||||
if (!data) $this.data('bs.dropdown', (data = new Dropdown(this)));
|
||||
if (typeof option == 'string') data[option].call($this);
|
||||
})
|
||||
};
|
||||
|
||||
$.fn.dropdown.Constructor = Dropdown;
|
||||
|
||||
$.fn.dropdown.clearMenus = function(e) {
|
||||
$(backdrop).remove();
|
||||
$('.' + openClass + ' ' + toggle).each(function () {
|
||||
var $parent = getParent($(this));
|
||||
var relatedTarget = { relatedTarget: this };
|
||||
if (!$parent.hasClass('open')) return;
|
||||
$parent.trigger(e = $.Event('hide' + eventNamespace, relatedTarget));
|
||||
if (e.isDefaultPrevented()) return;
|
||||
$parent.removeClass('open').trigger('hidden' + eventNamespace, relatedTarget);
|
||||
});
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
// DROPDOWN NO CONFLICT
|
||||
// ====================
|
||||
|
||||
$.fn.dropdown.noConflict = function () {
|
||||
$.fn.dropdown = old;
|
||||
return this
|
||||
};
|
||||
|
||||
|
||||
$(document).off(namespace)
|
||||
.on('click' + namespace, closeOpened)
|
||||
.on('click' + namespace, toggle, proto.toggle)
|
||||
.on('click' + namespace, '.dropdown-menu > li > input[type="checkbox"] ~ label, .dropdown-menu > li > input[type="checkbox"], .dropdown-menu.noclose > li', function (e) {
|
||||
e.stopPropagation()
|
||||
})
|
||||
.on('change' + namespace, '.dropdown-menu > li > input[type="checkbox"], .dropdown-menu > li > input[type="radio"]', proto.change)
|
||||
.on('keydown' + namespace, toggle + ', [role="menu"], [role="listbox"]', proto.keydown)
|
||||
}(jQuery));
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<!-- Basic Page Needs
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<meta charset="utf-8">
|
||||
<title>InfluxDB</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
<!-- Mobile Specific Metas
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- FONT
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<link href="http://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
|
||||
|
||||
<!-- JS
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<script src="javascripts/vendor/react-0.13.3.min.js"></script>
|
||||
<script src="javascripts/vendor/JSXTransformer.js"></script>
|
||||
|
||||
<!-- CSS
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<link rel="stylesheet" href="css/normalize.css">
|
||||
<link rel="stylesheet" href="css/skeleton.css">
|
||||
|
||||
<!-- Favicon
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<link rel="icon" type="image/png" href="images/favicon.png">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/jsx">
|
||||
console.log("hello");
|
||||
React.render(
|
||||
<h1>Hello, world!</h1>,
|
||||
document.getElementById('example')
|
||||
);
|
||||
</script>
|
||||
|
||||
<!-- Primary Page Layout
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="one-half column" style="margin-top: 25%">
|
||||
<div id="example"></div>
|
||||
<h4>Basic Page</h4>
|
||||
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton documentation</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- End Document
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue