IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

LibraryPanels: Adds back library panel information to panel edit (#32923)

Browse Source 
* LibraryPanels: Adds back library panel information to panel edit

* Chore: fixes merge issue
This commit is contained in:
Hugo Häggmark 2021-04-13 14:05:35 +02:00 committed by GitHub
parent 528ca9134b
commit 4fab30a120
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 47 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
public/app/features/dashboard/components/PanelEditor/getPanelFrameOptions.tsx
View File

@ -5,15 +5,29 @@ import { RepeatRowSelect } from '../RepeatRowSelect/RepeatRowSelect';
import { OptionsPaneItemDescriptor } from './OptionsPaneItemDescriptor';
import { OptionsPaneCategoryDescriptor } from './OptionsPaneCategoryDescriptor';
import { OptionPaneRenderProps } from './types';
import { isPanelModelLibraryPanel } from '../../../library-panels/guard';
import { LibraryPanelInformation } from 'app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo';
export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPaneCategoryDescriptor {
const { panel, onPanelConfigChange } = props;
return new OptionsPaneCategoryDescriptor({
const { panel, onPanelConfigChange, dashboard } = props;
const descriptor = new OptionsPaneCategoryDescriptor({
title: 'Panel options',
id: 'Panel options',
isOpenDefault: true,
});
if (isPanelModelLibraryPanel(panel)) {
descriptor.addItem(
new OptionsPaneItemDescriptor({
title: 'Global panel information',
render: function renderLibraryPanelInformation() {
return <LibraryPanelInformation panel={panel} formatDate={dashboard.formatDate} />;
},
})
);
}
return descriptor
.addItem(
new OptionsPaneItemDescriptor({
title: 'Title',

4
public/app/features/dashboard/state/PanelModel.ts
View File

@ -578,10 +578,6 @@ function getPluginVersion(plugin: PanelPlugin): string {
return plugin && plugin.meta.info.version ? plugin.meta.info.version : config.buildInfo.version;
}
export function isLibraryPanel(panel: PanelModel): panel is PanelModel & Required<Pick<PanelModel, 'libraryPanel'>> {
return panel.libraryPanel !== undefined;
}
interface PanelOptionsCache {
properties: any;
fieldConfig: FieldConfigSource;

23
public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx
View File

@ -1,21 +1,24 @@
import { DateTimeInput, GrafanaTheme } from '@grafana/data';
import { stylesFactory, useStyles } from '@grafana/ui';
import { OptionsPaneCategory } from 'app/features/dashboard/components/PanelEditor/OptionsPaneCategory';
import { PanelModel } from 'app/features/dashboard/state';
import { useStyles } from '@grafana/ui';
import { css } from '@emotion/css';
import React from 'react';
import { PanelModelWithLibraryPanel } from '../../types';
import { isPanelModelLibraryPanel } from '../../guard';
interface Props {
panel: PanelModel & Required<Pick<PanelModel, 'libraryPanel'>>;
panel: PanelModelWithLibraryPanel;
formatDate?: (dateString: DateTimeInput, format?: string) => string;
}
export const LibraryPanelInformation: React.FC<Props> = ({ panel, formatDate }) => {
const styles = useStyles(getStyles);
if (!isPanelModelLibraryPanel(panel)) {
return null;
}
return (
<OptionsPaneCategory title="Reusable panel information" id="Shared Panel Info" key="Shared Panel Info">
{panel.libraryPanel.uid && (
<>
<p className={styles.libraryPanelInfo}>
{`Used on ${panel.libraryPanel.meta.connectedDashboards} `}
{panel.libraryPanel.meta.connectedDashboards === 1 ? 'dashboard' : 'dashboards'}
@ -32,16 +35,16 @@ export const LibraryPanelInformation: React.FC<Props> = ({ panel, formatDate })
)}
{panel.libraryPanel.meta.updatedBy.name}
</p>
)}
</OptionsPaneCategory>
</>
);
};
const getStyles = stylesFactory((theme: GrafanaTheme) => {
const getStyles = (theme: GrafanaTheme) => {
return {
libraryPanelInfo: css`
color: ${theme.colors.textSemiWeak};
font-size: ${theme.typography.size.sm};
margin-left: ${theme.spacing.xxs};
`,
userAvatar: css`
border-radius: 50%;
@ -52,4 +55,4 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
padding-right: ${theme.spacing.sm};
`,
};
});
};