mirror of https://github.com/grafana/grafana
Scenes: Remove old scenes stuff (#79760)
* Scenes: Remove old scenes stuff * Fixes * Fixes * updatepull/80023/head
Torkel Ödegaard
2 years ago
committed by
GitHub
parent
692e8958a3
commit
f0c38611a2
@ -1,57 +0,0 @@ |
|||||||
// Libraries
|
|
||||||
import React from 'react'; |
|
||||||
import { useAsync } from 'react-use'; |
|
||||||
|
|
||||||
import { Card, Stack } from '@grafana/ui'; |
|
||||||
import { Page } from 'app/core/components/Page/Page'; |
|
||||||
|
|
||||||
// Types
|
|
||||||
import { getGrafanaSearcher } from '../search/service'; |
|
||||||
|
|
||||||
import { getScenes } from './scenes'; |
|
||||||
|
|
||||||
export interface Props {} |
|
||||||
|
|
||||||
export const SceneListPage = ({}: Props) => { |
|
||||||
const scenes = getScenes(); |
|
||||||
const results = useAsync(() => { |
|
||||||
return getGrafanaSearcher().starred({ starred: true }); |
|
||||||
}, []); |
|
||||||
|
|
||||||
return ( |
|
||||||
<Page navId="scenes" subTitle="Experimental new runtime and state model for dashboards"> |
|
||||||
<Page.Contents> |
|
||||||
<Stack direction="column" gap={1}> |
|
||||||
<h5>Apps</h5> |
|
||||||
<Stack direction="column" gap={0}> |
|
||||||
<Card href={`/scenes/grafana-monitoring`}> |
|
||||||
<Card.Heading>Grafana monitoring</Card.Heading> |
|
||||||
</Card> |
|
||||||
</Stack> |
|
||||||
<h5>Test scenes</h5> |
|
||||||
<Stack direction="column" gap={0}> |
|
||||||
{scenes.map((scene) => ( |
|
||||||
<Card key={scene.title} href={`/scenes/${scene.title}`}> |
|
||||||
<Card.Heading>{scene.title}</Card.Heading> |
|
||||||
</Card> |
|
||||||
))} |
|
||||||
</Stack> |
|
||||||
{results.value && ( |
|
||||||
<> |
|
||||||
<h5>Starred dashboards</h5> |
|
||||||
<Stack direction="column" gap={0}> |
|
||||||
{results.value!.view.map((dash) => ( |
|
||||||
<Card href={`/scenes/dashboard/${dash.uid}`} key={dash.uid}> |
|
||||||
<Card.Heading>{dash.name}</Card.Heading> |
|
||||||
</Card> |
|
||||||
))} |
|
||||||
</Stack> |
|
||||||
</> |
|
||||||
)} |
|
||||||
</Stack> |
|
||||||
</Page.Contents> |
|
||||||
</Page> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default SceneListPage; |
|
||||||
@ -1,33 +0,0 @@ |
|||||||
// Libraries
|
|
||||||
import React, { useEffect, useState } from 'react'; |
|
||||||
|
|
||||||
import { getUrlSyncManager } from '@grafana/scenes'; |
|
||||||
import { GrafanaRouteComponentProps } from 'app/core/navigation/types'; |
|
||||||
|
|
||||||
import { getSceneByTitle } from './scenes'; |
|
||||||
|
|
||||||
export interface Props extends GrafanaRouteComponentProps<{ name: string }> {} |
|
||||||
|
|
||||||
export const ScenePage = (props: Props) => { |
|
||||||
const scene = getSceneByTitle(props.match.params.name); |
|
||||||
const [isInitialized, setInitialized] = useState(false); |
|
||||||
|
|
||||||
useEffect(() => { |
|
||||||
if (scene && !isInitialized) { |
|
||||||
getUrlSyncManager().initSync(scene); |
|
||||||
setInitialized(true); |
|
||||||
} |
|
||||||
}, [isInitialized, scene]); |
|
||||||
|
|
||||||
if (!scene) { |
|
||||||
return <h2>Scene not found</h2>; |
|
||||||
} |
|
||||||
|
|
||||||
if (!isInitialized) { |
|
||||||
return null; |
|
||||||
} |
|
||||||
|
|
||||||
return <scene.Component model={scene} />; |
|
||||||
}; |
|
||||||
|
|
||||||
export default ScenePage; |
|
||||||
@ -1,110 +0,0 @@ |
|||||||
// Libraries
|
|
||||||
import React, { useMemo, useState } from 'react'; |
|
||||||
|
|
||||||
import { SceneApp, SceneAppPage, SceneRouteMatch, SceneAppPageLike } from '@grafana/scenes'; |
|
||||||
import { usePageNav } from 'app/core/components/Page/usePageNav'; |
|
||||||
import { PluginPageContext, PluginPageContextType } from 'app/features/plugins/components/PluginPageContext'; |
|
||||||
|
|
||||||
import { |
|
||||||
getOverviewScene, |
|
||||||
getHttpHandlerListScene, |
|
||||||
getOverviewLogsScene, |
|
||||||
getHandlerDetailsScene, |
|
||||||
getHandlerLogsScene, |
|
||||||
} from './scenes'; |
|
||||||
import { getTrafficScene } from './traffic'; |
|
||||||
|
|
||||||
export function GrafanaMonitoringApp() { |
|
||||||
const appScene = useMemo( |
|
||||||
() => |
|
||||||
new SceneApp({ |
|
||||||
pages: [getMainPageScene()], |
|
||||||
}), |
|
||||||
[] |
|
||||||
); |
|
||||||
|
|
||||||
const sectionNav = usePageNav('scenes')!; |
|
||||||
const [pluginContext] = useState<PluginPageContextType>({ sectionNav }); |
|
||||||
|
|
||||||
return ( |
|
||||||
<PluginPageContext.Provider value={pluginContext}> |
|
||||||
<appScene.Component model={appScene} /> |
|
||||||
</PluginPageContext.Provider> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
export function getMainPageScene() { |
|
||||||
return new SceneAppPage({ |
|
||||||
title: 'Grafana Monitoring', |
|
||||||
subTitle: 'A custom app with embedded scenes to monitor your Grafana server', |
|
||||||
url: '/scenes/grafana-monitoring', |
|
||||||
hideFromBreadcrumbs: false, |
|
||||||
getScene: getOverviewScene, |
|
||||||
tabs: [ |
|
||||||
new SceneAppPage({ |
|
||||||
title: 'Overview', |
|
||||||
url: '/scenes/grafana-monitoring', |
|
||||||
getScene: getOverviewScene, |
|
||||||
preserveUrlKeys: ['from', 'to', 'var-instance'], |
|
||||||
}), |
|
||||||
new SceneAppPage({ |
|
||||||
title: 'HTTP handlers', |
|
||||||
url: '/scenes/grafana-monitoring/handlers', |
|
||||||
getScene: getHttpHandlerListScene, |
|
||||||
preserveUrlKeys: ['from', 'to', 'var-instance'], |
|
||||||
drilldowns: [ |
|
||||||
{ |
|
||||||
routePath: '/scenes/grafana-monitoring/handlers/:handler', |
|
||||||
getPage: getHandlerDrilldownPage, |
|
||||||
}, |
|
||||||
], |
|
||||||
}), |
|
||||||
new SceneAppPage({ |
|
||||||
title: 'Traffic', |
|
||||||
url: '/scenes/grafana-monitoring/traffic', |
|
||||||
getScene: getTrafficScene, |
|
||||||
preserveUrlKeys: ['from', 'to', 'var-instance'], |
|
||||||
}), |
|
||||||
new SceneAppPage({ |
|
||||||
title: 'Logs', |
|
||||||
url: '/scenes/grafana-monitoring/logs', |
|
||||||
getScene: getOverviewLogsScene, |
|
||||||
preserveUrlKeys: ['from', 'to', 'var-instance'], |
|
||||||
}), |
|
||||||
], |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
export function getHandlerDrilldownPage( |
|
||||||
match: SceneRouteMatch<{ handler: string; tab?: string }>, |
|
||||||
parent: SceneAppPageLike |
|
||||||
) { |
|
||||||
const handler = decodeURIComponent(match.params.handler); |
|
||||||
const baseUrl = `/scenes/grafana-monitoring/handlers/${encodeURIComponent(handler)}`; |
|
||||||
|
|
||||||
return new SceneAppPage({ |
|
||||||
title: handler, |
|
||||||
subTitle: 'A grafana http handler is responsible for service a specific API request', |
|
||||||
url: baseUrl, |
|
||||||
getParentPage: () => parent, |
|
||||||
getScene: () => getHandlerDetailsScene(handler), |
|
||||||
tabs: [ |
|
||||||
new SceneAppPage({ |
|
||||||
title: 'Metrics', |
|
||||||
url: baseUrl, |
|
||||||
routePath: '/scenes/grafana-monitoring/handlers/:handler', |
|
||||||
getScene: () => getHandlerDetailsScene(handler), |
|
||||||
preserveUrlKeys: ['from', 'to', 'var-instance'], |
|
||||||
}), |
|
||||||
new SceneAppPage({ |
|
||||||
title: 'Logs', |
|
||||||
url: baseUrl + '/logs', |
|
||||||
routePath: '/scenes/grafana-monitoring/handlers/:handler/logs', |
|
||||||
getScene: () => getHandlerLogsScene(handler), |
|
||||||
preserveUrlKeys: ['from', 'to', 'var-instance'], |
|
||||||
}), |
|
||||||
], |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
export default GrafanaMonitoringApp; |
|
||||||
@ -1,24 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
|
|
||||||
import { SelectableValue } from '@grafana/data'; |
|
||||||
import { SceneComponentProps, SceneObjectBase, SceneObjectState } from '@grafana/scenes'; |
|
||||||
import { RadioButtonGroup } from '@grafana/ui'; |
|
||||||
|
|
||||||
export interface SceneRadioToggleState extends SceneObjectState { |
|
||||||
options: Array<SelectableValue<string>>; |
|
||||||
value: string; |
|
||||||
onChange: (value: string) => void; |
|
||||||
} |
|
||||||
|
|
||||||
export class SceneRadioToggle extends SceneObjectBase<SceneRadioToggleState> { |
|
||||||
onChange = (value: string) => { |
|
||||||
this.setState({ value }); |
|
||||||
this.state.onChange(value); |
|
||||||
}; |
|
||||||
|
|
||||||
static Component = ({ model }: SceneComponentProps<SceneRadioToggle>) => { |
|
||||||
const { options, value } = model.useState(); |
|
||||||
|
|
||||||
return <RadioButtonGroup options={options} value={value} onChange={model.onChange} />; |
|
||||||
}; |
|
||||||
} |
|
||||||
@ -1,20 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
|
|
||||||
import { SceneComponentProps, SceneObjectState, SceneObjectBase } from '@grafana/scenes'; |
|
||||||
import { Input } from '@grafana/ui'; |
|
||||||
|
|
||||||
export interface SceneSearchBoxState extends SceneObjectState { |
|
||||||
value: string; |
|
||||||
} |
|
||||||
|
|
||||||
export class SceneSearchBox extends SceneObjectBase<SceneSearchBoxState> { |
|
||||||
onChange = (evt: React.FormEvent<HTMLInputElement>) => { |
|
||||||
this.setState({ value: evt.currentTarget.value }); |
|
||||||
}; |
|
||||||
|
|
||||||
static Component = ({ model }: SceneComponentProps<SceneSearchBox>) => { |
|
||||||
const { value } = model.useState(); |
|
||||||
|
|
||||||
return <Input width={25} placeholder="Search..." value={value} onChange={model.onChange} />; |
|
||||||
}; |
|
||||||
} |
|
||||||
@ -1,428 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
|
|
||||||
import { FieldColorModeId, getFrameDisplayName } from '@grafana/data'; |
|
||||||
import { locationService } from '@grafana/runtime'; |
|
||||||
import { |
|
||||||
SceneFlexLayout, |
|
||||||
SceneByFrameRepeater, |
|
||||||
SceneTimePicker, |
|
||||||
EmbeddedScene, |
|
||||||
SceneDataNode, |
|
||||||
SceneTimeRange, |
|
||||||
VariableValueSelectors, |
|
||||||
SceneQueryRunner, |
|
||||||
SceneControlsSpacer, |
|
||||||
SceneDataTransformer, |
|
||||||
SceneRefreshPicker, |
|
||||||
SceneFlexItem, |
|
||||||
PanelBuilders, |
|
||||||
} from '@grafana/scenes'; |
|
||||||
import { BigValueGraphMode, BigValueTextMode, LogsDedupStrategy, LogsSortOrder } from '@grafana/schema'; |
|
||||||
import { LinkButton } from '@grafana/ui'; |
|
||||||
|
|
||||||
import { SceneRadioToggle } from './SceneRadioToggle'; |
|
||||||
import { SceneSearchBox } from './SceneSearchBox'; |
|
||||||
import { getTableFilterTransform, getTimeSeriesFilterTransform } from './transforms'; |
|
||||||
import { getInstantQuery, getLinkUrlWithAppUrlState, getTimeSeriesQuery, getVariablesDefinitions } from './utils'; |
|
||||||
|
|
||||||
export function getHttpHandlerListScene(): EmbeddedScene { |
|
||||||
const searchBox = new SceneSearchBox({ value: '' }); |
|
||||||
|
|
||||||
const httpHandlerQueries = getInstantQuery({ |
|
||||||
expr: 'sort_desc(avg without(job, instance) (rate(grafana_http_request_duration_seconds_sum[$__rate_interval]) * 1e3)) ', |
|
||||||
}); |
|
||||||
|
|
||||||
const httpHandlerQueriesFiltered = new SceneDataTransformer({ |
|
||||||
$data: httpHandlerQueries, |
|
||||||
transformations: [getTableFilterTransform('')], |
|
||||||
}); |
|
||||||
|
|
||||||
httpHandlerQueriesFiltered.addActivationHandler(() => { |
|
||||||
const sub = searchBox.subscribeToState((state) => { |
|
||||||
// Update transform and re-process them
|
|
||||||
httpHandlerQueriesFiltered.setState({ transformations: [getTableFilterTransform(state.value)] }); |
|
||||||
httpHandlerQueriesFiltered.reprocessTransformations(); |
|
||||||
}); |
|
||||||
|
|
||||||
return () => sub.unsubscribe(); |
|
||||||
}); |
|
||||||
|
|
||||||
const httpHandlersTable = PanelBuilders.table() |
|
||||||
.setTitle('Handlers') |
|
||||||
.setData(httpHandlerQueriesFiltered) |
|
||||||
.setOption('footer', { |
|
||||||
enablePagination: true, |
|
||||||
}) |
|
||||||
.setOverrides((b) => |
|
||||||
b |
|
||||||
.matchFieldsWithNameByRegex('.*') |
|
||||||
.overrideFilterable(false) |
|
||||||
.matchFieldsWithName('Time') |
|
||||||
.overrideCustomFieldConfig('hidden', true) |
|
||||||
.matchFieldsWithName('Value') |
|
||||||
.overrideDisplayName('Duration (Avg)') |
|
||||||
.matchFieldsWithName('handler') |
|
||||||
.overrideLinks([ |
|
||||||
{ |
|
||||||
title: 'Go to handler drilldown view', |
|
||||||
url: '', |
|
||||||
onBuildUrl: () => { |
|
||||||
const params = locationService.getSearchObject(); |
|
||||||
return getLinkUrlWithAppUrlState( |
|
||||||
'/scenes/grafana-monitoring/handlers/${__value.text:percentencode}', |
|
||||||
params |
|
||||||
); |
|
||||||
}, |
|
||||||
}, |
|
||||||
]) |
|
||||||
) |
|
||||||
.build(); |
|
||||||
|
|
||||||
const reqDurationTimeSeries = new SceneQueryRunner({ |
|
||||||
datasource: { uid: 'gdev-prometheus' }, |
|
||||||
queries: [ |
|
||||||
{ |
|
||||||
refId: 'A', |
|
||||||
//expr: ``,
|
|
||||||
expr: 'topk(20, avg without(job, instance) (rate(grafana_http_request_duration_seconds_sum[$__rate_interval])) * 1e3)', |
|
||||||
range: true, |
|
||||||
format: 'time_series', |
|
||||||
legendFormat: '{{method}} {{handler}} (status = {{status_code}})', |
|
||||||
maxDataPoints: 500, |
|
||||||
}, |
|
||||||
], |
|
||||||
}); |
|
||||||
|
|
||||||
const reqDurationTimeSeriesFiltered = new SceneDataTransformer({ |
|
||||||
$data: reqDurationTimeSeries, |
|
||||||
transformations: [getTimeSeriesFilterTransform('')], |
|
||||||
}); |
|
||||||
|
|
||||||
reqDurationTimeSeriesFiltered.addActivationHandler(() => { |
|
||||||
const sub = searchBox.subscribeToState((state) => { |
|
||||||
// Update transform and re-process them
|
|
||||||
reqDurationTimeSeriesFiltered.setState({ transformations: [getTimeSeriesFilterTransform(state.value)] }); |
|
||||||
reqDurationTimeSeriesFiltered.reprocessTransformations(); |
|
||||||
}); |
|
||||||
|
|
||||||
return () => sub.unsubscribe(); |
|
||||||
}); |
|
||||||
|
|
||||||
const graphsScene = new SceneByFrameRepeater({ |
|
||||||
$data: reqDurationTimeSeriesFiltered, |
|
||||||
body: new SceneFlexLayout({ |
|
||||||
direction: 'column', |
|
||||||
children: [], |
|
||||||
}), |
|
||||||
getLayoutChild: (data, frame, frameIndex) => { |
|
||||||
return new SceneFlexItem({ |
|
||||||
key: `panel-${frameIndex}`, |
|
||||||
minHeight: 200, |
|
||||||
$data: new SceneDataNode({ |
|
||||||
data: { |
|
||||||
...data, |
|
||||||
series: [frame], |
|
||||||
}, |
|
||||||
}), |
|
||||||
body: new SceneFlexLayout({ |
|
||||||
direction: 'row', |
|
||||||
key: `row-${frameIndex}`, |
|
||||||
children: [ |
|
||||||
new SceneFlexItem({ |
|
||||||
key: `flex1-${frameIndex}`, |
|
||||||
body: PanelBuilders.timeseries() |
|
||||||
.setTitle(getFrameDisplayName(frame)) |
|
||||||
.setOption('legend', { showLegend: false }) |
|
||||||
.setHeaderActions( |
|
||||||
<LinkButton |
|
||||||
fill="text" |
|
||||||
size="sm" |
|
||||||
icon="arrow-right" |
|
||||||
href={getHandlerDrilldownUrl(frame.fields[1]!.labels!.handler)} |
|
||||||
> |
|
||||||
Details |
|
||||||
</LinkButton> |
|
||||||
) |
|
||||||
.build(), |
|
||||||
}), |
|
||||||
|
|
||||||
new SceneFlexItem({ |
|
||||||
key: `flex2-${frameIndex}`, |
|
||||||
width: 200, |
|
||||||
body: PanelBuilders.stat() |
|
||||||
.setTitle('Last') |
|
||||||
.setOption('graphMode', BigValueGraphMode.None) |
|
||||||
.setOption('textMode', BigValueTextMode.Value) |
|
||||||
.setDisplayName('Last') |
|
||||||
.build(), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
}); |
|
||||||
}, |
|
||||||
}); |
|
||||||
|
|
||||||
const layout = new SceneFlexLayout({ |
|
||||||
children: [new SceneFlexItem({ body: httpHandlersTable })], |
|
||||||
}); |
|
||||||
|
|
||||||
const sceneToggle = new SceneRadioToggle({ |
|
||||||
options: [ |
|
||||||
{ value: 'table', label: 'Table' }, |
|
||||||
{ value: 'graphs', label: 'Graphs' }, |
|
||||||
], |
|
||||||
value: 'table', |
|
||||||
onChange: (value) => { |
|
||||||
if (value === 'table') { |
|
||||||
layout.setState({ children: [new SceneFlexItem({ body: httpHandlersTable })] }); |
|
||||||
} else { |
|
||||||
layout.setState({ children: [graphsScene] }); |
|
||||||
} |
|
||||||
}, |
|
||||||
}); |
|
||||||
|
|
||||||
const scene = new EmbeddedScene({ |
|
||||||
$variables: getVariablesDefinitions(), |
|
||||||
$data: httpHandlerQueries, |
|
||||||
$timeRange: new SceneTimeRange({ from: 'now-1h', to: 'now' }), |
|
||||||
controls: [ |
|
||||||
new VariableValueSelectors({}), |
|
||||||
searchBox, |
|
||||||
new SceneControlsSpacer(), |
|
||||||
sceneToggle, |
|
||||||
new SceneTimePicker({ isOnCanvas: true }), |
|
||||||
new SceneRefreshPicker({ isOnCanvas: true }), |
|
||||||
], |
|
||||||
body: layout, |
|
||||||
}); |
|
||||||
|
|
||||||
return scene; |
|
||||||
} |
|
||||||
|
|
||||||
function getHandlerDrilldownUrl(handler: string) { |
|
||||||
const params = locationService.getSearchObject(); |
|
||||||
return getLinkUrlWithAppUrlState(`/scenes/grafana-monitoring/handlers/${encodeURIComponent(handler)}`, params); |
|
||||||
} |
|
||||||
|
|
||||||
export function getHandlerDetailsScene(handler: string): EmbeddedScene { |
|
||||||
const reqDurationTimeSeries = getTimeSeriesQuery({ |
|
||||||
expr: `avg without(job, instance) (rate(grafana_http_request_duration_seconds_sum{handler="${handler}"}[$__rate_interval])) * 1e3`, |
|
||||||
legendFormat: '{{method}} {{handler}} (status = {{status_code}})', |
|
||||||
}); |
|
||||||
|
|
||||||
const reqCountTimeSeries = getTimeSeriesQuery({ |
|
||||||
expr: `sum without(job, instance) (rate(grafana_http_request_duration_seconds_count{handler="${handler}"}[$__rate_interval])) `, |
|
||||||
legendFormat: '{{method}} {{handler}} (status = {{status_code}})', |
|
||||||
}); |
|
||||||
|
|
||||||
const scene = new EmbeddedScene({ |
|
||||||
$variables: getVariablesDefinitions(), |
|
||||||
$timeRange: new SceneTimeRange({ from: 'now-1h', to: 'now' }), |
|
||||||
controls: [ |
|
||||||
new VariableValueSelectors({}), |
|
||||||
new SceneControlsSpacer(), |
|
||||||
new SceneTimePicker({ isOnCanvas: true }), |
|
||||||
new SceneRefreshPicker({ isOnCanvas: true }), |
|
||||||
], |
|
||||||
body: new SceneFlexLayout({ |
|
||||||
direction: 'column', |
|
||||||
children: [ |
|
||||||
new SceneFlexItem({ |
|
||||||
body: PanelBuilders.timeseries().setData(reqDurationTimeSeries).setTitle('Request duration avg (ms)').build(), |
|
||||||
}), |
|
||||||
new SceneFlexItem({ |
|
||||||
body: PanelBuilders.timeseries().setData(reqCountTimeSeries).setTitle('Request count/s').build(), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
}); |
|
||||||
|
|
||||||
return scene; |
|
||||||
} |
|
||||||
|
|
||||||
export function getOverviewScene(): EmbeddedScene { |
|
||||||
const scene = new EmbeddedScene({ |
|
||||||
$variables: getVariablesDefinitions(), |
|
||||||
$timeRange: new SceneTimeRange({ from: 'now-1h', to: 'now' }), |
|
||||||
controls: [ |
|
||||||
new VariableValueSelectors({}), |
|
||||||
new SceneControlsSpacer(), |
|
||||||
new SceneTimePicker({ isOnCanvas: true }), |
|
||||||
new SceneRefreshPicker({ isOnCanvas: true }), |
|
||||||
], |
|
||||||
body: new SceneFlexLayout({ |
|
||||||
direction: 'column', |
|
||||||
children: [ |
|
||||||
new SceneFlexItem({ |
|
||||||
height: 150, |
|
||||||
body: new SceneFlexLayout({ |
|
||||||
children: [ |
|
||||||
new SceneFlexItem({ |
|
||||||
body: getInstantStatPanel('grafana_stat_totals_dashboard', 'Dashboards'), |
|
||||||
}), |
|
||||||
new SceneFlexItem({ |
|
||||||
body: getInstantStatPanel('grafana_stat_total_users', 'Users'), |
|
||||||
}), |
|
||||||
new SceneFlexItem({ |
|
||||||
body: getInstantStatPanel('sum(grafana_stat_totals_datasource)', 'Data sources'), |
|
||||||
}), |
|
||||||
new SceneFlexItem({ |
|
||||||
body: getInstantStatPanel('grafana_stat_total_service_account_tokens', 'Service account tokens'), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
}), |
|
||||||
|
|
||||||
new SceneFlexItem({ |
|
||||||
body: PanelBuilders.timeseries() |
|
||||||
.setData( |
|
||||||
new SceneQueryRunner({ |
|
||||||
datasource: { uid: 'gdev-prometheus' }, |
|
||||||
queries: [ |
|
||||||
{ |
|
||||||
refId: 'A', |
|
||||||
expr: `sum(process_resident_memory_bytes{job="grafana", instance=~"$instance"})`, |
|
||||||
range: true, |
|
||||||
format: 'time_series', |
|
||||||
maxDataPoints: 500, |
|
||||||
}, |
|
||||||
], |
|
||||||
}) |
|
||||||
) |
|
||||||
.setTitle('Memory usage') |
|
||||||
.setOption('legend', { showLegend: false }) |
|
||||||
.setUnit('bytes') |
|
||||||
.setMin(0) |
|
||||||
.setCustomFieldConfig('lineWidth', 2) |
|
||||||
.setCustomFieldConfig('fillOpacity', 6) |
|
||||||
.build(), |
|
||||||
}), |
|
||||||
new SceneFlexItem({ |
|
||||||
body: PanelBuilders.timeseries() |
|
||||||
.setData( |
|
||||||
new SceneQueryRunner({ |
|
||||||
datasource: { uid: 'gdev-prometheus' }, |
|
||||||
queries: [ |
|
||||||
{ |
|
||||||
refId: 'A', |
|
||||||
expr: `sum(go_goroutines{job="grafana", instance=~"$instance"})`, |
|
||||||
range: true, |
|
||||||
format: 'time_series', |
|
||||||
maxDataPoints: 500, |
|
||||||
}, |
|
||||||
], |
|
||||||
}) |
|
||||||
) |
|
||||||
.setOption('legend', { showLegend: false }) |
|
||||||
.setMin(0) |
|
||||||
.setCustomFieldConfig('lineWidth', 2) |
|
||||||
.setCustomFieldConfig('fillOpacity', 6) |
|
||||||
.setTitle('Go routines') |
|
||||||
.build(), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
}); |
|
||||||
|
|
||||||
return scene; |
|
||||||
} |
|
||||||
|
|
||||||
function getInstantStatPanel(query: string, title: string) { |
|
||||||
return PanelBuilders.stat() |
|
||||||
.setData(getInstantQuery({ expr: query })) |
|
||||||
.setTitle(title) |
|
||||||
.setColor({ fixedColor: 'text', mode: FieldColorModeId.Fixed }) |
|
||||||
.build(); |
|
||||||
} |
|
||||||
|
|
||||||
export function getHandlerLogsScene(handler: string): EmbeddedScene { |
|
||||||
const logsQuery = new SceneQueryRunner({ |
|
||||||
datasource: { uid: 'gdev-loki' }, |
|
||||||
queries: [ |
|
||||||
{ |
|
||||||
refId: 'A', |
|
||||||
expr: `{job="grafana"} | logfmt | handler=\`${handler}\` | __error__=\`\``, |
|
||||||
queryType: 'range', |
|
||||||
maxDataPoints: 5000, |
|
||||||
}, |
|
||||||
], |
|
||||||
}); |
|
||||||
|
|
||||||
const scene = new EmbeddedScene({ |
|
||||||
$variables: getVariablesDefinitions(), |
|
||||||
$timeRange: new SceneTimeRange({ from: 'now-1h', to: 'now' }), |
|
||||||
controls: [ |
|
||||||
new VariableValueSelectors({}), |
|
||||||
new SceneControlsSpacer(), |
|
||||||
new SceneTimePicker({ isOnCanvas: true }), |
|
||||||
new SceneRefreshPicker({ isOnCanvas: true }), |
|
||||||
], |
|
||||||
body: new SceneFlexLayout({ |
|
||||||
direction: 'column', |
|
||||||
children: [ |
|
||||||
new SceneFlexItem({ |
|
||||||
body: PanelBuilders.logs() |
|
||||||
.setData(logsQuery) |
|
||||||
.setTitle('') |
|
||||||
.setOption('showTime', true) |
|
||||||
.setOption('showLabels', false) |
|
||||||
.setOption('showCommonLabels', false) |
|
||||||
.setOption('wrapLogMessage', true) |
|
||||||
.setOption('prettifyLogMessage', false) |
|
||||||
.setOption('enableLogDetails', true) |
|
||||||
.setOption('dedupStrategy', LogsDedupStrategy.none) |
|
||||||
.setOption('sortOrder', LogsSortOrder.Descending) |
|
||||||
.build(), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
}); |
|
||||||
|
|
||||||
return scene; |
|
||||||
} |
|
||||||
|
|
||||||
export function getOverviewLogsScene(): EmbeddedScene { |
|
||||||
const logsQuery = new SceneQueryRunner({ |
|
||||||
datasource: { uid: 'gdev-loki' }, |
|
||||||
queries: [ |
|
||||||
{ |
|
||||||
refId: 'A', |
|
||||||
expr: `{job="grafana"} | logfmt | __error__=\`\``, |
|
||||||
queryType: 'range', |
|
||||||
maxDataPoints: 5000, |
|
||||||
}, |
|
||||||
], |
|
||||||
}); |
|
||||||
|
|
||||||
const scene = new EmbeddedScene({ |
|
||||||
$variables: getVariablesDefinitions(), |
|
||||||
$timeRange: new SceneTimeRange({ from: 'now-1h', to: 'now' }), |
|
||||||
controls: [ |
|
||||||
new VariableValueSelectors({}), |
|
||||||
new SceneControlsSpacer(), |
|
||||||
new SceneTimePicker({ isOnCanvas: true }), |
|
||||||
new SceneRefreshPicker({ isOnCanvas: true }), |
|
||||||
], |
|
||||||
body: new SceneFlexLayout({ |
|
||||||
direction: 'column', |
|
||||||
children: [ |
|
||||||
new SceneFlexItem({ |
|
||||||
body: PanelBuilders.logs() |
|
||||||
.setTitle('') |
|
||||||
.setData(logsQuery) |
|
||||||
.setOption('showTime', true) |
|
||||||
.setOption('showLabels', false) |
|
||||||
.setOption('showCommonLabels', false) |
|
||||||
.setOption('wrapLogMessage', true) |
|
||||||
.setOption('prettifyLogMessage', false) |
|
||||||
.setOption('enableLogDetails', true) |
|
||||||
.setOption('dedupStrategy', LogsDedupStrategy.none) |
|
||||||
.setOption('sortOrder', LogsSortOrder.Descending) |
|
||||||
.build(), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
}); |
|
||||||
|
|
||||||
return scene; |
|
||||||
} |
|
||||||
@ -1,127 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
|
|
||||||
import { |
|
||||||
SceneFlexLayout, |
|
||||||
SceneTimePicker, |
|
||||||
EmbeddedScene, |
|
||||||
SceneTimeRange, |
|
||||||
VariableValueSelectors, |
|
||||||
SceneControlsSpacer, |
|
||||||
SceneRefreshPicker, |
|
||||||
SceneFlexItem, |
|
||||||
SceneObjectState, |
|
||||||
SceneObjectBase, |
|
||||||
SceneObjectUrlSyncConfig, |
|
||||||
SceneObjectUrlValues, |
|
||||||
PanelBuilders, |
|
||||||
} from '@grafana/scenes'; |
|
||||||
import { Button } from '@grafana/ui'; |
|
||||||
|
|
||||||
import { getInstantQuery, getTimeSeriesQuery, getVariablesDefinitions } from './utils'; |
|
||||||
|
|
||||||
export function getTrafficScene(): EmbeddedScene { |
|
||||||
const httpHandlersTable = PanelBuilders.table() |
|
||||||
.setData( |
|
||||||
getInstantQuery({ |
|
||||||
expr: 'sort_desc(avg without(job, instance) (rate(grafana_http_request_duration_seconds_sum[$__rate_interval]) * 1e3)) ', |
|
||||||
}) |
|
||||||
) |
|
||||||
.setTitle('Handlers') |
|
||||||
.setOption('footer', { enablePagination: true }) |
|
||||||
.setOverrides((b) => |
|
||||||
b |
|
||||||
.matchFieldsWithNameByRegex('.*') |
|
||||||
.overrideFilterable(false) |
|
||||||
.matchFieldsWithName('Time') |
|
||||||
.overrideCustomFieldConfig('hidden', true) |
|
||||||
.matchFieldsWithName('Value') |
|
||||||
.overrideDisplayName('Duration (Avg)') |
|
||||||
.matchFieldsWithName('handler') |
|
||||||
.overrideLinks([ |
|
||||||
{ |
|
||||||
title: 'Go to handler drilldown view', |
|
||||||
url: '/scenes/grafana-monitoring/traffic?handler=${__value.text:percentencode}', |
|
||||||
}, |
|
||||||
]) |
|
||||||
) |
|
||||||
.build(); |
|
||||||
|
|
||||||
const scene = new EmbeddedScene({ |
|
||||||
$variables: getVariablesDefinitions(), |
|
||||||
$timeRange: new SceneTimeRange({ from: 'now-1h', to: 'now' }), |
|
||||||
controls: [ |
|
||||||
new VariableValueSelectors({}), |
|
||||||
new SceneControlsSpacer(), |
|
||||||
new SceneTimePicker({ isOnCanvas: true }), |
|
||||||
new SceneRefreshPicker({ isOnCanvas: true }), |
|
||||||
], |
|
||||||
body: new SceneFlexLayout({ |
|
||||||
$behaviors: [new HandlerDrilldownViewBehavior()], |
|
||||||
children: [new SceneFlexItem({ body: httpHandlersTable })], |
|
||||||
}), |
|
||||||
}); |
|
||||||
|
|
||||||
return scene; |
|
||||||
} |
|
||||||
|
|
||||||
export interface HandlerDrilldownViewBehaviorState extends SceneObjectState { |
|
||||||
handler?: string; |
|
||||||
} |
|
||||||
|
|
||||||
export class HandlerDrilldownViewBehavior extends SceneObjectBase<HandlerDrilldownViewBehaviorState> { |
|
||||||
protected _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['handler'] }); |
|
||||||
|
|
||||||
constructor() { |
|
||||||
super({}); |
|
||||||
|
|
||||||
this.addActivationHandler(() => { |
|
||||||
this._subs.add(this.subscribeToState((state) => this.onHandlerChanged(state.handler))); |
|
||||||
this.onHandlerChanged(this.state.handler); |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
private onHandlerChanged(handler: string | undefined) { |
|
||||||
const layout = this.getLayout(); |
|
||||||
|
|
||||||
if (handler == null) { |
|
||||||
layout.setState({ children: layout.state.children.slice(0, 1) }); |
|
||||||
} else { |
|
||||||
layout.setState({ children: [layout.state.children[0], this.getDrilldownView(handler)] }); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
private getDrilldownView(handler: string): SceneFlexItem { |
|
||||||
return new SceneFlexItem({ |
|
||||||
key: 'drilldown-flex', |
|
||||||
body: PanelBuilders.timeseries() |
|
||||||
.setData( |
|
||||||
getTimeSeriesQuery({ |
|
||||||
expr: `rate(grafana_http_request_duration_seconds_sum{handler="${handler}"}[$__rate_interval]) * 1e3`, |
|
||||||
}) |
|
||||||
) |
|
||||||
.setTitle(`Handler: ${handler} details`) |
|
||||||
.setHeaderActions( |
|
||||||
<Button size="sm" variant="secondary" icon="times" onClick={() => this.setState({ handler: undefined })} /> |
|
||||||
) |
|
||||||
.build(), |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
getUrlState() { |
|
||||||
return { handler: this.state.handler }; |
|
||||||
} |
|
||||||
|
|
||||||
updateFromUrl(values: SceneObjectUrlValues) { |
|
||||||
if (typeof values.handler === 'string' || values.handler === undefined) { |
|
||||||
this.setState({ handler: values.handler }); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
private getLayout() { |
|
||||||
if (this.parent instanceof SceneFlexLayout) { |
|
||||||
return this.parent; |
|
||||||
} |
|
||||||
|
|
||||||
throw new Error('Invalid parent'); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,42 +0,0 @@ |
|||||||
import { map } from 'rxjs'; |
|
||||||
|
|
||||||
import { |
|
||||||
BasicValueMatcherOptions, |
|
||||||
CustomTransformOperator, |
|
||||||
DataTransformerID, |
|
||||||
getFrameDisplayName, |
|
||||||
ValueMatcherID, |
|
||||||
} from '@grafana/data'; |
|
||||||
import { FilterByValueMatch, FilterByValueType } from '@grafana/data/src/transformations/transformers/filterByValue'; |
|
||||||
import { DataTransformerConfig, MatcherConfig } from '@grafana/schema'; |
|
||||||
|
|
||||||
export function getTableFilterTransform(query: string): DataTransformerConfig { |
|
||||||
const regex: MatcherConfig<BasicValueMatcherOptions<string>> = { |
|
||||||
id: ValueMatcherID.regex, |
|
||||||
options: { value: query }, |
|
||||||
}; |
|
||||||
|
|
||||||
return { |
|
||||||
id: DataTransformerID.filterByValue, |
|
||||||
options: { |
|
||||||
type: FilterByValueType.include, |
|
||||||
match: FilterByValueMatch.all, |
|
||||||
filters: [ |
|
||||||
{ |
|
||||||
fieldName: 'handler', |
|
||||||
config: regex, |
|
||||||
}, |
|
||||||
], |
|
||||||
}, |
|
||||||
}; |
|
||||||
} |
|
||||||
|
|
||||||
export function getTimeSeriesFilterTransform(query: string): CustomTransformOperator { |
|
||||||
return () => (source) => { |
|
||||||
return source.pipe( |
|
||||||
map((data) => { |
|
||||||
return data.filter((frame) => getFrameDisplayName(frame).toLowerCase().includes(query.toLowerCase())); |
|
||||||
}) |
|
||||||
); |
|
||||||
}; |
|
||||||
} |
|
||||||
@ -1,57 +0,0 @@ |
|||||||
import { useLocation } from 'react-router-dom'; |
|
||||||
|
|
||||||
import { UrlQueryMap, urlUtil } from '@grafana/data'; |
|
||||||
import { locationSearchToObject } from '@grafana/runtime'; |
|
||||||
import { QueryVariable, SceneQueryRunner, SceneVariableSet } from '@grafana/scenes'; |
|
||||||
import { PromQuery } from 'app/plugins/datasource/prometheus/types'; |
|
||||||
|
|
||||||
export function useAppQueryParams() { |
|
||||||
const location = useLocation(); |
|
||||||
return locationSearchToObject(location.search || ''); |
|
||||||
} |
|
||||||
|
|
||||||
export function getLinkUrlWithAppUrlState(path: string, params: UrlQueryMap): string { |
|
||||||
return urlUtil.renderUrl(path, params); |
|
||||||
} |
|
||||||
|
|
||||||
export function getInstantQuery(query: Partial<PromQuery>): SceneQueryRunner { |
|
||||||
return new SceneQueryRunner({ |
|
||||||
datasource: { uid: 'gdev-prometheus' }, |
|
||||||
queries: [ |
|
||||||
{ |
|
||||||
refId: 'A', |
|
||||||
instant: true, |
|
||||||
format: 'table', |
|
||||||
maxDataPoints: 500, |
|
||||||
...query, |
|
||||||
}, |
|
||||||
], |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
export function getTimeSeriesQuery(query: Partial<PromQuery>): SceneQueryRunner { |
|
||||||
return new SceneQueryRunner({ |
|
||||||
datasource: { uid: 'gdev-prometheus' }, |
|
||||||
queries: [ |
|
||||||
{ |
|
||||||
refId: 'A', |
|
||||||
range: true, |
|
||||||
format: 'time_series', |
|
||||||
maxDataPoints: 500, |
|
||||||
...query, |
|
||||||
}, |
|
||||||
], |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
export function getVariablesDefinitions() { |
|
||||||
return new SceneVariableSet({ |
|
||||||
variables: [ |
|
||||||
new QueryVariable({ |
|
||||||
name: 'instance', |
|
||||||
datasource: { uid: 'gdev-prometheus' }, |
|
||||||
query: { query: 'label_values(grafana_http_request_duration_seconds_sum, instance)', refId: 'A' }, |
|
||||||
}), |
|
||||||
], |
|
||||||
}); |
|
||||||
} |
|
||||||
@ -1,73 +0,0 @@ |
|||||||
import { |
|
||||||
SceneGridRow, |
|
||||||
SceneTimePicker, |
|
||||||
SceneGridLayout, |
|
||||||
SceneTimeRange, |
|
||||||
SceneRefreshPicker, |
|
||||||
SceneGridItem, |
|
||||||
PanelBuilders, |
|
||||||
} from '@grafana/scenes'; |
|
||||||
import { TestDataQueryType } from '@grafana-plugins/grafana-testdata-datasource/dataquery.gen'; |
|
||||||
|
|
||||||
import { DashboardScene } from '../../dashboard-scene/scene/DashboardScene'; |
|
||||||
|
|
||||||
import { getQueryRunnerWithRandomWalkQuery } from './queries'; |
|
||||||
|
|
||||||
export function getGridWithMultipleTimeRanges(): DashboardScene { |
|
||||||
const globalTimeRange = new SceneTimeRange(); |
|
||||||
const row1TimeRange = new SceneTimeRange({ |
|
||||||
from: 'now-1y', |
|
||||||
to: 'now', |
|
||||||
}); |
|
||||||
|
|
||||||
return new DashboardScene({ |
|
||||||
title: 'Grid with rows and different queries and time ranges', |
|
||||||
body: new SceneGridLayout({ |
|
||||||
children: [ |
|
||||||
new SceneGridRow({ |
|
||||||
$timeRange: row1TimeRange, |
|
||||||
$data: getQueryRunnerWithRandomWalkQuery({ scenarioId: TestDataQueryType.RandomWalkTable }), |
|
||||||
title: 'Row A - has its own query, last year time range', |
|
||||||
key: 'Row A', |
|
||||||
isCollapsed: true, |
|
||||||
y: 0, |
|
||||||
children: [ |
|
||||||
new SceneGridItem({ |
|
||||||
x: 0, |
|
||||||
y: 1, |
|
||||||
width: 12, |
|
||||||
height: 5, |
|
||||||
isResizable: true, |
|
||||||
isDraggable: true, |
|
||||||
body: PanelBuilders.timeseries().setTitle('Row A Child1').build(), |
|
||||||
}), |
|
||||||
new SceneGridItem({ |
|
||||||
x: 0, |
|
||||||
y: 5, |
|
||||||
width: 6, |
|
||||||
height: 5, |
|
||||||
isResizable: true, |
|
||||||
isDraggable: true, |
|
||||||
body: PanelBuilders.timeseries().setTitle('Row A Child2').build(), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
new SceneGridItem({ |
|
||||||
x: 0, |
|
||||||
y: 12, |
|
||||||
width: 6, |
|
||||||
height: 10, |
|
||||||
isResizable: true, |
|
||||||
isDraggable: true, |
|
||||||
body: PanelBuilders.timeseries() |
|
||||||
.setTitle('Outsider, has its own query') |
|
||||||
.setData(getQueryRunnerWithRandomWalkQuery()) |
|
||||||
.build(), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
$timeRange: globalTimeRange, |
|
||||||
$data: getQueryRunnerWithRandomWalkQuery(), |
|
||||||
actions: [new SceneTimePicker({}), new SceneRefreshPicker({})], |
|
||||||
}); |
|
||||||
} |
|
||||||
@ -1,117 +0,0 @@ |
|||||||
import { |
|
||||||
SceneTimePicker, |
|
||||||
SceneFlexLayout, |
|
||||||
SceneGridLayout, |
|
||||||
SceneTimeRange, |
|
||||||
SceneRefreshPicker, |
|
||||||
SceneGridItem, |
|
||||||
SceneFlexItem, |
|
||||||
PanelBuilders, |
|
||||||
} from '@grafana/scenes'; |
|
||||||
|
|
||||||
import { DashboardScene } from '../../dashboard-scene/scene/DashboardScene'; |
|
||||||
|
|
||||||
import { getQueryRunnerWithRandomWalkQuery } from './queries'; |
|
||||||
|
|
||||||
export function getMultipleGridLayoutTest(): DashboardScene { |
|
||||||
return new DashboardScene({ |
|
||||||
title: 'Multiple grid layouts test', |
|
||||||
body: new SceneFlexLayout({ |
|
||||||
children: [ |
|
||||||
new SceneFlexItem({ |
|
||||||
body: new SceneGridLayout({ |
|
||||||
children: [ |
|
||||||
new SceneGridItem({ |
|
||||||
x: 0, |
|
||||||
y: 0, |
|
||||||
width: 12, |
|
||||||
height: 10, |
|
||||||
isDraggable: true, |
|
||||||
isResizable: true, |
|
||||||
body: PanelBuilders.timeseries().setTitle('Dragabble and resizable').build(), |
|
||||||
}), |
|
||||||
new SceneGridItem({ |
|
||||||
x: 12, |
|
||||||
y: 0, |
|
||||||
width: 12, |
|
||||||
height: 10, |
|
||||||
isResizable: false, |
|
||||||
isDraggable: true, |
|
||||||
body: PanelBuilders.timeseries().setTitle('Draggable only').build(), |
|
||||||
}), |
|
||||||
new SceneGridItem({ |
|
||||||
x: 6, |
|
||||||
y: 11, |
|
||||||
width: 12, |
|
||||||
height: 10, |
|
||||||
isResizable: false, |
|
||||||
isDraggable: true, |
|
||||||
body: new SceneFlexLayout({ |
|
||||||
direction: 'column', |
|
||||||
children: [ |
|
||||||
new SceneFlexItem({ |
|
||||||
ySizing: 'fill', |
|
||||||
body: PanelBuilders.timeseries().setTitle('Fill height').build(), |
|
||||||
}), |
|
||||||
new SceneFlexItem({ |
|
||||||
ySizing: 'fill', |
|
||||||
body: PanelBuilders.timeseries().setTitle('Fill height').build(), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
}), |
|
||||||
new SceneFlexItem({ |
|
||||||
body: new SceneGridLayout({ |
|
||||||
children: [ |
|
||||||
new SceneGridItem({ |
|
||||||
x: 0, |
|
||||||
y: 0, |
|
||||||
width: 12, |
|
||||||
height: 10, |
|
||||||
isDraggable: true, |
|
||||||
isResizable: true, |
|
||||||
body: PanelBuilders.timeseries().setTitle('Dragabble and resizable').build(), |
|
||||||
}), |
|
||||||
new SceneGridItem({ |
|
||||||
x: 12, |
|
||||||
y: 0, |
|
||||||
width: 12, |
|
||||||
height: 10, |
|
||||||
isResizable: false, |
|
||||||
isDraggable: true, |
|
||||||
body: PanelBuilders.timeseries().setTitle('Draggable only').build(), |
|
||||||
}), |
|
||||||
new SceneGridItem({ |
|
||||||
x: 6, |
|
||||||
y: 11, |
|
||||||
width: 12, |
|
||||||
height: 10, |
|
||||||
isResizable: false, |
|
||||||
isDraggable: true, |
|
||||||
body: new SceneFlexLayout({ |
|
||||||
direction: 'column', |
|
||||||
children: [ |
|
||||||
new SceneFlexItem({ |
|
||||||
ySizing: 'fill', |
|
||||||
body: PanelBuilders.timeseries().setTitle('Fill height').build(), |
|
||||||
}), |
|
||||||
new SceneFlexItem({ |
|
||||||
ySizing: 'fill', |
|
||||||
body: PanelBuilders.timeseries().setTitle('Fill height').build(), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
$timeRange: new SceneTimeRange(), |
|
||||||
$data: getQueryRunnerWithRandomWalkQuery(), |
|
||||||
actions: [new SceneTimePicker({}), new SceneRefreshPicker({})], |
|
||||||
}); |
|
||||||
} |
|
||||||
@ -1,105 +0,0 @@ |
|||||||
import { |
|
||||||
SceneGridRow, |
|
||||||
SceneTimePicker, |
|
||||||
SceneGridLayout, |
|
||||||
SceneTimeRange, |
|
||||||
SceneRefreshPicker, |
|
||||||
SceneGridItem, |
|
||||||
PanelBuilders, |
|
||||||
} from '@grafana/scenes'; |
|
||||||
import { TestDataQueryType } from '@grafana-plugins/grafana-testdata-datasource/dataquery.gen'; |
|
||||||
|
|
||||||
import { DashboardScene } from '../../dashboard-scene/scene/DashboardScene'; |
|
||||||
|
|
||||||
import { getQueryRunnerWithRandomWalkQuery } from './queries'; |
|
||||||
|
|
||||||
export function getGridWithMultipleData(): DashboardScene { |
|
||||||
return new DashboardScene({ |
|
||||||
title: 'Grid with rows and different queries', |
|
||||||
body: new SceneGridLayout({ |
|
||||||
children: [ |
|
||||||
new SceneGridRow({ |
|
||||||
$timeRange: new SceneTimeRange(), |
|
||||||
$data: getQueryRunnerWithRandomWalkQuery({ scenarioId: TestDataQueryType.RandomWalkTable }), |
|
||||||
title: 'Row A - has its own query', |
|
||||||
key: 'Row A', |
|
||||||
isCollapsed: true, |
|
||||||
y: 0, |
|
||||||
children: [ |
|
||||||
new SceneGridItem({ |
|
||||||
x: 0, |
|
||||||
y: 1, |
|
||||||
width: 12, |
|
||||||
height: 5, |
|
||||||
isResizable: true, |
|
||||||
isDraggable: true, |
|
||||||
body: PanelBuilders.timeseries().setTitle('Row A Child1').build(), |
|
||||||
}), |
|
||||||
new SceneGridItem({ |
|
||||||
x: 0, |
|
||||||
y: 5, |
|
||||||
width: 6, |
|
||||||
height: 5, |
|
||||||
isResizable: true, |
|
||||||
isDraggable: true, |
|
||||||
body: PanelBuilders.timeseries().setTitle('Row A Child2').build(), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
new SceneGridRow({ |
|
||||||
title: 'Row B - uses global query', |
|
||||||
key: 'Row B', |
|
||||||
isCollapsed: true, |
|
||||||
y: 1, |
|
||||||
children: [ |
|
||||||
new SceneGridItem({ |
|
||||||
x: 0, |
|
||||||
y: 2, |
|
||||||
width: 12, |
|
||||||
height: 5, |
|
||||||
isResizable: false, |
|
||||||
isDraggable: true, |
|
||||||
body: PanelBuilders.timeseries().setTitle('Row B Child1').build(), |
|
||||||
}), |
|
||||||
new SceneGridItem({ |
|
||||||
x: 0, |
|
||||||
y: 7, |
|
||||||
width: 6, |
|
||||||
height: 5, |
|
||||||
isResizable: false, |
|
||||||
isDraggable: true, |
|
||||||
body: PanelBuilders.timeseries() |
|
||||||
.setTitle('Row B Child2 with data') |
|
||||||
.setData(getQueryRunnerWithRandomWalkQuery({ seriesCount: 10 })) |
|
||||||
.build(), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
new SceneGridItem({ |
|
||||||
x: 0, |
|
||||||
y: 12, |
|
||||||
width: 6, |
|
||||||
height: 10, |
|
||||||
isResizable: true, |
|
||||||
isDraggable: true, |
|
||||||
body: PanelBuilders.timeseries() |
|
||||||
.setTitle('Outsider, has its own query') |
|
||||||
.setData(getQueryRunnerWithRandomWalkQuery({ seriesCount: 10 })) |
|
||||||
.build(), |
|
||||||
}), |
|
||||||
new SceneGridItem({ |
|
||||||
x: 6, |
|
||||||
y: 12, |
|
||||||
width: 12, |
|
||||||
height: 10, |
|
||||||
isResizable: true, |
|
||||||
isDraggable: true, |
|
||||||
body: PanelBuilders.timeseries().setTitle('Outsider, uses global query').build(), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
$timeRange: new SceneTimeRange(), |
|
||||||
$data: getQueryRunnerWithRandomWalkQuery(), |
|
||||||
actions: [new SceneTimePicker({}), new SceneRefreshPicker({})], |
|
||||||
}); |
|
||||||
} |
|
||||||
@ -1,45 +0,0 @@ |
|||||||
import { DashboardScene } from '../../dashboard-scene/scene/DashboardScene'; |
|
||||||
|
|
||||||
import { getGridWithMultipleTimeRanges } from './gridMultiTimeRange'; |
|
||||||
import { getMultipleGridLayoutTest } from './gridMultiple'; |
|
||||||
import { getGridWithMultipleData } from './gridWithMultipleData'; |
|
||||||
import { getQueryVariableDemo } from './queryVariableDemo'; |
|
||||||
import { getRepeatingPanelsDemo, getRepeatingRowsDemo } from './repeatingPanels'; |
|
||||||
import { getSceneWithRows } from './sceneWithRows'; |
|
||||||
import { getTransformationsDemo } from './transformations'; |
|
||||||
import { getVariablesDemo, getVariablesDemoWithAll } from './variablesDemo'; |
|
||||||
|
|
||||||
interface SceneDef { |
|
||||||
title: string; |
|
||||||
getScene: () => DashboardScene; |
|
||||||
} |
|
||||||
export function getScenes(): SceneDef[] { |
|
||||||
return [ |
|
||||||
{ title: 'Scene with rows', getScene: getSceneWithRows }, |
|
||||||
{ title: 'Grid with rows and different queries', getScene: getGridWithMultipleData }, |
|
||||||
{ title: 'Grid with rows and different queries and time ranges', getScene: getGridWithMultipleTimeRanges }, |
|
||||||
{ title: 'Multiple grid layouts test', getScene: getMultipleGridLayoutTest }, |
|
||||||
{ title: 'Variables', getScene: getVariablesDemo }, |
|
||||||
{ title: 'Variables with All values', getScene: getVariablesDemoWithAll }, |
|
||||||
{ title: 'Variables - Repeating panels', getScene: getRepeatingPanelsDemo }, |
|
||||||
{ title: 'Variables - Repeating rows', getScene: getRepeatingRowsDemo }, |
|
||||||
{ title: 'Query variable', getScene: getQueryVariableDemo }, |
|
||||||
{ title: 'Transformations demo', getScene: getTransformationsDemo }, |
|
||||||
]; |
|
||||||
} |
|
||||||
|
|
||||||
const cache: Record<string, DashboardScene> = {}; |
|
||||||
|
|
||||||
export function getSceneByTitle(title: string) { |
|
||||||
if (cache[title]) { |
|
||||||
return cache[title]; |
|
||||||
} |
|
||||||
|
|
||||||
const scene = getScenes().find((x) => x.title === title); |
|
||||||
|
|
||||||
if (scene) { |
|
||||||
cache[title] = scene.getScene(); |
|
||||||
} |
|
||||||
|
|
||||||
return cache[title]; |
|
||||||
} |
|
||||||
@ -1,22 +0,0 @@ |
|||||||
import { QueryRunnerState, SceneQueryRunner } from '@grafana/scenes'; |
|
||||||
import { TestData } from '@grafana-plugins/grafana-testdata-datasource/dataquery.gen'; |
|
||||||
|
|
||||||
export function getQueryRunnerWithRandomWalkQuery( |
|
||||||
overrides?: Partial<TestData>, |
|
||||||
queryRunnerOverrides?: Partial<QueryRunnerState> |
|
||||||
) { |
|
||||||
return new SceneQueryRunner({ |
|
||||||
queries: [ |
|
||||||
{ |
|
||||||
refId: 'A', |
|
||||||
datasource: { |
|
||||||
uid: 'gdev-testdata', |
|
||||||
type: 'testdata', |
|
||||||
}, |
|
||||||
scenarioId: 'random_walk', |
|
||||||
...overrides, |
|
||||||
}, |
|
||||||
], |
|
||||||
...queryRunnerOverrides, |
|
||||||
}); |
|
||||||
} |
|
||||||
@ -1,68 +0,0 @@ |
|||||||
import { VariableRefresh } from '@grafana/data'; |
|
||||||
import { |
|
||||||
SceneCanvasText, |
|
||||||
SceneTimePicker, |
|
||||||
SceneFlexLayout, |
|
||||||
SceneTimeRange, |
|
||||||
VariableValueSelectors, |
|
||||||
SceneVariableSet, |
|
||||||
CustomVariable, |
|
||||||
DataSourceVariable, |
|
||||||
QueryVariable, |
|
||||||
SceneRefreshPicker, |
|
||||||
SceneFlexItem, |
|
||||||
} from '@grafana/scenes'; |
|
||||||
|
|
||||||
import { DashboardScene } from '../../dashboard-scene/scene/DashboardScene'; |
|
||||||
|
|
||||||
export function getQueryVariableDemo(): DashboardScene { |
|
||||||
return new DashboardScene({ |
|
||||||
title: 'Query variable', |
|
||||||
$variables: new SceneVariableSet({ |
|
||||||
variables: [ |
|
||||||
new CustomVariable({ |
|
||||||
name: 'metric', |
|
||||||
query: 'job : job, instance : instance', |
|
||||||
}), |
|
||||||
new DataSourceVariable({ |
|
||||||
name: 'datasource', |
|
||||||
pluginId: 'prometheus', |
|
||||||
}), |
|
||||||
new QueryVariable({ |
|
||||||
name: 'instance (using datasource variable)', |
|
||||||
refresh: VariableRefresh.onTimeRangeChanged, |
|
||||||
query: { query: 'label_values(go_gc_duration_seconds, ${metric})', refId: 'A' }, |
|
||||||
datasource: { uid: '${datasource}' }, |
|
||||||
}), |
|
||||||
new QueryVariable({ |
|
||||||
name: 'label values (on time range refresh)', |
|
||||||
refresh: VariableRefresh.onTimeRangeChanged, |
|
||||||
query: { query: 'label_values(go_gc_duration_seconds, ${metric})', refId: 'B' }, |
|
||||||
datasource: { uid: 'gdev-prometheus', type: 'prometheus' }, |
|
||||||
}), |
|
||||||
new QueryVariable({ |
|
||||||
name: 'legacy (graphite)', |
|
||||||
refresh: VariableRefresh.onTimeRangeChanged, |
|
||||||
query: { queryType: 'Default', target: 'stats.response.*', refId: 'C' }, |
|
||||||
datasource: { uid: 'gdev-graphite', type: 'graphite' }, |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
body: new SceneFlexLayout({ |
|
||||||
direction: 'row', |
|
||||||
children: [ |
|
||||||
new SceneFlexItem({ |
|
||||||
width: '40%', |
|
||||||
body: new SceneCanvasText({ |
|
||||||
text: 'metric: ${metric}', |
|
||||||
fontSize: 20, |
|
||||||
align: 'center', |
|
||||||
}), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
$timeRange: new SceneTimeRange(), |
|
||||||
actions: [new SceneTimePicker({}), new SceneRefreshPicker({})], |
|
||||||
controls: [new VariableValueSelectors({})], |
|
||||||
}); |
|
||||||
} |
|
||||||
@ -1,189 +0,0 @@ |
|||||||
import { |
|
||||||
SceneTimePicker, |
|
||||||
SceneTimeRange, |
|
||||||
VariableValueSelectors, |
|
||||||
SceneVariableSet, |
|
||||||
TestVariable, |
|
||||||
SceneRefreshPicker, |
|
||||||
PanelBuilders, |
|
||||||
SceneGridLayout, |
|
||||||
SceneControlsSpacer, |
|
||||||
SceneGridRow, |
|
||||||
} from '@grafana/scenes'; |
|
||||||
import { VariableRefresh } from '@grafana/schema'; |
|
||||||
import { PanelRepeaterGridItem } from 'app/features/dashboard-scene/scene/PanelRepeaterGridItem'; |
|
||||||
import { RowRepeaterBehavior } from 'app/features/dashboard-scene/scene/RowRepeaterBehavior'; |
|
||||||
|
|
||||||
import { DashboardScene } from '../../dashboard-scene/scene/DashboardScene'; |
|
||||||
|
|
||||||
import { getQueryRunnerWithRandomWalkQuery } from './queries'; |
|
||||||
|
|
||||||
/** |
|
||||||
* Repeat panels by variable that changes with time refresh. This tries to setup a very specific scenario |
|
||||||
* where a variable that is slow (2s) and constantly changing it's result is used to repeat panels. This |
|
||||||
* can be used to verify that when the time range change the repeated panels with locally scoped variable value |
|
||||||
* still wait for the top level variable to finish loading and the repeat process to complete. |
|
||||||
*/ |
|
||||||
export function getRepeatingPanelsDemo(): DashboardScene { |
|
||||||
return new DashboardScene({ |
|
||||||
title: 'Variables - Repeating panels', |
|
||||||
$variables: new SceneVariableSet({ |
|
||||||
variables: [ |
|
||||||
new TestVariable({ |
|
||||||
name: 'server', |
|
||||||
query: 'AB', |
|
||||||
value: 'server', |
|
||||||
text: '', |
|
||||||
delayMs: 2000, |
|
||||||
isMulti: true, |
|
||||||
includeAll: true, |
|
||||||
refresh: VariableRefresh.onTimeRangeChanged, |
|
||||||
optionsToReturn: [ |
|
||||||
{ label: 'A', value: 'A' }, |
|
||||||
{ label: 'B', value: 'B' }, |
|
||||||
], |
|
||||||
options: [], |
|
||||||
$behaviors: [changeVariable], |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
body: new SceneGridLayout({ |
|
||||||
isDraggable: true, |
|
||||||
isResizable: true, |
|
||||||
children: [ |
|
||||||
new PanelRepeaterGridItem({ |
|
||||||
variableName: 'server', |
|
||||||
x: 0, |
|
||||||
y: 0, |
|
||||||
width: 24, |
|
||||||
height: 8, |
|
||||||
itemHeight: 8, |
|
||||||
source: PanelBuilders.timeseries() |
|
||||||
.setTitle('server = $server') |
|
||||||
.setData(getQueryRunnerWithRandomWalkQuery({ alias: 'server = $server' })) |
|
||||||
.build(), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
$timeRange: new SceneTimeRange(), |
|
||||||
actions: [], |
|
||||||
controls: [ |
|
||||||
new VariableValueSelectors({}), |
|
||||||
new SceneControlsSpacer(), |
|
||||||
new SceneTimePicker({}), |
|
||||||
new SceneRefreshPicker({}), |
|
||||||
], |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
function changeVariable(variable: TestVariable) { |
|
||||||
const sub = variable.subscribeToState((state, old) => { |
|
||||||
if (!state.loading && old.loading) { |
|
||||||
if (variable.state.optionsToReturn?.length === 2) { |
|
||||||
variable.setState({ |
|
||||||
query: 'ABC', |
|
||||||
optionsToReturn: [ |
|
||||||
{ label: 'A', value: 'A' }, |
|
||||||
{ label: 'B', value: 'B' }, |
|
||||||
{ label: 'C', value: 'C' }, |
|
||||||
], |
|
||||||
}); |
|
||||||
} else { |
|
||||||
variable.setState({ |
|
||||||
query: 'AB', |
|
||||||
optionsToReturn: [ |
|
||||||
{ label: 'A', value: 'A' }, |
|
||||||
{ label: 'B', value: 'B' }, |
|
||||||
], |
|
||||||
}); |
|
||||||
} |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
return () => { |
|
||||||
sub.unsubscribe(); |
|
||||||
}; |
|
||||||
} |
|
||||||
|
|
||||||
export function getRepeatingRowsDemo(): DashboardScene { |
|
||||||
return new DashboardScene({ |
|
||||||
title: 'Variables - Repeating rows', |
|
||||||
$variables: new SceneVariableSet({ |
|
||||||
variables: [ |
|
||||||
new TestVariable({ |
|
||||||
name: 'server', |
|
||||||
query: 'AB', |
|
||||||
value: ['A', 'B', 'C'], |
|
||||||
text: ['A', 'B', 'C'], |
|
||||||
delayMs: 2000, |
|
||||||
isMulti: true, |
|
||||||
includeAll: true, |
|
||||||
refresh: VariableRefresh.onTimeRangeChanged, |
|
||||||
optionsToReturn: [ |
|
||||||
{ label: 'A', value: 'A' }, |
|
||||||
{ label: 'B', value: 'B' }, |
|
||||||
{ label: 'C', value: 'C' }, |
|
||||||
], |
|
||||||
options: [], |
|
||||||
//$behaviors: [changeVariable],
|
|
||||||
}), |
|
||||||
new TestVariable({ |
|
||||||
name: 'pod', |
|
||||||
query: 'AB', |
|
||||||
value: ['Mu', 'Ma', 'Mi'], |
|
||||||
text: ['Mu', 'Ma', 'Mi'], |
|
||||||
delayMs: 2000, |
|
||||||
isMulti: true, |
|
||||||
includeAll: true, |
|
||||||
refresh: VariableRefresh.onTimeRangeChanged, |
|
||||||
optionsToReturn: [ |
|
||||||
{ label: 'Mu', value: 'Mu' }, |
|
||||||
{ label: 'Ma', value: 'Ma' }, |
|
||||||
{ label: 'Mi', value: 'Mi' }, |
|
||||||
], |
|
||||||
options: [], |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
body: new SceneGridLayout({ |
|
||||||
isDraggable: true, |
|
||||||
isResizable: true, |
|
||||||
children: [ |
|
||||||
new SceneGridRow({ |
|
||||||
title: 'Row $server', |
|
||||||
key: 'Row A', |
|
||||||
isCollapsed: false, |
|
||||||
y: 0, |
|
||||||
x: 0, |
|
||||||
$behaviors: [ |
|
||||||
new RowRepeaterBehavior({ |
|
||||||
variableName: 'server', |
|
||||||
sources: [ |
|
||||||
new PanelRepeaterGridItem({ |
|
||||||
variableName: 'pod', |
|
||||||
x: 0, |
|
||||||
y: 0, |
|
||||||
width: 24, |
|
||||||
height: 5, |
|
||||||
itemHeight: 5, |
|
||||||
source: PanelBuilders.timeseries() |
|
||||||
.setTitle('server = $server, pod = $pod') |
|
||||||
.setData(getQueryRunnerWithRandomWalkQuery({ alias: 'server = $server, pod = $pod' })) |
|
||||||
.build(), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
$timeRange: new SceneTimeRange(), |
|
||||||
actions: [], |
|
||||||
controls: [ |
|
||||||
new VariableValueSelectors({}), |
|
||||||
new SceneControlsSpacer(), |
|
||||||
new SceneTimePicker({}), |
|
||||||
new SceneRefreshPicker({}), |
|
||||||
], |
|
||||||
}); |
|
||||||
} |
|
||||||
@ -1,58 +0,0 @@ |
|||||||
import { |
|
||||||
NestedScene, |
|
||||||
SceneTimePicker, |
|
||||||
SceneFlexLayout, |
|
||||||
SceneTimeRange, |
|
||||||
SceneRefreshPicker, |
|
||||||
SceneFlexItem, |
|
||||||
PanelBuilders, |
|
||||||
} from '@grafana/scenes'; |
|
||||||
|
|
||||||
import { DashboardScene } from '../../dashboard-scene/scene/DashboardScene'; |
|
||||||
|
|
||||||
import { getQueryRunnerWithRandomWalkQuery } from './queries'; |
|
||||||
|
|
||||||
export function getSceneWithRows(): DashboardScene { |
|
||||||
return new DashboardScene({ |
|
||||||
title: 'Scene with rows', |
|
||||||
body: new SceneFlexLayout({ |
|
||||||
direction: 'column', |
|
||||||
children: [ |
|
||||||
new NestedScene({ |
|
||||||
title: 'Overview', |
|
||||||
canCollapse: true, |
|
||||||
body: new SceneFlexLayout({ |
|
||||||
direction: 'row', |
|
||||||
children: [ |
|
||||||
new SceneFlexItem({ |
|
||||||
body: PanelBuilders.timeseries().setTitle('Fill height').build(), |
|
||||||
}), |
|
||||||
|
|
||||||
new SceneFlexItem({ |
|
||||||
body: PanelBuilders.timeseries().setTitle('Fill height').build(), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
}), |
|
||||||
new NestedScene({ |
|
||||||
title: 'More server details', |
|
||||||
canCollapse: true, |
|
||||||
body: new SceneFlexLayout({ |
|
||||||
direction: 'row', |
|
||||||
children: [ |
|
||||||
new SceneFlexItem({ |
|
||||||
body: PanelBuilders.timeseries().setTitle('Fill height').build(), |
|
||||||
}), |
|
||||||
new SceneFlexItem({ |
|
||||||
body: PanelBuilders.timeseries().setTitle('Fill height').build(), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
$timeRange: new SceneTimeRange(), |
|
||||||
$data: getQueryRunnerWithRandomWalkQuery(), |
|
||||||
actions: [new SceneTimePicker({}), new SceneRefreshPicker({})], |
|
||||||
}); |
|
||||||
} |
|
||||||
@ -1,79 +0,0 @@ |
|||||||
import { |
|
||||||
SceneTimePicker, |
|
||||||
SceneFlexLayout, |
|
||||||
SceneDataTransformer, |
|
||||||
SceneTimeRange, |
|
||||||
SceneRefreshPicker, |
|
||||||
SceneFlexItem, |
|
||||||
PanelBuilders, |
|
||||||
} from '@grafana/scenes'; |
|
||||||
|
|
||||||
import { DashboardScene } from '../../dashboard-scene/scene/DashboardScene'; |
|
||||||
|
|
||||||
import { getQueryRunnerWithRandomWalkQuery } from './queries'; |
|
||||||
|
|
||||||
export function getTransformationsDemo(): DashboardScene { |
|
||||||
return new DashboardScene({ |
|
||||||
title: 'Transformations demo', |
|
||||||
body: new SceneFlexLayout({ |
|
||||||
direction: 'row', |
|
||||||
children: [ |
|
||||||
new SceneFlexItem({ |
|
||||||
body: new SceneFlexLayout({ |
|
||||||
direction: 'column', |
|
||||||
children: [ |
|
||||||
new SceneFlexItem({ |
|
||||||
body: new SceneFlexLayout({ |
|
||||||
direction: 'row', |
|
||||||
children: [ |
|
||||||
new SceneFlexItem({ |
|
||||||
body: PanelBuilders.timeseries().setTitle('Source data (global query)').build(), |
|
||||||
}), |
|
||||||
new SceneFlexItem({ |
|
||||||
body: PanelBuilders.stat() |
|
||||||
.setTitle('Transformed data') |
|
||||||
.setData( |
|
||||||
new SceneDataTransformer({ |
|
||||||
transformations: [ |
|
||||||
{ |
|
||||||
id: 'reduce', |
|
||||||
options: { |
|
||||||
reducers: ['last', 'mean'], |
|
||||||
}, |
|
||||||
}, |
|
||||||
], |
|
||||||
}) |
|
||||||
) |
|
||||||
.build(), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
}), |
|
||||||
new SceneFlexItem({ |
|
||||||
body: PanelBuilders.stat() |
|
||||||
.setTitle('Query with predefined transformations') |
|
||||||
.setData( |
|
||||||
new SceneDataTransformer({ |
|
||||||
$data: getQueryRunnerWithRandomWalkQuery(), |
|
||||||
transformations: [ |
|
||||||
{ |
|
||||||
id: 'reduce', |
|
||||||
options: { |
|
||||||
reducers: ['mean'], |
|
||||||
}, |
|
||||||
}, |
|
||||||
], |
|
||||||
}) |
|
||||||
) |
|
||||||
.build(), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
$timeRange: new SceneTimeRange(), |
|
||||||
$data: getQueryRunnerWithRandomWalkQuery(), |
|
||||||
actions: [new SceneTimePicker({}), new SceneRefreshPicker({})], |
|
||||||
}); |
|
||||||
} |
|
||||||
@ -1,203 +0,0 @@ |
|||||||
import { |
|
||||||
SceneCanvasText, |
|
||||||
SceneTimePicker, |
|
||||||
SceneFlexLayout, |
|
||||||
SceneTimeRange, |
|
||||||
VariableValueSelectors, |
|
||||||
SceneVariableSet, |
|
||||||
CustomVariable, |
|
||||||
DataSourceVariable, |
|
||||||
TestVariable, |
|
||||||
NestedScene, |
|
||||||
SceneRefreshPicker, |
|
||||||
TextBoxVariable, |
|
||||||
SceneFlexItem, |
|
||||||
PanelBuilders, |
|
||||||
} from '@grafana/scenes'; |
|
||||||
|
|
||||||
import { DashboardScene } from '../../dashboard-scene/scene/DashboardScene'; |
|
||||||
|
|
||||||
import { getQueryRunnerWithRandomWalkQuery } from './queries'; |
|
||||||
|
|
||||||
export function getVariablesDemo(): DashboardScene { |
|
||||||
return new DashboardScene({ |
|
||||||
title: 'Variables', |
|
||||||
$variables: new SceneVariableSet({ |
|
||||||
variables: [ |
|
||||||
new TestVariable({ |
|
||||||
name: 'server', |
|
||||||
query: 'A.*', |
|
||||||
value: 'server', |
|
||||||
text: '', |
|
||||||
delayMs: 1000, |
|
||||||
options: [], |
|
||||||
}), |
|
||||||
new TestVariable({ |
|
||||||
name: 'pod', |
|
||||||
query: 'A.$server.*', |
|
||||||
value: 'pod', |
|
||||||
delayMs: 1000, |
|
||||||
isMulti: true, |
|
||||||
text: '', |
|
||||||
options: [], |
|
||||||
}), |
|
||||||
new TestVariable({ |
|
||||||
name: 'handler', |
|
||||||
query: 'A.$server.$pod.*', |
|
||||||
value: 'handler', |
|
||||||
delayMs: 1000, |
|
||||||
//isMulti: true,
|
|
||||||
text: '', |
|
||||||
options: [], |
|
||||||
}), |
|
||||||
new CustomVariable({ |
|
||||||
name: 'custom', |
|
||||||
query: 'A : 10,B : 20', |
|
||||||
}), |
|
||||||
new DataSourceVariable({ |
|
||||||
name: 'ds', |
|
||||||
pluginId: 'testdata', |
|
||||||
}), |
|
||||||
new TextBoxVariable({ |
|
||||||
name: 'textbox', |
|
||||||
value: 'default value', |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
body: new SceneFlexLayout({ |
|
||||||
direction: 'row', |
|
||||||
children: [ |
|
||||||
new SceneFlexItem({ |
|
||||||
body: new SceneFlexLayout({ |
|
||||||
direction: 'column', |
|
||||||
children: [ |
|
||||||
new SceneFlexItem({ |
|
||||||
body: new SceneFlexLayout({ |
|
||||||
children: [ |
|
||||||
new SceneFlexItem({ |
|
||||||
body: PanelBuilders.timeseries() |
|
||||||
.setTitle('handler: $handler') |
|
||||||
.setData( |
|
||||||
getQueryRunnerWithRandomWalkQuery({ |
|
||||||
alias: 'handler: $handler', |
|
||||||
}) |
|
||||||
) |
|
||||||
.build(), |
|
||||||
}), |
|
||||||
new SceneFlexItem({ |
|
||||||
body: new SceneCanvasText({ |
|
||||||
text: 'Text: ${textbox}', |
|
||||||
fontSize: 20, |
|
||||||
align: 'center', |
|
||||||
}), |
|
||||||
}), |
|
||||||
new SceneFlexItem({ |
|
||||||
width: '40%', |
|
||||||
body: new SceneCanvasText({ |
|
||||||
text: 'server: ${server} pod:${pod}', |
|
||||||
fontSize: 20, |
|
||||||
align: 'center', |
|
||||||
}), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
}), |
|
||||||
new SceneFlexItem({ |
|
||||||
body: new NestedScene({ |
|
||||||
title: 'Collapsable inner scene', |
|
||||||
canCollapse: true, |
|
||||||
body: new SceneFlexLayout({ |
|
||||||
direction: 'row', |
|
||||||
children: [ |
|
||||||
new SceneFlexItem({ |
|
||||||
body: PanelBuilders.timeseries() |
|
||||||
.setTitle('handler: $handler') |
|
||||||
.setData( |
|
||||||
getQueryRunnerWithRandomWalkQuery({ |
|
||||||
alias: 'handler: $handler', |
|
||||||
}) |
|
||||||
) |
|
||||||
.build(), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
}), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
$timeRange: new SceneTimeRange(), |
|
||||||
actions: [new SceneTimePicker({}), new SceneRefreshPicker({})], |
|
||||||
controls: [new VariableValueSelectors({})], |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
export function getVariablesDemoWithAll(): DashboardScene { |
|
||||||
return new DashboardScene({ |
|
||||||
title: 'Variables with All values', |
|
||||||
$variables: new SceneVariableSet({ |
|
||||||
variables: [ |
|
||||||
new TestVariable({ |
|
||||||
name: 'server', |
|
||||||
query: 'A.*', |
|
||||||
value: 'AA', |
|
||||||
text: 'AA', |
|
||||||
includeAll: true, |
|
||||||
defaultToAll: true, |
|
||||||
delayMs: 1000, |
|
||||||
options: [], |
|
||||||
}), |
|
||||||
new TestVariable({ |
|
||||||
name: 'pod', |
|
||||||
query: 'A.$server.*', |
|
||||||
value: [], |
|
||||||
delayMs: 1000, |
|
||||||
isMulti: true, |
|
||||||
includeAll: true, |
|
||||||
defaultToAll: true, |
|
||||||
text: '', |
|
||||||
options: [], |
|
||||||
}), |
|
||||||
new TestVariable({ |
|
||||||
name: 'handler', |
|
||||||
query: 'A.$server.$pod.*', |
|
||||||
value: [], |
|
||||||
delayMs: 1000, |
|
||||||
includeAll: true, |
|
||||||
defaultToAll: false, |
|
||||||
isMulti: true, |
|
||||||
text: '', |
|
||||||
options: [], |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
body: new SceneFlexLayout({ |
|
||||||
direction: 'row', |
|
||||||
children: [ |
|
||||||
new SceneFlexItem({ |
|
||||||
body: PanelBuilders.timeseries() |
|
||||||
.setTitle('handler: $handler') |
|
||||||
.setData( |
|
||||||
getQueryRunnerWithRandomWalkQuery({ |
|
||||||
alias: 'handler: $handler', |
|
||||||
}) |
|
||||||
) |
|
||||||
.build(), |
|
||||||
}), |
|
||||||
new SceneFlexItem({ |
|
||||||
width: '40%', |
|
||||||
body: new SceneCanvasText({ |
|
||||||
text: 'server: ${server} pod:${pod}', |
|
||||||
fontSize: 20, |
|
||||||
align: 'center', |
|
||||||
}), |
|
||||||
}), |
|
||||||
], |
|
||||||
}), |
|
||||||
$timeRange: new SceneTimeRange(), |
|
||||||
actions: [new SceneTimePicker({}), new SceneRefreshPicker({})], |
|
||||||
controls: [new VariableValueSelectors({})], |
|
||||||
}); |
|
||||||
} |
|
||||||
Loading…
Reference in new issue