Unified UX for Vultr & Scaleway

Author: summerisgone

app/server.py

@@ -17,6 +17,13 @@
 except ImportError:
     HAS_BOTO3 = False
 
+try:
+    import requests
+
+    HAS_REQUESTS = True
+except ImportError:
+    HAS_REQUESTS = False
+
 try:
     from google.auth.transport.requests import AuthorizedSession
     from google.oauth2 import service_account
@@ -174,6 +181,10 @@ async def ec2_regions(request):
 
 @routes.get('/gce_config')
 async def check_gce_config(_):
+    if not HAS_REQUESTS:
+        return web.json_response({'error': 'missing_requests'}, status=400)
+    if not HAS_GOOGLE_LIBRARIES:
+        return web.json_response({'error': 'missing_google'}, status=400)
     gce_file = join(PROJECT_ROOT, 'configs', 'gce.json')
     response = {}
     try:
@@ -213,17 +224,17 @@ async def gce_regions(request):
 @routes.get('/vultr_config')
 async def check_vultr_config(request):
     default_path = expanduser(join('~', '.vultr.ini'))
-    response = {'path': None}
+    response = {'has_secret': False}
     try:
         open(default_path, 'r').read()
-        response['path'] = default_path
+        response['has_secret'] = True
     except IOError:
         pass
 
     if 'VULTR_API_CONFIG' in os.environ:
         try:
             open(os.environ['VULTR_API_CONFIG'], 'r').read()
-            response['path'] = os.environ['VULTR_API_CONFIG']
+            response['has_secret'] = True
         except IOError:
             pass
     return web.json_response(response)
@@ -239,7 +250,7 @@ async def vultr_regions(_):
 
 @routes.get('/scaleway_config')
 async def check_scaleway_config(_):
-    return web.json_response({"ok": 'SCW_TOKEN' in os.environ})
+    return web.json_response({"has_secret": 'SCW_TOKEN' in os.environ})
 
 
 app = web.Application()

app/static/provider-gce.vue

@@ -1,5 +1,11 @@
 <template>
   <div>
+    <div v-if="ui_config_error && ui_config_error === 'missing_google'" class="form-text alert alert-danger" role="alert">
+      Python module "google-auth" is missing, please install it to proceed
+    </div>
+    <div v-if="ui_config_error && ui_config_error === 'missing_requests'" class="form-text alert alert-danger" role="alert">
+      Python module "requests" is missing, please install it to proceed
+    </div>
     <div
       class="form-group dropzone"
       v-if="ui_needs_upload"
@@ -31,14 +37,14 @@
         <strong>{{ ui_drop_filename }} loaded successfully</strong>
       </div>
     </div>
-    <input type="file" accept=".json,applciation/json" v-on:change="filechange_handler" />
-
-    <div class="form-group">
-      <region-select v-model="region" v-bind:options="ui_region_options" v-bind:loading="ui_loading_check || ui_loading_regions">
-        <label>Please specify <code>gce.json</code> credentials file to select region</label>
-      </region-select>
+    <div v-else class="form-text alert alert-success" role="alert">
+      Google Compute Engine credentials were found in the project
     </div>
-
+    <input type="file" accept=".json,applciation/json" v-on:change="filechange_handler" />
+    <region-select v-model="region" v-bind:options="ui_region_options" v-bind:loading="ui_loading_check || ui_loading_regions">
+      <label v-if="ui_needs_upload">Please select region</label>
+      <label v-else>Please specify <code>gce.json</code> credentials file to select region</label>
+    </region-select>
     <button
       class="btn btn-primary"
       type="button"
@@ -62,6 +68,7 @@ module.exports = {
       ui_drop_error: null,
       ui_drop_success: null,
       ui_drop_filename: null,
+      ui_config_error: null,
       ui_needs_upload: null,
       ui_loading_regions: false,
       ui_loading_check: false,
@@ -140,12 +147,19 @@ module.exports = {
     check_config() {
       this.ui_loading_check = true;
       fetch("/gce_config")
-        .then(r => r.json())
+        .then(r => {
+          if (r.status === 200 || r.status === 400) {
+            return r.json();
+          }
+          throw new Error(r.status);
+        })
         .then(response => {
           if (response.status === 'ok') {
             this.gce_credentials_file = 'configs/gce.json';
             this.load_regions();
             this.ui_needs_upload = false;
+          }  else if (response.error) {
+            this.ui_config_error = response.error;
           } else {
             this.ui_needs_upload = true;
           }

app/static/provider-scaleway.vue

@@ -1,7 +1,10 @@
 <template>
   <div>
 
-    <div class="form-group">
+    <div v-if="ui_env_secrets" class="form-text alert alert-success" role="alert">
+      Token was read from the environment variable
+    </div>
+    <div v-else class="form-group">
       <label
         >Enter your auth token
         <a
@@ -17,14 +20,10 @@
         type="text"
         class="form-control"
         name="scaleway_token"
-        v-bind:disabled="ui_loading_check || ui_token_from_env"
+        v-bind:disabled="ui_loading_check"
         v-model="scaleway_token"
       />
-      <div v-if="ui_token_from_env" class="form-text alert alert-success" role="alert">
-        Token was read from the environment variable
-      </div>
     </div>
-
     <div class="form-group">
       <region-select v-model="region" v-bind:options="ui_region_options">
       </region-select>
@@ -48,7 +47,7 @@ module.exports = {
       scaleway_token: null,
       region: null,
       // helper variables
-      ui_token_from_env: false,
+      ui_env_secrets: false,
       ui_loading_check: false,
       ui_region_options: [
         {value: 'Paris 1', key: 'par1'},
@@ -61,25 +60,32 @@ module.exports = {
   },
   computed: {
     is_valid() {
-      return this.region && (this.scaleway_token || this.ui_token_from_env);
+      return this.region && (this.scaleway_token || this.ui_env_secrets);
     }
   },
   methods: {
     check_config() {
       this.ui_loading_check = true;
       fetch("/scaleway_config")
-        .then(r => r.json())
+        .then(r => {
+          if (r.status === 200 || r.status === 400) {
+            return r.json();
+          }
+          throw new Error(r.status);
+        })
         .then(response => {
-          if (response.ok) {
-            this.ui_token_from_env = true;
+          if (response.has_secret) {
+            this.ui_env_secrets = true;
+          } else if (response.error) {
+            this.ui_config_error = response.error;
           }
         })
         .finally(() => {
           this.ui_loading_check = false;
         });
     },
     submit() {
-      if (this.ui_token_from_env) {
+      if (this.ui_env_secrets) {
         this.$emit("submit", {
           region: this.region
         });

app/static/provider-vultr.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
-
-    <div class="form-group">
+    <div v-if="ui_env_secrets" class="form-text alert alert-success" role="alert">
+      Vultr config file was found in your system
+    </div>
+    <div v-else class="form-group">
       <label
         >Enter the local path to your configuration INI file
         <a
@@ -20,7 +22,7 @@
         v-bind:disabled="ui_loading_check"
         v-model="vultr_config"
       />
-      <div v-if="ui_token_from_env" class="form-text alert alert-success" role="alert">
+      <div v-if="ui_env_secrets" class="form-text alert alert-success" role="alert">
         Configuration file was found in your system. You still can change the path to it
       </div>
     </div>
@@ -50,7 +52,7 @@ module.exports = {
       vultr_config: null,
       region: null,
       // helper variables
-      ui_token_from_env: false,
+      ui_env_secrets: false,
       ui_loading_check: false,
       ui_loading_regions: false,
       ui_region_options: []
@@ -61,19 +63,29 @@ module.exports = {
     this.load_regions();
   },
   computed: {
+    has_secrets() {
+      return this.ui_env_secrets || this.vultr_config;
+    },
     is_valid() {
-      return this.vultr_config && this.region;
+      return this.has_secrets && this.region;
     }
   },
   methods: {
     check_config() {
       this.ui_loading_check = true;
       fetch("/vultr_config")
-        .then(r => r.json())
+        .then(r => {
+          if (r.status === 200 || r.status === 400) {
+            return r.json();
+          }
+          throw new Error(r.status);
+        })
         .then(response => {
-          if (response.path) {
-            this.vultr_config = response.path;
-            this.ui_token_from_env = true;
+          if (response.has_secret) {
+            this.ui_env_secrets = true;
+            this.load_regions();
+          } else if (response.error) {
+            this.ui_config_error = response.error;
           }
         })
         .finally(() => {
@@ -95,10 +107,13 @@ module.exports = {
         });
     },
     submit() {
-      this.$emit("submit", {
-        vultr_config: this.vultr_config,
+      let submit_value = {
         region: this.region
-      });
+      }
+      if (!this.ui_env_secrets) {
+        submit_value['vultr_config'] = this.vultr_config;
+      }
+      this.$emit("submit", submit_value);
     },
   },
   components: {