add: update demo page

jsdelivr · Jun 2, 2022 · 6400381 · 6400381
1 parent 2776155
commit 6400381
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 3 deletions.
diff --git a/public/globals.js b/public/globals.js
@@ -1,5 +1,10 @@
+// filters
 const ALLOWED_LOCATION_TYPES = ['continent', 'region', 'country', 'state', 'city', 'asn', 'network', 'magic'];
-const ALLOWED_QUERY_TYPES = ['ping', 'traceroute', 'dns'];
+const ALLOWED_QUERY_TYPES = ['ping', 'traceroute', 'dns', 'mtr'];
+// traceroute
 const ALLOWED_TRACE_PROTOCOLS = ['TCP', 'UDP', 'ICMP'];
+// dns
 const ALLOWED_DNS_TYPES = ['A', 'AAAA', 'ANY', 'CNAME', 'DNSKEY', 'DS', 'MX', 'NS', 'NSEC', 'PTR', 'RRSIG', 'SOA', 'TXT', 'SRV'];
 const ALLOWED_DNS_PROTOCOLS = ['UDP', 'TCP'];
+// mtr
+const ALLOWED_MTR_PROTOCOLS = ['TCP', 'UDP', 'ICMP'];
diff --git a/public/measurements.vue.js b/public/measurements.vue.js
@@ -67,6 +67,9 @@ const app = () => ({
     getTraceProtocolArray() {
       return ALLOWED_TRACE_PROTOCOLS;
     },
+    getMtrProtocolArray() {
+      return ALLOWED_MTR_PROTOCOLS;
+    },
     getQueryTypeArray() {
       return ALLOWED_QUERY_TYPES;
     },
@@ -88,6 +91,20 @@ const app = () => ({
         measurement.packets = this.query.packets;
       }
 
+      if (this.query.type === 'mtr') {
+        if (this.query.packets) {
+          measurement.packets = this.query.packets;
+        }
+
+        if (this.query.port) {
+          measurement.port = this.query.port;
+        }
+
+        if (this.query.protocol) {
+          measurement.protocol = this.query.protocol;
+        }
+      }
+
       if (this.query.type === 'traceroute') {
         if (this.query.protocol) {
           measurement.protocol = this.query.protocol;
@@ -231,13 +248,13 @@ const app = () => ({
             <input type="number" v-model="query.limit" id="query_global_limit" name="query_global_limit" placeholder="global limit" />
           </div>
         </div>
-        <div v-if="query.type === 'ping'" class="form-group row">
+        <div v-if="['ping', 'mtr'].includes(query.type)" class="form-group row">
           <label for="query_packets" class="col-sm-2 col-form-label">packets</label>
           <div class="col-sm-10">
             <input type="number" v-model="query.packets" id="query_packets" name="query_packets" placeholder="packets" />
           </div>
         </div>
-        <div v-if="query.type === 'traceroute'" class="form-group row">
+        <div v-if="['traceroute', 'mtr'].includes(query.type)" class="form-group row">
           <label for="query_port" class="col-sm-2 col-form-label">port</label>
           <div class="col-sm-10">
             <input type="number" v-model="query.port" id="query_port" name="query_port" placeholder="port" />
@@ -254,6 +271,17 @@ const app = () => ({
             </select>
           </div>
         </div>
+        <div v-if="query.type === 'mtr'" class="form-group row">
+          <label for="query_protocol" class="col-sm-2 col-form-label">protocol</label>
+          <div class="col-sm-10">
+            <select v-model="query.protocol" name="query_protocol" id="query_protocol" class="custom-select my-1 mr-sm-2">
+              <option disabled value="">Please select one</option>
+              <option v-for="protocol in getMtrProtocolArray()" :value="protocol">
+                {{ protocol }}
+              </option>
+            </select>
+          </div>
+        </div>
         <div v-if="query.type === 'dns'" class="form-group row">
           <label for="query_dns_type" class="col-sm-2 col-form-label">trace</label>
           <div class="col-sm-10">