mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Chore: Migrate Dashboard List panel to React (#28607)
* Chore: Migrate Dashlist to React Closes #28491
This commit is contained in:
kay delaney
GitHub
parent
9659c98d61
commit
1bb61660f1
@ -196,7 +196,7 @@ export class PanelPlugin<TOptions = any, TFieldConfigOptions extends object = an
|
||||
*
|
||||
* This is a good place to support any changes to the options model
|
||||
*/
|
||||
setMigrationHandler(handler: PanelMigrationHandler) {
|
||||
setMigrationHandler(handler: PanelMigrationHandler<TOptions>) {
|
||||
this.onPanelMigration = handler;
|
||||
return this;
|
||||
}
|
||||
|
||||
156
public/app/plugins/panel/dashlist/DashList.tsx
Normal file
156
public/app/plugins/panel/dashlist/DashList.tsx
Normal file
@ -0,0 +1,156 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import take from 'lodash/take';
|
||||
|
||||
import { PanelProps } from '@grafana/data';
|
||||
import { CustomScrollbar, Icon, useStyles } from '@grafana/ui';
|
||||
|
||||
import { getBackendSrv } from 'app/core/services/backend_srv';
|
||||
import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
|
||||
import impressionSrv from 'app/core/services/impression_srv';
|
||||
import { DashboardSearchHit } from 'app/features/search/types';
|
||||
import { DashListOptions } from './types';
|
||||
import { getStyles } from './styles';
|
||||
|
||||
type Dashboard = DashboardSearchHit & { isSearchResult?: boolean; isRecent?: boolean };
|
||||
|
||||
interface DashboardGroup {
|
||||
show: boolean;
|
||||
header: string;
|
||||
dashboards: Dashboard[];
|
||||
}
|
||||
|
||||
async function fetchDashboards(options: DashListOptions) {
|
||||
let starredDashboards: Promise<Dashboard[]> = Promise.resolve([]);
|
||||
if (options.showStarred) {
|
||||
const params = { limit: options.maxItems, starred: 'true' };
|
||||
starredDashboards = getBackendSrv().search(params);
|
||||
}
|
||||
|
||||
let recentDashboards: Promise<Dashboard[]> = Promise.resolve([]);
|
||||
if (options.showRecentlyViewed) {
|
||||
const dashIds = take(impressionSrv.getDashboardOpened(), options.maxItems);
|
||||
recentDashboards = getBackendSrv().search({ dashboardIds: dashIds, limit: options.maxItems });
|
||||
}
|
||||
|
||||
let searchedDashboards: Promise<Dashboard[]> = Promise.resolve([]);
|
||||
if (options.showSearch) {
|
||||
const params = {
|
||||
limit: options.maxItems,
|
||||
query: options.query,
|
||||
folderIds: options.folderId,
|
||||
tag: options.tags,
|
||||
type: 'dash-db',
|
||||
};
|
||||
|
||||
searchedDashboards = getBackendSrv().search(params);
|
||||
}
|
||||
|
||||
const [starred, searched, recent] = await Promise.all([starredDashboards, searchedDashboards, recentDashboards]);
|
||||
const dashMap = starred.reduce(
|
||||
(acc, dash) => Object.assign(acc, { [dash.id]: dash }),
|
||||
{} as Record<number, Dashboard>
|
||||
);
|
||||
|
||||
searched.forEach(dash => {
|
||||
if (dashMap.hasOwnProperty(dash.id)) {
|
||||
dashMap[dash.id].isSearchResult = true;
|
||||
} else {
|
||||
dashMap[dash.id] = { ...dash, isSearchResult: true };
|
||||
}
|
||||
});
|
||||
|
||||
recent.forEach(dash => {
|
||||
if (dashMap.hasOwnProperty(dash.id)) {
|
||||
dashMap[dash.id].isRecent = true;
|
||||
} else {
|
||||
dashMap[dash.id] = { ...dash, isRecent: true };
|
||||
}
|
||||
});
|
||||
|
||||
return dashMap;
|
||||
}
|
||||
|
||||
export function DashList(props: PanelProps<DashListOptions>) {
|
||||
const [dashboards, setDashboards] = useState<Record<number, Dashboard>>({});
|
||||
useEffect(() => {
|
||||
fetchDashboards(props.options).then(dashes => {
|
||||
setDashboards(dashes);
|
||||
});
|
||||
}, [
|
||||
props.options.showSearch,
|
||||
props.options.showStarred,
|
||||
props.options.showRecentlyViewed,
|
||||
props.options.maxItems,
|
||||
props.options.query,
|
||||
props.options.tags,
|
||||
props.options.folderId,
|
||||
]);
|
||||
|
||||
const toggleDashboardStar = async (e: React.SyntheticEvent, dash: Dashboard) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const isStarred = await getDashboardSrv().starDashboard(dash.id.toString(), dash.isStarred);
|
||||
setDashboards(Object.assign({}, dashboards, { [dash.id]: { ...dash, isStarred } }));
|
||||
};
|
||||
|
||||
const [starredDashboards, recentDashboards, searchedDashboards] = useMemo(() => {
|
||||
const dashboardList = Object.values(dashboards);
|
||||
return [
|
||||
dashboardList.filter(dash => dash.isStarred),
|
||||
dashboardList.filter(dash => dash.isRecent),
|
||||
dashboardList.filter(dash => dash.isSearchResult),
|
||||
];
|
||||
}, [dashboards]);
|
||||
|
||||
const { showStarred, showRecentlyViewed, showHeadings, showSearch } = props.options;
|
||||
|
||||
const dashboardGroups: DashboardGroup[] = [
|
||||
{
|
||||
header: 'Starred dashboards',
|
||||
dashboards: starredDashboards,
|
||||
show: showStarred,
|
||||
},
|
||||
{
|
||||
header: 'Recently viewed dashboards',
|
||||
dashboards: recentDashboards,
|
||||
show: showRecentlyViewed,
|
||||
},
|
||||
{
|
||||
header: 'Search',
|
||||
dashboards: searchedDashboards,
|
||||
show: showSearch,
|
||||
},
|
||||
];
|
||||
|
||||
const css = useStyles(getStyles);
|
||||
return (
|
||||
<CustomScrollbar autoHeightMin="100%" autoHeightMax="100%">
|
||||
{dashboardGroups.map(
|
||||
({ show, header, dashboards }, i) =>
|
||||
show && (
|
||||
<div className={css.dashlistSection} key={`dash-group-${i}`}>
|
||||
{showHeadings && <h6 className={css.dashlistSectionHeader}>{header}</h6>}
|
||||
<ul>
|
||||
{dashboards.map(dash => (
|
||||
<li className={css.dashlistItem} key={`dash-${dash.id}`}>
|
||||
<div className={css.dashlistLink}>
|
||||
<div className={css.dashlistLinkBody}>
|
||||
<a className={css.dashlistTitle} href={dash.url}>
|
||||
{dash.title}
|
||||
</a>
|
||||
{dash.folderTitle && <div className={css.dashlistFolder}>{dash.folderTitle}</div>}
|
||||
</div>
|
||||
<span className={css.dashlistStar} onClick={e => toggleDashboardStar(e, dash)}>
|
||||
<Icon name={dash.isStarred ? 'favorite' : 'star'} type={dash.isStarred ? 'mono' : 'default'} />
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</CustomScrollbar>
|
||||
);
|
||||
}
|
||||
@ -1,45 +0,0 @@
|
||||
<div>
|
||||
<div class="section gf-form-group">
|
||||
<h5 class="section-heading">Options</h5>
|
||||
|
||||
<gf-form-switch class="gf-form" label="Starred" label-class="width-9" checked="ctrl.panel.starred"
|
||||
on-change="ctrl.refresh()"></gf-form-switch>
|
||||
<gf-form-switch class="gf-form" label="Recently viewed" label-class="width-9" checked="ctrl.panel.recent"
|
||||
on-change="ctrl.refresh()"></gf-form-switch>
|
||||
<gf-form-switch class="gf-form" label="Search" label-class="width-9" checked="ctrl.panel.search"
|
||||
on-change="ctrl.refresh()"></gf-form-switch>
|
||||
|
||||
<gf-form-switch class="gf-form" label="Show headings" label-class="width-9" checked="ctrl.panel.headings"
|
||||
on-change="ctrl.refresh()"></gf-form-switch>
|
||||
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-9">Max items</span>
|
||||
<input class="gf-form-input max-width-5" type="number" ng-model="ctrl.panel.limit" ng-model-onblur
|
||||
ng-change="ctrl.refresh()">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section gf-form-group">
|
||||
<h5 class="section-heading">Search</h5>
|
||||
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-6">Query</span>
|
||||
<input type="text" class="gf-form-input" placeholder="title query" ng-model="ctrl.panel.query"
|
||||
ng-change="ctrl.refresh()" ng-model-onblur>
|
||||
</div>
|
||||
|
||||
<div class="gf-form">
|
||||
<folder-picker initial-folder-id="ctrl.panel.folderId" on-change="ctrl.onFolderChange" label-class="width-6"
|
||||
initial-title="'All'" enable-reset="true">
|
||||
</folder-picker>
|
||||
</div>
|
||||
|
||||
<div class="gf-form">
|
||||
<span class="gf-form-label width-6">Tags</span>
|
||||
<bootstrap-tagsinput ng-model="ctrl.panel.tags" tagclass="label label-tag" placeholder="add tags"
|
||||
on-tags-updated="ctrl.refresh()">
|
||||
</bootstrap-tagsinput>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -1,20 +0,0 @@
|
||||
<div>
|
||||
<div class="dashlist" ng-repeat="group in ctrl.groups">
|
||||
<div class="dashlist-section" ng-if="group.show">
|
||||
<h6 class="dashlist-section-header" ng-show="ctrl.panel.headings">
|
||||
{{group.header}}
|
||||
</h6>
|
||||
<div class="dashlist-item" ng-repeat="dash in group.list">
|
||||
<a class="dashlist-link dashlist-link-{{dash.type}}" href="{{dash.url}}">
|
||||
<div class="dashlist-link-body">
|
||||
<div class="dashlist-title">{{dash.title}}</div>
|
||||
<div ng-if="dash.folderTitle" class="dashlist-folder">{{dash.folderTitle}}</div>
|
||||
</div>
|
||||
<span class="dashlist-star" ng-click="ctrl.starDashboard(dash, $event)">
|
||||
<icon name="dash.isStarred ? 'favorite':'star'" type="dash.isStarred ? 'mono':'default'"></icon>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,156 +0,0 @@
|
||||
import _ from 'lodash';
|
||||
import { PanelCtrl } from 'app/plugins/sdk';
|
||||
import impressionSrv from 'app/core/services/impression_srv';
|
||||
import { auto, IScope } from 'angular';
|
||||
import { backendSrv } from 'app/core/services/backend_srv';
|
||||
import { DashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
|
||||
import { PanelEvents } from '@grafana/data';
|
||||
import { promiseToDigest } from '../../../core/utils/promiseToDigest';
|
||||
|
||||
class DashListCtrl extends PanelCtrl {
|
||||
static templateUrl = 'module.html';
|
||||
static scrollable = true;
|
||||
|
||||
groups: any[];
|
||||
modes: any[];
|
||||
|
||||
panelDefaults: any = {
|
||||
query: '',
|
||||
limit: 10,
|
||||
tags: [],
|
||||
recent: false,
|
||||
search: false,
|
||||
starred: true,
|
||||
headings: true,
|
||||
folderId: null,
|
||||
};
|
||||
|
||||
/** @ngInject */
|
||||
constructor($scope: IScope, $injector: auto.IInjectorService, private dashboardSrv: DashboardSrv) {
|
||||
super($scope, $injector);
|
||||
_.defaults(this.panel, this.panelDefaults);
|
||||
|
||||
if (this.panel.tag) {
|
||||
this.panel.tags = [this.panel.tag];
|
||||
delete this.panel.tag;
|
||||
}
|
||||
|
||||
this.events.on(PanelEvents.refresh, this.onRefresh.bind(this));
|
||||
this.events.on(PanelEvents.editModeInitialized, this.onInitEditMode.bind(this));
|
||||
|
||||
this.groups = [
|
||||
{ list: [], show: false, header: 'Starred dashboards' },
|
||||
{ list: [], show: false, header: 'Recently viewed dashboards' },
|
||||
{ list: [], show: false, header: 'Search' },
|
||||
];
|
||||
|
||||
// update capability
|
||||
if (this.panel.mode) {
|
||||
if (this.panel.mode === 'starred') {
|
||||
this.panel.starred = true;
|
||||
this.panel.headings = false;
|
||||
}
|
||||
if (this.panel.mode === 'recently viewed') {
|
||||
this.panel.recent = true;
|
||||
this.panel.starred = false;
|
||||
this.panel.headings = false;
|
||||
}
|
||||
if (this.panel.mode === 'search') {
|
||||
this.panel.search = true;
|
||||
this.panel.starred = false;
|
||||
this.panel.headings = false;
|
||||
}
|
||||
delete this.panel.mode;
|
||||
}
|
||||
}
|
||||
|
||||
onInitEditMode() {
|
||||
this.modes = ['starred', 'search', 'recently viewed'];
|
||||
this.addEditorTab('Options', 'public/app/plugins/panel/dashlist/editor.html');
|
||||
}
|
||||
|
||||
onRefresh() {
|
||||
const promises = [];
|
||||
|
||||
promises.push(this.getRecentDashboards());
|
||||
promises.push(this.getStarred());
|
||||
promises.push(this.getSearch());
|
||||
|
||||
return Promise.all(promises).then(this.renderingCompleted.bind(this));
|
||||
}
|
||||
|
||||
getSearch() {
|
||||
this.groups[2].show = this.panel.search;
|
||||
if (!this.panel.search) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
const params = {
|
||||
limit: this.panel.limit,
|
||||
query: this.panel.query,
|
||||
tag: this.panel.tags,
|
||||
folderIds: this.panel.folderId,
|
||||
type: 'dash-db',
|
||||
};
|
||||
|
||||
return promiseToDigest(this.$scope)(
|
||||
backendSrv.search(params).then(result => {
|
||||
this.groups[2].list = result;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
getStarred() {
|
||||
this.groups[0].show = this.panel.starred;
|
||||
if (!this.panel.starred) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
const params = { limit: this.panel.limit, starred: 'true' };
|
||||
return promiseToDigest(this.$scope)(
|
||||
backendSrv.search(params).then(result => {
|
||||
this.groups[0].list = result;
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
starDashboard(dash: any, evt: any) {
|
||||
this.dashboardSrv.starDashboard(dash.id, dash.isStarred).then((newState: any) => {
|
||||
dash.isStarred = newState;
|
||||
});
|
||||
|
||||
if (evt) {
|
||||
evt.stopPropagation();
|
||||
evt.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
getRecentDashboards() {
|
||||
this.groups[1].show = this.panel.recent;
|
||||
if (!this.panel.recent) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
const dashIds = _.take(impressionSrv.getDashboardOpened(), this.panel.limit);
|
||||
return promiseToDigest(this.$scope)(
|
||||
backendSrv.search({ dashboardIds: dashIds, limit: this.panel.limit }).then(result => {
|
||||
this.groups[1].list = dashIds
|
||||
.map(orderId => {
|
||||
return _.find(result, dashboard => {
|
||||
return dashboard.id === orderId;
|
||||
});
|
||||
})
|
||||
.filter(el => {
|
||||
return el !== undefined;
|
||||
});
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
onFolderChange = (folder: any) => {
|
||||
this.panel.folderId = folder.id;
|
||||
this.refresh();
|
||||
};
|
||||
}
|
||||
|
||||
export { DashListCtrl, DashListCtrl as PanelCtrl };
|
||||
81
public/app/plugins/panel/dashlist/module.tsx
Normal file
81
public/app/plugins/panel/dashlist/module.tsx
Normal file
@ -0,0 +1,81 @@
|
||||
import _ from 'lodash';
|
||||
import { PanelModel, PanelPlugin } from '@grafana/data';
|
||||
import { DashList } from './DashList';
|
||||
import { DashListOptions } from './types';
|
||||
import { FolderPicker } from 'app/core/components/Select/FolderPicker';
|
||||
import React from 'react';
|
||||
import { TagsInput } from '@grafana/ui';
|
||||
|
||||
export const plugin = new PanelPlugin<DashListOptions>(DashList)
|
||||
.setPanelOptions(builder => {
|
||||
builder
|
||||
.addBooleanSwitch({
|
||||
path: 'showStarred',
|
||||
name: 'Starred',
|
||||
defaultValue: true,
|
||||
})
|
||||
.addBooleanSwitch({
|
||||
path: 'showRecentlyViewed',
|
||||
name: 'Recently viewed',
|
||||
defaultValue: false,
|
||||
})
|
||||
.addBooleanSwitch({
|
||||
path: 'showSearch',
|
||||
name: 'Search',
|
||||
defaultValue: false,
|
||||
})
|
||||
.addBooleanSwitch({
|
||||
path: 'showHeadings',
|
||||
name: 'Show headings',
|
||||
defaultValue: true,
|
||||
})
|
||||
.addNumberInput({
|
||||
path: 'maxItems',
|
||||
name: 'Max items',
|
||||
defaultValue: 10,
|
||||
})
|
||||
.addTextInput({
|
||||
path: 'query',
|
||||
name: 'Query',
|
||||
defaultValue: '',
|
||||
})
|
||||
.addCustomEditor({
|
||||
path: 'folderId',
|
||||
name: 'Folder',
|
||||
id: 'folderId',
|
||||
defaultValue: null,
|
||||
editor: props => {
|
||||
return <FolderPicker initialTitle="All" enableReset={true} onChange={({ id }) => props.onChange(id)} />;
|
||||
},
|
||||
})
|
||||
.addCustomEditor({
|
||||
id: 'tags',
|
||||
path: 'tags',
|
||||
name: 'Tags',
|
||||
description: '',
|
||||
defaultValue: [],
|
||||
editor: props => {
|
||||
return <TagsInput tags={props.value} onChange={props.onChange} />;
|
||||
},
|
||||
});
|
||||
})
|
||||
.setMigrationHandler((panel: PanelModel<DashListOptions> & Record<string, any>) => {
|
||||
const newOptions = {
|
||||
showStarred: panel.options.showStarred ?? panel.starred,
|
||||
showRecentlyViewed: panel.options.showRecentlyViewed ?? panel.recent,
|
||||
showSearch: panel.options.showSearch ?? panel.search,
|
||||
showHeadings: panel.options.showHeadings ?? panel.headings,
|
||||
maxItems: panel.options.maxItems ?? panel.limit,
|
||||
query: panel.options.query ?? panel.query,
|
||||
folderId: panel.options.folderId ?? panel.folderId,
|
||||
tags: panel.options.tags ?? panel.tags,
|
||||
};
|
||||
|
||||
const previousVersion = parseFloat(panel.pluginVersion || '6.1');
|
||||
if (previousVersion < 6.3) {
|
||||
const oldProps = ['starred', 'recent', 'search', 'headings', 'limit', 'query', 'folderId'];
|
||||
oldProps.forEach(prop => delete panel[prop]);
|
||||
}
|
||||
|
||||
return newOptions;
|
||||
});
|
||||
57
public/app/plugins/panel/dashlist/styles.ts
Normal file
57
public/app/plugins/panel/dashlist/styles.ts
Normal file
@ -0,0 +1,57 @@
|
||||
import { css } from 'emotion';
|
||||
|
||||
import { GrafanaTheme } from '@grafana/data';
|
||||
import { styleMixins, stylesFactory } from '@grafana/ui';
|
||||
|
||||
export const getStyles = stylesFactory((theme: GrafanaTheme) => ({
|
||||
dashlistSectionHeader: css`
|
||||
margin-bottom: ${theme.spacing.d};
|
||||
color: ${theme.colors.textWeak};
|
||||
`,
|
||||
|
||||
dashlistSection: css`
|
||||
margin-bottom: ${theme.spacing.d};
|
||||
padding-top: 3px;
|
||||
`,
|
||||
|
||||
dashlistLink: css`
|
||||
${styleMixins.listItem(theme)}
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
margin: 3px;
|
||||
padding: 7px;
|
||||
`,
|
||||
|
||||
dashlistStar: css`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: ${theme.colors.textWeak};
|
||||
cursor: pointer;
|
||||
z-index: 1;
|
||||
`,
|
||||
|
||||
dashlistFolder: css`
|
||||
color: ${theme.colors.textWeak};
|
||||
font-size: ${theme.typography.size.xs};
|
||||
`,
|
||||
|
||||
dashlistTitle: css`
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
`,
|
||||
|
||||
dashlistLinkBody: css`
|
||||
flex-grow: 1;
|
||||
`,
|
||||
|
||||
dashlistItem: css`
|
||||
position: relative;
|
||||
list-style: none;
|
||||
`,
|
||||
}));
|
||||
10
public/app/plugins/panel/dashlist/types.ts
Normal file
10
public/app/plugins/panel/dashlist/types.ts
Normal file
@ -0,0 +1,10 @@
|
||||
export interface DashListOptions {
|
||||
showStarred: boolean;
|
||||
showRecentlyViewed: boolean;
|
||||
showSearch: boolean;
|
||||
showHeadings: boolean;
|
||||
maxItems: number;
|
||||
query: string;
|
||||
folderId: number;
|
||||
tags: string[];
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user