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

everything works and is styled

update/libraries
dskvr 2 years ago
parent
ef19d781a3
commit
63c76c3006
4 changed files with 178 additions and 240 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. 63
      src/components/RelayListComponent.vue
  2. 79
      src/components/RelaySingleComponent.vue
  3. 176
      src/components/RelayTableComponent.vue
  4. 100
      src/styles/main.scss

63
src/components/RelayListComponent.vue
View File

@ -1,9 +1,21 @@
<template>
<tr><td colspan="11"><h2><span class="indicator badge readwrite">{{ query('public').length }}</span>Public</h2></td></tr>
<tr class="online public" v-if="query('public').length > 0">
<th class="table-column status-indicator"></th>
<th class="table-column relay"></th>
<th class="table-column verified"><span class="verified-shape-wrapper"><span class="shape verified"></span></span></th>
<tr :class="getHeadingClass(section)">
<td colspan="11">
<h2><span class="indicator badge">{{ query(section).length }}</span>{{ section }}</h2>
</td>
</tr>
<tr :class="getHeadingClass(section)" v-if="query(section).length > 0">
<th class="table-column status-indicator">
</th>
<th class="table-column relay">
</th>
<th class="table-column verified">
<span class="verified-shape-wrapper">
<span class="shape verified"></span>
</span>
</th>
<!-- <th class="table-column location" v-tooltip:top.tooltip="Ping">
🌎
</th> -->
@ -23,14 +35,14 @@
ℹ️
</th>
<th class="table-column nip nip-15" v-tooltip:top.tooltip="'Does the relay support NIP-15'">
NIP-15
<span>NIP-15</span>
</th>
<th class="table-column nip nip-20" v-tooltip:top.tooltip="'Does the relay support NIP-20'">
NIP-20
<span>NIP-20</span>
</th>
<!-- <th>FILTER: LIMIT</th> -->
</tr>
<tr v-for="relay in query('public')" :key="{relay}" :class="getLoadingClass(relay)" class="online public">
<tr v-for="relay in query(section)" :key="{relay}" :class="getResultClass(relay)" class="relay">
<RelaySingleComponent
:relay="relay"
:result="result[relay]"
@ -52,6 +64,11 @@ export default defineComponent({
RelaySingleComponent
},
props: {
section: {
type: String,
required: true,
default: "publik"
},
relays:{
type: Object,
default(rawProps){
@ -97,7 +114,25 @@ export default defineComponent({
data() {
return {}
},
computed: {
},
methods: {
getHeadingClass(section){
return {
online: this.section != "offline",
public: this.section == "public",
offline: this.section == "offline",
restricted: this.section == "restricted"
}
},
getResultClass (relay) {
return {
loaded: this.result?.[relay]?.state == 'complete',
online: this.section != "offline",
offline: this.section == "offline",
public: this.section == "public"
}
},
query (group) {
let unordered,
filterFn
@ -114,9 +149,15 @@ export default defineComponent({
return []
},
getLoadingClass (url) {
return this.result?.[url]?.state == 'complete' ? "relay loaded" : "relay"
},
}
})
</script>
<style lang='css' scoped>
.nip span {
text-transform: uppercase;
letter-spacing:-1px;
font-size:12px;
}
</style>

79
src/components/RelaySingleComponent.vue
View File

@ -1,15 +1,38 @@
<template>
<td :key="generateKey(relay, 'aggregate')"><span :class="getAggregateResultClass(relay)"></span></td>
<td class="left-align relay-url" @click="copy(relay)">{{ relay }}</td>
<td>
<span v-tooltip:top.tooltip="nip05List(relay)"> <span class="verified-shape-wrapper" v-if="result.nips[5]"><span class="shape verified"></span></span></span>
<td class="status-indicator" :key="generateKey(relay, 'aggregate')">
<span :class="result.aggregate" class="aggregate indicator">
<span></span>
<span></span>
</span>
</td>
<td class="relay left-align relay-url" @click="copy(relay)">
{{ relay }}
</td>
<td class="verified">
<span v-tooltip:top.tooltip="nip05List()"> <span class="verified-shape-wrapper" v-if="result.nips[5]"><span class="shape verified"></span></span></span>
</td>
<!-- <td>{{result.flag}}</td> -->
<td><span>{{ result.latency.final }}<span v-if="result.check.latency">ms</span></span></td>
<td :key="generateKey(relay, 'check.connect')"><span :class="getResultClass(relay, 'connect')"></span></td>
<td :key="generateKey(relay, 'check.read')"><span :class="getResultClass(relay, 'read')"></span></td>
<td :key="generateKey(relay, 'check.write')"><span :class="getResultClass(relay, 'write')"></span></td>
<td>
<td class="latency">
<span>{{ result.latency.final }}<span v-if="result.check.latency">ms</span></span>
</td>
<td class="connect" :key="generateKey(relay, 'check.connect')">
<span :class="getResultClass(relay, 'connect')"></span>
</td>
<td class="read" :key="generateKey(relay, 'check.read')">
<span :class="getResultClass(relay, 'read')"></span>
</td>
<td class="write" :key="generateKey(relay, 'check.write')">
<span :class="getResultClass(relay, 'write')"></span>
</td>
<td class="info">
<ul v-if="result.observations && result.observations.length">
<li class="observation" v-for="(alert) in result.observations" :key="generateKey(relay, alert.description)">
<span v-tooltip:top.tooltip="alert.description" :class="alert.type" v-if="alert.type == 'notice'">✉️</span>
@ -17,14 +40,20 @@
</li>
</ul>
</td>
<td>{{ setCheck(connection.nip(15)) }}</td>
<td>{{ setCheck(connection.nip(20)) }}</td>
<td class="nip nip-15">
{{ setCheck(connection.nip(15)) }}
</td>
<td class="nip nip-20">
{{ setCheck(connection.nip(20)) }}
</td>
</template>
<script>
/* eslint-disable */
import { defineComponent} from 'vue'
import InspectorRelayResult from 'nostr-relay-inspector'
// import InspectorRelayResult from 'nostr-relay-inspector'
export default defineComponent({
name: 'RelaySingleComponent',
@ -34,7 +63,7 @@ export default defineComponent({
result: {
type: Object,
default(rawProps){
return InspectorRelayResult
return {}
}
},
showColumns: {
@ -64,26 +93,6 @@ export default defineComponent({
return {}
},
methods: {
getAggregateResultClass (url) {
let result = ''
if (this.result?.aggregate == null) {
result = 'unprocessed'
}
else if (this.result?.aggregate == 'public') {
result = 'readwrite'
}
else if (this.result?.aggregate == 'restricted') {
if(this.result?.check.write) {
result = 'write-only'
} else {
result = 'read-only'
}
}
else if (this.result?.aggregate == 'offline') {
result = 'offline'
}
return `aggregate indicator ${result}`
},
getResultClass (url, key) {
let result = this.result?.check?.[key] === true
@ -113,8 +122,10 @@ export default defineComponent({
setCaution (bool) {
return !bool ? '⚠️' : ''
},
nip05List (url) {
nip05List () {
// console.log(this.result)
let string = ''
if(this.result.nips[5]) {
string = `${string}Relay domain contains NIP-05 verification data for:`
let users = Object.entries(this.result.nips[5]),

176
src/components/RelayTableComponent.vue
View File

@ -17,114 +17,32 @@
<div class="block">
<table>
<RelayListComponent
section="public"
:relays="relays"
:result="result"
:messages="messages"
:alerts="alerts"
:connections="connections"
/>
<!-- </table>
</div> -->
<!-- </column>
<column :xs="12" :md="12" :lg="6"> -->
<!-- <div class="block"> -->
<tr><td colspan="11"><h2><span class="indicator badge write-only">{{ query('restricted').length }}</span>Restricted</h2></td></tr>
<!-- <table class="online"> -->
<tr class="online" v-if="query('restricted').length > 0">
<th class="table-column status-indicator"></th>
<th class="table-column relay"></th>
<th class="table-column verified"><span class="verified-shape-wrapper"><span class="shape verified"></span></span></th>
<!-- <th class="table-column location" v-tooltip:top.tooltip="Ping">
🌎
</th> -->
<th class="table-column latency" v-tooltip:top.tooltip="'Relay Latency on Read'">
⌛️
</th>
<th class="table-column connect" v-tooltip:top.tooltip="'Relay connection status'">
🔌
</th>
<th class="table-column read" v-tooltip:top.tooltip="'Relay read status'">
👁️‍🗨️
</th>
<th class="table-column write" v-tooltip:top.tooltip="'Relay write status'">
✏️
</th>
<th class="table-column info" v-tooltip:top.tooltip="'Additional information detected regarding the relay during processing'">
ℹ️
</th>
<th class="table-column nip nip-15" v-tooltip:top.tooltip="'Does the relay support NIP-15'">
NIP-15
</th>
<th class="table-column nip nip-20" v-tooltip:top.tooltip="'Does the relay support NIP-20'">
NIP-20
</th>
</tr>
<tr v-for="relay in query('restricted')" :key="{relay}" :class="getLoadingClass(relay)" class="online">
<td :key="generateKey(relay, 'aggregate')"><span :class="getAggregateResultClass(relay)"><span></span><span></span></span></td>
<td class="left-align relay-url" @click="copy(relay)">{{ relay }}</td>
<td></td>
<!-- <td>{{result[relay].flag}}</td> -->
<td><span>{{ result[relay].latency.final }}<span v-if="result[relay].check.latency">ms</span></span></td>
<td :key="generateKey(relay, 'check.connect')"><span :class="getResultClass(relay, 'connect')"></span></td>
<td :key="generateKey(relay, 'check.read')"><span :class="getResultClass(relay, 'read')"></span></td>
<td :key="generateKey(relay, 'check.write')"><span :class="getResultClass(relay, 'write')"></span></td>
<td>
<ul v-if="result[relay].observations && result[relay].observations.length">
<li class="observation" v-for="(alert) in result[relay].observations" :key="generateKey(relay, alert.description)">
<span v-tooltip:top.tooltip="alert.description" :class="alert.type" v-if="alert.type == 'notice'">✉️</span>
<span v-tooltip:top.tooltip="alert.description" :class="alert.type" v-if="alert.type == 'caution'">⚠️</span>
</li>
</ul>
</td>
<td>{{ setCheck(connections[relay].nip(15)) }}</td>
<td>{{ setCheck(connections[relay].nip(20)) }}</td>
</tr>
<!-- </table> -->
<!-- </div> -->
<!-- <div class="block"> -->
<tr> <td colspan="11"><h2><span class="indicator badge offline">{{ query('offline').length }}</span>Offline</h2></td></tr>
<!-- <table v-if="query('offline').length > 0"> -->
<tr class="offline" v-if="query('offline').length > 0">
<th class="table-column status-indicator"></th>
<th class="table-column relay"></th>
<th class="table-column verified"></th>
<!-- <th class="table-column location"></th> -->
<th></th>
<th class="table-column connect" v-tooltip:top.tooltip="'Relay connection status'">
🔌
</th>
<th class="table-column read" v-tooltip:top.tooltip="'Relay read status'">
👁️‍🗨️
</th>
<th class="table-column write" v-tooltip:top.tooltip="'Relay write status'">
✏️
</th>
<th class="table-column info" v-tooltip:top.tooltip="'Additional information detected regarding the relay during processing'">
ℹ️
</th>
<th></th>
<th></th>
</tr>
<tr v-for="relay in query('offline')" :key="{relay}" :class="getLoadingClass(relay)">
<td :key="generateKey(relay, 'aggregate')"><span :class="getAggregateResultClass(relay)"></span></td>
<td class="left-align relay-url">{{ relay }}</td>
<!-- <td></td> -->
<td></td>
<td></td>
<td :key="generateKey(relay, 'check.connect')"><span :class="getResultClass(relay, 'connect')"></span></td>
<td :key="generateKey(relay, 'check.read')"><span :class="getResultClass(relay, 'read')"></span></td>
<td :key="generateKey(relay, 'check.write')"><span :class="getResultClass(relay, 'write')"></span></td>
<td>
<ul v-if="messages[relay].notices.length">
<li v-tooltip:left.tooltip="message" v-for="(message) in messages[relay].notices" :key="generateKey(relay, message)">✉️</li>
</ul>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<RelayListComponent
section="restricted"
:relays="relays"
:result="result"
:messages="messages"
:alerts="alerts"
:connections="connections"
/>
<RelayListComponent
section="offline"
:relays="relays"
:result="result"
:messages="messages"
:alerts="alerts"
:connections="connections"
/>
</table>
</div>
</column>
@ -136,19 +54,6 @@
</column>
</row>
<!-- <h2>Processing</h2>
<table v-if="relays.filter((relay) => result[relay] && !result[relay].state=='complete').length > 0">
<tr>
<th></th>
</tr>
<tr v-for="relay in relays.filter((url) => !result[url].state=='complete')" :key="{relay}" :class="getLoadingClass(relay)">
<td>{{ relay }}</td>
</tr>
</table>
<a href="./relays/">JSON API</a> -->
<span class="credit"><a href="http://sandwich.farm">Another 🥪 by sandwich.farm</a>, built with <a href="https://github.com/jb55/nostr-js">nostr-js</a> and <a href="https://github.com/dskvr/nostr-relay-inspector">nostr-relay-inspector</a>, inspired by <a href="https://github.com/fiatjaf/nostr-relay-registry">nostr-relay-registry</a></span>
</div>
@ -210,16 +115,9 @@ export default defineComponent({
},
async mounted() {
// //console.log(this.relays.filter((relay) => this.result?.[relay] && !this.result?.[relay].state=='complete').length)
this.relays.forEach(async relay => {
// const nip05 = await searchDomain(relay)
// console.log(relay, 'search domain', nip05)
this.check(relay)
})
// setTimeout(() => {
// this.relays.forEach(relay => { this.checkLatency(relay) })
// }, 10000)
},
computed: {},
@ -256,17 +154,8 @@ export default defineComponent({
console.log(this.result[relay].observations)
})
.on('close', () => {
// delete this.connections[relay]
})
//
// setTimeout( () => {
// inspect
// .reset()
// inspect
// .run()
// //console.log('reset and run')
// }, 25000)
.on('close', () => {})
this.connections[relay] = inspect
},
@ -302,27 +191,6 @@ export default defineComponent({
})
},
getAggregateResultClass (url) {
let result = ''
if (this.result?.[url]?.aggregate == null) {
result = 'unprocessed'
}
else if (this.result?.[url]?.aggregate == 'public') {
result = 'readwrite'
}
else if (this.result?.[url]?.aggregate == 'restricted') {
if(this.result?.[url]?.check.write) {
result = 'write-only'
} else {
result = 'read-only'
}
}
else if (this.result?.[url]?.aggregate == 'offline') {
result = 'offline'
}
return `aggregate indicator ${result}`
},
getResultClass (url, key) {
let result = this.result?.[url]?.check?.[key] === true

100
src/styles/main.scss
View File

@ -46,13 +46,23 @@ tr.relay.loaded td {
margin-right:5px;
}
.badge.readwrite,
.badge.offline {
.public .badge,
.offline .badge {
color: white;
}
.badge.write-only,
.badge.read-only,
.public.online .badge {
background:green
}
.restricted.online .badge {
background:orange
}
.offline .badge {
background:red
}
tr.online .indicator.failure {
background-color:orange !important;
}
@ -63,7 +73,7 @@ tr.online .indicator.failure {
border-style: solid;
}
.indicator.pernding {
.indicator.pending {
background-color: #c0c0c0;
border-color: rgba(55,55,55,0.5);
}
@ -83,18 +93,18 @@ border-color: rgba(255,0,0,0.5);
border-color: rgba(255, 191, 0,0.5);
}
.indicator.readwrite {
.indicator.public {
background-color: green;
border-color: rgba(0,255,0,0.5);
}
.indicator.read-only {
.indicator.restricted {
position:relative;
border-color: transparent;
background-color: transparent
}
.indicator.read-only span:first-child {
.indicator.restricted span:first-child {
position:absolute;
width: 0;
height: 0;
@ -102,7 +112,7 @@ border-color: rgba(255,0,0,0.5);
border-right: 14px solid transparent;
}
.indicator.read-only span:last-child {
.indicator.restricted span:last-child {
position:absolute;
width: 0;
height: 0;
@ -110,28 +120,28 @@ border-color: rgba(255,0,0,0.5);
border-left: 14px solid transparent;
}
.indicator.write-only {
position:relative;
border-color: transparent;
background-color: transparent
}
.indicator.write-only span:first-child {
position:absolute;
width: 0;
height: 0;
border-bottom: 14px solid orange;
border-left: 14px solid transparent;
}
.indicator.write-only span:last-child {
position:absolute;
width: 0;
height: 0;
border-top: 14px solid green;
border-right: 14px solid transparent;
}
//
// .indicator.restricted {
// position:relative;
// border-color: transparent;
// background-color: transparent
// }
//
// .indicator.restricted span:first-child {
// position:absolute;
// width: 0;
// height: 0;
// border-bottom: 14px solid orange;
// border-left: 14px solid transparent;
// }
//
// .indicator.restricted span:last-child {
// position:absolute;
// width: 0;
// height: 0;
// border-top: 14px solid green;
// border-right: 14px solid transparent;
// }
.indicator.offline {
background-color: red;
@ -142,6 +152,9 @@ tr.online .relay-url {
cursor: pointer;
}
.verified-shape-wrapper {
display:inline-block;
width: 16px;
@ -255,16 +268,15 @@ h1 sup {
.loading {
animation-duration: 1.8s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #fafafa 8%, #f4f4f4 38%, #fafafa 54%);
background-size: 1000px 640px;
position: relative;
animation-duration: 1.8s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: linear-gradient(to right, #fafafa 8%, #f4f4f4 38%, #fafafa 54%);
background-size: 1000px 640px;
position: relative
}
.loaded .loading {
@ -286,3 +298,9 @@ li.observation {
display: inline;
cursor: pointer;
}
tr.offline .verified, tr.offline .verified *,
tr.offline .latency,
tr.offline .nip {
visibility: hidden;
}

Write Preview
Loading…
Cancel
Save