Merge pull request #3 from DiamondLightSource/grad_logpanel

Grad logpanel

.gitignore

@@ -22,3 +22,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+
+# SSH Key for Graylog
+/src/token.txt

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.0.2.cjs
+yarnPath: .yarn/releases/yarn-4.1.1.cjs

Dockerfile

@@ -9,7 +9,7 @@ ENV REACT_APP_DEPLOY_TYPE=${DEPLOY_TYPE}
 ENV REACT_APP_VERSION=${VERSION}
 
 # Cache this layer unless dependencies change
-COPY package.json yarn.lock .yarnrc.yml .
+COPY package.json yarn.lock .yarnrc.yml ./
 COPY ./.yarn ./.yarn
 
 RUN yarn install --immutable --check-cache

package.json

@@ -10,10 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@chakra-ui/react": "^2.8.2",
-    "@emotion/react": "^11.11.3",
+    "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
-    "framer-motion": "^11.0.5",
+    "@mui/icons-material": "^5.15.14",
+    "@mui/material": "^5.15.14",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

src/App.css

@@ -1,8 +1,9 @@
 #root {
   max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+  margin: 2 auto;
+  /* padding: 1rem; */
+  text-align: left;
+  line-height: normal;
 }
 
 .logo {

src/App.tsx

@@ -1,35 +1,146 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import { ThemeProvider } from "@emotion/react";
+import { useEffect, useState } from "react";
+import { theme } from "./theme";
+import BoxBasic from "./components/Box";
 
 function App() {
-  const [count, setCount] = useState(0)
+
+  const [logMessage, setLog] = useState<string[]>([]);
+  useEffect(() => {
+    async function fetchData(
+      url: string,
+      username: string,
+      password: string,
+      payload: object
+    ): Promise<undefined> {
+      try {
+        // Creating a basic authentication header
+        const headers = new Headers();
+        headers.append(
+          "Authorization",
+          "Basic " + btoa(`${username}:${password}`)
+        );
+        headers.append("Content-Type", "application/json");
+        headers.append("X-Requested-By", "XMLHttpRequest");
+
+        // Making the fetch request
+        const response = await fetch(url, {
+          method: "POST",
+          headers: headers,
+          body: JSON.stringify(payload),
+        });
+        // Checking if the response is OK
+        if (!response.ok) {
+          throw new Error("Failed to fetch data");
+        }
+
+        // Parsing the response as JSON
+        const logdata = await response.json();
+        const message = getMessage(logdata) || ["No logs found"];
+        setLog(message);
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        throw error;
+      }
+    }
+
+    const apiURL = "/api/views/search/sync";
+    const password = "token";
+    let username:string;
+
+    // Add payload for the request
+    const payload = {
+      // id: "661626cbe7b8a27f59bd1175",
+      parameters: [],
+      queries: [
+        {
+          query: {
+            type: "elasticsearch",
+            query_string: "application_name:gda",
+          },
+          timerange: {
+            from: 300,
+            type: "relative",
+          },
+          filters: [],
+          search_types: [
+            {
+              limit: 100,
+              offset: 0,
+              sort: [
+                {
+                  field: "timestamp",
+                  order: "DESC",
+                },
+              ],
+              fields: [],
+              decorators: [],
+              type: "messages",
+              filter: null,
+              filters: [],
+            },
+          ],
+        },
+      ],
+    };
+
+    // reads file from folder - add custom API key to this file
+    (async () => {
+      try {
+        await readFile()
+        .then((content) => {
+          username = content;
+          // Run API call using parameters
+          (async () => {
+            try {
+              await fetchData(apiURL, username, password, payload);
+            } catch (error) {
+              console.error("Error:", error);
+            }
+          })();
+        });
+      } catch (error) {
+        console.error("Error collecting password:", error);
+      }
+    })();
+  }, []);
 
   return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
+    <ThemeProvider theme={theme}>
+      <h1>Athena Logpanel </h1>
+      <BoxBasic content={<p> {logMessage} </p>}></BoxBasic>
+    </ThemeProvider>
+  );
+}
+
+function getMessage(logging: JSON): undefined | string[] {
+  const data = JSON.parse(JSON.stringify(logging));
+  for (const key in data.results) {
+    if ("search_types" in data.results[key]) {
+      const id = data.results[key].search_types;
+      const message: string[] = [];
+      for (const keys in id) {
+        if ("messages" in id[keys]) {
+          const logs = id[keys].messages;
+          for (const msg in logs) {
+            message.push(
+              `${logs[msg]["message"]["timestamp"]} ${logs[msg]["message"]["source"]} ${logs[msg]["message"]["message"]}`
+            );
+          }
+          return message;
+        }
+      }
+    }
+  }
+}
+
+async function readFile(): Promise<string> {
+  const filePath = "src/token.txt";
+  const response =  await fetch(filePath) ;
+  if (!response.ok){
+    throw new Error(`Failed to read file: ${filePath}`);
+  }
+  return await response.text();
 }
 
-export default App
+export default App;

src/components/Box.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+
+// Define the potential types for the Box
+type Content = string| JSX.Element | number | (() => React.ReactNode);
+interface BoxProps<T> {
+    content:T;
+}
+// FC React functional component.
+const BoxBasic:React.FC<BoxProps<Content>> = ({content}) =>{
+    return (
+      <Box component="section" sx={{ 
+        margin: "1vw",
+        padding: "1vw", 
+        border: '6px solid grey', 
+        width: "95vw", 
+        height: "80vh",
+        overflowY: "scroll",
+        whiteSpace: "wrap"
+         }}>
+         {typeof content === 'function' ? content() : content}
+      </Box>
+    );
+  }
+
+export default BoxBasic;

src/main.tsx

@@ -2,12 +2,10 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
-import { ChakraProvider } from '@chakra-ui/react'
+
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <ChakraProvider>
       <App />
-    </ChakraProvider>
   </React.StrictMode>,
 )

src/theme.ts

@@ -0,0 +1,23 @@
+import { createTheme } from '@mui/material/styles';
+
+export const theme = createTheme({
+    typography: {},
+    palette: {
+        background: {
+          paper: '#fff',
+        },
+        text: {
+          primary: '#173A5E',
+          secondary: '#46505A',
+        },
+        action: {
+          active: '#001E3C',
+        },
+        success: {
+          main: '#009688',
+        },
+        primary: {
+          main: '#173A5E'
+        }
+      },
+});

tsconfig.json

@@ -2,24 +2,33 @@
   "compilerOptions": {
     "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
     "module": "ESNext",
     "skipLibCheck": true,
-
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx",
-
     /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    // "noImplicitAny": true
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}

vite.config.ts

@@ -4,4 +4,10 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+  server:{
+    // proxying any /api calls proxies the call to graylog. Unsure how this would work when deployed
+    proxy:{
+      "/api": "https://graylog.diamond.ac.uk"
+    }
+  },
+})