mirror of
https://github.com/grafana/grafana.git
synced 2025-02-15 10:03:33 -06:00
9d6c8f8512
* Initial commit * Progress * Update * Progress * updates * Minor fix * fixed ts issue * fixed e2e tests * More explorations * Making progress * Panel options and field options unified * With nested categories * Starting to find something * fix paddings * Progress * Breakthrough ux layout * Progress * Updates * New way of composing options with search * added regex search * Refactoring to react note tree * Show overrides * Adding overrides radio button support * Added popular view * Separate stat/gauge/bargauge options into value options and display options * Initial work on getting library panels into viz picker flow * Fixed issues switching to panel library panel * Move search input put of LibraryPanelsView * Changing design again to have content inside boxes * Style updates * Refactoring to fix scroll issue * Option category naming * Fixed FilterInput issue * Updated snapshots * Fix padding * Updated viz picker design * Unify library panel an viz picker card * Updated card with delete action * Major refactoring back to an object model instead of searching and filtering react node tree * More refactoring * Show option category in label when searching * Nice logic for categories rendering when searching or when only child * Make getSuggestions more lazy for DataLinksEditor * Add missing repeat options and handle conditional options * Prepping options category to be more flexibly and control state from outside * Added option count to search result * Minor style tweak * Added button to close viz picker * Rewrote overrides to enable searching overrides * New search engine and tests * Searching overrides works * Hide radio buttons while searching * Added angular options back * Added memoize for all options so they are not rebuilt for every search key stroke * Added back support for category counters * Started unit test work * Refactoring and base popular options list * Initial update to e2e test, more coming to add e2e test for search features * Minor fix * Review updates * Fixing category open states * Unit test progress * Do not show visualization list mode radio button if library panels is not enabled * Use boolean * More unit tests * Increase library panels per page count and give search focus when switching list mode * field config change test and search test * Feedback updates * Minor tweaks * Minor refactorings * More minimal override collapse state
56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
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 { css } from 'emotion';
|
|
import React from 'react';
|
|
|
|
interface Props {
|
|
panel: PanelModel & Required<Pick<PanelModel, 'libraryPanel'>>;
|
|
formatDate?: (dateString: DateTimeInput, format?: string) => string;
|
|
}
|
|
|
|
export const LibraryPanelInformation: React.FC<Props> = ({ panel, formatDate }) => {
|
|
const styles = useStyles(getStyles);
|
|
|
|
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'}
|
|
<br />
|
|
Last edited on {formatDate?.(panel.libraryPanel.meta.updated, 'L') ?? panel.libraryPanel.meta.updated} by
|
|
{panel.libraryPanel.meta.updatedBy.avatarUrl && (
|
|
<img
|
|
width="22"
|
|
height="22"
|
|
className={styles.userAvatar}
|
|
src={panel.libraryPanel.meta.updatedBy.avatarUrl}
|
|
alt={`Avatar for ${panel.libraryPanel.meta.updatedBy.name}`}
|
|
/>
|
|
)}
|
|
{panel.libraryPanel.meta.updatedBy.name}
|
|
</p>
|
|
)}
|
|
</OptionsPaneCategory>
|
|
);
|
|
};
|
|
|
|
const getStyles = stylesFactory((theme: GrafanaTheme) => {
|
|
return {
|
|
libraryPanelInfo: css`
|
|
color: ${theme.colors.textSemiWeak};
|
|
font-size: ${theme.typography.size.sm};
|
|
`,
|
|
userAvatar: css`
|
|
border-radius: 50%;
|
|
box-sizing: content-box;
|
|
width: 22px;
|
|
height: 22px;
|
|
padding-left: ${theme.spacing.sm};
|
|
padding-right: ${theme.spacing.sm};
|
|
`,
|
|
};
|
|
});
|