|
| 1 | +import { Chip, Table, Typography } from '@equinor/eds-core-react' |
| 2 | +import { Mission, MissionStatus } from 'models/Mission' |
| 3 | +import { useCallback, useContext, useEffect, useState } from 'react' |
| 4 | +import styled from 'styled-components' |
| 5 | +import { useLanguageContext } from 'components/Contexts/LanguageContext' |
| 6 | +import { StyledPage } from 'components/Styles/StyledComponents' |
| 7 | +import { SignalREventLabels, useSignalRContext } from 'components/Contexts/SignalRContext' |
| 8 | +import { useBackendApi } from 'api/UseBackendApi' |
| 9 | +import { InstallationContext } from 'components/Contexts/InstallationContext' |
| 10 | +import { PlantMap } from './MissionPage/MapPosition/PointillaMapView' |
| 11 | +import { Task } from 'models/Task' |
| 12 | +import { DescriptionDisplay, TagIdDisplay } from './MissionPage/TaskOverview/TaskTable' |
| 13 | +import { formatDateTime } from 'utils/StringFormatting' |
| 14 | +import { LinePlot } from './CloePage/LinePlot' |
| 15 | + |
| 16 | +const StyledTable = styled(Table)` |
| 17 | + max-width: 800px; |
| 18 | +` |
| 19 | + |
| 20 | +const StyledPlot = styled.div` |
| 21 | + height: 650px; |
| 22 | +` |
| 23 | + |
| 24 | +const StyledContainer = styled.div` |
| 25 | + display: flex; |
| 26 | + flex-direction: row; |
| 27 | + gap: 100px; |
| 28 | + align-items: start; |
| 29 | +` |
| 30 | + |
| 31 | +const StyledContent = styled.div` |
| 32 | + display: flex; |
| 33 | + flex-direction: column; |
| 34 | + gap: 50px; |
| 35 | + padding-top: 50px; |
| 36 | +` |
| 37 | + |
| 38 | +export const CloeDataViewPage = () => <CloeDataViewComponent /> |
| 39 | + |
| 40 | +const DataTable = ({ tasks }: { tasks: Task[] }) => { |
| 41 | + const { TranslateText } = useLanguageContext() |
| 42 | + |
| 43 | + return ( |
| 44 | + <StyledTable> |
| 45 | + <Table.Head> |
| 46 | + <Table.Row> |
| 47 | + <Table.Cell>#</Table.Cell> |
| 48 | + <Table.Cell>{TranslateText('Tag-ID')}</Table.Cell> |
| 49 | + <Table.Cell>{TranslateText('Description')}</Table.Cell> |
| 50 | + <Table.Cell>{TranslateText('Latest Value')}</Table.Cell> |
| 51 | + <Table.Cell>{TranslateText('Timestamp')}</Table.Cell> |
| 52 | + </Table.Row> |
| 53 | + </Table.Head> |
| 54 | + <Table.Body> |
| 55 | + {tasks && |
| 56 | + tasks |
| 57 | + .filter((task) => task.description === 'Spherical glass') |
| 58 | + .map((task, index) => ( |
| 59 | + <Table.Row key={task.id}> |
| 60 | + <Table.Cell> |
| 61 | + <Chip> |
| 62 | + <Typography variant="body_short_bold">{index + 1}</Typography> |
| 63 | + </Chip> |
| 64 | + </Table.Cell> |
| 65 | + <Table.Cell> |
| 66 | + <TagIdDisplay task={task} /> |
| 67 | + </Table.Cell> |
| 68 | + <Table.Cell> |
| 69 | + <DescriptionDisplay task={task} /> |
| 70 | + </Table.Cell> |
| 71 | + {task.inspection.analysisResult?.value ? ( |
| 72 | + <Table.Cell> |
| 73 | + <Typography>{task.inspection.analysisResult?.value}</Typography> |
| 74 | + </Table.Cell> |
| 75 | + ) : ( |
| 76 | + <Table.Cell> |
| 77 | + <Typography>Analysis result not available</Typography> |
| 78 | + </Table.Cell> |
| 79 | + )} |
| 80 | + {task.endTime && ( |
| 81 | + <Table.Cell> |
| 82 | + <Typography>{formatDateTime(task.endTime, 'dd.MM.yy - HH:mm')}</Typography> |
| 83 | + </Table.Cell> |
| 84 | + )} |
| 85 | + </Table.Row> |
| 86 | + ))} |
| 87 | + </Table.Body> |
| 88 | + </StyledTable> |
| 89 | + ) |
| 90 | +} |
| 91 | + |
| 92 | +const CloeDataViewComponent = () => { |
| 93 | + const { TranslateText } = useLanguageContext() |
| 94 | + const { installation } = useContext(InstallationContext) |
| 95 | + const { registerEvent, connectionReady } = useSignalRContext() |
| 96 | + const [filteredMissions, setFilteredMissions] = useState<Mission[]>([]) |
| 97 | + const [lastFilteredMission, setLastFilteredMission] = useState<Mission>() |
| 98 | + const [lastChangedMission, setLastChangedMission] = useState<Mission | undefined>(undefined) |
| 99 | + const backendApi = useBackendApi() |
| 100 | + |
| 101 | + const updateFilteredMissions = useCallback(() => { |
| 102 | + backendApi |
| 103 | + .getMissionRuns({ |
| 104 | + installationCode: installation.installationCode, |
| 105 | + orderBy: 'EndTime desc, Name', |
| 106 | + }) |
| 107 | + .then((paginatedMissions) => { |
| 108 | + const missions = paginatedMissions.content.filter((mission) => |
| 109 | + mission.name?.toLowerCase().startsWith('avlesning') |
| 110 | + ) |
| 111 | + setFilteredMissions(missions) |
| 112 | + }) |
| 113 | + .catch(() => {}) |
| 114 | + }, [installation.installationCode]) |
| 115 | + |
| 116 | + useEffect(() => { |
| 117 | + updateFilteredMissions() |
| 118 | + }, [updateFilteredMissions]) |
| 119 | + |
| 120 | + useEffect(() => { |
| 121 | + if (filteredMissions) setLastFilteredMission(filteredMissions[0]) |
| 122 | + }, [filteredMissions]) |
| 123 | + |
| 124 | + useEffect(() => { |
| 125 | + if ( |
| 126 | + lastChangedMission && |
| 127 | + lastChangedMission.installationCode === installation.installationCode && |
| 128 | + ![MissionStatus.Pending, MissionStatus.Queued, MissionStatus.Ongoing].includes(lastChangedMission.status) |
| 129 | + ) { |
| 130 | + updateFilteredMissions() |
| 131 | + } |
| 132 | + }, [lastChangedMission]) |
| 133 | + |
| 134 | + useEffect(() => { |
| 135 | + if (connectionReady) { |
| 136 | + registerEvent(SignalREventLabels.missionRunCreated, (username: string, message: string) => { |
| 137 | + setLastChangedMission(JSON.parse(message)) |
| 138 | + }) |
| 139 | + registerEvent(SignalREventLabels.missionRunUpdated, (username: string, message: string) => { |
| 140 | + setLastChangedMission(JSON.parse(message)) |
| 141 | + }) |
| 142 | + registerEvent(SignalREventLabels.missionRunDeleted, (username: string, message: string) => { |
| 143 | + setLastChangedMission(JSON.parse(message)) |
| 144 | + }) |
| 145 | + } |
| 146 | + }, [registerEvent, connectionReady]) |
| 147 | + |
| 148 | + const plantCode = lastFilteredMission?.inspectionArea.plantCode |
| 149 | + ? lastFilteredMission.inspectionArea.plantCode |
| 150 | + : undefined |
| 151 | + |
| 152 | + const missionForMap = lastFilteredMission |
| 153 | + ? { |
| 154 | + ...lastFilteredMission, |
| 155 | + tasks: lastFilteredMission.tasks |
| 156 | + .filter((task) => task.description === 'Spherical glass') |
| 157 | + .map((task, index) => ({ ...task, taskOrder: index })), |
| 158 | + } |
| 159 | + : undefined |
| 160 | + |
| 161 | + const missionsForPlot = filteredMissions |
| 162 | + .filter((mission) => { |
| 163 | + const date = mission.endTime ?? mission.startTime ?? mission.creationTime |
| 164 | + if (!date) return false |
| 165 | + const sevenDaysAgo = Date.now() - 7 * 24 * 60 * 60 * 1000 |
| 166 | + return new Date(date).getTime() >= sevenDaysAgo |
| 167 | + }) |
| 168 | + .map((mission) => ({ |
| 169 | + ...mission, |
| 170 | + tasks: mission.tasks |
| 171 | + .filter((task) => task.description === 'Spherical glass') |
| 172 | + .map((task, index) => ({ ...task, taskOrder: index })), |
| 173 | + })) |
| 174 | + |
| 175 | + return ( |
| 176 | + <StyledPage> |
| 177 | + <StyledContent> |
| 178 | + <Typography variant="h2">Data View for Constant Level Oilers</Typography> |
| 179 | + <StyledContainer> |
| 180 | + {lastFilteredMission && <DataTable tasks={lastFilteredMission.tasks} />} |
| 181 | + {plantCode && missionForMap && ( |
| 182 | + <PlantMap plantCode={plantCode} floorId="0" mission={missionForMap} /> |
| 183 | + )} |
| 184 | + </StyledContainer> |
| 185 | + <StyledPlot> |
| 186 | + <Typography variant="h4"> |
| 187 | + {TranslateText('Measured oil level throughout the last 7 days')} |
| 188 | + </Typography> |
| 189 | + {missionsForPlot.length > 0 && <LinePlot missions={missionsForPlot} />} |
| 190 | + </StyledPlot> |
| 191 | + </StyledContent> |
| 192 | + </StyledPage> |
| 193 | + ) |
| 194 | +} |
0 commit comments