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 descriptions to cards (#33452)

Browse Source 
* LibraryPanels: Adds descriptions to cards

* Chore: updates after PR comments
This commit is contained in:
Hugo Häggmark 2021-04-28 13:47:12 +02:00 committed by GitHub
parent 748778fff0
commit df8d301d1e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx
View File

@ -12,6 +12,7 @@ interface Props {
onDelete?: () => void; onDelete?: () => void;
disabled?: boolean; disabled?: boolean;
showBadge?: boolean; showBadge?: boolean;
description?: string;
} }
export const PanelTypeCard: React.FC<Props> = ({ export const PanelTypeCard: React.FC<Props> = ({
@ -22,6 +23,7 @@ export const PanelTypeCard: React.FC<Props> = ({
onDelete, onDelete,
disabled, disabled,
showBadge, showBadge,
description,
}) => { }) => {
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
const cssClass = cx({ const cssClass = cx({
@ -41,6 +43,7 @@ export const PanelTypeCard: React.FC<Props> = ({
<div className={styles.itemContent}> <div className={styles.itemContent}>
<div className={styles.name}>{title}</div> <div className={styles.name}>{title}</div>
{description ? <span className={styles.description}>{description}</span> : null}
</div> </div>
{showBadge && ( {showBadge && (
<div className={cx(styles.badge, disabled && styles.disabled)}> <div className={cx(styles.badge, disabled && styles.disabled)}>
@ -109,6 +112,15 @@ const getStyles = (theme: GrafanaThemeV2) => {
padding: 0 10px; padding: 0 10px;
width: 100%; width: 100%;
`, `,
description: css`
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-size: ${theme.typography.bodySmall.fontSize};
font-weight: ${theme.typography.fontWeightLight};
padding: 0 ${theme.spacing(1.25)};
width: 100%;
`,
img: css` img: css`
max-height: 38px; max-height: 38px;
width: 38px; width: 38px;

50
public/app/features/library-panels/components/LibraryPanelCard/LibraryPanelCard.tsx
View File

@ -1,7 +1,8 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { PanelPluginMeta } from '@grafana/data'; import { PanelPluginMeta } from '@grafana/data';
import { LibraryPanelDTO } from '../../types';
import { config } from '@grafana/runtime'; import { config } from '@grafana/runtime';
import { LibraryPanelDTO } from '../../types';
import { PanelTypeCard } from 'app/features/dashboard/components/VizTypePicker/PanelTypeCard'; import { PanelTypeCard } from 'app/features/dashboard/components/VizTypePicker/PanelTypeCard';
import { DeleteLibraryPanelModal } from '../DeleteLibraryPanelModal/DeleteLibraryPanelModal'; import { DeleteLibraryPanelModal } from '../DeleteLibraryPanelModal/DeleteLibraryPanelModal';
@ -18,7 +19,6 @@ export const LibraryPanelCard: React.FC<LibraryPanelCardProps & { children?: JSX
onDelete, onDelete,
showSecondaryActions, showSecondaryActions,
}) => { }) => {
//const styles = useStyles(getStyles);
const [showDeletionModal, setShowDeletionModal] = useState(false); const [showDeletionModal, setShowDeletionModal] = useState(false);
const onDeletePanel = () => { const onDeletePanel = () => {
@ -33,38 +33,11 @@ export const LibraryPanelCard: React.FC<LibraryPanelCardProps & { children?: JSX
<PanelTypeCard <PanelTypeCard
isCurrent={false} isCurrent={false}
title={libraryPanel.name} title={libraryPanel.name}
description={libraryPanel.description}
plugin={panelPlugin} plugin={panelPlugin}
onClick={() => onClick(libraryPanel)} onClick={() => onClick(libraryPanel)}
onDelete={showSecondaryActions ? () => setShowDeletionModal(true) : undefined} onDelete={showSecondaryActions ? () => setShowDeletionModal(true) : undefined}
/> />
{/* <Card heading={libraryPanel.name} onClick={}>
<Card.Figure>
<Icon className={styles.panelIcon} name="book-open" size="xl" />
</Card.Figure>
<Card.Meta>
<Tooltip content="Connected dashboards" placement="bottom">
<div className={styles.tooltip}>
<Icon name="apps" className={styles.detailIcon} />
{libraryPanel.meta.connectedDashboards}
</div>
</Tooltip>
<span>
Last edited {formatDate?.(libraryPanel.meta.updated ?? '') ?? libraryPanel.meta.updated} by{' '}
{libraryPanel.meta.updatedBy.name}
</span>
</Card.Meta>
{children && <Card.Actions>{children}</Card.Actions>}
{showSecondaryActions && (
<Card.SecondaryActions>
<IconButton
name="trash-alt"
tooltip="Delete panel"
tooltipPlacement="bottom"
onClick={() => setShowDeletionModal(true)}
/>
</Card.SecondaryActions>
)}
</Card> */}
{showDeletionModal && ( {showDeletionModal && (
<DeleteLibraryPanelModal <DeleteLibraryPanelModal
libraryPanel={libraryPanel} libraryPanel={libraryPanel}
@ -75,20 +48,3 @@ export const LibraryPanelCard: React.FC<LibraryPanelCardProps & { children?: JSX
</> </>
); );
}; };
// const getStyles = (theme: GrafanaTheme) => {
// return {
// tooltip: css`
// display: inline;
// `,
// detailIcon: css`
// margin-right: 0.5ch;
// `,
// panelIcon: css`
// color: ${theme.colors.textWeak};
// `,
// tagList: css`
// align-self: center;
// `,
// };
// };