Skip to content

Commit

Permalink
New Features:
Browse files Browse the repository at this point in the history 
1.Traceroute Graph AI design
New Pages:
Bugs Corrected:
To Be Corrected:
0. On product delete, delete trace results
1. On product delete, delete flamegraph results
  • Loading branch information
@juanfranciscocis
juanfranciscocis committed Aug 23, 2024
1 parent e31b3b3 commit 79e6336
Show file tree
Hide file tree
Showing 9 changed files with 188 additions and 38 deletions.
100 changes: 98 additions & 2 deletions src/app/pages/graph-trace/graph-trace.page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,111 @@ <h1 class="text-4xl lg:text-6xl font-bold">Traceroute Graph</h1>
</ion-col>
</ion-row>
<ion-row class="lg:m-10 md:m-10">
<ion-col size="12" size-md="6" size-lg="6" class="flex flex-row justify-center" *ngFor="let country of countries">
<ion-col size="12" size-md="6" size-lg="6" class="flex flex-row justify-center relative" *ngFor="let country of countries">

<div class="absolute z-10 w-full flex flex-row justify-end ">
<ion-avatar class="h-12 w-12 bg-purple-400 p-2" id="hover-trigger-{{country}}">
<ion-icon (click)="ai(country)" class="w-full h-full" name="color-wand-outline"></ion-icon>
</ion-avatar>
</div>

<ion-popover trigger="hover-trigger-{{country}}" triggerAction="hover" class="w-96" >
<ng-template>
<ion-content class="ion-padding">Ask DevProbe AI to analyze the traceroute data for {{country}}.</ion-content>
</ng-template>
</ion-popover>

<ion-card class="w-full h-96 p-6 flex flex-col justify-center items-center">
<ion-card-title class="">
<h1 class="text-6xl font-bold text-white">{{ country }}</h1>
</ion-card-title>
<br>
<div echarts [options]="countryOptions[country]" class="demo-chart h-full w-full min-w-full"></div>
<div echarts [options]="countryOptions[country]" class="demo-chart h-full w-full min-w-full"></div>
</ion-card>

</ion-col>
</ion-row>
</ion-grid>

<ion-fab class="m-2 z-10" vertical="bottom" horizontal="end" slot="fixed" (click)="toggleAiModal()">
<ion-avatar class="bg-purple-300 p-4">
<ion-icon class="w-full h-full" name="chatbubble-outline"></ion-icon>
</ion-avatar>
</ion-fab>





</ion-content>





<div class="fixed bottom-0 right-0 h-full w-full bg-black bg-opacity-50 z-10 r" id="ai-modal" [class.hidden]="!aiModal">
<div class="h-2/3 md:h-1/2 lg:h-1/2 w-full md:w-1/3 lg:w-1/3 bg-purple-300 p-4 absolute right-0 bottom-0 z-50 flex flex-col rounded-tl-2xl rounded-tr-2xl">

<div class="w-full bg-purple-400 flex flex-row justify-center items-center p-2 mb-2 rounded-3xl" >
<div class="flex flex-row justify-center items-center bg-purple-300 w-full rounded-3xl">
<ion-title class="text-white">DevProbe AI</ion-title>
</div>
<div class="m-1"></div>
<div class="flex flex-row justify-center items-center bg-purple-300 w-1/6 h-full rounded-3xl" (click)="toggleAiModal()">
<ion-icon name="close-outline"></ion-icon>
</div>
</div>

<!-- El contenedor de mensajes con scroll -->
<div class="flex-grow overflow-y-auto bg-purple-200 p-2 rounded-3xl">
<!-- Mensajes de ejemplo -->
<div class="rounded-3xl bg-purple-400 w-2/3 m-1">
<p class="text-white p-4">DevProbe AI</p>
</div>
<div class="rounded-3xl bg-purple-600 w-2/3 m-1 ml-auto">
<p class="text-white p-4">my chat ajsjsajd jasjdjsad jas djasdnasjdjsa</p>
</div>
<!-- Más mensajes de ejemplo... -->
<div class="rounded-3xl bg-purple-400 w-2/3 m-1">
<p class="text-white p-4">DevProbe AI</p>
</div>
<div class="rounded-3xl bg-purple-600 w-2/3 m-1 ml-auto">
<p class="text-white p-4">my chat ajsjsajd jasjdjsad jas djasdnasjdjsa</p>
</div>
<div class="rounded-3xl bg-purple-400 w-2/3 m-1">
<p class="text-white p-4">DevProbe AI</p>
</div>
<div class="rounded-3xl bg-purple-600 w-2/3 m-1 ml-auto">
<p class="text-white p-4">my chat ajsjsajd jasjdjsad jas djasdnasjdjsa</p>
</div>
<div class="rounded-3xl bg-purple-400 w-2/3 m-1">
<p class="text-white p-4">DevProbe AI</p>
</div>
<div class="rounded-3xl bg-purple-600 w-2/3 m-1 ml-auto">
<p class="text-white p-4">my chat ajsjsajd jasjdjsad jas djasdnasjdjsa</p>
</div>
<div class="rounded-3xl bg-purple-400 w-2/3 m-1">
<p class="text-white p-4">DevProbe AI</p>
</div>
<div class="rounded-3xl bg-purple-600 w-2/3 m-1 ml-auto">
<p class="text-white p-4">my chat ajsjsajd jasjdjsad jas djasdnasjdjsa</p>
</div>
<div class="rounded-3xl bg-purple-400 w-2/3 m-1">
<p class="text-white p-4">DevProbe AI</p>
</div>
<div class="rounded-3xl bg-purple-600 w-2/3 m-1 ml-auto">
<p class="text-white p-4">my chat ajsjsajd jasjdjsad jas djasdnasjdjsa</p>
</div>
<!-- Fin de mensajes de ejemplo -->
</div>

<!-- Input y botón en la parte inferior -->
<div class="flex flex-row mt-2 p-2">
<ion-textarea placeholder="Ask..." class="flex-grow bg-purple-600 rounded-2xl"></ion-textarea>
<div class="m-1"></div>
<div class="w-1/3 bg-purple-800 rounded-3xl flex flex-row justify-center items-center hover:bg-purple-400">
<span class="text-white">Send</span>
</div>
</div>
</div>
</div>
114 changes: 84 additions & 30 deletions src/app/pages/graph-trace/graph-trace.page.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
import { Component, OnInit } from '@angular/core';
import type {EChartsOption} from "echarts";
import {User} from "../../interfaces/user";
import {RipeService} from "../../services/ripe.service";
import {ActivatedRoute} from "@angular/router";
import {RipeTraceService} from "../../services/ripe-trace.service";
import {refresh} from "ionicons/icons";
import type { EChartsOption } from "echarts";
import { User } from "../../interfaces/user";
import { RipeService } from "../../services/ripe.service";
import { ActivatedRoute } from "@angular/router";
import { RipeTraceService } from "../../services/ripe-trace.service";
import { refresh } from "ionicons/icons";

/**
* Component for displaying graph trace data.
*/
@Component({
selector: 'app-graph-trace',
templateUrl: './graph-trace.page.html',
Expand All @@ -21,19 +24,29 @@ export class GraphTracePage implements OnInit {
countries: string[] = [];
countryOptions: { [key: string]: EChartsOption } = {};

aiModal: boolean = false;

/**
* Constructor for GraphTracePage.
* @param ripeService - Service for fetching trace data.
* @param route - Activated route for accessing query parameters.
*/
constructor(
private ripeService: RipeTraceService,
private route: ActivatedRoute
) {}

/**
* Lifecycle hook that is called when the component is about to enter and become active.
* Fetches user data and trace results, then processes the data.
*/
async ionViewWillEnter() {

// get parameters from the URL
// Get parameters from the URL
this.route.queryParams.subscribe(params => {
this.productObjective = params['product'];
});

// get the user
// Get the user from local storage
const userString = localStorage.getItem('user');
if (!userString) {
return;
Expand All @@ -43,6 +56,7 @@ export class GraphTracePage implements OnInit {

this.data = [];

// Fetch and process trace results
this.getResultsHistoryforRtt().then(() => {
this.groupByDate().then(() => {
this.groupByCountry().then(() => {
Expand All @@ -51,12 +65,19 @@ export class GraphTracePage implements OnInit {
});
});
});




}

/**
* Fetches the history results for RTT (Round Trip Time) and processes the data.
*/
async getResultsHistoryforRtt() {
await this.ripeService.getHistoryResults(this.orgName, this.productObjective).then(r => {
for (let i = 0; i < r.length; i++) {
// split the id
// Split the id
let id = r[i].id.split('-');
let idString = id[1];

Expand All @@ -82,30 +103,36 @@ export class GraphTracePage implements OnInit {
});
}

async groupByDate() {
// create a dictionary to group the data by date
let groupedData: any = {};
for (let i = 0; i < this.data.length; i++) {
let date = this.data[i].date;
if (!groupedData[date]) {
groupedData[date] = [];
/**
* Groups the data by date.
*/
async groupByDate() {
// Create a dictionary to group the data by date
let groupedData: any = {};
for (let i = 0; i < this.data.length; i++) {
let date = this.data[i].date;
if (!groupedData[date]) {
groupedData[date] = [];
}
groupedData[date].push(...this.data[i]['data']);
}
groupedData[date].push(...this.data[i]['data']);
}

// sort the dates
const sortedDates = Object.keys(groupedData).sort((a, b) => new Date(a).getTime() - new Date(b).getTime());
// Sort the dates
const sortedDates = Object.keys(groupedData).sort((a, b) => new Date(a).getTime() - new Date(b).getTime());

// create a new object with sorted dates
let sortedGroupedData: any = {};
for (let date of sortedDates) {
sortedGroupedData[date] = groupedData[date];
}
// Create a new object with sorted dates
let sortedGroupedData: any = {};
for (let date of sortedDates) {
sortedGroupedData[date] = groupedData[date];
}

this.data = sortedGroupedData;
console.log(this.data);
}
this.data = sortedGroupedData;
console.log(this.data);
}

/**
* Groups the data by country.
*/
async groupByCountry() {
let groupedData: any = {};
for (let date in this.data) {
Expand All @@ -115,7 +142,7 @@ async groupByDate() {
}
for (let i = 0; i < data.length; i++) {
let country = data[i].src_country;
//if the country == No country found, then ignore
// If the country is 'No country found', then ignore
if (country === 'No country found') {
continue;
}
Expand All @@ -129,6 +156,9 @@ async groupByDate() {
console.log(this.data);
}

/**
* Populates the list of countries from the data.
*/
async populateCountries() {
const countriesSet = new Set<string>();
for (let date in this.data) {
Expand All @@ -140,6 +170,10 @@ async groupByDate() {
console.log(this.countries);
}

/**
* Generates a random color in hexadecimal format.
* @returns A random color string.
*/
getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
Expand All @@ -149,6 +183,9 @@ async groupByDate() {
return color;
}

/**
* Generates ECharts options for each country.
*/
generateCountryOptions() {
for (let country of this.countries) {
const xAxisData: string[] = [];
Expand Down Expand Up @@ -208,11 +245,28 @@ async groupByDate() {
}
}

/**
* Refreshes the page by reloading the window.
*/
refresh() {
window.location.reload();
}

/**
* Lifecycle hook that is called after Angular has initialized all data-bound properties.
*/
ngOnInit() {
}

ai(country: string) {
console.log(country);
}

/**
* Toggles the AI modal.
*/
toggleAiModal() {
this.aiModal = !this.aiModal;
}

}
Loading

0 comments on commit 79e6336

Please sign in to comment.