) : (
)}
)}
- {!FNDashboard && }
+
{initError && }
{showSubMenu && (
@@ -453,14 +492,14 @@ export class UnthemedDashboardPage extends PureComponent {
)}
- {inspectPanel && !FNDashboard && }
+ {inspectPanel && isFNDashboardEditable && }
- {editPanel && !FNDashboard && sectionNav && pageNav && (
+ {isPanelEditorVisible && (
{
pageNav={pageNav}
/>
)}
- {queryParams.editview && !FNDashboard && pageNav && sectionNav && (
+ {queryParams.editview && pageNav && sectionNav && isFNDashboardEditable && (
{
sectionNav={sectionNav}
/>
)}
- {!FNDashboard && queryParams.addWidget && config.featureToggles.vizAndWidgetSplit && }
-
+ {isFNDashboardEditable && queryParams.addWidget && config.featureToggles.vizAndWidgetSplit && (
+
+ )}
+
);
}
}
function updateStatePageNavFromProps(props: Props, state: State): State {
- const { dashboard, FNDashboard } = props;
+ const { dashboard, FNDashboard, isCustomDashboard } = props;
- if (!dashboard || FNDashboard) {
+ if (!dashboard || (FNDashboard && !isCustomDashboard)) {
return state;
}
diff --git a/public/app/features/dashboard/dashgrid/DashboardEmpty.tsx b/public/app/features/dashboard/dashgrid/DashboardEmpty.tsx
index e8065787e83d9..a7225245d8c57 100644
--- a/public/app/features/dashboard/dashgrid/DashboardEmpty.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardEmpty.tsx
@@ -26,7 +26,10 @@ export interface Props {
const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
const styles = useStyles2(getStyles);
const dispatch = useDispatch();
- const initialDatasource = useSelector((state) => state.dashboard.initialDatasource);
+ const { initialDatasource, isFNDashboard } = useSelector((state) => ({
+ initialDatasource: state.dashboard.initialDatasource,
+ isFNDashboard: state.fnGlobalState.FNDashboard
+ }));
const onAddVisualization = () => {
let id;
@@ -63,14 +66,18 @@ const DashboardEmpty = ({ dashboard, canCreate }: Props) => {
Start your new dashboard by adding a visualization
-
-
-
- Select a data source and then query and visualize your data with charts, stats and tables or create
- lists, markdowns and other widgets.
-
-
-
+
+
+
+ {
+ !isFNDashboard ?
+ Select a data source and then query and visualize your data with charts, stats and tables or create
+ lists, markdowns and other widgets.
+ : `Visualize CodeRabbit Review metrics using charts, tables and other widgets.`
+ }
+
+
+
-
- {config.featureToggles.vizAndWidgetSplit && (
+ {
+ !isFNDashboard && (
+
+ {config.featureToggles.vizAndWidgetSplit && (
+
+
+
+ Add a widget
+
+
+
+ Create lists, markdowns and other widgets
+
+
+
+
+
+ )}
- Add a widget
+ Import panel
- Create lists, markdowns and other widgets
+
+ Add visualizations that are shared with other dashboards.
+
+
+
+
+
+
+ Import a dashboard
+
+
+
+
+ Import dashboards from files or grafana.com.
+
+
+
+
- )}
-
-
-
- Import panel
-
-
-
-
- Add visualizations that are shared with other dashboards.
-
-
-
-
-
-
-
-
-
- Import a dashboard
-
-
-
-
- Import dashboards from files or grafana.com.
-
-
-
-
-
-
-
+
+ )
+ }
diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
index 70c88a5d54182..5bf46d2e6c97f 100644
--- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
+++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx
@@ -1,13 +1,15 @@
import classNames from 'classnames';
-import React, { PureComponent, CSSProperties } from 'react';
+import { PureComponent, CSSProperties } from 'react';
+import * as React from 'react';
import ReactGridLayout, { ItemCallback } from 'react-grid-layout';
import { connect } from 'react-redux';
-import AutoSizer from 'react-virtualized-auto-sizer';
import { Subscription } from 'rxjs';
import { config } from '@grafana/runtime';
+import appEvents from 'app/core/app_events';
import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, GRID_COLUMN_COUNT } from 'app/core/constants';
import { contextSrv } from 'app/core/services/context_srv';
+import { VariablesChanged } from 'app/features/variables/types';
import { StoreState } from 'app/types';
import { DashboardPanelsChangedEvent } from 'app/types/events';
@@ -19,6 +21,8 @@ import { GridPos } from '../state/PanelModel';
import DashboardEmpty from './DashboardEmpty';
import { DashboardPanel } from './DashboardPanel';
+export const PANEL_FILTER_VARIABLE = 'systemPanelFilterVar';
+
export interface Props {
dashboard: DashboardModel;
isEditable: boolean;
@@ -26,9 +30,15 @@ export interface Props {
viewPanel: PanelModel | null;
hidePanelMenus?: boolean;
isFnDashboard?: boolean;
+ isCustomDashboard?: boolean;
+}
+
+interface State {
+ panelFilter?: RegExp;
+ width: number;
}
-export class Component extends PureComponent {
+export class DashboardGridUnconnected extends PureComponent {
private panelMap: { [key: string]: PanelModel } = {};
private eventSubs = new Subscription();
private windowHeight = 1200;
@@ -40,10 +50,41 @@ export class Component extends PureComponent {
constructor(props: Props) {
super(props);
+ this.state = {
+ panelFilter: undefined,
+ width: document.body.clientWidth, // initial very rough estimate
+ };
}
componentDidMount() {
const { dashboard } = this.props;
+
+ if (config.featureToggles.panelFilterVariable) {
+ // If panel filter variable is set on load then
+ // update state to filter panels
+ for (const variable of dashboard.getVariables()) {
+ if (variable.id === PANEL_FILTER_VARIABLE) {
+ if ('query' in variable) {
+ this.setPanelFilter(variable.query);
+ }
+ break;
+ }
+ }
+
+ this.eventSubs.add(
+ appEvents.subscribe(VariablesChanged, (e) => {
+ if (e.payload.variable?.id === PANEL_FILTER_VARIABLE) {
+ if ('current' in e.payload.variable) {
+ let variable = e.payload.variable.current;
+ if ('value' in variable && typeof variable.value === 'string') {
+ this.setPanelFilter(variable.value);
+ }
+ }
+ }
+ })
+ );
+ }
+
this.eventSubs.add(dashboard.events.subscribe(DashboardPanelsChangedEvent, this.triggerForceUpdate));
}
@@ -51,10 +92,25 @@ export class Component extends PureComponent {
this.eventSubs.unsubscribe();
}
+ setPanelFilter(regex: string) {
+ // Only set the panels filter if the systemPanelFilterVar variable
+ // is a non-empty string
+ let panelFilter = undefined;
+ if (regex.length > 0) {
+ panelFilter = new RegExp(regex, 'i');
+ }
+
+ this.setState({
+ panelFilter: panelFilter,
+ });
+ }
+
buildLayout() {
const layout: ReactGridLayout.Layout[] = [];
this.panelMap = {};
+ const { panelFilter } = this.state;
+ let count = 0;
for (const panel of this.props.dashboard.panels) {
if (!panel.key) {
panel.key = `panel-${panel.id}-${Date.now()}`;
@@ -81,13 +137,27 @@ export class Component extends PureComponent {
panelPos.isDraggable = panel.collapsed;
}
- layout.push(panelPos);
+ if (!panelFilter) {
+ layout.push(panelPos);
+ } else {
+ if (panelFilter.test(panel.title)) {
+ panelPos.isResizable = false;
+ panelPos.isDraggable = false;
+ panelPos.x = (count % 2) * GRID_COLUMN_COUNT;
+ panelPos.y = Math.floor(count / 2);
+ layout.push(panelPos);
+ count++;
+ }
+ }
}
return layout;
}
onLayoutChange = (newLayout: ReactGridLayout.Layout[]) => {
+ if (this.state.panelFilter) {
+ return;
+ }
for (const newPos of newLayout) {
this.panelMap[newPos.i!].updateGridPos(newPos, this.isLayoutInitialized);
}
@@ -139,6 +209,7 @@ export class Component extends PureComponent {
}
renderPanels(gridWidth: number, isDashboardDraggable: boolean) {
+ const { panelFilter } = this.state;
const panelElements = [];
// Reset last panel bottom
@@ -155,7 +226,7 @@ export class Component extends PureComponent {
for (const panel of this.props.dashboard.panels) {
const panelClasses = classNames({ 'react-grid-item--fullscreen': panel.isViewing });
- panelElements.push(
+ const p = (
{
}}
);
+
+ if (!panelFilter) {
+ panelElements.push(p);
+ } else {
+ if (panelFilter.test(panel.title)) {
+ panelElements.push(p);
+ }
+ }
}
return panelElements;
@@ -213,61 +292,69 @@ export class Component extends PureComponent {
}
};
+ private resizeObserver?: ResizeObserver;
+ private rootEl: HTMLDivElement | null = null;
+ onMeasureRef = (rootEl: HTMLDivElement | null) => {
+ if (!rootEl) {
+ if (this.rootEl && this.resizeObserver) {
+ this.resizeObserver.unobserve(this.rootEl);
+ }
+ return;
+ }
+
+ this.rootEl = rootEl;
+ this.resizeObserver = new ResizeObserver((entries) => {
+ entries.forEach((entry) => {
+ this.setState({ width: entry.contentRect.width });
+ });
+ });
+
+ this.resizeObserver.observe(rootEl);
+ };
+
render() {
- const { isEditable, dashboard, isFnDashboard } = this.props;
+ const { isEditable, dashboard, isCustomDashboard, isFnDashboard } = this.props;
+ const { width } = this.state;
- if (config.featureToggles.emptyDashboardPage && dashboard.panels.length === 0) {
+ if (dashboard.panels.length === 0) {
return ;
}
- /**
- * We have a parent with "flex: 1 1 0" we need to reset it to "flex: 1 1 auto" to have the AutoSizer
- * properly working. For more information go here:
- * https://github.com/bvaughn/react-virtualized/blob/master/docs/usingAutoSizer.md#can-i-use-autosizer-within-a-flex-container
- */
- return (
-
-
- {({ width }) => {
- if (width === 0) {
- return null;
- }
+ const draggable = width <= config.theme2.breakpoints.values.md ? false : isEditable;
- // Disable draggable if mobile device, solving an issue with unintentionally
- // moving panels. https://github.com/grafana/grafana/issues/18497
- const isLg = width <= config.theme2.breakpoints.values.md;
- const draggable = isLg ? false : isEditable;
-
- return (
- /**
- * The children is using a width of 100% so we need to guarantee that it is wrapped
- * in an element that has the calculated size given by the AutoSizer. The AutoSizer
- * has a width of 0 and will let its content overflow its div.
- */
-
-
- {this.renderPanels(width, draggable)}
-
-
- );
- }}
-
+ // pos: rel + z-index is required to create a new stacking context to contain
+ // the escalating z-indexes of the panels
+ return (
+