forked from InternetHealthReport/ihr-website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathNetworks.vue
139 lines (130 loc) · 4.24 KB
/
Networks.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<script setup>
import { RouterLink, useRoute } from 'vue-router'
import Tr from '@/i18n/translation'
import { ref, watch, onMounted } from 'vue'
import SearchBar from '@/components/search/SearchBar.vue'
import AS from '@/components/networks/AS.vue'
import IXP from '@/components/networks/IXP.vue'
import Prefix from '@/components/networks/Prefix.vue'
import * as ipAddress from 'ip-address'
import Feedback from '@/components/Feedback.vue'
const route = useRoute()
const asNumber = ref(null)
const ixpNumber = ref(null)
const prefixHostString = ref(null)
const prefixLengthNumber = ref(null)
const Address4 = ipAddress.Address4
const Address6 = ipAddress.Address6
const init = () => {
if (route.params.id) {
asNumber.value = route.params.id.includes('AS') ? Number(route.params.id.replace('AS', '')) : null
ixpNumber.value = route.params.id.includes('IXP') ? Number(route.params.id.replace('IXP', '')) : null
prefixHostString.value = null
prefixLengthNumber.value = null
} else if (route.params.ip && route.params.length) {
let prefixMatch
try {
prefixMatch = (new Address4(route.params.ip)).isCorrect()
} catch (e) {
prefixMatch = null
}
if (!prefixMatch) {
try {
prefixMatch = (new Address6(route.params.ip)).isCorrect()
} catch (e) {
prefixMatch = null
}
}
prefixHostString.value = prefixMatch ? route.params.ip : null
prefixLengthNumber.value = !isNaN(route.params.length) ? Number(route.params.length) : null
asNumber.value = null
ixpNumber.value = null
}
}
watch(() => route.params.id, () => {
init()
})
watch(() => route.params.ip, () => {
init()
})
onMounted(() => {
init()
})
</script>
<template>
<div id="IHR_as-and-ixp-container" class="IHR_char-container">
<div v-if="route.params.id || route.params.ip">
<AS v-if="asNumber" />
<IXP v-if="ixpNumber" />
<Prefix v-if="prefixHostString && prefixLengthNumber" />
</div>
<div v-else>
<div>
<h1 class="text-center q-pa-xl">Network Report</h1>
<div class="row justify-center">
<div class="col-6">
<SearchBar
bg="white"
label="grey-8"
input="black"
labelTxt="Enter an AS ID, IXP or network name (at least 3 characters)"
:noCountry="true"
:noHostName="true"
:noTag="true"
:noRank="true"
/>
</div>
</div>
</div>
<div class="q-pa-lg">
<div class="row q-pa-lg column items-center">
<div class="col-6">
<h3>Examples</h3>
</div>
</div>
<div class="row justify-center">
<div class="row examples">
<ul class="ul_styles">
<li>
<RouterLink :to="Tr.i18nRoute({ name: 'network', params: { id: 'AS2497' } })" class="IHR_delikify">IIJ (AS2497)</RouterLink>
</li>
<li>
<RouterLink :to="Tr.i18nRoute({ name: 'network', params: { id: 'AS15169' } })" class="IHR_delikify">Google (AS15169)</RouterLink>
</li>
<li>
<RouterLink :to="Tr.i18nRoute({ name: 'network', params: { id: 'AS2501' } })" class="IHR_delikify">University of Tokyo (AS2501)</RouterLink>
</li>
</ul>
<ul class="ul_styles">
<li>
<RouterLink :to="Tr.i18nRoute({ name: 'network', params: { id: 'IXP1997' } })" class="IHR_delikify">Equinix London (IXP1997)</RouterLink>
</li>
<li>
<RouterLink :to="Tr.i18nRoute({ name: 'network', params: { id: 'IXP26' } })" class="IHR_delikify">AMS-IX (IXP26)</RouterLink>
</li>
<li>
<RouterLink :to="Tr.i18nRoute({ name: 'network', params: { id: 'IXP2588' } })" class="IHR_delikify">DE-CIX Chennai (IXP2588)</RouterLink>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<Feedback />
</template>
<style lang="stylus">
.IHR_
&char-container
width 90%
margin 0 auto
.examples
column-gap 30px
@media screen and (max-width: 500px)
.examples
flex-direction column
.ul_styles
padding 0
margin 0
list-style-position: inside
</style>