fix: show error if check update/save fails (#68)

grafana · Aug 11, 2020 · ec745d8 · ec745d8
1 parent e995db8
commit ec745d8
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 14 deletions.
diff --git a/src/components/CheckEditor.tsx b/src/components/CheckEditor.tsx
@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react';
+import { css } from 'emotion';
 import {
   Button,
   Container,
@@ -11,9 +12,10 @@ import {
   Select,
   Legend,
   Collapse,
+  Alert,
 } from '@grafana/ui';
 import { SelectableValue } from '@grafana/data';
-import { Check, Label as SMLabel, Settings, CheckType, Probe, OrgRole } from 'types';
+import { Check, Label as SMLabel, Settings, CheckType, Probe, OrgRole, APIError } from 'types';
 import { SMDataSource } from 'datasource/DataSource';
 import { hasRole, checkType, defaultSettings } from 'utils';
 import { PingSettingsForm } from './PingSettings';
@@ -36,6 +38,7 @@ interface State {
   probes: Probe[];
   showDeleteModal: boolean;
   showOptions: boolean;
+  error?: APIError;
 }
 
 export class CheckEditor extends PureComponent<Props, State> {
@@ -131,19 +134,21 @@ export class CheckEditor extends PureComponent<Props, State> {
   onSave = async () => {
     const { instance } = this.props;
     const { check } = this.state;
-    if (!check) {
-      return;
-    }
-    if (check.id) {
-      console.log('UPDATE', check, instance);
-      const info = await instance.updateCheck(check);
-      console.log('got', info);
-    } else {
-      console.log('ADD', check);
-      const info = await instance.addCheck(check);
-      console.log('got', info);
+    try {
+      if (check.id) {
+        await instance.updateCheck(check);
+      } else {
+        await instance.addCheck(check);
+      }
+      this.props.onReturn(true);
+    } catch (e) {
+      this.setState({
+        error: {
+          status: e.status,
+          message: e.data?.message ?? 'Something went wrong',
+        },
+      });
     }
-    this.props.onReturn(true);
   };
 
   onEnableChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -161,7 +166,7 @@ export class CheckEditor extends PureComponent<Props, State> {
   };
 
   render() {
-    const { check, showDeleteModal, probes, typeOfCheck, showOptions } = this.state;
+    const { check, showDeleteModal, probes, typeOfCheck, showOptions, error } = this.state;
     if (!check || probes.length === 0) {
       return <div>Loading...</div>;
     }
@@ -317,6 +322,17 @@ export class CheckEditor extends PureComponent<Props, State> {
           />
           <a onClick={this.onBack}>Back</a>
         </HorizontalGroup>
+        {error && (
+          <div
+            className={css`
+              margin-top: 1rem;
+            `}
+          >
+            <Alert title="Save failed" severity="error">
+              {`${error.status}: ${error.message}`}
+            </Alert>
+          </div>
+        )}
       </div>
     );
   }

diff --git a/src/types.ts b/src/types.ts
@@ -226,3 +226,8 @@ export enum OrgRole {
   EDITOR = 'Editor',
   VIEWER = 'Viewer',
 }
+
+export interface APIError {
+  status: number;
+  message: string;
+}