Merge branch 'lost_commits' into dev

agent/run.sh

@@ -0,0 +1 @@
+obuspa -p -v 4 -r ./oktopus-mqtt-obuspa.txt -i lo

backend/services/controller/internal/api/device.go

@@ -2,11 +2,12 @@ package api
 
 import (
 	"encoding/json"
-	"go.mongodb.org/mongo-driver/bson"
 	"log"
 	"net/http"
 	"strconv"
 
+	"go.mongodb.org/mongo-driver/bson"
+
 	"github.com/gorilla/mux"
 	"github.com/leandrofars/oktopus/internal/db"
 	usp_msg "github.com/leandrofars/oktopus/internal/usp_message"
@@ -37,11 +38,15 @@ func (a *Api) retrieveDevices(w http.ResponseWriter, r *http.Request) {
 	const PAGE_SIZE_DEFAULT = 20
 
 	// Get specific device
-	id := mux.Vars(r)["id"]
+	id := r.URL.Query().Get("id")
 	if id != "" {
 		device, err := a.Db.RetrieveDevice(id)
 		if err != nil {
-			log.Println(err)
+			if err == mongo.ErrNoDocuments {
+				json.NewEncoder(w).Encode("Device id: " + id + " not found")
+				return
+			}
+			json.NewEncoder(w).Encode(err)
 			w.WriteHeader(http.StatusInternalServerError)
 			return
 		}
@@ -93,6 +98,7 @@ func (a *Api) retrieveDevices(w http.ResponseWriter, r *http.Request) {
 	if err != nil {
 		w.WriteHeader(http.StatusInternalServerError)
 		json.NewEncoder(w).Encode("Unable to get devices count from database")
+		return
 	}
 
 	skip := page_number * (page_size - 1)
@@ -117,12 +123,15 @@ func (a *Api) retrieveDevices(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	err = json.NewEncoder(w).Encode(devices)
+	err = json.NewEncoder(w).Encode(map[string]interface{}{
+		"pages":   total / page_size,
+		"page":    page_number,
+		"size":    page_size,
+		"devices": devices,
+	})
 	if err != nil {
 		log.Println(err)
 	}
-
-	return
 }
 
 func (a *Api) deviceCreateMsg(w http.ResponseWriter, r *http.Request) {

frontend/src/pages/devices.js

@@ -1,6 +1,17 @@
 import React, { useState, useEffect } from 'react';
 import Head from 'next/head';
-import { Box, Container, Unstable_Grid2 as Grid } from '@mui/material';
+import { 
+  Box, 
+  Container, 
+  Unstable_Grid2 as Grid,
+  Card, 
+  OutlinedInput,
+  InputAdornment,
+  SvgIcon,
+  Stack,
+  Pagination
+} from '@mui/material';
+import MagnifyingGlassIcon from '@heroicons/react/24/solid/MagnifyingGlassIcon';
 import { Layout as DashboardLayout } from 'src/layouts/dashboard/layout';
 import { OverviewLatestOrders } from 'src/sections/overview/overview-latest-orders';
 import { useAuth } from 'src/hooks/use-auth';
@@ -10,6 +21,10 @@ const Page = () => {
   const router = useRouter()
   const auth = useAuth();
   const [devices, setDevices] = useState([]);
+  const [deviceFound, setDeviceFound] = useState(false)
+  const [pages, setPages] = useState(0);
+  const [page, setPage] = useState(null);
+
 
   useEffect(() => {
 
@@ -36,13 +51,70 @@ const Page = () => {
         return response.json()
       })
       .then(json => {
-        return setDevices(json)
+        setPages(json.pages + 1)
+        setPage(json.page)
+        setDevices(json.devices)
+        return setDeviceFound(true)
       })
       .catch(error => {
         return console.error('Error:', error)
       });
   }, [auth.user]);
 
+  const handleChangePage = (e) => {
+    console.log("new page: ", e.target.value)
+    //TODO: Handle page change
+  }
+
+  const fetchDevicePerId = async (id) => {
+
+    var myHeaders = new Headers();
+    myHeaders.append("Content-Type", "application/json");
+    myHeaders.append("Authorization", auth.user.token);
+
+    var requestOptions = {
+      method: 'GET',
+      headers: myHeaders,
+      redirect: 'follow'
+    }
+
+    if (id == ""){
+      fetch(process.env.NEXT_PUBLIC_REST_ENPOINT+'/device', requestOptions)
+      .then(response => {
+        if (response.status === 401)
+          router.push("/auth/login")
+        return response.json()
+      })
+      .then(json => {
+        setPages(json.pages + 1)
+        setPage(json.page)
+        setDevices(json.devices)
+        return setDeviceFound(true)
+      })
+      .catch(error => {
+        return console.error('Error:', error)
+      });
+    }
+
+    let response = await fetch(process.env.NEXT_PUBLIC_REST_ENPOINT+'/device?id='+id, requestOptions)
+    if (response.status === 401)
+      router.push("/auth/login")
+    let json = await response.json()
+    if (json.device != undefined){
+      setDevices({"devices":[
+        json.device
+      ]})
+      setPages(1)
+      setPage(1)
+    }else{
+      setDeviceFound(false)
+      setDevices([])
+      setPages(1)
+      setPage(1)
+    }
+
+  }
+
   return (
     <>
       <Head>
@@ -50,6 +122,7 @@ const Page = () => {
           Oktopus | TR-369
         </title>
       </Head>
+      
       <Box
         component="main"
         sx={{
@@ -58,15 +131,66 @@ const Page = () => {
         }}
       >
         <Container maxWidth="xl" >
+        <Stack spacing={3}>
           <Grid 
           container
-            spacing={3}
           >
+          <Grid xs={8}>
           </Grid>
+          <OutlinedInput
+            xs={4}
+            defaultValue=""
+            fullWidth
+            placeholder="Search Device"
+            onKeyDownCapture={(e) => {
+              if (e.key === 'Enter') {
+                console.log("Fetch devices per id: ", e.target.value)
+                fetchDevicePerId(e.target.value)
+              }
+            }}
+            startAdornment={(
+              <InputAdornment position="start">
+                <SvgIcon
+                  color="action"
+                  fontSize="small"
+                >
+                  <MagnifyingGlassIcon />
+                </SvgIcon>
+              </InputAdornment>
+            )}
+            sx={{ maxWidth: 500 }}
+          />
+        </Grid>
+        {deviceFound ?
           <OverviewLatestOrders
             orders={devices}
             sx={{ height: '100%' }}
           />
+        :
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center'
+          }}
+        >
+        <p>Device Not Found</p>
+        </Box>
+        }
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center'
+          }}
+        >
+          {pages ? <Pagination
+            count={pages}
+            size="small"
+            page={page}
+            onChange={handleChangePage}
+          />: null} 
+          {/* //TODO: show loading */}
+        </Box>
+        </Stack>
         </Container>
       </Box>
     </>