UI: Add a Pacman Ghost for errors

MacroPower · Feb 8, 2020 · e8b387a · e8b387a
1 parent 880560f
commit e8b387a
Show file tree

Hide file tree

Showing 6 changed files with 321 additions and 5 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -22,6 +22,7 @@
     "flat": "^5.0.0",
     "history": "^4.10.1",
     "js-cookie": "^2.2.1",
+    "node-sass": "^4.13.1",
     "ping.js": "^0.2.3",
     "rc-steps": "^3.5.0",
     "react": "^16.12.0",

diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import './App.css';
+import './styles/App.css';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { faReact } from '@fortawesome/free-brands-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

diff --git a/ui/src/components/Ghost.tsx b/ui/src/components/Ghost.tsx
@@ -0,0 +1,100 @@
+import '../styles/ghost.scss';
+import React from 'react';
+
+type polyPoint = number[][];
+
+function Polygon(props: { points: polyPoint; scale?: number }) {
+  const scale = props.scale;
+
+  const s = props.points.map((point: number[]) => {
+    return point
+      .map(x => {
+        if (scale) {
+          return x / scale;
+        }
+        return x;
+      })
+      .join(' ');
+  });
+
+  return <polygon points={s.join(', ')} />;
+}
+
+export default function PacmanGhost() {
+  return (
+    <div className="ghost inky mt-4">
+      <div className="ghost__body">
+        <svg>
+          <Polygon
+            scale={2}
+            points={[
+              [0, 24],
+              [4, 24],
+              [4, 12],
+              [8, 12],
+              [8, 8],
+              [12, 8],
+              [12, 4],
+              [20, 4],
+              [20, 0],
+              [36, 0],
+              [36, 4],
+              [44, 4],
+              [44, 8],
+              [48, 8],
+              [48, 12],
+              [52, 12],
+              [52, 24],
+              [56, 24],
+              [56, 48],
+              [0, 48]
+            ]}
+          />
+        </svg>
+      </div>
+      <div className="ghost__eye--left">
+        <svg>
+          <Polygon
+            scale={2}
+            points={[
+              [4, 0],
+              [12, 0],
+              [12, 4],
+              [16, 4],
+              [16, 16],
+              [12, 16],
+              [12, 20],
+              [4, 20],
+              [4, 16],
+              [0, 16],
+              [0, 4],
+              [4, 4]
+            ]}
+          />
+        </svg>
+      </div>
+      <div className="ghost__eye--right">
+        <svg>
+          <Polygon
+            scale={2}
+            points={[
+              [4, 0],
+              [12, 0],
+              [12, 4],
+              [16, 4],
+              [16, 16],
+              [12, 16],
+              [12, 20],
+              [4, 20],
+              [4, 16],
+              [0, 16],
+              [0, 4],
+              [4, 4]
+            ]}
+          />
+        </svg>
+      </div>
+      <div className="ghost__feet" />
+    </div>
+  );
+}
diff --git a/ui/src/components/deployment/run/RunDeploy.tsx b/ui/src/components/deployment/run/RunDeploy.tsx
@@ -4,6 +4,7 @@ import Steps from 'rc-steps';
 import { PacmanLoader } from 'react-spinners';
 import { UseGlobalSettings, UseGlobalSession } from '../../Global';
 import DeployRequest from './DeployRequest';
+import PacmanGhost from '../../Ghost';
 
 type stepStatus = 'working' | 'error';
 
@@ -53,7 +54,7 @@ export default function RunDeploy() {
 
     DeployRequest(endpoint, 'telegraf', state.Telegraf.toString())
       .then(() => addStep('Deploy Telegraf', 'Asking OmegaGraf to create the container'))
-      .catch(() => setLastStep('Deploy Telegraf', 'Error Exception', 'error'));
+      .catch(() => setLastStep('Deploy Telegraf', 'Error creating container, please check server logs', 'error'));
   };
 
   return (
@@ -67,9 +68,11 @@ export default function RunDeploy() {
         <Steps current={steps.length - 1} direction="vertical" size="large">
           {steps.map((step, i) => {
             const isError = step.status === 'error';
-            const iconColor = isError ? '#f50' : '#007bff';
-            const icon = (
-              <PacmanLoader size={15} color={iconColor} loading={true} />
+
+            const icon = !isError ? (
+              <PacmanLoader size={15} color={'#007bff'} loading={true} />
+            ) : (
+              <PacmanGhost />
             );
             return (
               <Steps.Step

diff --git a/ui/src/App.css → ui/src/styles/App.css b/ui/src/App.css → ui/src/styles/App.css
@@ -164,4 +164,9 @@ body {
 
 .rc-steps-item-finish > .rc-steps-item-container > .rc-steps-item-content {
   margin-top: -1px;
+}
+
+.rc-steps-item-error > .rc-steps-item-container > .rc-steps-item-content {
+  margin-top: 2px;
+  margin-left: 40px;
 }
diff --git a/ui/src/styles/ghost.scss b/ui/src/styles/ghost.scss
@@ -0,0 +1,207 @@
+$ghost-color: orange;
+$ghosts: blinky, pinky, clyde, inky ;
+$colors: red, pink, orange, cyan ;
+$ghosts-colors: zip($ghosts, $colors);
+$duration: 6s;
+$scale: 2;
+
+@keyframes eyes {
+  0% {
+    top: (14px / $scale);
+  }
+  10% {
+    top: (16px / $scale);
+  }
+  50% {
+    top: (14px / $scale);
+  }
+  70% {
+    top: (16px / $scale);
+  }
+  100% {
+    top: (14px / $scale);
+  }
+}
+@keyframes eyesballs {
+  0% {
+    top: 0;
+    left: (4px / $scale);
+  }
+  10% {
+    top: (8px / $scale);
+    left: 0;
+  }
+  20% {
+    left: (4px / $scale);
+    top: (12px / $scale);
+  }
+  40% {
+    top: (8px / $scale);
+    left: 0;
+  }
+  50% {
+    top: 0;
+    left: (4px / $scale);
+  }
+  70% {
+    top: (8px / $scale);
+    left: (8px / $scale);
+  }
+  90% {
+    left: (4px / $scale);
+    top: (12px / $scale);
+  }
+  100% {
+    top: 0;
+    left: (4px / $scale);
+  }
+}
+
+@keyframes feet {
+  0% {
+    box-shadow:
+        (4px / $scale) 0 $ghost-color,
+        (8px / $scale) 0 $ghost-color,
+        (12px / $scale) 0 $ghost-color,
+
+        (4px / $scale) (4px / $scale) $ghost-color,
+        (8px / $scale) (4px / $scale) $ghost-color,
+
+        (20px / $scale) 0 $ghost-color,
+        (24px / $scale) 0 $ghost-color,
+        (28px / $scale) 0 $ghost-color,
+        (32px / $scale) 0 $ghost-color,
+
+        (24px / $scale) (4px / $scale) $ghost-color,
+        (28px / $scale) (4px / $scale) $ghost-color,
+
+        (40px / $scale) 0 $ghost-color,
+        (44px / $scale) 0 $ghost-color,
+        (48px / $scale) 0 $ghost-color,
+        (52px / $scale) 0 $ghost-color,
+
+        (44px / $scale) (4px / $scale) $ghost-color,
+        (48px / $scale) (4px / $scale) $ghost-color
+      ;
+  }
+  50% { 
+    box-shadow:
+        0 (4px / $scale) $ghost-color,
+        (4px / $scale) 0 $ghost-color,
+
+        (12px / $scale) 0 $ghost-color,
+        (16px / $scale) 0 $ghost-color,
+        (20px / $scale) 0 $ghost-color,
+        (16px / $scale) (4px / $scale) $ghost-color,
+        (20px / $scale) (4px / $scale) $ghost-color,
+
+        (32px / $scale) 0 $ghost-color,
+        (36px / $scale) 0 $ghost-color,
+        (40px / $scale) 0 $ghost-color,
+        (32px / $scale) (4px / $scale) $ghost-color,
+        (36px / $scale) (4px / $scale) $ghost-color,
+
+        (48px / $scale) 0 $ghost-color,
+        (52px / $scale) 0 $ghost-color,
+        (52px / $scale) (4px / $scale) $ghost-color
+      ;
+  }
+  100% {
+    box-shadow:
+        (4px / $scale) 0 $ghost-color,
+        (8px / $scale) 0 $ghost-color,
+        (12px / $scale) 0 $ghost-color,
+
+        (4px / $scale) (4px / $scale) $ghost-color,
+        (8px / $scale) (4px / $scale) $ghost-color,
+
+        (20px / $scale) 0 $ghost-color,
+        (24px / $scale) 0 $ghost-color,
+        (28px / $scale) 0 $ghost-color,
+        (32px / $scale) 0 $ghost-color,
+
+        (24px / $scale) (4px / $scale) $ghost-color,
+        (28px / $scale) (4px / $scale) $ghost-color,
+
+        (40px / $scale) 0 $ghost-color,
+        (44px / $scale) 0 $ghost-color,
+        (48px / $scale) 0 $ghost-color,
+        (52px / $scale) 0 $ghost-color,
+
+        (44px / $scale) (4px / $scale) $ghost-color,
+        (48px / $scale) (4px / $scale) $ghost-color
+      ;
+  }
+}
+
+.ghost {
+  position: absolute;
+    top: 0;
+    left: 0;
+  width: (56px / $scale);
+  height: (56px / $scale);
+
+  animation-name: move;
+  animation-duration: $duration;
+  animation-timing-function: linear;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+} 
+.ghost__feet {
+  animation-name: feet;
+  animation-duration: .4s;
+  animation-fill-mode: forwards;
+  animation-timing-function: steps(1);
+  animation-iteration-count: infinite;
+
+  background: $ghost-color;
+  content: '';
+  display: block;
+  position: absolute;
+    top: (48px / $scale);
+    left: 0;
+  width: (4px / $scale);
+  height: (4px / $scale);
+  z-index: 1;
+}
+.ghost__body {
+  fill: $ghost-color;
+}
+%ghost__eye {
+  fill: #fff;
+  position: absolute;
+    top: (16px / $scale);
+  width: (16px / $scale);
+  height: (20px / $scale);
+
+  animation-name: eyes;
+  animation-duration: $duration;
+  animation-fill-mode: forwards;
+  animation-timing-function: steps(1);
+  animation-iteration-count: infinite;
+
+    &:after {
+    background: blue;
+    content: '';
+    display: block;
+    position: absolute;
+      top: (8px / $scale);
+      left: 0;
+    width: (8px / $scale);
+    height: (8px / $scale);
+
+    animation-name: eyesballs;
+    animation-duration: $duration;
+    animation-fill-mode: forwards;
+    animation-timing-function: steps(1);
+    animation-iteration-count: infinite;
+  }
+}
+.ghost__eye--left {
+  @extend %ghost__eye;
+    left: (8px / $scale);
+}
+.ghost__eye--right {
+  @extend %ghost__eye;
+    right: (8px / $scale);
+}