feat: gracefully handle service issues (#181)

package.json

@@ -38,6 +38,7 @@
     "eslint-config-react-app": "^7.0.1",
     "eslint-webpack-plugin": "^3.1.1",
     "file-loader": "^6.2.0",
+    "font-awesome": "^4.7.0",
     "fs-extra": "^10.0.0",
     "html-webpack-plugin": "^5.5.0",
     "identity-obj-proxy": "^3.0.0",

src/components/Converter/index.tsx

@@ -6,6 +6,7 @@ import {
   FieldSet,
   Modal,
   Select,
+  Spinner,
   TextArea,
 } from "@grafana/ui";
 import { css } from "@emotion/css";
@@ -49,7 +50,7 @@ const convertConfig = async (
     return {
       diagnostics: [
         {
-          Severity: 1,
+          Severity: 4,
           Summary: "failed to convert: " + (await resp.text()),
           Detail: "",
         },
@@ -63,6 +64,8 @@ const convertConfig = async (
 const Converter = ({ dismiss }: { dismiss: () => void }) => {
   const { setModel } = useModelContext();
 
+  const [loading, setLoading] = useState(false);
+
   const [diags, setDiags] = useState<Diagnostic[]>([]);
   const hasDiagnostics = useMemo(() => {
     return diags.length > 0;
@@ -81,6 +84,19 @@ const Converter = ({ dismiss }: { dismiss: () => void }) => {
   });
   const { register, control, handleSubmit } = formAPI;
 
+  const submit = async (values: ConversionRequest) => {
+    setLoading(true);
+    try {
+      const resp = await convertConfig(values);
+      setDiags(resp.diagnostics);
+      if (resp.data) setConverted(resp.data);
+    } catch (ex) {
+      setDiags([{ Severity: 4, Summary: `${ex}`, Detail: "" }]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   return (
     <>
       {!hasDiagnostics && (
@@ -119,15 +135,8 @@ const Converter = ({ dismiss }: { dismiss: () => void }) => {
               </Field>
             </FieldSet>
             <Modal.ButtonRow>
-              <Button
-                type="button"
-                onClick={handleSubmit(async (values) => {
-                  const resp = await convertConfig(values);
-                  setDiags(resp.diagnostics);
-                  if (resp.data) setConverted(resp.data);
-                })}
-              >
-                Next
+              <Button type="button" onClick={handleSubmit(submit)}>
+                Next {loading && <Spinner />}
               </Button>
             </Modal.ButtonRow>
           </form>

src/index.tsx

@@ -2,6 +2,7 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import "bootstrap/dist/css/bootstrap.min.css";
 import "rc-drawer/assets/index.css";
+import "font-awesome/css/font-awesome.min.css";
 import App from "./App";
 import { ThemeProvider } from "./theme";
 import { ComponentProvider, ModelProvider } from "./state";
@@ -10,7 +11,7 @@ import { TracingInstrumentation } from "@grafana/faro-web-tracing";
 import { ReactIntegration } from "@grafana/faro-react";
 
 const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement
+  document.getElementById("root") as HTMLElement,
 );
 root.render(
   <ThemeProvider>
@@ -19,7 +20,7 @@ root.render(
         <App />
       </ComponentProvider>
     </ModelProvider>
-  </ThemeProvider>
+  </ThemeProvider>,
 );
 if (process.env.REACT_APP_FARO_URL) {
   initializeFaro({