Added history tab

Fixed bug when zooming
This commit is contained in:
Noe 2024-06-10 15:12:11 +02:00
parent 3deee7bbac
commit 9481a9be66
12 changed files with 404 additions and 51 deletions

View File

@ -678,35 +678,36 @@ internal static class Program
// This is temporary for Wittman, but now it's for all Instalattion
await File.WriteAllTextAsync("/var/www/html/status.csv", csv.SplitLines().Where(l => !l.Contains("Secret")).JoinLines());
var response = await request.PutAsync(new StringContent(csv));
// Compress CSV data to a byte array
byte[] compressedBytes;
using (var memoryStream = new MemoryStream())
{
//Create a zip directory and put the compressed file inside
using (var archive = new ZipArchive(memoryStream, ZipArchiveMode.Create, true))
{
var entry = archive.CreateEntry("data.csv", CompressionLevel.SmallestSize); // Add CSV data to the ZIP archive
using (var entryStream = entry.Open())
using (var writer = new StreamWriter(entryStream))
{
writer.Write(csv);
}
}
compressedBytes = memoryStream.ToArray();
}
// Encode the compressed byte array as a Base64 string
string base64String = Convert.ToBase64String(compressedBytes);
// Create StringContent from Base64 string
var stringContent = new StringContent(base64String, Encoding.UTF8, "application/base64");
// Upload the compressed data (ZIP archive) to S3
var response = await request.PutAsync(stringContent);
// byte[] compressedBytes;
// using (var memoryStream = new MemoryStream())
// {
// //Create a zip directory and put the compressed file inside
// using (var archive = new ZipArchive(memoryStream, ZipArchiveMode.Create, true))
// {
// var entry = archive.CreateEntry("data.csv", CompressionLevel.SmallestSize); // Add CSV data to the ZIP archive
// using (var entryStream = entry.Open())
// using (var writer = new StreamWriter(entryStream))
// {
// writer.Write(csv);
// }
// }
//
// compressedBytes = memoryStream.ToArray();
// }
//
// // Encode the compressed byte array as a Base64 string
// string base64String = Convert.ToBase64String(compressedBytes);
//
// // Create StringContent from Base64 string
// var stringContent = new StringContent(base64String, Encoding.UTF8, "application/base64");
//
// // Upload the compressed data (ZIP archive) to S3
// var response = await request.PutAsync(stringContent);
//
if (response.StatusCode != 200)
{
Console.WriteLine("ERROR: PUT");

View File

@ -70,7 +70,8 @@ public record S3Config
// CanonicalizedResource;
contentType = "application/base64; charset=utf-8";
//contentType = "application/base64; charset=utf-8";
contentType = "text/plain; charset=utf-8";
var payload = $"{method}\n{md5Hash}\n{contentType}\n{date}\n/{bucket.Trim('/')}/{s3Path.Trim('/')}";
using var hmacSha1 = new HMACSHA1(UTF8.GetBytes(s3Secret));

View File

@ -15,6 +15,7 @@
"live": "live",
"information": "information",
"configuration": "configuration",
"history": "history",
"mainstats": "mainstats",
"detailed_view": "detailed_view/"
}

View File

@ -246,8 +246,8 @@ function MainStats(props: MainStatsProps) {
chartOverview: BatteryOverviewInterface;
}> = transformInputToBatteryViewData(
props.s3Credentials,
UnixTime.fromTicks(startX),
UnixTime.fromTicks(endX)
UnixTime.fromTicks(startX).earlier(TimeSpan.fromHours(2)),
UnixTime.fromTicks(endX).earlier(TimeSpan.fromHours(2))
);
resultPromise

View File

@ -15,7 +15,7 @@ import {
Typography,
useTheme
} from '@mui/material';
import React, { useState } from 'react';
import React, { useContext, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import Button from '@mui/material/Button';
import { Close as CloseIcon } from '@mui/icons-material';
@ -29,6 +29,8 @@ import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import dayjs from 'dayjs';
import axiosConfig from '../../../Resources/axiosConfig';
import utc from 'dayjs/plugin/utc';
import { Action } from '../../../interfaces/S3Types';
import { UserContext } from '../../../contexts/userContext';
interface ConfigurationProps {
values: TopologyValues;
@ -82,6 +84,8 @@ function Configuration(props: ConfigurationProps) {
const [updated, setUpdated] = useState(false);
const [dateSelectionError, setDateSelectionError] = useState('');
const [isErrorDateModalOpen, setErrorDateModalOpen] = useState(false);
const context = useContext(UserContext);
const { currentUser, setUser } = context;
const [formValues, setFormValues] = useState<ConfigurationValues>({
minimumSoC: props.values.minimumSoC[0].value,
@ -133,6 +137,13 @@ function Configuration(props: ConfigurationProps) {
.toDate()
};
const historyAction: Action = {
configuration: configurationToSend,
date: new Date().toISOString().split('T')[0], // Gets the current date in YYYY-MM-DD format
time: new Date().toISOString().split('T')[1].split('.')[0], // Gets the current time in HH:MM:SS format
user: currentUser.name
};
// console.log('will send ', dayjs(formValues.calibrationChargeDate));
setLoading(true);
@ -149,8 +160,21 @@ function Configuration(props: ConfigurationProps) {
});
if (res) {
setUpdated(true);
setLoading(false);
const historyRes = await axiosConfig
.post(
`/UpdateActionHistory?installationId=${props.id}`,
historyAction
)
.catch((err) => {
if (err.response) {
setError(true);
setLoading(false);
}
});
if (historyRes) {
setUpdated(true);
setLoading(false);
}
}
}
};

View File

@ -0,0 +1,275 @@
import React, { useContext, useEffect, useState } from 'react';
import {
Alert,
Card,
Container,
Divider,
Grid,
IconButton,
useTheme
} from '@mui/material';
import Typography from '@mui/material/Typography';
import { FormattedMessage } from 'react-intl';
import axiosConfig from '../../../Resources/axiosConfig';
import { AxiosError, AxiosResponse } from 'axios/index';
import routes from '../../../Resources/routes.json';
import { useNavigate } from 'react-router-dom';
import { TokenContext } from '../../../contexts/tokenContext';
import { Action } from '../../../interfaces/S3Types';
interface HistoryProps {
errorLoadingS3Data: boolean;
id: number;
}
function HistoryOfActions(props: HistoryProps) {
const theme = useTheme();
const searchParams = new URLSearchParams(location.search);
const [history, setHistory] = useState<Action[]>([]);
const navigate = useNavigate();
const tokencontext = useContext(TokenContext);
const { removeToken } = tokencontext;
useEffect(() => {
axiosConfig
.get(`/GetHistoryForInstallation?id=${props.id}`)
.then((res: AxiosResponse<Action[]>) => {
setHistory(res.data);
})
.catch((err: AxiosError) => {
if (err.response && err.response.status == 401) {
removeToken();
navigate(routes.login);
}
});
}, []);
return (
<Container maxWidth="xl">
<Grid container>
<Grid item xs={12} md={12}>
{history.length > 0 && (
<Card sx={{ marginTop: '10px' }}>
<Divider />
<div>
<div
style={{
height: '40px',
marginBottom: '10px',
display: 'flex',
alignItems: 'center'
}}
>
<div
style={{
flex: 1,
marginTop: '15px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
>
<Typography
variant="body1"
color="dimgrey"
fontWeight="bold"
fontSize="1rem"
gutterBottom
noWrap
>
<FormattedMessage id="user" defaultMessage="User" />
</Typography>
</div>
<div
style={{
flex: 1,
marginTop: '15px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
>
<Typography
variant="body1"
color="dimgrey"
fontWeight="bold"
fontSize="1rem"
gutterBottom
noWrap
>
<FormattedMessage id="date" defaultMessage="Date" />
</Typography>
</div>
<div
style={{
flex: 1,
marginTop: '15px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
>
<Typography
variant="body1"
color="dimgrey"
fontWeight="bold"
fontSize="1rem"
gutterBottom
noWrap
>
<FormattedMessage id="time" defaultMessage="Time" />
</Typography>
</div>
{/*<div*/}
{/* style={{*/}
{/* flex: 1,*/}
{/* marginTop: '15px',*/}
{/* display: 'flex',*/}
{/* alignItems: 'center',*/}
{/* justifyContent: 'center'*/}
{/* }}*/}
{/*>*/}
{/* <Typography*/}
{/* variant="body1"*/}
{/* color="dimgrey"*/}
{/* fontWeight="bold"*/}
{/* fontSize="1rem"*/}
{/* gutterBottom*/}
{/* noWrap*/}
{/* >*/}
{/* <FormattedMessage id="seen" defaultMessage="Seen" />*/}
{/* </Typography>*/}
{/*</div>*/}
</div>
<Divider />
<div style={{ maxHeight: '400px', overflowY: 'auto' }}>
{history.map((action, index) => (
<>
<Divider />
<div
key={index}
style={{
height: '40px',
marginBottom: '10px',
display: 'flex',
alignItems: 'center'
}}
>
<div
style={{
flex: 1,
marginTop: '15px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
>
<Typography
variant="body1"
fontWeight="bold"
color="text.primary"
gutterBottom
noWrap
>
{action.user}
</Typography>
</div>
<div
style={{
flex: 1,
marginTop: '15px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
>
<Typography
variant="body1"
fontWeight="bold"
color="text.primary"
gutterBottom
noWrap
>
{action.date}
</Typography>
</div>
<div
style={{
flex: 1,
marginTop: '15px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}
>
<Typography
variant="body1"
fontWeight="bold"
color="text.primary"
gutterBottom
noWrap
>
{action.time}
</Typography>
</div>
</div>
</>
))}
</div>
</div>
</Card>
)}
{!props.errorLoadingS3Data && history.length == 0 && (
<Alert
severity="error"
sx={{
display: 'flex',
alignItems: 'center',
marginTop: '20px'
}}
>
<FormattedMessage
id="nohistory"
defaultMessage="There is no history of actions"
/>
<IconButton
color="inherit"
size="small"
sx={{ marginLeft: '4px' }}
></IconButton>
</Alert>
)}
</Grid>
</Grid>
<Grid item xs={12} md={12} style={{ marginBottom: '20px' }}>
{props.errorLoadingS3Data && (
<Alert
severity="error"
sx={{
display: 'flex',
alignItems: 'center',
marginTop: '20px'
}}
>
<FormattedMessage
id="cannotloadloggingdata"
defaultMessage="Cannot load logging data"
/>
<IconButton
color="inherit"
size="small"
sx={{ marginLeft: '4px' }}
></IconButton>
</Alert>
)}
</Grid>
</Container>
);
}
export default HistoryOfActions;

View File

@ -23,6 +23,7 @@ import routes from '../../../Resources/routes.json';
import Information from '../Information/Information';
import BatteryView from '../BatteryView/BatteryView';
import { UserType } from '../../../interfaces/UserTypes';
import HistoryOfActions from '../History/History';
interface singleInstallationProps {
current_installation?: I_Installation;
@ -342,6 +343,18 @@ function Installation(props: singleInstallationProps) {
}
/>
)}
{currentUser.userType == UserType.admin && (
<Route
path={routes.history}
element={
<HistoryOfActions
errorLoadingS3Data={errorLoadingS3Data}
id={props.current_installation.id}
></HistoryOfActions>
}
/>
)}
{currentUser.userType == UserType.admin && (
<Route
path={routes.manage}

View File

@ -26,7 +26,8 @@ function InstallationTabs() {
'batteryview',
'log',
'information',
'configuration'
'configuration',
'history'
];
const [currentTab, setCurrentTab] = useState<string>(undefined);
@ -137,6 +138,15 @@ function InstallationTabs() {
defaultMessage="Configuration"
/>
)
},
{
value: 'history',
label: (
<FormattedMessage
id="history"
defaultMessage="History Of Actions"
/>
)
}
]
: currentUser.userType == UserType.partner
@ -248,6 +258,15 @@ function InstallationTabs() {
defaultMessage="Configuration"
/>
)
},
{
value: 'history',
label: (
<FormattedMessage
id="history"
defaultMessage="History Of Actions"
/>
)
}
]
: currentUser.userType == UserType.partner

View File

@ -119,8 +119,8 @@ function Overview(props: OverviewProps) {
chartOverview: overviewInterface;
}> = transformInputToDailyData(
props.s3Credentials,
UnixTime.fromTicks(startX),
UnixTime.fromTicks(endX)
UnixTime.fromTicks(startX).earlier(TimeSpan.fromHours(2)),
UnixTime.fromTicks(endX).earlier(TimeSpan.fromHours(2))
);
let isComponentMounted = true;

View File

@ -58,6 +58,28 @@ function Installation(props: singleInstallationProps) {
const s3Credentials = { s3Bucket, ...S3data };
const fetchDataOnlyOneTime = async () => {
var timeperiodToSearch = 70;
for (var i = timeperiodToSearch; i > 0; i -= 2) {
const now = UnixTime.now().earlier(TimeSpan.fromSeconds(i));
const res = await fetchData(now, s3Credentials);
if (res != FetchResult.notAvailable && res != FetchResult.tryLater) {
setConnected(true);
setFailedToCommunicateWithInstallation(0);
setValues(
extractValues({
time: now,
value: res
})
);
return now;
}
}
};
const fetchDataPeriodically = async () => {
const now = UnixTime.now().earlier(TimeSpan.fromSeconds(20));
@ -76,7 +98,7 @@ function Installation(props: singleInstallationProps) {
return true;
} else {
setFailedToCommunicateWithInstallation((prevCount) => {
if (prevCount + 1 >= 3) {
if (prevCount + 1 >= 20) {
setConnected(false);
}
return prevCount + 1;
@ -87,19 +109,6 @@ function Installation(props: singleInstallationProps) {
}
};
const fetchDataOnlyOneTime = async () => {
let success = false;
const max_retransmissions = 3;
for (let i = 0; i < max_retransmissions; i++) {
success = await fetchDataPeriodically();
await new Promise((resolve) => setTimeout(resolve, 1000));
if (success) {
break;
}
}
};
useEffect(() => {
let path = location.split('/');
@ -118,7 +127,7 @@ function Installation(props: singleInstallationProps) {
currentTab == 'live' ||
(location.includes('batteryview') && !location.includes('mainstats'))
) {
fetchDataPeriodically();
fetchDataOnlyOneTime();
interval = setInterval(fetchDataPeriodically, 2000);
}
if (currentTab == 'configuration' || location.includes('mainstats')) {

View File

@ -222,6 +222,7 @@ function Topology(props: TopologyProps) {
}}
bottomBox={{
title: 'AC Loads',
data: props.values.islandBusToLoadOnIslandBusConnection,
connected:
props.values.loadOnIslandBusBox[0].value.toString() !=

View File

@ -1,3 +1,5 @@
import { ConfigurationValues } from '../content/dashboards/Log/graph.util';
export interface I_S3Credentials {
s3Region: string;
s3Provider: string;
@ -16,3 +18,10 @@ export interface ErrorMessage {
deviceCreatedTheMessage: string;
seen: boolean;
}
export interface Action {
configuration: ConfigurationValues;
date: string;
time: string;
user: string;
}