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

feat(ui) - dashboards wip

Browse source
This commit is contained in:
Shekar Siri 2022-03-24 16:02:41 +01:00
parent d095ec5e0d
commit af39d9c32f
11 changed files with 105 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/app/Router.js
View file

@ -186,9 +186,9 @@ class Router extends React.Component {
<Redirect to={ routes.client(routes.CLIENT_TABS.SITES) } />
}
<Route index path={ withSiteId(DASHBOARD_METRICS_PATH, siteIdList) } component={ Dashboard } />
{/* <Route index path={ withSiteId(DASHBOARD_SELECT_PATH, siteIdList) } component={ Dashboard } /> */}
{/* <Route index path={ withSiteId(DASHBOARD_PATH, siteIdList) } component={ Dashboard } /> */}
{/* <Route index path={ withSiteId(DASHBOARD_METRICS_PATH, siteIdList) } component={ Dashboard } /> */}
<Route index path={ withSiteId(DASHBOARD_SELECT_PATH, siteIdList) } component={ Dashboard } />
<Route index path={ withSiteId(DASHBOARD_PATH, siteIdList) } component={ Dashboard } />
{/* <Route exact strict path={ withSiteId(WIDGET_PATAH, siteIdList) } component={ Dashboard } />
<Route exact strict path={ withSiteId(WIDGET_PATAH, siteIdList) } component={ Dashboard } />

1
frontend/app/assets/index.html
View file

@ -12,6 +12,7 @@
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
</head>
<body>
<div id="modal-root"></div>
<div id="app"><p style="color: #eee;text-align: center;height: 100%;padding: 25%;">Loading...</p></div>
</body>
</html>

4
frontend/app/components/Dashboard/NewDashboard.tsx
View file

@ -30,7 +30,9 @@ function NewDashboard(props) {
if (dashboardId) {
store.selectDashboardById(dashboardId);
} else {
store.selectDefaultDashboard();
store.selectDefaultDashboard().then((resp) => {
history.push(withSiteId(dashboardSelected(resp.dashboardId), siteId));
});
}
}

2
frontend/app/components/Dashboard/components/DashboardSideMenu/DashboardSideMenu.tsx
View file

@ -24,7 +24,7 @@ function DashboardSideMenu(props) {
<SideMenuHeader className="mb-4" text="Dashboards" />
{store.dashboards.map(item => (
<SideMenuitem
key={ item.key }
key={ item.dashboardId }
active={item.dashboardId === dashboardId}
title={ item.name }
iconName={ item.icon }

16
frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx
View file

@ -1,14 +1,28 @@
import React from 'react';
import React, { useEffect } from 'react';
import WidgetWrapper from '../../WidgetWrapper';
import { observer } from 'mobx-react-lite';
import { withDashboardStore } from '../../store/store';
import { Button, PageTitle, Link } from 'UI';
import { withSiteId, dashboardMetricCreate } from 'App/routes';
import { ModalContext } from "App/components/Modal/modalContext";
const ModalContent = () => {
let { handleModal } = React.useContext(ModalContext);
return (
<div className="h-screen bg-white relative p-5 shadow-lg" style={{ width: '300px'}}>
Hello this is test
</div>
)
}
function DashboardView(props) {
let { handleModal } = React.useContext(ModalContext);
const { store } = props;
const dashboard = store.selectedDashboard
const list = dashboard?.widgets;
useEffect(() => {
handleModal(<ModalContent />)
}, [])
return (
<div>
<div className="flex items-center mb-4">

17
frontend/app/components/Dashboard/store/dashboardStore.ts
View file

@ -217,14 +217,17 @@ export default class DashboardStore {
}
selectDefaultDashboard = () => {
if (this.dashboards.length > 0) {
const pinnedDashboard = this.dashboards.find(d => d.isPinned)
if (pinnedDashboard) {
this.selectedDashboard = pinnedDashboard
} else {
this.selectedDashboard = this.dashboards[0]
return new Promise((resolve, reject) => {
if (this.dashboards.length > 0) {
const pinnedDashboard = this.dashboards.find(d => d.isPinned)
if (pinnedDashboard) {
this.selectedDashboard = pinnedDashboard
} else {
this.selectedDashboard = this.dashboards[0]
}
}
}
resolve(this.selectedDashboard)
})
}
}

30
frontend/app/components/Modal/Modal.js
View file

@ -1,13 +1,23 @@
export default class Modal extends React.PureComponent {
constructor(props) {
super(props);
this.el = document.createElement('div');
}
import React from "react";
import ReactDOM from "react-dom";
import { ModalContext } from "./modalContext";
import ModalOverlay from "./ModalOverlay";
render() {
const Modal = () => {
let { modalContent, handleModal, modal } = React.useContext(ModalContext);
if (modal) {
return ReactDOM.createPortal(
this.props.children,
this.el,
<div
className="fixed top-0 left-0 h-screen relative"
style={{ background: "rgba(0,0,0,0.8)", zIndex: '9999' }}
>
<ModalOverlay handleModal={handleModal}>
{modalContent}
</ModalOverlay>
</div>,
document.querySelector("#modal-root")
);
}
}
} else return null;
};
export default Modal;

50
frontend/app/components/Modal/ModalContext.js
View file

@ -1,38 +1,18 @@
const ModalContext = React.createContext({
component: null,
props: {},
content: null,
showModal: () => {},
hideModal: () => {}
});
import React from "react";
import useModal from "./useModal";
import Modal from "./modal";
export class ModalProvider extends React.PureComponent {
showModal = (component, props = {}) => {
this.setState({
component,
props
});
};
let ModalContext;
let { Provider } = (ModalContext = React.createContext());
hideModal = () => this.setState({
component: null,
props: {},
});
let ModalProvider = ({ children }) => {
let { modal, handleModal, modalContent } = useModal();
return (
<Provider value={{ modal, handleModal, modalContent }}>
<Modal />
{children}
</Provider>
);
};
state = {
component: null,
props: {},
showModal: this.showModal,
hideModal: this.hideModal
};
render() {
return (
<ModalContext.Provider value={this.state}>
{this.props.children}
</ModalContext.Provider>
);
}
}
export const ModalConsumer = ModalContext.Consumer;
export { ModalContext, ModalProvider };

16
frontend/app/components/Modal/ModalOverlay.tsx Normal file
View file

@ -0,0 +1,16 @@
import React from 'react';
import { ModalContext } from "App/components/Modal/modalContext";
import useModal from 'App/components/Modal/useModal';
function ModalOverlay({ children }) {
let modal = useModal();
// console.log('m', m);
return (
<div onClick={() => modal.handleModal(false)} style={{ background: "rgba(0,0,0,0.8)", zIndex: '9999' }}>
{children}
</div>
);
}
export default ModalOverlay;

15
frontend/app/components/Modal/useModal.ts Normal file
View file

@ -0,0 +1,15 @@
import React from "react";
export default () => {
let [modal, setModal] = React.useState(false);
let [modalContent, setModalContent] = React.useState<any>("I'm the Modal Content");
let handleModal = (content = false) => {
setModal(!modal);
if (content) {
setModalContent(content);
}
};
return { modal, handleModal, modalContent };
};

9
frontend/app/initialize.js
View file

@ -7,6 +7,7 @@ import store from './store';
import Router from './Router';
import DashboardStore from './components/Dashboard/store';
import { DashboardStoreProvider } from './components/Dashboard/store/store';
import { ModalProvider } from './components/Modal/modalContext';
document.addEventListener('DOMContentLoaded', () => {
@ -14,9 +15,11 @@ document.addEventListener('DOMContentLoaded', () => {
render(
(
<Provider store={ store }>
<DashboardStoreProvider store={ dashboardStore }>
<Router />
</DashboardStoreProvider>
<ModalProvider>
<DashboardStoreProvider store={ dashboardStore }>
<Router />
</DashboardStoreProvider>
</ModalProvider>
</Provider>
),
document.getElementById('app'),