feat: added compliance and control view to applications

backend/applications.js

@@ -0,0 +1,18 @@
+// utils/applications.js
+
+import fs from 'fs';
+import path from 'path';
+
+export function getApplications() {
+  const filePath = path.join(process.cwd(), 'content/applications/applications.json');
+  const fileContents = fs.readFileSync(filePath, 'utf8');
+  const data = JSON.parse(fileContents);
+
+  return data.applications; // Assuming the "applications" key holds the array of applications
+}
+
+export function getApplicationById(id) {
+  const applications = getApplications();
+  const application = applications.find(app => app.app_id === id);
+  return application;
+}

content/applications/applications.json

@@ -0,0 +1,35 @@
+{
+    "applications": [
+      {
+        "name": "Airview",
+        "app_id": "APP1",
+        "description": "Documentation, Compliance and Control for Cloud.",
+        "environments": {
+          "development": "subscription-1234",
+          "staging": "subscription-5678",
+          "production": "subscription-9012"
+        }
+      },
+      {
+        "name": "CoolTool",
+        "app_id": "APP2",
+        "description": "A powerful tool for creative professionals.",
+        "environments": {
+          "development": "subscription-3456",
+          "staging": "subscription-7890",
+          "production": "subscription-2345"
+        }
+      },
+      {
+        "name": "InnovativeApp",
+        "app_id": "APP3",
+        "description": "A cutting-edge application with advanced features.",
+        "environments": {
+          "development": "subscription-6789",
+          "staging": "subscription-0123",
+          "production": "subscription-4567"
+        }
+      }
+    ]
+  }
+

package.json

@@ -25,6 +25,7 @@
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.11.7",
     "@mui/utils": "^5.13.1",
+    "@mui/x-date-pickers": "^6.5.0",
     "@next/mdx": "^13.4.3",
     "@sentry/nextjs": "^7.52.1",
     "ahooks": "^3.7.7",

pages/api/applications/[id].js

@@ -0,0 +1,19 @@
+// pages/api/applications/[id].js
+
+import { getApplicationById } from '../../../utils/applications';
+
+export default function handler(req, res) {
+  if (req.method === 'GET') {
+    const { id } = req.query;
+    const application = getApplicationById(id);
+
+    if (application) {
+      res.status(200).json(application);
+    } else {
+      res.status(404).json({ error: 'Application not found' });
+    }
+  } else {
+    res.setHeader('Allow', ['GET']);
+    res.status(405).end(`Method ${req.method} Not Allowed`);
+  }
+}

pages/api/applications/index.js

@@ -0,0 +1,11 @@
+import { getApplications } from '../../../backend/applications';
+
+export default function handler(req, res) {
+  if (req.method === 'GET') {
+    const applications = getApplications();
+    res.status(200).json(applications);
+  } else {
+    res.setHeader('Allow', ['GET']);
+    res.status(405).end(`Method ${req.method} Not Allowed`);
+  }
+}

pages/applications/[app_id].jsx

@@ -0,0 +1,163 @@
+import React from "react";
+
+import { Typography, Box } from "@mui/material";
+
+import Topbar from '../../components/TopBar';
+import { theme } from '../../constants/baseTheme';
+import { ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import Grid from '@mui/material/Grid';
+import { getApplications, getApplicationById } from '../../backend/applications';
+
+import { ComplianceTable } from "../../components/airview-compliance-ui/features/compliance-table";
+import { ControlOverview, useControlOverviewController, } from "../../components/airview-compliance-ui/features/control-overview";
+import dynamic from 'next/dynamic'
+
+// temporary data
+import { applicationsData } from "../../components/airview-compliance-ui/stories/compliance-table/applications-data";
+import { groups, controls, resources } from "../../components/airview-compliance-ui/stories/control-overview/data";
+///
+
+export default dynamic(() => Promise.resolve(Page), {
+    ssr: false,
+  });
+
+function Page({app}) {
+    const topBarHeight = 64;
+
+    const noDataMessage={
+    title: "No issues",
+    message: "There are no issues to display for this application",
+  };
+  const invalidPermissionsMessage = {
+    title: "Notice",
+    message: "You do not have the required permissions to view the data for this application",
+  };
+
+    return (
+        <ThemeProvider theme={theme}>
+            <CssBaseline />
+            <Topbar menu={false} topBarHeight={topBarHeight} logo={true} />
+            <div style={{ marginTop: topBarHeight, paddingLeft: 0, }}
+            ><Box sx={{ px: '5%' }}>
+                    {app && app.name && <Typography variant="h1" component="h1">{app.name}</Typography>}
+                    {app && app.description && <Typography variant="h4" color='text.highlight'>{app.description}</Typography>}
+                    {/* <Container maxWidth="lg" sx={{ height: '100vh' }}> */}
+                    <Grid container spacing={4} alignItems="stretch">
+                        <Grid item xs={3} md={3} sx={{ mb: '20px' }}>
+                        </Grid>
+                    </Grid>
+
+                    <ComplianceTable title="Issues" noDataMessage={noDataMessage} invalidPermissionsMessage={invalidPermissionsMessage} loading={false} applications={applicationsData} />;
+                    <ApplicationControls/>
+                    {/* </Container> */}
+                </Box>
+            </div>
+        </ThemeProvider>
+    )
+}
+
+
+export async function getStaticPaths() {
+    let pages = [];
+    let location = 'services';
+    try {
+        const apps = await getApplications()
+        const pages = apps.map((file) => {
+            return '/applications/' + file.id
+        })
+        return {
+            fallback: true,
+            paths: pages
+        }
+    } catch (error) {
+        console.error(error)
+        return {
+            fallback: true,
+            paths: pages
+        }
+    }
+
+
+}
+export async function getStaticProps(context) {
+    try {
+        const app = await getApplicationById(context.params.app_id);
+        return {
+            props: {
+                app: app
+            },
+        };
+    } catch (error) {
+        console.error(error);
+        return {
+            props: {
+                app: {}
+            },
+        };
+    }
+}
+
+
+const ApplicationControls = () => {
+    const [state, setControlsData, setResourcesData] =
+      useControlOverviewController(() => {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            resolve(groups);
+          }, [500]);
+        });
+      }, 1);
+
+    const handleOnRequestOfControlsData = (id) => {
+      setControlsData(id, () => {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            if (id === 3) resolve("error");
+
+            resolve(controls[id]);
+          }, [500]);
+        });
+      });
+    };
+
+    const handleOnRequestOfResourcesData = (id) => {
+      setResourcesData(id, () => {
+        return new Promise((resolve) => {
+          setTimeout(() => {
+            if (id === 3) resolve("error");
+
+            resolve(resources[id]);
+          }, [500]);
+        });
+      });
+    };
+
+    const handleOnResourceExemptionDelete = () => {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve();
+        }, [1000]);
+      });
+    };
+
+    const handleOnResourceExemptionSave = () => {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          resolve();
+        }, [1000]);
+      });
+    };
+
+    return (
+      <ControlOverview
+        title="Control Overview"
+        data={state}
+        onRequestOfControlsData={handleOnRequestOfControlsData}
+        onRequestOfResourcesData={handleOnRequestOfResourcesData}
+        onResourceExemptionDelete={handleOnResourceExemptionDelete}
+        onResourceExemptionSave={handleOnResourceExemptionSave}
+      />
+    );
+  };
+