Webshark wiregasm devel

.github/workflows/wiregasm.yml

@@ -0,0 +1,46 @@
+name: Build and Publish Wiregasm
+
+on:
+  push:
+    branches:
+      - webshark-wiregasm-devel
+  workflow_dispatch:
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          ref: webshark-wiregasm-devel
+
+      - name: Generate Dockerfile
+        run: |
+          cat <<EOF > Dockerfile
+          FROM node:20-alpine
+          WORKDIR /app
+          COPY . .
+          RUN npm install
+          RUN npm run build
+          EXPOSE 8003
+          CMD ["npm", "run", "start"]
+          EOF
+
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          push: true
+          tags: ghcr.io/qxip/webshark-ui:wasm

angular.json

@@ -28,7 +28,8 @@
             "assets": [
               "src/favicon.ico",
               "src/assets",
-              "src/ffmpeg"
+              "src/ffmpeg",
+              "src/wiregasm-lib"
 
             ],
             "styles": [
@@ -38,8 +39,11 @@
             "scripts": [
               "src/enable-threads.js",
               "src/ffmpeg/ffmpeg.min.js",
-              "src/ffmpeg-init.js"
-            ]
+              "src/ffmpeg-init.js",
+              "src/wiregasm-lib/wiregasm.js",
+              "src/wiregasm-lib/pako.js"
+            ],
+            "webWorkerTsConfig": "tsconfig.worker.json"
           },
           "configurations": {
             "production": {
@@ -54,7 +58,7 @@
                 {
                   "type": "initial",
                   "maximumWarning": "5500kb",
-                  "maximumError": "10mb"
+                  "maximumError": "15mb"
                 },
                 {
                   "type": "anyComponentStyle",
@@ -69,7 +73,7 @@
                 {
                   "type": "initial",
                   "maximumWarning": "5500kb",
-                  "maximumError": "10mb"
+                  "maximumError": "15mb"
                 },
                 {
                   "type": "anyComponentStyle",
@@ -123,10 +127,14 @@
               "@angular/material/prebuilt-themes/indigo-pink.css",
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "webWorkerTsConfig": "tsconfig.worker.json"
           }
         }
       }
     }
+  },
+  "cli": {
+    "analytics": "62c37ccd-5abf-43c9-b55d-6eac0b7d97f7"
   }
 }

src/app/app.component.scss

@@ -0,0 +1,65 @@
+.init-status-wrapper {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 999;
+  backdrop-filter: blur(10px);
+  transition: all 0.6s;
+}
+
+.progress-upload {
+  position: absolute;
+  background: white;
+  padding: 2rem 4rem;
+  z-index: 999;
+  border-radius: 0.5rem;
+  box-shadow: 2px 1px 20px -7px #000;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto;
+  display: block;
+  width: 450px;
+  height: 100px;
+  text-align: center;
+  overflow: hidden;
+
+  .progress-bar {
+    background-color: rgba(100, 100, 255, 0.5);
+    position: absolute;
+    width: 0%;
+    height: 100px;
+    left: 0;
+    top: 0;
+    backdrop-filter: invert(1);
+  }
+}
+
+.init-status-wrapper.ready {
+  backdrop-filter: blur(0px);
+}
+
+.init-status {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  width: 400px;
+  min-height: 50px;
+  height: 400px;
+  padding: 2rem;
+  z-index: 999;
+  background-color: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 0 15px #bbb;
+}
+
+.init-status>div {
+  text-align: left;
+  font-size: 16pt;
+  height: 50px;
+}

src/app/app.component.ts

@@ -1,6 +1,48 @@
-import { Component } from '@angular/core';
+import { Component, Inject } from '@angular/core';
+import { WiregasmService } from './services/wiregasm.service';
 @Component({
   selector: 'app-root',
-  template: `<router-outlet></router-outlet>`
+  template: `
+  <div class="progress-upload" *ngIf=" parsingProgress != 100"
+
+  >
+    <h1 style="font-size: 24pt;">
+      Parsing file: {{ parsingProgress.toFixed(2) }}%
+    </h1>
+    <div class="progress-bar" [style.width.%]="parsingProgress"></div>
+  </div>
+  <div class="init-status-wrapper" [ngClass]="{ready: isReady}" [hidden]="done">
+    <div class="init-status">
+      <h1><strong>Wiregasm:</strong></h1>
+      <div *ngFor="let item of msg">{{item}}</div>
+    </div>
+  </div>
+  <router-outlet></router-outlet>`,
+  styleUrls: ['./app.component.scss'],
+
 })
-export class AppComponent { }
+export class AppComponent {
+  msg: string[] = [];
+  done = false;
+  isReady = false;
+  parsingProgress = 100;
+  constructor(private wiregasmService: WiregasmService) {
+    this.wiregasmService.listen().subscribe(data => {
+      console.log('wiregasmService.listen', data);
+      if (data?.isParsing) {
+        this.parsingProgress = +data?.parsingProgress?.toFixed(2);
+      }
+      if (data?.status) {
+        this.msg.push(data.status)
+      }
+      if (data?.type === 'init') {
+        this.isReady = true;
+        setTimeout(() => {
+
+          this.done = true;
+        }, 1000)
+      }
+    })
+  }
+
+}

src/app/components/Home/Home.component.html

@@ -4,14 +4,14 @@
 
       <div style="padding-right: 1rem">WebShark</div>
       <!-- <app-menu></app-menu> -->
-      <button
+      <!-- <button
         mat-raised-button
         *ngIf="captureFile"
         (click)="downloadFile(captureFile)"
       >
         <mat-icon class="mat-18">download</mat-icon>
         {{ captureFile }}
-      </button>
+      </button> -->
       <span style="flex: 1"></span>
       <flexible-chart
         chart
@@ -118,7 +118,7 @@
       </button>
     </mat-toolbar-row>
   </mat-toolbar>
-  <mat-drawer-container class="example-container" autosize>
+  <mat-drawer-container class="example-container"  style="flex: 1;" autosize>
     <mat-drawer #drawer class="example-sidenav" mode="side" [opened]="false">
       <app-files-page *ngIf="!isKIOSK" [isFile]="!isFileOnLink"></app-files-page>
     </mat-drawer>
@@ -138,5 +138,5 @@
   [title]="dialog.name || tapPage.title || '. . .'"
   (close)="onClose(idx)"
 >
-  <tap-page [taplink]="dialog.link" #tapPage></tap-page>
+  <tap-page [taplink]="dialog" #tapPage></tap-page>
 </modal-resizable>

src/app/components/Home/Home.component.ts

@@ -2,6 +2,7 @@ import { ModalResizableService } from './../controls/modal-resizable/modal-resiz
 import { WebSharkDataService } from '@app/services/web-shark-data.service';
 import { Component, OnInit } from '@angular/core';
 import { environment } from '@environments/environment';
+import { WiregasmService } from '@app/services/wiregasm.service';
 
 
 declare const transcode: Function;
@@ -18,14 +19,14 @@ export class HomeComponent implements OnInit {
   dialogs: any[] = [];
   framePosition: any = ['vertical', 'horizontal'];
   constructor(
-    private webSharkDataService: WebSharkDataService,
+    private webSharkDataService: WiregasmService,
     private modalResizableService: ModalResizableService
   ) {
     this.isFileOnLink = !location.hash;
     this.files = this.isFileOnLink;
     this.modalResizableService.event.subscribe(({ open, data }) => {
       if (open) {
-        this.dialogs.push(data)
+        this.dialogs.push(data.link)
       }
     });
 
@@ -68,7 +69,7 @@ export class HomeComponent implements OnInit {
     this.dialogs = this.dialogs.filter((i, k) => k !== idx);
   }
   get captureFile() {
-    return this.webSharkDataService.getCapture();
+    return 'file.pcap' //this.webSharkDataService.getCapture();
   }
 
   downloadFile(filename: string) {

src/app/components/controls/custom-table/custom-table.component.html

@@ -1,13 +1,9 @@
 <div
-  class="mat-elevation-z8"
-  style="
-    display: flex;
-    flex-direction: column;
-  "
+  style="display: flex; flex-direction: column; height: 100%;"
 >
   <cdk-virtual-scroll-viewport
     [tvsItemSize]="30"
-    style="height: 100%; min-height: 50vh"
+    style="height: 100%; min-height: 100%"
   >
     <table
       mat-table
@@ -37,7 +33,7 @@
             </div>
           </th>
           <td *matCellDef="let element">
-            {{ element[getKeyBy(item)] }}
+            {{ element?.[item] }}
           </td>
         </ng-container>
       </ng-container>
@@ -47,14 +43,9 @@
         <tr
           mat-row
           *matRowDef="let row; index as i; columns: columnsValue"
-          [style.background-color]="
-            getSelected(i) ? '#3f51b5' : row.bg && '#' + row.bg
-          "
-          [style.color]="
-            getSelected(i)
-              ? '#fff !important'
-              : row.fg && '#' + row.fg + ' !important'
-          "
+          [style.background-color]="row?.bg && '#' + row.bg"
+          [style.color]="row?.fg && '#' + row.fg + ' !important'"
+          [ngClass]="{itemSelected: getSelected(i)} "
           (click)="onRowClick(row, i, $event)"
           (dblclick)="onRowDblClick(row, i, $event)"
         ></tr>

src/app/components/controls/custom-table/custom-table.component.scss

@@ -34,7 +34,10 @@ table.this-table {
     background-color: #ffffff;
   }
 }
-
+.itemSelected {
+  background-color: #3f51b5 !important;
+  color: #fff !important;
+}
 .search-input {
   border: 0;
   background-color: $bgColor;

src/app/components/controls/custom-table/custom-table.component.ts

@@ -64,6 +64,7 @@ export class CustomTableComponent {
   onRowClick(row: any, indexItem: any, event: any) {
     this.setSelected(indexItem);
     this.rowClick.emit({ row, indexItem, event });
+    this.cdr.detectChanges();
   }
   onRowDblClick(row: any, indexItem: any, event: any) {
     this.rowDblClick.emit({ row, indexItem, event });

src/app/components/controls/flexible-chart/flexible-chart.component.ts

@@ -138,6 +138,9 @@ export class FlexibleChartComponent implements OnInit, AfterViewInit, OnDestroy
   сalcRangeByData(): any[] {
     const pudding = { x: 10, y: 0 }; // px
     const [firstData] = this.exampleData || [{ data: [] }];
+    if(!firstData?.data) {
+      return [0,0];
+    }
     const data = this.formattedData(firstData.data);
     const { offsetWidth } = this.canvas.nativeElement;
     const stepX = ((offsetWidth - pudding.x * 2) / (data.length));
@@ -149,6 +152,9 @@ export class FlexibleChartComponent implements OnInit, AfterViewInit, OnDestroy
   getIndexOfData() {
     const pudding = { x: 10, y: 0 }; // px
     const [firstData] = this.exampleData;
+    if(!firstData?.data) {
+      return 0;
+    }
     const data = this.formattedData(firstData.data);
     const { offsetWidth } = this.canvas.nativeElement;
     const stepX = ((offsetWidth - pudding.x * 2) / (data.length));