Skip to content

N
nexpie-grafana-theme
Commit 90c41bb0 by Torkel Ödegaard
Options

changed how size is calcualted and propagated and added proper interval calc to DataPanel

parent dedeaf54
Showing with 41 additions and 31 deletions
public/app/core/components/Switch/Switch.tsx
...@@ -26,6 +26,7 @@ export class Switch extends PureComponent<Props, State> { ...@@ -26,6 +26,7 @@ export class Switch extends PureComponent<Props, State> {
render() { render() {
const { labelClass = '', switchClass = '', label, checked, small } = this.props; const { labelClass = '', switchClass = '', label, checked, small } = this.props;
const labelId = `check-${this.state.id}`; const labelId = `check-${this.state.id}`;
let labelClassName = `gf-form-label ${labelClass} pointer`; let labelClassName = `gf-form-label ${labelClass} pointer`;
let switchClassName = `gf-form-switch ${switchClass}`; let switchClassName = `gf-form-switch ${switchClass}`;
......
public/app/features/dashboard/dashgrid/DashboardGrid.tsx
...@@ -176,6 +176,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> { ...@@ -176,6 +176,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
renderPanels() { renderPanels() {
const panelElements = []; const panelElements = [];
console.log('render panels');
for (const panel of this.props.dashboard.panels) { for (const panel of this.props.dashboard.panels) {
const panelClasses = classNames({ panel: true, 'panel--fullscreen': panel.fullscreen }); const panelClasses = classNames({ panel: true, 'panel--fullscreen': panel.fullscreen });
......
public/app/features/dashboard/dashgrid/DataPanel.tsx
...@@ -4,6 +4,9 @@ import React, { Component } from 'react'; ...@@ -4,6 +4,9 @@ import React, { Component } from 'react';
// Services // Services
import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
// Utils
import kbn from 'app/core/utils/kbn';
// Types // Types
import { TimeRange, LoadingState, DataQueryOptions, DataQueryResponse, TimeSeries } from 'app/types'; import { TimeRange, LoadingState, DataQueryOptions, DataQueryResponse, TimeSeries } from 'app/types';
...@@ -21,6 +24,8 @@ export interface Props { ...@@ -21,6 +24,8 @@ export interface Props {
timeRange?: TimeRange; timeRange?: TimeRange;
widthPixels: number; widthPixels: number;
refreshCounter: number; refreshCounter: number;
minInterval?: string;
maxDataPoints?: number;
children: (r: RenderProps) => JSX.Element; children: (r: RenderProps) => JSX.Element;
} }
...@@ -52,7 +57,7 @@ export class DataPanel extends Component<Props, State> { ...@@ -52,7 +57,7 @@ export class DataPanel extends Component<Props, State> {
} }
componentDidMount() { componentDidMount() {
console.log('DataPanel mount'); this.issueQueries();
} }
async componentDidUpdate(prevProps: Props) { async componentDidUpdate(prevProps: Props) {
...@@ -64,12 +69,11 @@ export class DataPanel extends Component<Props, State> { ...@@ -64,12 +69,11 @@ export class DataPanel extends Component<Props, State> {
} }
hasPropsChanged(prevProps: Props) { hasPropsChanged(prevProps: Props) {
return this.props.refreshCounter !== prevProps.refreshCounter || this.props.isVisible !== prevProps.isVisible; return this.props.refreshCounter !== prevProps.refreshCounter;
} }
issueQueries = async () => { issueQueries = async () => {
const { isVisible, queries, datasource, panelId, dashboardId, timeRange } = this.props; const { isVisible, queries, datasource, panelId, dashboardId, timeRange, widthPixels, maxDataPoints } = this.props;
console.log('issueQueries', this.props);
if (!isVisible) { if (!isVisible) {
return; return;
...@@ -84,16 +88,21 @@ export class DataPanel extends Component<Props, State> { ...@@ -84,16 +88,21 @@ export class DataPanel extends Component<Props, State> {
try { try {
const ds = await this.dataSourceSrv.get(datasource); const ds = await this.dataSourceSrv.get(datasource);
// TODO interpolate variables
const minInterval = this.props.minInterval || ds.interval;
const intervalRes = kbn.calculateInterval(timeRange, widthPixels, minInterval);
const queryOptions: DataQueryOptions = { const queryOptions: DataQueryOptions = {
timezone: 'browser', timezone: 'browser',
panelId: panelId, panelId: panelId,
dashboardId: dashboardId, dashboardId: dashboardId,
range: timeRange, range: timeRange,
rangeRaw: timeRange.raw, rangeRaw: timeRange.raw,
interval: '1s', interval: intervalRes.interval,
intervalMs: 60000, intervalMs: intervalRes.intervalMs,
targets: queries, targets: queries,
maxDataPoints: 500, maxDataPoints: maxDataPoints || widthPixels,
scopedVars: {}, scopedVars: {},
cacheTimeout: null, cacheTimeout: null,
}; };
...@@ -114,17 +123,10 @@ export class DataPanel extends Component<Props, State> { ...@@ -114,17 +123,10 @@ export class DataPanel extends Component<Props, State> {
}; };
render() { render() {
const { response, loading, isFirstLoad } = this.state; const { response, loading } = this.state;
console.log('data panel render');
const timeSeries = response.data; const timeSeries = response.data;
// if (isFirstLoad && (loading === LoadingState.Loading || loading === LoadingState.NotStarted)) { console.log('data panel render');
// return (
// <div className="loading">
// <p>Loading</p>
// </div>
// );
// }
return ( return (
<> <>
...@@ -142,7 +144,7 @@ export class DataPanel extends Component<Props, State> { ...@@ -142,7 +144,7 @@ export class DataPanel extends Component<Props, State> {
if (loading === LoadingState.Loading) { if (loading === LoadingState.Loading) {
return ( return (
<div className="panel__loading"> <div className="panel-loading">
<i className="fa fa-spinner fa-spin" /> <i className="fa fa-spinner fa-spin" />
</div> </div>
); );
......
public/app/features/dashboard/dashgrid/PanelChrome.tsx
...@@ -88,16 +88,14 @@ export class PanelChrome extends PureComponent<Props, State> { ...@@ -88,16 +88,14 @@ export class PanelChrome extends PureComponent<Props, State> {
console.log('panelChrome render'); console.log('panelChrome render');
return ( return (
<div className="panel-container"> <AutoSizer>
<AutoSizer> {({ width, height }) => {
{({ width, height }) => { if (width === 0) {
// console.log('SizeMe', size); return null;
console.log('autosizer width', width); }
if (width === 0) {
return null; return (
} <div className="panel-container panel-container--absolute">
return (
<DataPanel <DataPanel
datasource={datasource} datasource={datasource}
queries={targets} queries={targets}
...@@ -125,10 +123,10 @@ export class PanelChrome extends PureComponent<Props, State> { ...@@ -125,10 +123,10 @@ export class PanelChrome extends PureComponent<Props, State> {
); );
}} }}
</DataPanel> </DataPanel>
); </div>
}} );
</AutoSizer> }}
</div> </AutoSizer>
); );
} }
} }
public/app/types/series.ts
...@@ -89,4 +89,6 @@ export interface DataQueryOptions { ...@@ -89,4 +89,6 @@ export interface DataQueryOptions {
export interface DataSourceApi { export interface DataSourceApi {
query(options: DataQueryOptions): Promise<DataQueryResponse>; query(options: DataQueryOptions): Promise<DataQueryResponse>;
testDatasource(): Promise<any>; testDatasource(): Promise<any>;
interval?: string;
} }
public/app/viz/Graph.tsx
...@@ -92,6 +92,7 @@ export class Graph extends PureComponent<GraphProps> { ...@@ -92,6 +92,7 @@ export class Graph extends PureComponent<GraphProps> {
}; };
try { try {
console.log('Graph render');
$.plot(this.element, timeSeries, flotOptions); $.plot(this.element, timeSeries, flotOptions);
} catch (err) { } catch (err) {
console.log('Graph rendering error', err, flotOptions, timeSeries); console.log('Graph rendering error', err, flotOptions, timeSeries);
......
public/sass/pages/_dashboard.scss
...@@ -43,6 +43,7 @@ div.flot-text { ...@@ -43,6 +43,7 @@ div.flot-text {
position: relative; position: relative;
border-radius: 3px; border-radius: 3px;
height: 100%; height: 100%;
width: 100%;
&.panel-transparent { &.panel-transparent {
background-color: transparent; background-color: transparent;
...@@ -60,6 +61,10 @@ div.flot-text { ...@@ -60,6 +61,10 @@ div.flot-text {
&--is-editing { &--is-editing {
height: auto; height: auto;
} }
&--absolute {
position: absolute;
}
} }
.panel-content { .panel-content {
......
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