Skip to content
Permalink
Browse files

Rewrite keys page (#47)

  • Loading branch information...
geobeau authored and pierresouchay committed Oct 9, 2019
1 parent e34bd8f commit eebbab61ac3416eeea9819bb150074bf06945817
@@ -30,10 +30,11 @@
<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="vendors/highlight/highlight.pack.js"></script>
<script type="text/javascript">
consulKeys = new ConsulKeys('<%= datasource %>','<%= refresh %>');
consulKeysManager = new ConsulKeysManager('<%= datasource %>','<%= refresh %>');
</script>
</body>
</html>
@@ -1,132 +1,90 @@
class ConsulKeys {
constructor(ressourceURL, refresh) {
this.ressourceURL = ressourceURL;
this.fetchRessource();
this.keysList = $("#keys-list");
this.keysFilter = $("#keys-filter");
this.keysFilter.keyup(debounce(this.filterService, 250));
this.refresh = parseInt(refresh);
this.keysFilterCounter = $("#keys-counter");
this.keysFilterCount = 0;
class ConsulKeysManager extends ConsulUIManager {
constructor(resourceURL) {
super(resourceURL);
var flags = {};
this.codeDisplayer = new CodeDisplayer(
$("#kv-data"),
$("#kv-title"),
)
this.sideSelector = new KeySideSelector(
this.codeDisplayer,
$("#keys-filter"),
$("#keys-list"),
$("#keys-counter"),
"filter",
"key"
);
var obj = this;
this.fetchResource();
}

fetchRessource() {
$.ajax({url: this.ressourceURL, cache: false, dataType: "json", sourceObject: this, success: function(result){
consulKeys.initRessource(result);
}});
async initResource(data) {
this.sideSelector.data = data["kv"];
this.sideSelector.prepareData();
this.sideSelector.refreshList();
}
}

initRessource(data) {
this.data = data;
this.reloadKeysList();
console.log('Data generated at: ' + data['generated_at']);

var urlParam = new URL(location.href).searchParams.get('key');
if (urlParam) {
var nodes = document.getElementById('keys-list').childNodes;
for(var i in nodes) {
if($(nodes[i]).find(".key-name").html() == urlParam) {
var selectedElement = $(nodes[i])
this.selectKey(selectedElement);
selectedElement.focus()
break;
}
}
} else {
this.selectKey(document.getElementById('keys-list').firstElementChild);
class KeySideSelector extends SideSelector {
constructor(
codeDisplayer,
filterElement,
listElement,
counterElement,
URLLabelFilter,
URLLabelSelected
) {
super(
filterElement,
listElement,
counterElement,
URLLabelFilter,
URLLabelSelected,
false
);
this.codeDisplayer = codeDisplayer
}

if(this.refresh > 0) {
setTimeout(this.fetchRessource, this.refresh * 1000);
matchElement(key, keyData, filter) {
return key.match(filter);
}
}

reloadKeysList() {
this.keysList.html('');
this.keysFilterCount = 0;

for (var key in this.data.kv) {

var listItem = document.createElement('button');
listItem.setAttribute('type','button');
listItem.setAttribute('onfocus','consulKeys.onClickServiceName(this)');
listItem.setAttribute('onclick','consulKeys.onClickServiceName(this)');
listItem.setAttribute('value',key);
listItem.setAttribute('class','list-group-item list-group-item-action');

var serviceNameItem = document.createElement('div');
serviceNameItem.setAttribute('class', 'key-name');
serviceNameItem.appendChild(document.createTextNode(key));
listItem.appendChild(serviceNameItem);

this.keysFilterCount += 1;
this.keysList.append(listItem);

elementGenerator(key, data) {
var element = document.createElement("li");

var CSSClass = "service-list-item list-group-item list-group-item-action";

var obj = this;
element.addEventListener("focus", function() {
obj.onClickElement(this, key);
});
element.addEventListener("click", function() {
obj.onClickElement(this, key);
});

element.setAttribute("value", key);

element.setAttribute("class", CSSClass);

var nameItem = document.createElement("div");
nameItem.setAttribute("class", "service-name");
nameItem.appendChild(document.createTextNode(key));
element.appendChild(nameItem);

return element;
}
this.keysFilterCounter.html(this.keysFilterCount);
resizeWrapper('keys-wrapper', 'keys-list');
this.filterService();
}

filterService() {
var filter = new RegExp(consulKeys.keysFilter.val());
consulKeys.keysFilterCount = 0;
consulKeys.keysList.children('button').each(function (){
var ui = $(this);
if(keyMatcher(this, filter)) {
ui.removeClass('d-none');
ui.addClass('d-block');
consulKeys.keysFilterCount += 1;
consulKeys.keysFilterCounter.html(consulKeys.keysFilterCount);

selectItem(element, key) {
super.selectItem(element, key);
if(this.data[key] != null) {
var dataToDisplay = atob(this.data[key]);
} else {
ui.removeClass('d-block');
ui.addClass('d-none');
var dataToDisplay = 'NO DATA';
}
})
}

onClickServiceName(source) {
this.selectKey(source);
this.selectedKeyName = $(source).find(".key-name").html()
this.updateURL();
}

updateURL() {
var newUrl = new URL(location.href);
if (this.selectedKeyName) {
newUrl.searchParams.set('key', this.selectedKeyName);
} else {
newUrl.searchParams.delete('key')
}
window.history.pushState({},"",newUrl.href);
}

selectKey(source) {
if (this.selectedKey) {
$(this.selectedKey).removeClass('active');
this.codeDisplayer.displayData(key, dataToDisplay);
}
var serviceName = $(source).find(".key-name").html()
this.selectedKey = source.closest( "button" );
$(this.selectedKey).addClass('active');
this.displayKey([serviceName]);
}

displayKey(key) {
$("#kv-title").html(key);
if(this.data.kv[key] != null) {
var dataToDisplay = atob(this.data.kv[key]);
} else {
var dataToDisplay = 'NO DATA';
}

$("#kv-data").text(dataToDisplay);
$("#kv-data").removeClass();

$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
resizeWrapper('data-wrapper', 'kv-data');
}
}


$( window ).resize(resizeData);
resizeData();
@@ -63,7 +63,7 @@ class ServiceSideSelector extends SideSelector {
this.flags = flags;
}

matchElement(service, filter) {
matchElement(serviceName, service, filter) {
if (
service["kind"] != undefined &&
!this.flags["showConnectProxies"].state
@@ -90,8 +90,7 @@ class ServiceSideSelector extends SideSelector {
return false;
}

elementGenerator(service) {
var serviceName = service.name;
elementGenerator(serviceName, service) {
var element = document.createElement("li");
var CSSClass = "service-list-item list-group-item list-group-item-action";

@@ -25,7 +25,7 @@ class ConsulUIManager {
this.filterElement = filterElement;
this.listElement = listElement;
this.counterElement = counterElement;
var obj = this;
this.elements = {}
this.filterElement.keyup(debounce(this.updateFilter.bind(this), 250));

this.URLLabelFilter = URLLabelFilter;
@@ -48,7 +48,7 @@ class ConsulUIManager {

prepareData() {
for (var key in this.data) {
this.data[key]["element"] = this.elementGenerator(this.data[key]);
this.elements[key] = this.elementGenerator(key, this.data[key]);
}
}

@@ -81,13 +81,13 @@ class ConsulUIManager {
var favDict = this.favorites.favorites;
for (var i in favList) {
if (favList[i] in this.data) {
if (this.matchElement(this.data[favList[i]], filter)) {
if (this.matchElement(favList[i], this.data[favList[i]], filter)) {
if (selectItem == null || this.selectedItem == favList[i]) {
selectItem = favList[i];
selectElement = this.data[favList[i]]["element"];
selectElement = this.elements[favList[i]];
}
elementTotal++;
this.listElement.append(this.data[favList[i]]["element"]);
this.listElement.append(this.elements[favList[i]]);
}
}
}
@@ -96,19 +96,19 @@ class ConsulUIManager {
}

for (var key in this.data) {
if (!(key in favDict) && this.matchElement(this.data[key], filter)) {
if (!(key in favDict) && this.matchElement(key, this.data[key], filter)) {
if (selectItem == null || this.selectedItem == key) {
selectItem = key;
selectElement = this.data[key]["element"];
selectElement = this.elements[key];
}
this.listElement.append(this.data[key]["element"]);
this.listElement.append(this.elements[key]);
elementTotal++;
}
}
this.elementTotal = elementTotal;
this.counterElement.html(this.elementTotal);
selectElement.scrollIntoView();
this.selectItem(selectElement, selectItem);
this.counterElement.html(this.elementTotal);
}

onClickElement(source, selected) {
@@ -171,6 +171,24 @@ class ConsulUIManager {
this.refreshList();
}
}

class CodeDisplayer {
constructor(codeElement, titleElement) {
this.codeElement = codeElement
this.titleElement = titleElement
}

displayData(key, code) {
this.titleElement.html(key);
this.codeElement.text(code);
this.codeElement.removeClass();

$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
resizeWrapper('data-wrapper', 'kv-data');
}
}

class DisplayFlag {
constructor(element, callback) {

0 comments on commit eebbab6

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