Merge branch 'main' into renovate/node-18.x

lyft · Mar 25, 2024 · e14238a · e14238a
2 parents 1c40ab0 + 6c719a3
commit e14238a
Show file tree

Hide file tree

Showing 34 changed files with 597 additions and 148 deletions.
diff --git a/.github/workflows/api.yml b/.github/workflows/api.yml
@@ -22,7 +22,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-go@v3
         with:
-          go-version: 1.21.x
+          go-version: 1.22.x
       - name: Set up Node
         uses: actions/setup-node@v3
         with:
@@ -36,7 +36,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-go@v3
         with:
-          go-version: 1.21.x
+          go-version: 1.22.x
       - name: lint
         run: make api-lint
 
diff --git a/.github/workflows/backend.yml b/.github/workflows/backend.yml
@@ -19,7 +19,7 @@ jobs:
       - uses: actions/setup-go@v3
         id: setup-go
         with:
-          go-version: 1.21.x
+          go-version: 1.22.x
       - name: go mod cache
         uses: actions/cache@v4
         with:
@@ -44,7 +44,7 @@ jobs:
       - uses: actions/setup-go@v3
         id: setup-go
         with:
-          go-version: 1.21.x
+          go-version: 1.22.x
       - name: go mod cache
         uses: actions/cache@v4
         with:
@@ -69,6 +69,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+      - uses: actions/setup-go@v3
+        id: setup-go
+        with:
+          go-version: 1.22.x
       - run: make backend-integration-test
   lint:
     runs-on: ubuntu-latest
@@ -77,7 +81,7 @@ jobs:
       - uses: actions/setup-go@v3
         id: setup-go
         with:
-          go-version: 1.21.x
+          go-version: 1.22.x
       - name: go mod cache
         uses: actions/cache@v4
         with:

diff --git a/.github/workflows/frontend.yml b/.github/workflows/frontend.yml
@@ -82,7 +82,7 @@ jobs:
       - uses: actions/setup-go@v3
         id: setup-go
         with:
-          go-version: 1.21.x
+          go-version: 1.22.x
       - uses: actions/setup-node@v3
         with:
           node-version: '18.x'

diff --git a/.github/workflows/license_review.yml b/.github/workflows/license_review.yml
@@ -16,6 +16,10 @@ jobs:
       working-directory: ./tools/license-finder
     steps:
       - uses: actions/checkout@v3
+      - uses: actions/setup-go@v3
+        id: setup-go
+        with:
+          go-version: 1.22.x
       - name: Install Ruby
         uses: ruby/setup-ruby@v1
         with:

diff --git a/.github/workflows/scaffolding.yml b/.github/workflows/scaffolding.yml
@@ -18,7 +18,7 @@ jobs:
           path: ${{ env.PACKAGEPATH }}
       - uses: actions/setup-go@v3
         with:
-          go-version: 1.21.x
+          go-version: 1.22.x
       - uses: actions/setup-node@v3
         with:
           node-version: '18.x'

diff --git a/backend/gateway/gateway_test.go b/backend/gateway/gateway_test.go
@@ -106,7 +106,7 @@ func TestGetStatsReporterConfiguration(t *testing.T) {
 		{
 			cfg: &gatewayv1.Config{Gateway: &gatewayv1.GatewayOptions{
 				Stats: &gatewayv1.Stats{
-					Reporter: &gatewayv1.Stats_PrometheusReporter_{PrometheusReporter: &gatewayv1.Stats_PrometheusReporter{HandlerPath: "foo"}},
+					Reporter: &gatewayv1.Stats_PrometheusReporter_{PrometheusReporter: &gatewayv1.Stats_PrometheusReporter{HandlerPath: "foo.com/path"}},
 				},
 			}},
 			prefix:             "clutch",

diff --git a/backend/go.mod b/backend/go.mod
@@ -1,6 +1,6 @@
 module github.com/lyft/clutch/backend
 
-go 1.21
+go 1.22
 
 require (
 	github.com/DATA-DOG/go-sqlmock v1.5.0

diff --git a/docs/_website/generator/go.mod b/docs/_website/generator/go.mod
@@ -1,6 +1,6 @@
 module github.com/lyft/clutch/docs/website/generator
 
-go 1.21
+go 1.22
 
 require (
 	github.com/Masterminds/sprig/v3 v3.2.3

diff --git a/frontend/packages/core/src/AppLayout/user.tsx b/frontend/packages/core/src/AppLayout/user.tsx
@@ -90,6 +90,8 @@ const AvatarListItemIcon = styled(ListItemIcon)({
 const AvatarListItemText = styled(MuiListItemText)(({ theme }: { theme: Theme }) => ({
   paddingLeft: "16px",
   margin: "0px",
+  wordBreak: "break-all",
+  textWrap: "wrap",
   ".MuiTypography-root": {
     color: alpha(theme.palette.secondary[900], 0.9),
     fontSize: "14px",

diff --git a/frontend/packages/core/src/Charts/linearTimeline.tsx b/frontend/packages/core/src/Charts/linearTimeline.tsx
@@ -10,6 +10,8 @@ import {
   YAxis,
 } from "recharts";
 
+import { useTheme } from "../AppProvider/themes";
+
 import { calculateDomainEdges, calculateTicks, localTimeFormatter } from "./helpers";
 import type { CustomTooltipProps, LinearTimelineData, LinearTimelineStylingProps } from "./types";
 
@@ -46,6 +48,8 @@ const LinearTimeline = ({
   tooltipFormatterFunc = null,
   stylingProps = {},
 }: LinearTimelineProps) => {
+  const theme = useTheme();
+
   const combinedData = Object.keys(data).reduce((acc, lane) => {
     return [...acc, ...data[lane].points];
   }, []);
@@ -86,8 +90,11 @@ const LinearTimeline = ({
       return (
         <div
           style={{
-            backgroundColor: stylingProps?.tooltipBackgroundColor,
-            color: stylingProps?.tooltipTextColor,
+            backgroundColor:
+              stylingProps?.tooltipBackgroundColor ||
+              theme.colors.charts.linearTimeline.tooltipBackgroundColor,
+            color:
+              stylingProps?.tooltipTextColor || theme.colors.charts.linearTimeline.tooltipTextColor,
           }}
         >
           {localTimeFormatter(payload[0].value)}
@@ -102,8 +109,11 @@ const LinearTimeline = ({
     <ResponsiveContainer width="100%" height="100%">
       <ScatterChart>
         <CartesianGrid
-          fill={stylingProps?.gridBackgroundColor ?? "black"}
-          stroke={stylingProps?.gridStroke ?? "white"}
+          fill={
+            stylingProps?.gridBackgroundColor ??
+            theme.colors.charts.linearTimeline.gridBackgroundColor
+          }
+          stroke={stylingProps?.gridStroke ?? theme.colors.charts.linearTimeline.gridStroke}
         />
         <XAxis
           dataKey={xAxisDataKey}

diff --git a/frontend/packages/core/src/Charts/pie.tsx b/frontend/packages/core/src/Charts/pie.tsx
@@ -1,4 +1,6 @@
 import React, { PureComponent } from "react";
+import { ThemeContext } from "@emotion/react";
+import type { Theme } from "@mui/material";
 import {
   Cell,
   Label,
@@ -10,6 +12,8 @@ import {
   Tooltip,
 } from "recharts";
 
+import styled from "../styled";
+
 import type { PieChartData } from "./types";
 
 export interface PieChartProps {
@@ -90,22 +94,13 @@ interface PieChartState {
   activeIndex?: number;
 }
 
-const DEFAULT_COLORS = [
-  "#651FFF",
-  "#FF4081",
-  "#0091EA",
-  "#00695C",
-  "#9E9D24",
-  "#880E4F",
-  "#01579B",
-  "#F4511E",
-  "#009688",
-  "#C2185B",
-  "#1A237E",
-  "#7C4DFF",
-  "#88451D",
-  "#AA00FF",
-];
+const ChartLabelPrimary = styled("text")(({ theme }: { theme: Theme }) => ({
+  fill: theme.colors.charts.pie.labelPrimary,
+}));
+
+const ChartLabelSecondary = styled("text")(({ theme }: { theme: Theme }) => ({
+  fill: theme.colors.charts.pie.labelSecondary,
+}));
 
 const renderActiveShape = (props, options) => {
   const RADIAN = Math.PI / 180;
@@ -161,12 +156,12 @@ const renderActiveShape = (props, options) => {
       />
       <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" />
       <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
-      <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#333">
+      <ChartLabelPrimary x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor}>
         {payload.name}
-      </text>
-      <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} dy={18} textAnchor={textAnchor} fill="#999">
+      </ChartLabelPrimary>
+      <ChartLabelSecondary x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} dy={18} textAnchor={textAnchor}>
         {`${value} (${(percent * 100).toFixed(2)}%)`}
-      </text>
+      </ChartLabelSecondary>
     </g>
   );
 };
@@ -219,6 +214,8 @@ class PieChart extends PureComponent<PieChartProps, PieChartState> {
       tooltip,
     } = this.props;
 
+    const { colors } = this.context;
+
     const chartOptions = {
       activeTooltip: typeof activeTooltip === "boolean" ? activeTooltip : true,
       activeTooltipOptions: typeof activeTooltip !== "boolean" ? { ...activeTooltip } : {},
@@ -270,7 +267,7 @@ class PieChart extends PureComponent<PieChartProps, PieChartState> {
       >
         <Pie
           data={data}
-          fill={DEFAULT_COLORS[0]}
+          fill={colors.charts.common.data[0]}
           dataKey="value"
           onMouseEnter={this.onPieEnter}
           {...chartOptions.dimensions}
@@ -280,7 +277,9 @@ class PieChart extends PureComponent<PieChartProps, PieChartState> {
             <Cell
               // eslint-disable-next-line react/no-array-index-key
               key={`cell-${index}`}
-              fill={entry.color ?? DEFAULT_COLORS[index % DEFAULT_COLORS.length]}
+              fill={
+                entry.color ?? colors.charts.common.data[index % colors.charts.common.data.length]
+              }
             />
           ))}
           {centerLabel && <Label content={<CenterLabel options={centerLabel} />} />}
@@ -301,4 +300,6 @@ class PieChart extends PureComponent<PieChartProps, PieChartState> {
   }
 }
 
+PieChart.contextType = ThemeContext;
+
 export { PieChart };
diff --git a/frontend/packages/core/src/Charts/stories/linearTimeline.stories.tsx b/frontend/packages/core/src/Charts/stories/linearTimeline.stories.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import type { Meta } from "@storybook/react";
 
+import { useTheme } from "../../AppProvider/themes";
 import styled from "../../styled";
 import LinearTimeline from "../linearTimeline";
 import type { LinearTimelineData } from "../types";
@@ -16,9 +17,18 @@ const ChartContainer = styled("div")({
 });
 
 export const Primary = () => {
+  const theme = useTheme();
   const mockData: LinearTimelineData = {
-    deploys: { points: [{ timestamp: 1588884888 }], shape: "cross", color: "purple" },
-    "k8s events": { points: [{ timestamp: 1588985888 }], shape: "triangle", color: "blue" },
+    deploys: {
+      points: [{ timestamp: 1588884888 }],
+      shape: "cross",
+      color: theme.colors.charts.common.data[1],
+    },
+    "k8s events": {
+      points: [{ timestamp: 1588985888 }],
+      shape: "triangle",
+      color: theme.colors.charts.common.data[6],
+    },
     explosions: {
       points: [
         { timestamp: 1588788888 },
@@ -36,7 +46,7 @@ export const Primary = () => {
         { timestamp: 1589807088 },
       ],
       shape: "star",
-      color: "green",
+      color: theme.colors.charts.common.data[2],
     },
   };
   return (
@@ -47,9 +57,18 @@ export const Primary = () => {
 };
 
 export const ColoredChart = () => {
+  const theme = useTheme();
   const mockData: LinearTimelineData = {
-    deploys: { points: [{ timestamp: 1588884888 }], shape: "cross", color: "purple" },
-    "k8s events": { points: [{ timestamp: 1588985888 }], shape: "triangle", color: "blue" },
+    deploys: {
+      points: [{ timestamp: 1588884888 }],
+      shape: "cross",
+      color: theme.colors.red[500],
+    },
+    "k8s events": {
+      points: [{ timestamp: 1588985888 }],
+      shape: "triangle",
+      color: theme.colors.amber[500],
+    },
     explosions: {
       points: [
         { timestamp: 1588788888 },
@@ -67,7 +86,7 @@ export const ColoredChart = () => {
         { timestamp: 1589807088 },
       ],
       shape: "star",
-      color: "black",
+      color: theme.colors.green[500],
     },
   };
   return (
@@ -76,11 +95,11 @@ export const ColoredChart = () => {
         data={mockData}
         xAxisDataKey="timestamp"
         stylingProps={{
-          xAxisStroke: "red",
-          tooltipBackgroundColor: "blue",
-          tooltipTextColor: "white",
-          gridBackgroundColor: "green",
-          gridStroke: "yellow",
+          xAxisStroke: theme.colors.blue[500],
+          tooltipBackgroundColor: theme.colors.blue[200],
+          tooltipTextColor: theme.colors.blue[900],
+          gridBackgroundColor: theme.colors.blue[100],
+          gridStroke: theme.colors.blue[300],
         }}
       />
     </ChartContainer>