fixup! #19 Check if backend is available, + alert messages

dmnverifierfrontend/src/main/resources/META-INF/resources/css/stylesheets.css

@@ -154,7 +154,13 @@ select:focus::-ms-value {
 #dmn-button-verify {
   flex-grow: 1;
   max-width: 90px;
-  height: 35px;
+  background: white;
+  border-radius: 2px;
+}
+
+#dmn-button-reload-verifier {
+  flex-grow: 1;
+  max-width: 120px;
   background: white;
   border-radius: 2px;
 }
@@ -162,6 +168,7 @@ select:focus::-ms-value {
 .dmn-verifier-header-item {
   margin: 8px 12px;
   color: #0b3004;
+  min-height: 35px;
   cursor: pointer;
   font-family: 'Open Sans', sans-serif;
   font-size: 13px;

dmnverifierfrontend/src/main/resources/META-INF/resources/js/dmnVerifier.js

@@ -2,6 +2,10 @@ let rootUrl = 'http://' + window.location.hostname + ':8080/';
 let dmnApi = rootUrl + 'api/dmn/';
 let inactiveBackend = true;
 
+$(document).ready(function () {
+  // load types
+  loadAvailableTypes();
+});
 /**
  * Global definition for verification results
  * @type {VerifierResultSet}
@@ -19,71 +23,84 @@ let $verifierTypes;
 function handleStatus() {
   let $dot = $('#backend-status');
   if (inactiveBackend) {
+    verifierResults = {};
     $dot.removeClass('active');
     $dot.addClass('inactive');
+    alert(
+        "Error: The backend is currently not available. Please try again later.")
   } else {
     $dot.removeClass('inactive');
     $dot.addClass('active');
   }
+  cleanDmnVerifierRoot();
 }
 
-// load types
-$.ajax({
-  timeout: 500,
-  url: dmnApi + 'verification/types',
-  type: 'GET',
-  contentType: 'text/xml',
-  error: function (err) {
-    verifierResults = {};
-    inactiveBackend = true;
-    handleStatus();
-  },
-  success: function (data) {
-    inactiveBackend = false;
-    handleStatus();
-    types = data;
-    // sort types by classification and name
-    types.sort(function (
-        /** VerificationType */ firstEl, /** VerificationType */ secondEl) {
-      if (firstEl.classification.name
-          === secondEl.classification.name) {
-        if (firstEl.niceName === secondEl.niceName) {
-          return 0;
+function loadAvailableTypes() {
+  $.ajax({
+    timeout: 500,
+    url: dmnApi + 'verification/types',
+    type: 'GET',
+    contentType: 'text/xml',
+    error: function (err) {
+      inactiveBackend = true;
+      handleStatus();
+    },
+    success: function (data) {
+      inactiveBackend = false;
+      types = data;
+      // sort types by classification and name
+      types.sort(function (
+          /** VerificationType */ firstEl, /** VerificationType */ secondEl) {
+        if (firstEl.classification.name
+            === secondEl.classification.name) {
+          if (firstEl.niceName === secondEl.niceName) {
+            return 0;
+          }
+          return firstEl.niceName < secondEl.niceName ? -1 : 1;
+        } else if (firstEl.classification.name
+            < secondEl.classification.name) {
+          return -1;
+        } else {
+          return 1;
         }
-        return firstEl.niceName < secondEl.niceName ? -1 : 1;
-      } else if (firstEl.classification.name
-          < secondEl.classification.name) {
-        return -1;
-      } else {
-        return 1;
-      }
-    });
-    $verifierTypes = renderTypeOptions();
-  }
-});
+      });
+      $verifierTypes = renderTypeOptions();
+      handleStatus();
+    }
+  });
+}
 
 function cleanDmnVerifierRoot() {
   let $root = $('#root-dmn-verifier').empty();
   let $header = $(`      
       <div id="dmn-verifier-header">
   `);
-  // add types
-  $header.append($verifierTypes);
-  $verifierTypes.select2({
-    containerCssClass: "dmn-verifier-header-item dmn-verifier-select clickable",
-    placeholder: {
-      id: -1,
-      text: "All verifier"
-    },
-    allowClear: true
-  });
-  // Add Button
-  $header.append($(`
+  // check, if backend is available
+  if ($verifierTypes === undefined) {
+    $header.append($(`
+    <button class="clickable dmn-verifier-header-item" id="dmn-button-reload-verifier" 
+    title="Reconnect backend" onClick="loadAvailableTypes()">
+    Reconnect verification backend</button>
+    `));
+  } else {
+    $header.append($verifierTypes);
+    $verifierTypes.select2({
+      containerCssClass: "dmn-verifier-header-item dmn-verifier-select clickable",
+      placeholder: {
+        id: -1,
+        text: "All verifier"
+      },
+      allowClear: true
+    });
+    // Add Button
+    $header.append($(`
     <button class="clickable dmn-verifier-header-item" id="dmn-button-verify" 
     title="Request verifications" onClick="checkVerifications()">
     Verify</button>
   `));
-  // add header to root
+  }
+
+// add header to root
   $root.append($header);
   $root.append($(`<div id="dmn-verifier-content">`));
   return $root;
@@ -97,8 +114,7 @@ function checkVerifications() {
 function getVerifications() {
   dmnModeler.saveXML({format: true}, function (err, xml) {
     if (err) {
-      return console.log(
-          'There is an error in requesting the dmn verifications.. ' + err);
+      return alert(err);
     } else {
       console.log('Requesting dmn verifications..');
     }
@@ -122,6 +138,10 @@ function getVerifications() {
       contentType: 'text/xml',
       data: xml,
 
+      error: function (err) {
+        alert(
+            'Error: There was a fatal error while parsing the xml of the dmn.');
+      },
       success: function (data) {
         console.log('successful dmn verification request:');
         console.log(data);
@@ -221,17 +241,6 @@ function renderDmnVerifierOptions() {
   }
 }
 
-/**
- *
- * @param verifier
- * @type VerifierResult
- */
-function renderSelectEntry(verifier) {
-  return $(`
-      <option value="${verifier.type.name}">${verifier.type.niceName} (${verifier.size})</option>
-    `);
-}
-
 /**
  *
  * @param verifierSelect