update frontend and add GHA

r-Techsupport · Nov 3, 2024 · 77fc997 · 77fc997
1 parent 903ed0a
commit 77fc997
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 39 deletions.
diff --git a/.github/workflows/azure-swa.yml b/.github/workflows/azure-swa.yml
@@ -0,0 +1,64 @@
+name: Azure Static Web Apps CI/CD
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [opened, synchronize, reopened, closed]
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  build_and_deploy_job:
+    runs-on: ubuntu-latest
+    name: Build and Deploy Job
+    permissions:
+      pull-requests: write
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          submodules: true
+          lfs: false
+
+      - name: Create .env file
+        uses: SpicyPizza/create-envfile@v1
+        with:
+          envkey_REACT_APP_SITE_NAME: ${{ secrets.REACT_APP_SITE_NAME }}
+          envkey_REACT_APP_REPO_URL: ${{ secrets.REACT_APP_REPO_URL }}
+          envkey_REACT_APP_API_URL: ${{ secrets.REACT_APP_API_URL }}
+
+      - name: Build And Deploy
+        id: builddeploy
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
+          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
+          action: "upload"
+          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
+          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
+          app_location: "/" # App source code path
+          output_location: "/build" # Built app content directory - optional
+          ###### End of Repository/Build Configurations ######
+
+  close_pr:
+    if: github.event_name == 'pull_request' && github.actor == 'dependabot[bot]' 
+    runs-on: ubuntu-latest
+    needs: 
+      - build_and_deploy_job
+    permissions:
+      contents: write
+      pull-requests: write
+    steps:
+      - name: Dependabot metadata
+        id: dependabot-metadata
+        uses: dependabot/fetch-metadata@v2
+        with:
+          github-token: "${{ secrets.GITHUB_TOKEN }}"
+      - name: Merge PR
+        if: steps.dependabot-metadata.outputs.update-type == 'version-update:semver-patch' || steps.dependabot-metadata.outputs.update-type == 'version-update:semver-minor'
+        run: gh pr merge --auto --merge "$PR_URL"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GH_TOKEN: ${{secrets.GITHUB_TOKEN}}
diff --git a/swa/src/App.js b/swa/src/App.js
@@ -4,7 +4,7 @@ import Footer from './footer';
 
 // Retrieve the site name and API URL from environment variables
 const SITE_NAME = process.env.REACT_APP_SITE_NAME;
-const API_URL = process.env.REACT_APP_API_URL;
+const API_URL = `${process.env.REACT_APP_API_URL}/analyze-dmp`;
 
 const FileUpload = () => {
   const [file, setFile] = useState(null);
@@ -41,7 +41,7 @@ const FileUpload = () => {
         throw new Error('Network response was not ok');
       }
 
-      const data = await response.json();
+      const data = await response.text();
       setResponseData(data);
     } catch (error) {
       console.error('Error uploading file:', error);
@@ -67,7 +67,7 @@ const FileUpload = () => {
         throw new Error('Network response was not ok');
       }
 
-      const data = await response.json();
+      const data = await response.text();
       setResponseData(data);
     } catch (error) {
       console.error('Error submitting URL:', error);
@@ -79,34 +79,39 @@ const FileUpload = () => {
 
   return (
     <div>
-      <Helmet>
-        <title>{SITE_NAME}</title>
-      </Helmet>
-      <div id="container">
-        <div id="header">
-          <h1 id="site_name">{SITE_NAME}</h1>
+        <Helmet>
+            <title>{SITE_NAME}</title>
+        </Helmet>
+        <div id="container"> 
+            <div id="header">
+                <h1 id="site_name">{SITE_NAME}</h1>
+            </div>
+            <div class="button-container">
+                <div class="button-div">
+                    <input type="file" onChange={handleFileChange} />
+                    <button onClick={handleFileUpload} disabled={loading}>
+                        {loading ? 'Uploading...' : 'Upload File'}
+                    </button>
+                </div>
+                <div class="button-div">
+                    <input type="text" value={url} onChange={handleUrlChange} placeholder="Enter URL" />
+                    <button onClick={handleUrlSubmit} disabled={loading}>
+                        {loading ? 'Submitting...' : 'Upload URL'}
+                    </button>
+                </div>
+            </div>
+
+            <div id="content">
+                {!error && !responseData && <p>Upload your .dmp file or provide a download link above</p>}
+                {error && <p style={{ color: 'red' }}>{error}</p>}
+                {responseData && (
+                <div id="content">
+                    <pre>{responseData}</pre> {/* Display the plain text response */}
+                </div>
+                )}
+            </div>
+            <Footer />
         </div>
-        <div>
-          <input type="file" onChange={handleFileChange} />
-          <button onClick={handleFileUpload} disabled={loading}>
-            {loading ? 'Uploading...' : 'Upload File'}
-          </button>
-        </div>
-        <div>
-          <input type="text" value={url} onChange={handleUrlChange} placeholder="Enter URL" />
-          <button onClick={handleUrlSubmit} disabled={loading}>
-            {loading ? 'Submitting...' : 'Submit URL'}
-          </button>
-        </div>
-        {error && <p style={{ color: 'red' }}>{error}</p>}
-        {responseData && (
-          <div id="content">
-            <h2>Response Data:</h2>
-            <pre>{JSON.stringify(responseData, null, 2)}</pre>
-          </div>
-        )}
-        <Footer />
-      </div>
     </div>
   );
 };

diff --git a/swa/src/style.css b/swa/src/style.css
@@ -36,9 +36,17 @@ body {
     border-radius: .5em;
     padding: 1em;
 }
+.button-container {
+    padding-bottom: 1em;
+    display: flex;
+}
+.button-div {
+    padding-right: 2em;
+}
 footer {
     text-align: right;
-    padding: 1em;
+    padding-top: 1em;
+    padding-right: 1em;
     font-size: .75em;
 }
 

diff --git a/template.json b/template.json
@@ -1,12 +1,25 @@
 {
-    "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentParameters.json#",
+    "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#",
     "contentVersion": "1.0.0.0",
-    "parameters": {
-        "location": {
-        "value": "EastUS2"
+    "resources": [
+      {
+        "type": "Microsoft.Web/staticSites",
+        "apiVersion": "2022-09-01",
+        "name": "bsod-swa",
+        "location": "East US 2",
+        "properties": {
+          "repositoryUrl": "https://github.com/PipeItToDevNull/bsod-api",
+          "branch": "main",
+          "buildProperties": {
+            "appLocation": "/swa",
+            "outputLocation": "build"
+          }
         },
-        "swaName": {
-        "value": "bsod-swa"
+        "sku": {
+          "name": "Free",
+          "tier": "Free"
         }
-    }
-}
+      }
+    ]
+  }
+