diff --git a/web/ui/react-app/src/App.css b/web/ui/react-app/src/App.css
index 612d3bbc8a..a540874f12 100644
--- a/web/ui/react-app/src/App.css
+++ b/web/ui/react-app/src/App.css
@@ -2,6 +2,10 @@ body {
padding-top: 10px; /* TODO remove */
}
+button.classic-ui-btn {
+ padding: 10px 0;
+}
+
.panel {
margin-bottom: 20px;
}
diff --git a/web/ui/react-app/src/App.tsx b/web/ui/react-app/src/App.tsx
index e06e5e1f47..4c2dfb5d60 100755
--- a/web/ui/react-app/src/App.tsx
+++ b/web/ui/react-app/src/App.tsx
@@ -1,6 +1,11 @@
import React, { Component } from 'react';
-import { Container } from 'reactstrap';
+import {
+ Button,
+ Container,
+ Col,
+ Row,
+} from 'reactstrap';
import PanelList from './PanelList';
@@ -10,6 +15,17 @@ class App extends Component {
render() {
return (
+
+
+
+
+
);
diff --git a/web/ui/static/css/graph.css b/web/ui/static/css/graph.css
index fe39891c2b..29ecd1f59d 100644
--- a/web/ui/static/css/graph.css
+++ b/web/ui/static/css/graph.css
@@ -9,6 +9,7 @@ body {
div.query-history {
font-size: 0.8em;
padding-top: 1em;
+ float: left;
}
div.query-history:hover {
@@ -169,7 +170,7 @@ input[name="end_input"], input[name="range_input"] {
.prometheus_input_group .input {
width: 100px;
-
+
padding: 5px 12px 6px 12px;
font-size: 14px;
line-height: 1.42857143;
@@ -206,3 +207,7 @@ input[name="end_input"], input[name="range_input"] {
li.active, .dropdown-item:focus, .dropdown-item:hover {
background-color: steelblue;
}
+
+button.new_ui_button {
+ float: right;
+}
diff --git a/web/ui/templates/graph.html b/web/ui/templates/graph.html
index 69245dc136..41a066256c 100644
--- a/web/ui/templates/graph.html
+++ b/web/ui/templates/graph.html
@@ -24,10 +24,13 @@
{{define "content"}}
+
-
-
+
+
+