feat: add in the files iframe

Author: jaypyles

api/backend/configs/commands.py

@@ -41,6 +41,11 @@ def create_config_file(filename: str, config: Schema):
         yaml.dump(filtered_config, f, default_flow_style=False, sort_keys=False)
 
 
+def read_yaml_file(filename: str):
+    with open(filename, "r") as f:
+        return yaml.load(f, Loader=yaml.FullLoader)
+
+
 def get_config_file_for_read(host: str):
     config = utils.read(f"./configs/{host}.yml")
     config.host.username = "user"

api/backend/configs/models.py

@@ -0,0 +1,5 @@
+from pydantic import BaseModel
+
+
+class AppConfig(BaseModel):
+    files_url: str

api/backend/routers/config.py

@@ -9,9 +9,19 @@
 from api.backend.host_manager import HOST_MAP
 from api.backend.logging import LOG
 
+from api.backend.configs.models import AppConfig
+
 config_router = APIRouter()
 
 
+@config_router.get("/api/app-config")
+async def get_app_config():
+    config = yaml_utils.read_yaml_file("./configs/app-config/app-config.yml")
+    app_config = AppConfig(files_url=config["files_url"])
+
+    return JSONResponse(app_config.model_dump())
+
+
 @config_router.post("/api/config")
 async def create_config(build_config: BuildConfigFile):
     try:

src/app/store.ts

@@ -1,9 +1,11 @@
 import { configureStore } from "@reduxjs/toolkit";
 import integrationsReducer from "@/lib/slices/integrations";
 import settingsReducer from "@/lib/slices/settings";
+import appConfigReducer from "@/lib/slices/app-config";
 
 export const store = configureStore({
   reducer: {
+    appConfig: appConfigReducer,
     integrations: integrationsReducer,
     settings: settingsReducer,
   },

src/components/dashboard/controls/files/files.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { IconButton } from "@mui/material";
+import React, { useState, useEffect } from "react";
+import FindInPageIcon from "@mui/icons-material/FindInPage";
+import { useRouter } from "next/navigation";
+import { useAppConfig } from "@/lib/hooks/use-app-config";
+
+export type FilesProps = {
+  className?: string;
+};
+
+export const Files = ({ className }: FilesProps) => {
+  const router = useRouter();
+  const { appConfig } = useAppConfig();
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  if (!isClient) return null;
+
+  return appConfig.filesUrl ? (
+    <div className={className}>
+      <IconButton component="span" onClick={() => router.push("/files")}>
+        <FindInPageIcon />
+      </IconButton>
+    </div>
+  ) : null;
+};

src/components/dashboard/controls/files/index.ts

@@ -0,0 +1 @@
+export * from "./files";

src/components/dashboard/dashboard.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { fetchAndSet } from "@/lib/utils";
-import { Container, Grid } from "@mui/material";
+import { Container } from "@mui/material";
 import classes from "./dashboard.module.css";
 import HostOverview from "@/components/shared/host-overview/host-overview";
 import { useRouter } from "next/router";

src/lib/hooks/use-app-config.ts

@@ -0,0 +1,16 @@
+import { RootState } from "@/app";
+import { useSelector } from "react-redux";
+import { AppConfig } from "../services/app-config/app-config.types";
+import { setAppConfig } from "../slices/app-config";
+import { useDispatch } from "react-redux";
+
+export const useAppConfig = () => {
+  const dispatch = useDispatch();
+  const appConfig = useSelector((state: RootState) => state.appConfig);
+
+  return {
+    appConfig,
+    setNewAppConfig: (appConfig: AppConfig) =>
+      dispatch(setAppConfig(appConfig)),
+  };
+};

src/lib/services/app-config/app-config.types.ts

@@ -0,0 +1,7 @@
+export type ServerAppConfig = {
+  files_url: string;
+};
+
+export type AppConfig = {
+  filesUrl: string;
+};

src/lib/services/app-config/functions/index.ts

@@ -0,0 +1 @@
+export * from "./read-config";

src/lib/services/app-config/functions/read-config.ts

@@ -0,0 +1,14 @@
+import { apiGet } from "@/lib/utils";
+import { ServerAppConfig } from "../app-config.types";
+
+const parseAppConfig = (appConfig: ServerAppConfig) => {
+  return {
+    filesUrl: appConfig.files_url,
+  };
+};
+
+export const getAppConfig = async () => {
+  const appConfig: ServerAppConfig = await apiGet("/api/app-config");
+
+  return parseAppConfig(appConfig);
+};

src/lib/services/app-config/index.ts

@@ -0,0 +1,3 @@
+import * as AppConfig from "./functions";
+
+export { AppConfig };

src/lib/slices/app-config.ts

@@ -0,0 +1,41 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { AppConfig } from "../services/app-config/app-config.types";
+
+const loadFromLocalStorage = () => {
+  try {
+    const serializedState = localStorage.getItem("appConfig");
+    if (serializedState === null) return undefined;
+    return JSON.parse(serializedState);
+  } catch (e) {
+    console.error("Could not load from localStorage:", e);
+    return undefined;
+  }
+};
+
+const saveToLocalStorage = (state: AppConfig) => {
+  try {
+    const serializedState = JSON.stringify(state);
+    localStorage.setItem("appConfig", serializedState);
+  } catch (e) {
+    console.error("Could not save to localStorage:", e);
+  }
+};
+
+const initialState: AppConfig = loadFromLocalStorage() || {
+  filesUrl: "",
+};
+
+const appConfigSlice = createSlice({
+  name: "appConfig",
+  initialState,
+  reducers: {
+    setAppConfig: (state, action: PayloadAction<AppConfig>) => {
+      saveToLocalStorage({ ...state, ...action.payload });
+      return { ...state, ...action.payload };
+    },
+  },
+});
+
+export const { setAppConfig } = appConfigSlice.actions;
+
+export default appConfigSlice.reducer;

src/lib/slices/index.ts

@@ -1 +1,3 @@
 export * from "./integrations";
+export * from "./app-config";
+export * from "./settings";

src/pages/_app.tsx

@@ -15,6 +15,7 @@ import { ToastContainer } from "react-toastify";
 import { Provider } from "react-redux";
 import { store } from "@/app";
 import { BackgroundChanger } from "@/components/dashboard/controls";
+import { Files } from "@/components/dashboard/controls/files";
 
 const App: React.FC<AppProps> = ({ Component, pageProps }) => {
   const [isDarkMode, setIsDarkMode] = useState(false);
@@ -59,6 +60,7 @@ const App: React.FC<AppProps> = ({ Component, pageProps }) => {
             <div className="global-controls">
               <BackgroundChanger className="global-control" />
               <SettingsControl className="global-control" />
+              <Files className="global-control" />
             </div>
             <Box
               className="mainWrapper"

src/pages/api/app-config.ts

@@ -0,0 +1,11 @@
+import type { NextApiRequest, NextApiResponse } from "next";
+import { cacheApi } from "@/lib/services/api";
+import { ServerAppConfig } from "@/lib/services/app-config/app-config.types";
+
+export default async function handler(
+  _: NextApiRequest,
+  res: NextApiResponse<ServerAppConfig>
+) {
+  const response = await cacheApi.get<ServerAppConfig>("/app-config");
+  res.status(200).json(response.data);
+}

src/pages/files.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { useAppConfig } from "@/lib/hooks/use-app-config";
+
+const IframeComponent = () => {
+  const { appConfig } = useAppConfig();
+
+  if (!appConfig.filesUrl) {
+    return null;
+  }
+
+  return (
+    <iframe
+      src={appConfig.filesUrl}
+      style={{ width: "100%", height: "100%", border: "none" }}
+      title="Files"
+    />
+  );
+};
+
+export default IframeComponent;

src/pages/index.tsx

@@ -4,12 +4,18 @@ import { store } from "@/app";
 import { setIntegrations } from "@/lib/slices/integrations";
 import { apiCaller } from "@/lib/services/api-caller";
 import { Integration } from "@/lib/types";
+import { AppConfig } from "@/lib/services/app-config";
+import { setAppConfig } from "@/lib/slices";
 
 const Home = () => {
   React.useEffect(() => {
     apiCaller.integrations().then((res) => {
       store.dispatch(setIntegrations(res as Integration[]));
     });
+
+    AppConfig.getAppConfig().then((res) => {
+      store.dispatch(setAppConfig(res));
+    });
   }, []);
 
   return <Dashboard />;