Skip to content

Commit 3765160

Browse files
Merge pull request #51 from ECM3440/feat-rendering-actuator-values
feat: rendering actuator values
2 parents 5f10826 + 637fc65 commit 3765160

File tree

7 files changed

+177
-160
lines changed

7 files changed

+177
-160
lines changed

.github/workflows/azure-kubernetes-service.yml

-122
This file was deleted.

.github/workflows/pull_request.yml

+18-10
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,14 @@ on:
55
branches:
66
- "main"
77

8+
env:
9+
AZURE_CONTAINER_REGISTRY: ${{ secrets.AZURE_CONTAINER_REGISTRY }}
10+
CONTAINER_NAME: "sensor-dashboard"
11+
RESOURCE_GROUP: ${{ secrets.RESOURCE_GROUP }}
12+
CLUSTER_NAME: ${{ secrets.CLUSTER_NAME }}
13+
IMAGE_PULL_SECRET_NAME: ${{ secrets.IMAGE_PULL_SECRET_NAME }}
14+
DEPLOYMENT_MANIFEST_PATH: "deployment.yml"
15+
816
jobs:
917
run-linters:
1018
name: Run linters
@@ -63,25 +71,25 @@ jobs:
6371
tag="SNAPSHOT-PR-${{ github.event.pull_request.number }}-${sha:0:8}"
6472
echo "##[set-output name=GIT_TAG;]$(echo ${tag})"
6573
66-
- name: Login to Docker Hub
67-
uses: azure/docker-login@v1
74+
# Logs in with your Azure credentials
75+
- name: Azure login
76+
uses: azure/login@v1.4.3
6877
with:
69-
login-server: ${{ secrets.REGISTRY_LOGIN_SERVER }}
70-
username: ${{ secrets.REGISTRY_USERNAME }}
71-
password: ${{ secrets.REGISTRY_PASSWORD }}
78+
creds: ${{ secrets.AZURE_CREDENTIALS }}
7279

7380
- name: Generate image repository path
7481
id: image_repository_op
7582
run: |
7683
echo IMAGE_REPOSITORY=$(echo ${{ secrets.REGISTRY_LOGIN_SERVER }}/${{ github.repository }} | tr '[:upper:]' '[:lower:]') >> $GITHUB_ENV
7784
78-
- name: Build and push image
85+
- name: Set environment variables
7986
run: |
80-
docker build . -t ${{ env.IMAGE_REPOSITORY }}:${{ steps.generate_tag.outputs.GIT_TAG }} \
81-
--label org.opencontainers.image.source=${{ github.event.repository.clone_url }} \
82-
--label org.opencontainers.image.revision=${{ github.sha }}
87+
touch .env && echo "REACT_APP_EVENTPROCESSOR_URL=${{ secrets.EVENTPROCESSOR_URL }}" >> .env
8388
84-
docker push ${{ env.IMAGE_REPOSITORY }}:${{ steps.generate_tag.outputs.GIT_TAG }}
89+
# Builds and pushes an image up to your Azure Container Registry
90+
- name: Build and push image to ACR
91+
run: |
92+
az acr build --image ${{ env.IMAGE_REPOSITORY }}:${{ steps.generate_tag.outputs.GIT_TAG }} --registry ${{ env.AZURE_CONTAINER_REGISTRY }} -g ${{ env.RESOURCE_GROUP }} .
8593
8694
- name: Comment on PR
8795
uses: mshick/add-pr-comment@v1

.github/workflows/push.yml

+10-10
Original file line numberDiff line numberDiff line change
@@ -73,26 +73,26 @@ jobs:
7373
DEFAULT_BUMP: patch
7474
DRY_RUN: true
7575

76-
- name: Login to Docker Hub
77-
uses: azure/docker-login@v1
76+
# Logs in with your Azure credentials
77+
- name: Azure login
78+
uses: azure/login@v1.4.3
7879
with:
79-
login-server: ${{ secrets.REGISTRY_LOGIN_SERVER }}
80-
username: ${{ secrets.REGISTRY_USERNAME }}
81-
password: ${{ secrets.REGISTRY_PASSWORD }}
80+
creds: ${{ secrets.AZURE_CREDENTIALS }}
8281

8382
- name: Generate image repository path
8483
id: image_repository_op
8584
run: |
8685
echo IMAGE_REPOSITORY=$(echo ${{ secrets.REGISTRY_LOGIN_SERVER }}/${{ github.repository }} | tr '[:upper:]' '[:lower:]') >> $GITHUB_ENV
8786
echo "image_repository=$IMAGE_REPOSITORY" >> $GITHUB_OUTPUT
8887
89-
- name: Build and push image
88+
- name: Set environment variables
9089
run: |
91-
docker build . -t ${{ env.IMAGE_REPOSITORY }}:${{ steps.generate_tag.outputs.new_tag }} \
92-
--label org.opencontainers.image.source=${{ github.event.repository.clone_url }} \
93-
--label org.opencontainers.image.revision=${{ github.sha }}
90+
touch .env && echo "REACT_APP_EVENTPROCESSOR_URL=${{ secrets.EVENTPROCESSOR_URL }}" >> .env
9491
95-
docker push ${{ env.IMAGE_REPOSITORY }}:${{ steps.generate_tag.outputs.new_tag }}
92+
# Builds and pushes an image up to your Azure Container Registry
93+
- name: Build and push image to ACR
94+
run: |
95+
az acr build --image ${{ env.IMAGE_REPOSITORY }}:${{ steps.generate_tag.outputs.new_tag }} --registry ${{ env.AZURE_CONTAINER_REGISTRY }} -g ${{ env.RESOURCE_GROUP }} .
9696
9797
- name: Comment on PR
9898
uses: mshick/add-pr-comment@v1

package-lock.json

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

src/App.js

+78-10
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@ import React, { useState, useEffect } from "react";
33
import { Chart } from "react-google-charts";
44
import Navbar from "./components/Navbar";
55
import { Typography } from '@mui/material';
6+
import Card from '@mui/material/Card';
7+
import CardContent from '@mui/material/CardContent';
8+
import Box from '@mui/material/Box';
9+
import Container from '@mui/material/Container';
10+
import Grid from '@mui/material/Unstable_Grid2';
611

712
const SensorChart = ({ data }) => {
813
const options = {
@@ -29,30 +34,51 @@ const NoDataMessage = () => {
2934
)
3035
}
3136

37+
const ActuatorCard = ({ title, value, testId }) => {
38+
return (
39+
<Card style={{ height: "180px" }} data-testId={testId}>
40+
<React.Fragment>
41+
<CardContent>
42+
<Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
43+
{title}:
44+
</Typography>
45+
<Typography sx={{ fontSize: 48 }} color="text.primary" gutterBottom data-testid={testId + "Value"}>
46+
{value}
47+
</Typography>
48+
</CardContent>
49+
</React.Fragment>
50+
</Card>
51+
)
52+
}
53+
3254
function App() {
33-
const [data, setData] = useState([])
55+
const [sensorData, setSensorData] = useState([])
56+
const [soilActuatorData, setSoilActuatorData] = useState(0)
57+
const [tempActuatorData, setTempActuatorData] = useState(0)
58+
const [humidActuatorData, setHumidActuatorData] = useState(0)
3459

3560
useEffect(() => {
3661
subscribe()
3762
}, [])
3863

39-
4064
const subscribe = (function () {
4165
var executed = false;
4266
return function () {
4367
if (!executed) {
4468
executed = true;
4569
getSensorReadings()
70+
getActuatorReadings()
4671
setInterval(() => {
4772
getSensorReadings()
73+
getActuatorReadings()
4874
}, 10000);
4975
}
5076
};
5177
})();
5278

53-
const fetchSensorReadings = async () => {
79+
const fetchReadings = async (path) => {
5480
try {
55-
const response = await fetch(`${process.env.REACT_APP_EVENTPROCESSOR_URL}`, {
81+
const response = await fetch(`${process.env.REACT_APP_EVENTPROCESSOR_URL}/${path}`, {
5682
method: "GET",
5783
headers: {
5884
accept: "application/json",
@@ -70,15 +96,42 @@ function App() {
7096
}
7197

7298
const getSensorReadings = async () => {
73-
const result = await fetchSensorReadings()
99+
const result = await fetchReadings("sensors")
100+
101+
if (result !== undefined && result.length > 0) {
102+
const formattedData = formatSensorData(result)
103+
setSensorData(formattedData)
104+
}
105+
}
106+
107+
const getActuatorReadings = async () => {
108+
const result = await fetchReadings("actuators")
74109

75-
if (result.length > 0) {
76-
const formattedData = formatToChartData(result)
77-
setData(formattedData)
110+
if (result !== undefined && result.length > 0) {
111+
setActuatorData(result)
78112
}
79113
}
80114

81-
const formatToChartData = (result) => {
115+
const setActuatorData = (result) => {
116+
result.forEach(reading => {
117+
switch (reading.sensor_type) {
118+
case "Soil Moisture":
119+
setSoilActuatorData(soilActuatorData + 1)
120+
break;
121+
case "Temperature":
122+
setTempActuatorData(tempActuatorData + 1)
123+
break;
124+
case "Humidity":
125+
setHumidActuatorData(humidActuatorData + 1)
126+
break;
127+
default:
128+
console.log("sensor type not recognised")
129+
break;
130+
}
131+
})
132+
}
133+
134+
const formatSensorData = (result) => {
82135
let data = []
83136
let lines = ["Time"]
84137
let rows = []
@@ -111,7 +164,22 @@ function App() {
111164
return (
112165
<div className="App">
113166
<Navbar />
114-
{data.length === 0 ? <NoDataMessage /> : <SensorChart data={data} />}
167+
<Container fixed style={{ paddingTop: "20px" }}>
168+
<Box sx={{ flexGrow: 1, minWidth: 275 }} style={{ paddingBottom: "30px" }}>
169+
<Grid container spacing={2}>
170+
<Grid xs={4}>
171+
<ActuatorCard title="No. of Soil Mositure Actuator Triggers from a Mositure <= 200" value={soilActuatorData} testId="soilCard" />
172+
</Grid>
173+
<Grid xs={4}>
174+
<ActuatorCard title="No. of Temperature Actuator Triggers from a Temperature <= 5°C" value={tempActuatorData} testId="tempCard" />
175+
</Grid>
176+
<Grid xs={4}>
177+
<ActuatorCard title="No. of Humidity Actuator Triggers from a Humidity <= 20%" value={humidActuatorData} testId="humidCard" />
178+
</Grid>
179+
</Grid>
180+
</Box>
181+
{sensorData.length === 0 ? <NoDataMessage /> : <SensorChart data={sensorData} />}
182+
</Container>
115183
</div>
116184
);
117185
}

0 commit comments

Comments
 (0)