Merge pull request #10 from ArweaveTeam/fix/code_style

partial fix of code style
ArweaveTeam · Nov 16, 2023 · 019c16c · 019c16c
2 parents 1600b43 + 8a00b2e
commit 019c16c
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 123 deletions.
diff --git a/main/background.ts b/main/background.ts
@@ -54,24 +54,27 @@ async function getMetrics(): Promise<Metrics> {
   const data = await res.text();
 
   const parsed: MinorParser[] = parsePrometheusTextFormat(data);
-  let data_unpackaged = 0;
-  let data_packaged = 0;
-  let storage_available = 0;
+  let dataUnpacked = 0;
+  let dataPacked = 0;
+  let storageAvailable = 0;
   const packing_item = parsed.find(
     (item: MinorParser) => item.name === "v2_index_data_size_by_packing",
   );
   if (packing_item) {
     packing_item.metrics.forEach((item) => {
       // unpacked storage modules are not involved in mining
       if (item.labels.packing == "unpacked") {
-        data_unpackaged += +item.value;
+        dataUnpacked += +item.value;
       } else {
-        data_packaged += +item.value;
+        dataPacked += +item.value;
+      }
+      const partitionSize = +item.labels.partition_size;
+      if (isFinite(partitionSize)) {
+        storageAvailable += partitionSize;
       }
-      storage_available += +item.labels.partition_size;
     });
   }
-  const hash_rate = metric_string_parse(
+  const hashRate = metric_string_parse(
     parsed.find((item: MinorParser) => item.name === "average_network_hash_rate"),
   );
   const earnings = metric_string_parse(
@@ -81,29 +84,29 @@ async function getMetrics(): Promise<Metrics> {
   const vdf_step_time_milliseconds_bucket = parsed.find(
     (item: MinorParser) => item.name === "vdf_step_time_milliseconds",
   );
-  let vdf_time_lower_bound: number | null = null;
+  let vdfTimeLowerBound: number | null = null;
   if (vdf_step_time_milliseconds_bucket) {
     const buckets = vdf_step_time_milliseconds_bucket.metrics[0].buckets;
     for (const k in buckets) {
       const value = buckets[k];
       if (value === "0") continue;
-      if (!vdf_time_lower_bound) {
-        vdf_time_lower_bound = +k;
+      if (!vdfTimeLowerBound) {
+        vdfTimeLowerBound = +k;
       }
     }
   }
-  const weave_size = metric_string_parse(
+  const weaveSize = metric_string_parse(
     parsed.find((item: MinorParser) => item.name === "weave_size"),
   );
   console.log("DEBUG: getMetrics complete");
   return {
-    data_unpackaged,
-    data_packaged,
-    storage_available,
-    weave_size,
-    hash_rate,
+    dataUnpacked,
+    dataPacked,
+    storageAvailable,
+    weaveSize,
+    hashRate,
     earnings,
-    vdf_time_lower_bound,
+    vdfTimeLowerBound,
   };
 }
 

diff --git a/renderer/components/Charts/Arrows.tsx b/renderer/components/Charts/Arrows.tsx
@@ -1,12 +1,13 @@
 import React from "react";
+import { fmtSize } from "../../util/minor";
 
 interface ArrowProps {
-  value: number;
-  unit: string;
+  value: number | null;
   color: string;
 }
 
-export function TopArrow({ value, unit, color }: ArrowProps) {
+export function TopArrow({ value, color }: ArrowProps) {
+  const { value: displayValue, unit } = fmtSize(value || 0);
   return (
     <div className="absolute -top-5 left-1/2 flex">
       <div className="w-[1px] h-5 bg-gray-500"></div>
@@ -20,13 +21,14 @@ export function TopArrow({ value, unit, color }: ArrowProps) {
       ></div>
 
       <div className="w-fit text-xs flex items-center gap-2 -mt-[20px] ml-[5px]">
-        <span>{value}</span> <span>{unit}</span>
+        <span>{displayValue}</span> <span>{unit}</span>
       </div>
     </div>
   );
 }
 
-export function BottomArrow({ value, unit, color }: ArrowProps) {
+export function BottomArrow({ value, color }: ArrowProps) {
+  const { value: displayValue, unit } = fmtSize(value || 0);
   return (
     <div className="absolute -bottom-7 left-1/2 flex">
       <div className="w-[1px] h-5 bg-gray-500 mt-5"></div>
@@ -40,7 +42,7 @@ export function BottomArrow({ value, unit, color }: ArrowProps) {
       ></div>
 
       <div className="w-fit text-xs flex items-center gap-2 mt-[30px] ml-[5px]">
-        <span>{value}</span> <span>{unit}</span>
+        <span>{displayValue}</span> <span>{unit}</span>
       </div>
     </div>
   );

diff --git a/renderer/components/Charts/DataRelated.tsx b/renderer/components/Charts/DataRelated.tsx
@@ -1,17 +1,17 @@
-import { DataSize } from "../../types/generic";
 import { BottomArrow, TopArrow } from "./Arrows";
 
 interface DataRelatedChartProps {
-  dataPackage: DataSize;
-  storageAvailable: DataSize;
-  totalWeaveSize: DataSize;
+  dataPacked: number | null;
+  storageAvailable: number | null;
+  weaveSize: number | null;
 }
 
 export default function DataRelatedChart({
-  dataPackage,
+  dataPacked,
   storageAvailable,
-  totalWeaveSize,
+  weaveSize,
 }: DataRelatedChartProps) {
+  // NOTE maybe this component should pick all stuff from storage directly
   return (
     <div className="w-96 h-20 flex items-center mt-20">
       <div
@@ -20,7 +20,7 @@ export default function DataRelatedChart({
           width: "2%",
         }}
       >
-        <TopArrow value={dataPackage.value} unit={dataPackage.unit} color="#7BF05E" />
+        <TopArrow value={dataPacked} color="#7BF05E" />
       </div>
 
       <div
@@ -29,11 +29,11 @@ export default function DataRelatedChart({
           width: "4%",
         }}
       >
-        <BottomArrow value={storageAvailable.value} unit={storageAvailable.unit} color="#1D2988" />
+        <BottomArrow value={storageAvailable} color="#1D2988" />
       </div>
 
       <div className="w-full bg-[#A7A7A7] hover:bg-[#989797] h-full cursor-pointer relative group">
-        <TopArrow value={totalWeaveSize.value} unit={totalWeaveSize.unit} color="#A7A7A7" />
+        <TopArrow value={weaveSize} color="#A7A7A7" />
       </div>
     </div>
   );

diff --git a/renderer/pages/dashboard.tsx b/renderer/pages/dashboard.tsx
@@ -3,10 +3,8 @@ import { useDispatch, useSelector } from "react-redux";
 import ScrollSpy from "react-ui-scrollspy";
 import DataRelatedChart from "../components/Charts/DataRelated";
 import { MainLayout } from "../layouts";
-import { setMinorState, selectMinorState } from "../store/minorSlice";
+import { setMetricsState, selectMinorState } from "../store/minorSlice";
 import { Metrics } from "../../types/metrics";
-import { DataSize } from "../types/generic";
-import { fmtSize } from "../util/minor";
 
 interface MenuItems {
   label: string;
@@ -18,29 +16,11 @@ interface SubMenuItems {
   target: string;
 }
 
-type MetricKeys = "totalWeaveSize" | "storageAvailable" | "dataPackage";
-
-type LocalMetricsState = Record<MetricKeys, DataSize>;
-
 export default function DashboardPage() {
   const [hasMounted, setHasMounted] = useState(false);
+  // NOTE maybe later we should rename this store
   const minorState = useSelector(selectMinorState);
   const dispatch = useDispatch();
-  const [dataRelated, setDataRelated] = useState<LocalMetricsState>({
-    // TODO loading state
-    dataPackage: {
-      value: 0,
-      unit: "tb",
-    },
-    storageAvailable: {
-      value: 0,
-      unit: "tb",
-    },
-    totalWeaveSize: {
-      value: 0,
-      unit: "tb",
-    },
-  });
 
   const [activeMenu, setActiveMenu] = React.useState<string>();
 
@@ -71,17 +51,11 @@ export default function DashboardPage() {
       window.ipc.requestMetrics().then((data: Metrics) => {
         console.log("requestMetrics", data);
         if (data) {
-          dispatch(setMinorState(data));
-
-          setDataRelated({
-            dataPackage: fmtSize(data.data_packaged),
-            storageAvailable: fmtSize(data.storage_available),
-            totalWeaveSize: fmtSize(data.weave_size),
-          });
+          dispatch(setMetricsState(data));
         }
       });
     }
-  }, [hasMounted, setHasMounted, dispatch, setDataRelated]);
+  }, [hasMounted, setHasMounted, dispatch]);
 
   const handleMenuClick = useCallback(
     (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
@@ -158,14 +132,14 @@ export default function DashboardPage() {
                 <div id="sub-section-1-1" className="bg-gray-100 p-4 rounded-lg h-64">
                   <h3 className="text-lg font-medium mb-2">Data Related</h3>
                   <DataRelatedChart
-                    dataPackage={dataRelated.dataPackage}
-                    storageAvailable={dataRelated.storageAvailable}
-                    totalWeaveSize={dataRelated.totalWeaveSize}
+                    dataPacked={minorState.dataPacked}
+                    storageAvailable={minorState.storageAvailable}
+                    weaveSize={minorState.weaveSize}
                   />
                 </div>
                 <div id="sub-section-1-2" className="bg-gray-100 p-4 rounded-lg h-64">
                   <h3 className="text-lg font-medium mb-2">Hash Rate</h3>
-                  <p className="text-gray-700">Hash rate: {minorState.hash_rate}</p>
+                  <p className="text-gray-700">Hash rate: {minorState.hashRate}</p>
                 </div>
                 <div id="sub-section-1-3" className="bg-gray-100 p-4 rounded-lg h-64">
                   <h3 className="text-lg font-medium mb-2">Earnings</h3>

diff --git a/renderer/store/minorSlice.tsx b/renderer/store/minorSlice.tsx
@@ -4,45 +4,53 @@ import { HYDRATE } from "next-redux-wrapper";
 
 // Type for our state
 export interface MinorState {
-  data_unpackaged: number | null;
-  data_packaged: number | null;
-  hash_rate: number | null;
+  dataUnpacked: number | null;
+  dataPacked: number | null;
+  storageAvailable: number | null;
+  weaveSize: number | null;
+  hashRate: number | null;
   earnings: number | null;
+  vdfTimeLowerBound: number | null;
 }
 
 const initialState: MinorState = {
-  data_unpackaged: null,
-  data_packaged: null,
-  hash_rate: null,
+  dataUnpacked: null,
+  dataPacked: null,
+  storageAvailable: null,
+  weaveSize: null,
+  hashRate: null,
   earnings: null,
+  vdfTimeLowerBound: null,
 };
 
 export const minorSlice = createSlice({
   name: "minor",
   initialState,
   reducers: {
-    // Action to set the minor data
-    setMinorState(state, action) {
-      state.data_unpackaged = action.payload.data_unpackaged;
-      state.data_packaged = action.payload.data_packaged;
-      state.hash_rate = action.payload.hash_rate;
+    setMetricsState(state, action) {
+      state.dataUnpacked = action.payload.dataUnpacked;
+      state.dataPacked = action.payload.dataUnpacked;
+      state.storageAvailable = action.payload.storageAvailable;
+      state.weaveSize = action.payload.weaveSize;
+      state.hashRate = action.payload.hashRate;
       state.earnings = action.payload.earnings;
+      state.vdfTimeLowerBound = action.payload.vdfTimeLowerBound;
     },
   },
 
   extraReducers: {
     [HYDRATE]: (state, action) => {
       return {
         ...state,
-        ...action.payload.data_unpackaged,
-        ...action.payload.data_packaged,
-        ...action.payload.hash_rate,
+        ...action.payload.dataUnpacked,
+        ...action.payload.dataPacked,
+        ...action.payload.hashRate,
         ...action.payload.earnings,
       };
     },
   },
 });
 
-export const { setMinorState } = minorSlice.actions;
+export const { setMetricsState } = minorSlice.actions;
 export const selectMinorState = (state: AppState) => state.minor;
 export default minorSlice.reducer;
diff --git a/renderer/types/Minor.ts b/renderer/types/Minor.ts
diff --git a/renderer/types/generic.ts b/renderer/types/generic.ts
@@ -1,4 +1,4 @@
-export interface DataSize {
-  value: number;
+export interface DataSizeFormatted {
+  value: string;
   unit: "b" | "kb" | "mb" | "gb" | "tb" | "pb";
 }