add by month test chart

Author: JudahNour

cmd/gopogh-server/flake_chart.js

@@ -279,6 +279,98 @@ function displayTestAndEnvironmentChart(data, query) {
   chartsContainer.appendChild(flakeRateWeekContainer);
   const wChart = new google.visualization.LineChart(flakeRateWeekContainer);
   wChart.draw(weekChart, weekOptions);
+
+  const monthData = data.flakeByMonth
+  const monthChart = new google.visualization.DataTable();
+  monthChart.addColumn('date', 'Date');
+  monthChart.addColumn('number', 'Flake Percentage');
+  monthChart.addColumn({
+      type: 'string',
+      role: 'tooltip',
+      'p': {
+          'html': true
+      }
+  });
+  monthChart.addColumn('number', 'Duration');
+  monthChart.addColumn({
+      type: 'string',
+      role: 'tooltip',
+      'p': {
+          'html': true
+      }
+  });
+
+  console.log(monthChart)
+  monthChart.addRows(
+      monthData
+      .map(groupData => {
+          let dataArr = groupData.commitResultsAndDurations.split(',')
+          dataArr = dataArr.map((commit) => commit.split(":"))
+          const resultArr = dataArr.map((commit) => ({
+              id: commit[commit.length - 3],
+              status: (commit[commit.length - 2]).trim()
+          }))
+          const durationArr = dataArr.map((commit) => ({
+              id: commit[commit.length - 3],
+              status: (commit[commit.length - 2]).trim(),
+              duration: (commit[commit.length - 1]).trim()
+          }))
+
+          return [
+              new Date(groupData.startOfDate),
+              groupData.flakePercentage,
+              `<div style="padding: 1rem; font-family: 'Arial'; font-size: 14">
+          <b>Date:</b> ${groupData.startOfDate.toLocaleString([], {dateStyle: 'medium'})}<br>
+          <b>Flake Percentage:</b> ${groupData.flakePercentage.toFixed(2)}%<br>
+          <b>Jobs:</b><br>
+          ${resultArr.map(({ id, status }) => `  - <a href="${testGopoghLink(id, query.env, query.test, status)}">${id}</a> (${status})`).join("<br>")}
+          </div>`,
+              groupData.avgDuration,
+              `<div style="padding: 1rem; font-family: 'Arial'; font-size: 14">
+          <b>Date:</b> ${groupData.startOfDate.toLocaleString([], {dateStyle: 'medium'})}<br>
+          <b>Average Duration:</b> ${groupData.avgDuration.toFixed(2)}s<br>
+          <b>Jobs:</b><br>
+          ${durationArr.map(({ id, duration, status }) => `  - <a href="${testGopoghLink(id, query.env, query.test, status)}">${id}</a> (${duration}s)`).join("<br>")}
+          </div>`,
+          ]
+      })
+  );
+  const monthOptions = {
+      title: `Flake rate and duration by month of ${query.test} on ${query.env}`,
+      width: window.innerWidth,
+      height: window.innerHeight,
+      pointSize: 10,
+      pointShape: "circle",
+      series: {
+          0: {
+              targetAxisIndex: 0
+          },
+          1: {
+              targetAxisIndex: 1
+          },
+      },
+      vAxes: {
+          0: {
+              title: "Flake rate",
+              minValue: 0,
+              maxValue: 100
+          },
+          1: {
+              title: "Duration (seconds)"
+          },
+      },
+      colors: ['#dc3912', '#3366cc'],
+      tooltip: {
+          trigger: "selection",
+          isHtml: true
+      }
+  };
+  const flakeRateMonthContainer = document.createElement("div");
+  flakeRateMonthContainer.style.width = "100vw";
+  flakeRateMonthContainer.style.height = "100vh";
+  chartsContainer.appendChild(flakeRateMonthContainer);
+  const mChart = new google.visualization.LineChart(flakeRateMonthContainer);
+  mChart.draw(monthChart, monthOptions);
 }
 
 function displaySummaryChart(data) {

pkg/db/postgres.go

@@ -221,9 +221,29 @@ func (m *Postgres) GetTestCharts(env string, test string) (map[string]interface{
 	}
 	log.Printf("\nduration metric: took %f seconds to execute SQL query for flake rate and duration by week chart since start of handler", time.Since(start).Seconds())
 
+	// Groups the datetimes together by month, calculating flake percentage and aggregating the individual results/durations for each date
+	sqlQuery = fmt.Sprintf(`
+	SELECT
+	DATE_TRUNC('month', TestTime) AS StartOfDate,
+	AVG(Duration) AS AvgDuration,
+	ROUND(COALESCE(AVG(CASE WHEN Result = 'fail' THEN 1 ELSE 0 END) * 100, 0), 2) AS FlakePercentage,
+	STRING_AGG(CommitID || ': ' || Result || ': ' || Duration, ', ') AS CommitResultsAndDurations
+	FROM %s 
+	WHERE TestName = $1
+	GROUP BY StartOfDate
+	ORDER BY StartOfDate DESC
+	`, viewName)
+	var flakeByMonth []models.DBTestRateAndDuration
+	err = m.db.Select(&flakeByMonth, sqlQuery, test)
+	if err != nil {
+		return nil, fmt.Errorf("failed to execute SQL query for flake rate and duration by month chart: %v", err)
+	}
+	log.Printf("\nduration metric: took %f seconds to execute SQL query for flake rate and duration by month chart since start of handler", time.Since(start).Seconds())
+
 	data := map[string]interface{}{
-		"flakeByDay":  flakeByDay,
-		"flakeByWeek": flakeByWeek,
+		"flakeByDay":   flakeByDay,
+		"flakeByWeek":  flakeByWeek,
+		"flakeByMonth": flakeByMonth,
 	}
 	log.Printf("\nduration metric: took %f seconds to gather individual test chart data since start of handler\n\n", time.Since(start).Seconds())
 	return data, nil