github-pages - deploy new page to gh-pages

portal/Dockerfile

@@ -9,7 +9,13 @@ RUN mkdir /usr/share/nginx/html/qujata
 COPY . .
 RUN npm install -g yarn
 RUN yarn install
-RUN yarn build && cp -r  build/* /usr/share/nginx/html/qujata && cp build/index.html /usr/share/nginx/html/qujata/index.html.tpl && chmod 755 -R /usr/share/nginx/html/qujata
+RUN yarn add env-cmd
+RUN if [ "$BUILD_ENV" = "gh-pages" ]; then \
+       yarn build:gh-pages; \
+    else \
+        yarn build; \
+    fi \
+    && cp -r  build/* /usr/share/nginx/html/qujata && cp build/index.html /usr/share/nginx/html/qujata/index.html.tpl && chmod 755 -R /usr/share/nginx/html/qujata
 
 COPY nginx.conf /etc/nginx/nginx.conf
 

portal/package.json

@@ -9,6 +9,7 @@
     "chartjs-plugin-annotation": "^3.0.1",
     "classnames": "^2.3.2",
     "date-fns": "^3.3.0",
+    "env-cmd": "^10.1.0",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-chartjs-2": "3.1.1",
@@ -60,6 +61,7 @@
     "start:mock:client": "cross-env REACT_SERVER_TARGET=http://localhost:2011 yarn start",
     "start:mock:server": "cd ./mock-server && yarn serve",
     "build": "yarn react-scripts build",
+    "build:gh-pages": "env-cmd -f .env.gh-pages yarn react-scripts build",
     "build:ci": "yarn react-scripts build",
     "test": "react-scripts test",
     "test:coverage": "react-scripts test --coverage --watchAll=false",

portal/src/gh-pages/index.tsx

@@ -0,0 +1,7 @@
+import { Reports } from "./reports";
+
+export const GHPages: React.FC = () => (
+    <Reports />
+);
+
+// export default GHPages;

portal/src/gh-pages/reports.tsx

@@ -0,0 +1,121 @@
+// import React, { useState, useEffect } from 'react';
+// interface Report {
+//     cpu: string;
+//     revision: number;
+//     status: string;
+// }
+// export const Reports: React.FC = () => {
+
+
+//   const [data, setData] = useState<Report[]>([]);
+//   useEffect(() => {
+//     fetch('https://api.github.com/repos/open-quantum-safe/profiling/contents/perf/aws')
+//       .then(response => response.json())
+//       .then((files: { name: string; download_url: string }[]) => {
+//         return Promise.all(
+//           files.map(file =>
+//             fetch(file.download_url)
+//               .then(response => response.json())
+//               .then(json => ({
+//                 cpu: json.cpu,
+//                 revision: json.revision,
+//                 status: json.status,
+//               }))
+//               .catch(err => console.error(err))
+//           )
+//         );
+//       })
+//       .then(jsonArray => setData(jsonArray as Report[]))
+//       .catch(err => console.error(err));
+//   }, []);
+//   return (
+//     <pre>
+//       {JSON.stringify(data, null, 2)}
+//     </pre>
+//   );
+// };
+
+// import React, { useState, useEffect, ChangeEvent } from "react";
+// import axios from "axios";
+// interface File {
+//   path: string;
+//   name: string;
+// }
+// export const Reports: React.FC = () => {
+//   const [files, setFiles] = useState<File[]>([]);
+//   const [selectedFile, setSelectedFile] = useState<string | null>(null);
+//   const [fileContent, setFileContent] = useState<string>("");
+//   useEffect(() => {
+//     // const apiUrl = `https://api.github.com/repos/att/qujata/contents/reports?ref=static-web-page/US63/conditional-main-page`;
+//     const apiUrl = `https://api.github.com/repos/open-quantum-safe/profiling/contents/perf/aws`;
+//     axios.get<File[]>(apiUrl)
+//       .then(response => {
+//         setFiles(response.data);
+//       })
+//       .catch(error => console.error("Error fetching files: ", error));
+//   }, []);
+//   const handleFileChange = (e: ChangeEvent<HTMLSelectElement>) => {
+//     const value = e.target.value;
+//     setSelectedFile(value);
+//     axios.get(`https://api.github.com/repos/att/qujata/contents/${e.target.value}`)
+//       .then(response => {
+//         const fileContent = atob(response.data.content); // Decode the base64 content
+//         setFileContent(fileContent);
+//       })
+//       .catch(error => console.error("Error fetching file content: ", error));
+//   };
+//   return (
+//     <div><select onChange={handleFileChange}>
+//         {files.map((file, index) => (
+//           <option key={index} value={file.path}>
+//             {file.name}
+//           </option>
+//         ))}
+//       </select><div>
+//         {fileContent}
+//       </div></div>
+//   );
+// }
+
+
+import React, { useState, useEffect, ChangeEvent } from "react";
+interface File {
+  path: string;
+  name: string;
+}
+export const Reports: React.FC = () => {
+  const [files, setFiles] = useState<File[]>([]);
+  const [selectedFile, setSelectedFile] = useState<string | null>(null);
+  const [fileContent, setFileContent] = useState<string>("");
+  useEffect(() => {
+    const apiUrl = 'https://api.github.com/repos/att/qujata/contents/reports?ref=static-web-page/US63/conditional-main-page';
+    fetch(apiUrl)
+      .then(response => response.json())
+      .then(data => {
+        setFiles(data);
+      })
+      .catch(error => console.error("Error fetching files: ", error));
+  }, []);
+  const handleFileChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    const value = e.target.value;
+    setSelectedFile(value);
+    fetch(`https://raw.githubusercontent.com/att/qujata/static-web-page/US63/conditional-main-page/${value}`)
+      .then(response => response.json())
+      .then(data => {
+        const fileContent = JSON.stringify(data, null, 2); // Decode the base64 content
+        setFileContent(fileContent);
+      })
+      .catch(error => console.error("Error fetching file content: ", error));
+  };
+  return (
+    <div><select onChange={handleFileChange}>
+        {files.map((file, index) => (
+          <option key={index} value={file.path}>
+            {file.name}
+          </option>
+        ))}
+      </select><div>
+        {fileContent}
+      </div></div>
+  );
+}

portal/src/routes/Root.jsx

@@ -4,14 +4,21 @@ import { Outlet } from 'react-router-dom';
 import { tabs } from '../app/shared/constants/navigation-tabs.const';
 import { Spinner, SpinnerSize } from '../app/shared/components/att-spinner';
 import { useSpinnerContext } from '../app/shared/context/spinner';
+import { GHPages } from "../gh-pages";
 
 export default function Root() {
   const { isSpinnerOn } = useSpinnerContext();
+  const env = process.env.REACT_APP__ENVIRONMENT;
   return (
+
     <>
-      <GlobalHeader tabs={tabs} />
+      <GlobalHeader tabs={ env === 'gh-pages' ? [] : tabs} />
       {isSpinnerOn && renderSpinner()}
-      <Outlet />
+      { 
+        env === 'gh-pages' ?  (<GHPages />) :(<Outlet />)
+      }
+
+
     </>
   );
 }