Compare commits
2 Commits
sriram/SQL
...
ifrost/res
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
f2f73707c6 | ||
|
|
a13bd73b9a |
@@ -35,6 +35,7 @@ export interface PanelContext {
|
|||||||
onSeriesColorChange?: (label: string, color: string) => void;
|
onSeriesColorChange?: (label: string, color: string) => void;
|
||||||
|
|
||||||
onToggleSeriesVisibility?: (label: string, mode: SeriesVisibilityChangeMode) => void;
|
onToggleSeriesVisibility?: (label: string, mode: SeriesVisibilityChangeMode) => void;
|
||||||
|
onResetAllSeriesVisibility?: () => void;
|
||||||
|
|
||||||
canAddAnnotations?: () => boolean;
|
canAddAnnotations?: () => boolean;
|
||||||
canEditAnnotations?: (dashboardUID?: string) => boolean;
|
canEditAnnotations?: (dashboardUID?: string) => boolean;
|
||||||
|
|||||||
@@ -7,6 +7,7 @@
|
|||||||
export enum SeriesVisibilityChangeMode {
|
export enum SeriesVisibilityChangeMode {
|
||||||
ToggleSelection = 'select',
|
ToggleSelection = 'select',
|
||||||
AppendToSelection = 'append',
|
AppendToSelection = 'append',
|
||||||
|
Show = 'show',
|
||||||
}
|
}
|
||||||
|
|
||||||
export type OnSelectRangeCallback = (selections: RangeSelection2D[]) => void;
|
export type OnSelectRangeCallback = (selections: RangeSelection2D[]) => void;
|
||||||
|
|||||||
@@ -1,9 +1,12 @@
|
|||||||
|
import { css } from '@emotion/css';
|
||||||
import { useCallback } from 'react';
|
import { useCallback } from 'react';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
|
||||||
import { DataHoverClearEvent, DataHoverEvent } from '@grafana/data';
|
import { DataHoverClearEvent, DataHoverEvent } from '@grafana/data';
|
||||||
|
import { Trans, t } from '@grafana/i18n';
|
||||||
import { LegendDisplayMode } from '@grafana/schema';
|
import { LegendDisplayMode } from '@grafana/schema';
|
||||||
|
|
||||||
|
import { Button } from '../Button/Button';
|
||||||
import { SeriesVisibilityChangeMode, usePanelContext } from '../PanelChrome';
|
import { SeriesVisibilityChangeMode, usePanelContext } from '../PanelChrome';
|
||||||
|
|
||||||
import { VizLegendList } from './VizLegendList';
|
import { VizLegendList } from './VizLegendList';
|
||||||
@@ -32,7 +35,7 @@ export function VizLegend<T>({
|
|||||||
readonly,
|
readonly,
|
||||||
isSortable,
|
isSortable,
|
||||||
}: LegendProps<T>) {
|
}: LegendProps<T>) {
|
||||||
const { eventBus, onToggleSeriesVisibility, onToggleLegendSort } = usePanelContext();
|
const { eventBus, onResetAllSeriesVisibility, onToggleSeriesVisibility, onToggleLegendSort } = usePanelContext();
|
||||||
|
|
||||||
const onMouseOver = useCallback(
|
const onMouseOver = useCallback(
|
||||||
(
|
(
|
||||||
@@ -105,6 +108,26 @@ export function VizLegend<T>({
|
|||||||
[className, placement, onMouseOver, onMouseOut, onLegendLabelClick, itemRenderer, readonly]
|
[className, placement, onMouseOver, onMouseOut, onLegendLabelClick, itemRenderer, readonly]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
if (onResetAllSeriesVisibility && items.every((item) => (item.fieldName ?? item.label) && item.disabled)) {
|
||||||
|
return (
|
||||||
|
<div className={css({ paddingTop: '0.5em' })}>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
tooltip={t(
|
||||||
|
'grafana-ui.viz-legend.show-all-series-tooltip',
|
||||||
|
'Currently loaded series are hidden by previous selection. Click to show all series.'
|
||||||
|
)}
|
||||||
|
variant="secondary"
|
||||||
|
onClick={() => {
|
||||||
|
onResetAllSeriesVisibility();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Trans i18nKey="grafana-ui.viz-legend.show-all-series">Show all series</Trans>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
switch (displayMode) {
|
switch (displayMode) {
|
||||||
case LegendDisplayMode.Table:
|
case LegendDisplayMode.Table:
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -53,7 +53,7 @@ import { loadSnapshotData } from '../utils/loadSnapshotData';
|
|||||||
|
|
||||||
import { PanelHeaderMenuWrapper } from './PanelHeader/PanelHeaderMenuWrapper';
|
import { PanelHeaderMenuWrapper } from './PanelHeader/PanelHeaderMenuWrapper';
|
||||||
import { PanelLoadTimeMonitor } from './PanelLoadTimeMonitor';
|
import { PanelLoadTimeMonitor } from './PanelLoadTimeMonitor';
|
||||||
import { seriesVisibilityConfigFactory } from './SeriesVisibilityConfigFactory';
|
import { isHideSeriesOverride, seriesVisibilityConfigFactory } from './SeriesVisibilityConfigFactory';
|
||||||
import { liveTimer } from './liveTimer';
|
import { liveTimer } from './liveTimer';
|
||||||
import { PanelOptionsLogger } from './panelOptionsLogger';
|
import { PanelOptionsLogger } from './panelOptionsLogger';
|
||||||
|
|
||||||
@@ -106,6 +106,7 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
|
|||||||
sync: this.getSync,
|
sync: this.getSync,
|
||||||
onSeriesColorChange: this.onSeriesColorChange,
|
onSeriesColorChange: this.onSeriesColorChange,
|
||||||
onToggleSeriesVisibility: this.onSeriesVisibilityChange,
|
onToggleSeriesVisibility: this.onSeriesVisibilityChange,
|
||||||
|
onResetAllSeriesVisibility: this.onSeriesVisibilityReset,
|
||||||
onAnnotationCreate: this.onAnnotationCreate,
|
onAnnotationCreate: this.onAnnotationCreate,
|
||||||
onAnnotationUpdate: this.onAnnotationUpdate,
|
onAnnotationUpdate: this.onAnnotationUpdate,
|
||||||
onAnnotationDelete: this.onAnnotationDelete,
|
onAnnotationDelete: this.onAnnotationDelete,
|
||||||
@@ -171,6 +172,13 @@ export class PanelStateWrapper extends PureComponent<Props, State> {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
onSeriesVisibilityReset = () => {
|
||||||
|
this.onFieldConfigChange({
|
||||||
|
...this.props.panel.fieldConfig,
|
||||||
|
overrides: this.props.panel.fieldConfig.overrides.filter((rule) => !isHideSeriesOverride(rule)),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
onToggleLegendSort = (sortKey: string) => {
|
onToggleLegendSort = (sortKey: string) => {
|
||||||
const legendOptions: VizLegendOptions = this.props.panel.options.legend;
|
const legendOptions: VizLegendOptions = this.props.panel.options.legend;
|
||||||
|
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ import {
|
|||||||
import { SeriesVisibilityChangeMode } from '@grafana/ui';
|
import { SeriesVisibilityChangeMode } from '@grafana/ui';
|
||||||
|
|
||||||
const displayOverrideRef = 'hideSeriesFrom';
|
const displayOverrideRef = 'hideSeriesFrom';
|
||||||
const isHideSeriesOverride = isSystemOverrideWithRef(displayOverrideRef);
|
export const isHideSeriesOverride = isSystemOverrideWithRef(displayOverrideRef);
|
||||||
|
|
||||||
export function seriesVisibilityConfigFactory(
|
export function seriesVisibilityConfigFactory(
|
||||||
label: string,
|
label: string,
|
||||||
|
|||||||
@@ -34,7 +34,10 @@ import { defaultGraphConfig, getGraphFieldConfig } from 'app/plugins/panel/times
|
|||||||
import { Options as TimeSeriesOptions } from 'app/plugins/panel/timeseries/panelcfg.gen';
|
import { Options as TimeSeriesOptions } from 'app/plugins/panel/timeseries/panelcfg.gen';
|
||||||
import { ExploreGraphStyle } from 'app/types/explore';
|
import { ExploreGraphStyle } from 'app/types/explore';
|
||||||
|
|
||||||
import { seriesVisibilityConfigFactory } from '../../dashboard/dashgrid/SeriesVisibilityConfigFactory';
|
import {
|
||||||
|
isHideSeriesOverride,
|
||||||
|
seriesVisibilityConfigFactory,
|
||||||
|
} from '../../dashboard/dashgrid/SeriesVisibilityConfigFactory';
|
||||||
import { useExploreDataLinkPostProcessor } from '../hooks/useExploreDataLinkPostProcessor';
|
import { useExploreDataLinkPostProcessor } from '../hooks/useExploreDataLinkPostProcessor';
|
||||||
|
|
||||||
import { applyGraphStyle, applyThresholdsConfig } from './exploreGraphStyleUtils';
|
import { applyGraphStyle, applyThresholdsConfig } from './exploreGraphStyleUtils';
|
||||||
@@ -171,6 +174,12 @@ export function ExploreGraph({
|
|||||||
onToggleSeriesVisibility(label: string, mode: SeriesVisibilityChangeMode) {
|
onToggleSeriesVisibility(label: string, mode: SeriesVisibilityChangeMode) {
|
||||||
setFieldConfig(seriesVisibilityConfigFactory(label, mode, fieldConfig, data));
|
setFieldConfig(seriesVisibilityConfigFactory(label, mode, fieldConfig, data));
|
||||||
},
|
},
|
||||||
|
onResetAllSeriesVisibility: () => {
|
||||||
|
setFieldConfig({
|
||||||
|
...fieldConfig,
|
||||||
|
overrides: fieldConfig.overrides.filter((rule) => !isHideSeriesOverride(rule)),
|
||||||
|
});
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
function toggleLegend(name: string | undefined, mode: SeriesVisibilityChangeMode) {
|
function toggleLegend(name: string | undefined, mode: SeriesVisibilityChangeMode) {
|
||||||
|
|||||||
@@ -9314,7 +9314,9 @@
|
|||||||
"remove-button": "Remove {{children}}"
|
"remove-button": "Remove {{children}}"
|
||||||
},
|
},
|
||||||
"viz-legend": {
|
"viz-legend": {
|
||||||
"right-axis-indicator": "(right y-axis)"
|
"right-axis-indicator": "(right y-axis)",
|
||||||
|
"show-all-series": "Show all series",
|
||||||
|
"show-all-series-tooltip": "Currently loaded series are hidden by previous selection. Click to show all series."
|
||||||
},
|
},
|
||||||
"viz-tooltip": {
|
"viz-tooltip": {
|
||||||
"actions-confirmation-input-placeholder": "Are you sure you want to {{ actionTitle }}?",
|
"actions-confirmation-input-placeholder": "Are you sure you want to {{ actionTitle }}?",
|
||||||
|
|||||||
Reference in New Issue
Block a user