Merge pull request #1223 from Ride-The-Lightning/modal-to-graph-lookup

Modal to graph lookup

frontend/index.html

@@ -10,8 +10,9 @@
     <link i18n-rel="" rel="mask-icon" href="assets/images/favicon-light/safari-pinned-tab.svg" color="#5bbad5">
     <meta i18n-content="" name="msapplication-TileColor" content="#da532c">
     <meta i18n-content="" name="theme-color" content="#ffffff">
-  <style>html{width:100%;height:99%;line-height:1.5;overflow-x:hidden;font-family:Roboto,sans-serif!important;font-size:100%}@media only screen and (max-width: 56.25em){html{font-size:90%}}@media only screen and (max-width: 37.5em){html{font-size:80%}}body{box-sizing:border-box;height:100%;margin:0;overflow:hidden}*{margin:0;padding:0}@font-face{font-family:Roboto;src:url(Roboto-Thin.f7a95c9c5999532c.woff2) format("woff2"),url(Roboto-Thin.c13c157cb81e8ebb.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-ThinItalic.b0e084abf689f393.woff2) format("woff2"),url(Roboto-ThinItalic.1111028df6cea564.woff) format("woff");font-weight:100;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Light.0e01b6cd13b3857f.woff2) format("woff2"),url(Roboto-Light.603ca9a537b88428.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-LightItalic.232ef4b20215f720.woff2) format("woff2"),url(Roboto-LightItalic.1b5e142f787151c8.woff) format("woff");font-weight:300;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Regular.475ba9e4e2d63456.woff2) format("woff2"),url(Roboto-Regular.bcefbfee882bc1cb.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-RegularItalic.e3a9ebdaac06bbc4.woff2) format("woff2"),url(Roboto-RegularItalic.0668fae6af0cf8c2.woff) format("woff");font-weight:400;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Medium.457532032ceb0168.woff2) format("woff2"),url(Roboto-Medium.6e1ae5f0b324a0aa.woff) format("woff");font-weight:500;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-MediumItalic.872f7060602d55d2.woff2) format("woff2"),url(Roboto-MediumItalic.e06fb533801cbb08.woff) format("woff");font-weight:500;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Bold.447291a88c067396.woff2) format("woff2"),url(Roboto-Bold.fc482e6133cf5e26.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-BoldItalic.1b15168ef6fa4e16.woff2) format("woff2"),url(Roboto-BoldItalic.e26ba339b06f09f7.woff) format("woff");font-weight:700;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Black.2eaa390d458c877d.woff2) format("woff2"),url(Roboto-Black.b25f67ad8583da68.woff) format("woff");font-weight:900;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-BlackItalic.7dc03ee444552bc5.woff2) format("woff2"),url(Roboto-BlackItalic.c8dc642467cb3099.woff) format("woff");font-weight:900;font-style:italic}</style><link rel="stylesheet" href="styles.8d413010787ae754.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.8d413010787ae754.css"></noscript></head>
+  <style>html{width:100%;height:99%;line-height:1.5;overflow-x:hidden;font-family:Roboto,sans-serif!important;font-size:100%}@media only screen and (max-width: 56.25em){html{font-size:90%}}@media only screen and (max-width: 37.5em){html{font-size:80%}}body{box-sizing:border-box;height:100%;margin:0;overflow:hidden}*{margin:0;padding:0}@font-face{font-family:Roboto;src:url(Roboto-Thin.f7a95c9c5999532c.woff2) format("woff2"),url(Roboto-Thin.c13c157cb81e8ebb.woff) format("woff");font-weight:100;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-ThinItalic.b0e084abf689f393.woff2) format("woff2"),url(Roboto-ThinItalic.1111028df6cea564.woff) format("woff");font-weight:100;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Light.0e01b6cd13b3857f.woff2) format("woff2"),url(Roboto-Light.603ca9a537b88428.woff) format("woff");font-weight:300;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-LightItalic.232ef4b20215f720.woff2) format("woff2"),url(Roboto-LightItalic.1b5e142f787151c8.woff) format("woff");font-weight:300;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Regular.475ba9e4e2d63456.woff2) format("woff2"),url(Roboto-Regular.bcefbfee882bc1cb.woff) format("woff");font-weight:400;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-RegularItalic.e3a9ebdaac06bbc4.woff2) format("woff2"),url(Roboto-RegularItalic.0668fae6af0cf8c2.woff) format("woff");font-weight:400;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Medium.457532032ceb0168.woff2) format("woff2"),url(Roboto-Medium.6e1ae5f0b324a0aa.woff) format("woff");font-weight:500;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-MediumItalic.872f7060602d55d2.woff2) format("woff2"),url(Roboto-MediumItalic.e06fb533801cbb08.woff) format("woff");font-weight:500;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Bold.447291a88c067396.woff2) format("woff2"),url(Roboto-Bold.fc482e6133cf5e26.woff) format("woff");font-weight:700;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-BoldItalic.1b15168ef6fa4e16.woff2) format("woff2"),url(Roboto-BoldItalic.e26ba339b06f09f7.woff) format("woff");font-weight:700;font-style:italic}@font-face{font-family:Roboto;src:url(Roboto-Black.2eaa390d458c877d.woff2) format("woff2"),url(Roboto-Black.b25f67ad8583da68.woff) format("woff");font-weight:900;font-style:normal}@font-face{font-family:Roboto;src:url(Roboto-BlackItalic.7dc03ee444552bc5.woff2) format("woff2"),url(Roboto-BlackItalic.c8dc642467cb3099.woff) format("woff");font-weight:900;font-style:italic}</style><link rel="stylesheet" href="styles.d2ac3f53c185c863.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.d2ac3f53c185c863.css"></noscript></head>
   <body>
     <rtl-app></rtl-app>
-    <script src="runtime.f79e748a5fe814fc.js" type="module"></script><script src="polyfills.9720483e1820202a.js" type="module"></script><script src="main.c59da552765e97fc.js" type="module"></script>
+  <script src="runtime.62b56a1213298524.js" type="module"></script><script src="polyfills.9720483e1820202a.js" type="module"></script><script src="main.773dd8ba6d82bb5a.js" type="module"></script>
+
 </body></html>

frontend/runtime.09c969428c55ea09.js

@@ -1 +0,0 @@
-(()=>{"use strict";var e,v={},m={};function r(e){var o=m[e];if(void 0!==o)return o.exports;var t=m[e]={id:e,loaded:!1,exports:{}};return v[e].call(t.exports,t,t.exports,r),t.loaded=!0,t.exports}r.m=v,e=[],r.O=(o,t,i,f)=>{if(!t){var a=1/0;for(n=0;n<e.length;n++){for(var[t,i,f]=e[n],s=!0,d=0;d<t.length;d++)(!1&f||a>=f)&&Object.keys(r.O).every(b=>r.O[b](t[d]))?t.splice(d--,1):(s=!1,f<a&&(a=f));if(s){e.splice(n--,1);var u=i();void 0!==u&&(o=u)}}return o}f=f||0;for(var n=e.length;n>0&&e[n-1][2]>f;n--)e[n]=e[n-1];e[n]=[t,i,f]},r.d=(e,o)=>{for(var t in o)r.o(o,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:o[t]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce((o,t)=>(r.f[t](e,o),o),[])),r.u=e=>e+"."+{258:"74bd2ac767e7a584",267:"8f996ec2b4b156e0",564:"6a8ee2a47a328022",636:"0bd12e29e4623b7e"}[e]+".js",r.miniCssF=e=>{},r.o=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),(()=>{var e={},o="RTLApp:";r.l=(t,i,f,n)=>{if(e[t])e[t].push(i);else{var a,s;if(void 0!==f)for(var d=document.getElementsByTagName("script"),u=0;u<d.length;u++){var l=d[u];if(l.getAttribute("src")==t||l.getAttribute("data-webpack")==o+f){a=l;break}}a||(s=!0,(a=document.createElement("script")).type="module",a.charset="utf-8",a.timeout=120,r.nc&&a.setAttribute("nonce",r.nc),a.setAttribute("data-webpack",o+f),a.src=r.tu(t)),e[t]=[i];var c=(g,b)=>{a.onerror=a.onload=null,clearTimeout(p);var h=e[t];if(delete e[t],a.parentNode&&a.parentNode.removeChild(a),h&&h.forEach(y=>y(b)),g)return g(b)},p=setTimeout(c.bind(null,void 0,{type:"timeout",target:a}),12e4);a.onerror=c.bind(null,a.onerror),a.onload=c.bind(null,a.onload),s&&document.head.appendChild(a)}}})(),r.r=e=>{typeof Symbol<"u"&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),(()=>{var e;r.tt=()=>(void 0===e&&(e={createScriptURL:o=>o},typeof trustedTypes<"u"&&trustedTypes.createPolicy&&(e=trustedTypes.createPolicy("angular#bundler",e))),e)})(),r.tu=e=>r.tt().createScriptURL(e),r.p="",(()=>{var e={666:0};r.f.j=(i,f)=>{var n=r.o(e,i)?e[i]:void 0;if(0!==n)if(n)f.push(n[2]);else if(666!=i){var a=new Promise((l,c)=>n=e[i]=[l,c]);f.push(n[2]=a);var s=r.p+r.u(i),d=new Error;r.l(s,l=>{if(r.o(e,i)&&(0!==(n=e[i])&&(e[i]=void 0),n)){var c=l&&("load"===l.type?"missing":l.type),p=l&&l.target&&l.target.src;d.message="Loading chunk "+i+" failed.\n("+c+": "+p+")",d.name="ChunkLoadError",d.type=c,d.request=p,n[1](d)}},"chunk-"+i,i)}else e[i]=0},r.O.j=i=>0===e[i];var o=(i,f)=>{var d,u,[n,a,s]=f,l=0;if(n.some(p=>0!==e[p])){for(d in a)r.o(a,d)&&(r.m[d]=a[d]);if(s)var c=s(r)}for(i&&i(f);l<n.length;l++)r.o(e,u=n[l])&&e[u]&&e[u][0](),e[u]=0;return r.O(c)},t=self.webpackChunkRTLApp=self.webpackChunkRTLApp||[];t.forEach(o.bind(null,0)),t.push=o.bind(null,t.push.bind(t))})()})();

frontend/runtime.62b56a1213298524.js

@@ -1 +1 @@
-(()=>{"use strict";var e,v={},m={};function r(e){var f=m[e];if(void 0!==f)return f.exports;var t=m[e]={id:e,loaded:!1,exports:{}};return v[e].call(t.exports,t,t.exports,r),t.loaded=!0,t.exports}r.m=v,e=[],r.O=(f,t,i,o)=>{if(!t){var a=1/0;for(n=0;n<e.length;n++){for(var[t,i,o]=e[n],c=!0,l=0;l<t.length;l++)(!1&o||a>=o)&&Object.keys(r.O).every(b=>r.O[b](t[l]))?t.splice(l--,1):(c=!1,o<a&&(a=o));if(c){e.splice(n--,1);var d=i();void 0!==d&&(f=d)}}return f}o=o||0;for(var n=e.length;n>0&&e[n-1][2]>o;n--)e[n]=e[n-1];e[n]=[t,i,o]},r.d=(e,f)=>{for(var t in f)r.o(f,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:f[t]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce((f,t)=>(r.f[t](e,f),f),[])),r.u=e=>e+"."+{258:"abee29007afd0458",267:"8f996ec2b4b156e0",564:"a9d04248f6c2fa3f",636:"ac7c25a3c29b0ebf"}[e]+".js",r.miniCssF=e=>{},r.o=(e,f)=>Object.prototype.hasOwnProperty.call(e,f),(()=>{var e={},f="RTLApp:";r.l=(t,i,o,n)=>{if(e[t])e[t].push(i);else{var a,c;if(void 0!==o)for(var l=document.getElementsByTagName("script"),d=0;d<l.length;d++){var u=l[d];if(u.getAttribute("src")==t||u.getAttribute("data-webpack")==f+o){a=u;break}}a||(c=!0,(a=document.createElement("script")).type="module",a.charset="utf-8",a.timeout=120,r.nc&&a.setAttribute("nonce",r.nc),a.setAttribute("data-webpack",f+o),a.src=r.tu(t)),e[t]=[i];var s=(g,b)=>{a.onerror=a.onload=null,clearTimeout(p);var h=e[t];if(delete e[t],a.parentNode&&a.parentNode.removeChild(a),h&&h.forEach(y=>y(b)),g)return g(b)},p=setTimeout(s.bind(null,void 0,{type:"timeout",target:a}),12e4);a.onerror=s.bind(null,a.onerror),a.onload=s.bind(null,a.onload),c&&document.head.appendChild(a)}}})(),r.r=e=>{typeof Symbol<"u"&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),(()=>{var e;r.tt=()=>(void 0===e&&(e={createScriptURL:f=>f},typeof trustedTypes<"u"&&trustedTypes.createPolicy&&(e=trustedTypes.createPolicy("angular#bundler",e))),e)})(),r.tu=e=>r.tt().createScriptURL(e),r.p="",(()=>{var e={666:0};r.f.j=(i,o)=>{var n=r.o(e,i)?e[i]:void 0;if(0!==n)if(n)o.push(n[2]);else if(666!=i){var a=new Promise((u,s)=>n=e[i]=[u,s]);o.push(n[2]=a);var c=r.p+r.u(i),l=new Error;r.l(c,u=>{if(r.o(e,i)&&(0!==(n=e[i])&&(e[i]=void 0),n)){var s=u&&("load"===u.type?"missing":u.type),p=u&&u.target&&u.target.src;l.message="Loading chunk "+i+" failed.\n("+s+": "+p+")",l.name="ChunkLoadError",l.type=s,l.request=p,n[1](l)}},"chunk-"+i,i)}else e[i]=0},r.O.j=i=>0===e[i];var f=(i,o)=>{var l,d,[n,a,c]=o,u=0;if(n.some(p=>0!==e[p])){for(l in a)r.o(a,l)&&(r.m[l]=a[l]);if(c)var s=c(r)}for(i&&i(o);u<n.length;u++)r.o(e,d=n[u])&&e[d]&&e[d][0](),e[d]=0;return r.O(s)},t=self.webpackChunkRTLApp=self.webpackChunkRTLApp||[];t.forEach(f.bind(null,0)),t.push=f.bind(null,t.push.bind(t))})()})();
+(()=>{"use strict";var e,v={},m={};function r(e){var f=m[e];if(void 0!==f)return f.exports;var t=m[e]={id:e,loaded:!1,exports:{}};return v[e].call(t.exports,t,t.exports,r),t.loaded=!0,t.exports}r.m=v,e=[],r.O=(f,t,i,o)=>{if(!t){var a=1/0;for(n=0;n<e.length;n++){for(var[t,i,o]=e[n],s=!0,l=0;l<t.length;l++)(!1&o||a>=o)&&Object.keys(r.O).every(b=>r.O[b](t[l]))?t.splice(l--,1):(s=!1,o<a&&(a=o));if(s){e.splice(n--,1);var d=i();void 0!==d&&(f=d)}}return f}o=o||0;for(var n=e.length;n>0&&e[n-1][2]>o;n--)e[n]=e[n-1];e[n]=[t,i,o]},r.d=(e,f)=>{for(var t in f)r.o(f,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:f[t]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce((f,t)=>(r.f[t](e,f),f),[])),r.u=e=>e+"."+{258:"4652524f7421a8a9",267:"8f996ec2b4b156e0",564:"a5d2e9f6026b19a5",636:"ff3a6b898c22c88d"}[e]+".js",r.miniCssF=e=>{},r.o=(e,f)=>Object.prototype.hasOwnProperty.call(e,f),(()=>{var e={},f="RTLApp:";r.l=(t,i,o,n)=>{if(e[t])e[t].push(i);else{var a,s;if(void 0!==o)for(var l=document.getElementsByTagName("script"),d=0;d<l.length;d++){var u=l[d];if(u.getAttribute("src")==t||u.getAttribute("data-webpack")==f+o){a=u;break}}a||(s=!0,(a=document.createElement("script")).type="module",a.charset="utf-8",a.timeout=120,r.nc&&a.setAttribute("nonce",r.nc),a.setAttribute("data-webpack",f+o),a.src=r.tu(t)),e[t]=[i];var c=(g,b)=>{a.onerror=a.onload=null,clearTimeout(p);var h=e[t];if(delete e[t],a.parentNode&&a.parentNode.removeChild(a),h&&h.forEach(y=>y(b)),g)return g(b)},p=setTimeout(c.bind(null,void 0,{type:"timeout",target:a}),12e4);a.onerror=c.bind(null,a.onerror),a.onload=c.bind(null,a.onload),s&&document.head.appendChild(a)}}})(),r.r=e=>{typeof Symbol<"u"&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),(()=>{var e;r.tt=()=>(void 0===e&&(e={createScriptURL:f=>f},typeof trustedTypes<"u"&&trustedTypes.createPolicy&&(e=trustedTypes.createPolicy("angular#bundler",e))),e)})(),r.tu=e=>r.tt().createScriptURL(e),r.p="",(()=>{var e={666:0};r.f.j=(i,o)=>{var n=r.o(e,i)?e[i]:void 0;if(0!==n)if(n)o.push(n[2]);else if(666!=i){var a=new Promise((u,c)=>n=e[i]=[u,c]);o.push(n[2]=a);var s=r.p+r.u(i),l=new Error;r.l(s,u=>{if(r.o(e,i)&&(0!==(n=e[i])&&(e[i]=void 0),n)){var c=u&&("load"===u.type?"missing":u.type),p=u&&u.target&&u.target.src;l.message="Loading chunk "+i+" failed.\n("+c+": "+p+")",l.name="ChunkLoadError",l.type=c,l.request=p,n[1](l)}},"chunk-"+i,i)}else e[i]=0},r.O.j=i=>0===e[i];var f=(i,o)=>{var l,d,[n,a,s]=o,u=0;if(n.some(p=>0!==e[p])){for(l in a)r.o(a,l)&&(r.m[l]=a[l]);if(s)var c=s(r)}for(i&&i(o);u<n.length;u++)r.o(e,d=n[u])&&e[d]&&e[d][0](),e[d]=0;return r.O(c)},t=self.webpackChunkRTLApp=self.webpackChunkRTLApp||[];t.forEach(f.bind(null,0)),t.push=f.bind(null,t.push.bind(t))})()})();

src/app/cln/graph/lookups/lookups.component.ts

@@ -34,17 +34,18 @@ export class CLNLookupsComponent implements OnInit, OnDestroy {
   public faSearch = faSearch;
   public screenSize = '';
   public screenSizeEnum = ScreenSizeEnum;
-  private unSubs: Array<Subject<void>> = [new Subject()];
+  private unSubs: Array<Subject<void>> = [new Subject(), new Subject()];
 
   constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<RTLState>, private actions: Actions) {
     this.screenSize = this.commonService.getScreenSize();
   }
 
   ngOnInit() {
-    this.actions.
-      pipe(
-        takeUntil(this.unSubs[0]),
-        filter((action) => (action.type === CLNActions.SET_LOOKUP_CLN || action.type === CLNActions.UPDATE_API_CALL_STATUS_CLN))
+    if (window.history.state && window.history.state.lookupType) {
+      this.selectedFieldId = +window.history.state.lookupType || 0;
+      this.lookupKey = window.history.state.lookupValue || '';
+    }
+    this.actions.pipe(takeUntil(this.unSubs[0]),filter((action) => (action.type === CLNActions.SET_LOOKUP_CLN || action.type === CLNActions.UPDATE_API_CALL_STATUS_CLN))
       ).subscribe((resLookup: any) => {
         if (resLookup.type === CLNActions.SET_LOOKUP_CLN) {
           this.flgLoading[0] = true;

src/app/cln/peers-channels/channels/channel-information-modal/channel-information.component.html

@@ -12,7 +12,9 @@
         <div fxLayout="row">
           <div fxFlex="50">
             <h4 fxLayoutAlign="start" class="font-bold-500">Short Channel ID</h4>
-            <span class="foreground-secondary-text">{{channel.short_channel_id}}</span>
+            <span class="foreground-secondary-text go-to-link" matTooltip="Go To Graph Lookup" (click)="onGoToLink()" >
+              {{channel.short_channel_id}}
+            </span>
           </div>
           <div fxFlex="50">
             <h4 fxLayoutAlign="start" class="font-bold-500">Peer Alias</h4>

src/app/cln/peers-channels/channels/channel-information-modal/channel-information.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, Inject } from '@angular/core';
+import { Router } from '@angular/router';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { faReceipt } from '@fortawesome/free-solid-svg-icons';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -24,7 +25,7 @@ export class CLNChannelInformationComponent implements OnInit {
   public screenSize = '';
   public screenSizeEnum = ScreenSizeEnum;
 
-  constructor(public dialogRef: MatDialogRef<CLNChannelInformationComponent>, @Inject(MAT_DIALOG_DATA) public data: CLNChannelInformation, private logger: LoggerService, private commonService: CommonService, private snackBar: MatSnackBar) { }
+  constructor(public dialogRef: MatDialogRef<CLNChannelInformationComponent>, @Inject(MAT_DIALOG_DATA) public data: CLNChannelInformation, private logger: LoggerService, private commonService: CommonService, private snackBar: MatSnackBar, private router: Router) { }
 
   ngOnInit() {
     this.channel = this.data.channel;
@@ -45,4 +46,9 @@ export class CLNChannelInformationComponent implements OnInit {
     this.logger.info('Copied Text: ' + payload);
   }
 
+  onGoToLink() {
+    this.router.navigateByUrl('/cln/graph/lookups', { state: { lookupType: '1', lookupValue: this.channel.short_channel_id } }); // 1 = Channel
+    this.onClose();
+  }
+
 }

src/app/cln/peers-channels/peers/peers.component.ts

@@ -131,6 +131,9 @@ export class CLNPeersComponent implements OnInit, AfterViewInit, OnDestroy {
         data: {
           type: AlertTypeEnum.INFORMATION,
           alertTitle: 'Peer Information',
+          goToFieldValue: selPeer.id,
+          goToName: 'Graph lookup',
+          goToLink: '/cln/graph/lookups',
           showQRName: 'Public Key',
           showQRField: selPeer.id,
           message: reorderedPeer

src/app/eclair/graph/lookups/lookups.component.ts

@@ -23,7 +23,6 @@ export class ECLLookupsComponent implements OnInit, OnDestroy {
 
   @ViewChild('form', { static: true }) form: any;
   public lookupKeyCtrl = new UntypedFormControl();
-  // Public lookupKey = '';
   public nodeLookupValue: LookupNode = {};
   public channelLookupValue = [];
   public flgSetLookupValue = false;
@@ -44,6 +43,10 @@ export class ECLLookupsComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
+    if (window.history.state && window.history.state.lookupType) {
+      this.selectedFieldId = +window.history.state.lookupType || 0;
+      this.lookupKeyCtrl.setValue(window.history.state.lookupValue || '');
+    }
     this.actions.pipe(
       takeUntil(this.unSubs[0]),
       filter((action) => (action.type === ECLActions.SET_LOOKUP_ECL || action.type === ECLActions.UPDATE_API_CALL_STATUS_ECL))).

src/app/eclair/peers-channels/peers/peers.component.ts

@@ -131,6 +131,9 @@ export class ECLPeersComponent implements OnInit, AfterViewInit, OnDestroy {
         data: {
           type: AlertTypeEnum.INFORMATION,
           alertTitle: 'Peer Information',
+          goToFieldValue: selPeer.nodeId,
+          goToName: 'Graph lookup',
+          goToLink: '/ecl/graph/lookups',          
           showQRName: 'Public Key',
           showQRField: selPeer.nodeId,
           message: reorderedPeer

src/app/lnd/graph/lookups/lookups.component.ts

@@ -40,6 +40,10 @@ export class LookupsComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
+    if (window.history.state && window.history.state.lookupType) {
+      this.selectedFieldId = +window.history.state.lookupType || 0;
+      this.lookupKey = window.history.state.lookupValue || '';
+    }
     this.actions.pipe(takeUntil(this.unSubs[0]), filter((action) => (action.type === LNDActions.SET_LOOKUP_LND || action.type === LNDActions.UPDATE_API_CALL_STATUS_LND))).
       subscribe((resLookup: any) => {
         if (resLookup.type === LNDActions.SET_LOOKUP_LND) {

src/app/lnd/peers-channels/channels/channel-information-modal/channel-information.component.html

@@ -12,7 +12,9 @@
         <div fxLayout="row">
           <div fxFlex="50">
             <h4 fxLayoutAlign="start" class="font-bold-500">Channel ID</h4>
-            <span class="foreground-secondary-text">{{channel.chan_id}}</span>
+            <span class="foreground-secondary-text go-to-link" matTooltip="Go To Graph Lookup" (click)="onGoToLink()" >
+              {{channel.chan_id}}
+            </span>            
           </div>
           <div fxFlex="50">
             <h4 fxLayoutAlign="start" class="font-bold-500">Peer Alias</h4>

src/app/lnd/peers-channels/channels/channel-information-modal/channel-information.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, Inject } from '@angular/core';
+import { Router } from '@angular/router';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { faReceipt } from '@fortawesome/free-solid-svg-icons';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -24,7 +25,7 @@ export class ChannelInformationComponent implements OnInit {
   public screenSize = '';
   public screenSizeEnum = ScreenSizeEnum;
 
-  constructor(public dialogRef: MatDialogRef<ChannelInformationComponent>, @Inject(MAT_DIALOG_DATA) public data: ChannelInformation, private logger: LoggerService, private commonService: CommonService, private snackBar: MatSnackBar) { }
+  constructor(public dialogRef: MatDialogRef<ChannelInformationComponent>, @Inject(MAT_DIALOG_DATA) public data: ChannelInformation, private logger: LoggerService, private commonService: CommonService, private snackBar: MatSnackBar, private router: Router) { }
 
   ngOnInit() {
     this.channel = this.data.channel;
@@ -45,4 +46,9 @@ export class ChannelInformationComponent implements OnInit {
     this.logger.info('Copied Text: ' + payload);
   }
 
+  onGoToLink() {
+    this.router.navigateByUrl('/lnd/graph/lookups', { state: { lookupType: '1', lookupValue: this.channel.chan_id } }); // 1 = Channel
+    this.onClose();
+  }
+
 }

src/app/lnd/peers-channels/peers/peers.component.ts

@@ -121,6 +121,9 @@ export class PeersComponent implements OnInit, AfterViewInit, OnDestroy {
         data: {
           type: AlertTypeEnum.INFORMATION,
           alertTitle: 'Peer Information',
+          goToFieldValue: selPeer.pub_key,
+          goToName: 'Graph lookup',
+          goToLink: '/lnd/graph/lookups',
           showQRName: 'Public Key',
           showQRField: selPeer.pub_key,
           message: reorderedPeer

src/app/shared/components/data-modal/alert-message/alert-message.component.html

@@ -56,11 +56,18 @@
                   <ng-container *ngSwitchCase="dataTypeEnum.NUMBER">{{obj.value | number: obj.digitsInfo ? obj.digitsInfo : '1.0-3'}}</ng-container>
                   <ng-container *ngSwitchCase="dataTypeEnum.BOOLEAN">{{obj.value ? 'True' : 'False'}}</ng-container>
                   <ng-container *ngSwitchDefault>
-                    <p *ngIf="data.openedBy === 'SWAP' && obj.key === 'state';  else noStyleBlock"fxLayout="row" [ngClass]="{'failed-status': obj.value === LoopStateEnum.FAILED}">
+                    <p *ngIf="data.openedBy === 'SWAP' && obj.key === 'state'; else noStyleBlock" fxLayout="row" [ngClass]="{'failed-status': obj.value === LoopStateEnum.FAILED}">
                       {{obj.value}}
                       <mat-icon *ngIf="obj.value === LoopStateEnum.FAILED" fxLayoutAlign="end end" class="icon-failed-status">info</mat-icon>
                     </p>
-                    <ng-template #noStyleBlock>{{obj.value}}</ng-template>
+                    <ng-template #noStyleBlock>
+                      <p *ngIf="obj.value === goToFieldValue; else noStyleChild" fxLayout="row" class="go-to-link" matTooltip="{{'Go To ' + goToName}}" (click)="onGoToLink()" >
+                        {{obj.value}}
+                      </p>
+                      <ng-template #noStyleChild>
+                        {{obj.value}}
+                      </ng-template>
+                    </ng-template>
                   </ng-container>
                 </span>
               </span>

src/app/shared/components/data-modal/alert-message/alert-message.component.scss

@@ -1,3 +1,3 @@
 .display-block {
   display: block;
-}
+}

src/app/shared/components/data-modal/alert-message/alert-message.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, AfterViewChecked, Inject, ViewChild, ElementRef, OnDestroy, Renderer2 } from '@angular/core';
+import { Router } from '@angular/router';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 
@@ -31,6 +32,9 @@ export class AlertMessageComponent implements OnInit, AfterViewChecked, OnDestro
   private unlistenStart: () => void;
   private unlistenEnd: () => void;
   public LoopStateEnum = LoopStateEnum;
+  public goToFieldValue = '';
+  public goToName = '';
+  public goToLink = '';
   public showQRField = '';
   public showQRName = '';
   public showCopyName = '';
@@ -44,11 +48,14 @@ export class AlertMessageComponent implements OnInit, AfterViewChecked, OnDestro
   public scrollDirection = 'DOWN';
   public shouldScroll = true;
 
-  constructor(public dialogRef: MatDialogRef<AlertMessageComponent>, @Inject(MAT_DIALOG_DATA) public data: AlertData, private logger: LoggerService, private snackBar: MatSnackBar, private commonService: CommonService, private renderer: Renderer2) { }
+  constructor(public dialogRef: MatDialogRef<AlertMessageComponent>, @Inject(MAT_DIALOG_DATA) public data: AlertData, private logger: LoggerService, private snackBar: MatSnackBar, private commonService: CommonService, private renderer: Renderer2, private router: Router) { }
 
   ngOnInit() {
     this.screenSize = this.commonService.getScreenSize();
     this.messageObjs = this.data.message || [];
+    this.goToFieldValue = this.data.goToFieldValue ? this.data.goToFieldValue : '';
+    this.goToName = this.data.goToName ? this.data.goToName : '';
+    this.goToLink = this.data.goToLink ? this.data.goToLink : '';
     this.showQRField = this.data.showQRField ? this.data.showQRField : '';
     this.showQRName = this.data.showQRName ? this.data.showQRName : '';
     this.showCopyName = this.data.showCopyName ? this.data.showCopyName : '';
@@ -84,6 +91,11 @@ export class AlertMessageComponent implements OnInit, AfterViewChecked, OnDestro
     this.dialogRef.close(false);
   }
 
+  onGoToLink() {
+    this.router.navigateByUrl(this.goToLink, { state: { lookupType: '0', lookupValue: this.goToFieldValue } }); // 0 = Node
+    this.onClose();
+  }
+
   ngOnDestroy() {
     if (this.unlistenStart) {
       this.unlistenStart();

src/app/shared/models/alertData.ts

@@ -186,6 +186,9 @@ export interface AlertData {
   titleMessage?: string;
   message?: Array<Array<MessageDataField>>;
   scrollable?: boolean;
+  goToFieldValue?: string;
+  goToName?: string;
+  goToLink?: string;
   showQRName?: string;
   showQRField?: string;
   newlyAdded?: boolean;

src/app/shared/theme/styles/root.scss

@@ -1582,6 +1582,12 @@ mat-cell:last-of-type, .mdc-data-table__header-cell:last-of-type, mat-footer-cel
   }
 }
 
+.go-to-link {
+  text-decoration: underline;
+  font-weight: 500;
+  cursor: pointer;
+}
+
 .mat-mdc-card.dashboard-card {
   padding: 0 ($gap*1.5) !important;
   @include for_screensize(tab-port) {