-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: connect to Kubecost API + cleanup and refactor components
- Loading branch information
Showing
16 changed files
with
103 additions
and
373 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
41 changes: 1 addition & 40 deletions
41
frontend/src/app/main-table/cost-table/cost-table.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,54 +1,15 @@ | ||
| .card { | ||
| width: 900px; | ||
| padding: 0px; | ||
| border-radius: 5px; | ||
| background: white; | ||
| } | ||
|
|
||
| p { | ||
| padding-left: 24px; | ||
| padding-right: 16px; | ||
| } | ||
|
|
||
| table { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .header { | ||
| display: flex; | ||
| align-items: center; | ||
| padding: 0px 16px 0px 16px; | ||
| height: 64px; | ||
| } | ||
|
|
||
| .header p { | ||
| padding: 19px 0 0px; | ||
| padding: 12px 0 0px; | ||
| font-weight: 400; | ||
| font-size: 20px; | ||
| } | ||
|
|
||
| .mat-icon { | ||
| line-height: 0.85; | ||
| } | ||
|
|
||
| .header > mat-icon { | ||
| margin: 10px 5px 0 0; | ||
| } | ||
|
|
||
| .mat-cell, .mat-header-cell, .mat-footer-cell { | ||
| padding-left: 12px; | ||
| padding-right: 195px; | ||
| } | ||
|
|
||
| td.mat-cell:last-of-type, | ||
| td.mat-footer-cell:last-of-type, | ||
| th.mat-header-cell:last-of-type { | ||
| padding-right: 5px; | ||
| } | ||
|
|
||
| th, | ||
| td { | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| } | ||
|
|
83 changes: 6 additions & 77 deletions
83
frontend/src/app/main-table/cost-table/cost-table.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,88 +1,17 @@ | ||
| import { Component, OnInit, ViewChild } from "@angular/core"; | ||
| import { MatSort } from "@angular/material/sort"; | ||
| import { MatTableDataSource } from "@angular/material/table"; | ||
| import { Subscription } from "rxjs"; | ||
| import { isEqual } from "lodash"; | ||
|
|
||
| import { NamespaceService } from "src/app/services/namespace.service"; | ||
| import { KubernetesService } from "src/app/services/kubernetes.service"; | ||
| import { ExponentialBackoff } from "src/app/utils/polling"; | ||
| import { KubecostService, AggregateCostResponse } from 'src/app/services/kubecost.service'; | ||
| import { Component, Input } from "@angular/core"; | ||
| import { AggregateCostResponse } from 'src/app/services/kubecost.service'; | ||
|
|
||
| @Component({ | ||
| selector: "app-cost-table", | ||
| templateUrl: "./cost-table.component.html", | ||
| styleUrls: ["./cost-table.component.scss"] | ||
| styleUrls: ["./cost-table.component.scss", "../main-table.component.scss"] | ||
| }) | ||
| export class CostTableComponent implements OnInit { | ||
| @ViewChild(MatSort) sort: MatSort; | ||
|
|
||
| // Logic data | ||
| aggregatedCost: AggregateCostResponse = null; | ||
| resources = []; | ||
| currNamespace = ""; | ||
|
|
||
| subscriptions = new Subscription(); | ||
| poller: ExponentialBackoff; | ||
|
|
||
| dataSource = new MatTableDataSource(); | ||
|
|
||
| constructor( | ||
| private namespaceService: NamespaceService, | ||
| private k8s: KubernetesService, | ||
| private kubecostService: KubecostService, | ||
| ) { } | ||
|
|
||
| ngOnInit() { | ||
| this.dataSource.sort = this.sort; | ||
|
|
||
| // Create the exponential backoff poller | ||
| this.poller = new ExponentialBackoff({ interval: 2000, retries: 3 }); | ||
| const resourcesSub = this.poller.start().subscribe(() => { | ||
| // NOTE: We are using both the 'trackBy' feature in the Table for performance | ||
| // and also detecting with lodash if the new data is different from the old | ||
| // one. This is because, if the data changes we want to reset the poller | ||
| if (!this.currNamespace) { | ||
| return; | ||
| } | ||
|
|
||
| this.k8s.getResource(this.currNamespace).subscribe(resources => { | ||
| if (!isEqual(this.resources, resources)) { | ||
| this.resources = resources; | ||
| this.dataSource.data = this.resources; | ||
| this.poller.reset(); | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| // Keep track of the selected namespace | ||
| const namespaceSub = this.namespaceService | ||
| .getSelectedNamespace() | ||
| .subscribe(this.onNamespaceChange.bind(this)); | ||
|
|
||
| this.subscriptions.add(resourcesSub); | ||
| this.subscriptions.add(namespaceSub); | ||
| } | ||
|
|
||
| ngOnDestroy() { | ||
| this.subscriptions.unsubscribe(); | ||
| } | ||
|
|
||
| onNamespaceChange(namespace: string) { | ||
| this.currNamespace = namespace; | ||
| this.dataSource.data = []; | ||
| this.resources = []; | ||
| this.poller.reset(); | ||
| this.getAggregatedCost(); | ||
| } | ||
| export class CostTableComponent{ | ||
| @Input() aggregatedCost: AggregateCostResponse; | ||
| @Input() currNamespace:string; | ||
|
|
||
| formatCost(value: number): string { | ||
| return '$' + (value > 0 ? Math.max(value, 0.01) : 0).toFixed(2) | ||
| } | ||
|
|
||
| getAggregatedCost() { | ||
| this.kubecostService.getAggregateCost(this.currNamespace).subscribe( | ||
| aggCost => this.aggregatedCost = aggCost | ||
| ) | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,101 +0,0 @@ | ||
| .card { | ||
| width: 900px; | ||
| padding: 0px; | ||
| border-radius: 5px; | ||
| background: white; | ||
| } | ||
|
|
||
| p { | ||
| padding-left: 16px; | ||
| padding-right: 16px; | ||
| } | ||
|
|
||
| table { | ||
| width: 100%; | ||
| } | ||
|
|
||
| .header { | ||
| display: flex; | ||
| align-items: center; | ||
| padding: 0px 16px 0px 16px; | ||
| height: 64px; | ||
| } | ||
|
|
||
| .header p { | ||
| padding: 14px 0 6px; | ||
| font-weight: 400; | ||
| font-size: 20px; | ||
| } | ||
|
|
||
| .cdk-column-actions { | ||
| text-align: center; | ||
| } | ||
|
|
||
| .mat-icon { | ||
| line-height: 0.85; | ||
| } | ||
|
|
||
| .header > mat-icon { | ||
| margin: 10px 10px 0 0; | ||
| } | ||
|
|
||
| .mat-cell, .mat-header-cell, .mat-footer-cell { | ||
| padding-left: 12px; | ||
| padding-right: 12px; | ||
| } | ||
|
|
||
| td.mat-cell:last-of-type, | ||
| td.mat-footer-cell:last-of-type, | ||
| th.mat-header-cell:last-of-type { | ||
| padding-right: 0px; | ||
| } | ||
|
|
||
| .inline { | ||
| display: inline-block; | ||
| } | ||
|
|
||
| // Status Icons | ||
| .running { | ||
| color: green; | ||
| } | ||
|
|
||
| .warning { | ||
| color: orange; | ||
| } | ||
|
|
||
| .error { | ||
| color: red; | ||
| } | ||
|
|
||
| .status { | ||
| display: inline-flex; | ||
| vertical-align: middle; | ||
| } | ||
|
|
||
| .delete { | ||
| color: red; | ||
| } | ||
|
|
||
| // Flex | ||
| .parent { | ||
| display: flex; | ||
| } | ||
|
|
||
| .spacer { | ||
| flex-grow: 1; | ||
| } | ||
|
|
||
| th, | ||
| td { | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| } | ||
|
|
||
| td.mat-column-image, | ||
| td.mat-column-name { | ||
| max-width: 200px; | ||
| } | ||
|
|
||
| td.mat-column-cpu { | ||
| width: 40px; | ||
| } | ||
Oops, something went wrong.