Merge branch 'dev' of https://github.com/oslabs-beta/CloudShift into dev

oslabs-beta · mjhuff · Apr 6, 2023 · Apr 5, 2023 · Apr 6, 2023 · Apr 6, 2023
commit 09bb5081204eb458dc1e4620768d88787e024b34
diff --git a/build/index.html b/build/index.html
@@ -1,13 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Cloud Shift</title>
- <!-- not sure about stylesheet include with tailwind <link rel="stylesheet" href="style.scss" /> -->
- <script defer src="index_bundle.js"></script></head>
- <body>
- <div id="root"></div>
- </body>
-</html>
+
+<head>
+ <meta charset="UTF-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Cloud Shift</title>
+ <script src="https://cdn.tailwindcss.com"></script>
+ <!-- not sure about stylesheet include with tailwind <link rel="stylesheet" href="style.scss" /> -->
+<script defer src="index_bundle.js"></script></head>
+
+<body class="bg-gradient-to-br from-emerald-100 to-purple-300 !h-screen">
+
+
+ <div id="root"></div>
+ <div id="portal"></div>
+</body>
+
+</html>
diff --git a/build/index_bundle.js b/build/index_bundle.js
diff --git a/client/App.js b/client/App.js
@@ -21,13 +21,10 @@ const App = (props) => {
  </div>
  </div>
  <RemoteContainer></RemoteContainer>
- {origin.selectedBucket && destination.selectedBucket && (
- <MigrationButton></MigrationButton>
- )}
  {isMigrating && <Overlay></Overlay>}
 
  </>
  );
 };
 
-export default App;
+export default App;
diff --git a/client/components/BucketSelect.js b/client/components/BucketSelect.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { updateSelectedBucket } from '../slice';
+import LoadingButton from './LoadingButton'
 
 const BucketSelect = (props) => {
  const dispatch = useDispatch();
- const { bucketOptions } = useSelector((state) => state.GUI[props.remote]);
+ const { bucketLoading, bucketOptions } = useSelector((state) => state.GUI[props.remote]);
  const options = [];
  options.push(<option value="">Select Bucket</option>);
  bucketOptions.forEach((bucket) => {
@@ -16,7 +17,10 @@ const BucketSelect = (props) => {
  });
  return (
  <>
- <label htmlFor="buckets" for="buckets" class="text-xs scale-75">
+ {bucketLoading ? 
+ <LoadingButton></LoadingButton> :
+ <div>
+ <label htmlFor="buckets" for="buckets" class="text-xs scale-75">
  Choose a bucket:
  </label>
  <select
@@ -32,6 +36,9 @@ const BucketSelect = (props) => {
  >
  {options}
  </select>
+ </div>
+ }
+
  </>
  );
 };

diff --git a/client/components/Destination.js b/client/components/Destination.js
@@ -3,10 +3,16 @@ import {
  updateDestinationAccessId,
  updateDestinationSecretKey,
  updateAccountId,
- updateDestinationBuckets
+ updateDestinationBuckets,
+ updateDestinationBucketLoading
 } from '../slice';
 import { useDispatch, useSelector } from 'react-redux';
 import BucketSelect from './BucketSelect';
+import aws_edited from '../public/aws_edited.png'
+import cloudflare_edited from '../public/cloudflare_edited.png'
+import MigrationButton from './MigrationButton';
+
+
 
 const Destination = (props) => {
  const dispatch = useDispatch();
@@ -30,6 +36,7 @@ const Destination = (props) => {
 
  useEffect(() => {
  if (destination.accessId && destination.secretKey) {
+ dispatch(updateDestinationBucketLoading(true))
  if (destination.name === 'Cloudflare' && !destination.accountId) return;
  (async () => {
  const res = await fetch('/listBuckets', {
@@ -45,7 +52,9 @@ const Destination = (props) => {
  })
  });
  const data = await res.json();
- dispatch(updateDestinationBuckets(data));
+ console.log(data)
+ dispatch(updateDestinationBuckets(data))
+ dispatch(updateDestinationBucketLoading(false));
  })();
  }
  }, [
@@ -59,6 +68,13 @@ const Destination = (props) => {
  <>
  <div>
  <div class="relative z-0 w-4/5 mb-6 group text-center text-lg">
+ {!destination.name ?
+ null :
+ <img src={destination.name === 'AWS' ?
+ aws_edited :
+ cloudflare_edited} >
+ </img>
+ }
  Destination
  {props.name && (
  <>
@@ -140,9 +156,23 @@ const Destination = (props) => {
  </div>
  )}
  <div class="relative z-0 w-4/5 mb-6 group">{bucketSelect}</div>
+<div class="relative z-0 w-4/5 mb-6 group">
+
+{origin.selectedBucket && destination.selectedBucket && (
+<MigrationButton></MigrationButton>
+)}
+</div>
  </div>
  </>
  );
 };
 
 export default Destination;
+
+
+{/* <div class="relative z-0 w-4/5 mb-6 group">
+
+{origin.selectedBucket && destination.selectedBucket && (
+<MigrationButton></MigrationButton>
+)}
+</div> */}
diff --git a/client/components/ErrorComponent.js b/client/components/ErrorComponent.js
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/client/components/LoadingButton.js b/client/components/LoadingButton.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+
+const LoadingButton = () => {
+
+ return (
+
+ <button type="button" className="bg-gradient-to-br from-cyan-100 to-stone-50" disabled>
+ <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-black" xmlns="http:https://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+ <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+ </svg>
+ ...Loading Buckets
+ </button>
+
+ )
+}
+
+export default LoadingButton
diff --git a/client/components/Origin.js b/client/components/Origin.js
@@ -4,11 +4,15 @@ import {
  updateOriginAccessId,
  updateAccountId,
  updateOriginBuckets,
- updateErrorState
+ updateErrorState,
+ updateOriginBucketLoading,
 } from '../slice';
 import { useDispatch, useSelector } from 'react-redux';
 import { getUserBuckets } from '../services/getBuckets';
 import BucketSelect from './BucketSelect';
+import aws_edited from '../public/aws_edited.png'
+import cloudflare_edited from '../public/cloudflare_edited.png'
+
 
 const Origin = (props) => {
  const dispatch = useDispatch();
@@ -26,11 +30,14 @@ const Origin = (props) => {
  );
  }
 
+
  //REFACTOR TO RTK QUERY.
  //THIS GETS THE BUCKETS.
  useEffect(() => {
  if (origin.accessId && origin.secretKey) {
+ dispatch(updateOriginBucketLoading(true))
  if (origin.name === 'Cloudflare' && !origin.accountId) return;
+
  (async () => {
  const res = await fetch('/listBuckets', {
  method: 'POST',
@@ -49,6 +56,7 @@ const Origin = (props) => {
  dispatch(updateErrorState(data))
  } else {
  dispatch(updateOriginBuckets(data));
+ dispatch(updateOriginBucketLoading(false))
  }
  }
 
@@ -60,6 +68,8 @@ const Origin = (props) => {
  <>
  <div>
  <div class="relative z-0 w-4/5 mb-6 group text-center text-lg">
+ {!origin.name ? null : <img src={origin.name === 'AWS' ? aws_edited : cloudflare_edited} ></img>}
+
  Origin
  {props.name && (
  <>

diff --git a/client/components/Overlay.js b/client/components/Overlay.js
@@ -3,28 +3,48 @@ import { useSelector } from 'react-redux';
 import aws_edited from '../public/aws_edited.png';
 import cloudflare_edited from '../public/cloudflare_edited.png';
 import ReactDOM from "react-dom"
+import ProgressBar from './ProgressBar'
 
 
 const Overlay = (props) => {
  const { origin, destination } = useSelector((state) => state.GUI);
  const originSrc = origin.name === 'AWS' ? aws_edited : cloudflare_edited;
  const destinationSrc = destination.name === 'AWS' ? aws_edited : cloudflare_edited;
  return ReactDOM.createPortal(
- <div>
- <div>
+ <>
+{/* <div className='flex justify-center item-center fixed z-10 h-screen w-screen bg-transparent left-0 top-0 py-52 '>
+ <div className='flex'>
  <section>
  <h2>{origin.name}</h2>
  <img src={originSrc} alt="origin logo"></img>
  </section>
+ <h1>TO>>>>>></h1>
  <section>
  <h2>{destination.name}</h2>
  <img src={destinationSrc} alt='destination logo'></img>
  </section>
- <p>placeholder for progress bar</p>
- </div>
- </div>,
+ </div> 
+</div> */}
+ <div className='flex fixed z-10 h-screen w-screen bg-transparent'>
+
+ <ProgressBar></ProgressBar>
+ </div>
+ </>
+ ,
  document.querySelector('#portal')
  );
 };
 
 export default Overlay;
+
+
+// display: none; /* Hidden by default */
+// position: fixed; /* Stay in place */
+// z-index: 1; /* Sit on top */
+// left: 0;
+// top: 0;
+// width: 100%; /* Full width */
+// height: 100%; /* Full height */
+// overflow: auto; /* Enable scroll if needed */
+// background-color: rgb(0,0,0); /* Fallback color */
+// background-color: rgba(0,0,0,0.4);
diff --git a/client/components/ProgressBar.js b/client/components/ProgressBar.js
@@ -0,0 +1,26 @@
+import React from 'react'
+
+const ProgressBar = () => {
+
+ return (
+ <div className="relative pt-1 w-2/5 ">
+ <div className="flex mb-2 items-center justify-between">
+ <div>
+ <span className="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-stone-100 bg-emerald-300">
+ Task in progress
+ </span>
+ </div>
+ <div className="text-right">
+ <span className="text-xs font-semibold inline-block text-black-600">
+ 30%
+ </span>
+ </div>
+ </div>
+ <div className="overflow-hidden h-2 mb-4 text-xs flex rounded bg-emerald-100 w-full">
+ <div style={{ width: "30%" }} className="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-emerald-300"></div>
+ </div>
+</div>
+ )
+}
+
+export default ProgressBar
diff --git a/client/input.css b/client/input.css
diff --git a/client/public/index.html b/client/public/index.html
@@ -6,11 +6,11 @@
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Cloud Shift</title>
- <link rel="stylesheet" href="output.css" />
+ <script src="https://cdn.tailwindcss.com"></script>
  <!-- not sure about stylesheet include with tailwind <link rel="stylesheet" href="style.scss" /> -->
 </head>
 
-<body class="bg-gradient-to-br from-emerald-100 to-purple-300 bg-no-repeat h-full w-full">
+<body class="bg-gradient-to-br from-cyan-50 to-stone-200 !h-screen">
 
 
  <div id="root"></div>