opendash
Version:
open.DASH data visualization framework
66 lines • 3.44 kB
JavaScript
import * as React from "react";
import { useDashboardCurrent, useDashboardsBySource, useOpenDashServices, WidgetCreationModal, DashboardLayout, DashboardCreationModal, DashboardRenamingModal, DashboardDeletionModal, DataSidebar, useTranslation, useUrlParam, } from "..";
import { DashboardDisplay } from "./DashboardDisplay";
export var DashboardRoute = function () {
var t = useTranslation(["opendash"])[0];
var DashboardService = useOpenDashServices().DashboardService;
var dashboards = useDashboardsBySource();
var _a = useDashboardCurrent(), dashboard = _a[0], setDashboard = _a[1];
var _b = useUrlParam("dashboard_edit", false), editMode = _b[0], setEditMode = _b[1];
var _c = useUrlParam("data_sidebar", false), datasidebar = _c[0], setDatasidebar = _c[1];
var _d = useUrlParam("db_management", false), management = _d[0], setManagement = _d[1];
var _e = useUrlParam("db_create", false), create = _e[0], setCreate = _e[1];
var _f = useUrlParam("db_add_widgets", false), addWidgets = _f[0], setAddWidgets = _f[1];
var _g = useUrlParam("db_rename", null), rename = _g[0], setRename = _g[1];
var _h = useUrlParam("db_delete", null), remove = _h[0], setRemove = _h[1];
// Create a new dashboard, if there is none
React.useEffect(function () {
if (!dashboard) {
if (dashboards.length === 0) {
setCreate(true);
}
else {
setDashboard(dashboards[0]);
}
}
}, [dashboards]);
return (React.createElement(DashboardLayout, null,
React.createElement(DashboardDisplay, { dashboard: dashboard }),
React.createElement(DataSidebar, { open: datasidebar, close: function () { return setDatasidebar(false); } }),
React.createElement(WidgetCreationModal, { open: addWidgets, close: function () { return setAddWidgets(false); }, onSave: function (presets) {
DashboardService.addPresetsToDashboard(dashboard, presets);
} }),
React.createElement(DashboardCreationModal, { open: create, close: function () { return setCreate(false); }, onSave: function (dashboardId) {
// TODO:
// @ts-ignore
setDashboard({ id: dashboardId });
} }),
React.createElement(DashboardRenamingModal, { id: rename, open: !!rename, close: function () { return setRename(null); } }),
React.createElement(DashboardDeletionModal, { id: remove, open: !!remove, close: function () { return setRemove(null); } })));
};
// {/* <ActionBar>
// <ActionBarLeft>
// <Popover
// placement="bottomRight"
// content={
// <div style={{ width: Math.min(600, window.innerWidth) }}>
// <DashboardManagement />
// </div>
// }
// title={t("dashboards.management_title")}
// trigger="click"
// >
// <Button children={t("dashboards.management_title")} />
// </Popover>
// </ActionBarLeft>
// <ActionBarRight>
// <Button
// style={{ marginLeft: 8 }}
// children={t("monitoring.data_sidebar.action")}
// title={t("monitoring.data_sidebar.action_desc")}
// onClick={() => setDatasidebar(true)}
// />
// <LinkedDataSelect style={{ marginLeft: 8 }} />
// </ActionBarRight>
// </ActionBar> */}
//# sourceMappingURL=DashboardRoute.js.map