feat: update Static Legend properties to allow hiding without nulling (#21364)

CHANGELOG.md

@@ -72,6 +72,7 @@ The prefix used for Prometheus metrics from the query controller has changed fro
 1. [21158](https://github.com/influxdata/influxdb/pull/21158): Replace unique resource IDs (UI assets, backup shards) with slugs to reduce cardinality of telemetry data.
 1. [21235](https://github.com/influxdata/influxdb/pull/21235): HTTP server errors output logs following the standard format.
 1. [21255](https://github.com/influxdata/influxdb/pull/21255): Upgrade Flux to v0.113.0.
+1. [21364](https://github.com/influxdata/influxdb/pull/21364): Update Static Legend properties to allow disabling without nulling
 
 ### Bug Fixes
 

dashboard.go

@@ -1178,6 +1178,7 @@ type ViewColor struct {
 type StaticLegend struct {
 	ColorizeRows         bool    `json:"colorizeRows,omitempty"`
 	HeightRatio          float64 `json:"heightRatio,omitempty"`
+	Hide                 bool    `json:"hide,omitempty"`
 	Opacity              float64 `json:"opacity,omitempty"`
 	OrientationThreshold int     `json:"orientationThreshold,omitempty"`
 	ValueAxis            string  `json:"valueAxis,omitempty"`

http/swagger.yml

@@ -9959,6 +9959,8 @@ components:
         heightRatio:
           type: number
           format: float
+        hide:
+          type: boolean
         opacity:
           type: number
           format: float

pkger/clone_resource.go

@@ -742,6 +742,7 @@ func convertCellView(cell influxdb.Cell) chart {
 	setStaticLegend := func(sl influxdb.StaticLegend) {
 		ch.StaticLegend.ColorizeRows = sl.ColorizeRows
 		ch.StaticLegend.HeightRatio = sl.HeightRatio
+		ch.StaticLegend.Hide = sl.Hide
 		ch.StaticLegend.Opacity = sl.Opacity
 		ch.StaticLegend.OrientationThreshold = sl.OrientationThreshold
 		ch.StaticLegend.ValueAxis = sl.ValueAxis
@@ -1081,6 +1082,7 @@ func convertChartToResource(ch chart) Resource {
 		fieldChartShade:                     ch.Shade,
 		fieldChartLegendColorizeRows:        ch.LegendColorizeRows,
 		fieldChartStaticLegendColorizeRows:  ch.StaticLegend.ColorizeRows,
+		fieldChartStaticLegendHide:          ch.StaticLegend.Hide,
 		fieldChartGeoAllowPanAndZoom:        ch.AllowPanAndZoom,
 		fieldChartGeoDetectCoordinateFields: ch.DetectCoordinateFields,
 	})

pkger/parser.go

@@ -1519,6 +1519,7 @@ func (p *Template) parseChart(dashMetaName string, chartIdx int, r Resource) (*c
 		if staticLeg, ok := ifaceToResource(r[fieldChartStaticLegend]); ok {
 			c.StaticLegend.ColorizeRows = staticLeg.boolShort(fieldChartStaticLegendColorizeRows)
 			c.StaticLegend.HeightRatio = staticLeg.float64Short(fieldChartStaticLegendHeightRatio)
+			c.StaticLegend.Hide = staticLeg.boolShort(fieldChartStaticLegendHide)
 			c.StaticLegend.Opacity = staticLeg.float64Short(fieldChartStaticLegendOpacity)
 			c.StaticLegend.OrientationThreshold = staticLeg.intShort(fieldChartStaticLegendOrientationThreshold)
 			c.StaticLegend.ValueAxis = staticLeg.stringShort(fieldChartStaticLegendValueAxis)

pkger/parser_models.go

@@ -1384,6 +1384,7 @@ func (a axes) hasAxes(expectedAxes ...string) []validationErr {
 type StaticLegend struct {
 	ColorizeRows         bool    `json:"colorizeRows,omitempty" yaml:"colorizeRows,omitempty"`
 	HeightRatio          float64 `json:"heightRatio,omitempty" yaml:"heightRatio,omitempty"`
+	Hide                 bool    `json:"hide,omitempty" yaml:"hide,omitempty"`
 	Opacity              float64 `json:"opacity,omitempty" yaml:"opacity,omitempty"`
 	OrientationThreshold int     `json:"orientationThreshold,omitempty" yaml:"orientationThreshold,omitempty"`
 	ValueAxis            string  `json:"valueAxis,omitempty" yaml:"valueAxis,omitempty"`
@@ -1393,6 +1394,7 @@ type StaticLegend struct {
 const (
 	fieldChartStaticLegendColorizeRows         = "colorizeRows"
 	fieldChartStaticLegendHeightRatio          = "heightRatio"
+	fieldChartStaticLegendHide                 = "hide"
 	fieldChartStaticLegendOpacity              = "opacity"
 	fieldChartStaticLegendOrientationThreshold = "orientationThreshold"
 	fieldChartStaticLegendValueAxis            = "valueAxis"
@@ -1403,6 +1405,7 @@ func (sl StaticLegend) influxStaticLegend() influxdb.StaticLegend {
 	return influxdb.StaticLegend{
 		ColorizeRows:         sl.ColorizeRows,
 		HeightRatio:          sl.HeightRatio,
+		Hide:                 sl.Hide,
 		Opacity:              sl.Opacity,
 		OrientationThreshold: sl.OrientationThreshold,
 		ValueAxis:            sl.ValueAxis,

pkger/parser_test.go

@@ -1358,6 +1358,7 @@ spec:
 						assert.Equal(t, 5, props.LegendOrientationThreshold)
 						assert.Equal(t, true, props.StaticLegend.ColorizeRows)
 						assert.Equal(t, 0.2, props.StaticLegend.HeightRatio)
+						assert.Equal(t, false, props.StaticLegend.Hide)
 						assert.Equal(t, 1.0, props.StaticLegend.Opacity)
 						assert.Equal(t, 5, props.StaticLegend.OrientationThreshold)
 						assert.Equal(t, "y", props.StaticLegend.ValueAxis)
@@ -1885,6 +1886,7 @@ spec:
 						assert.Equal(t, 5, props.LegendOrientationThreshold)
 						assert.Equal(t, true, props.StaticLegend.ColorizeRows)
 						assert.Equal(t, 0.2, props.StaticLegend.HeightRatio)
+						assert.Equal(t, false, props.StaticLegend.Hide)
 						assert.Equal(t, 1.0, props.StaticLegend.Opacity)
 						assert.Equal(t, 5, props.StaticLegend.OrientationThreshold)
 						assert.Equal(t, "y", props.StaticLegend.ValueAxis)
@@ -2358,6 +2360,7 @@ spec:
 						assert.Equal(t, 5, props.LegendOrientationThreshold)
 						assert.Equal(t, true, props.StaticLegend.ColorizeRows)
 						assert.Equal(t, 0.2, props.StaticLegend.HeightRatio)
+						assert.Equal(t, false, props.StaticLegend.Hide)
 						assert.Equal(t, 1.0, props.StaticLegend.Opacity)
 						assert.Equal(t, 5, props.StaticLegend.OrientationThreshold)
 						assert.Equal(t, "y", props.StaticLegend.ValueAxis)

pkger/service_test.go

@@ -2573,7 +2573,7 @@ func TestService(t *testing.T) {
 									Type:                       influxdb.ViewPropertyTypeSingleStatPlusLine,
 									Axes:                       newAxes(),
 									DecimalPlaces:              influxdb.DecimalPlaces{IsEnforced: true, Digits: 1},
-									StaticLegend:               influxdb.StaticLegend{ColorizeRows: true, HeightRatio: 0.2, Opacity: 1.0, OrientationThreshold: 5, ValueAxis: "y", WidthRatio: 1.0},
+									StaticLegend:               influxdb.StaticLegend{ColorizeRows: true, HeightRatio: 0.2, Hide: false, Opacity: 1.0, OrientationThreshold: 5, ValueAxis: "y", WidthRatio: 1.0},
 									Note:                       "a note",
 									Prefix:                     "pre",
 									Suffix:                     "suf",
@@ -2610,7 +2610,7 @@ func TestService(t *testing.T) {
 									Type:                       influxdb.ViewPropertyTypeXY,
 									Axes:                       newAxes(),
 									Geom:                       "step",
-									StaticLegend:               influxdb.StaticLegend{ColorizeRows: true, HeightRatio: 0.2, Opacity: 1.0, OrientationThreshold: 5, ValueAxis: "y", WidthRatio: 1.0},
+									StaticLegend:               influxdb.StaticLegend{ColorizeRows: true, HeightRatio: 0.2, Hide: false, Opacity: 1.0, OrientationThreshold: 5, ValueAxis: "y", WidthRatio: 1.0},
 									Note:                       "a note",
 									Queries:                    []influxdb.DashboardQuery{newQuery()},
 									ShadeBelow:                 true,
@@ -2646,7 +2646,7 @@ func TestService(t *testing.T) {
 									Type:                       influxdb.ViewPropertyTypeBand,
 									Axes:                       newAxes(),
 									Geom:                       "step",
-									StaticLegend:               influxdb.StaticLegend{ColorizeRows: true, HeightRatio: 0.2, Opacity: 1.0, OrientationThreshold: 5, ValueAxis: "y", WidthRatio: 1.0},
+									StaticLegend:               influxdb.StaticLegend{ColorizeRows: true, HeightRatio: 0.2, Hide: false, Opacity: 1.0, OrientationThreshold: 5, ValueAxis: "y", WidthRatio: 1.0},
 									Note:                       "a note",
 									Queries:                    []influxdb.DashboardQuery{newQuery()},
 									HoverDimension:             "y",

pkger/testdata/dashboard_band.yml

@@ -42,6 +42,7 @@ spec:
       staticLegend:
         colorizeRows: true
         heightRatio: 0.2
+        hide: false
         opacity: 1.0
         orientationThreshold: 5
         valueAxis: "y"

pkger/testdata/dashboard_single_stat_plus_line.json

@@ -39,6 +39,7 @@
           "staticLegend": {
             "colorizeRows": true,
             "heightRatio": 0.2,
+            "hide": false,
             "opacity": 1.0,
             "orientationThreshold": 5,
             "valueAxis": "y",

pkger/testdata/dashboard_single_stat_plus_line.yml

@@ -39,6 +39,7 @@ spec:
       staticLegend:
         colorizeRows: true
         heightRatio: 0.2
+        hide: false
         opacity: 1.0
         orientationThreshold: 5
         valueAxis: "y"

pkger/testdata/dashboard_xy.json

@@ -38,6 +38,7 @@
           "staticLegend": {
             "colorizeRows": true,
             "heightRatio": 0.2,
+            "hide": false,
             "opacity": 1.0,
             "orientationThreshold": 5,
             "valueAxis": "y",

pkger/testdata/dashboard_xy.yml

@@ -37,6 +37,7 @@ spec:
       staticLegend:
         colorizeRows: true
         heightRatio: 0.2
+        hide: false
         opacity: 1.0
         orientationThreshold: 5
         valueAxis: "y"

ui/mocks/dummyData.ts

@@ -976,7 +976,6 @@ export const viewProperties: ViewProperties = {
     },
   },
   type: 'line-plus-single-stat',
-  legend: {},
   colors: [
     {
       id: 'base',

ui/src/cloud/constants/websiteMonitoringTemplate.ts

@@ -353,7 +353,6 @@ export default {
               },
             },
             type: 'line-plus-single-stat',
-            legend: {},
             colors: [
               {
                 id: 'base',
@@ -910,7 +909,6 @@ export default {
               },
             },
             type: 'line-plus-single-stat',
-            legend: {},
             colors: [
               {
                 id: 'base',

ui/src/mockAppState.tsx

@@ -187,7 +187,6 @@ export const mockAppState = {
                 value: 0,
               },
             ],
-            legend: {},
             note: '',
             showNoteWhenEmpty: false,
             axes: {

ui/src/notebooks/pipes/TestFlux/index.ts

@@ -14,7 +14,6 @@ register({
     properties: {
       type: 'xy',
       position: 'overlaid',
-      legend: {},
       note: '',
       showNoteWhenEmpty: false,
       axes: {

ui/src/notebooks/pipes/Visualization/index.ts

@@ -13,7 +13,6 @@ register({
     properties: {
       type: 'xy',
       position: 'overlaid',
-      legend: {},
       note: '',
       showNoteWhenEmpty: false,
       axes: {

ui/src/shared/utils/mocks/resourceToTemplate.ts

@@ -78,7 +78,6 @@ export const myView: View = {
       },
     },
     type: 'xy',
-    legend: {},
     geom: 'line',
     colors: [],
     note: '',

ui/src/shared/utils/resourceToTemplate.test.ts

@@ -391,7 +391,6 @@ describe('resourceToTemplate', () => {
                     },
                   },
                   type: 'xy',
-                  legend: {},
                   geom: 'line',
                   colors: [],
                   note: '',

ui/src/views/helpers/index.ts

@@ -68,7 +68,6 @@ export function defaultLineViewProperties() {
   return {
     queries: [defaultViewQuery()],
     colors: DEFAULT_LINE_COLORS as Color[],
-    legend: {},
     note: '',
     showNoteWhenEmpty: false,
     axes: {
@@ -96,7 +95,6 @@ export function defaultBandViewProperties() {
   return {
     queries: [defaultViewQuery()],
     colors: DEFAULT_LINE_COLORS as Color[],
-    legend: {},
     note: '',
     showNoteWhenEmpty: false,
     axes: {
@@ -222,7 +220,6 @@ const NEW_VIEW_CREATORS = {
       ...defaultSingleStatViewProperties(),
       type: 'single-stat',
       shape: 'chronograf-v2',
-      legend: {},
     },
   }),
   gauge: (): NewView<GaugeViewProperties> => ({
@@ -231,7 +228,6 @@ const NEW_VIEW_CREATORS = {
       ...defaultGaugeViewProperties(),
       type: 'gauge',
       shape: 'chronograf-v2',
-      legend: {},
     },
   }),
   'line-plus-single-stat': (): NewView<LinePlusSingleStatProperties> => ({