Replace importer with AJAX powered; better error handling #443 (#447)

* Replace importer with AJAX powered; better error handling #443

* Formatting

* Fix command line importer

modules/Installer/Resources/views/app.blade.php

@@ -12,6 +12,9 @@
 
     <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
           name='viewport'/>
+    <meta name="base-url" content="{!! url('') !!}">
+    <meta name="api-key" content="{!! Auth::check() ? Auth::user()->api_key: '' !!}">
+    <meta name="csrf-token" content="{!! csrf_token() !!}">
 
     <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet"/>
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet"/>
@@ -63,6 +66,9 @@
 
 {{--<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>--}}
 
+<script src="{{ public_mix('/assets/global/js/vendor.js') }}"></script>
+<script src="{{ public_mix('/assets/frontend/js/vendor.js') }}"></script>
+<script src="{{ public_mix('/assets/frontend/js/app.js') }}"></script>
 <script src="{{ public_asset('/assets/installer/js/vendor.js') }}" type="text/javascript"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
 

modules/Installer/Resources/views/importer/error.blade.php

@@ -0,0 +1,9 @@
+@extends('installer::app')
+@section('title', 'Import Error!')
+
+@section('content')
+  <div style="align-content: center;">
+    <h4>Error!</h4>
+    <p class="text-danger">{{ $error }}</p>
+  </div>
+@endsection

modules/Installer/Resources/views/importer/step1-configure.blade.php

@@ -117,7 +117,7 @@
         e.preventDefault();
         const opts = {
           _token: "{{ csrf_token() }}",
-          db_conn: $("#db_conn option:selected").text(),
+          db_conn: 'mysql',
           db_host: $("input[name=db_host]").val(),
           db_port: $("input[name=db_port]").val(),
           db_name: $("input[name=db_name]").val(),

modules/Installer/Resources/views/importer/step2-processing.blade.php

@@ -0,0 +1,171 @@
+@extends('installer::app')
+@section('title', 'Import Configuration')
+
+@section('content')
+  <div style="align-content: center;">
+    {{ Form::open(['route' => 'importer.complete', 'method' => 'POST']) }}
+    <table class="table" width="25%">
+
+      <tr>
+        <td colspan="2"><h4>Running Importer</h4></td>
+      </tr>
+
+      <tr>
+        <td colspan="2">
+          <div class="progress">
+            <div id="progress" class="progress-bar" style="width: 0%"></div>
+          </div>
+          <div>
+            <p id="message" style="margin-top: 7px;"></p>
+            <p id="error" class="text-danger" style="margin-top: 7px;"></p>
+          </div>
+        </td>
+      </tr>
+
+    </table>
+    <p style="text-align: right">
+      {{ Form::submit('Complete Import', [
+          'id' => 'completebutton',
+          'class' => 'btn btn-success'
+          ]) }}
+    </p>
+    {{ Form::close() }}
+  </div>
+@endsection
+
+@section('scripts')
+  <script>
+    const manifest = {!!json_encode($manifest) !!};
+
+    /**
+     * Get the total number of steps
+     */
+    const getTotalSteps = () => {
+      let total = 0;
+
+      for (let importer of manifest_keys) {
+        for (let stage of manifest[importer]) {
+          total++;
+        }
+      }
+
+      return total;
+    };
+
+    /**
+     * Run each step of the importer
+     */
+    async function startImporter() {
+      let current = 1;
+      const total_steps = manifest.length;
+
+      /**
+       * Update the progress bar
+       */
+      const setProgress = (current, message) => {
+        const percent = Math.round(current / total_steps * 100);
+        $("#progress").css("width", `${percent}%`);
+        $("#message").text(message);
+      };
+
+      /**
+       * Sleep for a given interval
+       */
+      const sleep = (timeout) => {
+        return new Promise((resolve, reject) => {
+          setTimeout(() => {
+            resolve();
+          }, timeout);
+        });
+      };
+
+      const setError = (error) => {
+        let message = '';
+        if (error.response) {
+          // The request was made and the server responded with a status code
+          // that falls out of the range of 2xx
+          console.log(error.response.data);
+          console.log(error.response.status);
+          console.log(error.response.headers);
+
+          message = error.response.data.message;
+
+        } else if (error.request) {
+          // The request was made but no response was received
+          // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
+          // http.ClientRequest in node.js
+          console.log(error.request);
+          message = error.request;
+        } else {
+          // Something happened in setting up the request that triggered an Error
+          console.log('Error', error.message);
+          message = error.message;
+        }
+
+        $("#error").text(`Error processing, check the logs: ${message}`);
+        console.log(error.config);
+      };
+
+      /**
+       * Call the endpoint as a POST
+       */
+      const runStep = async function (stage) {
+        setProgress(current, stage.message);
+
+        try {
+          return await phpvms.request({
+            method: 'post',
+            url: '/importer/run',
+            data: {
+              importer: stage.importer,
+              start: stage.start,
+            }
+          });
+        } catch (e) {
+
+          if (e.response.status === 504) {
+            const err = $("#error");
+
+            console.log('got timeout, retrying');
+            err.text(`Timed out, attempting to retry`);
+
+            // await sleep(5000);
+            const val = await runStep(stage);
+
+            err.text('');
+
+            return val;
+          }
+
+          setError(e);
+          throw e;
+        }
+      };
+
+      let errors = false;
+      const complete_button = $("#completebutton");
+      complete_button.hide();
+
+      for (let stage of manifest) {
+        console.log(`Running ${stage.importer} step ${stage.start}`);
+        try {
+          await runStep(stage);
+        } catch (e) {
+          errors = true;
+          break;
+        }
+
+        current++;
+      }
+
+      if (!errors) {
+        $("#message").text('Done!');
+        complete_button.show();
+      }
+    }
+
+    $(document).ready(() => {
+      startImporter();
+    });
+  </script>
+@endsection