-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3 from santiagotena/feat/monitoring-ui
Feat: monitoring UI
- Loading branch information
Showing
6 changed files
with
135 additions
and
205 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
131 changes: 88 additions & 43 deletions
131
developer-console-ui/app/pages/dco/monitoring/MonitoringList.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,48 +1,93 @@ | ||
| import React from "react"; | ||
| import ActiveLink from "../../../components/layout/ActiveLink"; | ||
| import {checkRoute} from "../../../services/functionShared"; | ||
| import router from "next/router"; | ||
| import {Flex, FlexItem, NavigationBar, NavigationBarItem} from "@dco/sdv-ui"; | ||
| import { Box, Button, Table, Toast } from "@dco/sdv-ui" | ||
| import { useStoreActions, useStoreState } from "easy-peasy" | ||
| import { useEffect, useState } from "react" | ||
| import Pagination from "../../shared/paginationTable" | ||
| import BoxToast from "../../../components/layout/boxToast" | ||
| import { | ||
| getReleaseData, | ||
| numberOfReleases, | ||
| releaseManagementRowData | ||
| } from "../../../services/functionReleaseManagement.services" | ||
| import { GraphModal } from "./graphModal" | ||
|
|
||
| const MonitoringList = ({ children }: any) => { | ||
| const pathname = router?.pathname | ||
| const trackTabClicked = router.pathname === '/dco/tracksMain' | ||
| const libTabClicked = router.pathname.includes('/dco/scenario') | ||
| const simulationTabClicked = router.pathname === '/dco/simulation' | ||
| const releaseTabClicked = router.pathname === '/dco/release_management' | ||
| const token = localStorage.getItem('token') | ||
| export function Selectedscenario() { | ||
| return useStoreState((state: any) => state.selectedscenario) | ||
| } | ||
|
|
||
|
|
||
| const MonitoringList = ({ path }: any) => { | ||
| const setCount = useStoreActions((actions: any) => actions.setCount) | ||
| const [isToastOpenScenario, setToastOpenScenario] = useState(false) | ||
| const [successMsgScenario, setSuccessMsgScenario] = useState('') | ||
| const [currentPage, setCurrentPage] = useState(1) | ||
| const [showGraphPopup, setShowGraphPopup] = useState(false) | ||
| const [pageData, setPageData] = useState({ | ||
| rowData: [], | ||
| isLoading: false, | ||
| totalPages: 0, | ||
| totalReleases: 0, | ||
| }) | ||
|
|
||
| useEffect(() => { | ||
| setPageData((prevState) => ({ | ||
| ...prevState, | ||
| rowData: [], | ||
| isLoading: true, | ||
| })) | ||
| getReleaseData().then((info) => { | ||
| const filteredReleases = info?.filter((item: any) => item.releaseStatus == 'READY_FOR_RELEASE') | ||
| setPageData({ | ||
| isLoading: false, | ||
| rowData: releaseManagementRowData(filteredReleases), | ||
| totalPages: 1, | ||
| totalReleases: numberOfReleases(filteredReleases), | ||
| }) | ||
| setCount(numberOfReleases(filteredReleases)); | ||
| }) | ||
| }, []) | ||
|
|
||
| const columns = [ | ||
| { | ||
| Header: 'Release ID', | ||
| accessor: 'releaseId', | ||
| }, | ||
| { | ||
| Header: 'Release Date', | ||
| accessor: 'releaseDate', | ||
| }, | ||
| { | ||
| Header: '', | ||
| accessor: 'menu', | ||
| formatter: (value: any, cell: any) => { | ||
| return (<Button name={"show-graph"} onClick={() => showGraph(cell.row.values.releaseId)}>Analytics View</Button>) | ||
| } | ||
| }, | ||
| ] | ||
|
|
||
| const showGraph = (releaseId: string) => <GraphModal releaseId={releaseId} show={setShowGraphPopup} onClose={setShowGraphPopup}/> | ||
|
|
||
| return ( | ||
| <> | ||
| {/* ... (other code) */} | ||
| <Flex> | ||
| <Flex.Item autoSize> | ||
| {/* LEFT SIDEBAR */} | ||
| <NavigationBar variant="left-sidebar" sizes="large"> | ||
| <ActiveLink href={checkRoute('/dco/monitoring/weather', router, pathname)}> | ||
| <NavigationBarItem> | ||
| Weather | ||
| </NavigationBarItem> | ||
| </ActiveLink> | ||
| <ActiveLink href={checkRoute('/dco/monitoring/terrain', router, pathname)}> | ||
| <NavigationBarItem> | ||
| Terrain | ||
| </NavigationBarItem> | ||
| </ActiveLink> | ||
| <ActiveLink href={checkRoute('/dco/monitoring/routs', router, pathname)}> | ||
| <NavigationBarItem> | ||
| Routs | ||
| </NavigationBarItem> | ||
| </ActiveLink> | ||
| </NavigationBar> | ||
| </Flex.Item> | ||
|
|
||
| <FlexItem> | ||
| {/* */} | ||
| </FlexItem> | ||
| </Flex> | ||
| <Table data-testid="table" columns={columns} | ||
| data={pageData.rowData} initialSortBy={[ | ||
| { | ||
| id: 'lastUpdated', | ||
| desc: true | ||
| } | ||
| ]} | ||
| noDataMessage='No Rows To Show' | ||
| /> | ||
| <Box align='right' padding='small'> | ||
| <Pagination totalRows={pageData.totalReleases} pageChangeHandler={setCurrentPage} rowsPerPage={10} /> | ||
| </Box> | ||
| {/* Toast message for deleting a scenario */} | ||
| {<Toast show={isToastOpenScenario}> | ||
| <div> | ||
| <BoxToast toastMsg={successMsgScenario} /> | ||
| </div> | ||
| </Toast> | ||
| } | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default MonitoringList; | ||
| ) | ||
| } | ||
| export default MonitoringList |
15 changes: 15 additions & 0 deletions
15
developer-console-ui/app/pages/dco/monitoring/graphModal.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { Headline, Popup, Spacer } from "@dco/sdv-ui"; | ||
| import { useState } from "react"; | ||
|
|
||
| export function GraphModal (props: any) { | ||
| const [closeModal, setCloseModal] = useState(false) | ||
|
|
||
| return <> | ||
| <Popup invert={true} dim show={props.show} onClose={props.onClose} style={{ zIndex: 100 }}> | ||
| <Headline> | ||
| Release ${props.releaseId} | ||
| </Headline> | ||
| <Spacer /> | ||
| </Popup> | ||
| </> | ||
| } |
135 changes: 0 additions & 135 deletions
135
developer-console-ui/app/pages/dco/monitoring/weather/index.tsx
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.