From 2c3c0c30c085ab08720a65cbe56733d257ae1ec6 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Thu, 14 Apr 2022 18:29:33 +0200 Subject: [PATCH] feat(ui) - dashboard - ui review and fixes --- .../PredefinedWidgets/CPULoad/CPULoad.tsx | 1 + .../PredefinedWidgets/Crashes/Crashes.tsx | 1 + .../DashboardSideMenu/DashboardSideMenu.tsx | 27 ++++++++++++++---- .../DashboardView/DashboardView.tsx | 17 ++++++----- .../components/WidgetWrapper/AlertButton.tsx | 28 +++++++++++++++++++ .../components/WidgetWrapper/WidgetIcon.tsx | 27 ++++++++++++++++++ .../WidgetWrapper/WidgetWrapper.tsx | 16 +++++++++-- frontend/app/components/Modal/index.tsx | 12 +++++++- frontend/app/mstore/dashboardStore.ts | 4 +++ 9 files changed, 114 insertions(+), 19 deletions(-) create mode 100644 frontend/app/components/Dashboard/components/WidgetWrapper/AlertButton.tsx create mode 100644 frontend/app/components/Dashboard/components/WidgetWrapper/WidgetIcon.tsx diff --git a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx index 3ae354168..53356bf0d 100644 --- a/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx +++ b/frontend/app/components/Dashboard/Widgets/PredefinedWidgets/CPULoad/CPULoad.tsx @@ -20,6 +20,7 @@ function CPULoad(props: Props) { void } function DashboardSideMenu(props: Props) { - const { history, siteId } = props; + const { history, siteId, setShowAlerts } = props; const { hideModal, showModal } = useModal(); const { dashboardStore } = useStore(); const dashboardId = useObserver(() => dashboardStore.selectedDashboard?.dashboardId); @@ -54,9 +58,19 @@ function DashboardSideMenu(props: Props) { onClick={() => onItemClick(item)} className="group" leading = {( -
+
{item.isPublic &&
} - {
togglePinned(item)}>
} + {item.isPinned &&
} + {!item.isPinned && ( + +
togglePinned(item)} + > + +
+ + )}
)} /> @@ -96,11 +110,12 @@ function DashboardSideMenu(props: Props) { id="menu-manage-alerts" title="Alerts" iconName="bell-plus" - // onClick={() => setShowAlerts(true)} + onClick={() => setShowAlerts(true)} />
)); } -export default withRouter(DashboardSideMenu); \ No newline at end of file +export default connect((state) => { +}, { setShowAlerts })(withRouter(DashboardSideMenu)); \ No newline at end of file diff --git a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx index 000a3c59c..b412dc1f2 100644 --- a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx +++ b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx @@ -11,6 +11,7 @@ import { useModal } from 'App/components/Modal'; import DashboardModal from '../DashboardModal'; import DashboardEditModal from '../DashboardEditModal'; import DateRange from 'Shared/DateRange'; +import AlertFormModal from 'App/components/Alerts/AlertFormModal'; interface Props { siteId: number; @@ -22,6 +23,7 @@ function DashboardView(props: Props) { const { siteId, dashboardId } = props; const { dashboardStore } = useStore(); const { hideModal, showModal } = useModal(); + const showAlertModal = useObserver(() => dashboardStore.showAlertModal); const loading = useObserver(() => dashboardStore.fetchingDashboard); const dashboards = useObserver(() => dashboardStore.dashboards); const dashboard: any = useObserver(() => dashboardStore.selectedDashboard); @@ -98,18 +100,11 @@ function DashboardView(props: Props) {
- {/* Options */}
@@ -120,6 +115,10 @@ function DashboardView(props: Props) { dashboardId={dashboardId} onEditHandler={onAddWidgets} /> + dashboardStore.updateKey('showAlertModal', false)} + />
diff --git a/frontend/app/components/Dashboard/components/WidgetWrapper/AlertButton.tsx b/frontend/app/components/Dashboard/components/WidgetWrapper/AlertButton.tsx new file mode 100644 index 000000000..78d858b3e --- /dev/null +++ b/frontend/app/components/Dashboard/components/WidgetWrapper/AlertButton.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import WidgetIcon from './WidgetIcon'; +import { init as initAlert } from 'Duck/alerts'; +import { useStore } from 'App/mstore'; + +interface Props { + seriesId: string; + initAlert: Function; +} +function AlertButton(props: Props) { + const { seriesId, initAlert } = props; + const { dashboardStore } = useStore(); + const onClick = () => { + initAlert({ query: { left: seriesId }}) + dashboardStore.updateKey('showAlertModal', true); + } + return ( + + ); +} + +export default connect(null, { initAlert })(AlertButton); \ No newline at end of file diff --git a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetIcon.tsx b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetIcon.tsx new file mode 100644 index 000000000..5ed7c2a45 --- /dev/null +++ b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetIcon.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { Icon } from 'UI'; +import { Tooltip } from 'react-tippy'; + +interface Props { + className: string + onClick: () => void + icon: string + tooltip: string +} +function WidgetIcon(props: Props) { + const { className, onClick, icon, tooltip } = props; + return ( + +
+ +
+ + ); +} + +export default WidgetIcon; diff --git a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx index 2aadc8733..8f58e6691 100644 --- a/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx +++ b/frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapper.tsx @@ -4,12 +4,14 @@ import { ItemMenu } from 'UI'; import { useDrag, useDrop } from 'react-dnd'; import WidgetChart from '../WidgetChart'; import { useObserver } from 'mobx-react-lite'; -import { confirm } from 'UI/Confirmation'; +// import { confirm } from 'UI/Confirmation'; import { useStore } from 'App/mstore'; import LazyLoad from 'react-lazyload'; import { withRouter } from 'react-router-dom'; import { withSiteId, dashboardMetricDetails } from 'App/routes'; import TemplateOverlay from './TemplateOverlay'; +import WidgetIcon from './WidgetIcon'; +import AlertButton from './AlertButton'; interface Props { className?: string; @@ -29,6 +31,7 @@ function WidgetWrapper(props: Props) { const { dashboardStore } = useStore(); const { isWidget = false, active = false, index = 0, moveListItem = null, isPreview = false, isTemplate = false, dashboardId, siteId } = props; const widget: any = useObserver(() => props.widget); + const isPredefined = widget.metricType === 'predefined'; const [{ opacity, isDragging }, dragRef] = useDrag({ type: 'item', @@ -63,7 +66,7 @@ function WidgetWrapper(props: Props) { } const onChartClick = () => { - if (!isWidget || widget.metricType === 'predefined') return; + if (!isWidget || isPredefined) return; props.history.push(withSiteId(dashboardMetricDetails(dashboardId, widget.metricId),siteId)); } @@ -88,7 +91,14 @@ function WidgetWrapper(props: Props) { >

{widget.name}

{isWidget && ( -
+
+ {!isPredefined && ( + <> + +
+ + )} + { + if (e.keyCode === 27) { + this.hideModal(); + } + } + showModal = (component, props = {}) => { this.setState({ component, props }); + document.addEventListener('keydown', this.handleKeyDown); }; - hideModal = () => + hideModal = () => { this.setState({ component: null, props: {} }); + document.removeEventListener('keydown', this.handleKeyDown); + } state = { component: null, diff --git a/frontend/app/mstore/dashboardStore.ts b/frontend/app/mstore/dashboardStore.ts index fb33ac89e..ba8c23e58 100644 --- a/frontend/app/mstore/dashboardStore.ts +++ b/frontend/app/mstore/dashboardStore.ts @@ -31,6 +31,8 @@ export interface IDashboardSotre { fetchingDashboard: boolean sessionsLoading: boolean + showAlertModal: boolean + selectWidgetsByCategory: (category: string) => void toggleAllSelectedWidgets: (isSelected: boolean) => void removeSelectedWidgetByCategory(category: string): void @@ -93,6 +95,8 @@ export default class DashboardStore implements IDashboardSotre { fetchingDashboard: boolean = false sessionsLoading: boolean = false; + showAlertModal: boolean = false; + constructor() { makeAutoObservable(this, { drillDownFilter: observable.ref,