mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
LibraryPanels: Small UI improvements (#33482)
This commit is contained in:
parent
f176b4818a
commit
a9d6d131b3
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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}>
|
||||
|
@ -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%;
|
||||
`,
|
||||
|
Loading…
Reference in New Issue
Block a user