Integration of IYP (#751)

* Fixed Examples In Network and Countries page (#713) * Integrating IYP to IHR (#719) * Add IYP search & change networks route * Add IYP AS page * Add IYP IXP page * Flat IYP table * bug fixed * Add IYP Prefix page * fix ipv6 prefix * Add IYP tags page * Add IYP Domain Name page * Integrate AS report page with IYP page * Add event listener in treemaps * Comment out language switcher from header * Add IYP country page & fix search & fix routes * fix route in country overview * Upgrade packages * Merge #724 * Add doc and change IYP legend route to IYP * fix headings and overview padding * Increase expandable bars headline * Docs updated * Remove unnecessary comments * Add ip-address lib which replaces prefix regex * Replace variables in cypher queries when displayed * AS new layout init * ASOverview added in new layout * Add date filter in AS layout * Init Generic Card Controller * Monitor tab completed in new layout * Add ASPeers in new layout * Routing tab completed * DNS tab completed * Peering tab completed * Registration tab completed * Prototype for the new AS network layout completed * fix bug in locale url init * fix bug in url set after search as network * As layout can select widget in custom tab * Add day report to widgets * Country new layout added * Prefix new layout init * Prefix new layout completed * Host Name completed & Tag custom init * Tag new layout completed * Add hast name and tag pages to menu * Add metadata in iyp views dynamically * Fix metadata reference time and url in layout * Add func to copy cypher query * Fix metadata cypher dynamic query * Add anchor tag to each widget * Add links from the overview to the widgets * Init Ranking page * Add Rank page * Fix style in cypher btn & limit rank res to 100K * fix websocket in iyp * Init transforming IYP websocket to HTTP req * Replace neo4j driver with HTTP requests * Fix scroll to anchor * Fix routing with active tab * IXP new layout completed * fix location search bar in network delay * Bug fixes * Convert DomaiName node to HostName * Add redirection from the old locale * Add Dockerfile and deploy instruction on README.md * Add github action to test docker image * Creating new UI for loading page * Update metadata table info * Add margin between logo in loading page * Add version badge to footer logo * Fix layout and update readme * Update readme * Bug fixes and UI improvements * Fix originated column in prefix overview * Remove links from overview indexes, update Prominent query, fix AS tag chart * Bug fixes in tag's treemap chart * Apply PR #713 to Host Name, Tag and Rank pages * Fix top rank in network overview & replace Host Name to Hostname --------- Co-authored-by: Dimitrios Panteleimon Giakatos <[email protected]> --------- Co-authored-by: Arnab Ghosh <[email protected]> Co-authored-by: Dimitrios Panteleimon Giakatos <[email protected]> Co-authored-by: Dimitrios Panteleimon Giakatos <[email protected]>
InternetHealthReport · Mar 1, 2024 · 7ba872e · 7ba872e
1 parent 31301dc
commit 7ba872e
Show file tree

Hide file tree

Showing 128 changed files with 9,789 additions and 866 deletions.
diff --git a/.github/workflows/docker-image.yml b/.github/workflows/docker-image.yml
@@ -0,0 +1,18 @@
+name: Docker Image CI
+
+on:
+  push:
+    branches: [ "master" ]
+  pull_request:
+    branches: [ "master" ]
+
+jobs:
+
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Build the Docker image
+      run: docker build . --file Dockerfile --tag ihr-website:$(date +%s)
diff --git a/.gitignore b/.gitignore
@@ -20,7 +20,6 @@ package-lock.json
 
 # Editor directories and files
 .vscode/*
-!.vscode/extensions.json
 .idea
 *.suo
 *.ntvs*

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
diff --git a/Dockerfile b/Dockerfile
@@ -0,0 +1,9 @@
+FROM node:20.10.0 AS builder
+WORKDIR /app
+COPY . .
+RUN npm install && npm run build
+FROM nginx:stable-alpine-slim
+WORKDIR /app
+COPY --from=builder /app/dist /usr/share/nginx/html
+COPY --from=builder /app/default.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 <p align="center"><img src="https://avatars.githubusercontent.com/u/40665700?s=200&v=4" height="100"></p>
 <h1 align="center">IHR Website</h1>
 <p align="center">
-The Internet Health Report monitors the conditions of networks that compose the Internet. This effort aims to provide network operators, policymakers, and other stakeholders, with a better understanding of the Internet's infrastructure and its evolution. To understand further click <a href="https://ihr.iijlab.net">here</a>
+The Internet Health Report monitors the conditions of networks that compose the Internet. This effort aims to provide network operators, policymakers, and other stakeholders, with a better understanding of the Internet's infrastructure and its evolution. To understand further click <a href="https://ihr.iijlab.net">here</a>.
 </p>
 
 ## Prerequisites to run
@@ -50,9 +50,30 @@ npm run build
 npm run lint
 ```
 
-## Set up
-Check out our installation video [here](https://youtu.be/mdjMdaLdlfY) for a step-by-step guide on how to install and set up our software
+## Deploy with Docker
 
+To deploy the project with Docker, follow these steps:
+
+#### Clone the project in localhost
+
+```bash
+git clone https://github.com/InternetHealthReport/ihr-website.git
+cd ihr-website
+```
+
+#### Build the Docker Image
+
+```bash
+docker build -t ihr-website .
+```
+
+#### Run the Docker Container
+
+```bash
+docker run --name ihr-website -d -p <host-port>:80 -t ihr-website
+```
+
+Replace `<host-port>` with the port on your host machine where you want to expose the application.
 
 ## Ways to contribute
 

diff --git a/babel.config.js → babel.config.cjs b/babel.config.js → babel.config.cjs
diff --git a/default.conf b/default.conf
@@ -0,0 +1,47 @@
+server {
+    listen       80;
+    listen  [::]:80;
+    server_name  localhost;
+
+    #access_log  /var/log/nginx/host.access.log  main;
+
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        include  /etc/nginx/mime.types;
+        try_files $uri $uri/ /index.html;
+    }
+
+    #error_page  404              /404.html;
+
+    # redirect server error pages to the static page /50x.html
+    #
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+
+    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
+    #
+    #location ~ \.php$ {
+    #    proxy_pass   http://127.0.0.1;
+    #}
+
+    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
+    #
+    #location ~ \.php$ {
+    #    root           html;
+    #    fastcgi_pass   127.0.0.1:9000;
+    #    fastcgi_index  index.php;
+    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
+    #    include        fastcgi_params;
+    #}
+
+    # deny access to .htaccess files, if Apache's document root
+    # concurs with nginx's one
+    #
+    #location ~ /\.ht {
+    #    deny  all;
+    #}
+}
+
diff --git a/index.html b/index.html
@@ -32,94 +32,128 @@
   <body>
     <div id="app">
       <div id="loading-wrapper">
-        <div id="loading-content">
-          <img
-            class="blink-image"
-            src="https://avatars1.githubusercontent.com/u/40665700?s=200&v=4"
-          />
+        <div class="blink-image">
+          <div class="loading">
+            <div class="imageLoading">
+              <h1>L<span> </span>ading...</h1>
+            </div>
+          </div>
         </div>
-        <div id="loading-text">Loading...</div>
       </div>
     </div>
     <script type="module" src="/src/main.js"></script>
     <style>
-      #loading-wrapper {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        text-align: center;
-      }
+     #loading-wrapper {
+      margin: 0;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      -ms-transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%);
+
+    }
 
-      #loading-text {
-        font-family: Verdana, Geneva, Tahoma, sans-serif;
-        width: 150px;
-        height: 30px;
-        text-align: center;
-        font-size: 20px;
-        margin: 20px 0 0 -75px;
+    /* Firefox old*/
+    @-moz-keyframes blink {
+      0% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.1;
+      }
+      100% {
+        opacity: 1;
       }
+    }
 
-      #loading-content {
-        text-align: center;
-        margin: -50px 0 0 -75px;
+    @-webkit-keyframes blink {
+      0% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.1;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+    /* IE */
+    @-ms-keyframes blink {
+      0% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.1;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+    /* Opera and prob css3 final iteration */
+    @keyframes blink {
+      0% {
+        opacity: 1;
       }
+      50% {
+        opacity: 0.1;
+      }
+      100% {
+        opacity: 1;
+      }
+    }
+    .blink-image {
+      -moz-animation: blink normal 2s infinite ease-in-out; /* Firefox */
+      -webkit-animation: blink normal 2s infinite ease-in-out; /* Webkit */
+      -ms-animation: blink normal 2s infinite ease-in-out; /* IE */
+      animation: blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
+    }
+
+    .loading .imageLoading h1 {
+      font-family: 'Montserrat', sans-serif;
+      font-size: 100px !important;
+      font-weight: 700;
+      margin: 0px;
+      color: #232323;
+    }
+
+    .loading .imageLoading h1>span {
+      display: inline-block;
+      width: 50px;
+      height: 50px;
+      background-image: url('https://avatars1.githubusercontent.com/u/40665700?s=200&v=4');
+      background-size: cover;
+      -webkit-transform: scale(1.4);
+          -ms-transform: scale(1.4);
+              transform: scale(1.4);
+      z-index: -1;
+      margin: 0px 15px 0px 15px;
+    }
 
-      /* Firefox old*/
-      @-moz-keyframes blink {
-        0% {
-          opacity: 1;
-        }
-        50% {
-          opacity: 0.1;
-        }
-        100% {
-          opacity: 1;
-        }
+    @media screen and (max-width: 320px) {
+      .loading .imageLoading {
+        height: 85px;
       }
+      .loading .imageLoading h1 {
+        font-size: 66px;
+      }
+      .loading .imageLoading h1>span {
+        width: 40px;
+        height: 40px;
+      }
+    }
 
-      @-webkit-keyframes blink {
-        0% {
-          opacity: 1;
-        }
-        50% {
-          opacity: 0.1;
-        }
-        100% {
-          opacity: 1;
-        }
-      }
-      /* IE */
-      @-ms-keyframes blink {
-        0% {
-          opacity: 1;
-        }
-        50% {
-          opacity: 0.1;
-        }
-        100% {
-          opacity: 1;
-        }
-      }
-      /* Opera and prob css3 final iteration */
-      @keyframes blink {
-        0% {
-          opacity: 1;
-        }
-        50% {
-          opacity: 0.1;
-        }
-        100% {
-          opacity: 1;
-        }
-      }
-      .blink-image {
-        -moz-animation: blink normal 2s infinite ease-in-out; /* Firefox */
-        -webkit-animation: blink normal 2s infinite ease-in-out; /* Webkit */
-        -ms-animation: blink normal 2s infinite ease-in-out; /* IE */
-        animation: blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
-        width: 100px;
-        height: 100px;
+    @media screen and (max-width: 767px) {
+      .loading .imageLoading {
+        height: 115px;
+      }
+      .loading .imageLoading h1 {
+        font-size: 86px;
+      }
+      .loading .imageLoading h1>span {
+        width: 60px;
+        height: 60px;
       }
+    }
     </style>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,7 +1,8 @@
 {
   "name": "ihr",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -11,9 +12,10 @@
     "test": "jest --verbose"
   },
   "dependencies": {
-    "@intlify/unplugin-vue-i18n": "^1.5.0",
+    "@intlify/unplugin-vue-i18n": "^2.0.0",
     "@quasar/extras": "^1.16.8",
     "axios": "^1.6.2",
+    "ip-address": "^9.0.5",
     "plotly.js-dist": "^2.27.1",
     "quasar": "^2.14.0",
     "swagger-ui": "^5.10.3",
@@ -26,14 +28,14 @@
     "@quasar/vite-plugin": "^1.6.0",
     "@rushstack/eslint-patch": "^1.3.3",
     "@vitejs/plugin-vue": "^4.4.0",
-    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
     "eslint": "^8.49.0",
     "eslint-plugin-vue": "^9.17.0",
     "jest": "^29.7.0",
     "joi": "^17.11.0",
     "prettier": "^3.0.3",
     "sass": "^1.33.0",
     "stylus": "^0.62.0",
-    "vite": "^4.4.11"
+    "vite": "^5.0.10"
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,7 +20,6 @@ package-lock.json @@
     # Editor directories and files
     .vscode/*
-    !.vscode/extensions.json
     .idea
     *.suo
     *.ntvs*
@@ Expand Down @@