From 555bc61161d590cf889d2254a29fa7d179dc6107 Mon Sep 17 00:00:00 2001
From: Jean-Roch Maitre <jr@2600hz.com>
Date: Thu, 5 May 2016 15:12:46 -0700
Subject: [PATCH] UI-1624: Now render JSON in a more user-friendly way

---
 submodules/callLogs/callLogs.js  | 26 +++-----------------------
 views/callLogs-detailsPopup.html | 18 ++----------------
 2 files changed, 5 insertions(+), 39 deletions(-)

diff --git a/submodules/callLogs/callLogs.js b/submodules/callLogs/callLogs.js
index 304abcc..3b85aba 100644
--- a/submodules/callLogs/callLogs.js
+++ b/submodules/callLogs/callLogs.js
@@ -419,31 +419,11 @@ define(function(require){
 					cdrId: callLogId
 				},
 				success: function(data, status) {
-					function objToArray(obj, prefix) {
-						var prefix = prefix || "",
-							result = [];
-						_.each(obj, function(val, key) {
-							if(typeof val === "object") {
-								result = result.concat(objToArray(val, prefix+key+"."));
-							} else {
-								result.push({
-									key: prefix+key,
-									value: val
-								});
-							}
-						});
-						return result;
-					}
+					var template = $(monster.template(self, 'callLogs-detailsPopup'));
 
-					var detailsArray = objToArray(data.data);
-					detailsArray.sort(function(a, b) {
-						return a.key < b.key ? -1 : a.key > b.key ? 1 : 0;
-					})
+					monster.ui.renderJSON(data.data, template.find('#jsoneditor'));
 
-					monster.ui.dialog(
-						monster.template(self, 'callLogs-detailsPopup', { details: detailsArray }),
-						{ title: self.i18n.active().callLogs.detailsPopupTitle }
-					);
+					monster.ui.dialog(template, { title: self.i18n.active().callLogs.detailsPopupTitle });
 				},
 				error: function(data, status) {
 					monster.ui.alert('error', self.i18n.active().callLogs.alertMessages.getDetailsError);
diff --git a/views/callLogs-detailsPopup.html b/views/callLogs-detailsPopup.html
index 0ed947f..aba4f0b 100644
--- a/views/callLogs-detailsPopup.html
+++ b/views/callLogs-detailsPopup.html
@@ -1,18 +1,4 @@
 <div id="call_logs_details_popup">
-	<table class="monster-details-table">
-		<thead>
-			<tr>
-				<td>{{i18n.callLogs.key}}</td>
-				<td>{{i18n.callLogs.value}}</td>
-			</tr>
-		</thead>
-		<tbody>
-			{{#each details}}
-			<tr>
-				<td title="{{this.key}}">{{this.key}}</td>
-				<td>{{this.value}}</td>
-			</tr>
-			{{/each}}
-		</tbody>
-	</table>
+	<div id="jsoneditor">
+	</div>
 </div>
\ No newline at end of file