controllers/dashboard/mean_build_times_controller.js

  1. import { Controller } from "@hotwired/stimulus"
  2. import { subscription } from "~/javascripts/store/mixins/subscription"
  3. import { targetLineValues } from "~/javascripts/dashboard/utils"
  5. /**
  6.  * @class Dashboard.MeanBuildTimesController
  7.  * @classdesc Stimulus controller that populates the mean build time per build context.
  8.  * @extends Controller
  9.  **/
  10. export default class extends Controller {
  11.   static targets = [ "production", "deployPreview", "cms" ]
  12.   static values = {
  13.     loading: String,
  14.     storeId: String
  15.   }
  16.   static classes = [ "success", "warning", "error", "unavailable" ]
  18.   /** 
  19.    * Subscribe to the store.
  20.    * 
  21.    * @instance
  22.    * @memberof Dashboard.MeanBuildTimesController
  23.    **/
  24.   connect() {
  25.     subscription(this)
  26.     this.subscribe()
  28.     this.reconnect()
  29.   }
  31.   /** 
  32.    * Handles a repeated Turbo visit to the dashboard page.
  33.    * 
  34.    * @instance
  35.    * @memberof Dashboard.MeanBuildTimesController
  36.    **/
  37.   reconnect() {
  38.     if (this.store("selectedDataVizData")) {
  39.       this.storeUpdated("selectedDataVizData", this.storeIdValue)
  40.     }
  41.   }
  43.   /** 
  44.    * Sets the text for the mean build time and changes the color to match the KPI
  45.    * 
  46.    * @instance
  47.    * @memberof Dashboard.MeanBuildTimesController
  48.    **/
  49.   updateMeanBuildTimesValue(target, text, context) {
  50.     const meanBuildTime = this.calculateMeanBuildTime(context)
  51.     target.innerHTML = `${text} ${meanBuildTime}`
  52.     this.removeAlertColors(target)
  53.     target.classList.add(this.alertColor(meanBuildTime, context))
  54.   }
  56.   /** 
  57.    * Sets the text whilst waiting for the mean build time
  58.    * 
  59.    * @instance
  60.    * @memberof Dashboard.MeanBuildTimesController
  61.    **/
  62.   loadingMeanBuildTimesValue(target, text) {
  63.     target.innerHTML = `${text} ${this.loadingValue}`
  64.     this.removeAlertColors(target)
  65.   }
  67.   /** 
  68.    * @instance
  69.    * @memberof Dashboard.MeanBuildTimesController
  70.    **/
  71.   calculateMeanBuildTime(context) {
  72.     const totals = this.store("selectedDataVizData").reduce((acc , data) => {
  73.       return data.context === context ? { count: acc.count + 1, time: acc.time + data.deploy_time } : acc
  74.     }, { count: 0, time: 0 })
  75.     return Math.round((totals.time / totals.count) * 100) / 100 || "N/A"
  76.   }
  78.   /** 
  79.    * Remove all of the color classes for the mean build time
  80.    * 
  81.    * @instance
  82.    * @memberof Dashboard.MeanBuildTimesController
  83.    **/
  84.   removeAlertColors(target) {
  85.     target.classList.remove(this.successClass, this.warningClass, this.errorClass, this.unavailableClass)
  86.   }
  88.   /** 
  89.    * Return the color depending on the time in relation to the KPI
  90.    * 
  91.    * @instance
  92.    * @memberof Dashboard.MeanBuildTimesController
  93.    **/
  94.   alertColor(value, context) {
  95.     const lineValues = targetLineValues(context)
  97.     if (value == "N/A") return this.unavailableClass
  98.     if (value <= lineValues.successLineValue) return this.successClass
  99.     if (value <= lineValues.failLineValue) return this.warningClass
  100.     return this.errorClass
  101.   }
  103.   /** 
  104.    * Triggered by the store whenever any store data changes. Controls whether the mean build time should
  105.    * be populated or display the loading indicator
  106.    * 
  107.    * @instance
  108.    * @memberof Dashboard.MeanBuildTimesController
  109.    **/
  110.   storeUpdated(prop, storeId) {
  111.     if (this.store("fetchingDataVizData")) {
  112.       this.loadingMeanBuildTimesValue(this.productionTarget, "Production")
  113.       this.loadingMeanBuildTimesValue(this.deployPreviewTarget, "Deploy preview")
  114.       this.loadingMeanBuildTimesValue(this.cmsTarget, "CMS")
  115.     }
  116.     if (prop === "selectedDataVizData" && storeId === this.storeIdValue) {
  117.       this.updateMeanBuildTimesValue(this.productionTarget, "Production ...", "production")
  118.       this.updateMeanBuildTimesValue(this.deployPreviewTarget, "Deploy preview ...", "deploy-preview")
  119.       this.updateMeanBuildTimesValue(this.cmsTarget, "CMS ...", "cms")
  120.     }
  121.   }
  123.   /** 
  124.    * Unsubscribe from the store
  125.    * 
  126.    * @instance
  127.    * @memberof Dashboard.MeanBuildTimesController
  128.    **/
  129.   disconnect() {
  130.     this.unsubscribe()
  131.   }
  132. }