feat(container-inspect): display content in tree view by default (#1310)

app/components/containerInspect/containerInspect.html

@@ -10,9 +10,14 @@
   <div class="col-lg-12 col-md-12 col-xs-12">
     <rd-widget>
       <rd-widget-header icon="fa-icon-circle" title="Inspect">
+        <span class="btn-group btn-group-sm">
+          <label class="btn btn-primary" ng-model="state.DisplayTextView" uib-btn-radio="false"><i class="fa fa-code space-right" aria-hidden="true"></i>Tree</label>
+          <label class="btn btn-primary" ng-model="state.DisplayTextView" uib-btn-radio="true"><i class="fa fa-file-text-o space-right" aria-hidden="true"></i>Text</label>
+        </span>
       </rd-widget-header>
       <rd-widget-body>
-        <pre>{{ containerInfo|json:4 }}</pre>
+        <pre ng-show="state.DisplayTextView">{{ containerInfo|json:4 }}</pre>
+        <json-tree ng-hide="state.DisplayTextView" object="containerInfo" root-name="containerInfo.Id" start-expanded="true"></json-tree>
       </rd-widget-body>
     </rd-widget>
   </div>

app/components/containerInspect/containerInspectController.js

@@ -1,6 +1,10 @@
-angular.module('containerInspect', [])
+angular.module('containerInspect', ['angular-json-tree'])
 .controller('ContainerInspectController', ['$scope', '$transition$', 'Notifications', 'ContainerService',
 function ($scope, $transition$, Notifications, ContainerService) {
+
+  $scope.state = { DisplayTextView: false };
+  $scope.containerInfo = {};
+
   function initView() {
     $('#loadingViewSpinner').show();
 

assets/css/app.css

@@ -7,10 +7,6 @@ html, body, #content-wrapper, .page-content, #view {
   white-space: normal !important;
 }
 
-.btn-group button {
-  margin: 3px;
-}
-
 .messages {
   max-height: 50px;
   overflow-x: hidden;
@@ -615,3 +611,20 @@ ul.sidebar .sidebar-list .sidebar-sublist a.active {
   font-family: monospace;
   font-weight: 600;
 }
+
+/* json-tree */
+
+json-tree {
+  font-size: 13px;
+  color: #30426a;
+}
+json-tree .key {
+  color: #738bc0;
+  padding-right: 5px;
+}
+
+json-tree .branch-preview {
+  font-style: normal;
+  font-size: 11px;
+  opacity: .5;
+}

bower.json

@@ -34,6 +34,7 @@
     "angular-utils-pagination": "~0.11.1",
     "angular-local-storage": "~0.5.2",
     "angular-jwt": "~0.1.8",
+    "angular-json-tree": "1.0.1",
     "angular-google-analytics": "~1.1.9",
     "bootstrap": "~3.3.6",
     "filesize": "~3.3.0",

vendor.yml

@@ -47,6 +47,7 @@ css:
   - bower_components/angularjs-slider/dist/rzslider.css
   - bower_components/codemirror/lib/codemirror.css
   - bower_components/codemirror/addon/lint/lint.css
+  - bower_components/angular-json-tree/dist/angular-json-tree.css
   minified:
   - bower_components/bootstrap/dist/css/bootstrap.min.css
   - bower_components/rdash-ui/dist/css/rdash.min.css
@@ -58,6 +59,7 @@ css:
   - bower_components/angularjs-slider/dist/rzslider.min.css
   - bower_components/codemirror/lib/codemirror.css
   - bower_components/codemirror/addon/lint/lint.css
+  - bower_components/angular-json-tree/dist/angular-json-tree.css
 angular:
   regular:
   - bower_components/angular/angular.js
@@ -74,6 +76,7 @@ angular:
   - bower_components/ng-file-upload/ng-file-upload.js
   - bower_components/angularjs-slider/dist/rzslider.js
   - bower_components/angular-multi-select/isteven-multi-select.js
+  - bower_components/angular-json-tree/dist/angular-json-tree.js
   minified:
   - bower_components/angular/angular.min.js
   - bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js
@@ -89,3 +92,4 @@ angular:
   - bower_components/ng-file-upload/ng-file-upload.min.js
   - bower_components/angularjs-slider/dist/rzslider.min.js
   - bower_components/angular-multi-select/isteven-multi-select.js
+  - bower_components/angular-json-tree/dist/angular-json-tree.min.js