feat: bring back kubecost table (#124)

Bring back kubecost table
Updated readme with specific instructions

Author: mathis-marcotte

README.md

@@ -26,21 +26,23 @@ requires an environment variable (`KF_USER_ID`) to specify the current user –
 this is passed to the API server as an HTTP header.
 
 
-The following can be pasted in a script and executed.
+The following can be pasted in a script and executed. This uses the latest node lts version(v16.16.0).
 **NOTE**: `user` is when using vagrant. Use the email adress if it is the dev cluser (please never connect to prod directly)
 ```
 cd frontend/common/kubeflow-common-lib
-npm i 
+npm i
 npm run build
 cd dist/kubeflow
 npm link
 
 cd ../../../../jupyter
 npm i
-npm link kubeflow
+npm link kubeflow --legacy-peer-deps
 KF_USER_ID=user npm start
 ```
 
+For the kubecost data to be retrievable, the following will need to be executed `kubectl port-forward -n kubecost-system deployment/kubecost-cost-analyzer 9090`
+
 ### Older instructions
 1. ~Change directory to front-end folder: `cd frontend`~
 2. ~Install dependencies: `npm install`~

frontend/jupyter/src/app/pages/index/index-default/index-default.component.html

@@ -14,16 +14,11 @@
   (actionsEmitter)="reactVolumeToAction($event)"
 ></lib-resource-table>
 
-<!-- todo: Fix kubecost  -->
-<!-- <lib-resource-table *ngIf="this.getCostStatus() == true; else error"
+<lib-resource-table *ngIf="this.getCostStatus() == true; else error"
   [config]="costConfig"
   [data]="processedCostData"
   [trackByFn]="costTrackByFn"
-></lib-resource-table> -->
-
-<div class="center-flex ">
-  <p>{{ 'jupyter.costTable.kubeCostError' | translate }}</p>
-</div>
+></lib-resource-table>
 
 <ng-template #error>
   <div *ngIf="this.getCostStatus() == false" class="center-flex costerror">

frontend/jupyter/src/app/pages/index/index-default/index-default.component.ts

@@ -53,7 +53,7 @@ export class IndexDefaultComponent implements OnInit, OnDestroy {
   pvcsWaitingViewer = new Set<string>();
   costConfig = defaultCostConfig;
   rawCostData: AggregateCostResponse = null;
-  processedCostData: AggregateCostObject = null;
+  processedCostData: AggregateCostObject[] = [];
 
   constructor(
     public ns: NamespaceService,
@@ -98,7 +98,7 @@ export class IndexDefaultComponent implements OnInit, OnDestroy {
             if (!isEqual(this.rawCostData, aggCost)) {
               this.rawCostData = aggCost;
 
-              this.processedCostData = this.processIncomingCostData(aggCost);
+              this.processedCostData = [this.processIncomingCostData(aggCost)];
               this.poller.reset();
               }
             },
@@ -416,7 +416,7 @@ export class IndexDefaultComponent implements OnInit, OnDestroy {
     });
   }
   public costTrackByFn(index: number, cost: AggregateCostObject) {
-    return `${cost.cpuCost}/${cost.gpuCost}/${cost.pvCost}/${cost.total}`;
+    return `${cost.cpuCost}/${cost.gpuCost}/${cost.pvCost}/${cost.totalCost}`;
   }
 
   public getCostStatus() {
@@ -434,14 +434,14 @@ export class IndexDefaultComponent implements OnInit, OnDestroy {
     const resp = JSON.parse(
       JSON.stringify(cost),
     ) as AggregateCostResponse;
-
+    
     let costCopy: AggregateCostObject = {};
 
     if (resp.data[this.currNamespace]) {
       costCopy.cpuCost = this.formatCost(resp.data[this.currNamespace].cpuCost + resp.data[this.currNamespace].ramCost);
       costCopy.gpuCost = this.formatCost(resp.data[this.currNamespace].gpuCost);
       costCopy.pvCost = this.formatCost(resp.data[this.currNamespace].pvCost);
-      costCopy.total = this.formatCost(resp.data[this.currNamespace].totalCost);
+      costCopy.totalCost = this.formatCost(resp.data[this.currNamespace].totalCost);
     }
 
     return costCopy;

frontend/jupyter/src/app/types.ts

@@ -301,5 +301,5 @@ export interface AggregateCostObject {
   cpuCost?: string;
   gpuCost?: string;
   pvCost?: string;
-  total?: string;
+  totalCost?: string;
 };