public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

minor changes to react panels

Browse Source
This commit is contained in:
Torkel Ödegaard
2018-11-14 13:20:19 +01:00
parent 604add078b
commit 080d611004
7 changed files with 66 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/core/constants.ts
+3
View File
@@ -11,3 +11,6 @@ export const LS_PANEL_COPY_KEY = 'panel-copy';
export const DASHBOARD_TOOLBAR_HEIGHT = 55;
export const DASHBOARD_TOP_PADDING = 20;
export const PANEL_HEADER_HEIGHT = 27;
export const PANEL_BORDER = 2;
public/app/features/dashboard/dashgrid/DataPanel.tsx
+19 -8
View File
@@ -2,7 +2,7 @@
import React, { Component } from 'react';
// Services
import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
import { getDatasourceSrv, DatasourceSrv } from 'app/features/plugins/datasource_srv';
// Utils
import kbn from 'app/core/utils/kbn';
@@ -36,14 +36,15 @@ export interface State {
}
export class DataPanel extends Component<Props, State> {
dataSourceSrv = getDatasourceSrv();
static defaultProps = {
isVisible: true,
panelId: 1,
dashboardId: 1,
};
dataSourceSrv: DatasourceSrv = getDatasourceSrv();
isUnmounted = false;
constructor(props: Props) {
super(props);
@@ -60,6 +61,10 @@ export class DataPanel extends Component<Props, State> {
this.issueQueries();
}
componentWillUnmount() {
this.isUnmounted = true;
}
async componentDidUpdate(prevProps: Props) {
if (!this.hasPropsChanged(prevProps)) {
return;
@@ -72,7 +77,7 @@ export class DataPanel extends Component<Props, State> {
return this.props.refreshCounter !== prevProps.refreshCounter;
}
issueQueries = async () => {
private issueQueries = async () => {
const { isVisible, queries, datasource, panelId, dashboardId, timeRange, widthPixels, maxDataPoints } = this.props;
if (!isVisible) {
@@ -111,6 +116,10 @@ export class DataPanel extends Component<Props, State> {
const resp = await ds.query(queryOptions);
console.log('Issuing DataPanel query Resp', resp);
if (this.isUnmounted) {
return;
}
this.setState({
loading: LoadingState.Done,
response: resp,
@@ -123,14 +132,16 @@ export class DataPanel extends Component<Props, State> {
};
render() {
const { response, loading } = this.state;
const { response, loading, isFirstLoad } = this.state;
const timeSeries = response.data;
console.log('data panel render');
if (isFirstLoad && loading === LoadingState.Loading) {
return this.renderLoadingSpinner();
}
return (
<>
{this.loadingSpinner}
{this.renderLoadingSpinner()}
{this.props.children({
timeSeries,
loading,
@@ -139,7 +150,7 @@ export class DataPanel extends Component<Props, State> {
);
}
private get loadingSpinner(): JSX.Element {
private renderLoadingSpinner(): JSX.Element {
const { loading } = this.state;
if (loading === LoadingState.Loading) {
public/app/features/dashboard/dashgrid/PanelChrome.tsx
+13 -14
View File
@@ -11,6 +11,7 @@ import { DataPanel } from './DataPanel';
// Utils
import { applyPanelTimeOverrides } from 'app/features/dashboard/utils/panel';
import { PANEL_HEADER_HEIGHT } from 'app/core/constants';
// Types
import { PanelModel } from '../panel_model';
@@ -96,6 +97,7 @@ export class PanelChrome extends PureComponent<Props, State> {
return (
<div className="panel-container panel-container--absolute">
<PanelHeader panel={panel} dashboard={dashboard} timeInfo={timeInfo} />
<DataPanel
datasource={datasource}
queries={targets}
@@ -106,20 +108,17 @@ export class PanelChrome extends PureComponent<Props, State> {
>
{({ loading, timeSeries }) => {
return (
<>
<PanelHeader panel={panel} dashboard={dashboard} timeInfo={timeInfo} />
<div className="panel-content">
<PanelComponent
loading={loading}
timeSeries={timeSeries}
timeRange={timeRange}
options={panel.getOptions()}
width={width}
height={height}
renderCounter={renderCounter}
/>
</div>
</>
<div className="panel-content">
<PanelComponent
loading={loading}
timeSeries={timeSeries}
timeRange={timeRange}
options={panel.getOptions()}
width={width}
height={height - PANEL_HEADER_HEIGHT}
renderCounter={renderCounter}
/>
</div>
);
}}
</DataPanel>
public/app/features/panel/panel_ctrl.ts
+6 -8
View File
@@ -1,20 +1,18 @@
import config from 'app/core/config';
import _ from 'lodash';
import $ from 'jquery';
import Remarkable from 'remarkable';
import config from 'app/core/config';
import { profiler } from 'app/core/core';
import { Emitter } from 'app/core/core';
import {
duplicatePanel,
copyPanel as copyPanelUtil,
editPanelJson as editPanelJsonUtil,
sharePanel as sharePanelUtil,
} 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;
const PANEL_BORDER = 2;
import { Emitter } from 'app/core/core';
import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, PANEL_HEADER_HEIGHT, PANEL_BORDER } from 'app/core/constants';
export class PanelCtrl {
panel: any;
@@ -236,7 +234,7 @@ export class PanelCtrl {
this.initEditMode();
}
this.height = this.containerHeight - (PANEL_BORDER + TITLE_HEIGHT);
this.height = this.containerHeight - (PANEL_BORDER + PANEL_HEADER_HEIGHT);
}
render(payload?) {
public/app/plugins/panel/gauge/module.tsx
+4 -2
View File
@@ -10,14 +10,16 @@ interface Props extends PanelProps<Options> {}
export class GaugePanel extends PureComponent<Props> {
render() {
const { timeSeries } = this.props;
const { timeSeries, width, height } = this.props;
const vmSeries = getTimeSeriesVMs({
timeSeries: timeSeries,
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
+1
View File
@@ -62,6 +62,7 @@ export enum NullValueMode {
/** View model projection of many time series */
export interface TimeSeriesVMs {
[index: number]: TimeSeriesVM;
length: number;
}
export interface DataQueryResponse {
public/app/viz/Gauge.tsx
+20 -9
View File
@@ -1,6 +1,5 @@
import React, { PureComponent } from 'react';
import $ from 'jquery';
import { withSize } from 'react-sizeme';
import { TimeSeriesVMs } from 'app/types';
import config from '../core/config';
@@ -11,7 +10,8 @@ interface Props {
showThresholdMarkers?: boolean;
thresholds?: number[];
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)'];
@@ -37,12 +37,18 @@ export class Gauge extends PureComponent<Props> {
}
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 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 fontScale = parseInt('80', 10) / 100;
@@ -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 = {
data: [[0, timeSeries[0].stats.avg]],
data: [[0, value]],
};
try {
@@ -112,7 +123,7 @@ export class Gauge extends PureComponent<Props> {
}
render() {
const { height, width } = this.props.size;
const { height, width } = this.props;
return (
<div className="singlestat-panel" ref={element => (this.parentElement = element)}>
@@ -130,4 +141,4 @@ export class Gauge extends PureComponent<Props> {
}
}
export default withSize({ monitorHeight: true })(Gauge);
export default Gauge;