upgrade nostr-relay-inspector cleanup

package.json

@@ -27,7 +27,7 @@
     "node-emoji": "1.11.0",
     "node-polyfill-webpack-plugin": "2.0.1",
     "nostr": "0.2.5",
-    "nostr-relay-inspector": "0.0.5",
+    "nostr-relay-inspector": "0.0.6",
     "nostr-tools": "0.24.1",
     "onion-regex": "2.0.8",
     "requests": "0.3.0",

src/components/NavComponent.vue

@@ -0,0 +1,8 @@
+<template>
+<nav class="menu">
+  <ul>
+    <li><a href="#">add relay</a></li>
+    <li><a href="#">github</a></li>
+  </ul>
+</nav>
+</template>

src/components/RelayListComponent.vue

@@ -1,16 +1,21 @@
 <template>
-  <tr :class="getHeadingClass(section)">
+  <tr :class="getHeadingClass()">
+    <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
+      <div class="modal__content">
+        <span>
+          {{ queryJson(section) }}
+        </span>
+      </div>
+    </vue-final-modal>
     <td colspan="11">
-      <h2><span class="indicator badge">{{ query(section).length }}</span>{{ section }}</h2>
+      <h2><span class="indicator badge">{{ query(section).length }}</span>{{ section }} <a @click="showModal=true" class="section-json">{...}</a></h2>
     </td>
   </tr>
-  <tr :class="getHeadingClass(section)"  v-if="query(section).length > 0">
+  <tr :class="getHeadingClass()"  v-if="query(section).length > 0">
-    <th class="table-column status-indicator">
+    <th class="table-column status-indicator"></th>
 
-    </th>
+    <th class="table-column relay"></th>
-    <th class="table-column relay">
 
-    </th>
     <th class="table-column verified">
       <span class="verified-shape-wrapper">
         <span class="shape verified"></span>
@@ -34,16 +39,9 @@
     <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'">
-      <span>NIP-15</span>
-    </th>
-    <th class="table-column nip nip-20" v-tooltip:top.tooltip="'Does the relay support NIP-20'">
-      <span>NIP-20</span>
-    </th> -->
     <th class="table-column nip nip-20" v-tooltip:top.tooltip="'Does the relay support NIP-20'">
       <span>NIP-11</span>
     </th>
-    <!-- <th>FILTER: LIMIT</th> -->
   </tr>
   <tr v-for="relay in query(section)" :key="{relay}" :class="getResultClass(relay)" class="relay">
     <RelaySingleComponent
@@ -52,19 +50,22 @@
       :showColumns="showColumns"
       :connection="connections[relay]"
     />
-    <!-- <td>{{ setCaution(result[relay].didSubscribeFilterLimit) }}</td> -->
   </tr>
 </template>
 
 <script>
-/* eslint-disable */
+/*eslint no-warning-comments: "error"*/
+
 import { defineComponent} from 'vue'
 import RelaySingleComponent from './RelaySingleComponent.vue'
+import { VueFinalModal } from 'vue-final-modal'
+
 
 export default defineComponent({
   name: 'RelayListComponent',
   components: {
-    RelaySingleComponent
+    RelaySingleComponent,
+    VueFinalModal
   },
   props: {
     section: {
@@ -74,37 +75,37 @@ export default defineComponent({
     },
     relays:{
       type: Object,
-      default(rawProps){
+      default(){
-        return []
+        return {}
       }
     },
     result: {
       type: Object,
-      default(rawProps){
+      default(){
         return {}
       }
     },
     messages: {
       type: Object,
-      default(rawProps){
+      default(){
         return {}
       }
     },
     alerts: {
       type: Object,
-      default(rawProps){
+      default(){
         return {}
       }
     },
     connections: {
       type: Object,
-      default(rawProps){
+      default(){
         return {}
       }
     },
     showColumns: {
       type: Object,
-      default(rawProps) {
+      default() {
         return {
           connectionStatuses: false,
           nips: false,
@@ -115,12 +116,16 @@ export default defineComponent({
     }
   },
   data() {
-    return {}
+    return {
+      showModal: false
+    }
   },
-  computed: {
+  mounted(){
+    console.log('')
   },
+  computed: {},
   methods: {
-    getHeadingClass(section){
+    getHeadingClass(){
       return {
         online: this.section != "offline",
         public: this.section == "public",
@@ -136,11 +141,11 @@ export default defineComponent({
         public: this.section == "public"
       }
     },
-    query (group) {
+    query (aggregate) {
       let unordered,
           filterFn
 
-      filterFn = (relay) => this.result?.[relay]?.aggregate == group
+      filterFn = (relay) => this.result?.[relay]?.aggregate == aggregate
 
       unordered = this.relays.filter(filterFn);
 
@@ -152,7 +157,13 @@ export default defineComponent({
 
       return []
     },
+    queryJson(aggregate){
+      const relays = this.query(aggregate)
+      const result = {}
+      result.relays = relays.map( relay => relay )
+      return JSON.stringify(result,null,'\t')
 
+    }
   }
 })
 </script>
@@ -163,4 +174,58 @@ export default defineComponent({
     letter-spacing:-1px;
     font-size:12px;
   }
-</style>
+
+  .section-json {
+    font-size:13px;
+    color: #555;
+    cursor:pointer;
+  }
+
+  ::v-deep(.modal-container) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  ::v-deep(.modal-content) {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    max-height: 90%;
+    max-width:400px;
+    margin: 0 1rem;
+    padding: 1rem;
+    border: 1px solid #e2e8f0;
+    border-radius: 0.25rem;
+    background: #fff;
+  }
+  .modal__title {
+    margin: 0 2rem 0 0;
+    font-size: 1.5rem;
+    font-weight: 700;
+  }
+  .modal__content {
+    flex-grow: 1;
+    overflow-y: auto;
+  }
+  .modal__action {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    padding: 1rem 0 0;
+  }
+  .modal__close {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+  }
+
+  .nip-11 a { cursor: pointer }
+  </style>
+
+  <style scoped>
+  .dark-mode div ::v-deep(.modal-content) {
+    border-color: #2d3748;
+    background-color: #1a202c;
+  }
+  </style>

src/components/RelaySingleComponent.vue

@@ -45,13 +45,6 @@
     <a v-if="result.info" @click="showModal=true">✅ </a>
   </td>
 
-  <!-- <td class="nip nip-15">
-    {{ setCheck(connection.nip(15)) }}
-  </td>
-
-  <td class="nip nip-20">
-    {{ setCheck(connection.nip(20)) }}
-  </td> -->
   <vue-final-modal v-model="showModal" classes="modal-container" content-class="modal-content">
     <div class="modal__title">
       <slot name="title">{{ result.info?.name }}</slot>
@@ -86,29 +79,27 @@
 </template>
 
 <script>
-/* eslint-disable */
 import { defineComponent} from 'vue'
-import { VueFinalModal, ModalsContainer } from 'vue-final-modal'
+import { VueFinalModal } from 'vue-final-modal'
 import InspectorRelayResult from 'nostr-relay-inspector'
 
+
 export default defineComponent({
   name: 'RelaySingleComponent',
   components: {
-    RelaySingleModalComponent,
+    VueFinalModal
-    VueFinalModal,
-    ModalsContainer,
   },
   props: {
     relay: String,
     result: {
       type: Object,
-      default(rawProps){
+      default(){
         return structuredClone(InspectorRelayResult)
       }
     },
     showColumns: {
       type: Object,
-      default(rawProps) {
+      default() {
         return {
           connectionStatuses: false,
           nips: false,
@@ -119,7 +110,7 @@ export default defineComponent({
     },
     connection: {
       type: Object,
-      default(rawProps) {
+      default() {
         return {
           connectionStatuses: false,
           nips: false,
@@ -143,15 +134,15 @@ export default defineComponent({
          : 'pending'
        return `indicator ${result}`
      },
-     getLoadingClass (url) {
+     getLoadingClass () {
        return this.result?.state == 'complete' ? "relay loaded" : "relay"
      },
      generateKey (url, key) {
        return `${url}_${key}`
      },
-     setFlag (url) {
+     /*setFlag () {
        this.result.flag = this.result.geo?.countryCode ? countryCodeEmoji(this.result.geo.countryCode) : emoji.get('shrug');
-     },
+     },*/
 
      setCheck (bool) {
        return bool ? '✅ ' : ''
@@ -172,7 +163,7 @@ export default defineComponent({
          let users = Object.entries(this.result.identities),
              count = 0
 
-         users.forEach( ([key, value]) => {
+         users.forEach( ([key]) => {
            count++
            string = `${string} @${key} ${(count!=users.length) ? 'and' : ''}`
          })
@@ -188,14 +179,6 @@ export default defineComponent({
      nipLink(key){
        return `https://github.com/nostr-protocol/nips/blob/master/${this.nipSignature(key)}.md`
      },
-     getResultClass (url, key) {
-       let result = this.result?.check?.[key] === true
-       ? 'success'
-       : this.result?.check?.[key] === false
-         ? 'failure'
-         : 'pending'
-       return `indicator ${result}`
-     },
      async copy(text) {
        try {
          await navigator.clipboard.writeText(text);
@@ -219,6 +202,11 @@ li {
   list-style:none;
 }
 
+td.nip-11,
+td.verified span {
+  cursor: pointer
+}
+
 ::v-deep(.modal-container) {
   display: flex;
   justify-content: center;
@@ -257,10 +245,7 @@ li {
   right: 0.5rem;
 }
 
-.nip-11 a { cursor: pointer }
-</style>
 
-<style scoped>
 .dark-mode div ::v-deep(.modal-content) {
   border-color: #2d3748;
   background-color: #1a202c;

src/components/RelayTableComponent.vue

@@ -1,10 +1,7 @@
 <template>
+  <NavComponent />
   <div id="wrapper" :class="loadingComplete()">
-    <!-- <div class="text-h5 text-bold q-py-md q-px-sm full-width flex row justify-start">
-       |
-      <span></span> -->
 
-    <!-- </div> -->
     <row container :gutter="12">
       <column :xs="12" :md="12" :lg="12" class="title-card">
         <h1>nostr.watch<sup>alpha</sup></h1>
@@ -16,6 +13,7 @@
       <column :xs="12" :md="12" :lg="12">
         <div class="block">
           <table>
+
             <RelayListComponent
               section="public"
               :relays="relays"
@@ -60,43 +58,28 @@
 </template>
 
 <script>
-/* eslint-disable */
 import { defineComponent} from 'vue'
-import TooltipComponent from './TooltipComponent.vue'
 import RelayListComponent from './RelayListComponent.vue'
-
+import NavComponent from './NavComponent.vue'
-// import nip04 from 'nostr-tools/nip04'
-// import nip05 from '../../node_modules/nostr-tools/nip05'
-// import nip06 from 'nostr-tools/nip06'
-
-// import { relayConnect } from 'nostr-tools/relay'
-import {  Relay } from 'nostr'
 
 import { Row, Column } from 'vue-grid-responsive';
-import Popper from "vue3-popper";
-import onionRegex from 'onion-regex';
-import countryCodeEmoji from 'country-code-emoji'
-import emoji from 'node-emoji'
-
 
 import { relays } from '../../relays.yaml'
 import { messages as RELAY_MESSAGES, codes as RELAY_CODES } from '../../codes.yaml'
 
-// import { Inspector, InspectorObservation } from 'nostr-relay-inspector'
+import { Inspector, InspectorObservation } from 'nostr-relay-inspector'
-import { Inspector, InspectorObservation } from '../../lib/nostr-relay-inspector'
+// import { Inspector, InspectorObservation } from '../../lib/nostr-relay-inspector'
 
 import crypto from "crypto"
 
-const refreshMillis = 3*60*1000
-
 export default defineComponent({
   title: "nostr.watch registry & netw ork status",
   name: 'RelayTableComponent',
   components: {
     Row,
     Column,
-    TooltipComponent,
+    RelayListComponent,
-    RelayListComponent
+    NavComponent
   },
 
   data() {
@@ -115,9 +98,11 @@ export default defineComponent({
   },
 
   async mounted() {
+    console.log('mounted')
     this.relays.forEach(async relay => {
       this.check(relay)
     })
+
   },
 
   computed: {},
@@ -140,7 +125,7 @@ export default defineComponent({
         .on('complete', (instance) => {
           this.result[relay] = instance.result
           this.messages[relay] = instance.inbox
-          this.setFlag(relay)
+          // this.setFlag(relay)
           this.setAggregateResult(relay)
           this.adjustResult(relay)
         })
@@ -160,29 +145,6 @@ export default defineComponent({
       this.connections[relay] = inspect
     },
 
-    checkLatency(relay) {
-      this.connections[relay].opts.checkLatency = true
-      this.connections[relay].checkLatency()
-    },
-
-    // query (group, filterType) {
-    query (group) {
-      let unordered,
-          filterFn
-
-      filterFn = (relay) => this.result?.[relay]?.aggregate == group
-
-      unordered = this.relays.filter(filterFn);
-
-      if (unordered.length) {
-        return unordered.sort((relay1, relay2) => {
-          return this.result?.[relay1]?.latency.final - this.result?.[relay2]?.latency.final
-        })
-      }
-
-      return []
-    },
-
     adjustResult (relay) {
       this.result[relay].observations.forEach( observation => {
         if (observation.code == "BLOCKS_WRITE_STATUS_CHECK") {
@@ -192,28 +154,6 @@ export default defineComponent({
       })
     },
 
-    getResultClass (url, key) {
-
-      let result = this.result?.[url]?.check?.[key] === true
-      ? 'success'
-      : this.result?.[url]?.check?.[key] === false
-        ? 'failure'
-        : 'pending'
-      return `indicator ${result}`
-    },
-
-    getLoadingClass (url) {
-      return this.result?.[url]?.state == 'complete' ? "relay loaded" : "relay"
-    },
-
-    // setNip05(url){
-    //   const data = nip05(url.replace('wss://', ''))
-    //   if(data.length) {
-    //     this.nips[url][5] = data
-    //     this.result[url].nip05 = true
-    //   }
-    // },
-
     setAggregateResult (url) {
       let aggregateTally = 0
       aggregateTally += this.result?.[url]?.check.connect ? 1 : 0
@@ -238,44 +178,6 @@ export default defineComponent({
       }
     },
 
-    generateKey (url, key) {
-      return `${url}_${key}`
-    },
-
-    getID(url, keyword) {
-      return `${keyword}_${url}`
-    },
-
-    isOnion(url){
-      return onionRegex().test(url)
-    },
-
-    setLatency(url) {
-      // //console.log(this.result[url].check.connect === true, this.result[url]. latency,this.latency[url].final)
-      if (this.result[url].check.connect === true) this.result[url].latency = this.latency[url].final
-      // //console.log(this.result[url].check.connect === true, this.result[url]. latency,this.latency[url].final)
-      //console.log("latency",this.latency[url])
-    },
-
-
-
-
-    setFlag (url) {
-      this.result[url].flag = this.result[url].geo?.countryCode ? countryCodeEmoji(this.result[url].geo.countryCode) : emoji.get('shrug');
-    },
-
-    setCheck (bool) {
-      return bool ? '✅ ' : ''
-    },
-
-    setCross (bool) {
-      return !bool ? '❌' : ''
-    },
-
-    setCaution (bool) {
-      return !bool ? '⚠️' : ''
-    },
-
     relaysTotal () {
       return this.relays.length
     },
@@ -289,25 +191,6 @@ export default defineComponent({
       return value
     },
 
-    nip05List (url) {
-      let string = ''
-      if(this.result[url].nips[5]) {
-        string = `${string}Relay domain contains NIP-05 verification data for:`
-        let users = Object.entries(this.result[url].nips[5]),
-            count = 0
-        users.forEach( ([key, value]) => {
-          count++
-          string = `${string} @${key} ${(count!=users.length) ? 'and' : ''}`
-        })
-      }
-      return string
-    },
-
-    // searchDomain(domain){
-    //   return searchDomain(domain)
-    // },
-
-
     sha1 (message) {
       const hash = crypto.createHash('sha1').update(JSON.stringify(message)).digest('hex')
       // //console.log(message, ':', hash)
@@ -321,8 +204,3 @@ export default defineComponent({
 
 })
 </script>
-
-<style lang='css' scoped>
-
-
-</style>