mirror of
https://github.com/grafana/grafana.git
synced 2025-02-13 00:55:47 -06:00
6ed35292fe
* First baby steps * First baby steps * No progress really * Updates * no progress * refactoring * Progress on sub menu and value selectors * Some more tweaks * Lots of progress * Progress * Updates * Progress * Tweaks * Updates * Updates to variable system * Cleaner tests * Update * Some cleanup * correct test name * Renames and moves * prop rename * Fixed scene template interpolator * More tests for SceneObjectBase and fixed issue in EventBus * Updates * More tweaks * More refinements * Fixed test * Added test to EventBus * Clone all scene object arrays * Simplify * tried to merge issue * Update * added more comments to interface * temp progress * Trying to simplify things, but struggling a bit * Updated * Tweaks * Progress on fixing the select componenet and typing, and sharing code in a base class * Updated * Multi select * Simpler loading state * Update * removed failOnConsole * Removed old funcs * Moved logic from update manage to MultiValueVariable * Added tests for MultiValueVariable logic * Made value a more abstract concept to support object values * renamed func to getValueText * Refactored and moved logic to VariableSet * Added test for deactivation and query cancelling * Tweaks * Fixed lint issues
69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
|
|
import { PageLayoutType } from '@grafana/data';
|
|
import { config } from '@grafana/runtime';
|
|
import { PageToolbar, ToolbarButton } from '@grafana/ui';
|
|
import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate';
|
|
import { Page } from 'app/core/components/Page/Page';
|
|
|
|
import { SceneObjectBase } from '../core/SceneObjectBase';
|
|
import { SceneComponentProps, SceneObjectStatePlain, SceneObject } from '../core/types';
|
|
import { UrlSyncManager } from '../services/UrlSyncManager';
|
|
|
|
interface SceneState extends SceneObjectStatePlain {
|
|
title: string;
|
|
layout: SceneObject;
|
|
actions?: SceneObject[];
|
|
subMenu?: SceneObject;
|
|
isEditing?: boolean;
|
|
}
|
|
|
|
export class Scene extends SceneObjectBase<SceneState> {
|
|
public static Component = SceneRenderer;
|
|
private urlSyncManager?: UrlSyncManager;
|
|
|
|
public activate() {
|
|
super.activate();
|
|
this.urlSyncManager = new UrlSyncManager(this);
|
|
}
|
|
|
|
public deactivate() {
|
|
super.deactivate();
|
|
this.urlSyncManager!.cleanUp();
|
|
}
|
|
}
|
|
|
|
function SceneRenderer({ model }: SceneComponentProps<Scene>) {
|
|
const { title, layout, actions = [], isEditing, $editor, subMenu } = model.useState();
|
|
|
|
const toolbarActions = (actions ?? []).map((action) => <action.Component key={action.state.key} model={action} />);
|
|
|
|
if ($editor) {
|
|
toolbarActions.push(
|
|
<ToolbarButton
|
|
icon="cog"
|
|
variant={isEditing ? 'primary' : 'default'}
|
|
onClick={() => model.setState({ isEditing: !model.state.isEditing })}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const pageToolbar = config.featureToggles.topnav ? (
|
|
<AppChromeUpdate actions={toolbarActions} />
|
|
) : (
|
|
<PageToolbar title={title}>{toolbarActions}</PageToolbar>
|
|
);
|
|
|
|
return (
|
|
<Page navId="scenes" pageNav={{ text: title }} layout={PageLayoutType.Canvas} toolbar={pageToolbar}>
|
|
<div style={{ flexGrow: 1, display: 'flex', flexDirection: 'column', gap: '8px' }}>
|
|
{subMenu && <subMenu.Component model={subMenu} />}
|
|
<div style={{ flexGrow: 1, display: 'flex', gap: '8px', overflow: 'auto' }}>
|
|
<layout.Component model={layout} isEditing={isEditing} />
|
|
{$editor && <$editor.Component model={$editor} isEditing={isEditing} />}
|
|
</div>
|
|
</div>
|
|
</Page>
|
|
);
|
|
}
|