Add links between classic and new UIs (#6191)

The links preserve the graph settings between the two UIs.

Fixes https://github.com/prometheus/prometheus/issues/6162

Signed-off-by: Julius Volz <julius.volz@gmail.com>

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;
 }

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 (
       <Container fluid={true}>
+        <Row>
+          <Col>
+            <Button
+              className="float-right classic-ui-btn"
+              color="link"
+              onClick={() => {window.location.pathname = "../../graph"}}
+              size="sm">
+                Return to classic UI
+            </Button>
+          </Col>
+        </Row>
         <PanelList />
       </Container>
     );

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;
+}

web/ui/templates/graph.html

@@ -24,10 +24,13 @@
 
 {{define "content"}}
     <div id="graph_container" class="container-fluid">
+      <div class="clearfix">
         <div class="query-history">
-            <i class="glyphicon glyphicon-unchecked"></i>
-            <button type="button" class="search-history" title="search previous queries">Enable query history</button>
+          <i class="glyphicon glyphicon-unchecked"></i>
+          <button type="button" class="search-history" title="search previous queries">Enable query history</button>
         </div>
+        <button type="button" class="btn btn-link btn-sm new_ui_button" onclick="window.location.pathname='{{ pathPrefix }}/static/graph-new/app.html'">Try experimental React UI</a>
+      </div>
     </div>
 
     <div class="container-fluid">