@tuki-io/tuki-widgets 0.0.72 → 0.0.74

package/projects/tuki/widgets/di2mt/widgets/site-upgrade/site-upgrade-data-table/site-upgrade-data-table.component.ts

@@ -0,0 +1,362 @@
+import { SelectionModel } from "@angular/cdk/collections";
+import { Component, OnInit, OnDestroy, inject, Input, ViewEncapsulation } from "@angular/core";
+import { MatTableDataSource } from "@angular/material/table";
+import { TableColumn } from "../../../shared/types/data-table";
+import { TableFilter } from "../../../shared/types/table/filter";
+import { SiteUpgradeRecord } from "../types/user-upgrade";
+import { UpgradeOverviewService } from "../../upgrade-overview/upgrade-overview.service";
+import { of, Subject, Subscription } from "rxjs";
+import { takeUntil } from "rxjs";
+import { BatchStatusDTO, SiteUpgradeService, STATUSES } from "../site-upgrade.service";
+import { STATUS_ENTRIES } from "../../../shared/types/constants";
+import { APIService } from "../../../shared/services/api.service";
+import { catchError } from 'rxjs/operators';
+
+@Component({
+  selector: 'tk-site-upgrade-data-table',
+  templateUrl: './site-upgrade-data-table.component.html',
+  styleUrls: ['./site-upgrade-data-table.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class SiteUpgradeDataTableComponent implements OnInit, OnDestroy {
+  readonly siteUpgradeService = inject(SiteUpgradeService);
+  private readonly apiService = inject(APIService);
+  private sites: SiteUpgradeRecord[] = [];
+  readonly destroy$ = new Subject<void>();
+  readonly STATUS_ENTRIES = STATUS_ENTRIES
+
+  @Input() token!: string;
+  @Input() customerId!: string;
+
+  columns!: TableColumn[];
+  dataPending = false;
+  data!: MatTableDataSource<any>;
+  displayedColumns: string[] = ['site', 'ready users', 'upgraded users', 'location mapping', 'pstn trunk', 'site upgrade status', 'progressBar', 'actions', 'userUpgradeLoader'];
+  selection = new SelectionModel<any>(true, []);
+  filters: TableFilter[] = [];
+  private activeFilters: { [key: string]: any } = {};
+  private subscriptions = new Subscription();
+  private collectingBatchInterval: any;
+
+  statusCounts: any = {};
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+    this.dataPending = true;
+    this.apiService.token = this.token;
+    this.siteUpgradeService.customerId = this.customerId;
+
+    const subsc1 = this.siteUpgradeService.getSiteUpgradeRecords()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((records: SiteUpgradeRecord[]) => {
+        this.data = new MatTableDataSource<SiteUpgradeRecord>(records);
+        this.sites = records.slice();
+        this.dataPending = false;
+        this.setupCustomFilter();
+        this.initializeFilters(records);
+      });
+    this.subscriptions.add(subsc1);
+
+    const subsc2 = this.siteUpgradeService.getSiteUpgradeStatusCounts()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((statusCounts) => {
+        this.statusCounts['Ready'] = statusCounts['READY'] || 0;
+        this.statusCounts['Not Ready'] = statusCounts['NOT_READY'] || 0;
+        this.statusCounts['Completed'] = statusCounts['COMPLETED'] || 0;
+        this.statusCounts['Failed'] = statusCounts['FAILED'] || 0;
+      });
+    this.subscriptions.add(subsc2);
+
+    const subsc3 = this.siteUpgradeService.siteUpdateStatusEvent
+      .subscribe((updatedStatuses: BatchStatusDTO[]) => {
+        this.handleCheckBatchStatusResponse(updatedStatuses);
+      });
+    this.subscriptions.add(subsc3);
+  }
+
+  onSiteMigration(site: SiteUpgradeRecord): void {
+    site.pending = true;
+    site.isProgressBarAvailable = true;
+    site.isMigrationInProgress = true;
+    const subsc = this.siteUpgradeService.migrateSite(site.siteId)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((records: SiteUpgradeRecord[]) => {
+        this.runMigrationProgress(site);
+      });
+    this.subscriptions.add(subsc);
+
+  }
+
+  private runMigrationProgress(site: SiteUpgradeRecord): void {
+    this.updateMigrationProgress(site);
+
+    site.interval = setInterval(() => {
+      this.updateMigrationProgress(site);
+    }, 10000);
+
+  }
+
+  private updateMigrationProgress(site: SiteUpgradeRecord): void {
+    if (!site || !site.isMigrationInProgress) {
+      return;
+    }
+    this.siteUpgradeService.getMigrationBatchesStatuses()
+      .subscribe(
+        () => { },
+        () => {
+          this.resetMigrationProgress(site, 'FAILED');
+        }
+      );
+  }
+
+  private resetMigrationProgress(site: SiteUpgradeRecord, status?: string): void {
+    site.isMigrationInProgress = false;
+    site.pending = false;
+    site.isProgressBarAvailable = false;
+    if (site.interval) {
+      clearInterval(site.interval);
+    }
+    if (status) {
+      site.status = status;
+    }
+  }
+
+  public onCollect(site: SiteUpgradeRecord): void {
+    site.pending = true;
+    site.status = STATUSES.COLLECTING;
+    // const ind =
+    const subscription =
+      this.siteUpgradeService.collectSiteCache(Number(site.siteId), 'webex')
+        .subscribe({
+          error: () => site.pending = false
+        });
+    this.subscriptions.add(subscription);
+    this.runBatchCheckStatus();
+    /*setTimeout(() => {
+      this.initCollectInterval(site);
+    }, 500);*/
+  }
+
+  private initCollectInterval(site: SiteUpgradeRecord): void {
+    if (!site.interval && !site.initPending) {
+      const ind = this.getSiteIndex(site);
+      if (this.sites[ind]) {
+        this.sites[ind].pending = true;
+      }
+
+      /*this.getCUCMListAlreadyInCollectWebexCache(batch);
+      this.getSiteListForCollectAndBuildWebexCache(batch);
+
+      site.interval = setInterval(() => {
+        this.getCUCMListAlreadyInCollectWebexCache(batch);
+        this.getSiteListForCollectAndBuildWebexCache(batch);
+
+      }, 10000);*/
+    }
+  }
+
+  private runBatchCheckStatus(): void {
+    if (this.sites && this.sites.length) {
+      const collectingBatchesIds = this.sites
+        .filter(site => site.status && site.status === STATUSES.COLLECTING)
+        .map(site => site.siteId);
+
+      if (collectingBatchesIds.length > 0) {
+        this.checkBatchStatus(collectingBatchesIds);
+        this.collectingBatchInterval = setInterval(() => {
+          this.checkBatchStatus(collectingBatchesIds);
+        }, 10000);
+      }
+    }
+  }
+
+  private checkBatchStatus(batchIds: string[]): void {
+    const subsc = this.siteUpgradeService.getBatchesStatuses(batchIds)
+      .pipe(
+        takeUntil(this.destroy$),
+        catchError(() => {
+          clearInterval(this.collectingBatchInterval);
+          return of([]);
+        })
+      ).subscribe((updatedStatuses: BatchStatusDTO[]) => {
+        this.handleCheckBatchStatusResponse(updatedStatuses);
+      });
+    this.subscriptions.add(subsc);
+  }
+
+  private handleCheckBatchStatusResponse(updatedStatuses: BatchStatusDTO[]): void {
+    if (updatedStatuses && updatedStatuses.length && this.sites && this.sites.length) {
+      updatedStatuses.forEach(updatedStatus => {
+        const ind = this.sites.findIndex(batch => batch.siteId === updatedStatus.id);
+        if (ind > -1 && this.sites[ind]) {
+          this.sites[ind].status = updatedStatus.status;
+        }
+      });
+    } else {
+      if (this.collectingBatchInterval) {
+        clearInterval(this.collectingBatchInterval);
+      }
+    }
+  }
+
+  private getSiteIndex(site: SiteUpgradeRecord): number {
+    if (this.sites && this.sites.length) {
+      return this.sites.findIndex(siteItem => siteItem.siteId === site.siteId);
+    }
+    return -1;
+  }
+
+  private initializeFilters(records: SiteUpgradeRecord[]): void {
+    // Extract unique sites from actual data
+    const uniqueSites = [...new Set(records.map(record => record.siteName))];
+    const siteOptions = uniqueSites.map(site => ({
+      label: site,
+      value: site.toLowerCase().replace(/\s+/g, '-')
+    }));
+
+    // Extract unique statuses from actual data
+    const uniqueStatuses = [...new Set(records.map(record => record.upgradeStatus))];
+    const statusOptions = uniqueStatuses.map(status => ({
+      label: STATUS_ENTRIES[status],
+      value: status.toLowerCase().replace(/\s+/g, '-')
+    }));
+
+    this.filters = [
+      {
+        id: 'sites',
+        type: 'select',
+        columnKey: 'Site',
+        placeholder: 'Sites',
+        options: siteOptions
+      },
+      {
+        id: 'status',
+        type: 'select',
+        columnKey: 'Site Upgrade Status',
+        placeholder: 'Upgrade Status',
+        options: statusOptions
+      }
+    ];
+  }
+
+  onFilter(filterEvent: { key: string, value: any }) {
+    const {key, value} = filterEvent;
+
+    let filterValue: any;
+    if (value && value.value !== undefined) {
+      filterValue = value.value;
+    } else if (value && value.target) {
+      filterValue = value.target.value;
+    } else {
+      filterValue = value;
+    }
+
+    // Handle "All" option or empty values - remove the filter
+    if (filterValue === 'all' || !filterValue || filterValue === '') {
+      delete this.activeFilters[key];
+    } else {
+      this.activeFilters[key] = filterValue;
+    }
+
+    this.applyFilters();
+  }
+
+  private setupCustomFilter() {
+    this.data.filterPredicate = (data: any, filter: string) => {
+      const filters = JSON.parse(filter || '{}');
+
+      for (const [key, value] of Object.entries(filters)) {
+        if (!value) continue;
+
+        switch (key) {
+          case 'Site':
+            if (data.siteName !== this.getSiteNameFromValue(value as string)) {
+              return false;
+            }
+            break;
+          case 'Site Upgrade Status':
+            if (!this.matchesUpgradeStatus(data.upgradeStatus, value as string)) {
+              return false;
+            }
+            break;
+        }
+      }
+
+      return true;
+    };
+  }
+
+  private applyFilters() {
+    this.data.filter = JSON.stringify(this.activeFilters);
+  }
+
+  private getSiteNameFromValue(value: string): string {
+    // Since we're now using actual site names, just convert back from slug format
+    return value.split('-').map(word =>
+      word.charAt(0).toUpperCase() + word.slice(1)
+    ).join(' ');
+  }
+
+  private matchesUpgradeStatus(status: string, filterValue: string): boolean {
+    // Handle direct status matching for cleaner implementation
+    return status.toLowerCase().replace(/\s+/g, '-') === filterValue.toLowerCase();
+  }
+
+  get filteredDataCount(): number {
+    return this.data?.filteredData?.length || 0;
+  }
+
+  /** Whether the number of selected elements matches the total number of rows. */
+  isAllSelected() {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.data?.data.length || 0;
+    return numSelected === numRows;
+  }
+
+  /** Selects all rows if they are not all selected; otherwise clear selection. */
+  masterToggle() {
+    this.isAllSelected() ?
+      this.selection.clear() :
+      this.data?.data.forEach(row => this.selection.select(row));
+  }
+
+  getLocationMappingClass(locationMapping: boolean): string {
+    return locationMapping ? 'success' : 'error';
+  }
+
+  getSiteUpgradeStatusClass(status: string): string {
+    switch (status.toLowerCase()) {
+      case 'ready':
+        return 'ready';
+      case 'partial ready':
+        return 'partial-ready';
+      case 'completed':
+        return 'completed';
+      case 'failed':
+        return 'failed';
+      case 'not ready':
+        return 'not-ready';
+      default:
+        return 'not-ready';
+    }
+  }
+
+  upgradeSite(site: SiteUpgradeRecord) {
+    this.siteUpgradeService.upgradeSite(site);
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+    this.dataPending = false;
+
+    if (this.collectingBatchInterval) {
+      clearInterval(this.collectingBatchInterval);
+    }
+    if (this.subscriptions) {
+      this.subscriptions.unsubscribe();
+    }
+  }
+}

package/projects/tuki/widgets/di2mt/widgets/site-upgrade/site-upgrade.module.ts

@@ -0,0 +1,33 @@
+import { NgModule } from "@angular/core";
+import { SiteUpgradeDataTableComponent } from "./site-upgrade-data-table/site-upgrade-data-table.component";
+import { CommonModule } from "@angular/common";
+import { MatTableModule } from "@angular/material/table";
+import { MatIconModule } from "@angular/material/icon";
+import { MatButtonModule } from "@angular/material/button";
+import { SharedModule } from "../../shared/shared.module";
+import { MatMenuModule } from '@angular/material/menu';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { ProgressBarComponent } from './progress-bar/progress-bar.component';
+
+@NgModule({
+  declarations: [
+    SiteUpgradeDataTableComponent,
+    ProgressBarComponent
+  ],
+  imports: [
+    CommonModule,
+    SharedModule,
+    MatTableModule,
+    MatIconModule,
+    MatMenuModule,
+    MatButtonModule,
+    MatProgressSpinnerModule
+
+  ],
+  exports: [
+    SiteUpgradeDataTableComponent,
+    ProgressBarComponent
+  ]
+})
+export class SiteUpgradeModule {
+}

package/projects/tuki/widgets/di2mt/widgets/site-upgrade/site-upgrade.service.ts

@@ -0,0 +1,102 @@
+import { inject, Injectable } from "@angular/core";
+import { map, Observable, Subject } from "rxjs";
+import { SiteUpgradeRecord } from "./types/user-upgrade";
+import { API } from "../../api/api.endpoints";
+import { UserUpgradeRecord } from "../user-upgrade/types/user-upgrade";
+import { APIService } from "../../shared/services/api.service";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SiteUpgradeService {
+  siteUpdateStatusEvent = new Subject<BatchStatusDTO[]>();
+  private apiService = inject(APIService);
+  customerId!: string;
+
+  getSiteUpgradeStatusCounts(): Observable<any> {
+    return this.apiService.fetch(
+      API.SITE_UPGRADE.GET_SITES_UPGRADE_STATUS_COUNTS.replace(':customerId', this.customerId)
+    );
+  }
+
+  getSiteUpgradeRecords(): Observable<SiteUpgradeRecord[]> {
+    return this.apiService.fetch(
+      API.SITE_UPGRADE.GET_SITES_UPGRADE_DATA.replace(':customerId', this.customerId)
+    ).pipe(map((resp) => {
+      return resp.content.map((record: any) => ({
+        siteId: record.siteId,
+        siteName: record.siteName,
+        totalUsers: record.totalUsers,
+        totalReadyUsers: record.readyUsers,
+        totalNotReadyUsers: record.notReadyUsers,
+        totalUpgradedUsers: record.totalUpgradedUsers,
+        totalFailedUsers: record.totalFailedToUpgradeUsers,
+        locationMapping: record.locationMappingStatus,
+        PSTNTrunk: record.pstnTrunkStatus,
+        upgradeStatus: record.siteUpgradeStatus
+      } as SiteUpgradeRecord));
+    }));
+  }
+
+  collectSiteCache(siteId: number, migrationType: string = 'webex') {
+    return this.apiService.post(
+      API.SITE_UPGRADE.WEBEX_CACHE_COLLECTION
+        .replace(':siteId', String(siteId))
+        .replace(':migrationType', migrationType),
+      {}
+    )
+  }
+
+  migrateSite(siteId: string): Observable<any> {
+    return this.apiService.post(
+      API.SITE_UPGRADE.MIGRATE_SITE.replace(':siteId', String(siteId)),
+      {}
+    )
+  }
+
+  getBatchesStatuses(batchIds: string[]): Observable<BatchStatusDTO[]> {
+    return this.apiService.post(
+      API.SITE_UPGRADE.WEBEX_BATCH_STATUS
+        .replace(':customerId', this.customerId),
+      batchIds,
+      false
+    )
+      .pipe(map((result: BatchStatusDTO[]) => {
+        this.siteUpdateStatusEvent.next(result);
+        return result;
+      }))
+  }
+
+  getMigrationBatchesStatuses(): Observable<BatchStatusDTO[]> {
+    return this.apiService.fetch(API.SITE_UPGRADE.BATCH_STATUS.replace(':customerId', this.customerId))
+      /*.pipe(map((result: BatchStatusDTO[]) => {
+        this.siteUpdateStatusEvent.next(result);
+        return result;
+      }))*/
+  }
+
+  // TODO: Impl the site upgrade logic here
+  upgradeSite(site: SiteUpgradeRecord): void {
+    const customerId = site.customerId;
+    const siteId = site.siteId;
+  }
+}
+
+export interface BatchStatusDTO {
+  id: string;
+  status: string;
+  progress: string;
+  migErrorsCount: string;
+}
+
+export const STATUSES = {
+  COMPLETED: 'Completed',
+  NEW: 'New',
+  IN_PROGRESS: 'In Progress',
+  FAILED_IN_ERROR: 'Failed-in error',
+  FAILED: 'Failed',
+  FAILED_WITH_RETRY: 'Failed with Retry',
+  COLLECTING: 'Collecting',
+  FAILED_COLLECTING: 'Failed on collecting',
+  WAITING_FOR_REVIEW: 'Waiting for review'
+};

package/projects/tuki/widgets/di2mt/widgets/site-upgrade/types/user-upgrade.ts

@@ -0,0 +1,22 @@
+import { Status, UpgradeStatus } from "../../../shared/types/constants";
+
+export interface SiteUpgradeRecord {
+  id: string;
+  customerId: string;
+  siteId: string;
+  siteName: string;
+  totalUsers: number;
+  totalReadyUsers: number;
+  totalNotReadyUsers: number;
+  totalUpgradedUsers: number;
+  totalFailedUsers: number;
+  locationMapping: boolean;
+  PSTNTrunk: boolean;
+  upgradeStatus: UpgradeStatus;
+  pending?: boolean;
+  initPending?: boolean;
+  interval?: any;
+  status?: string;
+  isProgressBarAvailable?: boolean;
+  isMigrationInProgress?: boolean;
+};

package/{di2mt → projects/tuki/widgets/di2mt}/widgets/user-upgrade/types/user-upgrade.ts

@@ -15,4 +15,5 @@ export interface UserUpgradeRecord {
     dialPlanStatus: Status;
     dependenciesStatus: DependenciesStatus;
     upgradeStatus: Status;
-};
+    pending?: boolean;
+};

package/{di2mt → projects/tuki/widgets/di2mt}/widgets/user-upgrade/user-upgrade-data-table/user-upgrade-data-table.component.html

@@ -1,4 +1,11 @@
-<div class="wrapper">
+<div *ngIf="dataPending" class="overlay">
+  <mat-progress-spinner
+    class="page-spinner"
+    mode="indeterminate"
+    [diameter]="120"></mat-progress-spinner>
+</div>
+
+<div id="userUpgradeDataTable" class="wrapper">
     <div class="user-upgrade-status-wrapper">
         <tk-summary-card [description]="'Users are ready to upgrade'" [value]="statusCounts['Ready']"></tk-summary-card>
         <tk-summary-card [description]="'Users are not ready'" [value]="statusCounts['Not Ready']" [status]="'Not Ready'"></tk-summary-card>
@@ -9,11 +16,11 @@
         <tk-table-filters *ngIf="filters.length > 0" [filters]="filters" (filter)="onFilter($event)"></tk-table-filters>
         <div class="action-wrapper">
             <span>{{filteredDataCount}} Users</span>
-            <button 
-                mat-button 
-                class="upgrade-bulk-button" 
-                color="primary" 
-                [disabled]="selection.selected.length === 0" 
+            <button
+                mat-button
+                class="upgrade-bulk-button"
+                color="primary"
+                [disabled]="selection.selected.length === 0"
                 (click)="upgradeSelectedUsers()">
                 Upgrade {{ selection.selected.length === 0 ? '' : '(' + selection.selected.length + ')' }}
             </button>
@@ -24,7 +31,7 @@
         <!-- Checkbox Column -->
         <ng-container matColumnDef="select">
             <th mat-header-cell *matHeaderCellDef>
-                <mat-checkbox 
+                <mat-checkbox
                     (change)="$event ? masterToggle() : null"
                     [checked]="selection.hasValue() && isAllSelected()"
                     [indeterminate]="selection.hasValue() && !isAllSelected()"
@@ -32,11 +39,11 @@
                 </mat-checkbox>
             </th>
             <td mat-cell *matCellDef="let row">
-                <mat-checkbox 
+                <mat-checkbox
                     (click)="$event.stopPropagation()"
                     (change)="$event ? selection.toggle(row) : null"
                     [checked]="selection.isSelected(row)"
-                    [disabled]="STATUS_ENTRIES[row.upgradeStatus] !== 'Ready'"
+                    [disabled]="STATUS_ENTRIES[row.upgradeStatus] !== 'Ready' || row.pending"
                     class="custom-checkbox">
                 </mat-checkbox>
             </td>
@@ -59,7 +66,7 @@
             <td mat-cell *matCellDef="let element">
                 <div class="site-info">
                     <span class="site-indicator"></span>
-                    {{element.siteName}}
+                    <span [ngClass]="{'status-ready': element.dialPlanStatus === 'READY'}">{{element.siteName}}</span>
                 </div>
             </td>
         </ng-container>
@@ -92,7 +99,7 @@
             <td mat-cell *matCellDef="let element">
                 <div class="status-info">
                     <span class="status-indicator" [ngClass]="getStatusClass(element.dialPlanStatus)"></span>
-                    <span>{{STATUS_ENTRIES[element.dialPlanStatus]}}</span>
+                  <span [ngClass]="{'status-ready': element.dialPlanStatus === 'READY'}">{{STATUS_ENTRIES[element.dialPlanStatus]}}</span>
                 </div>
             </td>
         </ng-container>
@@ -121,11 +128,59 @@
                         </div>
                     </ng-template>
                 </div>
+
             </td>
         </ng-container>
 
+      <ng-container matColumnDef="userUpgradeLoader">
+        <th mat-header-cell *matHeaderCellDef></th>
+        <td class="mat-progress-spinner-td" mat-cell *matCellDef="let element">
+
+          <mat-progress-spinner
+            *ngIf="element.pending"
+            class="field-spinner"
+            [diameter]="20"
+            mode="indeterminate">
+          </mat-progress-spinner>
+        </td>
+      </ng-container>
+
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns;" 
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"
             [class.selected-row]="selection.isSelected(row)"></tr>
     </table>
-</div>
+</div>
+
+<div class="app-pagination">
+  <mat-paginator
+    [length]="pagination.total"
+    [pageSize]="pagination.pageSize"
+    [pageSizeOptions]="pagination.pageSizeOptions"
+    [pageIndex]="pagination.pageIndex"
+    (page)="pageEvent($event)"
+    showFirstLastButtons>
+  </mat-paginator>
+
+  <!--<div class="page-indexes-box">
+    <mat-paginator
+      [id]="'commonPagination'"
+      [hidePageSize]="true"
+      [length]="pagination.total"
+      [pageIndex]="pagination.pageIndex"
+      [pageSize]="pagination.pageSize"
+      [pageSizeOptions]="pagination.pageSizeOptions"
+      (page)="pageEvent($event)">
+    </mat-paginator>
+  </div>
+
+  <div class="per-page-block">
+    <div class="item_per_page">Items per page:</div>
+    <div class="select-box select-page-size">
+      <mat-select (selectionChange)="changePerPageNumber($event)" #page
+                  [id]="'commonPaginationSelect'">
+        <mat-option *ngFor="let option of pageSizeOptions; let i = index;" [id]="'paginationSelectOpt_' + i" [value]="option">{{option}}</mat-option>
+      </mat-select>
+    </div>
+
+  </div>-->
+</div>