DEV-188, DEV-189, DEV-179, DEV-186

SpareCores · Jun 17, 2024 · 4eef1cd · 4eef1cd
1 parent a526021
commit 4eef1cd
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 5 deletions.
diff --git a/src/app/pages/server-listing/server-listing.component.html b/src/app/pages/server-listing/server-listing.component.html
@@ -130,6 +130,20 @@ <h1 class="text-white font-bold text-3xl">Cloud Compute Resources listing</h1>
                     <div class="text-white text-sm">{{enum?.value ? enum?.value : enum}}</div>
                   </div>
                 </div>
+                <div *ngIf="getParamterType(parameter) === 'compliance_framework'" class="flex flex-col gap-2 mb-4 mt-4" >
+                  <div *ngFor="let enum of parameter.schema.enum" class="flex items-center gap-1">
+                    <input type="checkbox"
+                           id="filter_enum_{{parameter.name}}"
+                           data-ph-capture-attribute-sc-event="server listing filter"
+                           data-ph-capture-attribute-server-listing-filter-type="checkbox"
+                           [attr.data-ph-capture-attribute-server-listing-filter-id]="parameter.name"
+                           [attr.data-ph-capture-attribute-server-listing-filter-category]="item.category_id"
+                           [ngModel]="isEnumSelected(parameter, enum)"
+                           (click)="selectEnumItem(parameter, enum)"
+                           class="focus:ring-emerald-400 accent-emerald-400 text-emerald-400 outline-none" >
+                    <div class="text-white text-sm">{{getComplianceFrameworkName(enum)}}</div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -179,6 +193,13 @@ <h1 class="text-white font-bold text-3xl">Cloud Compute Resources listing</h1>
                       (click)="toggleOrdering(item)" >
                       <div class="flex gap-1">
                         {{item.name}}
+                        <lucide-icon
+                          *ngIf="item.info"
+                          name="info"
+                          (mouseenter)="showTooltip($event, item.info)"
+                          (mouseleave)="hideTooltip()"
+                          class="h-4 w-4 text-gray-200">
+                        </lucide-icon>
                         <lucide-icon *ngIf="getOrderingIcon(item)" name="{{getOrderingIcon(item)}}" class="h-4 w-4 text-white"></lucide-icon>
                       </div>
                   </th>
@@ -228,8 +249,22 @@ <h1 class="text-white font-bold text-3xl">Cloud Compute Resources listing</h1>
                         <span>{{item.cpu_cores}} cores &#64; {{item.cpu_speed}} GHz</span>
                       </div>
                     </td>
+                    <td *ngIf="column.type === 'score'">
+                      <div class="text-sm text-white">{{getScore(item.score)}}</div>
+                      <div
+                        *ngIf="item.score_per_price"
+                        class="text-xs text-white flex gap-1">
+                        <span>{{getScore(item.score_per_price)}} / USD</span>
+                      </div>
+                    </td>
                     <td *ngIf="column.type === 'memory'">
-                      {{getMemory(item)}}
+                      <div class="text-sm text-white">{{getMemory(item)}}</div>
+                      <div
+                        *ngIf="item.memory_speed"
+                        class="text-xs text-white flex gap-1">
+                        <span *ngIf="!item.memory_generation">{{item.memory_speed}} MHz</span>
+                        <span *ngIf="item.memory_generation">{{item.memory_speed}} MHz ({{item.memory_generation}})</span>
+                      </div>
                     </td>
                     <td *ngIf="column.type === 'gpu_memory'">
                       {{getGPUMemory(item)}}

diff --git a/src/app/pages/server-listing/server-listing.component.ts b/src/app/pages/server-listing/server-listing.component.ts
@@ -19,6 +19,7 @@ export type TableColumn = {
   key?: string;
   show?: boolean;
   orderField?: string;
+  info?: string;
 };
 
 export type CountryMetadata = {
@@ -96,11 +97,18 @@ export class ServerListingComponent implements OnInit {
   possibleColumns: TableColumn[] = [
     { name: 'NAME & PROVIDER', show: true, type: 'name'},
     { name: 'PROCESSOR', show: true, type: 'processor', orderField: 'vcpus' },
+    { name: 'SCORE',
+      show: true,
+      type: 'score',
+      orderField: 'score',
+      info: "Performance benchmark score using stress-ng's div16 method (doing 16 bit unsigned integer divisions for 20 seconds): simulating CPU heavy workload that scales well on any number of (v)CPUs. The score/price value shows the number of operations per USD/hour."
+    },
     { name: 'MEMORY', show: true, type: 'memory', orderField: 'memory' },
     { name: 'STORAGE', show: true, type: 'storage', orderField: 'storage_size' },
     { name: 'STORAGE TYPE', show: false, type: 'text', key: 'server.storage_type' },
     { name: 'GPUs', show: true, type: 'gpu', orderField: 'server.gpu_count' },
     { name: 'GPU MIN MEMORY', show: false, type: 'gpu_memory', key: 'server.gpu_memory_min' },
+    { name: 'GPU TOTAL MEMORY', show: false, type: 'gpu_memory', key: 'server.gpu_memory_total' },
     { name: 'ARCHITECTURE', show: false, type: 'text', key: 'server.cpu_architecture' },
     { name: 'STATUS', show: false, type: 'text', key: 'status' },
     { name: 'VENDOR', show: false, type: 'vendor' },
@@ -141,6 +149,8 @@ export class ServerListingComponent implements OnInit {
   clipboardIcon = 'clipboard';
   tooltipContent = '';
 
+  complianceFrameworks: any[] = [];
+
   constructor(@Inject(PLATFORM_ID) private platformId: object,
               private keeperAPI: KeeperAPIService,
               private route: ActivatedRoute,
@@ -201,6 +211,10 @@ export class ServerListingComponent implements OnInit {
       this.filterServers();
     });
 
+    this.keeperAPI.getComplianceFrameworks().then((response: any) => {
+      this.complianceFrameworks = response.body;
+    });
+
     if(isPlatformBrowser(this.platformId)) {
 
       const targetElColumn: HTMLElement | null = document.getElementById('column_options');
@@ -260,6 +274,10 @@ export class ServerListingComponent implements OnInit {
     return `${(item.storage_size / 1000).toFixed(1)} TB`;
   }
 
+  getScore(value: number | null): string {
+    return value ? value.toFixed(0) : '-';
+  }
+
   openServerDetails(server: ServerPKs) {
     this.router.navigateByUrl(`/server/${server.vendor.vendor_id}/${server.api_reference}`);
   }
@@ -286,6 +304,10 @@ export class ServerListingComponent implements OnInit {
       return 'regions';
     }
 
+    if(name === 'compliance_framework') {
+      return 'compliance_framework';
+    }
+
     if((type === 'integer' || type === 'number') && parameter.schema.minimum && parameter.schema.maximum) {
       return 'range';
     }
@@ -460,6 +482,10 @@ export class ServerListingComponent implements OnInit {
     return field.split('.').reduce((obj, key) => (obj && (obj as any)[key]) ? (obj as any)[key] : undefined, item);
   }
 
+  getComplianceFrameworkName(id: string) {
+    return this.complianceFrameworks.find((item) => item.compliance_framework_id === id)?.abbreviation || id;
+  }
+
   prevPage() {
     this.page = Math.max(this.page - 1, 1);
     this.gotoPage(this.page);
@@ -603,8 +629,8 @@ export class ServerListingComponent implements OnInit {
     this.tooltipContent = content;
     const tooltip = this.tooltip.nativeElement;
     const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
-    tooltip.style.left = `${el.target.getBoundingClientRect().left - 25}px`;
-    tooltip.style.top = `${el.target.getBoundingClientRect().top - 45 + scrollPosition}px`;
+    tooltip.style.left = `${el.target.getBoundingClientRect().right + 5}px`;
+    tooltip.style.top = `${el.target.getBoundingClientRect().top - 5 + scrollPosition}px`;
     tooltip.style.display = 'block';
     tooltip.style.opacity = '1';
 

diff --git a/src/app/pages/server-prices/server-prices.component.html b/src/app/pages/server-prices/server-prices.component.html
@@ -211,6 +211,20 @@ <h1 class="text-white font-bold text-3xl">Cloud Compute Resources listing</h1>
                     <div class="text-white text-sm">{{enum?.value ? enum?.value : enum}}</div>
                   </div>
                 </div>
+                <div *ngIf="getParamterType(parameter) === 'compliance_framework'" class="flex flex-col gap-2 mb-4 mt-4" >
+                  <div *ngFor="let enum of parameter.schema.enum" class="flex items-center gap-1">
+                    <input type="checkbox"
+                           id="filter_enum_{{parameter.name}}"
+                           data-ph-capture-attribute-sc-event="server listing filter"
+                           data-ph-capture-attribute-server-listing-filter-type="checkbox"
+                           [attr.data-ph-capture-attribute-server-listing-filter-id]="parameter.name"
+                           [attr.data-ph-capture-attribute-server-listing-filter-category]="item.category_id"
+                           [ngModel]="isEnumSelected(parameter, enum)"
+                           (click)="selectEnumItem(parameter, enum)"
+                           class="focus:ring-emerald-400 accent-emerald-400 text-emerald-400 outline-none" >
+                    <div class="text-white text-sm">{{getComplianceFrameworkName(enum)}}</div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -289,6 +303,13 @@ <h1 class="text-white font-bold text-3xl">Cloud Compute Resources listing</h1>
                       (click)="toggleOrdering(item)" >
                       <div class="flex gap-1">
                         {{item.name}}
+                        <lucide-icon
+                          *ngIf="item.info"
+                          name="info"
+                          (mouseenter)="showTooltip($event, item.info)"
+                          (mouseleave)="hideTooltip()"
+                          class="h-4 w-4 text-gray-200">
+                        </lucide-icon>
                         <lucide-icon *ngIf="getOrderingIcon(item)" name="{{getOrderingIcon(item)}}" class="h-4 w-4 text-white"></lucide-icon>
                       </div>
                   </th>
@@ -330,6 +351,14 @@ <h1 class="text-white font-bold text-3xl">Cloud Compute Resources listing</h1>
                     <td *ngIf="column.type === 'memory'">
                       {{getMemory(item)}}
                     </td>
+                    <td *ngIf="column.type === 'score'">
+                      <div class="text-sm text-white">{{getScore(item.server.score)}}</div>
+                      <div
+                        *ngIf="item.server.score_per_price"
+                        class="text-xs text-white flex gap-1">
+                        <span>{{getScore(item.server.score_per_price)}} / USD</span>
+                      </div>
+                    </td>
                     <td *ngIf="column.type === 'gpu_memory'">
                       {{getGPUMemory(item)}}
                     </td>

diff --git a/src/app/pages/server-prices/server-prices.component.ts b/src/app/pages/server-prices/server-prices.component.ts
@@ -19,6 +19,7 @@ export type TableColumn = {
   key?: string;
   show?: boolean;
   orderField?: string;
+  info?: string;
 };
 
 export type CountryMetadata = {
@@ -99,11 +100,18 @@ export class ServerPricesComponent implements OnInit {
   possibleColumns: TableColumn[] = [
     { name: 'NAME & PROVIDER', show: true, type: 'name'},
     { name: 'PROCESSOR', show: true, type: 'processor', orderField: 'vcpus' },
+    { name: 'SCORE',
+      show: true,
+      type: 'score',
+      orderField: 'score',
+      info: "Performance benchmark score using stress-ng's div16 method (doing 16 bit unsigned integer divisions for 20 seconds): simulating CPU heavy workload that scales well on any number of (v)CPUs. The score/price value shows the number of operations per USD/hour."
+    },
     { name: 'MEMORY', show: true, type: 'memory', orderField: 'memory' },
     { name: 'STORAGE', show: true, type: 'storage', orderField: 'storage_size' },
     { name: 'STORAGE TYPE', show: false, type: 'text', key: 'server.storage_type' },
     { name: 'GPUs', show: true, type: 'gpu', orderField: 'server.gpu_count' },
     { name: 'GPU MIN MEMORY', show: false, type: 'gpu_memory', key: 'server.gpu_memory_min' },
+    { name: 'GPU TOTAL MEMORY', show: false, type: 'gpu_memory', key: 'server.gpu_memory_total' },
     { name: 'PRICE', show: true, type: 'price', orderField: 'price' },
     { name: 'ARCHITECTURE', show: false, type: 'text', key: 'server.cpu_architecture' },
     { name: 'REGION', show: false, type: 'region' },
@@ -182,6 +190,8 @@ export class ServerPricesComponent implements OnInit {
   clipboardIcon = 'clipboard';
   tooltipContent = '';
 
+  complianceFrameworks: any[] = [];
+
   constructor(@Inject(PLATFORM_ID) private platformId: object,
               private keeperAPI: KeeperAPIService,
               private route: ActivatedRoute,
@@ -240,6 +250,10 @@ export class ServerPricesComponent implements OnInit {
       this.filterServers(false);
     });
 
+    this.keeperAPI.getComplianceFrameworks().then((response) => {
+      this.complianceFrameworks = response.body;
+    });
+
     this.valueChangeDebouncer.pipe(debounceTime(300)).subscribe(() => {
       this.page = 1;
       this.filterServers();
@@ -330,6 +344,10 @@ export class ServerPricesComponent implements OnInit {
     return `${(item.server.storage_size / 1000).toFixed(1)} TB`;
   }
 
+  getScore(value: number | null): string {
+    return value ? value.toFixed(0) : '-';
+  }
+
   openServerDetails(server: ServerPriceWithPKs) {
     this.router.navigateByUrl(`/server/${server.vendor.vendor_id}/${server.server.api_reference}`);
   }
@@ -356,6 +374,10 @@ export class ServerPricesComponent implements OnInit {
       return 'regions';
     }
 
+    if(name === 'compliance_framework') {
+      return 'compliance_framework';
+    }
+
     if((type === 'integer' || type === 'number') && parameter.schema.minimum && parameter.schema.maximum) {
       return 'range';
     }
@@ -572,6 +594,10 @@ export class ServerPricesComponent implements OnInit {
     return field.split('.').reduce((obj, key) => (obj && (obj as any)[key]) ? (obj as any)[key] : undefined, item);
   }
 
+  getComplianceFrameworkName(id: string) {
+    return this.complianceFrameworks.find((item) => item.compliance_framework_id === id)?.abbreviation || id;
+  }
+
   prevPage() {
     this.page = Math.max(this.page - 1, 1);
     this.gotoPage(this.page);
@@ -755,8 +781,8 @@ export class ServerPricesComponent implements OnInit {
     this.tooltipContent = content;
     const tooltip = this.tooltip.nativeElement;
     const scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
-    tooltip.style.left = `${el.target.getBoundingClientRect().left - 25}px`;
-    tooltip.style.top = `${el.target.getBoundingClientRect().top - 45 + scrollPosition}px`;
+    tooltip.style.left = `${el.target.getBoundingClientRect().right + 5}px`;
+    tooltip.style.top = `${el.target.getBoundingClientRect().top - 5 + scrollPosition}px`;
     tooltip.style.display = 'block';
     tooltip.style.opacity = '1';
 

diff --git a/src/app/services/keeper-api.service.ts b/src/app/services/keeper-api.service.ts
@@ -67,6 +67,10 @@ export class KeeperAPIService {
     return this.TableController.tableMetadataServerTableServerMetaGet();
   }
 
+  public getComplianceFrameworks(): Promise<any> {
+    return this.TableController.tableComplianceFrameworksTableComplianceFrameworkGet();
+  }
+
   public getServerBenchmarkMeta(): Promise<any> {
     return this.TableController.tableBenchmarkTableBenchmarkGet();
   }