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

PluginsList: Improve layout for smaller screens (#61234)

Browse Source 
* PluginsList: Improve layout for smaller screens

* fix test

* not sure if this will fix it

* fix
This commit is contained in:
Torkel Ödegaard 2023-01-11 23:14:57 +01:00 committed by GitHub
parent 34a865ebf0
commit 7eaa95729c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
public/app/features/plugins/admin/pages/Browse.tsx
View File

@ -4,7 +4,7 @@ import { useLocation } from 'react-router-dom';
import { SelectableValue, GrafanaTheme2 } from '@grafana/data';
import { config, locationSearchToObject } from '@grafana/runtime';
import { LoadingPlaceholder, Select, RadioButtonGroup, useStyles2, Tooltip } from '@grafana/ui';
import { LoadingPlaceholder, Select, RadioButtonGroup, useStyles2, Tooltip, Field } from '@grafana/ui';
import { Page } from 'app/core/components/Page/Page';
import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
import { getNavModel } from 'app/core/selectors/navModel';
@ -53,8 +53,8 @@ export default function Browse({ route }: GrafanaRouteComponentProps): ReactElem
history.push({ query: { filterBy: value } });
};
const onFilterByTypeChange = (value: string) => {
history.push({ query: { filterByType: value } });
const onFilterByTypeChange = (value: SelectableValue<string>) => {
history.push({ query: { filterByType: value.value } });
};
const onSearch = (q: string) => {
@ -75,13 +75,17 @@ export default function Browse({ route }: GrafanaRouteComponentProps): ReactElem
)}
<HorizontalGroup wrap>
<SearchField value={query} onSearch={onSearch} />
<Field label="Search">
<SearchField value={query} onSearch={onSearch} />
</Field>
<HorizontalGroup wrap className={styles.actionBar}>
{/* Filter by type */}
<div>
<RadioButtonGroup
<Field label="Type">
<Select
aria-label="Plugin type filter"
value={filterByType}
onChange={onFilterByTypeChange}
width={18}
options={[
{ value: 'all', label: 'All' },
{ value: 'datasource', label: 'Data sources' },
@ -89,48 +93,50 @@ export default function Browse({ route }: GrafanaRouteComponentProps): ReactElem
{ value: 'app', label: 'Applications' },
]}
/>
</div>
</Field>
{/* Filter by installed / all */}
{remotePluginsAvailable ? (
<div>
<Field label="State">
<RadioButtonGroup value={filterBy} onChange={onFilterByChange} options={filterByOptions} />
</div>
</Field>
) : (
<Tooltip
content="This filter has been disabled because the Grafana server cannot access grafana.com"
placement="top"
>
<div>
<RadioButtonGroup
disabled={true}
value={filterBy}
onChange={onFilterByChange}
options={filterByOptions}
/>
<Field label="State">
<RadioButtonGroup
disabled={true}
value={filterBy}
onChange={onFilterByChange}
options={filterByOptions}
/>
</Field>
</div>
</Tooltip>
)}
{/* Sorting */}
<div>
<Field label="Sort">
<Select
aria-label="Sort Plugins List"
width={24}
value={sortBy}
onChange={onSortByChange}
options={[
{ value: 'nameAsc', label: 'Sort by name (A-Z)' },
{ value: 'nameDesc', label: 'Sort by name (Z-A)' },
{ value: 'updated', label: 'Sort by updated date' },
{ value: 'published', label: 'Sort by published date' },
{ value: 'downloads', label: 'Sort by downloads' },
{ value: 'nameAsc', label: 'By name (A-Z)' },
{ value: 'nameDesc', label: 'By name (Z-A)' },
{ value: 'updated', label: 'By updated date' },
{ value: 'published', label: 'By published date' },
{ value: 'downloads', label: 'By downloads' },
]}
/>
</div>
</Field>
{/* Display mode */}
<div>
<Field label="View">
<RadioButtonGroup<PluginListDisplayMode>
className={styles.displayAs}
value={displayMode}
@ -144,7 +150,7 @@ export default function Browse({ route }: GrafanaRouteComponentProps): ReactElem
{ value: PluginListDisplayMode.List, icon: 'list-ul', description: 'Display plugins in list' },
]}
/>
</div>
</Field>
</HorizontalGroup>
</HorizontalGroup>
<div className={styles.listWrap}>