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

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

@ -5,15 +5,29 @@ import { RepeatRowSelect } from '../RepeatRowSelect/RepeatRowSelect';
import { OptionsPaneItemDescriptor } from './OptionsPaneItemDescriptor'; import { OptionsPaneItemDescriptor } from './OptionsPaneItemDescriptor';
import { OptionsPaneCategoryDescriptor } from './OptionsPaneCategoryDescriptor'; import { OptionsPaneCategoryDescriptor } from './OptionsPaneCategoryDescriptor';
import { OptionPaneRenderProps } from './types'; 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 { export function getPanelFrameCategory(props: OptionPaneRenderProps): OptionsPaneCategoryDescriptor {
const { panel, onPanelConfigChange } = props; const { panel, onPanelConfigChange, dashboard } = props;
const descriptor = new OptionsPaneCategoryDescriptor({
return new OptionsPaneCategoryDescriptor({
title: 'Panel options', title: 'Panel options',
id: 'Panel options', id: 'Panel options',
isOpenDefault: true, 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( .addItem(
new OptionsPaneItemDescriptor({ new OptionsPaneItemDescriptor({
title: 'Title', 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; 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 { interface PanelOptionsCache {
properties: any; properties: any;
fieldConfig: FieldConfigSource; fieldConfig: FieldConfigSource;

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

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