cyclid-ui 0.1.0

data/app/cyclid_ui/views/job.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+# Copyright 2016 Liqwyd Ltd.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+module Cyclid
+  module UI
+    module Views
+      # Job view
+      class Job < Layout
+        attr_reader :job_url, :job_id
+      end
+    end
+  end
+end

data/app/cyclid_ui/views/layout.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+# Copyright 2016 Liqwyd Ltd.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+require 'digest/md5'
+
+module Cyclid
+  module UI
+    module Views
+      # Main Layout view; everything common to the Views which use Layouts can
+      # be found here
+      class Layout < Mustache
+        attr_reader :organization, :api_url, :linkback_url
+
+        def username
+          @current_user.username || 'Nobody'
+        end
+
+        def organizations
+          @current_user.organizations
+        end
+
+        def title
+          @title || 'Cyclid'
+        end
+
+        # Return an array of elements to be inserted into the breadcrumb
+        def breadcrumbs
+          @crumbs.to_json
+        end
+
+        # Calculate the base Gravatar URL for the user
+        def gravatar_url
+          email = @current_user.email.downcase.strip
+          hash = Digest::MD5.hexdigest(email)
+          "https://www.gravatar.com/avatar/#{hash}?d=identicon&r=g"
+        end
+      end
+    end
+  end
+end

data/app/cyclid_ui/views/login.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+# Copyright 2016 Liqwyd Ltd.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+module Cyclid
+  module UI
+    module Views
+      # Login view. This is a non-Layout view.
+      class Login < Mustache
+        attr_reader :message
+      end
+    end
+  end
+end

data/app/cyclid_ui/views/organization.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+# Copyright 2016 Liqwyd Ltd.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+module Cyclid
+  module UI
+    module Views
+      # Organization view
+      class Organization < Layout
+        attr_reader :organization_url
+      end
+    end
+  end
+end

data/app/cyclid_ui/views/user.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+# Copyright 2016 Liqwyd Ltd.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+module Cyclid
+  module UI
+    module Views
+      # User profile view
+      class User < Layout
+        attr_reader :user_url
+      end
+    end
+  end
+end

data/bin/cyclid-ui-assets

@@ -0,0 +1,17 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+# Copyright 2016 Liqwyd Ltd.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+puts File.expand_path('../../public', __FILE__)

data/lib/cyclid_ui/app.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+$LOAD_PATH.push File.expand_path('../../../app', __FILE__)
+
+require 'cyclid_ui'

data/public/images/LICENSE

@@ -0,0 +1,3 @@
+The Cyclid Logo and its derivatives are licensed under the Creative Commons
+Attribution-NonCommercial-NoDerivatives 4.0 International License. To view a
+copy of this license, visit http://creativecommons.org/licenses/by-nc-nd/4.0/.

data/public/js/api.js

@@ -0,0 +1,34 @@
+// Perform an authenticated GET to the API server.
+function api_get(url, username, success, error) {
+  $.ajax({
+    type: 'GET',
+    url: encodeURI(url),
+    dataType: 'json',
+    crossDomain: true,
+    beforeSend: function(xhr) {
+      var token = Cookies.get('cyclid.token');
+      var authorization = `Token ${username}:${token}`
+      xhr.setRequestHeader('Authorization', authorization);
+    },
+    success: success,
+    error: error
+  });
+}
+
+// Perform an authenticated PUT to the API server.
+function api_put(url, data, username, success, error) {
+  $.ajax({
+    type: 'PUT',
+    url: encodeURI(url),
+    data: JSON.stringify(data),
+    contentType: 'application/json',
+    crossDomain: true,
+    beforeSend: function(xhr) {
+      var token = Cookies.get('cyclid.token');
+      var authorization = `Token ${username}:${token}`
+      xhr.setRequestHeader('Authorization', authorization);
+    },
+    success: success,
+    error: error
+  });
+}

data/public/js/cyclid.js

@@ -0,0 +1,32 @@
+// Create an interval and store the handle with a key
+function addNamedInterval(name, func, interval) {
+  if( window.timers == undefined ){
+    console.log('initializing window.timers');
+    window.timers = {};
+  }
+
+  if( window.timers[name] == null ) {
+    var interval = setInterval(func, interval);
+    console.log(`setting interval ${interval} as ${name}`);
+    window.timers[name] = interval;
+  }
+}
+
+// Remove a named interval previously created with addNamedInterval
+function removeNamedInterval(name) {
+  var interval = window.timers[name];
+
+  if( interval != undefined ) {
+    console.log(`clearing interval ${interval} for ${name}`);
+    clearInterval(interval);
+  }
+  window.timers[name] = null;
+}
+
+// Remove all named intervals previously created with addNamedInterval
+function clearAllNamedIntervals() {
+  for(var timer in window.timers){
+    console.log(`removing ${timer}`);
+    removeNamedInterval(timer);
+  }
+}

data/public/js/job.js

@@ -0,0 +1,215 @@
+// Convert a Cyclid job status code to a human readable status
+function ji_job_status_to_human(status_id) {
+  var statuses = {0: 'New',
+                  1: 'Waiting',
+                  2: 'Started',
+                  3: 'Failing',
+                  10: 'Succeeded',
+                  11: 'Failed'};
+  var status = statuses[status_id];
+
+  var glyphs = {0: 'glyphicon-share-alt',
+                1: 'glyphicon-time',
+                2: 'glyphicon-refresh',
+                3: 'glyphicon-alert',
+                10: 'glyphicon-ok',
+                11: 'glyphicon-remove'};
+  var glyph = glyphs[status_id];
+
+  var labels = {0: 'label-primary',
+                1: 'label-primary',
+                2: 'label-info',
+                3: 'label-warning',
+                10: 'label-success',
+                11: 'label-danger'};
+  var label = labels[status_id];
+
+  return `<span class="label ${label}">
+            <span class="glyphicon ${glyph}" aria-hidden="true"></span>&nbsp;${status}
+          </span>`
+}
+
+// Convert a Cyclid job status code to an indicator
+function ji_job_status_to_indicator(status_id) {
+  var statuses = {0: 'New',
+                  1: 'Waiting',
+                  2: 'Started',
+                  3: 'Failing',
+                  10: 'Succeeded',
+                  11: 'Failed'};
+  var status = statuses[status_id];
+
+  var glyphs = {0: 'glyphicon-share-alt',
+                1: 'glyphicon-time',
+                2: 'glyphicon-refresh',
+                3: 'glyphicon-alert',
+                10: 'glyphicon-ok',
+                11: 'glyphicon-remove'};
+  var glyph = glyphs[status_id];
+
+  var labels = {0: 'label-primary',
+                1: 'label-primary',
+                2: 'label-info',
+                3: 'label-warning',
+                10: 'label-success',
+                11: 'label-danger'};
+  var label = labels[status_id];
+
+  return `<span class="label ${label}">
+            <span class="glyphicon ${glyph}" aria-hidden="true" title="${status}"></span>
+          </span>`
+}
+
+function ji_calculate_duration(started, ended) {
+  var date_started = new Date(started);
+  var date_ended = new Date(ended);
+
+  var duration = '';
+  if( date_ended > 0 ){
+    duration = new Date(date_ended.getTime() - date_started.getTime()).toISOString().substr(11, 8);
+  }
+
+  return duration;
+}
+
+// Set & show the job log element
+function ji_update_log(log_text) {
+  // Show the log
+  var outer = $('#ji_log_outer');
+  outer.removeClass('hidden');
+
+  // Find the current position of the scrollable element, before we update it
+  var inner = $('#ji_log_inner')
+  var diff = inner.prop('scrollHeight') - (inner.scrollTop() + inner.outerHeight());
+
+  // Update the log
+  inner.html(log_text);
+
+  // If the user hasn't scrolled up, scroll to the bottom to show the new log data
+  if( diff <= 0 )
+    inner.scrollTop(inner.prop('scrollHeight'));
+}
+
+// Is the job in a "Failed" or "Succeeded" state?
+function ji_job_finished(job_status) {
+  if( job_status == 10 || job_status == 11 ) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+// Is the job still active?
+function ji_job_active(job_status) {
+  return !ji_job_finished(job_status);
+}
+
+function ji_update_status(job) {
+  var status = ji_job_status_to_human(job.status)
+  $('#ji_job_status').html(status);
+  $('#ji_job_status').data('status', job.status);
+
+  // Update the "Waiting" message appropriately
+  var waiting = '<h6>Unknown</h6>';
+  switch(job.status) {
+    case 1:
+    case 2:
+      waiting = '<h6><i class="fa fa-spinner fa-pulse"></i>&nbsp;Waiting for job to start...</h6>'
+      $('#ji_job_waiting').html(waiting);
+      $('#ji_job_waiting').removeClass('hidden');
+      break;
+    case 3:
+    case 4:
+      waiting = '<h6><i class="fa fa-cog fa-spin"></i>&nbsp;Waiting for job to complete...</h6>';
+      $('#ji_job_waiting').html(waiting);
+      $('#ji_job_waiting').removeClass('hidden');
+      break;
+    case 10:
+    case 11:
+      $('#ji_job_waiting').addClass('hidden');
+      break;
+  }
+
+  // Update the status indicator, if there is one
+  var indicator = ji_job_status_to_indicator(job.status);
+  $(`#row${job.job_id} > #status`).html(indicator);
+}
+
+// Set & show the job details
+function ji_update_details(job) {
+  var title = `<a href="${gblLinkbackURL}/job/${job.id}">${job.job_name}&nbsp;<small>v${job.job_version}</small></a>`;
+  $('#ji_header').html(title);
+
+  $('#ji_job_id').text(job.id);
+
+  if (job.started) {
+    var started = new Date(job.started);
+    $('#ji_job_started').text(started.toUTCString());
+  }
+
+  if (job.ended) {
+    var ended = new Date(job.ended);
+    $('#ji_job_ended').text(ended.toUTCString());
+  }
+
+  var duration = ji_calculate_duration(job.started, job.ended);
+  $('#ji_job_duration').text(duration);
+
+  $('#ji_details').removeClass('hidden');
+}
+
+// Update everything: job details, status & log
+function ji_update_all(job) {
+  ji_update_details(job);
+  ji_update_status(job);
+  ji_update_log(job.log);
+}
+
+function ji_get_failed(xhr) {
+  var failure_message = `<p>
+                           <h2>Failed to retrieve job</h2><br>
+                           <strong>${xhr.status}:</strong> ${xhr.responseText}
+                         </p>`
+  $('#ji_failure > #error_message').html(failure_message);
+
+  $('#ji_failure').removeClass('hidden');
+}
+
+function ji_update_status_and_check_completion(url, job) {
+  var last_status = $('#ji_job_status').data('status');
+  if( job.status != last_status ) {
+    ji_update_status(job);
+  }
+
+  // Did the job end?
+  if( ji_job_finished(job.status) ){
+    console.log(`job #${job.job_id} ended`);
+
+    // Update the job details so that E.g. the "Ended" time is shown
+    api_get(url, gblUsername, ji_update_details, ji_get_failed);
+
+    // Find any timer associated with the job info & remove it
+    removeNamedInterval(`watcher${job.job_id}`);
+  }
+}
+
+function ji_watch_job(url) {
+  console.log(`ji_watch_job(${url})`);
+
+  // Check job status
+  var status_url = `${url}/status`;
+  console.log(`updating status from ${status_url}`);
+  api_get(status_url,
+          gblUsername,
+          function(job) {
+            ji_update_status_and_check_completion(url, job);
+          },
+          ji_get_failed);
+
+  // Update log
+  var log_url = `${url}/log`;
+  console.log(`updating log from ${log_url}`);
+  api_get(log_url, gblUsername, function(data) { ji_update_log(data.log); }, ji_get_failed);
+
+  console.log(`ji_watch_job(${url}) finished`);
+}