Is there "disabled" attribute for grafana ui components

abhinandan13 · May 19, 2020, 7:59am

Hi,
I am using <Segment/> from @grafana/ui.I would like to know is there a way to make this component disabled based on the certain value of state,because i was unable to find the disabled attribute in <Segment/>

vsergeyev · May 19, 2020, 8:08am

Hello @abhinandan13

Please try regular disabled attribute:

<Segment disabled={value} ...

I use it for UI component:

github.com

vsergeyev/loudml-grafana-app/blob/master/src/panel/GraphPanelController.tsx#L524


      appEvents.emit(AppEvents.alertError, [err.message]);
      return;
    });
}

render() {
  const data = this.data;

  return (
    <>
      <Button size="sm" className="btn btn-inverse" disabled={!this.isValid()} onClick={this.onCreateBaselineClick.bind(this)}>
        <i className="fa fa-graduation-cap fa-fw"></i>
        Create Baseline
      </Button>
      <Tooltip placement="top" content={<LoudMLTooltip data={data} />}>
        <span className="gf-form-help-icon">
          <i className="fa fa-info-circle" />
        </span>
      </Tooltip>
    </>
  );

Regards,
V.

abhinandan13 · May 19, 2020, 8:52am

@vsergeyev thanks for the reply,but when i use the disable attribute in <Segment> i get an error saying

Property ‘disabled’ does not exist on type ‘IntrinsicAttributes & SegmentSyncProps & { children?: ReactNode; }’.

Here is a snapshot of my code

alexkhomenko · May 19, 2020, 12:29pm

Segment doesn’t have a disabled prop. You can se the list of the available props at grafana/ui storybook page: https://developers.grafana.com/ui/latest/index.html?path=/docs/data-source-segment-segmentsync--array-options

vsergeyev · May 19, 2020, 2:18pm

Setting className or overriding onChange may help to make it disabled:

github.com

grafana/grafana/blob/master/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx#L44


      onChange({ value: input.value as any, label: input.value });
    } else {
      onClickOutside();
    }
  }
});

return (
  <div ref={ref}>
    <Select
      className={cx(
        css`
          width: ${width > 120 ? width : 120}px;
        `
      )}
      noOptionsMessage={() => noOptionsMessage}
      placeholder=""
      autoFocus={true}
      isOpen={true}
      onChange={onChange}
      options={options}

Topic		Replies	Views
@grafana/ui Segment Usage Guidance Grafana Plugin Development	1	770	May 29, 2020
Anyway to show Line Enable/Disable data draw in any plugin Grafana	0	498	January 22, 2020
Adding Pagination to Table Plugin Grafana Plugin Development plugins	5	820	September 12, 2023
Datasource plugin: show label instead of value in the UI, and store value only Grafana Plugin Development	2	630	June 27, 2020
How to render React Node in Table cells in Table component of @grafana/ui? Grafana Plugin Development grafana-ui	2	255	January 31, 2024

Is there "disabled" attribute for grafana ui components

Related topics