Skip to content
Permalink
Browse files

Rewrite of the service page source code (#45)

Main changes:
- Filter is now done on the consul data directly and not on the DOM
- Display is limited to 500 elements
- When filtering the whole list is appended again

The code should be more maintainable and easy to read.
  • Loading branch information...
geobeau authored and pierresouchay committed Oct 9, 2019
1 parent 6566bee commit d8e08d9bc5e603a0d8c028d635f93057052c8904
@@ -36,12 +36,6 @@
<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">
<style id="css-states">
.service-tags { display: none; }
</style>
<style id="serviceCol">
.service-tags { display: none; }
</style>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-secondary">
@@ -7,13 +7,13 @@
<div class="form-group">
<div class="form-check form-check-inline">
<label class="form-check-label">
<input id="showTagsInList" type="checkbox" title="show tags" onclick="consulService.showTags(this.checked)" class="form-check-input" />
<input id="showTagsInList" type="checkbox" title="show tags" class="form-check-input" />
Show Tags
</label>
</div>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input id="showProxiesInList" type="checkbox" title="show Consul Connect Proxies" onclick="consulService.showProxies(this.checked)" class="form-check-input" />
<input id="showProxiesInList" type="checkbox" title="show Consul Connect Proxies" class="form-check-input" />
Show Connect Proxies
</label>
</div>
@@ -33,13 +33,13 @@
<h2 class="text-center" id="service-title"></h2>
<div class="row mb-2">
<div class="input-group float-left col-12">
<input id="instance-filter" type="text" placeholder="filter nodes by name or tags" class="form-control" />
<input id="instances-filter" type="text" placeholder="filter nodes by name or tags" class="form-control" />
</div>
</div>
<div class="progress">
<div id="service-progress-passing" status="passing" onclick="consulService.onClickFilter(this)" class="progress-status progress-bar bg-success" role="progressbar" style="width: 100%">passing</div>
<div id="service-progress-warning" status="warning" onclick="consulService.onClickFilter(this)" class="progress-status progress-bar bg-warning" role="progressbar" style="width: 0%">warning</div>
<div id="service-progress-critical" status="critical" onclick="consulService.onClickFilter(this)" class="progress-status progress-bar bg-danger" role="progressbar" style="width: 0%">critical</div>
<div id="service-progress-passing" status="passing" class="progress-status progress-bar bg-success" role="progressbar" style="width: 100%">passing</div>
<div id="service-progress-warning" status="warning" class="progress-status progress-bar bg-warning" role="progressbar" style="width: 0%">warning</div>
<div id="service-progress-critical" status="critical" class="progress-status progress-bar bg-danger" role="progressbar" style="width: 0%">critical</div>
</div>
<div id="instances-wrapper">
<div id="instances-list" class="list-group"></div>
@@ -52,9 +52,10 @@
<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/service.js"></script>
<script type="text/javascript">
consulService = new ConsulService('<%= datasource %>','<%= refresh %>');
consulServiceManager = new ConsulServiceManager('<%= datasource %>');
</script>
<script src="vendors/highlight/highlight.pack.js"></script>
</body>
@@ -91,7 +91,6 @@ td.serviceName {

#service-wrapper .list-group-item:last-child, #instances-wrapper .list-group-item:last-child,
#keys-wrapper .list-group-item:last-child {
border-bottom-width: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
@@ -239,10 +238,15 @@ pre, code {
margin-bottom: 0px;
}

.connect-enabled{
.service-list-item {
cursor: pointer;
}

.connect-enabled {
float:right;
border: 1px #ccc solid;
}
.connect-disabled{

.connect-disabled {
display: none;
}

0 comments on commit d8e08d9

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