add cost tracking properties for vmtemplate (hobbyfarm#239)

* add cost tracking properties for vmtemplate

* Add Dashboard to display costs per event

* Display cost per month

* Global Cost Dashboard

* Display more digits for the base price

* Add settings for currency symbol

* sortable table

* Add linechart to show accumulated costs

---------

Co-authored-by: Jan-Gerrit Göbel <[email protected]>

Author: marcus-sva

package-lock.json

@@ -41,6 +41,7 @@
     "angular-split": "^17.2.0",
     "brace": "^0.11.1",
     "chart.js": "^4.3.0",
+    "chartjs-adapter-date-fns": "^3.0.0",
     "chartjs-plugin-datalabels": "^2.2.0",
     "dompurify": "^3.1.7",
     "marked": "^12.0.2",

package.json

@@ -19,6 +19,7 @@ import { RolesComponent } from './configuration/roles/roles/roles.component';
 import { SessionStatisticsComponent } from './session-statistics/session-statistics.component';
 import { SettingsComponent } from './configuration/settings/settings.component';
 import { DashboardDetailsComponent } from './dashboards/dashboard-details/dashboard-details.component';
+import { CostStatisticsComponent } from './cost-statistics/cost-dashboard.component';
 
 const routes: Routes = [
   { path: '', redirectTo: '/home', pathMatch: 'full' },
@@ -32,6 +33,10 @@ const routes: Routes = [
         path: 'statistics/sessions',
         component: SessionStatisticsComponent,
       },
+      {
+        path: 'statistics/costs',
+        component: CostStatisticsComponent,
+      },
     ],
   },
   {

src/app/app-routing.module.ts

@@ -172,6 +172,10 @@ import { TooltipComponent } from './tooltip/tooltip.component';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { AuthnService } from './data/authn.service';
 import { SessionProgressService } from './progress/session-progress.service';
+import { CostService } from './data/cost.service';
+import { CostDashboardComponent } from './dashboards/cost-dashboard/cost-dashboard.component';
+import { CostStatisticsComponent } from './cost-statistics/cost-dashboard.component';
+import { MonthlyCostChartComponent } from './dashboards/cost-dashboard/monthly-cost-chart/monthly-cost-chart.component';
 
 ClarityIcons.addIcons(
   plusIcon,
@@ -244,6 +248,7 @@ export function jwtOptionsFactory(): JwtConfig {
     AppComponent,
     HomeComponent,
     SessionStatisticsComponent,
+    CostStatisticsComponent,
     SessionTimeStatisticsComponent,
     HeaderComponent,
     EventComponent,
@@ -279,6 +284,8 @@ export function jwtOptionsFactory(): JwtConfig {
     DashboardsComponent,
     VmDashboardComponent,
     UsersDashboardComponent,
+    CostDashboardComponent,
+    MonthlyCostChartComponent,
     StepComponent,
     HfMarkdownComponent,
     TerminalComponent,
@@ -369,6 +376,7 @@ export function jwtOptionsFactory(): JwtConfig {
     PredefinedServiceService,
     ThemeService,
     TypedSettingsService,
+    CostService,
     {
       provide: APP_INITIALIZER,
       useFactory: appInitializerFn,

src/app/app.module.ts

@@ -62,6 +62,39 @@
       </clr-input-container>
     </form>
   </clr-wizard-page>
+
+  <clr-wizard-page [clrWizardPageNextDisabled]="!costDetails.valid">
+    <ng-template clrPageTitle>Cost</ng-template>
+
+    <form clrForm [formGroup]="costDetails">
+      <clr-input-container>
+        <label>Base Price</label>
+        <input
+          clrInput
+          type="number"
+          placeholder="base price"
+          name="cost_base_price"
+          formControlName="cost_base_price"
+        />
+        <clr-control-error *clrIfError="'invalidFloat'"
+        >Optional base price needs to be a floating-point number greater or equal zero</clr-control-error
+        >
+      </clr-input-container>
+      <clr-select-container>
+        <label>Time Unit</label>
+        <select title="cost_time_unit" clrSelect formControlName="cost_time_unit">
+          <option value=""></option>
+          <option value="seconds">seconds</option>
+          <option value="minutes">minutes</option>
+          <option value="hours">hours</option>
+        </select>
+      </clr-select-container>
+      <clr-control-error *ngIf="costDetails.errors?.invalidAllOrNone">
+        Either both or none of the fields must be set.
+      </clr-control-error>
+    </form>
+  </clr-wizard-page>
+
   <clr-wizard-page [clrWizardPageNextDisabled]="!configMap.valid">
     <ng-template clrPageTitle>Config Map</ng-template>
 
@@ -197,6 +230,59 @@ <h4>Basic Information</h4>
       </tbody>
     </table>
 
+    <h4>Cost</h4>
+    <table class="table table-compact">
+      <thead>
+      <tr>
+        <th>Option</th>
+        <th>Value</th>
+      </tr>
+      </thead>
+      <tbody>
+        @if (!!this.editTemplate) {
+          <tr>
+            <td>Base Price</td>
+            @if (template.cost_base_price == uneditedTemplate.cost_base_price) {
+              <td>
+                {{ template.cost_base_price ?? 'None' }}
+              </td>
+            } @else {
+              <td>
+                <span class="del-elem arrow-after">{{
+                    uneditedTemplate.cost_base_price ?? 'None'
+                  }}</span>
+                <span class="add-elem">{{ template.cost_base_price ?? 'None' }}</span>
+              </td>
+            }
+          </tr>
+          <tr>
+            <td>Time Unit</td>
+            @if (template.cost_time_unit == uneditedTemplate.cost_time_unit) {
+              <td>
+                {{ template.cost_time_unit ?? 'None' }}
+              </td>
+            } @else {
+              <td>
+                <span class="del-elem arrow-after">{{
+                    uneditedTemplate.cost_time_unit ?? 'None'
+                  }}</span>
+                <span class="add-elem">{{ template.cost_time_unit ?? 'None' }}</span>
+              </td>
+            }
+          </tr>
+        } @else {
+          <tr>
+            <td>Base Price</td>
+            <td>{{ template.cost_base_price ?? 'None' }}</td>
+          </tr>
+          <tr>
+            <td>Time Unit</td>
+            <td>{{ template.cost_time_unit ?? 'None' }}</td>
+          </tr>
+        }
+      </tbody>
+    </table>
+
     <h4>Config Map</h4>
     <table class="table table-compact">
       <thead>

src/app/configuration/vmtemplates/edit-vmtemplate/edit-vmtemplate.component.html

@@ -19,6 +19,8 @@ import { ClrWizard } from '@clr/angular';
 import { DEFAULT_ALERT_ERROR_DURATION } from 'src/app/alert/alert';
 import { AlertComponent } from 'src/app/alert/alert.component';
 import { CloudInitConfig } from 'src/app/data/cloud-init-config';
+import { EitherAllOrNoneValidator } from '../../../validators/eitherallornone.validator';
+import { FloatValidator } from '../../../validators/float.validator';
 import { GenericKeyValueGroup } from 'src/app/data/forms';
 import { ServerResponse } from 'src/app/data/serverresponse';
 import { VMTemplateServiceConfiguration } from 'src/app/data/vm-template-service-configuration';
@@ -36,6 +38,10 @@ export class EditVmtemplateComponent implements OnInit, OnChanges {
     name: FormControl<string>;
     image: FormControl<string>;
   }>;
+  public costDetails: FormGroup<{
+    cost_base_price: FormControl<string>;
+    cost_time_unit: FormControl<string>;
+  }>;
   public configMap: FormGroup<{
     mappings: FormArray<GenericKeyValueGroup<string>>;
   }>;
@@ -81,6 +87,7 @@ export class EditVmtemplateComponent implements OnInit, OnChanges {
 
   private _build() {
     this.buildConfigMap();
+    this.buildCostDetails()
     this.buildTemplateDetails();
   }
 
@@ -97,6 +104,23 @@ export class EditVmtemplateComponent implements OnInit, OnChanges {
     });
   }
 
+  public buildCostDetails(vmTemplate: VMTemplate | null = null) {
+    this.costDetails = this._fb.group(
+      {
+        cost_base_price: this._fb.control<string>(
+          vmTemplate?.cost_base_price ?? '',
+          FloatValidator(0, Number.MAX_VALUE),
+        ),
+        cost_time_unit: this._fb.control<string>(
+          vmTemplate?.cost_time_unit ?? '',
+        ),
+      },
+      {
+        validators: [EitherAllOrNoneValidator(['cost_base_price', 'cost_time_unit'])],
+      }
+    );
+  }
+
   public buildConfigMap() {
     this.configMap = this._fb.group({
       mappings: this._fb.array<GenericKeyValueGroup<string>>([
@@ -166,6 +190,16 @@ export class EditVmtemplateComponent implements OnInit, OnChanges {
     this.template.image = this.templateDetails.controls.image.value;
   }
 
+  public copyCostDetails() {
+    this.template.cost_base_price = this.costDetails.controls.cost_base_price.value
+      ? this.costDetails.controls.cost_base_price.value
+      : undefined;
+    this.template.cost_time_unit = this.costDetails.controls.cost_time_unit.value
+      ? this.costDetails.controls.cost_time_unit.value
+      : undefined;
+  }
+
+
   public copyConfigMap() {
     this.template.config_map = {};
     for (let i = 0; i < this.configMap.controls.mappings.length; i++) {
@@ -186,6 +220,7 @@ export class EditVmtemplateComponent implements OnInit, OnChanges {
   }
   public copyTemplate() {
     this.copyConfigMap();
+    this.copyCostDetails()
     this.copyTemplateDetails();
   }
 
@@ -231,6 +266,7 @@ export class EditVmtemplateComponent implements OnInit, OnChanges {
 
   private _prepare(vmTemplate: VMTemplate) {
     this.buildTemplateDetails(vmTemplate);
+    this.buildCostDetails(vmTemplate);
     this.prepareConfigMap(vmTemplate);
   }
 
@@ -242,6 +278,7 @@ export class EditVmtemplateComponent implements OnInit, OnChanges {
       this.wizard.pages.first.makeCurrent();
     } else {
       this.buildTemplateDetails();
+      this.buildCostDetails();
       this.buildConfigMap();
     }
     this.uneditedTemplate = structuredClone(this.template);

src/app/configuration/vmtemplates/edit-vmtemplate/edit-vmtemplate.component.ts

@@ -16,6 +16,23 @@
           <clr-stack-content>{{ currentVmTemplate.image }}</clr-stack-content>
         </clr-stack-block>
       </clr-stack-block>
+      <clr-stack-block>
+        <clr-stack-label>Cost</clr-stack-label>
+        <clr-stack-block>
+          <clr-stack-label class="stackbox-header">Option</clr-stack-label>
+          <clr-stack-content class="stackbox-header">Value</clr-stack-content>
+        </clr-stack-block>
+        <clr-stack-block>
+          <clr-stack-label>Base Price</clr-stack-label>
+          <clr-stack-content>
+            {{ currentVmTemplate.cost_base_price ? currentVmTemplate.cost_base_price : 'None' }}
+          </clr-stack-content>
+        </clr-stack-block>
+        <clr-stack-block>
+          <clr-stack-label>Time Unit</clr-stack-label>
+          {{ currentVmTemplate.cost_time_unit ? currentVmTemplate.cost_time_unit : 'None' }}
+        </clr-stack-block>
+      </clr-stack-block>
       @if (
         currentVmTemplate.config_map && !isEmpty(currentVmTemplate.config_map)
       ) {

src/app/configuration/vmtemplates/vmtemplate-detail/vmtemplate-detail.component.html

@@ -0,0 +1,13 @@
+<div class="clr-row">
+  <!-- Top Row -->
+  <div class="clr-col">
+    <div class="card">
+      <div class="card-block">
+        <h4 class="card-title">
+          {{ allCost.total | currency: currencySymbol }}
+        </h4>
+        <p class="card-text">All resources</p>
+      </div>
+    </div>
+  </div>
+</div>

src/app/cost-statistics/cost-dashboard.component.html

@@ -0,0 +1,13 @@
+.card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.card-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}