ui: Pass component specific variables as map to BaseUI

Signed-off-by: Prem Kumar <prmsrswt@gmail.com>
thanos-io · Jul 28, 2020 · a842729 · a842729
1 parent a314101
commit a842729
Show file tree

Hide file tree

Showing 11 changed files with 67 additions and 51 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -27,6 +27,7 @@ We use *breaking* word for marking changes that are not backward compatible (rel
 - [#2832](https://github.com/thanos-io/thanos/pull/2832) ui: React: Add runtime and build info page
 - [#2305](https://github.com/thanos-io/thanos/pull/2305) Receive,Sidecar,Ruler: Propagate correct (stricter) MinTime for no-block TSDBs.
 - [#2892](https://github.com/thanos-io/thanos/pull/2892) Receive: Receiver fails when the initial upload fails.
+- [#2865](https://github.com/thanos-io/thanos/pull/2865) ui: Migrate Thanos Ruler UI to React
 
 ### Changed
 

diff --git a/pkg/ui/bindata.go b/pkg/ui/bindata.go
diff --git a/pkg/ui/bucket.go b/pkg/ui/bucket.go
@@ -31,8 +31,12 @@ type Bucket struct {
 }
 
 func NewBucketUI(logger log.Logger, label, externalPrefix, prefixHeader string) *Bucket {
+	tmplVariables := map[string]string{
+		"Component": component.Bucket.String(),
+	}
+
 	return &Bucket{
-		BaseUI:         NewBaseUI(log.With(logger, "component", "bucketUI"), "bucket_menu.html", queryTmplFuncs(), externalPrefix, prefixHeader, component.Bucket),
+		BaseUI:         NewBaseUI(log.With(logger, "component", "bucketUI"), "bucket_menu.html", queryTmplFuncs(), tmplVariables, externalPrefix, prefixHeader, component.Bucket),
 		Blocks:         "[]",
 		Label:          label,
 		externalPrefix: externalPrefix,

diff --git a/pkg/ui/query.go b/pkg/ui/query.go
@@ -35,8 +35,12 @@ type Query struct {
 }
 
 func NewQueryUI(logger log.Logger, reg prometheus.Registerer, storeSet *query.StoreSet, externalPrefix, prefixHeader string, runtimeInfo v1.RuntimeInfoFn, buildInfo v1.ThanosVersion) *Query {
+	tmplVariables := map[string]string{
+		"Component": component.Query.String(),
+	}
+
 	return &Query{
-		BaseUI:         NewBaseUI(logger, "query_menu.html", queryTmplFuncs(), externalPrefix, prefixHeader, component.Query),
+		BaseUI:         NewBaseUI(logger, "query_menu.html", queryTmplFuncs(), tmplVariables, externalPrefix, prefixHeader, component.Query),
 		storeSet:       storeSet,
 		externalPrefix: externalPrefix,
 		prefixHeader:   prefixHeader,

diff --git a/pkg/ui/react-app/public/index.html b/pkg/ui/react-app/public/index.html
@@ -11,7 +11,7 @@
 
     <!--
       This constant's placeholder magic value is replaced during serving by Thanos
-      and set to Thanos's external URL path. It gets prepended to all links back
+      and set to Thanos' external URL path. It gets prepended to all links back
       to Thanos, both for asset loading as well as API accesses.
     -->
     <script>const GLOBAL_PATH_PREFIX="{{ pathPrefix }}";</script>
@@ -34,7 +34,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Thanos Expression Browser</title>
+    <title>Thanos | Highly available Prometheus setup</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/pkg/ui/react-app/src/App.tsx b/pkg/ui/react-app/src/App.tsx
@@ -11,8 +11,8 @@ import { Stores, ErrorBoundary } from './thanos/pages';
 import './App.css';
 
 const defaultRouteConfig: { [component: string]: string } = {
-  query: '/new/graph',
-  rule: '/new/alerts',
+  query: '/graph',
+  rule: '/alerts',
 };
 
 const App: FC<PathPrefixProps & ThanosComponentProps> = ({ pathPrefix, thanosComponent }) => {
@@ -25,7 +25,7 @@ const App: FC<PathPrefixProps & ThanosComponentProps> = ({ pathPrefix, thanosCom
       />
       <Container fluid style={{ paddingTop: 70 }}>
         <Router basepath={`${pathPrefix}/new`}>
-          <Redirect from="/" to={`${pathPrefix}${defaultRouteConfig[thanosComponent]}`} />
+          <Redirect from="/" to={`${pathPrefix}/new${defaultRouteConfig[thanosComponent]}`} />
 
           {/*
             NOTE: Any route added here needs to also be added to the list of

diff --git a/pkg/ui/react-app/src/thanos/Navbar.tsx b/pkg/ui/react-app/src/thanos/Navbar.tsx
@@ -53,7 +53,7 @@ const Navigation: FC<PathPrefixProps & NavigationProps> = ({ pathPrefix, thanosC
   return (
     <Navbar className="mb-3" dark color="dark" expand="md" fixed="top">
       <NavbarToggler onClick={toggle} />
-      <Link className="navbar-brand" to={`${pathPrefix}${defaultRoute}`}>
+      <Link className="navbar-brand" to={`${pathPrefix}/new${defaultRoute}`}>
         Thanos - {thanosComponent[0].toUpperCase()}
         {thanosComponent.substr(1, thanosComponent.length)}
       </Link>
@@ -88,7 +88,7 @@ const Navigation: FC<PathPrefixProps & NavigationProps> = ({ pathPrefix, thanosC
             <NavLink href="https://thanos.io/getting-started.md/">Help</NavLink>
           </NavItem>
           <NavItem>
-            <NavLink href={`${pathPrefix}/graph${window.location.search}`}>Classic UI</NavLink>
+            <NavLink href={`${pathPrefix}${defaultRoute}${window.location.search}`}>Classic UI</NavLink>
           </NavItem>
         </Nav>
       </Collapse>

diff --git a/pkg/ui/react-app/src/thanos/config.ts b/pkg/ui/react-app/src/thanos/config.ts
@@ -1,6 +1,6 @@
 declare const THANOS_QUERY_URL: string;
 
 export let queryURL = THANOS_QUERY_URL;
-if (queryURL === '' || queryURL === '{{ $queryURL }}') {
+if (queryURL === '' || queryURL === '{{ .queryURL }}') {
   queryURL = 'http://localhost:10902';
 }
diff --git a/pkg/ui/rule.go b/pkg/ui/rule.go
@@ -32,8 +32,13 @@ type Rule struct {
 }
 
 func NewRuleUI(logger log.Logger, reg prometheus.Registerer, ruleManager *thanosrules.Manager, queryURL, externalPrefix, prefixHeader string) *Rule {
+	tmplVariables := map[string]string{
+		"Component": component.Rule.String(),
+		"queryURL":  queryURL,
+	}
+
 	return &Rule{
-		BaseUI:         NewBaseUI(logger, "rule_menu.html", ruleTmplFuncs(queryURL), externalPrefix, prefixHeader, component.Rule),
+		BaseUI:         NewBaseUI(logger, "rule_menu.html", ruleTmplFuncs(queryURL), tmplVariables, externalPrefix, prefixHeader, component.Rule),
 		externalPrefix: externalPrefix,
 		prefixHeader:   prefixHeader,
 		ruleManager:    ruleManager,

diff --git a/pkg/ui/templates/rule_menu.html b/pkg/ui/templates/rule_menu.html
@@ -12,6 +12,9 @@
             <li class="nav-item">
               <a class="nav-link" href="https://thanos.io/getting-started.md/" target="_blank">Help</a>
             </li>
+            <li class="nav-item">
+              <a class="nav-link" href="{{ pathPrefix }}/new/" target="_blank">New UI</a>
+            </li>
           </ul>
         </div>
       </div>

diff --git a/pkg/ui/ui.go b/pkg/ui/ui.go
@@ -42,15 +42,16 @@ type BaseUI struct {
 	logger                       log.Logger
 	menuTmpl                     string
 	tmplFuncs                    template.FuncMap
+	tmplVariables                map[string]string
 	externalPrefix, prefixHeader string
 	component                    component.Component
 }
 
-func NewBaseUI(logger log.Logger, menuTmpl string, funcMap template.FuncMap, externalPrefix, prefixHeader string, component component.Component) *BaseUI {
+func NewBaseUI(logger log.Logger, menuTmpl string, funcMap template.FuncMap, tmplVariables map[string]string, externalPrefix, prefixHeader string, component component.Component) *BaseUI {
 	funcMap["pathPrefix"] = func() string { return "" }
 	funcMap["buildVersion"] = func() string { return version.Revision }
 
-	return &BaseUI{logger: logger, menuTmpl: menuTmpl, tmplFuncs: funcMap, externalPrefix: externalPrefix, prefixHeader: prefixHeader, component: component}
+	return &BaseUI{logger: logger, menuTmpl: menuTmpl, tmplFuncs: funcMap, tmplVariables: tmplVariables, externalPrefix: externalPrefix, prefixHeader: prefixHeader, component: component}
 }
 func (bu *BaseUI) serveStaticAsset(w http.ResponseWriter, req *http.Request) {
 	fp := route.Param(req.Context(), "filepath")
@@ -88,9 +89,7 @@ func (bu *BaseUI) serveReactIndex(index string, w http.ResponseWriter, req *http
 		http.Error(w, err.Error(), http.StatusInternalServerError)
 		return
 	}
-	if err := tmpl.Execute(w, map[string]string{
-		"Component": bu.component.String(),
-	}); err != nil {
+	if err := tmpl.Execute(w, bu.tmplVariables); err != nil {
 		level.Warn(bu.logger).Log("msg", "template expansion failed", "err", err)
 	}
 }