Skip to content
Permalink
Browse files

Introduce 2 new decorators (#55)

This patch introduces 2 new decorators that could be used to build
features such as "go back in time" using a timepicker in the top navbar.

This implementation is nearly generic even though those decorator may
not have other obvious utilities.

Patch also:
- introduces a common footer to all pages
- reorganize imports of common lib such as jquery (in the header)
- adds a few libraries (momentjs & co) to be able to add a timepicker.
  This is a delibarate choice to avoid adding too many hooks to the
  codebase.
- introduces a "clean" method on ConsulUIManagers that may need to be
  clean after themselves if necessary.
- rename variable use for ConsulUIManagers to be consistent on all
  pages. This can be used by a decorator to interact with those elements

New decorators:
* `navBarDecorator` allows a user to customize his navbar easily. It
   allows easy introduction of new components or buttons.
* `fetchedResponseDecorator` allows a user to add code after data fetch.
   An example of usage would be to look at some custom headers and/or
   act on returned data to massage it.

Change-Id: I3e9a9a5c127be0d03f8e1ac6b68e66d36a8ae7c0
  • Loading branch information
kamaradclimber authored and pierresouchay committed Nov 28, 2019
1 parent 07f367e commit 8401a29442b4c821650aa4e46e9521092578b7da
@@ -0,0 +1,5 @@
<script type="text/javascript">
$("#navbar").ready(function() { navBarDecorator($("#navbar")[0]) });
</script>
</body>
</html>
@@ -36,10 +36,14 @@
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="vendors/highlight/atom-one-dark.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css" />
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-secondary">
<div class="collapse navbar-collapse">
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="navbar-brand dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -27,14 +27,13 @@
</div>
<!-- Optional JavaScript -->
<!-- JavaScript Dependencies: jQuery, Popper.js, Bootstrap JS, Shards JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="js/utils.js"></script>
<script src="js/types.js"></script>
<script src="js/keys.js"></script>
<script src="decorators.js"></script>
<script src="vendors/highlight/highlight.pack.js"></script>
<script type="text/javascript">
consulKeysManager = new ConsulKeysManager('<%= datasource %>');
consulManager = new ConsulKeysManager('<%= datasource %>');
</script>
</body>
</html>
<%= render_file('common/footer.html.erb') %>
@@ -30,13 +30,12 @@
</div>
<!-- Optional JavaScript -->
<!-- JavaScript Dependencies: jQuery, Popper.js, Bootstrap JS, Shards JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="js/utils.js"></script>
<script src="js/types.js"></script>
<script src="js/nodes.js"></script>
<script src="decorators.js"></script>
<script type="text/javascript">
consulNodesManager = new ConsulNodesManager('<%= datasource %>');
consulManager = new ConsulNodesManager('<%= datasource %>');
</script>
</body>
</html>
<%= render_file('common/footer.html.erb') %>
@@ -17,6 +17,7 @@
Show Connect Proxies
</label>
</div>

<div class="input-group">
<input id="service-filter" type="text" placeholder="filter services by name or tags" class="form-control" />
<div class="input-group-append">
@@ -61,15 +62,13 @@
</div>
<!-- Optional JavaScript -->
<!-- JavaScript Dependencies: jQuery, Popper.js, Bootstrap JS, Shards JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="js/utils.js"></script>
<script src="decorators.js"></script>
<script src="js/utils.js"></script>
<script src="js/types.js"></script>
<script src="js/service.js"></script>
<script type="text/javascript">
consulServiceManager = new ConsulServiceManager('<%= datasource %>');
consulManager = new ConsulServiceManager('<%= datasource %>');
</script>
<script src="vendors/highlight/highlight.pack.js"></script>
</body>
</html>
<%= render_file('common/footer.html.erb') %>
@@ -57,13 +57,12 @@
</div>
<!-- Optional JavaScript -->
<!-- JavaScript Dependencies: jQuery, Popper.js, Bootstrap JS, Shards JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="js/utils.js"></script>
<script src="js/timeline.js"></script>
<script src="decorators.js"></script>
<script type="text/javascript">
serviceTimeline = new ServiceTimeline('<%= datasource %>','<%= refresh %>');
</script>
<script src="vendors/highlight/highlight.pack.js"></script>
</body>
</html>
<%= render_file('common/footer.html.erb') %>
@@ -29,3 +29,17 @@ function serviceMetaDecorator(instance, key, value, serviceName) {
return document.createTextNode(value);
}
}

/**
* navBarDecorator is called to modify to modify naviguation bar of all UI pages.
* it receives the nav bar div
* it does not have to return anything.
*/
function navBarDecorator(navbar) { }


/**
* fetchedResponseDecorator is called with http response when a resource is fetched by any instance of ConsulUIManager
* it does not have to return anything.
*/
async function fetchedResponseDecorator(httpResponse) { }
@@ -21,6 +21,10 @@ class ConsulKeysManager extends ConsulUIManager {
this.sideSelector.prepareData();
this.sideSelector.refreshList();
}

async clean() {
this.sideSelector.data = {};
}
}

class KeySideSelector extends SideSelector {
@@ -85,4 +89,4 @@ class KeySideSelector extends SideSelector {


$(window).resize(resizeData);
resizeData();
resizeData();
@@ -248,4 +248,4 @@ class NodeMainSelector extends MainSelector {
}

$(window).resize(resizeInstances);
resizeInstances();
resizeInstances();
@@ -43,6 +43,13 @@ class ConsulServiceManager extends ConsulUIManager {
this.sideSelector.prepareData();
this.sideSelector.refreshList();
}

async clean() {
this.mainSelector.nodes = {};
this.sideSelector.data = {};
this.sideSelector.prepareData();
this.sideSelector.refreshList();
}
}

class ServiceSideSelector extends SideSelector {
@@ -360,4 +367,4 @@ class ServiceMainSelector extends MainSelector {
}

$(window).resize(resizeAll);
resizeAll();
resizeAll();
@@ -6,7 +6,9 @@ class ConsulUIManager {
async fetchResource() {
const response = await fetch(this.resourceURL);
const result = await response.json();

this.data = result;
fetchedResponseDecorator(response);
await this.initResource(result);
}

@@ -314,4 +316,4 @@ class Favorites {
}
this.saveFavorites();
}
}
}

0 comments on commit 8401a29

Please sign in to comment.
You can’t perform that action at this time.