Add support for "db types"

app/src/app/components/pretty-json/pretty-json.component.scss

@@ -23,6 +23,11 @@
 	}
 }
 
+.dbref {
+	color: var(--text-darker);
+	font-style: italic;
+}
+
 :host:hover .object-info .actions {
 	display: initial;
 }

app/src/app/components/pretty-json/pretty-json.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, Input, ElementRef, Renderer2, Output, EventEmitter,
 import { JsonParserService } from '../../services/json-parser.service';
 import { NotificationsService } from '../../services/notifications.service';
 import { environment } from '../../../environments/environment';
+import type { CollectionRefs, Reference } from '../../../../../lib/Database';
 
 // All of this is heavily inspired by the Genghis app `pretty-print`
 // and adapted to angular
@@ -37,6 +38,8 @@ export class PrettyJsonComponent implements OnInit {
   @Input()  json: any;
   @Input()  autoCollapse = false;
   @Input()  readOnly = false;
+  @Input()  collectionRefs: CollectionRefs;
+  @Input()  baseUrl: string;
   @Output() go = new EventEmitter();
   @Output() edit = new EventEmitter();
   @Output() remove = new EventEmitter();
@@ -222,7 +225,7 @@ export class PrettyJsonComponent implements OnInit {
     return span;
   }
 
-  private createView(key, holder) {
+  private createView(key, holder, ancestors: string[] = []) {
     let mind      = this.gap;
     let indent    = '    ';
     let value     = holder[key];
@@ -289,11 +292,11 @@ export class PrettyJsonComponent implements OnInit {
         }
 
         // Iterate through all the keys in the object.
-        const partial = [];
+        const partial: { prop: any; ancestors: string[]; refs?: Reference[] }[] = [];
         const cologn = this.text(': ');
         for (const k in value) {
           if (Object.hasOwnProperty.call(value, k)) {
-            const view = this.createView(k, value);
+            const view = this.createView(k, value, [...ancestors, k]);
             if (view) {
               spanClass = 'prop'
                 + (view.collapsible ? ' collapsible' : '')
@@ -309,16 +312,17 @@ export class PrettyJsonComponent implements OnInit {
               this.renderer.appendChild(prop, cologn.cloneNode(false));
               this.renderer.appendChild(prop, view);
 
+              const isObj = view.classList.contains('object');
               if (view.collapsible) {
-                const isObj = view.classList.contains('object');
                 const child = this.span('e');
                 this.renderer.appendChild(child, this.text(isObj ? '{ ' : '[ '));
                 this.renderer.appendChild(child, this.span("summary", this.text('...')));
                 this.renderer.appendChild(child, this.text(isObj ? ' }' : ' ]'));
                 this.renderer.appendChild(prop, child);
               }
 
-              partial.push(prop);
+              const refs = !isObj ? this.collectionRefs[[...ancestors, k].join('.')] : [];
+              partial.push({ prop, refs, ancestors });
             }
           }
         }
@@ -336,12 +340,24 @@ export class PrettyJsonComponent implements OnInit {
         el.collapsible = true;
         this.renderer.appendChild(el, this.text('{\n' + this.gap));
 
-        const glue = this.text(',\n' + this.gap);
+        const glue = this.text('\n' + this.gap);
         for (let i = 0; i < partial.length; i++) {
-          if (i > 0) {
-            this.renderer.appendChild(el, glue.cloneNode(true));
+          const { prop, refs } = partial[i];
+          this.renderer.appendChild(el, prop);
+          this.renderer.appendChild(el, this.text(','));
+
+          if (refs) {
+            for (const ref of refs) {
+              this.renderer.appendChild(el, this.text(' '));
+
+              const child = this.element('a', 'dbref');
+              this.renderer.setAttribute(child, 'href', `${this.baseUrl}${ref.collection}?query={${prop.innerText}}`);
+              this.renderer.appendChild(child, this.text(`${ref.collection}[${ref.key}]`));
+              this.renderer.appendChild(el, child);
+            }
           }
-          this.renderer.appendChild(el, partial[i]);
+
+          this.renderer.appendChild(el, glue.cloneNode(true));
         }
 
         this.renderer.appendChild(el, this.text('\n' + mind + '}'));

app/src/app/pages/document/document.component.html

@@ -3,6 +3,8 @@
     <pretty-json
       *ngIf="item"
       [json]="item"
+      [collectionRefs]="collectionRefs"
+      [baseUrl]="baseUrl" 
       [readOnly]="readOnly"
       (edit)="editDocument($event)"
       (remove)="remove()"

app/src/app/pages/document/document.component.ts

@@ -3,6 +3,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 import { MongoDbService } from '../../services/mongo-db.service';
 import { NotificationsService } from '../../services/notifications.service';
+import type { CollectionRefs } from '../../../../../lib/Database';
 
 @Component({
   selector: 'app-document',
@@ -14,9 +15,11 @@ export class DocumentComponent implements OnInit {
   database:   string;
   collection: string;
   document:   string;
+  baseUrl:    string;
 
   readOnly = false;
   item;
+  collectionRefs: CollectionRefs;
 
   loading = true;
 
@@ -36,6 +39,7 @@ export class DocumentComponent implements OnInit {
       this.database   = d.get("database");
       this.collection = d.get("collection");
       this.document   = d.get("document");
+      this.baseUrl    = `/servers/${this.server}/databases/${this.database}/collections/`;
 
       this.get();
     })
@@ -45,6 +49,7 @@ export class DocumentComponent implements OnInit {
     this.mongodb.getDocument(this.server, this.database, this.collection, this.document).subscribe((res: any) => {
       this.loading = false;
       this.item = res.document;
+      this.collectionRefs = res.collectionRefs;
     });
   }
 

app/src/app/pages/explore/explore.component.html

@@ -25,6 +25,8 @@ <h1 class="center loading">
                   [hidden]="loading.content"
                   autoCollapse="true"
                   [json]="item"
+                  [collectionRefs]="collectionRefs"
+                  [baseUrl]="baseUrl"
                   [readOnly]="readOnly"
                   (go)="go($event)"
                   (edit)="editDocument(item._id, $event)"

app/src/app/pages/explore/explore.component.ts

@@ -7,6 +7,7 @@ import { MongoDbService } from '../../services/mongo-db.service';
 import { SearchParams } from '../../components/search-box/search-box.component';
 import { JsonParserService } from '../../services/json-parser.service';
 import { NotificationsService } from '../../services/notifications.service';
+import type { CollectionRefs } from '../../../../../lib/Database';
 
 @Component({
   selector: 'app-explore',
@@ -17,6 +18,7 @@ export class ExploreComponent implements OnInit {
   server:     string;
   database:   string;
   collection: string;
+  baseUrl:    string;
 
   readOnly = false;
   params: Partial<SearchParams>;
@@ -30,6 +32,7 @@ export class ExploreComponent implements OnInit {
     start: 0
   };
   items      = [];
+  collectionRefs: CollectionRefs;
 
   constructor(
     private activatedRoute: ActivatedRoute,
@@ -50,6 +53,7 @@ export class ExploreComponent implements OnInit {
       this.server     = params.get('server');
       this.database   = params.get('database');
       this.collection = params.get('collection');
+      this.baseUrl    = `/servers/${this.server}/databases/${this.database}/collections/`;
 
       let query;
       let sort;
@@ -111,6 +115,7 @@ export class ExploreComponent implements OnInit {
 
         if (res.ok) {
           this.items = res.results;
+          this.collectionRefs = res.collectionRefs;
         }
       });
 

app/src/app/pages/servers/servers.component.html

@@ -9,6 +9,8 @@
         </button>
         <div *ngIf="adding">
           <input type="text" placeholder="user:password@hostname:port" [(ngModel)]="newServer" [disabled]="loading" />
+          <input type="text" placeholder="URL to retrieve server types" [(ngModel)]="newTypesUrl"
+            [disabled]="loading" />
         </div>
         <button *ngIf="adding"
                 class="btn btn-outline-success btn-sm"

app/src/app/pages/servers/servers.component.ts

@@ -12,6 +12,7 @@ export class ServersComponent implements OnInit {
   loading = true;
   adding = false;
   newServer = "";
+  newTypesUrl = "";
 
   constructor(private mongoDb: MongoDbService, private modalService: NgbModal) { }
 
@@ -43,10 +44,11 @@ export class ServersComponent implements OnInit {
   }
 
   addServer() {
-    this.mongoDb.addServer(this.newServer)
+    this.mongoDb.addServer(this.newServer, this.newTypesUrl)
       .subscribe((data: any) => {
         if (data.ok) {
           this.newServer = "";
+          this.newTypesUrl = "";
           this.adding = false;
           this.refresh();
         }

app/src/app/services/mongo-db.service.ts

@@ -74,8 +74,8 @@ export class MongoDbService {
     return this.get<ServerJSON[]>(`${this.apiBaseUrl}/servers`);
   }
 
-  addServer(url: string) {
-    return this.put(`${this.apiBaseUrl}/servers`, { url: url });
+  addServer(url: string, typesUrl: string) {
+    return this.put(`${this.apiBaseUrl}/servers`, { url, typesUrl });
   }
 
   removeServer(server: string) {

lib/Database.ts

@@ -14,6 +14,23 @@ export interface DatabaseJSON {
   collections:    CollectionJSON[]
 }
 
+export type Reference = {
+  /** The external collection this references links to */
+  collection: string;
+  /** The key in the external collection, useful to generate a query based on it */
+  key:        string;
+}
+
+/**
+ * List of keys in the collection documents that are associated with documents in other collections
+ * The collection a key refers to can vary from one document to another, hence the array
+ */
+export type CollectionRefs = { [prop: string]: Reference[]; }
+
+export type DbRefs = {
+  [collection: string]: CollectionRefs;
+}
+
 export class Database {
   private _db:    MongoDb.Db;
 

lib/HostsManager.ts

@@ -6,6 +6,7 @@ import * as Nedb from 'nedb';
 
 export interface Host {
   path: string
+  typesUrl?: string
 }
 
 const DEFAULT_HOSTS = process.env.MONGOKU_DEFAULT_HOST ? process.env.MONGOKU_DEFAULT_HOST.split(';') : ['localhost:27017'];
@@ -57,13 +58,14 @@ export class HostsManager {
     });
   }
 
-  async add(path: string): Promise<void> {
+  async add(path: string, typesUrl: string): Promise<void> {
     return new Promise<void>((resolve, reject) => {
       this._db.update({
         path: path
       }, {
         $set: {
-          path: path
+          path: path,
+          typesUrl: typesUrl.length ? typesUrl : undefined
         }
       }, { upsert: true }, (err: Error) => {
         if (err) {