uodate dashboard

Signed-off-by: cwen0 <[email protected]>

Author: cwen0

server/nework.go

@@ -11,7 +11,7 @@ import (
 
 type PingD struct {
 	Time  int64   `json:"time"`
-	Delay float64 `json:"delay"`
+	Latency float64 `json:"latency"`
 }
 
 func (p *PingD) Key() interface{} {
@@ -37,7 +37,7 @@ func (s *Server) startPing() {
 			pinger.Count = 1
 			pinger.Run() // blocks until finished
 			stats := pinger.Statistics()
-			s.push(&PingD{Time: time.Now().UnixNano() / 1e6, Delay: float64(stats.AvgRtt.Microseconds()) / 1000})
+			s.push(&PingD{Time: time.Now().UnixNano() / 1e6, Latency: float64(stats.AvgRtt.Microseconds()) / 1000})
 		}
 	}
 }

web/src/components/Banner.tsx

@@ -67,12 +67,12 @@ const BannerStyles = styled.div`
   align-content: center;
   height: 75px;
   width: 100%;
-  background: (190, 190, 190);
+  background: (187, 255, 255);
   background: linear-gradient(
     90deg,
-    rgba(164, 167, 66, 1) 0%,
-    rgba(183, 184, 85, 1) 50%,
-    rgba(199, 100, 100, 1) 100%
+    rgba(174, 248, 238, 1) 0%,
+    rgba(174, 238, 255, 1) 50%,
+    rgba(174, 238, 255, 1) 100%
   );
 `;
 
@@ -89,7 +89,7 @@ const BannerTitle = styled.div`
   margin-left: 20px;
   h1 {
     font-size: 14px;
-    color: white;
+    color: (106, 90, 205);
     font-weight: 400;
     margin: 0;
     padding: 0;

web/src/components/TrafficChart.tsx

@@ -41,10 +41,10 @@ const TrafficChart: React.FC<IProps> = props => {
           tickFormatter = {(unixTime) => moment(unixTime).format('HH:mm:ss Do')}
           type = 'number'
         />
-        <YAxis label={{ value: 'Delay', position: 'insideLeft', angle: -90 }} unit={"ms"}/>
+        <YAxis label={{ value: 'Latency', position: 'insideLeft', angle: -90 }} unit={"ms"}/>
         <Tooltip labelFormatter={t => new Date(t).toLocaleString()} />
         <Legend />
-        <Line type="monotone" dataKey="delay" stroke="#8884d8" />
+        <Line type="monotone" dataKey="latency" stroke="#8884d8" />
       </ComposedChart>
     </ResponsiveContainer>
   );

web/src/data.tsx

@@ -1,6 +1,6 @@
 export interface ITrafficData {
   time: number;
-  delay: number;
+  latency: number;
 }
 
 export interface IData {
@@ -9,10 +9,10 @@ export interface IData {
 
 export const data: IData = {
  traffic: [
-  {time: 1503617297689, delay: 15},
-  {time: 1503616962277, delay: 152},
-  {time: 1503616882654, delay: 112},
-  {time: 1503613184594, delay: 201},
-  {time: 1503611308914, delay: 141},
+  {time: 1503617297689, latency: 15},
+  {time: 1503616962277, latency: 152},
+  {time: 1503616882654, latency: 112},
+  {time: 1503613184594, latency: 201},
+  {time: 1503611308914, latency: 141},
     ]
 }

web/src/utils/useInterval.ts

@@ -6,7 +6,7 @@ import { useEffect, useRef } from 'react'
 const noop = () => {} // keep typescript happy
 export const useInterval = (
   callback: () => void,
-  delay: number | null,
+  latency: number | null,
   immediate?: boolean // called when mounted if true
 ) => {
   const savedCallback = useRef(noop)
@@ -24,10 +24,10 @@ export const useInterval = (
 
   // Set up the interval.
   useEffect(() => {
-    if (delay === null) return undefined
+    if (latency === null) return undefined
 
     const tick = () => savedCallback.current()
-    const id = setInterval(tick, delay)
+    const id = setInterval(tick, latency)
     return () => clearInterval(id)
-  }, [delay])
+  }, [latency])
 }