Moved to Amsterdam notification (equinor#752)

frontend/src/main.tsx

@@ -6,6 +6,7 @@ import { CustomQueryClientProvider } from "@framework/internal/providers/QueryCl
 
 import App from "./App";
 import { GlobalErrorBoundary } from "./GlobalErrorBoundary";
+import { TempMovedToAmsterdamNotifier } from "./tempMoved/TempMovedToAmsterdamNotifier";
 
 /*
     If the `cleanStart` query parameter is given, 
@@ -28,14 +29,22 @@ if (!container) {
 
 const root = createRoot(container);
 
-root.render(
-    <React.StrictMode>
-        <GlobalErrorBoundary>
-            <AuthProvider>
-                <CustomQueryClientProvider>
-                    <App />
-                </CustomQueryClientProvider>
-            </AuthProvider>
-        </GlobalErrorBoundary>
-    </React.StrictMode>
-);
+if (window.location.hostname === "webviz.app.radix.equinor.com") {
+    root.render(
+        <React.StrictMode>
+            <TempMovedToAmsterdamNotifier />
+        </React.StrictMode>
+    );
+} else {
+    root.render(
+        <React.StrictMode>
+            <GlobalErrorBoundary>
+                <AuthProvider>
+                    <CustomQueryClientProvider>
+                        <App />
+                    </CustomQueryClientProvider>
+                </AuthProvider>
+            </GlobalErrorBoundary>
+        </React.StrictMode>
+    );
+}

frontend/src/tempMoved/TempMovedToAmsterdamNotifier.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+import { WebvizSpinnerAmsterdam } from "./WebvizSpinner/webvizSpinnerAmsterdam";
+
+export function TempMovedToAmsterdamNotifier(): React.ReactNode {
+    const [timeLeft, setTimeLeft] = React.useState(10);
+
+    React.useEffect(() => {
+        let internalTimeLeft = 10;
+        const interval = setInterval(() => {
+            if (internalTimeLeft === 0) {
+                window.location.href = "https://webviz.app.c2.radix.equinor.com/";
+                return;
+            }
+            setTimeLeft((prevTimeLeft) => prevTimeLeft - 1);
+            internalTimeLeft--;
+        }, 1000);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    return (
+        <div className="w-screen h-screen flex flex-col items-center justify-center gap-8">
+            <WebvizSpinnerAmsterdam size={100} />
+            <div className="text-lg font-bold">Webviz moved to Amsterdam</div>
+            <div>
+                You can now find us at:{" "}
+                <a href="https://webviz.app.c2.radix.equinor.com/" className="text-blue-600 underline">
+                    https://webviz.app.c2.radix.equinor.com/
+                </a>
+            </div>
+            <div>We are taking you to our new address in {timeLeft}s...</div>
+        </div>
+    );
+}

frontend/src/tempMoved/WebvizSpinner/index.ts

@@ -0,0 +1 @@
+export { WebvizSpinnerAmsterdam as WebvizSpinner } from "./webvizSpinnerAmsterdam";

frontend/src/tempMoved/WebvizSpinner/webvizSpinnerAmsterdam.css

@@ -0,0 +1,85 @@
+.webviz-spinner-amsterdam {
+    position: relative;
+    perspective: 1000;
+}
+
+.webviz-spinner-amsterdam > div {
+    border-color: transparent;
+}
+
+.webviz-spinner-amsterdam > div:nth-child(1) {
+    animation: spin1-amsterdam 1s linear infinite;
+}
+
+.webviz-spinner-amsterdam > div:nth-child(2) {
+    animation: spin2-amsterdam 0.6s linear infinite;
+}
+
+.webviz-spinner-amsterdam > div:nth-child(3) {
+    animation: spin3-amsterdam 0.8s linear infinite;
+}
+
+@keyframes spin1-amsterdam {
+    0% {
+        transform: rotateY(-10deg) rotateX(60deg) rotateY(48deg) rotateZ(0deg);
+        border-top-color: #C8102E;
+        z-index: -2;
+    }
+    49% {
+        transform: rotateY(-10deg) rotateX(60deg) rotateY(48deg) rotateZ(179deg);
+        border-top-color: #C8102E;
+        z-index: 0;
+    }
+    50% {
+        transform: rotateY(-10deg) rotateX(60deg) rotateY(48deg) rotateZ(180deg);
+        border-top-color: #003DA5;
+        z-index: 2;
+    }
+    100% {
+        transform: rotateY(-10deg) rotateX(60deg) rotateY(48deg) rotateZ(359deg);
+        border-top-color: #003DA5;
+        z-index: 0;
+    }
+}
+
+@keyframes spin2-amsterdam {
+    0% {
+        transform: rotateY(10deg) rotateX(60deg) rotateY(-48deg) rotateZ(0deg);
+        border-top-color: #C8102E;
+    }
+    49% {
+        transform: rotateY(10deg) rotateX(60deg) rotateY(-48deg) rotateZ(179deg);
+        border-top-color: #C8102E;
+    }
+    50% {
+        transform: rotateY(10deg) rotateX(60deg) rotateY(-48deg) rotateZ(180deg);
+        border-top-color: #003DA5;
+    }
+    100% {
+        transform: rotateY(10deg) rotateX(60deg) rotateY(-48deg) rotateZ(359deg);
+        border-top-color: #003DA5;
+    }
+}
+
+@keyframes spin3-amsterdam {
+    0% {
+        transform: rotateX(58deg) rotateZ(0deg);
+        border-top-color: #003DA5;
+        z-index: -1;
+    }
+    49% {
+        transform: rotateX(58deg) rotateZ(179deg);
+        border-top-color: #003DA5;
+        z-index: 0;
+    }
+    50% {
+        transform: rotateX(58deg) rotateZ(180deg);
+        border-top-color: #C8102E;
+        z-index: 1;
+    }
+    100% {
+        transform: rotateX(58deg) rotateZ(359deg);
+        border-top-color: #C8102E;
+        z-index: 0;
+    }
+}

frontend/src/tempMoved/WebvizSpinner/webvizSpinnerAmsterdam.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+import "./webvizSpinnerAmsterdam.css";
+
+export type WebvizSpinnerAmsterdamProps = {
+    size: number;
+};
+
+export const WebvizSpinnerAmsterdam: React.FC<WebvizSpinnerAmsterdamProps> = (props) => {
+    const borderWidth = props.size / 10;
+    return (
+        <div style={{ width: props.size, height: props.size }} className="webviz-spinner-amsterdam">
+            <div
+                className="rounded-full absolute border-t-[#003DA5]"
+                style={{
+                    borderWidth: borderWidth,
+                    width: props.size - 0,
+                    height: props.size - 0,
+                    top: 5,
+                }}
+            />
+            <div
+                className="rounded-full absolute border-t-[#003DA5]"
+                style={{
+                    borderWidth: borderWidth,
+                    width: props.size - 0,
+                    height: props.size - 0,
+                }}
+            />
+            <div
+                className="rounded-full absolute border-t-[#C8102E]"
+                style={{
+                    borderWidth: borderWidth,
+                    width: props.size - 8,
+                    height: props.size - 8,
+                    top: 12,
+                    left: 5,
+                }}
+            />
+        </div>
+    );
+};