Graph: Improves graph edit options in side pane (#24352)

* Graph: Improves graph edit options in side pane * Fixed spell issue and order * Fixed ts issue
2025-02-25 18:55:37 -06:00 · 2020-05-07 10:54:05 +02:00
parent 5800009951
commit 26f15233fb
11 changed files with 194 additions and 121 deletions
--- a/packages/grafana-ui/src/components/OptionsUI/units.tsx
+++ b/packages/grafana-ui/src/components/OptionsUI/units.tsx
@@ -7,5 +7,5 @@ export const UnitValueEditor: React.FC<FieldConfigEditorProps<string, UnitFieldC
  value,
  onChange,
 }) => {
-  return <UnitPicker value={value} onChange={onChange} useNewForms />;
+  return <UnitPicker value={value} onChange={onChange} />;
 };
--- a/packages/grafana-ui/src/components/UnitPicker/UnitPicker.story.tsx
+++ b/packages/grafana-ui/src/components/UnitPicker/UnitPicker.story.tsx
@@ -13,5 +13,4 @@ export default {
  },
 };

-export const simple = () => <UnitPicker useNewForms onChange={val => console.log(val)} />;
-export const old = () => <UnitPicker onChange={val => console.log(val)} />;
+export const simple = () => <UnitPicker onChange={val => console.log(val)} />;
--- a/packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx
+++ b/packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx
@@ -1,6 +1,4 @@
 import React, { PureComponent } from 'react';
-
-import { Select } from '../Forms/Legacy/Select/Select';
 import { Cascader, CascaderOption } from '../Cascader/Cascader';
 import { getValueFormats, SelectableValue } from '@grafana/data';

@@ -8,8 +6,6 @@ interface Props {
  onChange: (item?: string) => void;
  value?: string;
  width?: number;
-  /** Temporary flag that uses the new form styles. */
-  useNewForms?: boolean;
 }

 function formatCreateLabel(input: string) {
@@ -17,16 +13,12 @@ function formatCreateLabel(input: string) {
 }

 export class UnitPicker extends PureComponent<Props> {
-  static defaultProps = {
-    width: 12,
-  };
-
  onChange = (value: SelectableValue<string>) => {
    this.props.onChange(value.value);
  };

  render() {
-    const { value, width, useNewForms } = this.props;
+    const { value, width } = this.props;

    // Set the current selection
    let current: SelectableValue<string> | undefined = undefined;
@@ -46,17 +38,12 @@ export class UnitPicker extends PureComponent<Props> {
        }
        return sel;
      });
-      if (useNewForms) {
+
      return {
        label: group.text,
        value: group.text,
        items: options,
      };
-      }
-      return {
-        label: group.text,
-        options,
-      };
    });

    // Show the custom unit
@@ -64,8 +51,9 @@ export class UnitPicker extends PureComponent<Props> {
      current = { value, label: value };
    }

-    return useNewForms ? (
+    return (
      <Cascader
+        width={width}
        initialValue={current && current.label}
        allowCustomValue
        formatCreateLabel={formatCreateLabel}
@@ -73,17 +61,6 @@ export class UnitPicker extends PureComponent<Props> {
        placeholder="Choose"
        onSelect={this.props.onChange}
      />
-    ) : (
-      <Select
-        width={width}
-        defaultValue={current}
-        isSearchable={true}
-        allowCustomValue={true}
-        formatCreateLabel={formatCreateLabel}
-        options={groupOptions}
-        placeholder="Choose"
-        onChange={this.onChange}
-      />
    );
  }
 }
--- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
@@ -159,7 +159,7 @@ $scrollbarBorder: black;

 // Tables
 // -------------------------
-$table-bg-accent: $dark-6; // for striping
+$table-bg-accent: ${styleMixins.hoverColor(theme.colors.bg1, theme)}; // for striping
 $table-border: $dark-6; // table and cell border

 $table-bg-odd: $dark-3;
--- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
@@ -152,7 +152,7 @@ $scrollbarBorder: $gray-7;

 // Tables
 // -------------------------
-$table-bg-accent: $gray-5; // for striping
+$table-bg-accent: ${styleMixins.hoverColor(theme.colors.bg1, theme)};
 $table-border: $gray-3; // table and cell border

 $table-bg-odd: $gray-6;
--- a/public/app/plugins/panel/graph/axes_editor.html
+++ b/public/app/plugins/panel/graph/axes_editor.html
@@ -1,95 +1,192 @@
 <div class="editor-row">
-	<div class="section gf-form-group" ng-repeat="yaxis in ctrl.panel.yaxes">
-
+  <div class="gf-form-group" ng-repeat="yaxis in ctrl.panel.yaxes">
    <h5 class="section-heading" ng-show="$index === 0">Left Y</h5>
    <h5 class="section-heading" ng-show="$index === 1">Right Y</h5>

-		<gf-form-switch class="gf-form" label="Show" label-class="width-6" checked="yaxis.show" on-change="ctrl.render()"></gf-form-switch>
+    <gf-form-switch
+      class="gf-form"
+      label="Show"
+      label-class="width-6"
+      checked="yaxis.show"
+      on-change="ctrl.render()"
+    ></gf-form-switch>

    <div ng-if="yaxis.show">
-			<div class="gf-form">
+      <div class="gf-form gf-form--grow">
        <label class="gf-form-label width-6">Unit</label>
-        <unit-picker onChange="ctrl.setUnitFormat(yaxis)" value="yaxis.format" width="20" />
+        <unit-picker onChange="ctrl.setUnitFormat(yaxis)" value="yaxis.format" class="flex-grow-1" />
      </div>
    </div>

    <div class="gf-form">
      <label class="gf-form-label width-6">Scale</label>
      <div class="gf-form-select-wrapper max-width-20">
-					<select class="gf-form-input" ng-model="yaxis.logBase" ng-options="v as k for (k, v) in ctrl.logScales" ng-change="ctrl.render()"></select>
+        <select
+          class="gf-form-input"
+          ng-model="yaxis.logBase"
+          ng-options="v as k for (k, v) in ctrl.logScales"
+          ng-change="ctrl.render()"
+        ></select>
      </div>
    </div>

-			<div class="gf-form-inline">
    <div class="gf-form">
      <label class="gf-form-label width-6">Y-Min</label>
-					<input type="text" class="gf-form-input width-5" placeholder="auto" empty-to-null ng-model="yaxis.min" ng-change="ctrl.render()" ng-model-onblur>
+      <input
+        type="text"
+        class="gf-form-input"
+        placeholder="auto"
+        empty-to-null
+        ng-model="yaxis.min"
+        ng-change="ctrl.render()"
+        ng-model-onblur
+      />
    </div>
    <div class="gf-form">
      <label class="gf-form-label width-6">Y-Max</label>
-					<input type="text" class="gf-form-input width-5" placeholder="auto" empty-to-null ng-model="yaxis.max" ng-change="ctrl.render()" ng-model-onblur>
-				</div>
+      <input
+        type="text"
+        class="gf-form-input"
+        placeholder="auto"
+        empty-to-null
+        ng-model="yaxis.max"
+        ng-change="ctrl.render()"
+        ng-model-onblur
+      />
    </div>

    <div ng-if="yaxis.show">
      <div class="gf-form">
        <label class="gf-form-label width-6">Decimals</label>
-				<input type="number" class="gf-form-input max-width-20" placeholder="auto" empty-to-null bs-tooltip="'Override automatic decimal precision for y-axis'" data-placement="right" ng-model="yaxis.decimals" ng-change="ctrl.render()" ng-model-onblur>
+        <input
+          type="number"
+          class="gf-form-input width-5"
+          placeholder="auto"
+          empty-to-null
+          bs-tooltip="'Override automatic decimal precision for y-axis'"
+          data-placement="right"
+          ng-model="yaxis.decimals"
+          ng-change="ctrl.render()"
+          ng-model-onblur
+        />
      </div>

      <div class="gf-form">
        <label class="gf-form-label width-6">Label</label>
-				<input type="text" class="gf-form-input max-width-20" ng-model="yaxis.label" ng-change="ctrl.render()" ng-model-onblur>
+        <input
+          type="text"
+          class="gf-form-input max-width-20"
+          ng-model="yaxis.label"
+          ng-change="ctrl.render()"
+          ng-model-onblur
+        />
      </div>
    </div>
  </div>

-	<div class="section gf-form-group" aria-label={{ctrl.selectors.xAxisSection}}>
+  <div class="gf-form-group">
+    <h5 class="section-heading">Y-Axes</h5>
+    <gf-form-switch
+      class="gf-form"
+      label="Align Y-Axes"
+      label-class="width-6"
+      switch-class="width-5"
+      checked="ctrl.panel.yaxis.align"
+      on-change="ctrl.render()"
+    ></gf-form-switch>
+    <div class="gf-form" ng-show="ctrl.panel.yaxis.align">
+      <label class="gf-form-label width-6">
+        Level
+      </label>
+      <input
+        type="number"
+        class="gf-form-input width-6"
+        placeholder="0"
+        ng-model="ctrl.panel.yaxis.alignLevel"
+        ng-change="ctrl.render()"
+        ng-model-onblur
+        bs-tooltip="'Alignment of Y-axes are based on this value, starting from Y=0'"
+        data-placement="right"
+      />
+    </div>
+  </div>
+
+  <div class="gf-form-group" aria-label="{{ctrl.selectors.xAxisSection}}">
    <h5 class="section-heading">X-Axis</h5>
-		<gf-form-switch class="gf-form" label="Show" label-class="width-6" checked="ctrl.panel.xaxis.show" on-change="ctrl.render()"></gf-form-switch>
+    <gf-form-switch
+      class="gf-form"
+      label="Show"
+      label-class="width-6"
+      checked="ctrl.panel.xaxis.show"
+      on-change="ctrl.render()"
+    ></gf-form-switch>

    <div class="gf-form">
      <label class="gf-form-label width-6">Mode</label>
      <div class="gf-form-select-wrapper max-width-15">
-				<select class="gf-form-input" ng-model="ctrl.panel.xaxis.mode" ng-options="v as k for (k, v) in ctrl.xAxisModes" ng-change="ctrl.xAxisModeChanged()"> </select>
+        <select
+          class="gf-form-input"
+          ng-model="ctrl.panel.xaxis.mode"
+          ng-options="v as k for (k, v) in ctrl.xAxisModes"
+          ng-change="ctrl.xAxisModeChanged()"
+        >
+        </select>
      </div>
    </div>

    <!-- Series mode -->
    <div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'series'">
      <label class="gf-form-label width-6">Value</label>
-      <metric-segment-model property="ctrl.panel.xaxis.values[0]" options="ctrl.xAxisStatOptions" on-change="ctrl.xAxisValueChanged()" custom="false" css-class="width-10" select-mode="true"></metric-segment-model>
+      <metric-segment-model
+        property="ctrl.panel.xaxis.values[0]"
+        options="ctrl.xAxisStatOptions"
+        on-change="ctrl.xAxisValueChanged()"
+        custom="false"
+        css-class="width-10"
+        select-mode="true"
+      ></metric-segment-model>
    </div>

    <!-- Histogram mode -->
    <div class="gf-form" ng-if="ctrl.panel.xaxis.mode === 'histogram'">
      <label class="gf-form-label width-6">Buckets</label>
-			<input type="number" class="gf-form-input max-width-8" ng-model="ctrl.panel.xaxis.buckets" placeholder="auto" ng-change="ctrl.render()" ng-model-onblur bs-tooltip="'Number of buckets'" data-placement="right">
+      <input
+        type="number"
+        class="gf-form-input max-width-8"
+        ng-model="ctrl.panel.xaxis.buckets"
+        placeholder="auto"
+        ng-change="ctrl.render()"
+        ng-model-onblur
+        bs-tooltip="'Number of buckets'"
+        data-placement="right"
+      />
    </div>

    <div class="gf-form-inline" ng-if="ctrl.panel.xaxis.mode === 'histogram'">
      <div class="gf-form">
        <label class="gf-form-label width-6">X-Min</label>
-				<input type="number" class="gf-form-input width-5" placeholder="auto" empty-to-null ng-model="ctrl.panel.xaxis.min" ng-change="ctrl.render()" ng-model-onblur>
+        <input
+          type="number"
+          class="gf-form-input width-5"
+          placeholder="auto"
+          empty-to-null
+          ng-model="ctrl.panel.xaxis.min"
+          ng-change="ctrl.render()"
+          ng-model-onblur
+        />
      </div>
      <div class="gf-form">
        <label class="gf-form-label width-6">X-Max</label>
-				<input type="number" class="gf-form-input width-5" placeholder="auto" empty-to-null ng-model="ctrl.panel.xaxis.max" ng-change="ctrl.render()" ng-model-onblur>
+        <input
+          type="number"
+          class="gf-form-input width-5"
+          placeholder="auto"
+          empty-to-null
+          ng-model="ctrl.panel.xaxis.max"
+          ng-change="ctrl.render()"
+          ng-model-onblur
+        />
      </div>
    </div>
-
-		<div>
-			<br/>
-			<h5 class="section-heading">Y-Axes</h5>
-			<gf-form-switch class="gf-form" label="Align" tooltip="Align left and right Y-axes" label-class="width-6" switch-class="width-5" checked="ctrl.panel.yaxis.align" on-change="ctrl.render()"></gf-form-switch>
-			<div class="gf-form" ng-show="ctrl.panel.yaxis.align">
-				<label class="gf-form-label width-6">
-					Level
-				</label>
-				<input type="number" class="gf-form-input width-5" placeholder="0" ng-model="ctrl.panel.yaxis.alignLevel" ng-change="ctrl.render()" ng-model-onblur bs-tooltip="'Alignment of Y-axes are based on this value, starting from Y=0'" data-placement="right">
  </div>
-		</div>
-
-	</div>
-
 </div>
--- a/public/app/plugins/panel/graph/module.ts
+++ b/public/app/plugins/panel/graph/module.ts
@@ -167,7 +167,7 @@ class GraphCtrl extends MetricsPanelCtrl {

  onInitEditMode() {
    this.addEditorTab('Display', 'public/app/plugins/panel/graph/tab_display.html');
-    this.addEditorTab('Series overides', 'public/app/plugins/panel/graph/tab_series_overrides.html');
+    this.addEditorTab('Series overrides', 'public/app/plugins/panel/graph/tab_series_overrides.html');
    this.addEditorTab('Axes', axesEditorComponent);
    this.addEditorTab('Legend', 'public/app/plugins/panel/graph/tab_legend.html');
    this.addEditorTab('Thresholds', 'public/app/plugins/panel/graph/tab_thresholds.html');
--- a/public/app/plugins/panel/graph/tab_legend.html
+++ b/public/app/plugins/panel/graph/tab_legend.html
@@ -117,7 +117,7 @@
    <gf-form-switch
      class="gf-form"
      label="With only nulls"
-      label-class="width-10"
+      label-class="width-7"
      checked="ctrl.panel.legend.hideEmpty"
      on-change="ctrl.render()"
    >
@@ -125,7 +125,7 @@
    <gf-form-switch
      class="gf-form"
      label="With only zeros"
-      label-class="width-10"
+      label-class="width-7"
      checked="ctrl.panel.legend.hideZero"
      on-change="ctrl.render()"
    >
--- a/public/sass/_variables.dark.generated.scss
+++ b/public/sass/_variables.dark.generated.scss
@@ -161,7 +161,7 @@ $scrollbarBorder: black;

 // Tables
 // -------------------------
-$table-bg-accent: $dark-6; // for striping
+$table-bg-accent: #191b1e; // for striping
 $table-border: $dark-6; // table and cell border

 $table-bg-odd: $dark-3;
--- a/public/sass/_variables.light.generated.scss
+++ b/public/sass/_variables.light.generated.scss
@@ -154,7 +154,7 @@ $scrollbarBorder: $gray-7;

 // Tables
 // -------------------------
-$table-bg-accent: $gray-5; // for striping
+$table-bg-accent: #fafafa;
 $table-border: $gray-3; // table and cell border

 $table-bg-odd: $gray-6;
--- a/public/sass/components/_panel_graph.scss
+++ b/public/sass/components/_panel_graph.scss
@@ -171,7 +171,7 @@
    overflow: hidden;
  }

-  .graph-legend-series:nth-child(odd) {
+  .graph-legend-series:nth-child(even) {
    background: $table-bg-accent;
  }