Merge pull request #527 from ddps-lab/frontend

ddps-lab · Feb 13, 2025 · 54c3426 · 54c3426
2 parents 8d44b9b + acd45c6
commit 54c3426
Show file tree

Hide file tree

Showing 10 changed files with 140 additions and 159 deletions.
diff --git a/frontend/build/asset-manifest.json b/frontend/build/asset-manifest.json
@@ -1,15 +1,15 @@
 {
   "files": {
     "main.css": "/static/css/main.95bea462.css",
-    "main.js": "/static/js/main.52bffc24.js",
+    "main.js": "/static/js/main.200900db.js",
     "static/js/488.a88b8761.chunk.js": "/static/js/488.a88b8761.chunk.js",
     "index.html": "/index.html",
     "main.95bea462.css.map": "/static/css/main.95bea462.css.map",
-    "main.52bffc24.js.map": "/static/js/main.52bffc24.js.map",
+    "main.200900db.js.map": "/static/js/main.200900db.js.map",
     "488.a88b8761.chunk.js.map": "/static/js/488.a88b8761.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.95bea462.css",
-    "static/js/main.52bffc24.js"
+    "static/js/main.200900db.js"
   ]
 }
diff --git a/frontend/build/index.html b/frontend/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><title>Spot Lake</title><script defer="defer" src="/static/js/main.52bffc24.js"></script><link href="/static/css/main.95bea462.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="SpotLake-Diverse Spot Instance Dataset Archive Service"/><title>SpotLake</title><script defer="defer" src="/static/js/main.200900db.js"></script><link href="/static/css/main.95bea462.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/frontend/build/static/js/main.200900db.js b/frontend/build/static/js/main.200900db.js
diff --git a/...ld/static/js/main.52bffc24.js.LICENSE.txt → ...ld/static/js/main.200900db.js.LICENSE.txt b/...ld/static/js/main.52bffc24.js.LICENSE.txt → ...ld/static/js/main.200900db.js.LICENSE.txt
@@ -4,8 +4,6 @@ object-assign
 @license MIT
 */
 
-/*! decimal.js-light v2.5.1 https://github.com/MikeMcl/decimal.js-light/LICENCE */
-
 /**
  * @license React
  * react-is.production.js
@@ -16,16 +14,6 @@ object-assign
  * LICENSE file in the root directory of this source tree.
  */
 
-/**
- * @license React
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
 /**
  * @remix-run/router v1.21.1
  *

diff --git a/frontend/build/static/js/main.200900db.js.map b/frontend/build/static/js/main.200900db.js.map
diff --git a/frontend/build/static/js/main.52bffc24.js b/frontend/build/static/js/main.52bffc24.js
diff --git a/frontend/build/static/js/main.52bffc24.js.map b/frontend/build/static/js/main.52bffc24.js.map
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -2,19 +2,19 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-<!--    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />-->
+    <!--    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />-->
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="SpotLake-Diverse Spot Instance Dataset Archive Service"
     />
-<!--    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />-->
+    <!--    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />-->
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-<!--    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />-->
+    <!--    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />-->
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Spot Lake</title>
+    <title>SpotLake</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/frontend/src/components/ErrorBoundary/ErrorBoundary.jsx b/frontend/src/components/ErrorBoundary/ErrorBoundary.jsx
@@ -0,0 +1,41 @@
+import React, { Component } from "react";
+import { Alert, Snackbar } from "@mui/material";
+
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, errorMessage: "" };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, errorMessage: error.message };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error("ErrorBoundary caught an error:", error, errorInfo);
+  }
+
+  handleClose = () => {
+    this.setState({ hasError: false, errorMessage: "" });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <Snackbar
+          open={this.state.hasError}
+          anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+          autoHideDuration={5000}
+          onClose={this.handleClose}
+        >
+          <Alert severity="error" onClose={this.handleClose}>
+            {this.state.errorMessage || "Something went wrong."}
+          </Alert>
+        </Snackbar>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;
diff --git a/frontend/src/pages/home/home.js b/frontend/src/pages/home/home.js
@@ -1,28 +1,18 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useState } from "react";
 import axios from "axios";
 import * as style from "./styles";
 import LinearProgress from "@mui/material/LinearProgress";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
 import DataTable from "../../components/DataTable/DataTable";
-import ChartModal from "../../components/Modal/ChartModal";
+import ErrorBoundary from "../../components/ErrorBoundary/ErrorBoundary";
 import CustomToolbar from "../../components/DataTable/ToolBar";
 import Query from "../../components/QuerySection/Query";
 import { Snackbar, Alert } from "@mui/material";
 
 function Home() {
-  const [w, setWidth] = useState(window.innerWidth * 0.6);
-  const [chartModal, setChartModal] = useState(false);
   const [getData, setGetdata] = useState([]);
-  const [IFGraph, setIFGraph] = useState([]);
-  const [SPSGraph, setSPSGraph] = useState([]);
-  const [SPGraph, setSPGraph] = useState([]);
-  const [alpha, setAlpha] = useState(0.7);
-  const alphaInput = useRef();
   const [selectedData, setSelectedData] = useState([]);
-  const [graphData, setGraphData] = useState([]);
-  const [graphLoad, setGraphLoad] = useState(false);
-  const [visualDate, setVisualDate] = useState(0);
   const [vendor, setVendor] = useState("AWS");
   const [GCPData, setGCPData] = useState([]);
   const [AZUREData, setAZUREData] = useState([]);
@@ -46,10 +36,6 @@ function Home() {
     severity: "error",
   });
 
-  useEffect(() => {
-    setWidth(window.innerWidth * 0.6);
-  }, [window.innerWidth]);
-
   useEffect(() => {
     getLatestData(
       "AWS",
@@ -81,19 +67,6 @@ function Home() {
       }
     }
   }, [vendor]);
-  useEffect(() => {
-    //데이터 가져오기 한번 끝날때마다 한곳에 모으기
-    if (SPSGraph.length > visualDate) {
-      for (let i = 0; i < SPGraph.length - selectedData.length; i++) {
-        Object.assign(IFGraph[i], IFGraph[i + visualDate]);
-        setIFGraph(IFGraph.slice(0, visualDate));
-        Object.assign(SPSGraph[i], SPSGraph[i + visualDate]);
-        setSPSGraph(SPSGraph.slice(0, visualDate));
-        Object.assign(SPGraph[i], SPGraph[i + visualDate]);
-        setSPGraph(SPGraph.slice(0, visualDate));
-      }
-    }
-  }, [graphData]);
 
   //latest data 가져오기
   const getLatestData = async (curVendor, DataUrl, setLatestData) => {
@@ -144,17 +117,6 @@ function Home() {
       });
   };
 
-  const changeAlpha = () => {
-    const ainput = alphaInput.current.value;
-    if (ainput <= 0.5 || ainput > 1) {
-      alert(
-        "Please enter a value greater than 0.5 and less than or equal to 1.0"
-      );
-    } else {
-      ainput === "" ? setAlpha(0.7) : setAlpha(ainput);
-    }
-  };
-
   const LinearProgressWithLabel = (props) => {
     return (
       <Box sx={{ display: "flex", alignItems: "center" }}>
@@ -171,103 +133,93 @@ function Home() {
   };
 
   return (
-    <div style={{ width: "100%", height: "100%" }}>
-      <style.demo>
-        <style.vendor>
-          <style.vendorBtn
-            onClick={() => {
-              setVendor("AWS");
-            }}
-            clicked={vendor === "AWS"}
-            disabled={progress[vendor].loading}
-          >
-            <style.vendorIcon
-              src={process.env.PUBLIC_URL + "/icon/awsIcon.png"}
-              alt="awsIcon"
-            />
-            <style.vendorTitle>Amazon Web Services</style.vendorTitle>
-          </style.vendorBtn>
-          <style.vendorBtn
-            onClick={() => {
-              setVendor("GCP");
-            }}
-            clicked={vendor === "GCP"}
-            disabled={progress[vendor].loading}
-          >
-            <style.vendorIcon
-              src={process.env.PUBLIC_URL + "/icon/gcpIcon.png"}
-              alt="awsIcon"
-            />
-            <style.vendorTitle>Google Cloud Platform</style.vendorTitle>
-          </style.vendorBtn>
-          <style.vendorBtn
-            onClick={() => {
-              setVendor("AZURE");
-            }}
-            clicked={vendor === "AZURE"}
-            disabled={progress[vendor].loading}
-          >
-            <style.vendorIcon
-              src={process.env.PUBLIC_URL + "/icon/azureIcon.png"}
-              alt="awsIcon"
-            />
-            <style.vendorTitle>Microsoft Azure</style.vendorTitle>
-          </style.vendorBtn>
-        </style.vendor>
-        <Query
-          vendor={vendor}
-          selectedData={selectedData}
-          setSelectedData={setSelectedData}
-          setGetdata={setGetdata}
-          setGCPData={setGCPData}
-          setAZUREData={setAZUREData}
-        />
-        {chartModal && (
-          <ChartModal
-            width={w}
-            setChartModal={setChartModal}
-            selectedData={selectedData}
-            IFGraph={IFGraph}
-            setIFGraph={setIFGraph}
-            SPSGraph={SPSGraph}
-            setSPSGraph={setSPSGraph}
-            SPGraph={SPGraph}
-            setSPGraph={setSPSGraph}
-          />
-        )}
-        <style.table>
-          {vendor && progress[vendor].loading && (
-            <style.progressBar vendor={vendor}>
-              <LinearProgressWithLabel value={progress[vendor].percent} />
-              <style.noticeMsg>
-                After the data is loaded, you can change to other vendors.
-              </style.noticeMsg>
-            </style.progressBar>
-          )}
-          <DataTable
-            rowData={
-              vendor === "AWS"
-                ? getData
-                : vendor === "GCP"
-                ? GCPData
-                : AZUREData
-            }
+    <ErrorBoundary>
+      <div style={{ width: "100%", height: "100%" }}>
+        <style.demo>
+          <style.vendor>
+            <style.vendorBtn
+              onClick={() => {
+                setVendor("AWS");
+              }}
+              clicked={vendor === "AWS"}
+              disabled={progress[vendor].loading}
+            >
+              <style.vendorIcon
+                src={process.env.PUBLIC_URL + "/icon/awsIcon.png"}
+                alt="awsIcon"
+              />
+              <style.vendorTitle>Amazon Web Services</style.vendorTitle>
+            </style.vendorBtn>
+            <style.vendorBtn
+              onClick={() => {
+                setVendor("GCP");
+              }}
+              clicked={vendor === "GCP"}
+              disabled={progress[vendor].loading}
+            >
+              <style.vendorIcon
+                src={process.env.PUBLIC_URL + "/icon/gcpIcon.png"}
+                alt="awsIcon"
+              />
+              <style.vendorTitle>Google Cloud Platform</style.vendorTitle>
+            </style.vendorBtn>
+            <style.vendorBtn
+              onClick={() => {
+                setVendor("AZURE");
+              }}
+              clicked={vendor === "AZURE"}
+              disabled={progress[vendor].loading}
+            >
+              <style.vendorIcon
+                src={process.env.PUBLIC_URL + "/icon/azureIcon.png"}
+                alt="awsIcon"
+              />
+              <style.vendorTitle>Microsoft Azure</style.vendorTitle>
+            </style.vendorBtn>
+          </style.vendor>
+          <Query
             vendor={vendor}
-            toolBar={<CustomToolbar />}
+            selectedData={selectedData}
             setSelectedData={setSelectedData}
+            setGetdata={setGetdata}
+            setGCPData={setGCPData}
+            setAZUREData={setAZUREData}
           />
-        </style.table>
-      </style.demo>
-      {/* Snackbar component displays error messages. */}
-      <Snackbar
-        open={snackbar.open}
-        anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
-        autoHideDuration={5000}
-        onClose={() => setSnackbar((prev) => ({ ...prev, open: false }))}
-      >
-        <Alert severity={snackbar.severity}>{snackbar.message}</Alert>
-      </Snackbar>
-    </div>
+
+          <style.table>
+            {vendor && progress[vendor].loading && (
+              <style.progressBar vendor={vendor}>
+                <LinearProgressWithLabel value={progress[vendor].percent} />
+                <style.noticeMsg>
+                  After the data is loaded, you can change to other vendors.
+                </style.noticeMsg>
+              </style.progressBar>
+            )}
+            <DataTable
+              rowData={
+                vendor === "AWS"
+                  ? getData
+                  : vendor === "GCP"
+                  ? GCPData
+                  : AZUREData
+              }
+              vendor={vendor}
+              toolBar={<CustomToolbar />}
+              setSelectedData={setSelectedData}
+            />
+          </style.table>
+        </style.demo>
+        {/* Snackbar component displays error messages. */}
+        <Snackbar
+          open={snackbar.open}
+          anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+          autoHideDuration={5000}
+          onClose={() => setSnackbar((prev) => ({ ...prev, open: false }))}
+        >
+          <Alert severity={snackbar.severity}>{snackbar.message}</Alert>
+        </Snackbar>
+      </div>
+    </ErrorBoundary>
   );
 }
 export default Home;
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><title>Spot Lake</title><script defer="defer" src="/static/js/main.52bffc24.js"></script><link href="/static/css/main.95bea462.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="SpotLake-Diverse Spot Instance Dataset Archive Service"/><title>SpotLake</title><script defer="defer" src="/static/js/main.200900db.js"></script><link href="/static/css/main.95bea462.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>