|
|
|
@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react'; |
|
|
|
|
|
|
|
|
|
import { GrafanaTheme2 } from '@grafana/data'; |
|
|
|
|
import { selectors } from '@grafana/e2e-selectors'; |
|
|
|
|
import { locationService } from '@grafana/runtime'; |
|
|
|
|
import { config, locationService } from '@grafana/runtime'; |
|
|
|
|
import { Button, ButtonGroup, Dropdown, Icon, Menu, ToolbarButton, ToolbarButtonRow, useStyles2 } from '@grafana/ui'; |
|
|
|
|
import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate'; |
|
|
|
|
import { NavToolbarSeparator } from 'app/core/components/AppChrome/NavToolbar/NavToolbarSeparator'; |
|
|
|
@ -58,14 +58,15 @@ export function ToolbarActions({ dashboard }: Props) { |
|
|
|
|
const buttonWithExtraMargin = useStyles2(getStyles); |
|
|
|
|
const isEditingPanel = Boolean(editPanel); |
|
|
|
|
const isViewingPanel = Boolean(viewPanelScene); |
|
|
|
|
|
|
|
|
|
const isEditingLibraryPanel = useEditingLibraryPanel(editPanel); |
|
|
|
|
|
|
|
|
|
const hasCopiedPanel = Boolean(copiedPanel); |
|
|
|
|
// Means we are not in settings view, fullscreen panel or edit panel
|
|
|
|
|
const isShowingDashboard = !editview && !isViewingPanel && !isEditingPanel; |
|
|
|
|
const isEditingAndShowingDashboard = isEditing && isShowingDashboard; |
|
|
|
|
|
|
|
|
|
toolbarActions.push({ |
|
|
|
|
group: 'icon-actions', |
|
|
|
|
condition: isEditing && !editview && !isViewingPanel && !isEditingPanel, |
|
|
|
|
condition: isEditingAndShowingDashboard, |
|
|
|
|
render: () => ( |
|
|
|
|
<ToolbarButton |
|
|
|
|
key="add-visualization" |
|
|
|
@ -82,7 +83,7 @@ export function ToolbarActions({ dashboard }: Props) { |
|
|
|
|
|
|
|
|
|
toolbarActions.push({ |
|
|
|
|
group: 'icon-actions', |
|
|
|
|
condition: isEditing && !editview && !isViewingPanel && !isEditingPanel, |
|
|
|
|
condition: isEditingAndShowingDashboard, |
|
|
|
|
render: () => ( |
|
|
|
|
<ToolbarButton |
|
|
|
|
key="add-library-panel" |
|
|
|
@ -98,7 +99,7 @@ export function ToolbarActions({ dashboard }: Props) { |
|
|
|
|
|
|
|
|
|
toolbarActions.push({ |
|
|
|
|
group: 'icon-actions', |
|
|
|
|
condition: isEditing && !editview && !isViewingPanel && !isEditingPanel, |
|
|
|
|
condition: isEditingAndShowingDashboard, |
|
|
|
|
render: () => ( |
|
|
|
|
<ToolbarButton |
|
|
|
|
key="add-row" |
|
|
|
@ -114,7 +115,7 @@ export function ToolbarActions({ dashboard }: Props) { |
|
|
|
|
|
|
|
|
|
toolbarActions.push({ |
|
|
|
|
group: 'icon-actions', |
|
|
|
|
condition: isEditing && !editview && !isViewingPanel && !isEditingPanel, |
|
|
|
|
condition: isEditingAndShowingDashboard, |
|
|
|
|
render: () => ( |
|
|
|
|
<ToolbarButton |
|
|
|
|
key="paste-panel" |
|
|
|
@ -131,7 +132,7 @@ export function ToolbarActions({ dashboard }: Props) { |
|
|
|
|
|
|
|
|
|
toolbarActions.push({ |
|
|
|
|
group: 'icon-actions', |
|
|
|
|
condition: uid && !editview && Boolean(meta.canStar) && !isEditingPanel && !isEditing, |
|
|
|
|
condition: uid && Boolean(meta.canStar) && isShowingDashboard, |
|
|
|
|
render: () => { |
|
|
|
|
let desc = meta.isStarred |
|
|
|
|
? t('dashboard.toolbar.unmark-favorite', 'Unmark as favorite') |
|
|
|
@ -152,20 +153,18 @@ export function ToolbarActions({ dashboard }: Props) { |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const isDevEnv = config.buildInfo.env === 'development'; |
|
|
|
|
|
|
|
|
|
toolbarActions.push({ |
|
|
|
|
group: 'icon-actions', |
|
|
|
|
condition: uid && !editview && !isEditingPanel, |
|
|
|
|
condition: isDevEnv && uid && isShowingDashboard, |
|
|
|
|
render: () => ( |
|
|
|
|
<ToolbarButton |
|
|
|
|
key="view-in-old-dashboard-button" |
|
|
|
|
tooltip={'Switch to old dashboard page'} |
|
|
|
|
icon="apps" |
|
|
|
|
onClick={() => { |
|
|
|
|
if (meta.isSnapshot) { |
|
|
|
|
locationService.partial({ scenes: null }); |
|
|
|
|
} else { |
|
|
|
|
locationService.push(`/d/${uid}`); |
|
|
|
|
} |
|
|
|
|
locationService.partial({ scenes: false }); |
|
|
|
|
}} |
|
|
|
|
/> |
|
|
|
|
), |
|
|
|
@ -181,7 +180,7 @@ export function ToolbarActions({ dashboard }: Props) { |
|
|
|
|
|
|
|
|
|
toolbarActions.push({ |
|
|
|
|
group: 'playlist-actions', |
|
|
|
|
condition: isPlaying && !editview && !isEditingPanel && !isEditing, |
|
|
|
|
condition: isPlaying && isShowingDashboard && !isEditing, |
|
|
|
|
render: () => ( |
|
|
|
|
<ToolbarButton |
|
|
|
|
key="play-list-prev" |
|
|
|
@ -195,7 +194,7 @@ export function ToolbarActions({ dashboard }: Props) { |
|
|
|
|
|
|
|
|
|
toolbarActions.push({ |
|
|
|
|
group: 'playlist-actions', |
|
|
|
|
condition: isPlaying && !editview && !isEditingPanel && !isEditing, |
|
|
|
|
condition: isPlaying && isShowingDashboard && !isEditing, |
|
|
|
|
render: () => ( |
|
|
|
|
<ToolbarButton |
|
|
|
|
key="play-list-stop" |
|
|
|
@ -209,7 +208,7 @@ export function ToolbarActions({ dashboard }: Props) { |
|
|
|
|
|
|
|
|
|
toolbarActions.push({ |
|
|
|
|
group: 'playlist-actions', |
|
|
|
|
condition: isPlaying && !editview && !isEditingPanel && !isEditing, |
|
|
|
|
condition: isPlaying && isShowingDashboard && !isEditing, |
|
|
|
|
render: () => ( |
|
|
|
|
<ToolbarButton |
|
|
|
|
key="play-list-next" |
|
|
|
@ -297,7 +296,7 @@ export function ToolbarActions({ dashboard }: Props) { |
|
|
|
|
|
|
|
|
|
toolbarActions.push({ |
|
|
|
|
group: 'main-buttons', |
|
|
|
|
condition: !isEditing && dashboard.canEditDashboard() && !isViewingPanel && !isEditingPanel && !isPlaying, |
|
|
|
|
condition: !isEditing && dashboard.canEditDashboard() && !isViewingPanel && !isPlaying, |
|
|
|
|
render: () => ( |
|
|
|
|
<Button |
|
|
|
|
onClick={() => { |
|
|
|
@ -316,7 +315,7 @@ export function ToolbarActions({ dashboard }: Props) { |
|
|
|
|
|
|
|
|
|
toolbarActions.push({ |
|
|
|
|
group: 'settings', |
|
|
|
|
condition: isEditing && dashboard.canEditDashboard() && !isViewingPanel && !isEditingPanel && !editview, |
|
|
|
|
condition: isEditing && dashboard.canEditDashboard() && isShowingDashboard, |
|
|
|
|
render: () => ( |
|
|
|
|
<Button |
|
|
|
|
onClick={() => { |
|
|
|
@ -335,7 +334,7 @@ export function ToolbarActions({ dashboard }: Props) { |
|
|
|
|
|
|
|
|
|
toolbarActions.push({ |
|
|
|
|
group: 'main-buttons', |
|
|
|
|
condition: isEditing && !editview && !meta.isNew && !isViewingPanel && !isEditingPanel, |
|
|
|
|
condition: isEditing && !meta.isNew && isShowingDashboard, |
|
|
|
|
render: () => ( |
|
|
|
|
<Button |
|
|
|
|
onClick={() => dashboard.exitEditMode({ skipConfirm: false })} |
|
|
|
|