LibraryPanels: Small UI improvements (#33482)

This commit is contained in:
Hugo Häggmark 2021-04-28 17:34:18 +02:00 committed by GitHub
parent f176b4818a
commit a9d6d131b3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 67 additions and 10 deletions

View File

@ -41,7 +41,7 @@ export const PanelTypeFilter = ({ onChange: propsOnChange }: Props): JSX.Element
getOptionValue: (i: any) => i.value,
isMulti: true,
noOptionsMessage: 'No Panel types found',
placeholder: 'Filter by Panel type',
placeholder: 'Filter by type',
styles: resetSelectStyles(),
maxMenuHeight: 150,
options,
@ -56,7 +56,7 @@ export const PanelTypeFilter = ({ onChange: propsOnChange }: Props): JSX.Element
Clear types
</span>
)}
<Select {...selectOptions} prefix={<Icon name="table" />} aria-label="Panel Type filter" />
<Select {...selectOptions} prefix={<Icon name="filter" />} aria-label="Panel Type filter" />
</div>
);
};

View File

@ -14,7 +14,10 @@ import { DashboardModel, PanelModel } from '../../state';
import { LS_PANEL_COPY_KEY } from 'app/core/constants';
import { LibraryPanelDTO } from '../../../library-panels/types';
import { toPanelModelLibraryPanel } from '../../../library-panels/utils';
import { LibraryPanelsSearch } from '../../../library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch';
import {
LibraryPanelsSearch,
LibraryPanelsSearchVariant,
} from '../../../library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch';
import { connect, MapDispatchToProps } from 'react-redux';
export type PanelPluginInfo = { id: any; defaults: { gridPos: { w: any; h: any }; title: any } };
@ -138,7 +141,12 @@ export const AddPanelWidgetUnconnected: React.FC<Props> = ({ panel, dashboard })
{addPanelView ? 'Add panel from panel library' : 'Add panel'}
</AddPanelWidgetHandle>
{addPanelView ? (
<LibraryPanelsSearch onClick={onAddLibraryPanel} perPage={3} />
<LibraryPanelsSearch
onClick={onAddLibraryPanel}
perPage={40}
variant={LibraryPanelsSearchVariant.Tight}
showFilter
/>
) : (
<div className={styles.actionsWrapper}>
<div className={styles.actionsRow}>

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%;
`,