lukechilds
/
umbrel-dashboard
mirror of https://github.com/lukechilds/umbrel-dashboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

toggle sats/btc lightning channel stats

readme
Mayank 5 years ago
parent
16411caea7
commit
c8bd08b96b
No known key found for this signature in database GPG Key ID: D037D60476CE748C
2 changed files with 53 additions and 105 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      src/components/Utility/Stat.vue
  2. 144
      src/views/Lightning.vue

14
src/components/Utility/Stat.vue
View File

@ -12,7 +12,12 @@
<div class="d-flex align-items-baseline" v-else>
<h3 class="font-weight-normal mb-0">
<!-- suffix number like 100K, 120K, 2M, etc -->
<CountUp :endVal="numberValue" :suffix="numberSuffix" countOnLoad />
<CountUp
:endVal="numberValue"
:suffix="numberSuffix"
:options="{decimalPlaces: hasDecimals ? 5 : 0}"
countOnLoad
/>
</h3>
<span class="text-muted" style="margin-left: 0.5rem;">{{ suffix }}</span>
</div>
@ -61,7 +66,8 @@
import CountUp from "@/components/Utility/CountUp";
const abbreviate = n => {
if (n < 1e3) return [Number(n.toFixed(1)), ""];
if (n < 1e2) return [Number(n), ""];
if (n >= 1e2 && n < 1e3) return [Number(n.toFixed(1)), ""];
if (n >= 1e3 && n < 1e6) return [Number((n / 1e3).toFixed(1)), "K"];
if (n >= 1e6 && n < 1e9) return [Number((n / 1e6).toFixed(1)), "M"];
if (n >= 1e9 && n < 1e12) return [Number((n / 1e9).toFixed(1)), "B"];
@ -77,6 +83,10 @@ export default {
type: Boolean,
default: false
},
hasDecimals: {
type: Boolean,
default: false
},
showNumericChange: {
type: Boolean,
default: false

144
src/views/Lightning.vue
View File

@ -22,20 +22,15 @@
<h3 class="d-block font-weight-bold mb-1">Lightning Network</h3>
<span class="d-block text-muted">
{{
this.lndVersion
? `v${this.lndVersion.split(" commit")[0]}`
: "..."
this.lndVersion
? `v${this.lndVersion.split(" commit")[0]}`
: "..."
}}
</span>
</div>
</div>
<div>
<b-dropdown
variant="link"
toggle-class="text-decoration-none p-0"
no-caret
right
>
<b-dropdown variant="link" toggle-class="text-decoration-none p-0" no-caret right>
<template v-slot:button-content>
<svg
width="18"
@ -64,34 +59,17 @@
/>
</svg>
</template>
<b-dropdown-item href="#" @click="showPubKey"
>View Public Key</b-dropdown-item
>
<b-dropdown-item href="#" disabled
>Check for update</b-dropdown-item
>
<b-dropdown-item href="#" @click="showPubKey">View Public Key</b-dropdown-item>
<b-dropdown-item href="#" disabled>Check for update</b-dropdown-item>
<b-dropdown-divider />
<b-dropdown-item variant="danger" href="#" disabled
>Stop Lightning</b-dropdown-item
>
<b-dropdown-item variant="danger" href="#" disabled>Stop Lightning</b-dropdown-item>
</b-dropdown>
<b-modal
id="public-key-modal"
ref="public-key-modal"
centered
hide-footer
>
<b-modal id="public-key-modal" ref="public-key-modal" centered hide-footer>
<template v-slot:modal-header="{ close }">
<div
class="px-2 px-sm-3 pt-2 d-flex justify-content-between w-100"
>
<div class="px-2 px-sm-3 pt-2 d-flex justify-content-between w-100">
<h3>node public key</h3>
<!-- Emulate built in modal header close button action -->
<a
href="#"
class="align-self-center"
v-on:click.stop.prevent="close"
>
<a href="#" class="align-self-center" v-on:click.stop.prevent="close">
<svg
width="18"
height="18"
@ -111,12 +89,7 @@
</template>
<div class="px-2 px-sm-3 pb-2 pb-sm-3 d-flex">
<!-- Pubkey QR Code -->
<qr-code
:value="this.pubkey"
:size="150"
class="qr-image"
showLogo
></qr-code>
<qr-code :value="this.pubkey" :size="150" class="qr-image" showLogo></qr-code>
<div class="w-100 align-self-center ml-3">
<input-copy size="sm" :value="this.pubkey"></input-copy>
</div>
@ -136,26 +109,33 @@
variant="outline-primary"
size="sm"
v-b-modal.open-channel-modal
>+ Open Channel</b-button
>
>+ Open Channel</b-button>
</template>
<div class>
<div class="px-3 px-lg-4">
<b-row>
<b-col
col
cols="6"
xl="3"
v-for="stat in stats"
:key="stat.title"
>
<b-col col cols="6" xl="3">
<stat title="Connections" :value="numPeers" suffix="Peers"></stat>
</b-col>
<b-col col cols="6" xl="3">
<stat title="Active Channels" :value="numActiveChannels" suffix="Channels"></stat>
</b-col>
<b-col col cols="6" xl="3">
<stat
:title="stat.title"
:value="stat.value"
:suffix="stat.suffix"
:numberSuffix="stat.numberSuffix || ''"
:abbreviateValue="stat.abbreviateValue"
showNumericChange
title="Max Send"
:value="maxSend | unit"
:suffix="unit | formatUnit"
:hasDecimals="unit === 'btc'"
abbreviateValue
></stat>
</b-col>
<b-col col cols="6" xl="3">
<stat
title="Max Receive"
:value="maxReceive | unit"
:suffix="unit | formatUnit"
:hasDecimals="unit === 'btc'"
abbreviateValue
></stat>
</b-col>
</b-row>
@ -169,16 +149,10 @@
hide-footer
>
<template v-slot:modal-header="{ close }">
<div
class="px-2 px-sm-3 pt-2 d-flex justify-content-between w-100"
>
<div class="px-2 px-sm-3 pt-2 d-flex justify-content-between w-100">
<h2>open channel</h2>
<!-- Emulate built in modal header close button action -->
<a
href="#"
class="align-self-center"
v-on:click.stop.prevent="close"
>
<a href="#" class="align-self-center" v-on:click.stop.prevent="close">
<svg
width="18"
height="18"
@ -210,16 +184,10 @@
hide-footer
>
<template v-slot:modal-header="{ close }">
<div
class="px-2 px-sm-3 pt-2 d-flex justify-content-between w-100"
>
<div class="px-2 px-sm-3 pt-2 d-flex justify-content-between w-100">
<h2>channel details</h2>
<!-- Emulate built in modal header close button action -->
<a
href="#"
class="align-self-center"
v-on:click.stop.prevent="close"
>
<a href="#" class="align-self-center" v-on:click.stop.prevent="close">
<svg
width="18"
height="18"
@ -238,10 +206,7 @@
</div>
</template>
<div class="px-2 px-sm-3 py-2">
<channel-manage
:channel="selectedChannel"
v-on:channelclose="onChannelClose"
></channel-manage>
<channel-manage :channel="selectedChannel" v-on:channelclose="onChannelClose"></channel-manage>
</div>
</b-modal>
@ -280,36 +245,9 @@ export default {
maxSend: state => state.lightning.maxSend,
numPeers: state => state.lightning.numPeers,
pubkey: state => state.lightning.pubkey,
channels: state => state.lightning.channels
}),
stats() {
return [
{
title: "Connections",
value: this.numPeers,
suffix: "Peers",
abbreviateValue: false
},
{
title: "Active Channels",
value: this.numActiveChannels,
suffix: "Channels",
abbreviateValue: false
},
{
title: "Max Send",
value: this.maxSend,
suffix: "Sats",
abbreviateValue: true
},
{
title: "Max Receive",
value: this.maxReceive,
suffix: "Sats",
abbreviateValue: true
}
];
}
channels: state => state.lightning.channels,
unit: state => state.system.unit
})
},
methods: {
showPubKey() {

Write Preview
Loading…
Cancel
Save