+ );
+}
+
+export default PieChartMain2;
\ No newline at end of file
diff --git a/src/components/AssetsCosts/Controls/edit.js b/src/components/AssetsCosts/Controls/edit.js
new file mode 100644
index 00000000..cf763932
--- /dev/null
+++ b/src/components/AssetsCosts/Controls/edit.js
@@ -0,0 +1,20 @@
+import React from "react";
+import SelectWindow from "../../SelectWindow";
+
+function EditControl({windowOptions,window,setWindow,useSample}) {
+ return <>
+
+
+
+
+
+
+
+}
+
+export default EditControl
\ No newline at end of file
diff --git a/src/components/AssetsCosts/Controls/index.js b/src/components/AssetsCosts/Controls/index.js
new file mode 100644
index 00000000..ba95d7d1
--- /dev/null
+++ b/src/components/AssetsCosts/Controls/index.js
@@ -0,0 +1,15 @@
+import React from "react";
+import EditControl from "../../AssetsCosts/Controls/edit";
+
+function Controls({ windowOptions , window, setWindow , useSample}) {
+ return (
+
+ )
+}
+
+export default Controls
\ No newline at end of file
diff --git a/src/components/Nav/SidebarNav.js b/src/components/Nav/SidebarNav.js
index 781184d7..5244be89 100644
--- a/src/components/Nav/SidebarNav.js
+++ b/src/components/Nav/SidebarNav.js
@@ -2,7 +2,7 @@ import * as React from "react";
import { Drawer, List } from "@mui/material";
import { NavItem } from "./NavItem";
-import { BarChart, Cloud } from "@mui/icons-material";
+import { BarChart, Cloud , DeviceHub} from "@mui/icons-material";
const logo = new URL("../../images/logo.png", import.meta.url).href;
@@ -25,6 +25,7 @@ const SidebarNav = ({ active }) => {
},
{ name: "Cloud Costs", href: "/cloud", icon: },
{ name: "External Costs", href: "/external-costs", icon: },
+ { name: "Assets", href: "/assets", icon: },
];
return (
diff --git a/src/components/SelectWindow.js b/src/components/SelectWindow.js
index 15e44e2d..f99c7ff3 100644
--- a/src/components/SelectWindow.js
+++ b/src/components/SelectWindow.js
@@ -9,7 +9,7 @@ import Typography from "@mui/material/Typography";
import { isValid } from "date-fns";
import { find, get } from "lodash";
-const SelectWindow = ({ windowOptions, window, setWindow }) => {
+const SelectWindow = ({ windowOptions, window, setWindow ,useSample}) => {
const [anchorEl, setAnchorEl] = useState(null);
const [startDate, setStartDate] = useState(null);
@@ -117,7 +117,7 @@ const SelectWindow = ({ windowOptions, window, setWindow }) => {
flexFlow: "row",
}}
>
-
+ {!useSample &&
{
Apply
-
+ }
+
{
+ if (!item.start) return false;
+
+ const start = new Date(item.start);
+
+ return start >= from && start <= to;
+ });
+}
+
+export default function AssetsCosts() {
+ // data
+ const [assetCostData, setAssetCostData] = React.useState(null);
+ //the below state is used for keep track whether to use sample data or not
+ const [useSample , setUseSample] = React.useState(false)
+ //page and settings state
+ const [errors, setErrors] = React.useState([]);
+ const [loading, setLoading] = React.useState(true);
+ const [init, setInit] = React.useState(false);
+ const [fetch, setFetch] = React.useState(false);
+ //we are using the below state to check we are working with the network data or the sample data
+ const [check2, setCheck2] = React.useState(false);
+
+
+ //this below function is used to make everything ready before fetching up the data
+ async function initialize() {
+ setInit(true);
+ }
+
+
+ //this below function is going to assetCost.js file , where we are going to make the client request
+
+ async function fetchChartData() {
+ //when the user wants to work on the sample data dont even touch anything like going into the network
+ if (useSample) {
+ var calculatedSampleData = calculatingWindow(SampleAssetsData, win)
+ // console.log(calculatedSampleData)
+ setLoading(false);
+ setAssetCostData(calculatedSampleData)
+
+ return
+ }
+ try {
+ // console.log("hello i am inside the request")
+ setLoading(true)
+ const resp = await AssetsCostsService.fetchAssetsGraphCosts(
+ );
+ if (resp) {
+ setCheck2(true)
+ setAssetCostData(Object.values(resp.data));
+ // console.log(Object.values(resp.data)) //returns an object
+ } else {
+ if (resp.message && resp.message.indexOf("boundary error") >= 0) {
+ let match = resp.message.match(/(ETL is \d+\.\d+% complete)/);
+ let secondary = "Try again after ETL build is complete";
+ if (match.length > 0) {
+ secondary = `${match[1]}. ${secondary}`;
+ }
+ setErrors([
+ {
+ primary: "Data unavailable while ETL is building",
+ secondary: secondary,
+ },
+ ]);
+ }
+ setAssetCostData([]);
+ }
+ } catch (err) {
+ console.log(err);
+ if (err.message.indexOf("404") === 0) {
+ setErrors([
+ {
+ primary: "Failed to load report data",
+ secondary:
+ "Please update OpenCost to the latest version, and open an Issue if problems persist.",
+ },
+ ]);
+ } else {
+ let secondary =
+ "Please open an Issue with OpenCost if problems persist.";
+ if (err.message.length > 0) {
+ secondary = err.message;
+ }
+ setErrors([
+ {
+ primary: "Failed to load report data",
+ secondary: secondary,
+ },
+ ]);
+ }
+ setAssetCostData([]);
+ } finally {
+ setLoading(false); // always stop loader
+ }
+ }
+
+ //this is where we are goona call the fetchChartData(parent function)
+
+ async function fetchData() {
+ setLoading(true);
+ setErrors([]);
+ // todo: come back and have inidividual loading
+ await fetchChartData();
+
+ setLoading(false);
+ }
+
+
+ /*
+ 1.Buttons, dropdows , filters etc get there value from the url
+ 2.when the user changes something on the page we update the url
+ 3.if url does not have something we use a default value
+ */
+ //the below line does give me the current page URL info
+ const routerLocation = useLocation();
+ //take the part that is after ? and make it something into like an object that i can read (URLSear....-> built in browser tool)
+ const searchParams = new URLSearchParams(routerLocation.search);
+ const navigate = useNavigate();
+ const win = searchParams.get("window") || "7d";
+ const aggregateBy = searchParams.get("agg") || "";
+ const title =
+ searchParams.get("title") ||
+ generateTitle({ window: win, aggregateBy });
+
+ var finalData = null
+ //the below logic is used for showing the right things ,when we get the data , or when we want to use the sample data
+ var check = false
+
+ if (!loading && errors.length == 0 && assetCostData != null && !useSample) {
+ finalData = assetCostData
+ // we dont want error appearing on our page even if we are working on the real network that is why the below line exist
+ check = check2 ? false : true;
+
+ // console.log(finalData)
+ } else if (!loading && useSample) {
+ finalData = calculatingWindow(SampleAssetsData, win)
+ check = true
+
+ console.log(finalData)
+ } else if (!loading && !useSample) {
+ finalData = null
+ }
+ //the below useEffect is used to run 2 request trading between safe/slow
+ React.useEffect(() => {
+ //the below condition is there to avoid the loop
+ if (!init) {
+ initialize();
+ }
+ if (init || fetch) {
+ fetchData();
+ }
+ }, [init, fetch]);
+
+ React.useEffect(() => {
+ setFetch(!fetch);
+ }, [win]);
+ React.useEffect(() => {
+ if (!useSample) {
+ setAssetCostData(null); // 🔥 Clear old sample data
+ setCheck2(false);
+ }
+}, [useSample]);
+
+ return (
+
+
+ {!useSample && fetchData()}
+ style={{ padding: 12 }}
+ >
+
+ }
+
+
+ {/* the below block is only going to execute when we can't get the real data from backend */}
+ {!loading && (errors.length > 0 || check || useSample) && (
+
+
+
+
+
+ { }
+
+
+
+
+ )}
+
+ {finalData &&
+
+
+
+ {title}
+
+
+ {/* we have Controls beautifully controlling the data system irrespective of whether sample or real data */}
+ {
+ searchParams.set("window", win);
+ navigate({
+ search: `?${searchParams.toString()}`,
+ });
+ }}
+ useSample={useSample}
+ >
+
+
+ {/* at this point we have all the data based on the window time */}
+ {loading && (
+
+
+
+
+
+ )}
+ {
+ finalData && finalData.length > 0 ? (
+
+ ) : (
+ "no data to show here"
+ )
+}
+
+
+