Skip to content

N
nexpie-grafana-theme
Commit 080d6110 by Torkel Ödegaard
Options

minor changes to react panels

parent 604add07
Showing with 66 additions and 41 deletions
public/app/core/constants.ts
...@@ -11,3 +11,6 @@ export const LS_PANEL_COPY_KEY = 'panel-copy'; ...@@ -11,3 +11,6 @@ export const LS_PANEL_COPY_KEY = 'panel-copy';
export const DASHBOARD_TOOLBAR_HEIGHT = 55; export const DASHBOARD_TOOLBAR_HEIGHT = 55;
export const DASHBOARD_TOP_PADDING = 20; export const DASHBOARD_TOP_PADDING = 20;
export const PANEL_HEADER_HEIGHT = 27;
export const PANEL_BORDER = 2;
public/app/features/dashboard/dashgrid/DataPanel.tsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
// Services // Services
import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; import { getDatasourceSrv, DatasourceSrv } from 'app/features/plugins/datasource_srv';
// Utils // Utils
import kbn from 'app/core/utils/kbn'; import kbn from 'app/core/utils/kbn';
...@@ -36,14 +36,15 @@ export interface State { ...@@ -36,14 +36,15 @@ export interface State {
} }
export class DataPanel extends Component<Props, State> { export class DataPanel extends Component<Props, State> {
dataSourceSrv = getDatasourceSrv();
static defaultProps = { static defaultProps = {
isVisible: true, isVisible: true,
panelId: 1, panelId: 1,
dashboardId: 1, dashboardId: 1,
}; };
dataSourceSrv: DatasourceSrv = getDatasourceSrv();
isUnmounted = false;
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
...@@ -60,6 +61,10 @@ export class DataPanel extends Component<Props, State> { ...@@ -60,6 +61,10 @@ export class DataPanel extends Component<Props, State> {
this.issueQueries(); this.issueQueries();
} }
componentWillUnmount() {
this.isUnmounted = true;
}
async componentDidUpdate(prevProps: Props) { async componentDidUpdate(prevProps: Props) {
if (!this.hasPropsChanged(prevProps)) { if (!this.hasPropsChanged(prevProps)) {
return; return;
...@@ -72,7 +77,7 @@ export class DataPanel extends Component<Props, State> { ...@@ -72,7 +77,7 @@ export class DataPanel extends Component<Props, State> {
return this.props.refreshCounter !== prevProps.refreshCounter; return this.props.refreshCounter !== prevProps.refreshCounter;
} }
issueQueries = async () => { private issueQueries = async () => {
const { isVisible, queries, datasource, panelId, dashboardId, timeRange, widthPixels, maxDataPoints } = this.props; const { isVisible, queries, datasource, panelId, dashboardId, timeRange, widthPixels, maxDataPoints } = this.props;
if (!isVisible) { if (!isVisible) {
...@@ -111,6 +116,10 @@ export class DataPanel extends Component<Props, State> { ...@@ -111,6 +116,10 @@ export class DataPanel extends Component<Props, State> {
const resp = await ds.query(queryOptions); const resp = await ds.query(queryOptions);
console.log('Issuing DataPanel query Resp', resp); console.log('Issuing DataPanel query Resp', resp);
if (this.isUnmounted) {
return;
}
this.setState({ this.setState({
loading: LoadingState.Done, loading: LoadingState.Done,
response: resp, response: resp,
...@@ -123,14 +132,16 @@ export class DataPanel extends Component<Props, State> { ...@@ -123,14 +132,16 @@ export class DataPanel extends Component<Props, State> {
}; };
render() { render() {
const { response, loading } = this.state; const { response, loading, isFirstLoad } = this.state;
const timeSeries = response.data; const timeSeries = response.data;
console.log('data panel render'); if (isFirstLoad && loading === LoadingState.Loading) {
return this.renderLoadingSpinner();
}
return ( return (
<> <>
{this.loadingSpinner} {this.renderLoadingSpinner()}
{this.props.children({ {this.props.children({
timeSeries, timeSeries,
loading, loading,
...@@ -139,7 +150,7 @@ export class DataPanel extends Component<Props, State> { ...@@ -139,7 +150,7 @@ export class DataPanel extends Component<Props, State> {
); );
} }
private get loadingSpinner(): JSX.Element { private renderLoadingSpinner(): JSX.Element {
const { loading } = this.state; const { loading } = this.state;
if (loading === LoadingState.Loading) { if (loading === LoadingState.Loading) {
......
public/app/features/dashboard/dashgrid/PanelChrome.tsx
...@@ -11,6 +11,7 @@ import { DataPanel } from './DataPanel'; ...@@ -11,6 +11,7 @@ import { DataPanel } from './DataPanel';
// Utils // Utils
import { applyPanelTimeOverrides } from 'app/features/dashboard/utils/panel'; import { applyPanelTimeOverrides } from 'app/features/dashboard/utils/panel';
import { PANEL_HEADER_HEIGHT } from 'app/core/constants';
// Types // Types
import { PanelModel } from '../panel_model'; import { PanelModel } from '../panel_model';
...@@ -96,6 +97,7 @@ export class PanelChrome extends PureComponent<Props, State> { ...@@ -96,6 +97,7 @@ export class PanelChrome extends PureComponent<Props, State> {
return ( return (
<div className="panel-container panel-container--absolute"> <div className="panel-container panel-container--absolute">
<PanelHeader panel={panel} dashboard={dashboard} timeInfo={timeInfo} />
<DataPanel <DataPanel
datasource={datasource} datasource={datasource}
queries={targets} queries={targets}
...@@ -106,20 +108,17 @@ export class PanelChrome extends PureComponent<Props, State> { ...@@ -106,20 +108,17 @@ export class PanelChrome extends PureComponent<Props, State> {
> >
{({ loading, timeSeries }) => { {({ loading, timeSeries }) => {
return ( return (
<> <div className="panel-content">
<PanelHeader panel={panel} dashboard={dashboard} timeInfo={timeInfo} /> <PanelComponent
<div className="panel-content"> loading={loading}
<PanelComponent timeSeries={timeSeries}
loading={loading} timeRange={timeRange}
timeSeries={timeSeries} options={panel.getOptions()}
timeRange={timeRange} width={width}
options={panel.getOptions()} height={height - PANEL_HEADER_HEIGHT}
width={width} renderCounter={renderCounter}
height={height} />
renderCounter={renderCounter} </div>
/>
</div>
</>
); );
}} }}
</DataPanel> </DataPanel>
......
public/app/features/panel/panel_ctrl.ts
import config from 'app/core/config';
import _ from 'lodash'; import _ from 'lodash';
import $ from 'jquery'; import $ from 'jquery';
import Remarkable from 'remarkable';
import config from 'app/core/config';
import { profiler } from 'app/core/core'; import { profiler } from 'app/core/core';
import { Emitter } from 'app/core/core';
import { import {
duplicatePanel, duplicatePanel,
copyPanel as copyPanelUtil, copyPanel as copyPanelUtil,
editPanelJson as editPanelJsonUtil, editPanelJson as editPanelJsonUtil,
sharePanel as sharePanelUtil, sharePanel as sharePanelUtil,
} from 'app/features/dashboard/utils/panel'; } from 'app/features/dashboard/utils/panel';
import Remarkable from 'remarkable';
import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN } from 'app/core/constants';
const TITLE_HEIGHT = 27; import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, PANEL_HEADER_HEIGHT, PANEL_BORDER } from 'app/core/constants';
const PANEL_BORDER = 2;
import { Emitter } from 'app/core/core';
export class PanelCtrl { export class PanelCtrl {
panel: any; panel: any;
...@@ -236,7 +234,7 @@ export class PanelCtrl { ...@@ -236,7 +234,7 @@ export class PanelCtrl {
this.initEditMode(); this.initEditMode();
} }
this.height = this.containerHeight - (PANEL_BORDER + TITLE_HEIGHT); this.height = this.containerHeight - (PANEL_BORDER + PANEL_HEADER_HEIGHT);
} }
render(payload?) { render(payload?) {
......
public/app/plugins/panel/gauge/module.tsx
...@@ -10,14 +10,16 @@ interface Props extends PanelProps<Options> {} ...@@ -10,14 +10,16 @@ interface Props extends PanelProps<Options> {}
export class GaugePanel extends PureComponent<Props> { export class GaugePanel extends PureComponent<Props> {
render() { render() {
const { timeSeries } = this.props; const { timeSeries, width, height } = this.props;
const vmSeries = getTimeSeriesVMs({ const vmSeries = getTimeSeriesVMs({
timeSeries: timeSeries, timeSeries: timeSeries,
nullValueMode: NullValueMode.Ignore, nullValueMode: NullValueMode.Ignore,
}); });
return <Gauge maxValue={100} minValue={0} timeSeries={vmSeries} thresholds={[0, 100]} />; return (
<Gauge maxValue={100} minValue={0} timeSeries={vmSeries} thresholds={[0, 100]} height={height} width={width} />
);
} }
} }
......
public/app/types/series.ts
...@@ -62,6 +62,7 @@ export enum NullValueMode { ...@@ -62,6 +62,7 @@ export enum NullValueMode {
/** View model projection of many time series */ /** View model projection of many time series */
export interface TimeSeriesVMs { export interface TimeSeriesVMs {
[index: number]: TimeSeriesVM; [index: number]: TimeSeriesVM;
length: number;
} }
export interface DataQueryResponse { export interface DataQueryResponse {
......
public/app/viz/Gauge.tsx
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import $ from 'jquery'; import $ from 'jquery';
import { withSize } from 'react-sizeme';
import { TimeSeriesVMs } from 'app/types'; import { TimeSeriesVMs } from 'app/types';
import config from '../core/config'; import config from '../core/config';
...@@ -11,7 +10,8 @@ interface Props { ...@@ -11,7 +10,8 @@ interface Props {
showThresholdMarkers?: boolean; showThresholdMarkers?: boolean;
thresholds?: number[]; thresholds?: number[];
showThresholdLables?: boolean; showThresholdLables?: boolean;
size?: { width: number; height: number }; width: number;
height: number;
} }
const colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)']; const colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)'];
...@@ -37,12 +37,18 @@ export class Gauge extends PureComponent<Props> { ...@@ -37,12 +37,18 @@ export class Gauge extends PureComponent<Props> {
} }
draw() { draw() {
const { maxValue, minValue, showThresholdLables, size, showThresholdMarkers, timeSeries, thresholds } = this.props; const {
maxValue,
minValue,
showThresholdLables,
showThresholdMarkers,
timeSeries,
thresholds,
width,
height,
} = this.props;
const width = size.width;
const height = size.height;
const dimension = Math.min(width, height * 1.3); const dimension = Math.min(width, height * 1.3);
const backgroundColor = config.bootData.user.lightTheme ? 'rgb(230,230,230)' : 'rgb(38,38,38)'; const backgroundColor = config.bootData.user.lightTheme ? 'rgb(230,230,230)' : 'rgb(38,38,38)';
const fontColor = config.bootData.user.lightTheme ? 'rgb(38,38,38)' : 'rgb(230,230,230)'; const fontColor = config.bootData.user.lightTheme ? 'rgb(38,38,38)' : 'rgb(230,230,230)';
const fontScale = parseInt('80', 10) / 100; const fontScale = parseInt('80', 10) / 100;
...@@ -100,8 +106,13 @@ export class Gauge extends PureComponent<Props> { ...@@ -100,8 +106,13 @@ export class Gauge extends PureComponent<Props> {
}, },
}; };
let value: string | number = 'N/A';
if (timeSeries.length) {
value = timeSeries[0].stats.avg;
}
const plotSeries = { const plotSeries = {
data: [[0, timeSeries[0].stats.avg]], data: [[0, value]],
}; };
try { try {
...@@ -112,7 +123,7 @@ export class Gauge extends PureComponent<Props> { ...@@ -112,7 +123,7 @@ export class Gauge extends PureComponent<Props> {
} }
render() { render() {
const { height, width } = this.props.size; const { height, width } = this.props;
return ( return (
<div className="singlestat-panel" ref={element => (this.parentElement = element)}> <div className="singlestat-panel" ref={element => (this.parentElement = element)}>
...@@ -130,4 +141,4 @@ export class Gauge extends PureComponent<Props> { ...@@ -130,4 +141,4 @@ export class Gauge extends PureComponent<Props> {
} }
} }
export default withSize({ monitorHeight: true })(Gauge); export default Gauge;
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