-
-
setUseLocalTime(target.checked)}
- defaultChecked={useLocalTime}
+
+
+
- Use local time
+ Label matcher copied to clipboard
+
+
+ setUseLocalTime(target.checked)}
+ defaultChecked={useLocalTime}
+ >
+ Use local time
+
+ setEnableQueryHistory(target.checked)}
+ defaultChecked={enableQueryHistory}
+ >
+ Enable query history
+
+ setEnableAutocomplete(target.checked)}
+ defaultChecked={enableAutocomplete}
+ >
+ Enable autocomplete
+
+
+
setEnableHighlighting(target.checked)}
+ defaultChecked={enableHighlighting}
+ >
+ Enable highlighting
setEnableQueryHistory(target.checked)}
- defaultChecked={enableQueryHistory}
+ id="linter-checkbox"
+ onChange={({ target }) => setEnableLinter(target.checked)}
+ defaultChecked={enableLinter}
>
- Enable query history
-
-
setEnableAutocomplete(target.checked)}
- defaultChecked={enableAutocomplete}
- >
- Enable autocomplete
+ Enable linter
- {(delta > 30 || timeErr) && (
-
- Warning:
- {timeErr && `Unexpected response status when fetching server time: ${timeErr.message}`}
- {delta >= 30 &&
- `Error fetching server time: Detected ${delta} seconds time difference between your browser and the server. Prometheus relies on accurate time and time drift might cause unexpected query results.`}
-
- )}
- {metricsErr && (
-
- Warning:
- Error fetching metrics list: Unexpected response status when fetching metric names: {metricsErr.message}
-
- )}
-
+ {(delta > 30 || timeErr) && (
+
+ Warning:
+ {timeErr && `Unexpected response status when fetching server time: ${timeErr.message}`}
+ {delta >= 30 &&
+ `Error fetching server time: Detected ${delta} seconds time difference between your browser and the server. Prometheus relies on accurate time and time drift might cause unexpected query results.`}
+
+ )}
+ {metricsErr && (
+
+ Warning:
+ Error fetching metrics list: Unexpected response status when fetching metric names: {metricsErr.message}
+
+ )}
+
+
);
};
diff --git a/web/ui/react-app/src/pages/graph/SeriesName.test.tsx b/web/ui/react-app/src/pages/graph/SeriesName.test.tsx
index f75cf9603d..bd271d5a90 100755
--- a/web/ui/react-app/src/pages/graph/SeriesName.test.tsx
+++ b/web/ui/react-app/src/pages/graph/SeriesName.test.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, ShallowWrapper } from 'enzyme';
import SeriesName from './SeriesName';
describe('SeriesName', () => {
@@ -51,26 +51,36 @@ describe('SeriesName', () => {
{ name: 'label3', value: 'value_3', className: 'legend-label-name' },
{ name: '}', className: 'legend-label-brace' },
];
+
+ const testLabelContainerElement = (text: string, expectedText: string, container: ShallowWrapper) => {
+ expect(text).toEqual(expectedText);
+ expect(container.prop('className')).toEqual('legend-label-container');
+ expect(container.childAt(0).prop('className')).toEqual('legend-label-name');
+ expect(container.childAt(2).prop('className')).toEqual('legend-label-value');
+ };
+
testCases.forEach((tc, i) => {
const child = seriesName.childAt(i);
+ const firstChildElement = child.childAt(0);
+ const firstChildElementClass = firstChildElement.prop('className');
const text = child
.children()
.map((ch) => ch.text())
.join('');
switch (child.children().length) {
case 1:
- expect(text).toEqual(tc.name);
- expect(child.prop('className')).toEqual(tc.className);
+ switch (firstChildElementClass) {
+ case 'legend-label-container':
+ testLabelContainerElement(text, `${tc.name}="${tc.value}"`, firstChildElement);
+ break;
+ default:
+ expect(text).toEqual(tc.name);
+ expect(child.prop('className')).toEqual(tc.className);
+ }
break;
- case 3:
- expect(text).toEqual(`${tc.name}="${tc.value}"`);
- expect(child.childAt(0).prop('className')).toEqual('legend-label-name');
- expect(child.childAt(2).prop('className')).toEqual('legend-label-value');
- break;
- case 4:
- expect(text).toEqual(`, ${tc.name}="${tc.value}"`);
- expect(child.childAt(1).prop('className')).toEqual('legend-label-name');
- expect(child.childAt(3).prop('className')).toEqual('legend-label-value');
+ case 2:
+ const container = child.childAt(1);
+ testLabelContainerElement(text, `, ${tc.name}="${tc.value}"`, container);
break;
default:
fail('incorrect number of children: ' + child.children().length);
diff --git a/web/ui/react-app/src/pages/graph/SeriesName.tsx b/web/ui/react-app/src/pages/graph/SeriesName.tsx
index d76a780bac..59abfa59dc 100644
--- a/web/ui/react-app/src/pages/graph/SeriesName.tsx
+++ b/web/ui/react-app/src/pages/graph/SeriesName.tsx
@@ -1,4 +1,5 @@
-import React, { FC } from 'react';
+import React, { FC, useContext } from 'react';
+import { useToastContext } from '../../contexts/ToastContext';
import { metricToSeriesName } from '../../utils';
interface SeriesNameProps {
@@ -7,6 +8,20 @@ interface SeriesNameProps {
}
const SeriesName: FC
= ({ labels, format }) => {
+ const setClipboardMsg = useToastContext();
+
+ const toClipboard = (e: React.MouseEvent) => {
+ const copyText = e.currentTarget.innerText || '';
+ navigator.clipboard
+ .writeText(copyText.trim())
+ .then(() => {
+ setClipboardMsg(copyText);
+ })
+ .catch((reason) => {
+ console.error(`unable to copy text: ${reason}`);
+ });
+ };
+
const renderFormatted = (): React.ReactElement => {
const labelNodes: React.ReactElement[] = [];
let first = true;
@@ -18,7 +33,9 @@ const SeriesName: FC = ({ labels, format }) => {
labelNodes.push(
{!first && ', '}
- {label}="{labels[label]}"
+
+ {label}="{labels[label]}"
+
);
diff --git a/web/ui/react-app/src/themes/_shared.scss b/web/ui/react-app/src/themes/_shared.scss
index e0af8191c2..20658a8afd 100644
--- a/web/ui/react-app/src/themes/_shared.scss
+++ b/web/ui/react-app/src/themes/_shared.scss
@@ -7,7 +7,7 @@
Example:
$foo = '#000';
-
+
2. Add a style rule in _shared.scss (this file) that uses new variable.
Example:
@@ -58,7 +58,7 @@
.metrics-explorer .metric:hover {
background: $metrics-explorer-bg;
}
-button.metrics-explorer-btn {
+button.expression-input-action-btn {
color: $input-group-addon-color;
background-color: $input-group-addon-bg;
border: $input-border-width solid $input-group-addon-border-color;
@@ -114,7 +114,7 @@ button.execute-btn {
}
input[type='checkbox']:checked + label {
- color: #286090;
+ color: $checked-checkbox-color;
}
.custom-control-label {
@@ -275,6 +275,14 @@ input[type='checkbox']:checked + label {
margin-right: 1px;
}
+.legend-label-container:hover {
+ background-color: #add6ff;
+ border-radius: 3px;
+ padding-bottom: 1px;
+ color: #495057;
+ cursor: pointer;
+}
+
.legend-label-name {
font-weight: bold;
}
diff --git a/web/ui/react-app/src/themes/dark.scss b/web/ui/react-app/src/themes/dark.scss
index 063077941d..0989c833ca 100644
--- a/web/ui/react-app/src/themes/dark.scss
+++ b/web/ui/react-app/src/themes/dark.scss
@@ -11,12 +11,14 @@ $config-yaml-color: $black;
$config-yaml-bg: $gray-500;
$config-yaml-border: $gray-700;
-$query-stats-color: $secondary;
+$query-stats-color: lighten($secondary, 20%);
$metrics-explorer-bg: $dropdown-link-hover-bg;
$clear-time-btn-bg: $secondary;
+$checked-checkbox-color: #60a5fa;
+
.bootstrap-dark {
@import './shared';
}
diff --git a/web/ui/react-app/src/themes/light.scss b/web/ui/react-app/src/themes/light.scss
index 4bcf7e67f6..8e6b10e804 100644
--- a/web/ui/react-app/src/themes/light.scss
+++ b/web/ui/react-app/src/themes/light.scss
@@ -16,6 +16,8 @@ $metrics-explorer-bg: #efefef;
$clear-time-btn-bg: $white;
+$checked-checkbox-color: #286090;
+
.bootstrap {
@import './shared';
}
diff --git a/web/ui/react-app/src/utils/index.ts b/web/ui/react-app/src/utils/index.ts
index 5e05c25e16..d51c1e77c3 100644
--- a/web/ui/react-app/src/utils/index.ts
+++ b/web/ui/react-app/src/utils/index.ts
@@ -250,15 +250,15 @@ export const setQuerySearchFilter = (search: string) => {
export const getQuerySearchFilter = (): string => {
const locationSearch = window.location.search;
const params = new URLSearchParams(locationSearch);
- const search = params.get('search') || '';
- return search;
+ return params.get('search') || '';
};
export const createExpressionLink = (expr: string): string => {
return `../graph?g0.expr=${encodeURIComponent(expr)}&g0.tab=1&g0.stacked=0&g0.show_exemplars=0.g0.range_input=1h.`;
};
-export const mapObjEntries = (
+// eslint-disable-next-line @typescript-eslint/no-explicit-any,
+export const mapObjEntries = (
o: T,
cb: ([k, v]: [string, T[key]], i: number, arr: [string, T[key]][]) => Z
): Z[] => Object.entries(o).map(cb);
diff --git a/web/web.go b/web/web.go
index 43cfc96e7a..2a913a60dc 100644
--- a/web/web.go
+++ b/web/web.go
@@ -38,7 +38,7 @@ import (
"github.com/go-kit/log"
"github.com/go-kit/log/level"
"github.com/grafana/regexp"
- conntrack "github.com/mwitkow/go-conntrack"
+ "github.com/mwitkow/go-conntrack"
"github.com/pkg/errors"
"github.com/prometheus/client_golang/prometheus"
"github.com/prometheus/client_golang/prometheus/promhttp"
@@ -471,10 +471,16 @@ func New(logger log.Logger, o *Options) *Handler {
w.WriteHeader(http.StatusOK)
fmt.Fprintf(w, o.AppName+" is Healthy.\n")
})
+ router.Head("/-/healthy", func(w http.ResponseWriter, _ *http.Request) {
+ w.WriteHeader(http.StatusOK)
+ })
router.Get("/-/ready", readyf(func(w http.ResponseWriter, r *http.Request) {
w.WriteHeader(http.StatusOK)
fmt.Fprintf(w, o.AppName+" is Ready.\n")
}))
+ router.Head("/-/ready", readyf(func(w http.ResponseWriter, r *http.Request) {
+ w.WriteHeader(http.StatusOK)
+ }))
return h
}
diff --git a/web/web_test.go b/web/web_test.go
index 65935079c1..7da06a3060 100644
--- a/web/web_test.go
+++ b/web/web_test.go
@@ -126,6 +126,11 @@ func TestReadyAndHealthy(t *testing.T) {
require.Equal(t, http.StatusOK, resp.StatusCode)
cleanupTestResponse(t, resp)
+ resp, err = http.Head(baseURL + "/-/healthy")
+ require.NoError(t, err)
+ require.Equal(t, http.StatusOK, resp.StatusCode)
+ cleanupTestResponse(t, resp)
+
for _, u := range []string{
baseURL + "/-/ready",
} {
@@ -133,6 +138,11 @@ func TestReadyAndHealthy(t *testing.T) {
require.NoError(t, err)
require.Equal(t, http.StatusServiceUnavailable, resp.StatusCode)
cleanupTestResponse(t, resp)
+
+ resp, err = http.Head(u)
+ require.NoError(t, err)
+ require.Equal(t, http.StatusServiceUnavailable, resp.StatusCode)
+ cleanupTestResponse(t, resp)
}
resp, err = http.Post(baseURL+"/api/v1/admin/tsdb/snapshot", "", strings.NewReader(""))
@@ -156,6 +166,11 @@ func TestReadyAndHealthy(t *testing.T) {
require.NoError(t, err)
require.Equal(t, http.StatusOK, resp.StatusCode)
cleanupTestResponse(t, resp)
+
+ resp, err = http.Head(u)
+ require.NoError(t, err)
+ require.Equal(t, http.StatusOK, resp.StatusCode)
+ cleanupTestResponse(t, resp)
}
resp, err = http.Post(baseURL+"/api/v1/admin/tsdb/snapshot", "", strings.NewReader(""))
