Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Monitoring: Add legend to alerting rule details page graph #6980

Merged
merged 2 commits into from Oct 22, 2020
Merged

Monitoring: Add legend to alerting rule details page graph #6980

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c647c17
Monitoring: Add legend to alerting rule details page graph
kyoto Oct 22, 2020
6274c6a
Query Browser: Add gradient to graph legend
kyoto Oct 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
19 changes: 15 additions & 4 deletions frontend/public/components/monitoring/_monitoring.scss
View file
Open in desktop
Expand Up @@ -34,6 +34,10 @@ $tooltip-background-color: #151515;
.graph-wrapper--query-browser {
padding-left: 50px;
padding-right: 10px;

&--with-legend {
min-height: 305px;
}
}

.monitoring-dashboards__card {
Expand All @@ -54,10 +58,6 @@ $tooltip-background-color: #151515;
}
}

.graph-wrapper--query-browser {
min-height: 305px; // Allow for chart legend
}

// Move tooltip above cursor to work around bug where the legend is visible through the tooltip
.query-browser__tooltip-arrow {
border-bottom: none;
Expand Down Expand Up @@ -116,10 +116,21 @@ $tooltip-background-color: #151515;
.monitoring-dashboards__legend-wrap {
height: 75px;
overflow-x: auto;
padding-right: var(--pf-global--spacer--lg);
padding-top: 1px;
svg {
max-height: 50px; // Required for Chrome. legend-wrap - scrollbar height
}
&:after {
background: linear-gradient(to left, var(--pf-global--BackgroundColor--100), rgba(255, 255, 255, 0));
content: '';
height: calc(100% - 10px); // Leave gap for the horizontal scrollbar
pointer-events: none;
position: absolute;
right: 0;
top: 0;
width: var(--pf-global--spacer--lg);
}
}

.monitoring-dashboards__options {
Expand Down
14 changes: 12 additions & 2 deletions frontend/public/components/monitoring/alerting.tsx
View file
Open in desktop
Expand Up @@ -50,7 +50,7 @@ import { AlertmanagerYAMLEditorWrapper } from '../monitoring/alert-manager-yaml-
import { AlertmanagerConfigWrapper } from '../monitoring/alert-manager-config';
import MonitoringDashboardsPage from '../monitoring/dashboards';
import { QueryBrowserPage, ToggleGraph } from '../monitoring/metrics';
import { QueryBrowser, QueryObj } from '../monitoring/query-browser';
import { FormatLegendLabel, QueryBrowser, QueryObj } from '../monitoring/query-browser';
import { CreateSilence, EditSilence } from '../monitoring/silence-form';
import {
Alert,
Expand Down Expand Up @@ -381,6 +381,7 @@ const queryBrowserURL = (query: string, namespace: string) =>
const Graph_: React.FC<GraphProps> = ({
deleteAll,
filterLabels = undefined,
formatLegendLabel,
patchQuery,
rule,
namespace,
Expand All @@ -407,6 +408,7 @@ const Graph_: React.FC<GraphProps> = ({
<QueryBrowser
defaultTimespan={timespan}
filterLabels={filterLabels}
formatLegendLabel={formatLegendLabel}
GraphLink={GraphLink}
queries={queries}
/>
Expand Down Expand Up @@ -814,6 +816,13 @@ export const AlertRulesDetailsPage = withFallback(
const { loaded, loadError, namespace, rule } = props;
const { alerts = [], annotations, duration, labels, name = '', query = '' } = rule || {};
const severity = labels?.severity;

const formatLegendLabel = (alertLabels) => {
const nameLabel = alertLabels.__name__ ?? '';
const otherLabels = _.omit(alertLabels, '__name__');
return `${nameLabel}{${_.map(otherLabels, (v, k) => `${k}="${v}"`).join(',')}}`;
};

return (
<>
<Helmet>
Expand Down Expand Up @@ -911,7 +920,7 @@ export const AlertRulesDetailsPage = withFallback(
<SectionHeading text="Active Alerts" />
<div className="row">
<div className="col-sm-12">
<Graph namespace={namespace} rule={rule} />
<Graph formatLegendLabel={formatLegendLabel} namespace={namespace} rule={rule} />
</div>
</div>
<div className="row">
Expand Down Expand Up @@ -1645,6 +1654,7 @@ type AlertingPageProps = {
type GraphProps = {
deleteAll: () => never;
filterLabels?: PrometheusLabels;
formatLegendLabel?: FormatLegendLabel;
namespace?: string;
patchQuery: (index: number, patch: QueryObj) => any;
rule: Rule;
Expand Down
6 changes: 5 additions & 1 deletion frontend/public/components/monitoring/query-browser.tsx
View file
Open in desktop
Expand Up @@ -763,7 +763,11 @@ const QueryBrowser_: React.FC<QueryBrowserProps> = ({
variant="info"
/>
)}
<div className="graph-wrapper graph-wrapper--query-browser">
<div
className={classNames('graph-wrapper graph-wrapper--query-browser', {
'graph-wrapper--query-browser--with-legend': !!formatLegendLabel,
})}
>
<div ref={containerRef} style={{ width: '100%' }}>
{width > 0 && (
<>
Expand Down