From 5b97d25dcdaf342fc9beb02f79f2a2eacedb9835 Mon Sep 17 00:00:00 2001
From: danielbroll <danielbroll@protonmail.com>
Date: Tue, 24 May 2022 15:50:10 +0200
Subject: [PATCH] Refactoring: Split monster tiles.html into different files

---
 .../resources/templates/channel-details.html  |  14 +-
 ui/src/main/resources/templates/channels.html |   2 +-
 .../main/resources/templates/dashboard.html   |  10 +-
 .../resources/templates/fragments/tiles.html  | 364 ------------------
 .../resources/templates/node-details.html     |  14 +-
 ui/src/main/resources/templates/nodes.html    |   2 +-
 .../templates/tiles/full/all-channels.html    |  19 +
 .../templates/tiles/full/all-nodes.html       |  19 +
 .../templates/tiles/full/channel-tile.html    |  35 ++
 .../templates/tiles/third/balance.html        |  47 +++
 .../tiles/third/channel-details.html          |  40 ++
 .../tiles/third/channel-warning.html          |  25 ++
 .../templates/tiles/third/fee-policy.html     |  44 +++
 .../templates/tiles/third/fee-report.html     |  36 ++
 .../templates/tiles/third/node-warning.html   |  25 ++
 .../templates/tiles/third/on-chain-costs.html |  43 +++
 .../templates/tiles/third/online-report.html  |  21 +
 .../tiles/third/rebalance-report.html         |  46 +++
 .../templates/tiles/third/status.html         |  20 +
 19 files changed, 441 insertions(+), 385 deletions(-)
 delete mode 100644 ui/src/main/resources/templates/fragments/tiles.html
 create mode 100644 ui/src/main/resources/templates/tiles/full/all-channels.html
 create mode 100644 ui/src/main/resources/templates/tiles/full/all-nodes.html
 create mode 100644 ui/src/main/resources/templates/tiles/full/channel-tile.html
 create mode 100644 ui/src/main/resources/templates/tiles/third/balance.html
 create mode 100644 ui/src/main/resources/templates/tiles/third/channel-details.html
 create mode 100644 ui/src/main/resources/templates/tiles/third/channel-warning.html
 create mode 100644 ui/src/main/resources/templates/tiles/third/fee-policy.html
 create mode 100644 ui/src/main/resources/templates/tiles/third/fee-report.html
 create mode 100644 ui/src/main/resources/templates/tiles/third/node-warning.html
 create mode 100644 ui/src/main/resources/templates/tiles/third/on-chain-costs.html
 create mode 100644 ui/src/main/resources/templates/tiles/third/online-report.html
 create mode 100644 ui/src/main/resources/templates/tiles/third/rebalance-report.html
 create mode 100644 ui/src/main/resources/templates/tiles/third/status.html

diff --git a/ui/src/main/resources/templates/channel-details.html b/ui/src/main/resources/templates/channel-details.html
index 7becc31f..2b617d31 100644
--- a/ui/src/main/resources/templates/channel-details.html
+++ b/ui/src/main/resources/templates/channel-details.html
@@ -8,15 +8,15 @@
 
 <div class="row">
 
-    <div th:replace="~{fragments/tiles :: channel-details(${channel})}"/>
-    <div th:replace="~{fragments/tiles :: fee-policy(${channel.channelStatus}, ${channel.policies})}"/>
-    <div th:replace="~{fragments/tiles :: balance(${channel.balanceInformation})}"/>
+    <div th:replace="~{tiles/third/channel-details :: tile(${channel})}"/>
+    <div th:replace="~{tiles/third/fee-policy :: tile(${channel.channelStatus}, ${channel.policies})}"/>
+    <div th:replace="~{tiles/third/balance :: tile(${channel.balanceInformation})}"/>
 
-    <div th:replace="~{fragments/tiles :: on-chain-costs(${channel.onChainCosts})}"/>
-    <div th:replace="~{fragments/tiles :: rebalance-report(${channel.rebalanceReport})}"/>
-    <div th:replace="~{fragments/tiles :: fee-report(${channel.feeReport})}"/>
+    <div th:replace="~{tiles/third/on-chain-costs :: tile(${channel.onChainCosts})}"/>
+    <div th:replace="~{tiles/third/rebalance-report :: tile(${channel.rebalanceReport})}"/>
+    <div th:replace="~{tiles/third/fee-report :: tile(${channel.feeReport})}"/>
 
-    <div th:replace="~{fragments/tiles :: channel-warning('Warning', null, ${channel.warnings})}"/>
+    <div th:replace="~{tiles/third/channel-warning :: tile('Warning', null, ${channel.warnings})}"/>
 </div>
 
 </body>
diff --git a/ui/src/main/resources/templates/channels.html b/ui/src/main/resources/templates/channels.html
index 7f11bd2e..210a8615 100644
--- a/ui/src/main/resources/templates/channels.html
+++ b/ui/src/main/resources/templates/channels.html
@@ -4,7 +4,7 @@
 
 <body>
 
-<div class="top-space" th:insert="~{fragments/tiles :: all-channels}"/>
+<div class="top-space" th:insert="~{tiles/full/all-channels :: tile}"/>
 
 </body>
 
diff --git a/ui/src/main/resources/templates/dashboard.html b/ui/src/main/resources/templates/dashboard.html
index ff0da476..11b9ff95 100644
--- a/ui/src/main/resources/templates/dashboard.html
+++ b/ui/src/main/resources/templates/dashboard.html
@@ -5,19 +5,19 @@
 <body>
 
 <div class="row top-space">
-    <div th:replace="~{fragments/tiles :: status(${status})}"/>
+    <div th:replace="~{tiles/third/status :: tile(${status})}"/>
 
     <th:block th:each="node : ${warnings.nodesWithWarnings}" class="list-group-item">
-        <div th:replace="~{fragments/tiles :: node-warning(${node.alias}, ${node.pubkey}, ${node.warnings})}"/>
+        <div th:replace="~{tiles/third/node-warning :: tile(${node.alias}, ${node.pubkey}, ${node.warnings})}"/>
     </th:block>
 
     <th:block th:each="channel : ${warnings.channelsWithWarnings}" class="list-group-item">
-        <div th:replace="~{fragments/tiles :: channel-warning(${channel.channelId}, ${channel.channelId.shortChannelId}, ${channel.warnings})}"/>
+        <div th:replace="~{tiles/third/channel-warning :: tile(${channel.channelId}, ${channel.channelId.shortChannelId}, ${channel.warnings})}"/>
     </th:block>
 
-    <div th:replace="~{fragments/tiles :: all-channels}"/>
+    <div th:replace="~{tiles/full/all-channels :: tile}"/>
 
-    <div th:replace="~{fragments/tiles :: all-nodes}"/>
+    <div th:replace="~{tiles/full/all-nodes :: tile}"/>
 
 </div>
 
diff --git a/ui/src/main/resources/templates/fragments/tiles.html b/ui/src/main/resources/templates/fragments/tiles.html
deleted file mode 100644
index 6d5627fc..00000000
--- a/ui/src/main/resources/templates/fragments/tiles.html
+++ /dev/null
@@ -1,364 +0,0 @@
-<!doctype html>
-
-<html xmlns:th="https://www.thymeleaf.org">
-
-<!-- full width tiles -->
-<div th:fragment="channel-tile (node)" class="tile col-sm-12">
-    <div class="card border-secondary">
-        <div class="card-header">
-            <div class="fs-4 mb-0">
-                <div th:replace="~{fragments/icons :: list-ul}"/>
-                Channels
-            </div>
-        </div>
-        <div class="card-body">
-            <div class="container" style="padding-left: 0; padding-right: 0;">
-                <div class="row align-items-start">
-                    <div class="tile-column-left col">
-                        <div th:replace="~{fragments/channel-collections :: channel-list-group ('Open', ${node.channels})}"/>
-                    </div>
-                    <div class="tile-column col">
-                        <div th:replace="~{fragments/channel-collections :: channel-list-group ('Closed', ${node.closedChannels})}"/>
-                    </div>
-                    <div class="tile-column col">
-                        <div th:replace="~{fragments/channel-collections :: channel-list-group ('Waiting Close', ${node.waitingCloseChannels})}"/>
-                    </div>
-                    <div class="tile-column-right col">
-                        <div th:replace="~{fragments/channel-collections :: channel-list-group ('Pending Force Closing', ${node.pendingForceClosingChannels})}"/>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-
-<div th:fragment="all-channels" class="tile title-table col-sm-12">
-    <div class="card border-secondary">
-        <div class="card-header">
-            <div class="fs-4 mb-0">
-                <div th:replace="~{fragments/icons :: list-ul}"/>
-                Channels
-            </div>
-        </div>
-        <div class="card-body">
-            <div th:replace="~{fragments/channel-collections :: channel-table}"/>
-        </div>
-    </div>
-</div>
-
-<div th:fragment="all-nodes" class="tile title-table col-sm-12">
-    <div class="card border-secondary">
-        <div class="card-header">
-            <div class="fs-4 mb-0">
-                <div th:replace="~{fragments/icons :: cpu}"/>
-                Nodes
-            </div>
-        </div>
-        <div class="card-body">
-            <div th:replace="~{fragments/node-collections :: node-table}"/>
-        </div>
-    </div>
-</div>
-
-
-<!-- width / 3 tiles -->
-
-<div th:fragment="on-chain-costs (onChainCosts)" class="tile col-sm-4">
-    <div class="card border-secondary">
-        <div class="card-header">
-            <div class="fs-4 mb-0">
-                <div th:replace="~{fragments/icons :: link}"/>
-                On-Chain Costs
-            </div>
-        </div>
-        <div class="card-body">
-            <div class="container" style="padding-left: 0; padding-right: 0;">
-                <div class="row align-items-start">
-                    <div class="tile-column-left col">
-                        <ul class="list-group">
-                            <li class="list-group-item disabled" aria-disabled="true">Open</li>
-                            <li class="list-group-item"
-                                th:text="${@formatter.formatNumber(onChainCosts.openCostsSat)}"></li>
-                        </ul>
-                    </div>
-                    <div class="tile-column col">
-                        <ul class="list-group">
-                            <li class="list-group-item disabled" aria-disabled="true">Close</li>
-                            <li class="list-group-item"
-                                th:text="${@formatter.formatNumber(onChainCosts.closeCostsSat)}"></li>
-                        </ul>
-                    </div>
-                    <div class="tile-column-right col">
-                        <ul class="list-group">
-                            <li class="list-group-item disabled" aria-disabled="true">Sweep</li>
-                            <li class="list-group-item"
-                                th:text="${@formatter.formatNumber(onChainCosts.sweepCostsSat)}"></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div th:fragment="fee-report (feeReport)" class="tile col-sm-4">
-    <div class="card border-secondary">
-        <div class="card-header">
-            <div class="fs-4 mb-0">
-                <div th:replace="~{fragments/icons :: pig}"/>
-                Fee Report
-            </div>
-        </div>
-        <div class="card-body">
-            <div class="container" style="padding-left: 0; padding-right: 0;">
-                <div class="row align-items-start">
-                    <div class="tile-column-left col">
-                        <ul class="list-group">
-                            <li class="list-group-item disabled" aria-disabled="true">Earned (mSAT)</li>
-                            <li class="list-group-item"
-                                th:text="${@formatter.formatNumber(feeReport.earnedMilliSat)}"></li>
-                        </ul>
-                    </div>
-                    <div class="tile-column-right col">
-                        <ul class="list-group">
-                            <li class="list-group-item disabled" aria-disabled="true">Sourced (mSAT)</li>
-                            <li class="list-group-item"
-                                th:text="${@formatter.formatNumber(feeReport.sourcedMilliSat)}"></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<div th:fragment="online-report (onlineReport)" class="tile col-sm-4">
-    <div class="card border-secondary">
-        <div class="card-header">
-            <div class="fs-4 mb-0">
-                <div th:replace="~{fragments/icons :: online}"/>
-                Online Report
-            </div>
-        </div>
-        <div class="card-body">
-            <p th:text="${onlineReport.online ? 'Online' : 'Offline'} + ' since '+${onlineReport.since}"></p>
-            <p th:text="${onlineReport.onlinePercentage} + '% online in last ' + ${@formatter.formatNumber(onlineReport.daysForOnlinePercentage)} + ' days.'"></p>
-            <p th:text="'Online status changed '+${@formatter.formatNumber(onlineReport.changes)} + ' times in last ' +${@formatter.formatNumber(onlineReport.daysForChanges)} + ' days.'"></p>
-        </div>
-    </div>
-</div>
-
-<div th:fragment="balance (balanceInformation)" class="tile col-sm-4"
-     th:if="${balanceInformation.routableCapacity > 0}">
-    <div class="card border-secondary">
-        <div class="card-header">
-            <div class="fs-4 mb-0">
-                <div th:replace="~{fragments/icons :: wallet}"/>
-                Balance
-            </div>
-        </div>
-        <div class="card-body">
-            <div class="container" style="padding-left: 0; padding-right: 0;">
-                <div th:replace="~{fragments/balance-bar :: balance-tile(${balanceInformation})}"/>
-                <div class="row align-items-start">
-                    <div class="tile-column-left col">
-                        <ul class="list-group">
-                            <li class="list-group-item disabled" aria-disabled="true">Local</li>
-                            <li class="list-group-item"
-                                th:text="'Available '+${@formatter.formatNumber(balanceInformation.localAvailableSat)}"></li>
-                            <li class="list-group-item"
-                                th:text="'Balance '+${@formatter.formatNumber(balanceInformation.localBalanceSat)}"></li>
-                            <li class="list-group-item"
-                                th:text="'Reserve '+${@formatter.formatNumber(balanceInformation.localReserveSat)}"></li>
-                        </ul>
-                    </div>
-                    <div class="tile-column-right col">
-                        <ul class="list-group">
-                            <li class="list-group-item disabled" aria-disabled="true">Remote</li>
-                            <li class="list-group-item"
-                                th:text="'Available '+${@formatter.formatNumber(balanceInformation.remoteAvailableSat)}"></li>
-                            <li class="list-group-item"
-                                th:text="'Balance '+${@formatter.formatNumber(balanceInformation.remoteBalanceSat)}"></li>
-                            <li class="list-group-item"
-                                th:text="'Reserve '+${@formatter.formatNumber(balanceInformation.remoteReserveSat)}"></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-
-        </div>
-    </div>
-</div>
-
-<div th:fragment="rebalance-report (rebalanceReport)" class="tile col-sm-4">
-    <div class="card border-secondary">
-        <div class="card-header">
-            <div class="fs-4 mb-0">
-                <div th:replace="~{fragments/icons :: shuffle}"/>
-                Rebalance Report
-            </div>
-        </div>
-        <div class="card-body">
-
-            <div class="container" style="padding-left: 0; padding-right: 0;">
-                <div class="row align-items-start">
-                    <div class="tile-column-left col">
-                        <ul class="list-group">
-                            <li class="list-group-item disabled" aria-disabled="true">Source (mSAT)</li>
-                            <li class="list-group-item"
-                                th:text="'Cost: '+${@formatter.formatNumber(rebalanceReport.sourceCostsMilliSat)}"></li>
-                            <li class="list-group-item"
-                                th:text="'Amount: '+${@formatter.formatNumber(rebalanceReport.sourceAmountMilliSat)}"></li>
-                            <li class="list-group-item"
-                                th:text="'Support: '+${@formatter.formatNumber(rebalanceReport.supportAsSourceAmountMilliSat)}"></li>
-                        </ul>
-                    </div>
-                    <div class="tile-column-right col">
-                        <ul class="list-group">
-                            <li class="list-group-item disabled" aria-disabled="true">Target (mSAT)</li>
-                            <li class="list-group-item"
-                                th:text="'Cost: '+${@formatter.formatNumber(rebalanceReport.targetCostsMilliSat)}"></li>
-                            <li class="list-group-item"
-                                th:text="'Amount: '+${@formatter.formatNumber(rebalanceReport.targetAmountMilliSat)}"></li>
-                            <li class="list-group-item"
-                                th:text="'Support: '+${@formatter.formatNumber(rebalanceReport.supportAsTargetAmountMilliSat)}"></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-
-        </div>
-    </div>
-</div>
-
-<div th:fragment="node-warning (title, pubkey, warnings)" class="tile col-sm-4" th:if="${!warnings.isEmpty}">
-    <div class="card border-secondary">
-        <div class="card-header">
-            <div class="fs-4 mb-0">
-                <div th:replace="~{fragments/icons :: warning}"/>
-                <span></span>
-                <span th:if="${pubkey}"><a th:text="${title}" th:href="@{/node/{id}(id=${pubkey})}"></a></span>
-                <span th:unless="${pubkey}" th:text="${title}"></span>
-            </div>
-        </div>
-        <div class="card-body">
-            <ol class="list-group list-group-flush">
-                <li th:each="warning : ${warnings}" class="list-group-item">
-                    <span th:text="${warning}"></span>
-                </li>
-            </ol>
-        </div>
-    </div>
-</div>
-
-<div th:fragment="channel-warning (title, channelId, warnings)" class="tile col-sm-4" th:if="${!warnings.isEmpty}">
-    <div class="card border-secondary">
-        <div class="card-header">
-            <div class="fs-4 mb-0">
-                <div th:replace="~{fragments/icons :: warning}"/>
-                <span></span>
-                <span th:if="${channelId}"><a th:text="${title}" th:href="@{/channel/{id}(id=${channelId})}"></a></span>
-                <span th:unless="${channelId}" th:text="${title}"></span>
-            </div>
-        </div>
-        <div class="card-body">
-            <ol class="list-group list-group-flush">
-                <li th:each="warning : ${warnings}" class="list-group-item">
-                    <span th:text="${warning}"></span>
-                </li>
-            </ol>
-        </div>
-    </div>
-</div>
-
-<div th:fragment="channel-details (channel)" class="tile col-sm-4">
-    <div class="card border-secondary">
-        <div class="card-header">
-            <div class="fs-4 mb-0">
-                <div th:replace="~{fragments/icons :: circle-info}"/>
-                Details
-            </div>
-        </div>
-        <div class="card-body">
-            <p>
-                <span th:text="'Status: ' + ${channel.channelStatus.openClosed}"></span>
-                <span th:text="'&nbsp;&nbsp;&nbsp;Private: ' + ${channel.channelStatus.privateChannel}"></span>
-                <span th:text="'&nbsp;&nbsp;&nbsp;Active: ' + ${channel.channelStatus.active}"
-                      th:if="${channel.channelStatus.openClosed} != 'CLOSED'"></span>
-            </p>
-            <p th:switch="${channel.openInitiator.name}">
-                <span th:case="LOCAL">
-                    Channel with
-                    <a th:text="${channel.remoteAlias}" th:href="@{/node/{id}(id=${channel.remotePubkey})}"></a>
-                    opened by me.
-                </span>
-                <span th:case="REMOTE">
-                    Channel opened by
-                    <a th:text="${channel.remoteAlias}" th:href="@{/node/{id}(id=${channel.remotePubkey})}"></a>
-                </span>
-                <span th:case="*">
-                    Channel with
-                    <a th:text="${channel.remoteAlias}" th:href="@{/node/{id}(id=${channel.remotePubkey})}"></a>
-                </span>
-            </p>
-            <p th:text="'Capacity: ' + ${@formatter.formatNumber(channel.capacitySat)}"></p>
-        </div>
-    </div>
-</div>
-
-<div th:fragment="fee-policy (status, policies)" class="tile col-sm-4" th:if="${status.openClosed} != 'CLOSED'">
-    <div class="card border-secondary">
-        <div class="card-header">
-            <div class="fs-4 mb-0">
-                <div th:replace="~{fragments/icons :: speedometer}"/>
-                Fee Policy
-            </div>
-        </div>
-        <div class="card-body">
-
-            <div class="container" style="padding-left: 0; padding-right: 0;">
-                <div class="row align-items-start">
-                    <div class="tile-column-left col">
-                        <ul class="list-group">
-                            <li class="list-group-item disabled" aria-disabled="true">Local</li>
-                            <li class="list-group-item"
-                                th:text="'Base Fee (mSAT): '+${@formatter.formatNumber(policies.local.baseFeeMilliSat)}"></li>
-                            <li class="list-group-item"
-                                th:text="'Fee Rate: '+${@formatter.formatNumber(policies.local.feeRatePpm)}"></li>
-                            <li class="list-group-item" th:text="'Enabled: '+${policies.local.enabled}"></li>
-                        </ul>
-                    </div>
-                    <div class="tile-column-right col">
-                        <ul class="list-group">
-                            <li class="list-group-item disabled" aria-disabled="true">Remote</li>
-                            <li class="list-group-item"
-                                th:text="'Base Fee (mSAT): '+${@formatter.formatNumber(policies.remote.baseFeeMilliSat)}"></li>
-                            <li class="list-group-item"
-                                th:text="'Fee Rate: '+${@formatter.formatNumber(policies.remote.feeRatePpm)}"></li>
-                            <li class="list-group-item" th:text="'Enabled: '+${policies.remote.enabled}"></li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-
-        </div>
-    </div>
-</div>
-
-<div th:fragment="status (status)" class="tile col-sm-4">
-    <div class="card border-secondary">
-        <div class="card-header">
-            <div class="fs-4 mb-0">
-                <div th:replace="~{fragments/icons :: circle-info}"/>
-                Status
-            </div>
-        </div>
-        <div class="card-body">
-            <p style="margin-bottom: 0;"
-               th:text="'Synced: ' + ${status.synced} + '&nbsp;&nbsp;&nbsp;Block Height: '+${@formatter.formatNumber(status.blockHeight)}"></p>
-        </div>
-    </div>
-</div>
-
-</html>
diff --git a/ui/src/main/resources/templates/node-details.html b/ui/src/main/resources/templates/node-details.html
index a69da9c7..7dee364a 100644
--- a/ui/src/main/resources/templates/node-details.html
+++ b/ui/src/main/resources/templates/node-details.html
@@ -8,15 +8,15 @@
 
 <div class="row">
 
-    <div th:replace="~{fragments/tiles :: channel-tile(${node})}"/>
+    <div th:replace="~{tiles/full/channel-tile :: tile(${node})}"/>
 
-    <div th:replace="~{fragments/tiles :: balance(${node.balance})}"/>
-    <div th:replace="~{fragments/tiles :: rebalance-report(${node.rebalanceReport})}"/>
-    <div th:replace="~{fragments/tiles :: on-chain-costs(${node.onChainCosts})}"/>
+    <div th:replace="~{tiles/third/balance :: tile(${node.balance})}"/>
+    <div th:replace="~{tiles/third/rebalance-report :: tile(${node.rebalanceReport})}"/>
+    <div th:replace="~{tiles/third/on-chain-costs :: tile(${node.onChainCosts})}"/>
 
-    <div th:replace="~{fragments/tiles :: fee-report(${node.feeReport})}"/>
-    <div th:replace="~{fragments/tiles :: online-report(${node.onlineReport})}"/>
-    <div th:replace="~{fragments/tiles :: node-warning('Warning', null, ${node.warnings})}"/>
+    <div th:replace="~{tiles/third/fee-report :: tile(${node.feeReport})}"/>
+    <div th:replace="~{tiles/third/online-report :: tile(${node.onlineReport})}"/>
+    <div th:replace="~{tiles/third/node-warning :: tile('Warning', null, ${node.warnings})}"/>
 
 </div>
 
diff --git a/ui/src/main/resources/templates/nodes.html b/ui/src/main/resources/templates/nodes.html
index 827e7bc4..2016329f 100644
--- a/ui/src/main/resources/templates/nodes.html
+++ b/ui/src/main/resources/templates/nodes.html
@@ -4,7 +4,7 @@
 
 <body>
 
-<div class="top-space" th:insert="~{fragments/tiles :: all-nodes}"/>
+<div class="top-space" th:insert="~{tiles/full/all-nodes :: tile}"/>
 
 </body>
 
diff --git a/ui/src/main/resources/templates/tiles/full/all-channels.html b/ui/src/main/resources/templates/tiles/full/all-channels.html
new file mode 100644
index 00000000..3e8a9a2b
--- /dev/null
+++ b/ui/src/main/resources/templates/tiles/full/all-channels.html
@@ -0,0 +1,19 @@
+<!doctype html>
+
+<html xmlns:th="https://www.thymeleaf.org">
+
+<div th:fragment="tile" class="tile title-table col-sm-12">
+    <div class="card border-secondary">
+        <div class="card-header">
+            <div class="fs-4 mb-0">
+                <div th:replace="~{fragments/icons :: list-ul}"/>
+                Channels
+            </div>
+        </div>
+        <div class="card-body">
+            <div th:replace="~{fragments/channel-collections :: channel-table}"/>
+        </div>
+    </div>
+</div>
+
+</html>
diff --git a/ui/src/main/resources/templates/tiles/full/all-nodes.html b/ui/src/main/resources/templates/tiles/full/all-nodes.html
new file mode 100644
index 00000000..0ec80a01
--- /dev/null
+++ b/ui/src/main/resources/templates/tiles/full/all-nodes.html
@@ -0,0 +1,19 @@
+<!doctype html>
+
+<html xmlns:th="https://www.thymeleaf.org">
+
+<div th:fragment="tile" class="tile title-table col-sm-12">
+    <div class="card border-secondary">
+        <div class="card-header">
+            <div class="fs-4 mb-0">
+                <div th:replace="~{fragments/icons :: cpu}"/>
+                Nodes
+            </div>
+        </div>
+        <div class="card-body">
+            <div th:replace="~{fragments/node-collections :: node-table}"/>
+        </div>
+    </div>
+</div>
+
+</html>
diff --git a/ui/src/main/resources/templates/tiles/full/channel-tile.html b/ui/src/main/resources/templates/tiles/full/channel-tile.html
new file mode 100644
index 00000000..fc071a64
--- /dev/null
+++ b/ui/src/main/resources/templates/tiles/full/channel-tile.html
@@ -0,0 +1,35 @@
+<!doctype html>
+
+<html xmlns:th="https://www.thymeleaf.org">
+
+<!-- full width tiles -->
+<div th:fragment="tile(node)" class="tile col-sm-12">
+    <div class="card border-secondary">
+        <div class="card-header">
+            <div class="fs-4 mb-0">
+                <div th:replace="~{fragments/icons :: list-ul}"/>
+                Channels
+            </div>
+        </div>
+        <div class="card-body">
+            <div class="container" style="padding-left: 0; padding-right: 0;">
+                <div class="row align-items-start">
+                    <div class="tile-column-left col">
+                        <div th:replace="~{fragments/channel-collections :: channel-list-group ('Open', ${node.channels})}"/>
+                    </div>
+                    <div class="tile-column col">
+                        <div th:replace="~{fragments/channel-collections :: channel-list-group ('Closed', ${node.closedChannels})}"/>
+                    </div>
+                    <div class="tile-column col">
+                        <div th:replace="~{fragments/channel-collections :: channel-list-group ('Waiting Close', ${node.waitingCloseChannels})}"/>
+                    </div>
+                    <div class="tile-column-right col">
+                        <div th:replace="~{fragments/channel-collections :: channel-list-group ('Pending Force Closing', ${node.pendingForceClosingChannels})}"/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+</html>
diff --git a/ui/src/main/resources/templates/tiles/third/balance.html b/ui/src/main/resources/templates/tiles/third/balance.html
new file mode 100644
index 00000000..b9e58a9a
--- /dev/null
+++ b/ui/src/main/resources/templates/tiles/third/balance.html
@@ -0,0 +1,47 @@
+<!doctype html>
+
+<html xmlns:th="https://www.thymeleaf.org">
+
+<div th:fragment="tile (balanceInformation)" class="tile col-sm-4"
+     th:if="${balanceInformation.routableCapacity > 0}">
+    <div class="card border-secondary">
+        <div class="card-header">
+            <div class="fs-4 mb-0">
+                <div th:replace="~{fragments/icons :: wallet}"/>
+                Balance
+            </div>
+        </div>
+        <div class="card-body">
+            <div class="container" style="padding-left: 0; padding-right: 0;">
+                <div th:replace="~{fragments/balance-bar :: balance-tile(${balanceInformation})}"/>
+                <div class="row align-items-start">
+                    <div class="tile-column-left col">
+                        <ul class="list-group">
+                            <li class="list-group-item disabled" aria-disabled="true">Local</li>
+                            <li class="list-group-item"
+                                th:text="'Available '+${@formatter.formatNumber(balanceInformation.localAvailableSat)}"></li>
+                            <li class="list-group-item"
+                                th:text="'Balance '+${@formatter.formatNumber(balanceInformation.localBalanceSat)}"></li>
+                            <li class="list-group-item"
+                                th:text="'Reserve '+${@formatter.formatNumber(balanceInformation.localReserveSat)}"></li>
+                        </ul>
+                    </div>
+                    <div class="tile-column-right col">
+                        <ul class="list-group">
+                            <li class="list-group-item disabled" aria-disabled="true">Remote</li>
+                            <li class="list-group-item"
+                                th:text="'Available '+${@formatter.formatNumber(balanceInformation.remoteAvailableSat)}"></li>
+                            <li class="list-group-item"
+                                th:text="'Balance '+${@formatter.formatNumber(balanceInformation.remoteBalanceSat)}"></li>
+                            <li class="list-group-item"
+                                th:text="'Reserve '+${@formatter.formatNumber(balanceInformation.remoteReserveSat)}"></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</div>
+
+</html>
diff --git a/ui/src/main/resources/templates/tiles/third/channel-details.html b/ui/src/main/resources/templates/tiles/third/channel-details.html
new file mode 100644
index 00000000..982fcc16
--- /dev/null
+++ b/ui/src/main/resources/templates/tiles/third/channel-details.html
@@ -0,0 +1,40 @@
+<!doctype html>
+
+<html xmlns:th="https://www.thymeleaf.org">
+
+<div th:fragment="tile (channel)" class="tile col-sm-4">
+    <div class="card border-secondary">
+        <div class="card-header">
+            <div class="fs-4 mb-0">
+                <div th:replace="~{fragments/icons :: circle-info}"/>
+                Details
+            </div>
+        </div>
+        <div class="card-body">
+            <p>
+                <span th:text="'Status: ' + ${channel.channelStatus.openClosed}"></span>
+                <span th:text="'&nbsp;&nbsp;&nbsp;Private: ' + ${channel.channelStatus.privateChannel}"></span>
+                <span th:text="'&nbsp;&nbsp;&nbsp;Active: ' + ${channel.channelStatus.active}"
+                      th:if="${channel.channelStatus.openClosed} != 'CLOSED'"></span>
+            </p>
+            <p th:switch="${channel.openInitiator.name}">
+                <span th:case="LOCAL">
+                    Channel with
+                    <a th:text="${channel.remoteAlias}" th:href="@{/node/{id}(id=${channel.remotePubkey})}"></a>
+                    opened by me.
+                </span>
+                <span th:case="REMOTE">
+                    Channel opened by
+                    <a th:text="${channel.remoteAlias}" th:href="@{/node/{id}(id=${channel.remotePubkey})}"></a>
+                </span>
+                <span th:case="*">
+                    Channel with
+                    <a th:text="${channel.remoteAlias}" th:href="@{/node/{id}(id=${channel.remotePubkey})}"></a>
+                </span>
+            </p>
+            <p th:text="'Capacity: ' + ${@formatter.formatNumber(channel.capacitySat)}"></p>
+        </div>
+    </div>
+</div>
+
+</html>
diff --git a/ui/src/main/resources/templates/tiles/third/channel-warning.html b/ui/src/main/resources/templates/tiles/third/channel-warning.html
new file mode 100644
index 00000000..f02cd07b
--- /dev/null
+++ b/ui/src/main/resources/templates/tiles/third/channel-warning.html
@@ -0,0 +1,25 @@
+<!doctype html>
+
+<html xmlns:th="https://www.thymeleaf.org">
+
+<div th:fragment="tile (title, channelId, warnings)" class="tile col-sm-4" th:if="${!warnings.isEmpty}">
+    <div class="card border-secondary">
+        <div class="card-header">
+            <div class="fs-4 mb-0">
+                <div th:replace="~{fragments/icons :: warning}"/>
+                <span></span>
+                <span th:if="${channelId}"><a th:text="${title}" th:href="@{/channel/{id}(id=${channelId})}"></a></span>
+                <span th:unless="${channelId}" th:text="${title}"></span>
+            </div>
+        </div>
+        <div class="card-body">
+            <ol class="list-group list-group-flush">
+                <li th:each="warning : ${warnings}" class="list-group-item">
+                    <span th:text="${warning}"></span>
+                </li>
+            </ol>
+        </div>
+    </div>
+</div>
+
+</html>
diff --git a/ui/src/main/resources/templates/tiles/third/fee-policy.html b/ui/src/main/resources/templates/tiles/third/fee-policy.html
new file mode 100644
index 00000000..9a23404b
--- /dev/null
+++ b/ui/src/main/resources/templates/tiles/third/fee-policy.html
@@ -0,0 +1,44 @@
+<!doctype html>
+
+<html xmlns:th="https://www.thymeleaf.org">
+
+<div th:fragment="tile (status, policies)" class="tile col-sm-4" th:if="${status.openClosed} != 'CLOSED'">
+    <div class="card border-secondary">
+        <div class="card-header">
+            <div class="fs-4 mb-0">
+                <div th:replace="~{fragments/icons :: speedometer}"/>
+                Fee Policy
+            </div>
+        </div>
+        <div class="card-body">
+
+            <div class="container" style="padding-left: 0; padding-right: 0;">
+                <div class="row align-items-start">
+                    <div class="tile-column-left col">
+                        <ul class="list-group">
+                            <li class="list-group-item disabled" aria-disabled="true">Local</li>
+                            <li class="list-group-item"
+                                th:text="'Base Fee (mSAT): '+${@formatter.formatNumber(policies.local.baseFeeMilliSat)}"></li>
+                            <li class="list-group-item"
+                                th:text="'Fee Rate: '+${@formatter.formatNumber(policies.local.feeRatePpm)}"></li>
+                            <li class="list-group-item" th:text="'Enabled: '+${policies.local.enabled}"></li>
+                        </ul>
+                    </div>
+                    <div class="tile-column-right col">
+                        <ul class="list-group">
+                            <li class="list-group-item disabled" aria-disabled="true">Remote</li>
+                            <li class="list-group-item"
+                                th:text="'Base Fee (mSAT): '+${@formatter.formatNumber(policies.remote.baseFeeMilliSat)}"></li>
+                            <li class="list-group-item"
+                                th:text="'Fee Rate: '+${@formatter.formatNumber(policies.remote.feeRatePpm)}"></li>
+                            <li class="list-group-item" th:text="'Enabled: '+${policies.remote.enabled}"></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</div>
+
+</html>
diff --git a/ui/src/main/resources/templates/tiles/third/fee-report.html b/ui/src/main/resources/templates/tiles/third/fee-report.html
new file mode 100644
index 00000000..8ec12964
--- /dev/null
+++ b/ui/src/main/resources/templates/tiles/third/fee-report.html
@@ -0,0 +1,36 @@
+<!doctype html>
+
+<html xmlns:th="https://www.thymeleaf.org">
+
+<div th:fragment="tile (feeReport)" class="tile col-sm-4">
+    <div class="card border-secondary">
+        <div class="card-header">
+            <div class="fs-4 mb-0">
+                <div th:replace="~{fragments/icons :: pig}"/>
+                Fee Report
+            </div>
+        </div>
+        <div class="card-body">
+            <div class="container" style="padding-left: 0; padding-right: 0;">
+                <div class="row align-items-start">
+                    <div class="tile-column-left col">
+                        <ul class="list-group">
+                            <li class="list-group-item disabled" aria-disabled="true">Earned (mSAT)</li>
+                            <li class="list-group-item"
+                                th:text="${@formatter.formatNumber(feeReport.earnedMilliSat)}"></li>
+                        </ul>
+                    </div>
+                    <div class="tile-column-right col">
+                        <ul class="list-group">
+                            <li class="list-group-item disabled" aria-disabled="true">Sourced (mSAT)</li>
+                            <li class="list-group-item"
+                                th:text="${@formatter.formatNumber(feeReport.sourcedMilliSat)}"></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+</html>
diff --git a/ui/src/main/resources/templates/tiles/third/node-warning.html b/ui/src/main/resources/templates/tiles/third/node-warning.html
new file mode 100644
index 00000000..5b76a2d5
--- /dev/null
+++ b/ui/src/main/resources/templates/tiles/third/node-warning.html
@@ -0,0 +1,25 @@
+<!doctype html>
+
+<html xmlns:th="https://www.thymeleaf.org">
+
+<div th:fragment="tile (title, pubkey, warnings)" class="tile col-sm-4" th:if="${!warnings.isEmpty}">
+    <div class="card border-secondary">
+        <div class="card-header">
+            <div class="fs-4 mb-0">
+                <div th:replace="~{fragments/icons :: warning}"/>
+                <span></span>
+                <span th:if="${pubkey}"><a th:text="${title}" th:href="@{/node/{id}(id=${pubkey})}"></a></span>
+                <span th:unless="${pubkey}" th:text="${title}"></span>
+            </div>
+        </div>
+        <div class="card-body">
+            <ol class="list-group list-group-flush">
+                <li th:each="warning : ${warnings}" class="list-group-item">
+                    <span th:text="${warning}"></span>
+                </li>
+            </ol>
+        </div>
+    </div>
+</div>
+
+</html>
diff --git a/ui/src/main/resources/templates/tiles/third/on-chain-costs.html b/ui/src/main/resources/templates/tiles/third/on-chain-costs.html
new file mode 100644
index 00000000..94fbd1a0
--- /dev/null
+++ b/ui/src/main/resources/templates/tiles/third/on-chain-costs.html
@@ -0,0 +1,43 @@
+<!doctype html>
+
+<html xmlns:th="https://www.thymeleaf.org">
+
+<div th:fragment="tile (onChainCosts)" class="tile col-sm-4">
+    <div class="card border-secondary">
+        <div class="card-header">
+            <div class="fs-4 mb-0">
+                <div th:replace="~{fragments/icons :: link}"/>
+                On-Chain Costs
+            </div>
+        </div>
+        <div class="card-body">
+            <div class="container" style="padding-left: 0; padding-right: 0;">
+                <div class="row align-items-start">
+                    <div class="tile-column-left col">
+                        <ul class="list-group">
+                            <li class="list-group-item disabled" aria-disabled="true">Open</li>
+                            <li class="list-group-item"
+                                th:text="${@formatter.formatNumber(onChainCosts.openCostsSat)}"></li>
+                        </ul>
+                    </div>
+                    <div class="tile-column col">
+                        <ul class="list-group">
+                            <li class="list-group-item disabled" aria-disabled="true">Close</li>
+                            <li class="list-group-item"
+                                th:text="${@formatter.formatNumber(onChainCosts.closeCostsSat)}"></li>
+                        </ul>
+                    </div>
+                    <div class="tile-column-right col">
+                        <ul class="list-group">
+                            <li class="list-group-item disabled" aria-disabled="true">Sweep</li>
+                            <li class="list-group-item"
+                                th:text="${@formatter.formatNumber(onChainCosts.sweepCostsSat)}"></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+</html>
diff --git a/ui/src/main/resources/templates/tiles/third/online-report.html b/ui/src/main/resources/templates/tiles/third/online-report.html
new file mode 100644
index 00000000..1ea98044
--- /dev/null
+++ b/ui/src/main/resources/templates/tiles/third/online-report.html
@@ -0,0 +1,21 @@
+<!doctype html>
+
+<html xmlns:th="https://www.thymeleaf.org">
+
+<div th:fragment="tile (onlineReport)" class="tile col-sm-4">
+    <div class="card border-secondary">
+        <div class="card-header">
+            <div class="fs-4 mb-0">
+                <div th:replace="~{fragments/icons :: online}"/>
+                Online Report
+            </div>
+        </div>
+        <div class="card-body">
+            <p th:text="${onlineReport.online ? 'Online' : 'Offline'} + ' since '+${onlineReport.since}"></p>
+            <p th:text="${onlineReport.onlinePercentage} + '% online in last ' + ${@formatter.formatNumber(onlineReport.daysForOnlinePercentage)} + ' days.'"></p>
+            <p th:text="'Online status changed '+${@formatter.formatNumber(onlineReport.changes)} + ' times in last ' +${@formatter.formatNumber(onlineReport.daysForChanges)} + ' days.'"></p>
+        </div>
+    </div>
+</div>
+
+</html>
diff --git a/ui/src/main/resources/templates/tiles/third/rebalance-report.html b/ui/src/main/resources/templates/tiles/third/rebalance-report.html
new file mode 100644
index 00000000..9b10d3b8
--- /dev/null
+++ b/ui/src/main/resources/templates/tiles/third/rebalance-report.html
@@ -0,0 +1,46 @@
+<!doctype html>
+
+<html xmlns:th="https://www.thymeleaf.org">
+
+<div th:fragment="tile (rebalanceReport)" class="tile col-sm-4">
+    <div class="card border-secondary">
+        <div class="card-header">
+            <div class="fs-4 mb-0">
+                <div th:replace="~{fragments/icons :: shuffle}"/>
+                Rebalance Report
+            </div>
+        </div>
+        <div class="card-body">
+
+            <div class="container" style="padding-left: 0; padding-right: 0;">
+                <div class="row align-items-start">
+                    <div class="tile-column-left col">
+                        <ul class="list-group">
+                            <li class="list-group-item disabled" aria-disabled="true">Source (mSAT)</li>
+                            <li class="list-group-item"
+                                th:text="'Cost: '+${@formatter.formatNumber(rebalanceReport.sourceCostsMilliSat)}"></li>
+                            <li class="list-group-item"
+                                th:text="'Amount: '+${@formatter.formatNumber(rebalanceReport.sourceAmountMilliSat)}"></li>
+                            <li class="list-group-item"
+                                th:text="'Support: '+${@formatter.formatNumber(rebalanceReport.supportAsSourceAmountMilliSat)}"></li>
+                        </ul>
+                    </div>
+                    <div class="tile-column-right col">
+                        <ul class="list-group">
+                            <li class="list-group-item disabled" aria-disabled="true">Target (mSAT)</li>
+                            <li class="list-group-item"
+                                th:text="'Cost: '+${@formatter.formatNumber(rebalanceReport.targetCostsMilliSat)}"></li>
+                            <li class="list-group-item"
+                                th:text="'Amount: '+${@formatter.formatNumber(rebalanceReport.targetAmountMilliSat)}"></li>
+                            <li class="list-group-item"
+                                th:text="'Support: '+${@formatter.formatNumber(rebalanceReport.supportAsTargetAmountMilliSat)}"></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</div>
+
+</html>
diff --git a/ui/src/main/resources/templates/tiles/third/status.html b/ui/src/main/resources/templates/tiles/third/status.html
new file mode 100644
index 00000000..8a52c954
--- /dev/null
+++ b/ui/src/main/resources/templates/tiles/third/status.html
@@ -0,0 +1,20 @@
+<!doctype html>
+
+<html xmlns:th="https://www.thymeleaf.org">
+
+<div th:fragment="tile (status)" class="tile col-sm-4">
+    <div class="card border-secondary">
+        <div class="card-header">
+            <div class="fs-4 mb-0">
+                <div th:replace="~{fragments/icons :: circle-info}"/>
+                Status
+            </div>
+        </div>
+        <div class="card-body">
+            <p style="margin-bottom: 0;"
+               th:text="'Synced: ' + ${status.synced} + '&nbsp;&nbsp;&nbsp;Block Height: '+${@formatter.formatNumber(status.blockHeight)}"></p>
+        </div>
+    </div>
+</div>
+
+</html>