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: Small UI improvements (#33482)

Browse Source
This commit is contained in:
Hugo Häggmark
2021-04-28 17:34:18 +02:00
committed by GitHub
parent f176b4818a
commit a9d6d131b3
3 changed files with 67 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.tsx
View File

@@ -9,8 +9,14 @@ import { LibraryPanelsView } from '../LibraryPanelsView/LibraryPanelsView';
import { DEFAULT_PER_PAGE_PAGINATION } from '../../../../core/constants';
import { LibraryPanelDTO } from '../../types';
export enum LibraryPanelsSearchVariant {
Tight = 'tight',
Spacious = 'spacious',
}
export interface LibraryPanelsSearchProps {
onClick: (panel: LibraryPanelDTO) => void;
variant?: LibraryPanelsSearchVariant;
showSort?: boolean;
showFilter?: boolean;
showSecondaryActions?: boolean;
@@ -20,6 +26,7 @@ export interface LibraryPanelsSearchProps {
export const LibraryPanelsSearch = ({
onClick,
variant = LibraryPanelsSearchVariant.Spacious,
currentPanelId,
perPage = DEFAULT_PER_PAGE_PAGINATION,
showFilter = false,
@@ -33,14 +40,43 @@ export const LibraryPanelsSearch = ({
const onSortChange = useCallback((sort: SelectableValue<string>) => setSortDirection(sort.value), []);
const onFilterChange = useCallback((plugins: PanelPluginMeta[]) => setPanelFilter(plugins.map((p) => p.id)), []);
if (variant === LibraryPanelsSearchVariant.Spacious) {
return (
<div className={styles.container}>
<VerticalGroup spacing="lg">
<FilterInput value={searchQuery} onChange={setSearchQuery} placeholder={'Search by name'} width={0} />
<HorizontalGroup spacing="sm" justify={showSort && showFilter ? 'space-between' : 'flex-end'}>
{showSort && <SortPicker value={sortDirection} onChange={onSortChange} />}
{showFilter && <PanelTypeFilter onChange={onFilterChange} />}
</HorizontalGroup>
<div className={styles.libraryPanelsView}>
<LibraryPanelsView
onClickCard={onClick}
searchString={searchQuery}
sortDirection={sortDirection}
panelFilter={panelFilter}
currentPanelId={currentPanelId}
showSecondaryActions={showSecondaryActions}
perPage={perPage}
/>
</div>
</VerticalGroup>
</div>
);
}
return (
<div className={styles.container}>
<VerticalGroup spacing={showSort || showFilter ? 'lg' : 'xs'}>
<FilterInput value={searchQuery} onChange={setSearchQuery} placeholder={'Search by name'} width={0} />
<HorizontalGroup spacing="sm" justify={showSort && showFilter ? 'space-between' : 'flex-end'}>
{showSort && <SortPicker value={sortDirection} onChange={onSortChange} />}
{showFilter && <PanelTypeFilter onChange={onFilterChange} />}
</HorizontalGroup>
<VerticalGroup spacing="xs">
<div className={styles.buttonRow}>
<div className={styles.tightFilter}>
<FilterInput value={searchQuery} onChange={setSearchQuery} placeholder={'Search by name'} width={0} />
</div>
<div className={styles.tightSortFilter}>
{showSort && <SortPicker value={sortDirection} onChange={onSortChange} />}
{showFilter && <PanelTypeFilter onChange={onFilterChange} />}
</div>
</div>
<div className={styles.libraryPanelsView}>
<LibraryPanelsView
onClickCard={onClick}
@@ -64,6 +100,19 @@ function getStyles(theme: GrafanaThemeV2) {
overflow-y: auto;
padding: ${theme.spacing(1)};
`,
buttonRow: css`
display: flex;
justify-content: space-between;
width: 100%;
margin-top: ${theme.spacing(1.5)}; // Clear types link
`,
tightFilter: css`
flex-grow: 1;
`,
tightSortFilter: css`
flex-grow: 1;
padding: ${theme.spacing(0, 0, 0, 0.5)};
`,
libraryPanelsView: css`
width: 100%;
`,