jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui) - dashboard - filters

Browse source
This commit is contained in:
Shekar Siri 2023-01-13 15:19:49 +01:00
parent 4b254b3752
commit d5e3b2b9a4
7 changed files with 503 additions and 528 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx
View file

@ -2,22 +2,14 @@ import { observer } from 'mobx-react-lite';
import React from 'react';
import { NoContent, Pagination } from 'UI';
import { useStore } from 'App/mstore';
import { filterList } from 'App/utils';
import { sliceListPerPage } from 'App/utils';
import DashboardListItem from './DashboardListItem';
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
function DashboardList() {
const { dashboardStore } = useStore();
const [shownDashboards, setDashboards] = React.useState([]);
const dashboards = dashboardStore.sortedDashboards;
const list = dashboardStore.filteredList;
const dashboardsSearch = dashboardStore.dashboardsSearch;
React.useEffect(() => {
setDashboards(filterList(dashboards, dashboardsSearch, ['name', 'owner', 'description']));
}, [dashboardsSearch]);
const list = dashboardsSearch !== '' ? shownDashboards : dashboards;
const lenth = list.length;
return (
@ -38,9 +30,6 @@ function DashboardList() {
)}
</div>
<AnimatedSVG name={ICONS.NO_DASHBOARDS} size={180} />
{/* <div className="my-2 bg-active-blue rounded flex items-center justify-center px-80 py-20">
<Icon name="grid-1x2" size={40} color="figmaColors-accent-secondary" />
</div> */}
</div>
}
>

1
frontend/app/components/Dashboard/components/DashboardList/DashboardListItem.tsx
View file

@ -32,7 +32,6 @@ function DashboardListItem(props: Props) {
<div className="link capitalize-first">{dashboard.name}</div>
</div>
</div>
{/* <div><Label className="capitalize">{metric.metricType}</Label></div> */}
<div className="col-span-2">
<div className="flex items-center">
<Icon name={dashboard.isPublic ? 'user-friends' : 'person-fill'} className="mr-2" />

52
frontend/app/components/Dashboard/components/DashboardList/DashboardSearch.tsx
View file

@ -4,33 +4,37 @@ import { useStore } from 'App/mstore';
import { Icon } from 'UI';
import { debounce } from 'App/utils';
let debounceUpdate: any = () => {}
let debounceUpdate: any = () => {};
function DashboardSearch() {
const { dashboardStore } = useStore();
const [query, setQuery] = useState(dashboardStore.dashboardsSearch);
useEffect(() => {
debounceUpdate = debounce((key: string, value: any) => dashboardStore.updateKey(key, value), 500);
}, [])
// @ts-ignore
const write = ({ target: { value } }) => {
setQuery(value);
debounceUpdate('dashboardsSearch', value);
}
return (
<div className="relative">
<Icon name="search" className="absolute top-0 bottom-0 ml-2 m-auto" size="16" />
<input
value={query}
name="dashboardsSearch"
className="bg-white p-2 border border-borderColor-gray-light-shade rounded w-full pl-10"
placeholder="Filter by title or description"
onChange={write}
/>
</div>
const { dashboardStore } = useStore();
const [query, setQuery] = useState(dashboardStore.dashboardsSearch);
useEffect(() => {
debounceUpdate = debounce(
(key: string, value: any) =>
dashboardStore.updateKey('filter', { ...dashboardStore.filter, query: value }),
500
);
}, []);
// @ts-ignore
const write = ({ target: { value } }) => {
setQuery(value);
debounceUpdate('dashboardsSearch', value);
};
return (
<div className="relative">
<Icon name="search" className="absolute top-0 bottom-0 ml-2 m-auto" size="16" />
<input
value={query}
name="dashboardsSearch"
className="bg-white p-2 border border-borderColor-gray-light-shade rounded w-full pl-10"
placeholder="Filter by title or description"
onChange={write}
/>
</div>
);
}
export default observer(DashboardSearch);

61
frontend/app/components/Dashboard/components/DashboardList/Header.tsx
View file

@ -19,30 +19,49 @@ function Header({ history, siteId }: { history: any; siteId: string }) {
};
return (
<div className="flex items-center mb-4 justify-between px-6">
<div className="flex items-baseline mr-3">
<PageTitle title="Dashboards" />
</div>
<div className="ml-auto flex items-center">
<Button variant="primary" onClick={onAddDashboardClick}>
New Dashboard
</Button>
<div className="mx-2">
<Select
options={[
{ label: 'Newest', value: 'desc' },
{ label: 'Oldest', value: 'asc' },
]}
defaultValue={sort.by}
plain
onChange={({ value }) => dashboardStore.updateKey('sort', { by: value.value })}
/>
<>
<div className="flex items-center mb-4 justify-between px-6">
<div className="flex items-baseline mr-3">
<PageTitle title="Dashboards" />
</div>
<div className="w-1/4" style={{ minWidth: 300 }}>
<DashboardSearch />
<div className="ml-auto flex items-center">
<Button variant="primary" onClick={onAddDashboardClick}>
New Dashboard
</Button>
<div className="mx-2"></div>
<div className="w-1/4" style={{ minWidth: 300 }}>
<DashboardSearch />
</div>
</div>
</div>
</div>
<div className="border-y px-3 py-1 mt-2 flex items-center w-full justify-end gap-4">
<Select
options={[
{ label: 'Visibility - All', value: 'all' },
{ label: 'Visibility - Private', value: 'private' },
{ label: 'Visibility - Team', value: 'team' },
]}
defaultValue={'all'}
plain
onChange={({ value }) =>
dashboardStore.updateKey('filter', {
...dashboardStore.filter,
visibility: value.value,
})
}
/>
<Select
options={[
{ label: 'Newest', value: 'desc' },
{ label: 'Oldest', value: 'asc' },
]}
defaultValue={sort.by}
plain
onChange={({ value }) => dashboardStore.updateKey('sort', { by: value.value })}
/>
</div>
</>
);
}

29
frontend/app/components/Dashboard/components/MetricViewHeader/MetricViewHeader.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import { Icon, PageTitle, Button, Link, SegmentSelection } from 'UI';
import { Icon, PageTitle, Button, Link } from 'UI';
import MetricsSearch from '../MetricsSearch';
import Select from 'Shared/Select';
import { useStore } from 'App/mstore';
@ -8,12 +8,8 @@ import { DROPDOWN_OPTIONS, Option } from 'App/constants/card';
function MetricViewHeader() {
const { metricStore } = useStore();
const sort = metricStore.sort;
const listView = metricStore.listView;
const filter = metricStore.filter;
const writeOption = (e: any, { name, value }: any) => {};
return (
<div>
<div className="flex items-center mb-4 justify-between px-6">
@ -24,28 +20,6 @@ function MetricViewHeader() {
<Link to={'/metrics/create'}>
<Button variant="primary">New Card</Button>
</Link>
{/* <SegmentSelection
name="viewType"
className="mx-3"
primary
onSelect={() => metricStore.updateKey('listView', !listView)}
value={{ value: listView ? 'list' : 'grid' }}
list={[
{ value: 'list', name: '', icon: 'graph-up-arrow' },
{ value: 'grid', name: '', icon: 'hash' },
]}
/>
<div className="mx-2">
<Select
options={[
{ label: 'Newest', value: 'desc' },
{ label: 'Oldest', value: 'asc' },
]}
defaultValue={sort.by}
plain
onChange={({ value }) => metricStore.updateKey('sort', { by: value.value })}
/>
</div> */}
<div className="ml-4 w-1/4" style={{ minWidth: 300 }}>
<MetricsSearch />
</div>
@ -65,6 +39,7 @@ function MetricViewHeader() {
defaultValue={filter.type}
onChange={({ value }) => metricStore.updateKey('filter', { ...filter, type: value.value})}
plain={true}
isSearchable={true}
/>
<Select

872
frontend/app/mstore/dashboardStore.ts
View file

@ -1,444 +1,432 @@
import {
makeAutoObservable,
runInAction,
} from "mobx";
import Dashboard from "./types/dashboard";
import Widget from "./types/widget";
import { dashboardService, metricService } from "App/services";
import { toast } from "react-toastify";
import Period, {
LAST_24_HOURS,
LAST_7_DAYS,
} from "Types/app/period";
import { getChartFormatter } from "Types/dashboard/helper";
import Filter from "./types/filter";
import Funnel from "./types/funnel";
import Session from "./types/session";
import Error from "./types/error";
import { FilterKey } from "Types/filter/filterType";
import { makeAutoObservable, runInAction } from 'mobx';
import Dashboard from './types/dashboard';
import Widget from './types/widget';
import { dashboardService, metricService } from 'App/services';
import { toast } from 'react-toastify';
import Period, { LAST_24_HOURS, LAST_7_DAYS } from 'Types/app/period';
import Filter from './types/filter';
import { getRE } from 'App/utils';
export default class DashboardStore {
siteId: any = null;
dashboards: Dashboard[] = [];
selectedDashboard: Dashboard | null = null;
dashboardInstance: Dashboard = new Dashboard();
selectedWidgets: Widget[] = [];
currentWidget: Widget = new Widget();
widgetCategories: any[] = [];
widgets: Widget[] = [];
period: Record<string, any> = Period({ rangeName: LAST_24_HOURS });
drillDownFilter: Filter = new Filter();
drillDownPeriod: Record<string, any> = Period({ rangeName: LAST_7_DAYS });
startTimestamp: number = 0;
endTimestamp: number = 0;
pendingRequests: number = 0;
// Metrics
metricsPage: number = 1;
metricsPageSize: number = 10;
metricsSearch: string = "";
// Loading states
isLoading: boolean = true;
isSaving: boolean = false;
isDeleting: boolean = false;
loadingTemplates: boolean = false
fetchingDashboard: boolean = false;
sessionsLoading: boolean = false;
showAlertModal: boolean = false;
// Pagination
page: number = 1
pageSize: number = 10
dashboardsSearch: string = ''
sort: any = { by: 'desc'}
constructor() {
makeAutoObservable(this);
this.drillDownPeriod = Period({ rangeName: LAST_7_DAYS });
const timeStamps = this.drillDownPeriod.toTimestamps();
this.drillDownFilter.updateKey(
"startTimestamp",
timeStamps.startTimestamp
);
this.drillDownFilter.updateKey("endTimestamp", timeStamps.endTimestamp);
}
get sortedDashboards() {
const sortOrder = this.sort.by
return [...this.dashboards].sort((a, b) => sortOrder === 'desc' ? b.createdAt - a.createdAt : a.createdAt - b.createdAt)
}
toggleAllSelectedWidgets(isSelected: boolean) {
if (isSelected) {
const allWidgets = this.widgetCategories.reduce((acc, cat) => {
return acc.concat(cat.widgets);
}, []);
this.selectedWidgets = allWidgets;
} else {
this.selectedWidgets = [];
}
}
selectWidgetsByCategory(category: string) {
const selectedWidgetIds = this.selectedWidgets.map(
(widget: any) => widget.metricId
);
const widgets = this.widgetCategories
.find((cat) => cat.name === category)
?.widgets.filter(
(widget: any) => !selectedWidgetIds.includes(widget.metricId)
);
this.selectedWidgets = this.selectedWidgets.concat(widgets) || [];
}
removeSelectedWidgetByCategory = (category: any) => {
const categoryWidgetIds = category.widgets.map((w: Widget) => w.metricId);
this.selectedWidgets = this.selectedWidgets.filter(
(widget: any) => !categoryWidgetIds.includes(widget.metricId)
);
};
toggleWidgetSelection = (widget: any) => {
const selectedWidgetIds = this.selectedWidgets.map(
(widget: any) => widget.metricId
);
if (selectedWidgetIds.includes(widget.metricId)) {
this.selectedWidgets = this.selectedWidgets.filter(
(w: any) => w.metricId !== widget.metricId
);
} else {
this.selectedWidgets.push(widget);
}
};
findByIds(ids: string[]) {
return this.dashboards.filter((d) => ids.includes(d.dashboardId));
}
initDashboard(dashboard?: Dashboard) {
this.dashboardInstance = dashboard
? new Dashboard().fromJson(dashboard)
: new Dashboard();
this.selectedWidgets = [];
}
updateKey(key: string, value: any) {
// @ts-ignore
this[key] = value;
}
resetCurrentWidget() {
this.currentWidget = new Widget();
}
editWidget(widget: any) {
this.currentWidget.update(widget);
}
fetchList(): Promise<any> {
this.isLoading = true;
return dashboardService
.getDashboards()
.then((list: any) => {
runInAction(() => {
this.dashboards = list.map((d: Record<string, any>) =>
new Dashboard().fromJson(d)
);
});
})
.finally(() => {
runInAction(() => {
this.isLoading = false;
});
});
}
fetch(dashboardId: string): Promise<any> {
this.setFetchingDashboard(true);
return dashboardService
.getDashboard(dashboardId)
.then((response) => {
this.selectedDashboard?.update({
widgets: new Dashboard().fromJson(response).widgets,
});
})
.finally(() => {
this.setFetchingDashboard(false);
});
}
setFetchingDashboard(value: boolean) {
this.fetchingDashboard = value;
}
save(dashboard: Dashboard): Promise<any> {
this.isSaving = true;
const isCreating = !dashboard.dashboardId;
dashboard.metrics = this.selectedWidgets.map((w) => w.metricId);
return new Promise((resolve, reject) => {
dashboardService
.saveDashboard(dashboard)
.then((_dashboard) => {
runInAction(() => {
if (isCreating) {
toast.success("Dashboard created successfully");
this.addDashboard(
new Dashboard().fromJson(_dashboard)
);
} else {
toast.success("Dashboard successfully updated ");
this.updateDashboard(
new Dashboard().fromJson(_dashboard)
);
}
resolve(_dashboard);
});
})
.catch((error) => {
toast.error("Error saving dashboard");
reject();
})
.finally(() => {
runInAction(() => {
this.isSaving = false;
});
});
});
}
saveMetric(metric: Widget, dashboardId: string): Promise<any> {
const isCreating = !metric.widgetId;
return dashboardService
.saveMetric(metric, dashboardId)
.then((metric) => {
runInAction(() => {
if (isCreating) {
this.selectedDashboard?.widgets.push(metric);
} else {
this.selectedDashboard?.widgets.map((w) => {
if (w.widgetId === metric.widgetId) {
w.update(metric);
}
});
}
});
});
}
deleteDashboard(dashboard: Dashboard): Promise<any> {
this.isDeleting = true;
return dashboardService
.deleteDashboard(dashboard.dashboardId)
.then(() => {
toast.success("Dashboard deleted successfully");
runInAction(() => {
this.removeDashboard(dashboard);
});
})
.catch(() => {
toast.error("Dashboard could not be deleted");
})
.finally(() => {
runInAction(() => {
this.isDeleting = false;
});
});
}
toJson() {
return {
dashboards: this.dashboards.map((d) => d.toJson()),
};
}
fromJson(json: any) {
runInAction(() => {
this.dashboards = json.dashboards.map((d: Record<string, any>) =>
new Dashboard().fromJson(d)
);
});
return this;
}
addDashboard(dashboard: Dashboard) {
this.dashboards.push(new Dashboard().fromJson(dashboard));
}
removeDashboard(dashboard: Dashboard) {
this.dashboards = this.dashboards.filter(
(d) => d.dashboardId !== dashboard.dashboardId
);
}
getDashboard(dashboardId: string|number): Dashboard | null {
return (
this.dashboards.find((d) => d.dashboardId == dashboardId) || null
);
}
getDashboardByIndex(index: number) {
return this.dashboards[index];
}
getDashboardCount() {
return this.dashboards.length;
}
updateDashboard(dashboard: Dashboard) {
const index = this.dashboards.findIndex(
(d) => d.dashboardId === dashboard.dashboardId
);
if (index >= 0) {
this.dashboards[index] = dashboard;
if (this.selectedDashboard?.dashboardId === dashboard.dashboardId) {
this.selectDashboardById(dashboard.dashboardId);
}
}
}
selectDashboardById = (dashboardId: any) => {
this.selectedDashboard =
this.dashboards.find((d) => d.dashboardId == dashboardId) ||
new Dashboard();
};
getDashboardById = (dashboardId: string) => {
const dashboard = this.dashboards.find((d) => d.dashboardId == dashboardId)
if (dashboard) {
this.selectedDashboard = dashboard
return true;
} else {
this.selectedDashboard = null
return false;
}
}
setSiteId = (siteId: any) => {
this.siteId = siteId;
};
fetchTemplates(hardRefresh: boolean): Promise<any> {
this.loadingTemplates = true
return new Promise((resolve, reject) => {
if (this.widgetCategories.length > 0 && !hardRefresh) {
resolve(this.widgetCategories);
} else {
metricService
.getTemplates()
.then((response) => {
const categories: any[] = [];
response.forEach((category: any) => {
const widgets: any[] = [];
category.widgets
.forEach((widget: any) => {
const w = new Widget().fromJson(widget);
widgets.push(w);
});
const c: any = {};
c.widgets = widgets;
c.name = category.category;
c.description = category.description;
categories.push(c);
});
this.widgetCategories = categories;
resolve(this.widgetCategories);
})
.catch((error) => {
reject(error);
}).finally(() => {
this.loadingTemplates = false
});
}
});
}
deleteDashboardWidget(dashboardId: string, widgetId: string) {
this.isDeleting = true;
return dashboardService
.deleteWidget(dashboardId, widgetId)
.then(() => {
toast.success("Dashboard updated successfully");
runInAction(() => {
this.selectedDashboard?.removeWidget(widgetId);
});
})
.finally(() => {
this.isDeleting = false;
});
}
addWidgetToDashboard(dashboard: Dashboard, metricIds: any): Promise<any> {
this.isSaving = true;
return dashboardService
.addWidget(dashboard, metricIds)
.then((response) => {
toast.success("Card added to dashboard.");
})
.catch(() => {
toast.error("Card could not be added.");
})
.finally(() => {
this.isSaving = false;
});
}
setPeriod(period: any) {
this.period = Period({
start: period.start,
end: period.end,
rangeName: period.rangeName,
});
}
setDrillDownPeriod(period: any) {
this.drillDownPeriod = Period({
start: period.start,
end: period.end,
rangeName: period.rangeName,
});
}
toggleAlertModal(val: boolean) {
this.showAlertModal = val
}
fetchMetricChartData(
metric: Widget,
data: any,
isWidget: boolean = false,
period: Record<string, any>
): Promise<any> {
period = period.toTimestamps();
const params = { ...period, ...data, key: metric.predefinedKey };
if (metric.page && metric.limit) {
params["page"] = metric.page;
params["limit"] = metric.limit;
}
return new Promise((resolve, reject) => {
this.pendingRequests += 1
return metricService
.getMetricChartData(metric, params, isWidget)
.then((data: any) => {
metric.setData(data, period);
resolve(metric.data);
})
.catch((err: any) => {
reject(err);
}).finally(() => {
setTimeout(() => {
this.pendingRequests = this.pendingRequests - 1
}, 100)
});
});
}
interface DashboardFilter {
query?: string;
visibility?: string;
}
export default class DashboardStore {
siteId: any = null;
dashboards: Dashboard[] = [];
selectedDashboard: Dashboard | null = null;
dashboardInstance: Dashboard = new Dashboard();
selectedWidgets: Widget[] = [];
currentWidget: Widget = new Widget();
widgetCategories: any[] = [];
widgets: Widget[] = [];
period: Record<string, any> = Period({ rangeName: LAST_24_HOURS });
drillDownFilter: Filter = new Filter();
drillDownPeriod: Record<string, any> = Period({ rangeName: LAST_7_DAYS });
startTimestamp: number = 0;
endTimestamp: number = 0;
pendingRequests: number = 0;
filter: DashboardFilter = { visibility: 'all', query: '' };
// Metrics
metricsPage: number = 1;
metricsPageSize: number = 10;
metricsSearch: string = '';
// Loading states
isLoading: boolean = true;
isSaving: boolean = false;
isDeleting: boolean = false;
loadingTemplates: boolean = false;
fetchingDashboard: boolean = false;
sessionsLoading: boolean = false;
showAlertModal: boolean = false;
// Pagination
page: number = 1;
pageSize: number = 10;
dashboardsSearch: string = '';
sort: any = { by: 'desc' };
constructor() {
makeAutoObservable(this);
this.drillDownPeriod = Period({ rangeName: LAST_7_DAYS });
const timeStamps = this.drillDownPeriod.toTimestamps();
this.drillDownFilter.updateKey('startTimestamp', timeStamps.startTimestamp);
this.drillDownFilter.updateKey('endTimestamp', timeStamps.endTimestamp);
}
get sortedDashboards() {
const sortOrder = this.sort.by;
return [...this.dashboards].sort((a, b) =>
sortOrder === 'desc' ? b.createdAt - a.createdAt : a.createdAt - b.createdAt
);
}
get filteredList() {
const filterRE = this.filter.query ? getRE(this.filter.query, 'i') : null;
return this.dashboards
.filter(
(dashboard) =>
(this.filter.visibility === 'all' ||
(this.filter.visibility === 'team' ? dashboard.isPublic : !dashboard.isPublic)) &&
(!filterRE ||
// @ts-ignore
['name', 'owner', 'description'].some((key) => filterRE.test(dashboard[key])))
)
.sort((a, b) =>
this.sort.by === 'desc' ? b.createdAt - a.createdAt : a.createdAt - b.createdAt
);
}
toggleAllSelectedWidgets(isSelected: boolean) {
if (isSelected) {
const allWidgets = this.widgetCategories.reduce((acc, cat) => {
return acc.concat(cat.widgets);
}, []);
this.selectedWidgets = allWidgets;
} else {
this.selectedWidgets = [];
}
}
selectWidgetsByCategory(category: string) {
const selectedWidgetIds = this.selectedWidgets.map((widget: any) => widget.metricId);
const widgets = this.widgetCategories
.find((cat) => cat.name === category)
?.widgets.filter((widget: any) => !selectedWidgetIds.includes(widget.metricId));
this.selectedWidgets = this.selectedWidgets.concat(widgets) || [];
}
removeSelectedWidgetByCategory = (category: any) => {
const categoryWidgetIds = category.widgets.map((w: Widget) => w.metricId);
this.selectedWidgets = this.selectedWidgets.filter(
(widget: any) => !categoryWidgetIds.includes(widget.metricId)
);
};
toggleWidgetSelection = (widget: any) => {
const selectedWidgetIds = this.selectedWidgets.map((widget: any) => widget.metricId);
if (selectedWidgetIds.includes(widget.metricId)) {
this.selectedWidgets = this.selectedWidgets.filter(
(w: any) => w.metricId !== widget.metricId
);
} else {
this.selectedWidgets.push(widget);
}
};
findByIds(ids: string[]) {
return this.dashboards.filter((d) => ids.includes(d.dashboardId));
}
initDashboard(dashboard?: Dashboard) {
this.dashboardInstance = dashboard ? new Dashboard().fromJson(dashboard) : new Dashboard();
this.selectedWidgets = [];
}
updateKey(key: string, value: any) {
// @ts-ignore
this[key] = value;
}
resetCurrentWidget() {
this.currentWidget = new Widget();
}
editWidget(widget: any) {
this.currentWidget.update(widget);
}
fetchList(): Promise<any> {
this.isLoading = true;
return dashboardService
.getDashboards()
.then((list: any) => {
runInAction(() => {
this.dashboards = list.map((d: Record<string, any>) => new Dashboard().fromJson(d));
});
})
.finally(() => {
runInAction(() => {
this.isLoading = false;
});
});
}
fetch(dashboardId: string): Promise<any> {
this.setFetchingDashboard(true);
return dashboardService
.getDashboard(dashboardId)
.then((response) => {
this.selectedDashboard?.update({
widgets: new Dashboard().fromJson(response).widgets,
});
})
.finally(() => {
this.setFetchingDashboard(false);
});
}
setFetchingDashboard(value: boolean) {
this.fetchingDashboard = value;
}
save(dashboard: Dashboard): Promise<any> {
this.isSaving = true;
const isCreating = !dashboard.dashboardId;
dashboard.metrics = this.selectedWidgets.map((w) => w.metricId);
return new Promise((resolve, reject) => {
dashboardService
.saveDashboard(dashboard)
.then((_dashboard) => {
runInAction(() => {
if (isCreating) {
toast.success('Dashboard created successfully');
this.addDashboard(new Dashboard().fromJson(_dashboard));
} else {
toast.success('Dashboard successfully updated ');
this.updateDashboard(new Dashboard().fromJson(_dashboard));
}
resolve(_dashboard);
});
})
.catch((error) => {
toast.error('Error saving dashboard');
reject();
})
.finally(() => {
runInAction(() => {
this.isSaving = false;
});
});
});
}
saveMetric(metric: Widget, dashboardId: string): Promise<any> {
const isCreating = !metric.widgetId;
return dashboardService.saveMetric(metric, dashboardId).then((metric) => {
runInAction(() => {
if (isCreating) {
this.selectedDashboard?.widgets.push(metric);
} else {
this.selectedDashboard?.widgets.map((w) => {
if (w.widgetId === metric.widgetId) {
w.update(metric);
}
});
}
});
});
}
deleteDashboard(dashboard: Dashboard): Promise<any> {
this.isDeleting = true;
return dashboardService
.deleteDashboard(dashboard.dashboardId)
.then(() => {
toast.success('Dashboard deleted successfully');
runInAction(() => {
this.removeDashboard(dashboard);
});
})
.catch(() => {
toast.error('Dashboard could not be deleted');
})
.finally(() => {
runInAction(() => {
this.isDeleting = false;
});
});
}
toJson() {
return {
dashboards: this.dashboards.map((d) => d.toJson()),
};
}
fromJson(json: any) {
runInAction(() => {
this.dashboards = json.dashboards.map((d: Record<string, any>) =>
new Dashboard().fromJson(d)
);
});
return this;
}
addDashboard(dashboard: Dashboard) {
this.dashboards.push(new Dashboard().fromJson(dashboard));
}
removeDashboard(dashboard: Dashboard) {
this.dashboards = this.dashboards.filter((d) => d.dashboardId !== dashboard.dashboardId);
}
getDashboard(dashboardId: string | number): Dashboard | null {
return this.dashboards.find((d) => d.dashboardId == dashboardId) || null;
}
getDashboardByIndex(index: number) {
return this.dashboards[index];
}
getDashboardCount() {
return this.dashboards.length;
}
updateDashboard(dashboard: Dashboard) {
const index = this.dashboards.findIndex((d) => d.dashboardId === dashboard.dashboardId);
if (index >= 0) {
this.dashboards[index] = dashboard;
if (this.selectedDashboard?.dashboardId === dashboard.dashboardId) {
this.selectDashboardById(dashboard.dashboardId);
}
}
}
selectDashboardById = (dashboardId: any) => {
this.selectedDashboard =
this.dashboards.find((d) => d.dashboardId == dashboardId) || new Dashboard();
};
getDashboardById = (dashboardId: string) => {
const dashboard = this.dashboards.find((d) => d.dashboardId == dashboardId);
if (dashboard) {
this.selectedDashboard = dashboard;
return true;
} else {
this.selectedDashboard = null;
return false;
}
};
setSiteId = (siteId: any) => {
this.siteId = siteId;
};
fetchTemplates(hardRefresh: boolean): Promise<any> {
this.loadingTemplates = true;
return new Promise((resolve, reject) => {
if (this.widgetCategories.length > 0 && !hardRefresh) {
resolve(this.widgetCategories);
} else {
metricService
.getTemplates()
.then((response) => {
const categories: any[] = [];
response.forEach((category: any) => {
const widgets: any[] = [];
category.widgets.forEach((widget: any) => {
const w = new Widget().fromJson(widget);
widgets.push(w);
});
const c: any = {};
c.widgets = widgets;
c.name = category.category;
c.description = category.description;
categories.push(c);
});
this.widgetCategories = categories;
resolve(this.widgetCategories);
})
.catch((error) => {
reject(error);
})
.finally(() => {
this.loadingTemplates = false;
});
}
});
}
deleteDashboardWidget(dashboardId: string, widgetId: string) {
this.isDeleting = true;
return dashboardService
.deleteWidget(dashboardId, widgetId)
.then(() => {
toast.success('Dashboard updated successfully');
runInAction(() => {
this.selectedDashboard?.removeWidget(widgetId);
});
})
.finally(() => {
this.isDeleting = false;
});
}
addWidgetToDashboard(dashboard: Dashboard, metricIds: any): Promise<any> {
this.isSaving = true;
return dashboardService
.addWidget(dashboard, metricIds)
.then((response) => {
toast.success('Card added to dashboard.');
})
.catch(() => {
toast.error('Card could not be added.');
})
.finally(() => {
this.isSaving = false;
});
}
setPeriod(period: any) {
this.period = Period({
start: period.start,
end: period.end,
rangeName: period.rangeName,
});
}
setDrillDownPeriod(period: any) {
this.drillDownPeriod = Period({
start: period.start,
end: period.end,
rangeName: period.rangeName,
});
}
toggleAlertModal(val: boolean) {
this.showAlertModal = val
}
fetchMetricChartData(
metric: Widget,
data: any,
isWidget: boolean = false,
period: Record<string, any>
): Promise<any> {
period = period.toTimestamps();
const params = { ...period, ...data, key: metric.predefinedKey };
if (metric.page && metric.limit) {
params['page'] = metric.page;
params['limit'] = metric.limit;
}
return new Promise((resolve, reject) => {
this.pendingRequests += 1;
return metricService
.getMetricChartData(metric, params, isWidget)
.then((data: any) => {
metric.setData(data, period);
resolve(metric.data);
})
.catch((err: any) => {
reject(err);
})
.finally(() => {
setTimeout(() => {
this.pendingRequests = this.pendingRequests - 1;
}, 100);
});
});
}
}

3
frontend/app/mstore/metricStore.ts
View file

@ -57,13 +57,14 @@ export default class MetricStore {
get filteredCards() {
const filterRE = this.filter.query ? getRE(this.filter.query, 'i') : null;
const dbIds = this.filter.dashboard ? this.filter.dashboard.map((i) => i.value) : [];
const dbIds = this.filter.dashboard ? this.filter.dashboard.map((i: any) => i.value) : [];
return this.metrics
.filter(
(card) =>
(this.filter.type === 'all' || card.metricType === this.filter.type) &&
(!dbIds.length ||
card.dashboards.map((i) => i.dashboardId).some((id) => dbIds.includes(id))) &&
// @ts-ignore
(!filterRE || ['name', 'owner'].some((key) => filterRE.test(card[key])))
)
.sort((a, b) =>