dn42grcd/StaticRoot/index.html
Simon Marsh bcfb5828bd
All checks were successful
continuous-integration/drone/push Build is passing
Update drone pipeline
2021-12-30 10:15:48 +00:00

239 lines
7.4 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<title>DN42 GRC Realtime Data</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Styles -->
<link type="text/css" rel="stylesheet" href="bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Style overrides -->
<style>
.material-icons { display:inline-flex;vertical-align:middle }
body { box-shadow: inset 0 2em 10em rgba(0,0,0,0.4); min-height: 100vh }
</style>
<!-- Bootstrap/Vue JS -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="https://unpkg.com/vue-router@latest/dist/vue-router.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<!-- Other JS -->
<script src="https://unpkg.com/axios@0.20.0/dist/axios.min.js"></script>
</head>
<body>
<div id="grc_realtime">
<!-- Top Navbar -->
<nav class="navbar navbar-fixed-top navbar-expand-md navbar-dark bg-dark">
<div id="navlinks" class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto text=center">
<li class="nav-item"><a href="/" class="nav-link">Realtime&nbsp;Data</a></li>
<li class="nav-item"><a href="https://grc.burble.com" class="nav-link">GRC</a></li>
<li class="nav-item"><a href="https://explorer.burble.com" class="nav-link">Registry</a></li>
</ul>
</div>
<div class="collapse navbar-collapse w-100 ml-auto text-nowrap">
<div class="ml-auto"><router-link class="navbar-brand"
to="/">Realtime GRC Data</router-link>&nbsp;<a class="pull-right navbar-brand"
href="https://dn42.dev/"><img src="/dn42_logo.png" width="173" height="60"/></a>
</div>
</div>
</nav>
<!-- Tabs for content -->
<div class="clearfix">
<app-timer class="float-right"></app-timer>
<b-nav tabs>
<b-nav-item to="flaps" exact exact-active-class="active">Flapping Routes</b-nav-item>
<!-- <b-nav-item to="roa" exact exact-active-class="active">ROA Failures</b-nav-item> -->
</b-nav>
</div>
<!-- content is generated by the router -->
<div class="d-flex justify-content-center mt-3">
<router-view></router-view>
</div>
<!-- footer -->
<footer class="page-footer font-small">
<div style="margin-top: 20px; padding: 5px">
<a href="https://git.burble.com/burble.dn42/dn42grcd">Source Code</a>.
Powered by
<a href="https://getbootstrap.com/">Bootstrap</a>,
<a href="https://vuejs.org">Vue.js</a>,
<a href="https://github.com/axios/axios">axios</a>,
</div>
</footer>
<!-- flap page template -->
<script type="text/x-template" id="app-flaps-template">
<b-container fluid="sm">
<b-row class="justify-content-center py-3">
<h2>Most updated prefixes</h2>
</b-row>
<b-row class="px-3">
<b-col>
<b-table-simple responsive>
<b-thead>
<b-tr>
<b-th>Updates/min</b-th>
<b-th>Prefix</b-th>
<b-th>MNTNER</b-th>
<b-th>Paths</b-th>
</b-tr>
</b-thead>
<b-tbody>
<b-tr v-for="item in this.list">
<b-td class="py-1 my-0" v-text="item.count + ' - ' + item.percent + '%'"></b-td>
<b-td class="py-1 my-0"><reg-prefix v-bind:prefix="item.prefix"></reg-prefix></b-td>
<b-td class="py-1 my-0"><reg-mnts v-bind:mnts="item.mntner"></reg-mnts></b-td>
<b-td class="py-1 my-0"><rt-paths v-bind:paths="item.paths"></rt-paths></b-td>
</b-tr>
</b-tbody>
</b-table-simple>
</b-col>
<b-col class="text-left pr-5">
<p>Total Updates: {{ this.total }}<br/>Showing top ten results</p>
<p class="mt-5">Type to filter prefixes:<br/><b-input-group size="sm">
<b-form-input
v-model="filter"
type="search"
id="filterInput"
placeholder="filter"
debounce="200"
></b-form-input>
</b-input-group></p>
</b-col>
</b-row>
</b-container>
</script>
<!-- ROA page template -->
<script type="text/x-template" id="app-roa-template">
<div>
<b-container fluid="sm">
<b-row class="justify-content-center py-3">
<h2>IPv4 ROA Failures</h1>
</b-row>
<b-row class="px-3">
<b-col>
<b-table-simple responsive>
<b-thead>
<b-th>Prefix</b-th>
<b-th>Origin</b-th>
<b-th>MNTNER</b-th>
</b-thead>
<b-tbody>
<b-tr v-for="roa in this.list4">
<b-td class="py-1 my-0"><reg-prefix v-bind:prefix="roa.prefix"></reg-prefix></b-td>
<b-td class="py-1 my-0"><reg-asn v-bind:asn="roa.origin"></reg-asn></b-td>
<b-td class="py-1 my-0"><reg-mnts v-bind:mnts="roa.mntner"></reg-mnts></b-td>
</b-tr>
</b-tbody>
</b-table-simple>
</b-col>
<b-col class="text-left pr-5">
<p>Type to filter prefixes</p><b-input-group size="sm">
<b-form-input
v-model="filter4"
type="search"
id="filterInput4"
placeholder="filter"
debounce="200"
></b-form-input>
</b-input-group>
</b-col>
</b-row>
</b-container>
<b-container fluid="sm" class="mw-100">
<b-row class="justify-content-center py-3">
<h2>IPv6 ROA Failures</h1>
</b-row>
<b-row class="px-3">
<b-col>
<b-table-simple responsive>
<b-thead>
<b-th>Prefix</b-th>
<b-th>Origin</b-th>
<b-th>MNTNER</b-th>
</b-thead>
<b-tbody>
<b-tr v-for="roa in this.list6">
<b-td class="py-1 my-0"><reg-prefix v-bind:prefix="roa.prefix"></reg-prefix></b-td>
<b-td class="py-1 my-0"><reg-asn v-bind:asn="roa.origin"></reg-asn></b-td>
<b-td class="py-1 my-0"><reg-mnts v-bind:mnts="roa.mntner"></reg-mnts></b-td>
</b-tr>
</b-tbody>
</b-table-simple>
</b-col>
<b-col class="text-left pr-5">
<p>Type to filter prefixes</p><b-input-group size="sm">
<b-form-input
v-model="filter6"
type="search"
id="filterInput6"
placeholder="filter"
debounce="200"
></b-form-input>
</b-input-group>
</b-col>
</b-row>
</b-container>
</div>
</script>
<!-- Element Templates -->
<script type="text/x-template" id="reg-asn">
<b-link v-bind:href="url" v-text="normal"></b-link>
</script>
<script type="text/x-template" id="reg-prefix">
<b-link v-bind:href="url" v-text="prefix"></b-link>
</script>
<script type="text/x-template" id="reg-mnts">
<div>
<p class="py-0 my-0" v-for="mnt in this.mnts">
<reg-mnt v-bind:mnt="mnt"></reg-mnt>
</p>
</div>
</script>
<script type="text/x-template" id="reg-mnt">
<b-link class="text-nowrap" v-bind:href="url" v-text="mnt"></b-link>
</script>
<script type="text/x-template" id="reg-path">
<ul class="text-nowrap">
<li class="d-inline p-1" v-for="asn in list">
<reg-asn v-bind:asn="asn"></reg-asn>
</li>
</ul>
</script>
<script type="text/x-template" id="rt-paths">
<b-button @click="this.showPaths" variant="dark" size="sm"><span v-text="this.count"></span>&nbsp;paths</b-button>
</script>
<script type="text/x-template" id="app-timer">
<p class="p-1 pr-3">Update in {{ this.seconds }}s</p>
</script>
</div>
<script src="grc.js"></script>
</body>
</html>