RubyGems - cyclid-ui - Versions diffs - 0.1.0 - Mend

cyclid-ui 0.1.0

Files changed (98) hide show

checksums.yaml +7 -0
data/LICENSE +178 -0
data/README.md +20 -0
data/app/cyclid_ui.rb +124 -0
data/app/cyclid_ui/config.rb +64 -0
data/app/cyclid_ui/controllers/auth.rb +102 -0
data/app/cyclid_ui/controllers/base.rb +41 -0
data/app/cyclid_ui/controllers/health.rb +96 -0
data/app/cyclid_ui/controllers/organization.rb +64 -0
data/app/cyclid_ui/controllers/user.rb +40 -0
data/app/cyclid_ui/helpers.rb +55 -0
data/app/cyclid_ui/memcache.rb +45 -0
data/app/cyclid_ui/models/user.rb +91 -0
data/app/cyclid_ui/templates/footer.mustache +8 -0
data/app/cyclid_ui/templates/job.mustache +21 -0
data/app/cyclid_ui/templates/job_info.mustache +40 -0
data/app/cyclid_ui/templates/layout.mustache +102 -0
data/app/cyclid_ui/templates/login.mustache +78 -0
data/app/cyclid_ui/templates/organization.mustache +150 -0
data/app/cyclid_ui/templates/user.mustache +97 -0
data/app/cyclid_ui/views/job.rb +25 -0
data/app/cyclid_ui/views/layout.rb +52 -0
data/app/cyclid_ui/views/login.rb +25 -0
data/app/cyclid_ui/views/organization.rb +25 -0
data/app/cyclid_ui/views/user.rb +25 -0
data/bin/cyclid-ui-assets +17 -0
data/lib/cyclid_ui/app.rb +4 -0
data/public/images/LICENSE +3 -0
data/public/images/cyclid-logo-large.png +0 -0
data/public/images/favicon16.png +0 -0
data/public/images/favicon32.png +0 -0
data/public/images/favicon48.png +0 -0
data/public/images/favicon64.png +0 -0
data/public/images/favicon96.png +0 -0
data/public/js/api.js +34 -0
data/public/js/cyclid.js +32 -0
data/public/js/job.js +215 -0
data/public/js/organization.js +345 -0
data/public/js/user.js +145 -0
data/public/vendor/bootstrap/css/bootstrap-theme.css +587 -0
data/public/vendor/bootstrap/css/bootstrap-theme.css.map +1 -0
data/public/vendor/bootstrap/css/bootstrap-theme.min.css +6 -0
data/public/vendor/bootstrap/css/bootstrap-theme.min.css.map +1 -0
data/public/vendor/bootstrap/css/bootstrap.css +6760 -0
data/public/vendor/bootstrap/css/bootstrap.css.map +1 -0
data/public/vendor/bootstrap/css/bootstrap.min.css +6 -0
data/public/vendor/bootstrap/css/bootstrap.min.css.map +1 -0
data/public/vendor/bootstrap/css/custom.css +193 -0
data/public/vendor/bootstrap/fonts/glyphicons-halflings-regular.eot +0 -0
data/public/vendor/bootstrap/fonts/glyphicons-halflings-regular.svg +288 -0
data/public/vendor/bootstrap/fonts/glyphicons-halflings-regular.ttf +0 -0
data/public/vendor/bootstrap/fonts/glyphicons-halflings-regular.woff +0 -0
data/public/vendor/bootstrap/fonts/glyphicons-halflings-regular.woff2 +0 -0
data/public/vendor/bootstrap/js/bootstrap.js +2363 -0
data/public/vendor/bootstrap/js/bootstrap.min.js +7 -0
data/public/vendor/bootstrap/js/npm.js +13 -0
data/public/vendor/font-awesome/HELP-US-OUT.txt +7 -0
data/public/vendor/font-awesome/css/font-awesome.css +2199 -0
data/public/vendor/font-awesome/css/font-awesome.min.css +4 -0
data/public/vendor/font-awesome/fonts/FontAwesome.otf +0 -0
data/public/vendor/font-awesome/fonts/fontawesome-webfont.eot +0 -0
data/public/vendor/font-awesome/fonts/fontawesome-webfont.svg +685 -0
data/public/vendor/font-awesome/fonts/fontawesome-webfont.ttf +0 -0
data/public/vendor/font-awesome/fonts/fontawesome-webfont.woff +0 -0
data/public/vendor/font-awesome/fonts/fontawesome-webfont.woff2 +0 -0
data/public/vendor/font-awesome/less/animated.less +34 -0
data/public/vendor/font-awesome/less/bordered-pulled.less +25 -0
data/public/vendor/font-awesome/less/core.less +12 -0
data/public/vendor/font-awesome/less/fixed-width.less +6 -0
data/public/vendor/font-awesome/less/font-awesome.less +18 -0
data/public/vendor/font-awesome/less/icons.less +733 -0
data/public/vendor/font-awesome/less/larger.less +13 -0
data/public/vendor/font-awesome/less/list.less +19 -0
data/public/vendor/font-awesome/less/mixins.less +60 -0
data/public/vendor/font-awesome/less/path.less +15 -0
data/public/vendor/font-awesome/less/rotated-flipped.less +20 -0
data/public/vendor/font-awesome/less/screen-reader.less +5 -0
data/public/vendor/font-awesome/less/stacked.less +20 -0
data/public/vendor/font-awesome/less/variables.less +744 -0
data/public/vendor/font-awesome/scss/_animated.scss +34 -0
data/public/vendor/font-awesome/scss/_bordered-pulled.scss +25 -0
data/public/vendor/font-awesome/scss/_core.scss +12 -0
data/public/vendor/font-awesome/scss/_fixed-width.scss +6 -0
data/public/vendor/font-awesome/scss/_icons.scss +733 -0
data/public/vendor/font-awesome/scss/_larger.scss +13 -0
data/public/vendor/font-awesome/scss/_list.scss +19 -0
data/public/vendor/font-awesome/scss/_mixins.scss +60 -0
data/public/vendor/font-awesome/scss/_path.scss +15 -0
data/public/vendor/font-awesome/scss/_rotated-flipped.scss +20 -0
data/public/vendor/font-awesome/scss/_screen-reader.scss +5 -0
data/public/vendor/font-awesome/scss/_stacked.scss +20 -0
data/public/vendor/font-awesome/scss/_variables.scss +744 -0
data/public/vendor/font-awesome/scss/font-awesome.scss +18 -0
data/public/vendor/jquery-2.2.4.min.js +4 -0
data/public/vendor/jquery.md5.js +269 -0
data/public/vendor/js.cookie.js +151 -0
data/public/vendor/mustache.min.js +1 -0
metadata +322 -0

data/app/cyclid_ui/templates/job.mustache ADDED

@@ -0,0 +1,21 @@
+<div class="container" id="job">
+  {{> job_info}}
+</div>
+<script type="text/javascript" src="/js/cyclid.js"></script>
+<script type="text/javascript" src="/js/api.js"></script>
+<script type="text/javascript" src="/js/job.js"></script>
+<script>
+  var gblLinkbackURL = '{{linkback_url}}';
+  var gblUsername = '{{username}}';
+  // Retrieve the job data from the API & call either the success or failure handlers
+  var url = '{{job_url}}';
+  var job_id = {{job_id}};
+  // Inital get & display the job details, status & log
+  api_get(url, gblUsername, ji_update_all, ji_get_failed);
+  // Watch the job for status updates
+  addNamedInterval(`watcher${job_id}`, function() { ji_watch_job(url); }, 3000);
+</script>

data/app/cyclid_ui/templates/job_info.mustache ADDED

@@ -0,0 +1,40 @@
+<div class="alert alert-danger alert-dismissible hidden" role="alert" id="ji_failure">
+  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+  <div id="error_message"></div>
+</div>
+<div class="panel panel-default hidden" id="ji_details">
+  <div class="panel-heading">
+    <h3 class="panel-title"><span id="ji_header"></span></h3>
+  </div>
+  <div class="row">
+    <!-- standard job attributes -->
+    <div class="col-md-8">
+      <div class="col-md-6">
+        <div class="dl-horizontal text-muted">
+          <dt>Job</dt><dd id="ji_job_id"></dd>
+          <dt>Started</dt><dd id="ji_job_started"></dd>
+          <dt>Ended</dt><dd id="ji_job_ended"></dd>
+        </div>
+      </div>
+      <!-- additional job attributes -->
+      <div class="col-md-6">
+        <div class="dl-horizontal text-muted">
+          <dt>Duration</dt><dd id="ji_job_duration"></dd>
+        </div>
+      </div>
+    </div>
+    <!-- status -->
+    <div class="col-md-3 pull-right">
+      <h4><span id="ji_job_status"></span></h4>
+      <span id="ji_job_waiting"></span>
+    </div>
+  </div>
+</div>
+<div id="ji_log_outer" class="hidden">
+  <pre id="ji_log_inner" class="pre-scrollable job-log small"></pre>
+</div>

data/app/cyclid_ui/templates/layout.mustache ADDED

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>
+      {{title}}
+    </title>
+    <!-- Favicons -->
+    <link href="/images/favicon16.png" rel="icon" sizes="16x16" type="image/png">
+    <link href="/images/favicon32.png" rel="icon" sizes="32x32" type="image/png">
+    <link href="/images/favicon48.png" rel="icon" sizes="48x48" type="image/png">
+    <link href="/images/favicon64.png" rel="icon" sizes="64x64" type="image/png">
+    <link href="/images/favicon96.png" rel="icon" sizes="96x96" type="image/png">
+    <!-- Bootstrap CSS -->
+    <link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
+    <link href="/vendor/bootstrap/css/custom.css" rel="stylesheet" type="text/css">
+    <!-- Font Awesome -->
+    <link href="/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
+    <!-- jQuery -->
+    <script src="/vendor/jquery-2.2.4.min.js"></script>
+    <!-- Bootstrap plugins -->
+    <script src="/vendor/bootstrap/js/bootstrap.min.js"></script>
+    <!-- Cookie handling -->
+    <script src="/vendor/js.cookie.js"></script>
+  </head>
+  <body>
+    <div id="wrap">
+      <nav class="navbar navbar-layout">
+        <div class="container-fluid">
+          <div class="navbar-header">
+            <a class="navbar-brand" href="/">Cyclid</a>
+          </div>
+          <div class="collapse navbar-collapse" id="layout-navbar">
+            <ul class="nav navbar-nav">
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Organizations&nbsp;<span class="caret"></span></a>
+                <ul class="dropdown-menu">
+                  {{#organizations}}
+                  <li><a href="/{{.}}">{{.}}</a></li>
+                  {{/organizations}}
+                </ul>
+              </li>
+            </ul>
+            <ul class="nav navbar-nav navbar-right">
+              <li class="dropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{username}}&nbsp;<span class="caret"></span></a>
+                <ul class="dropdown-menu">
+                  <li><a href="/user/{{username}}">Profile</a></li>
+                  <li><a href="/logout">Logout</a></li>
+                </ul>
+              </li>
+              <li id="user_small_avatar"><img src="{{gravatar_url}}&s=50" style="width:50px;height:50px;padding:5px;"></li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+      {{#breadcrumbs}}
+      <ol id="nav-breadcrumbs" class="breadcrumb breadcrumb-layout">
+      </ol>
+      <script type="text/javascript">
+        function lay_crumbs(crumbs) {
+          var crumbsLength = crumbs.length;
+          for (var i = 0; i < crumbsLength; i++) {
+            var name = crumbs[i].name;
+            var url = crumbs[i].url;
+            if (url) {
+              $('#nav-breadcrumbs').append(`<li><a href="${url}"}>${name}</a></li>`);
+            } else {
+              $('#nav-breadcrumbs').append(`<li class="active">${name}</li>`);
+            }
+          }
+        }
+        lay_crumbs({{{breadcrumbs}}});
+      </script>
+      {{/breadcrumbs}}
+      <div id="content">
+        {{{yield}}}
+      </div>
+      <div id="push"></div>
+    </div><!-- #wrap -->
+    <!-- insert the footer -->
+    {{> footer}}
+  </body>
+</html>

data/app/cyclid_ui/templates/login.mustache ADDED

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>
+      {{title}}
+    </title>
+    <!-- Favicons -->
+    <link href="/images/favicon16.png" rel="icon" sizes="16x16" type="image/png">
+    <link href="/images/favicon32.png" rel="icon" sizes="32x32" type="image/png">
+    <link href="/images/favicon48.png" rel="icon" sizes="48x48" type="image/png">
+    <link href="/images/favicon64.png" rel="icon" sizes="64x64" type="image/png">
+    <link href="/images/favicon96.png" rel="icon" sizes="96x96" type="image/png">
+    <!-- Bootstrap CSS -->
+    <link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
+    <link href="/vendor/bootstrap/css/custom.css" rel="stylesheet" type="text/css">
+  </head>
+  <body>
+    <div id="wrap">
+      <nav class="navbar navbar-layout">
+        <div class="container-fluid">
+          <div class="navbar-header">
+            <a class="navbar-brand" href="/login">Cyclid</a>
+          </div>
+        </div>
+      </nav>
+      <div class="container">
+        <div class="row">
+          <img class="center-block" src="images/cyclid-logo-large.png">
+        </div>
+      </div>
+      <div id="push"></div>
+      <div class="container">
+        <div class="row">
+          <div class="col-md-4 col-md-offset-4">
+            <form action="login" method="post">
+              <div class="form-group">
+                <label for="username">Username</label>
+                <input type="text" class="form-control" name="username" placeholder="Username">
+              </div>
+              <div class="form-group">
+                <label for="password">Password</label>
+                <input type="password" class="form-control" name="password" placeholder="Password">
+              </div>
+              <input type="submit" class="btn btn-default" value="Login">
+            </form>
+          </div>
+        </div>
+        <div class="row v-offset-10">
+          <div class="col-md-4 col-md-offset-4">
+            {{#message}}
+              <div class="alert alert-warning" role="alert">{{message}}</div>
+            {{/message}}
+          </div>
+        </div>
+      </div>
+      <div id="push"></div>
+    </div><!-- #wrap -->
+    {{> footer}}
+    <!-- jQuery -->
+    <script src="/vendor/jquery-2.2.4.min.js"></script>
+    <!-- Bootstrap plugins -->
+    <script src="/vendor/bootstrap/js/bootstrap.min.js"></script>
+  </body>
+</html>

data/app/cyclid_ui/templates/organization.mustache ADDED

@@ -0,0 +1,150 @@
+<div class="container" id="organizations">
+  <div class="alert alert-danger alert-dismissible hidden" role="alert" id="organization_failure">
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+    <div id="error_message"></div>
+  </div>
+  <div class="row">
+    <div class="col-md-3">
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          <h3 class="panel-title text-initial-caps">Search</h3>
+        </div>
+        <div class="panel-body form-horizontal form-group pad-5">
+          <small>
+            <form onsubmit="org_search_submit();return false;">
+              <div class="form-group">
+                <label for="search_name" class="col-sm-2 control-label">Name</label>
+                <div class="col-sm-10">
+                  <input type="text" class="form-control form-control-slim" oninput="org_search_form_changed()" id="search_name" placeholder="Name">
+                </div>
+              </div>
+              <div class="form-group">
+                <label for="search_from" class="col-sm-2 control-label">From</label>
+                <div class="col-sm-10">
+                  <input type="datetime-local" class="form-control form-control-slim" onchange="org_search_form_changed()" id="search_from">
+                </div>
+              </div>
+              <div class="form-group">
+                <label for="search_to" class="col-sm-2 control-label">To</label>
+                <div class="col-sm-10">
+                  <input type="datetime-local" class="form-control form-control-slim" onchange="org_search_form_changed()" id="search_to">
+                </div>
+              </div>
+              <div class="form-group">
+                <label for="search_status" class="col-sm-2 control-label">Status</label>
+                <div class="col-sm-10">
+                  <select class="form-control form-control-slim" onchange="org_search_form_changed()" id="search_status">
+                    <option>Any</option>
+                    <option value="0">New</option>
+                    <option value="1">Waiting</option>
+                    <option value="2">Started</option>
+                    <option value="10">Succeeded</option>
+                    <option value="11">Failed</option>
+                  </select>
+                </div>
+              </div>
+            </form>
+          </small>
+        </div>
+        <div class="panel-footer">
+           <div class="text-right">
+            <button type="button" class="btn btn-default" disabled="disabled" onclick="org_search_form_reset()" id="search_btn_clear">Clear</button>
+            <button type="button" class="btn btn-success" disabled="disabled" onclick="org_search_submit()" id="search_btn_search">Search</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-9">
+      <div class="row">
+        <div class="col-md-12" style="margin-bottom: 10px;margin-top: 10px;display: table;">
+          <span id="org-counter" class="small" style="display: table-cell;vertical-align: middle;"></span>
+        </div>
+      </div>
+      <div style="height: 65vh;overflow-y: auto;">
+        <table class="table table-hover table-condensed job-table" id="job-accordian">
+          <thead>
+            <th>ID</th>
+            <th>Name</th>
+            <th>Started</th>
+            <th>Duration</th>
+            <th>Status</th>
+          </thead>
+          <tfoot>
+            <tr>
+              <td colspan="5">
+                <div id="org-load-more" class="panel panel-default hidden">
+                  <div class="panel-body text-center pad-2 clickable">
+                    <strong>Load more</strong><br>
+                    <i class="fa fa-angle-double-down" aria-hidden="true"></i>
+                  </div>
+                </div>
+              </td>
+            </tr>
+          </tfoot>
+          <tbody></tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  {{=<% %>=}}
+  <script id="job-info" type="x-tmpl-mustache">
+    <tr id="row{{id}}" data-toggle="collapse" data-target="#collapse{{id}}" data-parent="#job-accordian" class="clickable">
+      <td id="id">{{id}}</td>
+      <td id="name">{{name}}</td>
+      <td id="started">{{started}}</td>
+      <td id="duration">{{duration}}</td>
+      <td id="status">{{{status}}}</td>
+    </tr>
+    <tr>
+      <td colspan="5" class="hidden-row">
+        <div id="collapse{{id}}" class="collapse">
+        </div>
+      </td>
+    </tr>
+  </script>
+  <%={{ }}=%>
+  <script id="job-info-inner" type="x-tmpl-html">
+    <div id="job-info-panel" class="panel-body">
+      {{> job_info}}
+    </div>
+  </script>
+</div>
+<script type="text/javascript" src="/vendor/mustache.min.js"></script>
+<script type="text/javascript" src="/js/cyclid.js"></script>
+<script type="text/javascript" src="/js/api.js"></script>
+<script type="text/javascript" src="/js/job.js"></script>
+<script type="text/javascript" src="/js/organization.js"></script>
+<script type="text/javascript">
+  var gblUsername = '{{username}}';
+  var gblOrganizationURL = '{{organization_url}}';
+  var gblLinkbackURL = '{{linkback_url}}';
+  var gblOffset = 0,
+      gblTotal = 0;
+  $( window ).resize( function() {
+    $('#job-accordian').height('65vh');
+  });
+  $('#org-load-more').on('click', function () {
+    org_load_chunk(gblOffset);
+  });
+  // Find the number of jobs & load the initial set
+  var url = `${gblOrganizationURL}/jobs?stats_only=true`;
+  api_get(url, gblUsername, org_initialize_job_list, org_job_list_failed);
+</script>

data/app/cyclid_ui/templates/user.mustache ADDED

@@ -0,0 +1,97 @@
+<div class="container" id="user">
+  <div class="alert alert-danger alert-dismissible hidden" role="alert" id="user_failure">
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+    <div id="error_message"></div>
+  </div>
+  <div class="panel panel-default hidden" id="user_info">
+    <div class="panel-heading">
+      <h3 class="panel-title text-initial-caps" id="user_heading"></h3>
+    </div>
+    <div class="row">
+      <div class="col-md-2">
+        <div class="container pad-20" id="user_avatar">
+          <img src="{{gravatar_url}}&s=100" style="width:100px;height:100px;">
+        </div>
+      </div>
+      <div class="col-md-10">
+        <h3 id="user_name"></h3>
+        <div class="col-md-6">
+          <div class="dl-horizontal text-muted pad-20">
+            <dt>Email</dt><dd id="user_email"></dd>
+            <dt>Organizations</dt><dd id="user_org_list"></dd>
+          </div>
+        </div>
+        <div class="col-md-6 pad-20">
+          <div class="row">
+            <div class="col-md-4 text-muted pad-5">
+              <button type="button" class="btn btn-default" style="width:100%;" data-toggle="modal" data-target="#user_password_modal">Change password</button>
+            </div>
+            <div class="col-md-8 text-muted pad-5">
+              <small>Change your password and reset your client token.</small>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- change password modal -->
+<div class="modal fade" id="user_password_modal" role="dialog" aria-labelledby="user_password_modal_label">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title" id="user_password_modal_label">Change password</h4>
+      </div>
+      <div class="modal-body">
+        <div class="alert alert-danger alert-dismissible hidden" role="alert" id="user_password_failure">
+          <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+          <div id="user_password_error_message"></div>
+        </div>
+        <form id="user_password_form">
+          <div class="form-group">
+            <label for="user_password_password_1">New password</label>
+            <input type="password" class="form-control" placeholder="Password" id="user_password_password_1">
+          </div>
+          <div class="form-group">
+            <label for="user_password_password_2">Confirm password</label>
+            <input type="password" class="form-control" placeholder="Password" id="user_password_password_2">
+          </div>
+          <div class="checkbox">
+            <label>
+              <input type="checkbox" id="user_password_reset_signing">Reset client token
+            </label>
+          </div>
+          <div class="form-group">
+            <label for="user_password_secret">Client token</label>
+            <input type="text" class="form-control" placeholder="Token" id="user_password_secret" disabled>
+          </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal" id="user_password_cancel">Cancel</button>
+        <button type="submit" class="btn btn-default" data-dismiss="modal" id="user_password_ok">Change password</button>
+      </div>
+    </div>
+  </div>
+</div>
+<script type="text/javascript" src="/vendor/jquery.md5.js"></script>
+<script type="text/javascript" src="/js/api.js"></script>
+<script type="text/javascript" src="/js/user.js"></script>
+<script type="text/javascript">
+  var gblUsername = '{{username}}';
+  var gblAPIURL = '{{api_url}}';
+  var gblUserURL = '{{user_url}}';
+  api_get(gblUserURL, gblUsername, user_update_details, user_get_failed);
+</script>