Task 1 and Task 2 of GSOC'21 WebUI challenge completed #14

MANSHALAMBA · 2021-03-21T08:45:49Z

Fancy wifi List : currently used wifi in red, sorting and security chips features

Camera Load visualization :
Camera Load Widget in System information tab :

rroohhh

Looks great so far, some notes:

We are using yarn, so please remove the package-lock.json, also please remove any files not needed, like the yarn-error.log
If one selects more than the available rows for the number of displayed rows, the table adds unnecessary padding to the bottom.
The camera load should probably go into the System Information tab
Please graph the historic change of the load and not just the current value. Sorry if the description was unclear there.
What is the reason for omitting the BSSID?

rroohhh · 2021-03-21T15:06:46Z

frontend/index.html

+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />


This site should work without internet access, so this should be vendored or some other solution should be found.
What are these used for?

Looks great so far, some notes:

1. We are using yarn, so please remove the `package-lock.json`, also please remove any files not needed, like the `yarn-error.log`

Required refinements done for this
2. If one selects more than the available rows for the number of displayed rows, the table adds unnecessary padding to the bottom.
Extra padding removed from material table
3. The camera load should probably go into the System Information tab
Done
4. Please graph the historic change of the load and not just the current value. Sorry if the description was unclear there.
Got your point replaced bar chart with a multi line chart.
5. What is the reason for omitting the BSSID?
Not getting that as output , I did'nt ommit intentionally.

rroohhh · 2021-03-21T15:07:28Z

package.json

@@ -29,7 +33,7 @@
    "morgan": "~1.9.1",
    "parcel": "^1.12.4",
    "prettier": "^1.19.1",
-    "react": "^16.12.0",
+    "react": "^16.8.0 || ^17.0.0",


What is the reason for this version constraint?

Taken care in upcoming commits

rroohhh · 2021-03-21T15:08:31Z

frontend/routes/Wifi.jsx

+            data={[...this.state.wifi_networks]}
+            options={{
+              headerStyle: {
+                backgroundColor: '#FA8756',


this should probably follow the theme color?

Taken Care in upcoming commits

frontend/routes/Wifi.jsx

rroohhh · 2021-03-21T15:09:58Z

frontend/routes/Wifi.jsx

+                },
+              },
+
+              { title: 'MODE', field: 'MODE', sorting: false },


Why not allow sorting after mode, channel and rate?

Sorting functionality added for these also

rroohhh · 2021-03-21T15:10:54Z

frontend/routes/Wifi.jsx

-    </table>
-  );
-}
+// function Table(props) {


Please remove unnecessary comments.

Taken care in upcoming commits

frontend/components/CameraLoadWidget.jsx

rroohhh · 2021-03-21T15:19:43Z

frontend/routes/Wifi.jsx

@@ -13,41 +16,95 @@ export class Component extends React.Component {
      last_refresh: '',
    };
    setInterval(() => {


It would be a good idea to cleanup the setInterval for this one aswell.

Taken care in upcoming commits

rroohhh · 2021-03-21T15:20:53Z

frontend/routes/Wifi.jsx

+                sorting: false,
+                render: rowData => {
+                  return rowData['SECURITY'].split(' ').map(tag => {
+                    return <Chip key={tag} label={tag} variant="outlined" />;


The Chips could use a bit of spacing between them.

Taken car in upcoming commits

rroohhh · 2021-03-21T15:24:10Z

frontend/util/Bar.js

+  );
+};
+
+const Bar = props => {


Why not export default Bar ...?

Bar.js removed , using line chart for showing the historic change of camera load

rroohhh · 2021-03-21T15:25:55Z

Also you might want to add the email used for the commits to your github profile, so github properly recognizes the commits as written by you.

rroohhh

Some notes:

The sorting of the wifi network table only updates after the data is updated, not immediately
The order of the table column is not saved and resets after the data is updated
The column one selected for sorting the table is lost, when the data is updated
The load graph looses its data after closing it
Its not possible to pan or zoom the graph

rroohhh · 2021-03-26T23:22:30Z

frontend/components/CameraLoadWidget.jsx

@@ -2,33 +2,50 @@ import React, { useEffect, useState } from 'react';

 import { exec } from '../util/exec';

-import Bar from '../util/Bar';
+import Chart from 'react-google-charts';


This package seems to load a script from the internet, unfortunately this doesn't really work for this application, as this site has to work without internet access.

frontend/App.jsx

rroohhh · 2021-03-26T23:24:01Z

frontend/components/CameraLoadWidget.jsx

-  let [load, setLoad] = useState([0, 0, 0]);
+  const [load, setLoad] = useState([
+    ['Time Lapsed(In seconds)', '1 minute avg', '5 minute avg', '15 minute avg'],
+    [0, 0, 0, 0],


Adding these makes all of the graphs start from zero, even if the load never was zero.

rroohhh · 2021-03-26T23:26:19Z

frontend/components/CameraLoadWidget.jsx

+        setLoad(oldLoad => {
+          let loadArr = [
+            [
+              oldLoad[oldLoad.length - 1][0] + 1,


This should probably use the actual time as included from the uptime output, if for some reason some of the requests get stalled and are then completed all at once.

frontend/routes/SystemInformation.jsx

rroohhh · 2021-03-26T23:30:40Z

frontend/routes/SystemInformation.jsx

  return (
    <div>
+      <Modal


Is there a specific reason for making this a modal popup?

If not embedding the chart directly on the system configuration page seems better.

rroohhh · 2021-03-26T23:37:20Z

frontend/components/CameraLoadWidget.jsx

  useEffect(() => {
-    setInterval(() => {
+    let intervalId = setInterval(function a() {
      exec('uptime').then(result => {
        let splitres = String(result)
          .trim()


Is this first trim necessary?

frontend/components/CameraLoadWidget.jsx

MANSHALAMBA · 2021-04-10T07:38:36Z

Some notes:

* The sorting of the wifi network table only updates after the data is updated, not immediately

* The order of the table column is not saved and resets after the data is updated

* The column one selected for sorting the table is lost, when the data is updated

* The load graph looses its data after closing it

* Its not possible to pan or zoom the graph

Replaced material-table library with inbuilt table in material UI , sorting and ordering issues resolved

Lambamansha added 4 commits March 19, 2021 14:10

wifi configuration component compeleted

b3db8fa

camera load widget added

52ce0ad

code formatted

81ab5aa

minor change

fb16853

rroohhh requested changes Mar 21, 2021

View reviewed changes

refinements

9534906

rroohhh requested changes Mar 27, 2021

View reviewed changes

datatable changed

fbb7301

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Task 1 and Task 2 of GSOC'21 WebUI challenge completed #14

Task 1 and Task 2 of GSOC'21 WebUI challenge completed #14

MANSHALAMBA commented Mar 21, 2021 •

edited

Loading

rroohhh left a comment •

edited

Loading

rroohhh Mar 21, 2021

MANSHALAMBA Mar 25, 2021

rroohhh Mar 21, 2021

MANSHALAMBA Mar 25, 2021 •

edited

Loading

rroohhh Mar 21, 2021

MANSHALAMBA Mar 25, 2021 •

edited

Loading

rroohhh Mar 21, 2021

MANSHALAMBA Mar 25, 2021

rroohhh Mar 21, 2021

MANSHALAMBA Mar 25, 2021 •

edited

Loading

rroohhh Mar 21, 2021

MANSHALAMBA Mar 25, 2021 •

edited

Loading

rroohhh Mar 21, 2021

MANSHALAMBA Mar 25, 2021 •

edited

Loading

rroohhh Mar 21, 2021

MANSHALAMBA Mar 25, 2021

rroohhh commented Mar 21, 2021

rroohhh left a comment

rroohhh Mar 26, 2021

rroohhh Mar 26, 2021

rroohhh Mar 26, 2021

rroohhh Mar 26, 2021

rroohhh Mar 26, 2021

MANSHALAMBA commented Apr 10, 2021

Task 1 and Task 2 of GSOC'21 WebUI challenge completed #14

Are you sure you want to change the base?

Task 1 and Task 2 of GSOC'21 WebUI challenge completed #14

Conversation

MANSHALAMBA commented Mar 21, 2021 • edited Loading

rroohhh left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MANSHALAMBA Mar 25, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MANSHALAMBA Mar 25, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MANSHALAMBA Mar 25, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MANSHALAMBA Mar 25, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MANSHALAMBA Mar 25, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rroohhh commented Mar 21, 2021

rroohhh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MANSHALAMBA commented Apr 10, 2021

MANSHALAMBA commented Mar 21, 2021 •

edited

Loading

rroohhh left a comment •

edited

Loading

MANSHALAMBA Mar 25, 2021 •

edited

Loading

MANSHALAMBA Mar 25, 2021 •

edited

Loading

MANSHALAMBA Mar 25, 2021 •

edited

Loading

MANSHALAMBA Mar 25, 2021 •

edited

Loading

MANSHALAMBA Mar 25, 2021 •

edited

Loading