Skip to content

N
nexpie-grafana-theme
Commit f42bb84c by Hugo Häggmark Committed by GitHub
Options

TextPanel: Fixes so panel title is updated when variables change (#30884) 

* TextPanel: Fixes so panel title is updated when variables change

* Tests: fixes tests

* Chore: updates after PR comments
parent 238add18
Showing with 319 additions and 244 deletions
packages/grafana-data/src/types/geometry.ts 0 → 100644
/**
* A coordinate on a two dimensional plane.
*/
export interface CartesianCoords2D {
x: number;
y: number;
}
packages/grafana-data/src/types/index.ts
......@@ -29,5 +29,6 @@ export * from './explore';
export * from './legacyEvents';
export * from './live';
export * from './variables';
export * from './geometry';
export { GrafanaConfig, BuildInfo, FeatureToggles, LicenseInfo } from './config';
packages/grafana-ui/src/components/uPlot/plugins/ClickPlugin.tsx
import React, { useState, useCallback, useEffect } from 'react';
import { Global, css as cssCore } from '@emotion/core';
import React, { useCallback, useEffect, useState } from 'react';
import { css as cssCore, Global } from '@emotion/core';
import { CartesianCoords2D } from '@grafana/data';
import { PlotPluginProps } from '../types';
import { usePlotPluginContext } from '../context';
......@@ -10,9 +11,9 @@ interface ClickPluginAPI {
point: { seriesIdx: number | null; dataIdx: number | null };
coords: {
// coords relative to plot canvas, css px
plotCanvas: Coords;
plotCanvas: CartesianCoords2D;
// coords relative to viewport , css px
viewport: Coords;
viewport: CartesianCoords2D;
};
// coords relative to plot canvas, css px
clearSelection: () => void;
......@@ -26,11 +27,6 @@ interface ClickPluginProps extends PlotPluginProps {
children: (api: ClickPluginAPI) => React.ReactElement | null;
}
interface Coords {
x: number;
y: number;
}
// Exposes API for Graph click interactions
export const ClickPlugin: React.FC<ClickPluginProps> = ({ id, onClick, children }) => {
const pluginId = `ClickPlugin:${id}`;
......
public/app/features/dashboard/dashgrid/DashboardPanel.tsx
......@@ -10,10 +10,9 @@ import { PanelChromeAngular } from './PanelChromeAngular';
// Actions
import { initDashboardPanel } from '../state/actions';
import { updateLocation } from 'app/core/reducers/location';
// Types
import { PanelModel, DashboardModel } from '../state';
import { DashboardModel, PanelModel } from '../state';
import { StoreState } from 'app/types';
import { PanelPlugin } from '@grafana/data';
......@@ -40,7 +39,7 @@ const mapStateToProps = (state: StoreState, props: OwnProps) => {
};
};
const mapDispatchToProps = { initDashboardPanel, updateLocation };
const mapDispatchToProps = { initDashboardPanel };
const connector = connect(mapStateToProps, mapDispatchToProps);
......@@ -76,7 +75,7 @@ export class DashboardPanelUnconnected extends PureComponent<Props, State> {
};
renderPanel(plugin: PanelPlugin) {
const { dashboard, panel, isViewing, isInView, isEditing, updateLocation } = this.props;
const { dashboard, panel, isViewing, isInView, isEditing } = this.props;
return (
<AutoSizer>
......@@ -110,7 +109,6 @@ export class DashboardPanelUnconnected extends PureComponent<Props, State> {
isInView={isInView}
width={width}
height={height}
updateLocation={updateLocation}
/>
);
}}
......
public/app/features/dashboard/dashgrid/PanelChrome.test.tsx
import React, { FC } from 'react';
import { ReplaySubject } from 'rxjs';
import { Provider } from 'react-redux';
import configureMockStore from 'redux-mock-store';
import { act, render, screen } from '@testing-library/react';
import { getDefaultTimeRange, LoadingState, PanelData, PanelPlugin, PanelProps } from '@grafana/data';
import { PanelChrome, Props } from './PanelChrome';
import { DashboardModel, PanelModel } from '../state';
import { updateLocation } from '../../../core/actions';
import { PanelQueryRunner } from '../../query/state/PanelQueryRunner';
import { setTimeSrv, TimeSrv } from '../services/TimeSrv';
......@@ -16,6 +17,8 @@ jest.mock('app/core/profiler', () => ({
}));
function setupTestContext(options: Partial<Props>) {
const mockStore = configureMockStore<any, any>();
const store = mockStore({ dashboard: { panels: [] } });
const subject: ReplaySubject<PanelData> = new ReplaySubject<PanelData>();
const panelQueryRunner = ({
getData: () => subject,
......@@ -48,19 +51,22 @@ function setupTestContext(options: Partial<Props>) {
isInView: false,
width: 100,
height: 100,
updateLocation: (jest.fn() as unknown) as typeof updateLocation,
};
const props = { ...defaults, ...options };
const { rerender } = render(<PanelChrome {...props} />);
const { rerender } = render(
<Provider store={store}>
<PanelChrome {...props} />
</Provider>
);
return { rerender, props, subject };
return { rerender, props, subject, store };
}
describe('PanelChrome', () => {
describe('when the user scrolls by a panel so fast that it starts loading data but scrolls out of view', () => {
it('then it should load the panel successfully when scrolled into view again', () => {
const { rerender, props, subject } = setupTestContext({});
const { rerender, props, subject, store } = setupTestContext({});
expect(screen.queryByText(/plugin panel to render/i)).not.toBeInTheDocument();
......@@ -70,7 +76,11 @@ describe('PanelChrome', () => {
});
const newProps = { ...props, isInView: true };
rerender(<PanelChrome {...newProps} />);
rerender(
<Provider store={store}>
<PanelChrome {...newProps} />
</Provider>
);
expect(screen.getByText(/plugin panel to render/i)).toBeInTheDocument();
});
......
public/app/features/dashboard/dashgrid/PanelChrome.tsx
......@@ -10,7 +10,6 @@ import { getTimeSrv, TimeSrv } from '../services/TimeSrv';
import { applyPanelTimeOverrides } from 'app/features/dashboard/utils/panel';
import { profiler } from 'app/core/profiler';
import config from 'app/core/config';
import { updateLocation } from 'app/core/actions';
// Types
import { DashboardModel, PanelModel } from '../state';
import { PANEL_BORDER } from 'app/core/constants';
......@@ -40,7 +39,6 @@ export interface Props {
isInView: boolean;
width: number;
height: number;
updateLocation: typeof updateLocation;
}
export interface State {
......@@ -324,7 +322,7 @@ export class PanelChrome extends Component<Props, State> {
}
render() {
const { dashboard, panel, isViewing, isEditing, width, height, updateLocation } = this.props;
const { dashboard, panel, isViewing, isEditing, width, height } = this.props;
const { errorMessage, data } = this.state;
const { transparent } = panel;
......@@ -347,7 +345,6 @@ export class PanelChrome extends Component<Props, State> {
isEditing={isEditing}
isViewing={isViewing}
data={data}
updateLocation={updateLocation}
/>
<ErrorBoundary>
{({ error }) => {
......
public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx
......@@ -14,7 +14,6 @@ import config from 'app/core/config';
import { DashboardModel, PanelModel } from '../state';
import { StoreState } from 'app/types';
import { getDefaultTimeRange, LoadingState, PanelData, PanelPlugin } from '@grafana/data';
import { updateLocation } from 'app/core/actions';
import { PANEL_BORDER } from 'app/core/constants';
import { selectors } from '@grafana/e2e-selectors';
import { RenderEvent } from 'app/types/events';
......@@ -36,7 +35,6 @@ interface ConnectedProps {
interface DispatchProps {
setPanelAngularComponent: typeof setPanelAngularComponent;
updateLocation: typeof updateLocation;
}
export type Props = OwnProps & ConnectedProps & DispatchProps;
......@@ -214,7 +212,7 @@ export class PanelChromeAngularUnconnected extends PureComponent<Props, State> {
}
render() {
const { dashboard, panel, isViewing, isEditing, plugin, angularComponent, updateLocation } = this.props;
const { dashboard, panel, isViewing, isEditing, plugin } = this.props;
const { errorMessage, data, alertState } = this.state;
const { transparent } = panel;
......@@ -239,13 +237,11 @@ export class PanelChromeAngularUnconnected extends PureComponent<Props, State> {
dashboard={dashboard}
title={panel.title}
description={panel.description}
angularComponent={angularComponent}
links={panel.links}
error={errorMessage}
isViewing={isViewing}
isEditing={isEditing}
data={data}
updateLocation={updateLocation}
alertState={alertState}
/>
<div className={panelContentClassNames}>
......@@ -262,6 +258,6 @@ const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = (
};
};
const mapDispatchToProps: MapDispatchToProps<DispatchProps, OwnProps> = { setPanelAngularComponent, updateLocation };
const mapDispatchToProps: MapDispatchToProps<DispatchProps, OwnProps> = { setPanelAngularComponent };
export const PanelChromeAngular = connect(mapStateToProps, mapDispatchToProps)(PanelChromeAngularUnconnected);
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
import React, { PureComponent } from 'react';
import classNames from 'classnames';
import { DataLink, LoadingState, PanelData, PanelMenuItem, QueryResultMetaNotice } from '@grafana/data';
import { AngularComponent, config } from '@grafana/runtime';
import { ClickOutsideWrapper, Icon, IconName, Tooltip, stylesFactory } from '@grafana/ui';
import React, { FC } from 'react';
import { cx } from 'emotion';
import { DataLink, PanelData } from '@grafana/data';
import { Icon } from '@grafana/ui';
import { selectors } from '@grafana/e2e-selectors';
import PanelHeaderCorner from './PanelHeaderCorner';
import { PanelHeaderMenu } from './PanelHeaderMenu';
import { DashboardModel } from 'app/features/dashboard/state/DashboardModel';
import { PanelModel } from 'app/features/dashboard/state/PanelModel';
import { getPanelLinksSupplier } from 'app/features/panel/panellinks/linkSuppliers';
import { getPanelMenu } from 'app/features/dashboard/utils/getPanelMenu';
import { updateLocation } from 'app/core/actions';
import { css } from 'emotion';
import { PanelHeaderNotices } from './PanelHeaderNotices';
import { PanelHeaderMenuTrigger } from './PanelHeaderMenuTrigger';
import { PanelHeaderLoadingIndicator } from './PanelHeaderLoadingIndicator';
import { PanelHeaderMenuWrapper } from './PanelHeaderMenuWrapper';
export interface Props {
panel: PanelModel;
dashboard: DashboardModel;
title?: string;
description?: string;
angularComponent?: AngularComponent | null;
links?: DataLink[];
error?: string;
alertState?: string;
isViewing: boolean;
isEditing: boolean;
data: PanelData;
updateLocation: typeof updateLocation;
}
interface ClickCoordinates {
x: number;
y: number;
}
interface State {
panelMenuOpen: boolean;
menuItems: PanelMenuItem[];
}
export class PanelHeader extends PureComponent<Props, State> {
clickCoordinates: ClickCoordinates = { x: 0, y: 0 };
state: State = {
panelMenuOpen: false,
menuItems: [],
};
eventToClickCoordinates = (event: React.MouseEvent<HTMLDivElement>) => {
return {
x: Math.floor(event.clientX),
y: Math.floor(event.clientY),
};
};
onMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
this.clickCoordinates = this.eventToClickCoordinates(event);
};
isClick = (clickCoordinates: ClickCoordinates) => {
return clickCoordinates.x === this.clickCoordinates.x && clickCoordinates.y === this.clickCoordinates.y;
};
onMenuToggle = (event: React.MouseEvent<HTMLDivElement>) => {
if (!this.isClick(this.eventToClickCoordinates(event))) {
return;
}
event.stopPropagation();
const { dashboard, panel, angularComponent } = this.props;
const menuItems = getPanelMenu(dashboard, panel, angularComponent);
this.setState({
panelMenuOpen: !this.state.panelMenuOpen,
menuItems,
});
};
closeMenu = () => {
this.setState({
panelMenuOpen: false,
});
};
onCancelQuery = () => {
this.props.panel.getQueryRunner().cancelQuery();
};
renderLoadingState(state: LoadingState): JSX.Element | null {
if (state === LoadingState.Loading) {
return (
<div className="panel-loading" onClick={this.onCancelQuery}>
<Tooltip content="Cancel query">
<Icon className="panel-loading__spinner spin-clockwise" name="sync" />
</Tooltip>
</div>
);
}
if (state === LoadingState.Streaming) {
const styles = getStyles();
return (
<div className="panel-loading" onClick={this.onCancelQuery}>
<div title="Streaming (click to stop)" className={styles.streamIndicator} />
</div>
);
}
return null;
}
openInspect = (e: React.SyntheticEvent, tab: string) => {
const { updateLocation, panel } = this.props;
e.stopPropagation();
updateLocation({
query: { inspect: panel.id, inspectTab: tab },
partial: true,
});
};
// This will show one icon for each severity
renderNotice = (notice: QueryResultMetaNotice) => {
let iconName: IconName = 'info-circle';
if (notice.severity === 'error' || notice.severity === 'warning') {
iconName = 'exclamation-triangle';
}
return (
<Tooltip content={notice.text} key={notice.severity}>
{notice.inspect ? (
<div className="panel-info-notice pointer" onClick={(e) => this.openInspect(e, notice.inspect!)}>
<Icon name={iconName} style={{ marginRight: '8px' }} />
</div>
) : (
<a className="panel-info-notice" href={notice.link} target="_blank" rel="noreferrer">
<Icon name={iconName} style={{ marginRight: '8px' }} />
</a>
)}
</Tooltip>
);
};
render() {
const { panel, error, isViewing, isEditing, data, alertState } = this.props;
const { menuItems } = this.state;
const title = panel.replaceVariables(panel.title, {}, 'text');
const panelHeaderClass = classNames({
'panel-header': true,
'grid-drag-handle': !(isViewing || isEditing),
});
// dedupe on severity
const notices: Record<string, QueryResultMetaNotice> = {};
for (const series of data.series) {
if (series.meta && series.meta.notices) {
for (const notice of series.meta.notices) {
notices[notice.severity] = notice;
}
}
}
return (
<>
{this.renderLoadingState(data.state)}
<div className={panelHeaderClass}>
<PanelHeaderCorner
panel={panel}
title={panel.title}
description={panel.description}
scopedVars={panel.scopedVars}
links={getPanelLinksSupplier(panel)}
error={error}
/>
<div
className="panel-title-container"
onClick={this.onMenuToggle}
onMouseDown={this.onMouseDown}
aria-label={selectors.components.Panels.Panel.title(title)}
>
<div className="panel-title">
{Object.values(notices).map(this.renderNotice)}
{alertState && (
<Icon
name={alertState === 'alerting' ? 'heart-break' : 'heart'}
className="icon-gf panel-alert-icon"
style={{ marginRight: '4px' }}
size="sm"
/>
)}
<span className="panel-title-text">{title}</span>
<Icon name="angle-down" className="panel-menu-toggle" />
{this.state.panelMenuOpen && (
<ClickOutsideWrapper onClick={this.closeMenu} parent={document}>
<PanelHeaderMenu items={menuItems} />
</ClickOutsideWrapper>
)}
{data.request && data.request.timeInfo && (
<span className="panel-time-info">
<Icon name="clock-nine" size="sm" /> {data.request.timeInfo}
</span>
)}
</div>
</div>
</div>
</>
);
}
}
/*
* Styles
*/
export const getStyles = stylesFactory(() => {
return {
streamIndicator: css`
width: 10px;
height: 10px;
background: ${config.theme.colors.textFaint};
box-shadow: 0 0 2px ${config.theme.colors.textFaint};
border-radius: 50%;
position: relative;
top: 6px;
right: 1px;
`,
};
});
export const PanelHeader: FC<Props> = ({ panel, error, isViewing, isEditing, data, alertState, dashboard }) => {
const onCancelQuery = () => panel.getQueryRunner().cancelQuery();
const title = panel.replaceVariables(panel.title, {}, 'text');
const className = cx('panel-header', !(isViewing || isEditing) ? 'grid-drag-handle' : '');
return (
<>
<PanelHeaderLoadingIndicator state={data.state} onClick={onCancelQuery} />
<div className={className}>
<PanelHeaderCorner
panel={panel}
title={panel.title}
description={panel.description}
scopedVars={panel.scopedVars}
links={getPanelLinksSupplier(panel)}
error={error}
/>
<PanelHeaderMenuTrigger aria-label={selectors.components.Panels.Panel.title(title)}>
{({ closeMenu, panelMenuOpen }) => {
return (
<div className="panel-title">
<PanelHeaderNotices frames={data.series} panelId={panel.id} />
{alertState ? (
<Icon
name={alertState === 'alerting' ? 'heart-break' : 'heart'}
className="icon-gf panel-alert-icon"
style={{ marginRight: '4px' }}
size="sm"
/>
) : null}
<span className="panel-title-text">{title}</span>
<Icon name="angle-down" className="panel-menu-toggle" />
<PanelHeaderMenuWrapper panel={panel} dashboard={dashboard} show={panelMenuOpen} onClose={closeMenu} />
{data.request && data.request.timeInfo && (
<span className="panel-time-info">
<Icon name="clock-nine" size="sm" /> {data.request.timeInfo}
</span>
)}
</div>
);
}}
</PanelHeaderMenuTrigger>
</div>
</>
);
};
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx 0 → 100644
import React, { FC } from 'react';
import { css } from 'emotion';
import { GrafanaTheme, LoadingState } from '@grafana/data';
import { Icon, Tooltip, useStyles } from '@grafana/ui';
interface Props {
state: LoadingState;
onClick: () => void;
}
export const PanelHeaderLoadingIndicator: FC<Props> = ({ state, onClick }) => {
const styles = useStyles(getStyles);
if (state === LoadingState.Loading) {
return (
<div className="panel-loading" onClick={onClick}>
<Tooltip content="Cancel query">
<Icon className="panel-loading__spinner spin-clockwise" name="sync" />
</Tooltip>
</div>
);
}
if (state === LoadingState.Streaming) {
return (
<div className="panel-loading" onClick={onClick}>
<div title="Streaming (click to stop)" className={styles.streamIndicator} />
</div>
);
}
return null;
};
function getStyles(theme: GrafanaTheme) {
return {
streamIndicator: css`
width: 10px;
height: 10px;
background: ${theme.colors.textFaint};
box-shadow: 0 0 2px ${theme.colors.textFaint};
border-radius: 50%;
position: relative;
top: 6px;
right: 1px;
`,
};
}
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuProvider.tsx 0 → 100644
import { FC, ReactElement, useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { PanelMenuItem } from '@grafana/data';
import { DashboardModel, PanelModel } from '../../state';
import { StoreState } from '../../../../types';
import { getPanelMenu } from '../../utils/getPanelMenu';
interface PanelHeaderMenuProviderApi {
items: PanelMenuItem[];
}
interface Props {
panel: PanelModel;
dashboard: DashboardModel;
children: (props: PanelHeaderMenuProviderApi) => ReactElement;
}
export const PanelHeaderMenuProvider: FC<Props> = ({ panel, dashboard, children }) => {
const [items, setItems] = useState<PanelMenuItem[]>([]);
const angularComponent = useSelector(
(state: StoreState) => state.dashboard.panels[panel.id]?.angularComponent || null
);
useEffect(() => {
setItems(getPanelMenu(dashboard, panel, angularComponent));
}, [dashboard, panel, angularComponent, setItems]);
return children({ items });
};
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuTrigger.tsx 0 → 100644
import React, { FC, HTMLAttributes, MouseEvent, ReactElement, useCallback, useState } from 'react';
import { CartesianCoords2D } from '@grafana/data';
interface PanelHeaderMenuTriggerApi {
panelMenuOpen: boolean;
closeMenu: () => void;
}
interface Props extends HTMLAttributes<HTMLDivElement> {
children: (props: PanelHeaderMenuTriggerApi) => ReactElement;
}
export const PanelHeaderMenuTrigger: FC<Props> = ({ children, ...divProps }) => {
const [clickCoordinates, setClickCoordinates] = useState<CartesianCoords2D>({ x: 0, y: 0 });
const [panelMenuOpen, setPanelMenuOpen] = useState<boolean>(false);
const onMenuToggle = useCallback(
(event: MouseEvent<HTMLDivElement>) => {
if (!isClick(clickCoordinates, eventToClickCoordinates(event))) {
return;
}
event.stopPropagation();
setPanelMenuOpen(!panelMenuOpen);
},
[clickCoordinates, panelMenuOpen, setPanelMenuOpen]
);
const onMouseDown = useCallback(
(event: MouseEvent<HTMLDivElement>) => {
setClickCoordinates(eventToClickCoordinates(event));
},
[setClickCoordinates]
);
return (
<div {...divProps} className="panel-title-container" onClick={onMenuToggle} onMouseDown={onMouseDown}>
{children({ panelMenuOpen, closeMenu: () => setPanelMenuOpen(false) })}
</div>
);
};
function isClick(current: CartesianCoords2D, clicked: CartesianCoords2D): boolean {
return clicked.x === current.x && clicked.y === current.y;
}
function eventToClickCoordinates(event: MouseEvent<HTMLDivElement>): CartesianCoords2D {
return {
x: Math.floor(event.clientX),
y: Math.floor(event.clientY),
};
}
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuWrapper.tsx 0 → 100644
import React, { FC } from 'react';
import { ClickOutsideWrapper } from '@grafana/ui';
import { PanelHeaderMenuProvider } from './PanelHeaderMenuProvider';
import { PanelHeaderMenu } from './PanelHeaderMenu';
import { DashboardModel, PanelModel } from '../../state';
interface Props {
panel: PanelModel;
dashboard: DashboardModel;
show: boolean;
onClose: () => void;
}
export const PanelHeaderMenuWrapper: FC<Props> = ({ show, onClose, panel, dashboard }) => {
if (!show) {
return null;
}
return (
<ClickOutsideWrapper onClick={onClose} parent={document}>
<PanelHeaderMenuProvider panel={panel} dashboard={dashboard}>
{({ items }) => {
return <PanelHeaderMenu items={items} />;
}}
</PanelHeaderMenuProvider>
</ClickOutsideWrapper>
);
};
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderNotice.tsx 0 → 100644
import React, { FC } from 'react';
import { QueryResultMetaNotice } from '@grafana/data';
import { Icon, Tooltip } from '@grafana/ui';
interface Props {
notice: QueryResultMetaNotice;
onClick: (e: React.SyntheticEvent, tab: string) => void;
}
export const PanelHeaderNotice: FC<Props> = ({ notice, onClick }) => {
const iconName =
notice.severity === 'error' || notice.severity === 'warning' ? 'exclamation-triangle' : 'info-circle';
return (
<Tooltip content={notice.text} key={notice.severity}>
{notice.inspect ? (
<div className="panel-info-notice pointer" onClick={(e) => onClick(e, notice.inspect!)}>
<Icon name={iconName} style={{ marginRight: '8px' }} />
</div>
) : (
<a className="panel-info-notice" href={notice.link} target="_blank" rel="noreferrer">
<Icon name={iconName} style={{ marginRight: '8px' }} />
</a>
)}
</Tooltip>
);
};
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderNotices.tsx 0 → 100644
import React, { FC, useCallback } from 'react';
import { DataFrame, QueryResultMetaNotice } from '@grafana/data';
import { PanelHeaderNotice } from './PanelHeaderNotice';
import { useDispatch } from 'react-redux';
import { updateLocation } from '../../../../core/actions';
interface Props {
panelId: number;
frames: DataFrame[];
}
export const PanelHeaderNotices: FC<Props> = ({ frames, panelId }) => {
const dispatch = useDispatch();
const openInspect = useCallback(
(e: React.SyntheticEvent, tab: string) => {
e.stopPropagation();
dispatch(
updateLocation({
query: { inspect: panelId, inspectTab: tab },
partial: true,
})
);
},
[panelId]
);
// dedupe on severity
const notices: Record<string, QueryResultMetaNotice> = {};
for (const frame of frames) {
if (!frame.meta || !frame.meta.notices) {
continue;
}
for (const notice of frame.meta.notices) {
notices[notice.severity] = notice;
}
}
return (
<>
{Object.values(notices).map((notice) => (
<PanelHeaderNotice notice={notice} onClick={openInspect} key={notice.severity} />
))}
</>
);
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment