mirror of https://github.com/grafana/grafana
DashboardScene: Inspect panel data tab (#74646)
* Refactor data tab to be usable from scenes * DashboardScene: Inspect data tab * Everything seem to work now * don't change drawer size in this PR * Remove uncommented code * Fix layout issues for data actions * Added comment explaining retrypull/74726/head
Torkel Ödegaard
2 years ago
committed by
GitHub
parent
c8a0ebe0e8
commit
73a675af02
@ -1,20 +1,77 @@ |
||||
import React from 'react'; |
||||
|
||||
import { SceneComponentProps, SceneObjectBase, VizPanel } from '@grafana/scenes'; |
||||
import { t } from 'app/core/internationalization'; |
||||
import { LoadingState } from '@grafana/data'; |
||||
import { |
||||
SceneComponentProps, |
||||
SceneDataProvider, |
||||
SceneDataTransformer, |
||||
sceneGraph, |
||||
SceneObjectBase, |
||||
} from '@grafana/scenes'; |
||||
import { GetDataOptions } from 'app/features/query/state/PanelQueryRunner'; |
||||
|
||||
import { InspectTab } from '../../inspector/types'; |
||||
import { InspectDataTab as InspectDataTabOld } from '../../inspector/InspectDataTab'; |
||||
|
||||
import { InspectTabState } from './types'; |
||||
|
||||
export class InspectDataTab extends SceneObjectBase<InspectTabState> { |
||||
constructor(public panel: VizPanel) { |
||||
super({ label: t('dashboard.inspect.data-tab', 'Data'), value: InspectTab.Data }); |
||||
export interface InspectDataTabState extends InspectTabState { |
||||
options: GetDataOptions; |
||||
} |
||||
|
||||
export class InspectDataTab extends SceneObjectBase<InspectDataTabState> { |
||||
public constructor(state: Omit<InspectDataTabState, 'options'>) { |
||||
super({ |
||||
...state, |
||||
options: { |
||||
withTransforms: true, |
||||
withFieldConfig: true, |
||||
}, |
||||
}); |
||||
} |
||||
|
||||
public onOptionsChange = (options: GetDataOptions) => { |
||||
this.setState({ options }); |
||||
}; |
||||
|
||||
static Component = ({ model }: SceneComponentProps<InspectDataTab>) => { |
||||
//const data = sceneGraph.getData(model.panel).useState();
|
||||
const { options } = model.useState(); |
||||
const panel = model.state.panelRef.resolve(); |
||||
const dataProvider = sceneGraph.getData(panel); |
||||
const { data } = getDataProviderToSubscribeTo(dataProvider, options.withTransforms).useState(); |
||||
const timeRange = sceneGraph.getTimeRange(panel); |
||||
|
||||
return <div>Data tab</div>; |
||||
if (!data) { |
||||
<div>No data found</div>; |
||||
} |
||||
|
||||
return ( |
||||
<InspectDataTabOld |
||||
isLoading={data?.state === LoadingState.Loading} |
||||
data={data?.series} |
||||
options={options} |
||||
hasTransformations={hasTransformations(dataProvider)} |
||||
timeZone={timeRange.getTimeZone()} |
||||
panelPluginId={panel.state.pluginId} |
||||
dataName={panel.state.title} |
||||
fieldConfig={panel.state.fieldConfig} |
||||
onOptionsChange={model.onOptionsChange} |
||||
/> |
||||
); |
||||
}; |
||||
} |
||||
|
||||
function hasTransformations(dataProvider: SceneDataProvider) { |
||||
if (dataProvider instanceof SceneDataTransformer) { |
||||
return dataProvider.state.transformations.length > 0; |
||||
} |
||||
|
||||
return false; |
||||
} |
||||
|
||||
function getDataProviderToSubscribeTo(dataProvider: SceneDataProvider, withTransforms: boolean) { |
||||
if (withTransforms && dataProvider instanceof SceneDataTransformer) { |
||||
return dataProvider.state.$data!; |
||||
} |
||||
|
||||
return dataProvider; |
||||
} |
||||
|
||||
@ -1,7 +1,8 @@ |
||||
import { SceneObjectState } from '@grafana/scenes'; |
||||
import { SceneObjectRef, SceneObjectState, VizPanel } from '@grafana/scenes'; |
||||
import { InspectTab } from 'app/features/inspector/types'; |
||||
|
||||
export interface InspectTabState extends SceneObjectState { |
||||
label: string; |
||||
value: InspectTab; |
||||
panelRef: SceneObjectRef<VizPanel>; |
||||
} |
||||
|
||||
Loading…
Reference in new issue