Merge pull request #111 from aziontech/netinfo

feat: netinfo new component
aziontech · Dec 18, 2024 · c02014b · c02014b
2 parents 1625f39 + 752b4f9
commit c02014b
Show file tree

Hide file tree

Showing 8 changed files with 237 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="azion azion-light">
+<html lang="en" class="azion azion-dark">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">

diff --git a/package.json b/package.json
@@ -100,7 +100,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-syntax-highlighter": "^15.5.0",
-    "sass": "^1.68.0",
+    "sass": "1.77.6",
     "semantic-release": "^23.0.0",
     "start-server-and-test": "^2.0.0",
     "storybook": "^8.3.3",

diff --git a/src/App.vue b/src/App.vue
@@ -1,9 +1,19 @@
 <template>
-  <div class="px-container py-8 relative">
-    <Livemap lang="pt-br" />
-  </div>
+  <Container>
+    <ContentSection
+      titleTag="h1"
+      overline="Report"
+      title="Azion Netinfo"
+    >
+      <template #principal>
+        <Netinfo />
+      </template>
+    </ContentSection>
+  </Container>
 </template>
 
 <script setup>
-  import Livemap from './templates/livemap/Livemap.vue';
+  import Container from './templates/container/Container.vue'
+  import ContentSection from './templates/contentsection/ContentSection.vue'
+  import Netinfo from './templates/netinfo/Netinfo.vue'
 </script>
diff --git a/src/templates/netinfo/Netinfo.d.ts b/src/templates/netinfo/Netinfo.d.ts
@@ -0,0 +1,47 @@
+/**
+ *
+ * netinfo
+ *
+ *
+ * @module netinfo
+ */
+import { VNode } from 'vue';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+
+/**
+ * Defines valid properties in netinfo component.
+ */
+export interface NetinfoProps {}
+
+/**
+ * Defines valid slots in Avatar component.
+ */
+export interface NetinfoSlots {
+  /**
+   * Content can easily be customized with the default slot instead of using the built-in modes.
+   */
+  default(): VNode[];
+}
+
+/**
+ * Defines valid emits in Avatar component.
+ */
+export interface NetinfoEmits {
+  /**
+   * Triggered when an error occurs while loading an image file.
+   */
+  error(event: Event): void;
+}
+
+/**
+ * @group Component
+ */
+declare class Netinfo extends ClassComponent<NetinfoProps, NetinfoSlots, NetinfoEmits> { }
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    Netinfo: GlobalComponentConstructor<Netinfo>;
+  }
+}
+
+export default Netinfo;
diff --git a/src/templates/netinfo/Netinfo.vue b/src/templates/netinfo/Netinfo.vue
@@ -0,0 +1,164 @@
+<template>
+  <div class="flex flex-col gap-3 w-full">
+    <div class="flex justify-end">
+      <Button
+        label=""
+        size="small"
+        :icon="icon"
+        severity="secondary"
+        outlined
+        @click="copy"
+      />
+    </div>
+
+    <div>
+      <ul v-if="data" v-show="data" class="block rounded border surface-border">
+        <li class="flex flex-row gap-2 border-b surface-border p-2">
+          <p>
+            <strong class="text-nowrap">UUID:</strong> {{ data.uuid }}
+          </p>
+        </li>
+        <li class="flex flex-row gap-2 border-b surface-border p-2">
+          <p>
+            <strong class="text-nowrap">Client IP:</strong> {{ data.client.label }}
+          </p>
+        </li>
+        <li class="flex flex-row gap-2 border-b surface-border p-2">
+          <p>
+            <strong class="text-nowrap">Azion Edge IP:</strong> {{ data.azion.label }}
+          </p>
+        </li>
+        <li class="flex flex-row gap-2 border-b surface-border p-2">
+          <p>
+            <strong class="text-nowrap">Resolver IP:</strong> {{ data.azion.label }}
+          </p>
+        </li>
+        <li class="flex flex-row gap-2 border-b surface-border p-2">
+          <p>
+            <strong class="text-nowrap">User Agent:</strong> {{ data.userAgent }}
+          </p>
+        </li>
+      </ul>
+      <ul v-else class="block rounded border surface-border">
+        <li class="flex flex-row gap-2 border-b surface-border p-2">
+          <p class="flex flex-row gap-2">
+            <Skeleton width="4rem" height="26px" />: <Skeleton width="16rem" height="26px" />
+          </p>
+        </li>
+        <li class="flex flex-row gap-2 border-b surface-border p-2">
+          <p class="flex flex-row gap-2">
+            <Skeleton width="5rem" height="26px" />: <Skeleton width="12rem" height="26px" />
+          </p>
+        </li>
+        <li class="flex flex-row gap-2 border-b surface-border p-2">
+          <p class="flex flex-row gap-2">
+            <Skeleton width="6rem" height="26px" />: <Skeleton width="12rem" height="26px" />
+          </p>
+        </li>
+        <li class="flex flex-row gap-2 border-b surface-border p-2">
+          <p class="flex flex-row gap-2">
+            <Skeleton width="5rem" height="26px" />: <Skeleton width="12rem" height="26px" />
+          </p>
+        </li>
+        <li class="flex flex-row gap-2 border-b surface-border p-2">
+          <p class="flex flex-row gap-2">
+            <Skeleton width="5rem" height="26px" />: <Skeleton width="20rem" height="26px" />
+          </p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { onMounted, ref } from 'vue'
+  import Button from 'primevue/button'
+  import Skeleton from 'primevue/skeleton'
+
+  const service = 'https://netinfo.azion.com/json'
+  const data = ref(null)
+  const error = ref(null)
+  const icon = ref('pi pi-copy')
+
+  onMounted(() => {
+    getData(service)
+      .then(json => {
+        if(json.msg) {
+          error.value = json.msg
+          return
+        }
+
+        console.log(json)
+        data.value = parseData(json)
+        console.log(data.value)
+      })
+  })
+
+  const copy = () => {
+    navigator.clipboard.writeText(JSON.stringify(data.value))
+    icon.value = 'pi pi-check'
+
+    setTimeout(() => {
+      icon.value = 'pi pi-copy'
+    }, 1500)
+  }
+
+  const getData = async (service) => {
+    return fetch(service)
+      .then(response => {
+        if (!response.ok) {
+          const errorData = {
+            status: response.status,
+            msg: '[!] Fetch ERRROR to API communication'
+          }
+
+          console.error(errorData)
+          throw new Error(errorData)
+        }
+
+        return response.json()
+      })
+      .then(json => {
+        return json
+      })
+      .catch(error => {
+        const errorData = { msg: error.message || error }
+        console.error(errorData)
+        return { msg: errorData }
+      })
+  }
+
+  const parseData = (data) => {
+    return {
+      uuid: data.uuid || '',
+      userAgent: navigator.userAgent,
+      client: {
+        label: `${data.ipaddr} (${data.ipaddr_asn}, ${data.ipaddr_country})`,
+        ip: data.ipaddr,
+        asn: data.ipaddr_asn,
+        asname: data.ipaddr_asname,
+        region: data.ipaddr_region,
+        city: data.ipaddr_city,
+        country: data.ipaddr_country
+      },
+      azion: {
+        label: `${data.x_real_ip} (${data.x_real_ip_asn}, ${data.x_real_ip_country})`,
+        ip: data.x_real_ip,
+        asn: data.x_real_ip_asn,
+        asname: data.x_real_ip_asname,
+        region: data.x_real_ip_region,
+        city: data.x_real_ip_city,
+        country: data.x_real_ip_country
+      },
+      resolver: {
+        label: `${data.resolver_ip} (${data.resolver_ip_asn}, ${data.resolver_ip_country})`,
+        ip: data.resolver_ip,
+        asn: data.resolver_ip_asn,
+        asname: data.resolver_ip_asname,
+        region: data.resolver_ip_region,
+        city: data.resolver_ip_city,
+        country: data.resolver_ip_country
+      }
+    }
+  }
+</script>
diff --git a/src/templates/netinfo/netinfo.js b/src/templates/netinfo/netinfo.js
@@ -0,0 +1,2 @@
+import Netinfo from './Netinfo';
+export default Netinfo;
diff --git a/src/templates/netinfo/package.json b/src/templates/netinfo/package.json
@@ -0,0 +1,7 @@
+{
+  "main": "./netinfo.js",
+  "types": "./Netinfo.d.ts",
+  "browser": {
+    "./sfc": "./Netinfo.vue"
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -20,5 +20,5 @@
     "@templates/*": ["src/templates/*"],
   },
   "include": ["**/*.ts"],
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist", "storybook-static"]
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		import Netinfo from './Netinfo';
		export default Netinfo;