ui: Add Stores page to React UI

CHANGELOG.md

@@ -32,6 +32,7 @@ We use *breaking* word for marking changes that are not backward compatible (rel
 ### Added
 
 - [#2671](https://github.com/thanos-io/thanos/pull/2671) Tools: bucket replicate now allows passing repeated `--compaction` and `--resolution` flags.
+- [#2754](https://github.com/thanos-io/thanos/pull/2671) UI: add stores page in the React UI.
 
 ## [v0.13.0](https://github.com/thanos-io/thanos/releases) - IN PROGRESS
 

pkg/query/storeset.go

@@ -49,12 +49,12 @@ type RuleSpec interface {
 
 type StoreStatus struct {
 	Name      string             `json:"name"`
-	LastCheck time.Time          `json:"last_check"`
-	LastError error              `json:"last_error"`
-	LabelSets []storepb.LabelSet `json:"label_sets"`
-	StoreType component.StoreAPI `json:"store_type"`
-	MinTime   int64              `json:"min_time"`
-	MaxTime   int64              `json:"max_time"`
+	LastCheck time.Time          `json:"lastCheck"`
+	LastError error              `json:"lastError"`
+	LabelSets []storepb.LabelSet `json:"labelSets"`
+	StoreType component.StoreAPI `json:"-"`
+	MinTime   int64              `json:"minTime"`
+	MaxTime   int64              `json:"maxTime"`
 }
 
 type grpcStoreSpec struct {

pkg/ui/react-app/src/App.tsx

@@ -6,6 +6,7 @@ import { Alerts, Config, Flags, Rules, ServiceDiscovery, Status, Targets, TSDBSt
 import PathPrefixProps from './types/PathPrefixProps';
 import ThanosComponentProps from './thanos/types/ThanosComponentProps';
 import Navigation from './thanos/Navbar';
+import { Stores } from './thanos/pages';
 
 import './App.css';
 
@@ -30,6 +31,7 @@ const App: FC<PathPrefixProps & ThanosComponentProps> = ({ pathPrefix, thanosCom
           <Status path="/status" pathPrefix={pathPrefix} />
           <TSDBStatus path="/tsdb-status" pathPrefix={pathPrefix} />
           <Targets path="/targets" pathPrefix={pathPrefix} />
+          <Stores path="/stores" />
         </Router>
       </Container>
     </>

pkg/ui/react-app/src/thanos/Navbar.tsx

@@ -10,7 +10,10 @@ interface NavConfig {
 }
 
 const navConfig: { [component: string]: NavConfig[] } = {
-  query: [{ name: 'Graph', uri: '/new/graph' }],
+  query: [
+    { name: 'Graph', uri: '/new/graph' },
+    { name: 'Stores', uri: '/new/stores' },
+  ],
 };
 
 const Navigation: FC<PathPrefixProps & ThanosComponentProps> = ({ pathPrefix, thanosComponent }) => {

pkg/ui/react-app/src/thanos/pages/index.tsx

@@ -1 +1,3 @@
-export {};
+import Stores from './stores/Stores';
+
+export { Stores };

pkg/ui/react-app/src/thanos/pages/stores/StoreLabels.tsx

@@ -0,0 +1,21 @@
+import React, { FC } from 'react';
+import { Badge, ListGroup, ListGroupItem } from 'reactstrap';
+import { Labels } from './store';
+
+export type StoreLabelsProps = { labelSet: Labels[] };
+
+export const StoreLabels: FC<StoreLabelsProps> = ({ labelSet }) => {
+  return (
+    <ListGroup>
+      {labelSet.map(({ labels }, idx) => (
+        <ListGroupItem key={idx}>
+          {labels.map(label => (
+            <Badge key={label.name} color="primary" style={{ margin: '0px 5px' }}>{`${label.name}="${label.value}"`}</Badge>
+          ))}
+        </ListGroupItem>
+      ))}
+    </ListGroup>
+  );
+};
+
+export default StoreLabels;

pkg/ui/react-app/src/thanos/pages/stores/StorePoolPanel.tsx

@@ -0,0 +1,80 @@
+import React, { FC } from 'react';
+import { Container, Collapse, Table, Badge } from 'reactstrap';
+import { now } from 'moment';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faInfinity } from '@fortawesome/free-solid-svg-icons';
+import { ToggleMoreLess } from '../../../components/ToggleMoreLess';
+import { useLocalStorage } from '../../../hooks/useLocalStorage';
+import { getColor } from '../../../pages/targets/target';
+import { formatRelative, formatTime, parseTime } from '../../../utils';
+import { Store } from './store';
+import StoreLabels from './StoreLabels';
+
+export type StorePoolPanelProps = { title: string; storePool: Store[] };
+
+export const columns = [
+  'Endpoint',
+  'Status',
+  'Announced LabelSets',
+  'Min Time',
+  'Max Time',
+  'Last Successful Health Check',
+  'Last Message',
+];
+
+const MAX_TIME = 9223372036854775807;
+
+export const StorePoolPanel: FC<StorePoolPanelProps> = ({ title, storePool }) => {
+  const [{ expanded }, setOptions] = useLocalStorage(`store-pool-${title}-expanded`, { expanded: true });
+
+  return (
+    <Container fluid>
+      <ToggleMoreLess event={(): void => setOptions({ expanded: !expanded })} showMore={expanded}>
+        <span style={{ textTransform: 'capitalize' }}>{title}</span>
+      </ToggleMoreLess>
+      <Collapse isOpen={expanded}>
+        <Table size="sm" bordered hover>
+          <thead>
+            <tr key="header">
+              {columns.map(column => (
+                <th key={column}>{column}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {storePool.map((store: Store) => {
+              const { name, minTime, maxTime, labelSets, lastCheck, lastError } = store;
+              const health = lastError ? 'down' : 'up';
+              const color = getColor(health);
+
+              return (
+                <tr key={name}>
+                  <td>{name}</td>
+                  <td>
+                    <Badge color={color}>{health.toUpperCase()}</Badge>
+                  </td>
+                  <td>
+                    <StoreLabels labelSet={labelSets} />
+                  </td>
+                  <td>{minTime >= MAX_TIME ? <FontAwesomeIcon icon={faInfinity} /> : formatTime(minTime)}</td>
+                  <td>{maxTime >= MAX_TIME ? <FontAwesomeIcon icon={faInfinity} /> : formatTime(maxTime)}</td>
+                  <td>
+                    {parseTime(lastCheck) >= MAX_TIME ? (
+                      <FontAwesomeIcon icon={faInfinity} />
+                    ) : (
+                      formatRelative(lastCheck, now())
+                    )}{' '}
+                    ago
+                  </td>
+                  <td>{lastError ? <Badge color={color}>{lastError}</Badge> : null}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </Table>
+      </Collapse>
+    </Container>
+  );
+};
+
+export default StorePoolPanel;

pkg/ui/react-app/src/thanos/pages/stores/Stores.tsx

@@ -0,0 +1,38 @@
+import React, { FC } from 'react';
+import { RouteComponentProps } from '@reach/router';
+import { withStatusIndicator } from '../../../components/withStatusIndicator';
+import { useFetch } from '../../../hooks/useFetch';
+import { Store } from './store';
+import { StorePoolPanel } from './StorePoolPanel';
+
+interface StoreListProps {
+  [storeType: string]: Store[];
+}
+
+export const StoreContent: FC<{ data: StoreListProps }> = ({ data }) => {
+  return (
+    <>
+      {Object.keys(data).map<JSX.Element>(storeGroup => (
+        <StorePoolPanel key={storeGroup} title={storeGroup} storePool={data[storeGroup]} />
+      ))}
+    </>
+  );
+};
+
+const StoresWithStatusIndicator = withStatusIndicator(StoreContent);
+
+export const Stores: FC<RouteComponentProps> = () => {
+  const { response, error, isLoading } = useFetch<StoreListProps>(`/api/v1/stores`);
+  const { status: responseStatus } = response;
+  const badResponse = responseStatus !== 'success' && responseStatus !== 'start fetching';
+
+  return (
+    <StoresWithStatusIndicator
+      data={response.data}
+      error={badResponse ? new Error(responseStatus) : error}
+      isLoading={isLoading}
+    />
+  );
+};
+
+export default Stores;

pkg/ui/react-app/src/thanos/pages/stores/store.ts

@@ -0,0 +1,17 @@
+export interface Label {
+  name: string;
+  value: string;
+}
+
+export interface Labels {
+  labels: Label[];
+}
+
+export interface Store {
+  name: string;
+  minTime: number;
+  maxTime: number;
+  lastError: string | null;
+  lastCheck: string;
+  labelSets: Labels[];
+}

pkg/ui/ui.go

@@ -34,6 +34,7 @@ var (
 		"/targets",
 		"/tsdb-status",
 		"/version",
+		"/stores",
 	}
 )