Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Canvas: Add mode that enables one click data link access #85430

Closed
wants to merge 1 commit into from
Closed

Canvas: Add mode that enables one click data link access #85430

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/grafana-schema/src/raw/composable/canvas/panelcfg/x/CanvasPanelCfg_types.gen.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,10 @@ export interface Options {
* Enable pan and zoom
*/
panZoom: boolean;
/**
* Enable quick access to data links when element is configured with one data link
*/
quickDataLinkAccess: boolean;
/**
* The root element of canvas (frame), where all canvas elements are nested
* TODO: Figure out how to define a default value for this
Expand Down Expand Up @@ -151,5 +155,6 @@ export const defaultOptions: Partial<Options> = {
infinitePan: true,
inlineEditing: true,
panZoom: true,
quickDataLinkAccess: false,
showAdvancedTypes: true,
};
35 changes: 31 additions & 4 deletions public/app/features/canvas/runtime/element.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -545,11 +545,19 @@ export class ElementState implements LayerElement {

handleMouseEnter = (event: React.MouseEvent, isSelected: boolean | undefined) => {
const scene = this.getScene();
if (!scene?.isEditingEnabled && !scene?.tooltip?.isOpen) {
const quickDataLinkMode = scene?.isQuickDataLinkAccessEnabled && this.data.links.length === 1;

if (!scene?.isEditingEnabled && !scene?.tooltip?.isOpen && !quickDataLinkMode) {
this.handleTooltip(event);
} else if (!isSelected) {
scene?.connections.handleMouseEnter(event);
}

if (quickDataLinkMode && this.div) {
const dataLinkTitle = this.data.links[0].title;
this.div.style.cursor = 'pointer';
this.div.title = `Navigate to ${dataLinkTitle === '' ? 'data link' : dataLinkTitle}`;
}
};

handleTooltip = (event: React.MouseEvent) => {
Expand All @@ -566,14 +574,33 @@ export class ElementState implements LayerElement {

handleMouseLeave = (event: React.MouseEvent) => {
const scene = this.getScene();
if (scene?.tooltipCallback && !scene?.tooltip?.isOpen) {
const quickDataLinkMode = scene?.isQuickDataLinkAccessEnabled && this.data.links.length === 1;

if (scene?.tooltipCallback && !scene?.tooltip?.isOpen && !quickDataLinkMode) {
scene.tooltipCallback(undefined);
}

if (quickDataLinkMode && this.div) {
this.div.style.cursor = 'auto';
this.div.title = '';
}
};

onElementClick = (event: React.MouseEvent) => {
this.handleTooltip(event);
this.onTooltipCallback();
const scene = this.getScene();
const quickDataLinkMode = scene?.isQuickDataLinkAccessEnabled && this.data.links.length === 1;

// If there is only one datalink and quick data link access is enabled, open the link instantly
if (!scene?.isEditingEnabled && quickDataLinkMode) {
const dataLink = this.data.links[0];

// TODO: Figure out a better way of doing this?
window.open(dataLink.href, dataLink.target);
} else {
// If there is more than one datalink / quick data link access is disabled, open tooltip
this.handleTooltip(event);
this.onTooltipCallback();
}
};

onElementKeyDown = (event: React.KeyboardEvent) => {
Expand Down
6 changes: 5 additions & 1 deletion public/app/features/canvas/runtime/scene.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ export class Scene {
currentLayer?: FrameState;
isEditingEnabled?: boolean;
shouldShowAdvancedTypes?: boolean;
isQuickDataLinkAccessEnabled?: boolean;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A nitpick but this would is a bit of a mouthful name wise. Maybe something like quickDataLinksEnabled or something like that 😄

shouldPanZoom?: boolean;
shouldInfinitePan?: boolean;
skipNextSelectionBroadcast = false;
Expand Down Expand Up @@ -112,12 +113,13 @@ export class Scene {
cfg: CanvasFrameOptions,
enableEditing: boolean,
showAdvancedTypes: boolean,
quickDataLinkAccess: boolean,
panZoom: boolean,
infinitePan: boolean,
public onSave: (cfg: CanvasFrameOptions) => void,
panel: CanvasPanel
) {
this.root = this.load(cfg, enableEditing, showAdvancedTypes, panZoom, infinitePan);
this.root = this.load(cfg, enableEditing, showAdvancedTypes, quickDataLinkAccess, panZoom, infinitePan);

this.subscription = this.editModeEnabled.subscribe((open) => {
if (!this.moveable || !this.isEditingEnabled) {
Expand Down Expand Up @@ -154,6 +156,7 @@ export class Scene {
cfg: CanvasFrameOptions,
enableEditing: boolean,
showAdvancedTypes: boolean,
quickDataLinkAccess: boolean,
panZoom: boolean,
infinitePan: boolean
) {
Expand All @@ -168,6 +171,7 @@ export class Scene {

this.isEditingEnabled = enableEditing;
this.shouldShowAdvancedTypes = showAdvancedTypes;
this.isQuickDataLinkAccessEnabled = quickDataLinkAccess;
this.shouldPanZoom = panZoom;
this.shouldInfinitePan = infinitePan;

Expand Down
5 changes: 5 additions & 0 deletions public/app/plugins/panel/canvas/CanvasPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ export class CanvasPanel extends Component<Props, State> {
this.props.options.root,
this.props.options.inlineEditing,
this.props.options.showAdvancedTypes,
this.props.options.quickDataLinkAccess,
this.props.options.panZoom,
this.props.options.infinitePan,
this.onUpdateScene,
Expand Down Expand Up @@ -229,12 +230,15 @@ export class CanvasPanel extends Component<Props, State> {
const inlineEditingSwitched = this.props.options.inlineEditing !== nextProps.options.inlineEditing;
const shouldShowAdvancedTypesSwitched =
this.props.options.showAdvancedTypes !== nextProps.options.showAdvancedTypes;
const quickDataLinkAccessEnabledSwitched =
this.props.options.quickDataLinkAccess !== nextProps.options.quickDataLinkAccess;
const panZoomSwitched = this.props.options.panZoom !== nextProps.options.panZoom;
const infinitePanSwitched = this.props.options.infinitePan !== nextProps.options.infinitePan;
if (
this.needsReload ||
inlineEditingSwitched ||
shouldShowAdvancedTypesSwitched ||
quickDataLinkAccessEnabledSwitched ||
panZoomSwitched ||
infinitePanSwitched
) {
Expand All @@ -248,6 +252,7 @@ export class CanvasPanel extends Component<Props, State> {
nextProps.options.root,
nextProps.options.inlineEditing,
nextProps.options.showAdvancedTypes,
nextProps.options.quickDataLinkAccess,
nextProps.options.panZoom,
nextProps.options.infinitePan
);
Expand Down
9 changes: 9 additions & 0 deletions public/app/plugins/panel/canvas/module.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,20 +25,29 @@ export const addStandardCanvasEditorOptions = (builder: PanelOptionsEditorBuilde
defaultValue: true,
});

builder.addBooleanSwitch({
path: 'quickDataLinkAccess',
name: 'Quick data link access',
description: 'Enable one click access to data links for elements with a single data link',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
description: 'Enable one click access to data links for elements with a single data link',
description: 'Enable one click data links for elements with a single data link',

Perhaps this can be re-worded a bit.

defaultValue: false,
});

builder.addBooleanSwitch({
path: 'panZoom',
name: 'Pan and zoom',
description: 'Enable pan and zoom',
defaultValue: false,
showIf: (opts) => config.featureToggles.canvasPanelPanZoom,
});

builder.addCustomEditor({
id: 'panZoomHelp',
path: 'panZoomHelp',
name: '',
editor: PanZoomHelp,
showIf: (opts) => config.featureToggles.canvasPanelPanZoom && opts.panZoom,
});

builder.addBooleanSwitch({
path: 'infinitePan',
name: 'Infinite panning',
Expand Down
2 changes: 2 additions & 0 deletions public/app/plugins/panel/canvas/panelcfg.cue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,8 @@ composableKinds: PanelCfg: {
inlineEditing: bool | *true
// Show all available element types
showAdvancedTypes: bool | *true
// Enable quick access to data links when element is configured with one data link
quickDataLinkAccess: bool | *false
// Enable pan and zoom
panZoom: bool | *true
// Enable infinite pan
Expand Down
5 changes: 5 additions & 0 deletions public/app/plugins/panel/canvas/panelcfg.gen.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,10 @@ export interface Options {
* Enable pan and zoom
*/
panZoom: boolean;
/**
* Enable quick access to data links when element is configured with one data link
*/
quickDataLinkAccess: boolean;
/**
* The root element of canvas (frame), where all canvas elements are nested
* TODO: Figure out how to define a default value for this
Expand Down Expand Up @@ -149,5 +153,6 @@ export const defaultOptions: Partial<Options> = {
infinitePan: true,
inlineEditing: true,
panZoom: true,
quickDataLinkAccess: false,
showAdvancedTypes: true,
};