Create an easily reusable Spinner component back again

trento-project · Apr 28, 2022 · 1002697 · 1002697
1 parent 9985fd7
commit 1002697
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 41 deletions.
diff --git a/assets/js/components/ClusterDetails/ChecksResults.jsx b/assets/js/components/ClusterDetails/ChecksResults.jsx
@@ -3,9 +3,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
 
 import {
-  EOS_LENS_FILLED,
   EOS_ERROR,
-  EOS_SCHEDULE,
   EOS_ARROW_BACK,
   EOS_SETTINGS,
   EOS_PLAY_CIRCLE,
@@ -47,8 +45,8 @@ const sortHosts = (hosts = []) => {
   });
 };
 
-const getResultIcon = (execution_state, health) => {
-  return <ExecutionIcon health={health} execution_state={execution_state} />;
+const getResultIcon = (executionState, health) => {
+  return <ExecutionIcon health={health} executionState={executionState} />;
 };
 
 export const ChecksResults = () => {

diff --git a/assets/js/components/ClusterDetails/ExecutionIcon.jsx b/assets/js/components/ClusterDetails/ExecutionIcon.jsx
@@ -1,30 +1,21 @@
 import React from 'react';
-import classNames from 'classnames';
+import { computeIconCssClass } from '@lib/icon';
 
-import { EOS_SCHEDULE, EOS_LOADING_ANIMATED } from 'eos-icons-react';
+import { EOS_SCHEDULE } from 'eos-icons-react';
 
 import HealthIcon from '@components/Health';
+import Spinner from '@components/Spinner';
 
-export const ExecutionIcon = ({
-  health,
-  execution_state,
-  centered = false,
-}) => {
-  const computedCssClass = (fillColor, centered) => {
-    return classNames(fillColor, { 'mx-auto': centered });
-  };
-
-  switch (execution_state) {
+export const ExecutionIcon = ({ health, executionState, centered = false }) => {
+  switch (executionState) {
     case 'requested':
       return (
-        <EOS_SCHEDULE className={computedCssClass('fill-gray-500', centered)} />
-      );
-    case 'running':
-      return (
-        <EOS_LOADING_ANIMATED
-          className={computedCssClass('fill-jungle-green-500', centered)}
+        <EOS_SCHEDULE
+          className={computedIconCssClass('fill-gray-500', centered)}
         />
       );
+    case 'running':
+      return <Spinner />;
   }
 
   return <HealthIcon health={health} centered={centered} />;

diff --git a/assets/js/components/ClustersList.jsx b/assets/js/components/ClustersList.jsx
@@ -50,13 +50,10 @@ const ClustersList = () => {
         title: 'Health',
         key: 'health',
         filter: true,
-        render: (health, { checks_execution }) => {
+        render: (health, { checks_execution: checksExecution }) => {
           return (
             <div className="ml-4">
-              <ExecutionIcon
-                health={health}
-                execution_state={checks_execution}
-              />
+              <ExecutionIcon health={health} executionState={checksExecution} />
             </div>
           );
         },

diff --git a/assets/js/components/Health/HealthIcon.jsx b/assets/js/components/Health/HealthIcon.jsx
@@ -1,42 +1,36 @@
 import React from 'react';
-import classNames from 'classnames';
+import { computedIconCssClass } from '@lib/icon';
 
 import { EOS_LENS_FILLED } from 'eos-icons-react';
 
-const HealthIcon = ({ health = undefined, centered = false }) => {
-  const computedCssClass = (fillColor, centered) => {
-    return classNames(fillColor, { 'mx-auto': centered });
-  };
+import Spinner from '@components/Spinner';
 
+const HealthIcon = ({ health = undefined, centered = false }) => {
   switch (health) {
     case 'passing':
       return (
         <EOS_LENS_FILLED
-          className={computedCssClass('fill-jungle-green-500', centered)}
+          className={computedIconCssClass('fill-jungle-green-500', centered)}
         />
       );
     case 'warning':
       return (
         <EOS_LENS_FILLED
-          className={computedCssClass('fill-yellow-500', centered)}
+          className={computedIconCssClass('fill-yellow-500', centered)}
         />
       );
     case 'critical':
       return (
         <EOS_LENS_FILLED
-          className={computedCssClass('fill-red-500', centered)}
+          className={computedIconCssClass('fill-red-500', centered)}
         />
       );
     case 'pending':
-      return (
-        <EOS_LOADING_ANIMATED
-          className={computedCssClass('fill-jungle-green-500', centered)}
-        />
-      );
+      return <Spinner />;
     default:
       return (
         <EOS_LENS_FILLED
-          className={computedCssClass('fill-gray-500', centered)}
+          className={computedIconCssClass('fill-gray-500', centered)}
         />
       );
   }

diff --git a/assets/js/components/Spinner.jsx b/assets/js/components/Spinner.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { computedIconCssClass } from '@lib/icon';
+
+import { EOS_LOADING_ANIMATED } from 'eos-icons-react';
+
+const Spinner = ({ centered = false }) => {
+  return (
+    <EOS_LOADING_ANIMATED
+      className={computedIconCssClass('fill-jungle-green-500', centered)}
+    />
+  );
+};
+
+export default Spinner;
diff --git a/assets/js/lib/icon/index.jsx b/assets/js/lib/icon/index.jsx
@@ -0,0 +1,5 @@
+import classNames from 'classnames';
+
+export const computedIconCssClass = (fillColor, centered) => {
+  return classNames(fillColor, { 'mx-auto': centered });
+};