[TRON-19085] Set up SonarQube

.github/workflows/sonarqube.yml

@@ -0,0 +1,23 @@
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  sonarqube:
+    name: SonarQube Scan
+    continue-on-error: true
+    runs-on: [self-hosted, bolt-ubuntu]
+
+    steps:
+      - name: Checkout Codebase
+        uses: actions/checkout@v3
+
+      - name: SonarQube Scan
+        uses: pfizer-github-automation/sonar-scan-action@main
+        env:
+          SONAR_HOST_URL: ${{ secrets.SONAR_HOST_URL }}
+          SONAR_ROOT_CERT: ${{ secrets.SONAR_ROOT_CERT }}
+          SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

examples/example.html

@@ -15,7 +15,7 @@ <h1 class="py-4 text-center font-bold bg-black text-white"> Graphs library</h1>
         <div class="absolute z-10 w-8 border-2 border-black bg-black transition-width duration-200 overflow-x-hidden"
              id="left-sidebar">
             <button class="w-full h-10 p-1" id="left-sidebar-button">
-                <img class="w-5 h-5 mx-auto" id="left-sidebar-arrow-img" src="./images/double-right-arrowhead.svg"/>
+                <img class="w-5 h-5 mx-auto" alt="right-arrow" id="left-sidebar-arrow-img" src="./images/double-right-arrowhead.svg"/>
             </button>
             <div class="hidden text-white p-2" id="left-sidebar-content">
                 <h3 class="pl-1">Legend:</h3>
@@ -47,7 +47,7 @@ <h3 class="pl-1">Legend:</h3>
                 class="absolute z-10 w-8 border-2 border-black bg-black transition-width duration-200 overflow-x-hidden right-0"
                 id="right-sidebar">
             <button class="w-full h-10 p-1" id="right-sidebar-button">
-                <img class="w-5 h-5 mx-auto" id="right-sidebar-arrow-img" src="./images/double-left-arrowhead.svg"/>
+                <img class="w-5 h-5 mx-auto" alt="left-arrow"  id="right-sidebar-arrow-img" src="./images/double-left-arrowhead.svg"/>
             </button>
             <!--Observation log Form-->
             <div class="fixed top-0 right-0  w-96 hidden text-white p-2 " id="right-sidebar-content">

examples/example.js

@@ -23,17 +23,10 @@ if (!data || data.length === 0) {
     renderGraphs(data, serviceId);
 }
 
-async function renderGraphs(data, serviceId) {
-    //The Load and reset config input buttons css selectors
-    const loadConfigInputSelector = "#load-config-input";
-    const resetConfigInputSelector = "#reset-config-input";
-    //The controls div css selector that contains the reporting range days input and the x axis labeling units dropdown
-    const controlsElementSelector = "#controls-div";
-
+function renderCfdGraph(data, controlsElementSelector, loadConfigInputSelector, resetConfigInputSelector) {
     //The cfd area chart and brush window elements css selectors
     const cfdGraphElementSelector = "#cfd-area-div";
     const cfdBrushElementSelector = "#cfd-brush-div";
-    console.table(data)
     //Declare the states array for the cfd graph data
     const states = ['analysis_active', 'analysis_done', 'in_progress', 'dev_complete', 'verification_start', 'delivered'];
     //Declare the states in  reversed order for the CFD (stacked area chart) to render correctly the areas
@@ -60,7 +53,10 @@ async function renderGraphs(data, serviceId) {
             cfdRenderer.clearGraph(cfdGraphElementSelector, cfdBrushElementSelector);
         }
     }
+    return {cfdRenderer, reportingRangeDays};
+}
 
+function renderScatterplotAndHistogramGraphs(data, reportingRangeDays, controlsElementSelector, loadConfigInputSelector, resetConfigInputSelector) {
     //The scatterplot area chart, histogram area chart and scatterplot brush window elements css selectors
     const scatterplotGraphElementSelector = "#scatterplot-area-div";
     const histogramGraphElementSelector = "#histogram-area-div";
@@ -91,13 +87,29 @@ async function renderGraphs(data, serviceId) {
             histogramRenderer.clearGraph(histogramGraphElementSelector);
         }
     }
-    // await useObservationLogging(scatterplotRenderer, cfdRenderer, serviceId);
+    return scatterplotRenderer;
+}
+
+async function renderGraphs(data, serviceId) {
+    //The Load and reset config input buttons css selectors
+    const loadConfigInputSelector = "#load-config-input";
+    const resetConfigInputSelector = "#reset-config-input";
+    //The controls div css selector that contains the reporting range days input and the x axis labeling units dropdown
+    const controlsElementSelector = "#controls-div";
+
+    const {
+        cfdRenderer,
+        reportingRangeDays
+    } = renderCfdGraph(data, controlsElementSelector, loadConfigInputSelector, resetConfigInputSelector);
+    const scatterplotRenderer = renderScatterplotAndHistogramGraphs(data, reportingRangeDays, controlsElementSelector, loadConfigInputSelector, resetConfigInputSelector);
+    const useObservationLogging = false;
+    useObservationLogging && await useObservationLogging(scatterplotRenderer, cfdRenderer, serviceId);
 }
 
 async function useObservationLogging(scatterplotRenderer, cfdRenderer, serviceId) {
     const loggingServiceURL = "";
     const btoaToken = "";
-   const observationLoggingService = new ObservationLoggingService(loggingServiceURL, btoaToken, serviceId);
+    const observationLoggingService = new ObservationLoggingService(loggingServiceURL, btoaToken, serviceId);
     let observations = [];
     try {
         await observationLoggingService.loadObservations();
@@ -109,11 +121,11 @@ async function useObservationLogging(scatterplotRenderer, cfdRenderer, serviceId
     scatterplotRenderer.setupObservationLogging(observations);
     cfdRenderer.setupObservationLogging(observations);
     eventBus.addEventListener("scatterplot-click", (event) => {
-        initializeForm({ ...event, chartType: "SCATTERPLOT", serviceId });
+        initializeForm({...event, chartType: "SCATTERPLOT", serviceId});
         toggleRightSidebar(true);
     });
     eventBus.addEventListener("cfd-click", (event) => {
-        initializeForm({ ...event, chartType: "CFD", serviceId });
+        initializeForm({...event, chartType: "CFD", serviceId});
         toggleRightSidebar(true);
     });
     eventBus.addEventListener("submit-observation-form", async (observation) => {
@@ -139,7 +151,7 @@ async function useObservationLogging(scatterplotRenderer, cfdRenderer, serviceId
             }
         } catch (e) {
             warningField.textContent = "Error submitting the observation: " + e.message;
-            console.log( "Error submitting the observation: " + e.message);
+            console.log("Error submitting the observation: " + e.message);
         }
     });
 }

examples/sidebars.js

@@ -133,37 +133,45 @@ function clearObservationForm() {
   chartTypeInput.value = "";
 }
 
+function initializeScatterplotForm(data) {
+  cfdDiv.classList.add("hidden");
+  scatterplotDiv.classList.remove("hidden");
+  workItemInput.value = data.ticketId || "";
+  leadTimeInput.value = data.metrics.leadTime ? data.metrics.leadTime + " days" : "-";
+}
+
+function initializeCfdForm(data) {
+  cfdDiv.classList.remove("hidden");
+  scatterplotDiv.classList.add("hidden");
+  let selectedState;
+  cycleTimesByState = data.metrics.cycleTimesByState
+  cycleTimesByStateSelect.innerHTML = ''
+  for (const state in data.metrics.cycleTimesByState) {
+    const option = document.createElement('option');
+    option.textContent = `${data.metrics.cycleTimesByState[state]} days - ${state}`;
+    option.value = state;
+    cycleTimesByStateSelect.appendChild(option);
+    if (data.metrics.cycleTimesByState[state] === data.metrics.biggestCycleTime) {
+      option.selected = true
+      selectedState = state
+    }
+  }
+  cycleTimesByStateSelect.addEventListener('change', (event) => {
+    cycleTimesByStateSelect.value = selectedState;
+  });
+  avgLeadTimeInput.value = data.metrics.averageLeadTime ? data.metrics.averageLeadTime + " days" : "-";
+  throughputInput.value = data.metrics.throughput ? data.metrics.throughput + " items" : "-";
+  wipInput.value = data.metrics.wip ? data.metrics.wip + " items" : "-";
+}
+
 export function initializeForm(data) {
 
   clearObservationForm();
   if (data.chartType === "CFD") {
-    cfdDiv.classList.remove("hidden");
-    scatterplotDiv.classList.add("hidden");
-    let selectedState;
-    cycleTimesByState = data.metrics.cycleTimesByState
-    cycleTimesByStateSelect.innerHTML=''
-    for (const state in data.metrics.cycleTimesByState) {
-      const option = document.createElement('option');
-      option.textContent = `${data.metrics.cycleTimesByState[state]} days - ${state}`;
-      option.value = state;
-      cycleTimesByStateSelect.appendChild(option);
-      if(data.metrics.cycleTimesByState[state] === data.metrics.biggestCycleTime){
-        option.selected = true
-        selectedState = state
-      }
-    }
-    cycleTimesByStateSelect.addEventListener('change', (event) => {
-      cycleTimesByStateSelect.value = selectedState;
-    });
-    avgLeadTimeInput.value = data.metrics.averageLeadTime ? data.metrics.averageLeadTime + " days" : "-";
-    throughputInput.value = data.metrics.throughput ? data.metrics.throughput + " items" : "-";
-    wipInput.value = data.metrics.wip ? data.metrics.wip + " items" : "-";
+    initializeCfdForm(data);
   }
   if (data.chartType === "SCATTERPLOT") {
-    cfdDiv.classList.add("hidden");
-    scatterplotDiv.classList.remove("hidden");
-    workItemInput.value = data.ticketId || "";
-    leadTimeInput.value = data.metrics.leadTime ? data.metrics.leadTime + " days" : "-";
+    initializeScatterplotForm(data);
   }
   dateInput.value = formatDateToNumeric(data.date);
   chartTypeInput.value = data.chartType;

sonar-project.properties

@@ -0,0 +1 @@
+sonar.projectKey=pfizer_graphs-renderer

src/data-processor.js

@@ -56,6 +56,5 @@ export function processServiceData(serviceData, removedRepos = [], removedTicket
     }
     dataSet = dataSet.filter((t) => t.indexes && !t.indexes.some((i) => i.name === 'ticket_type' && removedTicketTypes.includes(i.value)));
   }
-  // console.log(dataSet);
   return dataSet;
 }

src/graphs/UIControlsRenderer.js

@@ -15,11 +15,14 @@ export default class UIControlsRenderer extends Renderer {
   brushGroup;
   brush;
   isManualBrushUpdate = true;
+  saveConfigsToBrowserStorage = false;
 
   constructor(data) {
     super(data);
-    // this.reportingRangeDays = localStorage.getItem('reportingRangeDays') || this.reportingRangeDays;
-    // this.timeInterval = localStorage.getItem('timeInterval') || this.timeInterval;
+    if (this.saveConfigsToBrowserStorage) {
+      this.reportingRangeDays = localStorage.getItem('reportingRangeDays') || this.reportingRangeDays;
+      this.timeInterval = localStorage.getItem('timeInterval') || this.timeInterval;
+    }
   }
 
   /**

src/graphs/cfd/CFDRenderer.js

@@ -598,25 +598,8 @@ class CFDRenderer extends UIControlsRenderer {
       const currentStateIndex = this.#getCurrentStateIndex(currentCumulativeCount, currentDataEntry);
       const currentDeliveredItems = currentDataEntry.delivered;
       const leadTimeDateBefore = this.#computeLeadTimeDate(currentDeliveredItems, filteredData);
-      let cycleTimeDateBefore = null;
-      let averageCycleTime = null;
-      let biggestCycleTime = 0;
-      let currentStateCumulativeCount = null;
-      let cycleTimesByState = {};
-      cycleTimesByState[this.states[0]] = 0;
-      for (let i = 0; i < this.states.length - 1; i++) {
-        let stateCumulativeCount = this.#getNoOfItems(currentDataEntry, this.states[i]);
-        let cycleTimeDate = this.#computeCycleTimeDate(stateCumulativeCount, i, filteredData);
-        cycleTimesByState[this.states[i + 1]] = cycleTimeDate ? Math.floor(calculateDaysBetweenDates(cycleTimeDate, currentDate)) : null;
-        if (cycleTimesByState[this.states[i + 1]] > biggestCycleTime) {
-          biggestCycleTime = cycleTimesByState[this.states[i + 1]];
-        }
-        if (currentStateIndex > 0 && i + 1 === currentStateIndex) {
-          cycleTimeDateBefore = cycleTimeDate;
-          averageCycleTime = cycleTimesByState[this.states[i + 1]];
-          currentStateCumulativeCount = stateCumulativeCount;
-        }
-      }
+      let { cycleTimeDateBefore, averageCycleTime, biggestCycleTime, currentStateCumulativeCount, cycleTimesByState } =
+        this.computeCycleTimeAndLeadTimeMetrics(currentDataEntry, filteredData, currentDate, currentStateIndex);
       const averageLeadTime = leadTimeDateBefore ? Math.floor(calculateDaysBetweenDates(leadTimeDateBefore, currentDate)) : null;
       const noOfItemsBefore = this.#getNoOfItems(currentDataEntry, this.states[this.states.indexOf('delivered')]);
       const noOfItemsAfter = this.#getNoOfItems(currentDataEntry, this.states[this.states.indexOf('analysis_active')]);
@@ -645,6 +628,29 @@ class CFDRenderer extends UIControlsRenderer {
     return {};
   }
 
+  computeCycleTimeAndLeadTimeMetrics(currentDataEntry, filteredData, currentDate, currentStateIndex) {
+    let cycleTimeDateBefore = null;
+    let averageCycleTime = null;
+    let biggestCycleTime = 0;
+    let currentStateCumulativeCount = null;
+    let cycleTimesByState = {};
+    cycleTimesByState[this.states[0]] = 0;
+    for (let i = 0; i < this.states.length - 1; i++) {
+      let stateCumulativeCount = this.#getNoOfItems(currentDataEntry, this.states[i]);
+      let cycleTimeDate = this.#computeCycleTimeDate(stateCumulativeCount, i, filteredData);
+      cycleTimesByState[this.states[i + 1]] = cycleTimeDate ? Math.floor(calculateDaysBetweenDates(cycleTimeDate, currentDate)) : null;
+      if (cycleTimesByState[this.states[i + 1]] > biggestCycleTime) {
+        biggestCycleTime = cycleTimesByState[this.states[i + 1]];
+      }
+      if (currentStateIndex > 0 && i + 1 === currentStateIndex) {
+        cycleTimeDateBefore = cycleTimeDate;
+        averageCycleTime = cycleTimesByState[this.states[i + 1]];
+        currentStateCumulativeCount = stateCumulativeCount;
+      }
+    }
+    return { cycleTimeDateBefore, averageCycleTime, biggestCycleTime, currentStateCumulativeCount, cycleTimesByState };
+  }
+
   #computeLeadTimeDate(currentDeliveredItems, filteredData) {
     for (const entry of filteredData) {
       const entryDate = new Date(entry.date);