Added metadata retrieval.
+ Added some fixes to the popover display position.
+ Added a fix for scrolling when clicking a name for metadata.
+ Finalized metadata. More visual fixes and corrected naming.
Change-Id: I211e9595f29e6c41147e07dae3cb4a533b8b2555
diff --git a/client/catalog-dev/css/style.css b/client/catalog-dev/css/style.css
index 354a31d..484ba3e 100644
--- a/client/catalog-dev/css/style.css
+++ b/client/catalog-dev/css/style.css
@@ -233,3 +233,18 @@
.navbar-brand {
text-shadow: 1px 1px 1px black;
}
+
+.popover {
+ max-width: none;
+}
+
+.popover-container {
+ position: relative;
+}
+
+.metaData {
+ width: 600px;
+ max-height: 800px;
+ word-wrap: normal;
+ overflow: auto;
+}
diff --git a/client/catalog-dev/index.html b/client/catalog-dev/index.html
index 4280fce..b618e07 100644
--- a/client/catalog-dev/index.html
+++ b/client/catalog-dev/index.html
@@ -16,6 +16,7 @@
</script>
<!-- Styles -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/cubeLoader.css">
<link rel="stylesheet" href="css/theme.min.css">
<link rel="stylesheet" href="css/style.css">
diff --git a/client/catalog-dev/js/catalog.js b/client/catalog-dev/js/catalog.js
index 1e88459..5b953d8 100644
--- a/client/catalog-dev/js/catalog.js
+++ b/client/catalog-dev/js/catalog.js
@@ -203,6 +203,22 @@
this.setupRequestForm();
+ this.resultTable.popover({
+ selector : ".metaDataLink",
+ content: function(){
+ return scope.getMetaData(this);
+ },
+ title: "Metadata",
+ html: true,
+ trigger: 'click',
+ placement: 'bottom'
+ });
+
+ this.resultTable.on('click', '.metaDataLink', function(e){
+ //This prevents the page from scrolling when you click on a name.
+ e.preventDefault();
+ });
+
}
Atmos.prototype.clearResults = function(){
@@ -313,9 +329,9 @@
var resultDOM = $(
results.reduce(function(prev, current){
- prev.push('<tr><td><input class="resultSelector" type="checkbox"></td><td>');
+ prev.push('<tr><td><input class="resultSelector" type="checkbox"></td><td class="popover-container"><a href="#" class="metaDataLink">');
prev.push(current);
- prev.push('</td></tr>');
+ prev.push('</a></td></tr>');
return prev;
}, ['<tr><th><input id="resultSelectAll" type="checkbox" title="Select All"> Select</th><th>Name</th></tr>']).join('')
);
@@ -670,7 +686,7 @@
* This function retrieves all segments in order until it knows it has reached the last one.
* It then returns the final joined result.
*/
- Atmos.prototype.getAll = function(prefix, callback, timeout){
+ Atmos.prototype.getAll = function(prefix, callback, failure){
var scope = this;
var d = [];
@@ -678,7 +694,8 @@
var count = 3;
var retry = function(interest){
if (count === 0){
- timeout(interest);
+ console.log("Failed to 'getAll' after 3 attempts", interest);
+ failure(interest);
} else {
count--;
request(interest.getName().get(-1).toSegment());
@@ -792,6 +809,36 @@
}
+ Atmos.prototype.getMetaData = (function(){
+
+ var cache = {};
+
+ return function(element) {
+ var name = $(element).text();
+
+ if (cache[name]) {
+ return ['<pre class="metaData">', cache[name], '</pre>'].join('');
+ }
+
+ var prefix = new Name(name).append("metadata");
+ var id = guid(); //We need an id because the return MUST be a string.
+ var ret = '<div id="' + id + '"><span class="fa fa-spinner fa-spin"></span></div>';
+
+ this.getAll(prefix, function(data){
+ var el = $('<pre class="metaData"></pre>');
+ el.text(data);
+ $('#' + id).remove('span').append(el);
+ cache[name] = data;
+ }, function(interest){
+ $('#' + id).text("The metadata is unavailable for this name.");
+ console.log("Data is unavailable for " + name);
+ });
+
+ return ret;
+
+ }
+ })();
+
return Atmos;
})();