Merge remote-tracking branch 'origin/main' into ds-apiserver-with-configs

2025-08-22 20:24:22 +03:00
parent 290e8a97f1 1cb90cd3b2
commit cf89fb2a13
6 changed files with 32 additions and 20 deletions
@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import React from 'react';

 import { GrafanaTheme2 } from '@grafana/data';
-import { Alert, Box, Stack, TextLink, useStyles2 } from '@grafana/ui';
+import { Alert, Box, Stack, TextLink, Text, useStyles2 } from '@grafana/ui';

 import { DatabaseConnectionSection } from './DatabaseConnectionSection';
 import { LeftSideBar } from './LeftSideBar';
@@ -22,7 +22,11 @@ export const ConfigEditor: React.FC<Props> = ({ onOptionsChange, options }: Prop
      </div>
      <Box width="60%" flex="1 1 auto" minWidth={CONTAINER_MIN_WIDTH}>
        <Stack direction="column">
-          <Alert severity="info" title="You are viewing a new design for the InfluxDB configuration settings.">
+          <Alert
+            severity="info"
+            title="You are viewing a new design for the InfluxDB configuration settings."
+            className={styles.alertHeight}
+          >
            <>
              <TextLink
                href="https://docs.google.com/forms/d/e/1FAIpQLSdi-zyX3c51vh937UKhNYYxhljUnFi6dQSlZv50mES9NrK-ig/viewform"
@@ -34,6 +38,9 @@ export const ConfigEditor: React.FC<Props> = ({ onOptionsChange, options }: Prop
              to help us make it even better.
            </>
          </Alert>
+          <Text color="secondary" element="p" italic>
+            Fields marked with * are required
+          </Text>
          <UrlAndAuthenticationSection options={options} onOptionsChange={onOptionsChange} />
          <DatabaseConnectionSection options={options} onOptionsChange={onOptionsChange} />
        </Stack>
@@ -54,5 +61,8 @@ const getStyles = (theme: GrafanaTheme2) => {
        display: 'none',
      },
    }),
+    alertHeight: css({
+      width: '100px',
+    }),
  };
 };
@@ -21,7 +21,7 @@ export const InfluxFluxDBConnection = (props: Props) => {
  return (
    <>
      <InlineFieldRow>
-        <InlineField label="Organization" labelWidth={DB_SETTINGS_LABEL_WIDTH} grow>
+        <InlineField label="Organization" labelWidth={DB_SETTINGS_LABEL_WIDTH} grow required>
          <Input
            id="organization"
            placeholder="myorg"
@@ -32,7 +32,7 @@ export const InfluxFluxDBConnection = (props: Props) => {
        </InlineField>
      </InlineFieldRow>
      <InlineFieldRow>
-        <InlineField labelWidth={DB_SETTINGS_LABEL_WIDTH} label="Default Bucket" grow>
+        <InlineField labelWidth={DB_SETTINGS_LABEL_WIDTH} label="Default Bucket" grow required>
          <Input
            id="default-bucket"
            onBlur={trackInfluxDBConfigV2FluxDBDetailsDefaultBucketInputField}
@@ -43,7 +43,7 @@ export const InfluxFluxDBConnection = (props: Props) => {
        </InlineField>
      </InlineFieldRow>
      <InlineFieldRow>
-        <InlineField labelWidth={DB_SETTINGS_LABEL_WIDTH} label="Token" grow>
+        <InlineField labelWidth={DB_SETTINGS_LABEL_WIDTH} label="Token" grow required>
          <SecretInput
            id="token"
            isConfigured={Boolean(secureJsonFields && secureJsonFields.token)}
@@ -20,7 +20,7 @@ export const InfluxInfluxQLDBConnection = (props: Props) => {
  return (
    <>
      <InlineFieldRow>
-        <InlineField label="Database" labelWidth={DB_SETTINGS_LABEL_WIDTH} grow>
+        <InlineField label="Database" labelWidth={DB_SETTINGS_LABEL_WIDTH} grow required>
          <Input
            id="database"
            placeholder="mydb"
@@ -31,7 +31,7 @@ export const InfluxInfluxQLDBConnection = (props: Props) => {
        </InlineField>
      </InlineFieldRow>
      <InlineFieldRow>
-        <InlineField label="User" labelWidth={DB_SETTINGS_LABEL_WIDTH} grow>
+        <InlineField label="User" labelWidth={DB_SETTINGS_LABEL_WIDTH} grow required>
          <Input
            id="user"
            placeholder="myuser"
@@ -42,7 +42,13 @@ export const InfluxInfluxQLDBConnection = (props: Props) => {
        </InlineField>
      </InlineFieldRow>
      <InlineFieldRow>
-        <InlineField label="Password" labelWidth={DB_SETTINGS_LABEL_WIDTH} grow>
+        <InlineField
+          label="Password"
+          labelWidth={DB_SETTINGS_LABEL_WIDTH}
+          tooltip="Enter the token used to query the database. You can find this on the Tokens page in the InfluxDB UI."
+          grow
+          required
+        >
          <SecretInput
            id="password"
            isConfigured={Boolean(options.secureJsonFields && options.secureJsonFields.password)}
@@ -19,7 +19,7 @@ export const InfluxSQLDBConnection = (props: Props) => {
  return (
    <>
      <InlineFieldRow>
-        <InlineField label="Database" labelWidth={DB_SETTINGS_LABEL_WIDTH} grow>
+        <InlineField label="Database" labelWidth={DB_SETTINGS_LABEL_WIDTH} grow required>
          <Input
            id="database"
            placeholder="mydb"
@@ -30,7 +30,7 @@ export const InfluxSQLDBConnection = (props: Props) => {
        </InlineField>
      </InlineFieldRow>
      <InlineFieldRow>
-        <InlineField labelWidth={DB_SETTINGS_LABEL_WIDTH} label="Token" grow>
+        <InlineField labelWidth={DB_SETTINGS_LABEL_WIDTH} label="Token" grow required>
          <SecretInput
            id="token"
            isConfigured={Boolean(secureJsonFields && secureJsonFields.token)}
@@ -11,6 +11,7 @@ export const LeftSideBar = ({ pdcInjected }: LeftSideBarProps) => {
  return (
    <Stack>
      <Box flex={1} marginY={10}>
+        <Box height="75px"></Box>
        <Text element="h4">InfluxDB</Text>
        <Box paddingTop={2}>
          {headers.map((header, index) => (
@@ -80,19 +80,14 @@ export const UrlAndAuthenticationSection = (props: Props) => {
      >
        <Text color="secondary">
          Enter the URL of your InfluxDB instance, then select your product and query language. This will determine the
-          available settings and authentication methods in the next steps. If you are unsure what product you are using,
-          view the{' '}
-          <TextLink href="https://docs.influxdata.com/" external>
-            InfluxDB Docs
-          </TextLink>
-          .
+          available settings and authentication methods in the next steps.
        </Text>

        <Box direction="column" gap={2} marginTop={3}>
-          <Field label={<div style={{ marginBottom: '5px' }}>URL</div>} noMargin>
+          <Field label={<div style={{ marginBottom: '5px' }}>URL *</div>} noMargin required>
            <Input
              data-testid="influxdb-v2-config-url-input"
-              placeholder="http://localhost:8086/"
+              placeholder="example: http://localhost:8086/"
              onChange={onUrlChange}
              value={options.url || ''}
              onBlur={trackInfluxDBConfigV2URLInputField}
@@ -102,7 +97,7 @@ export const UrlAndAuthenticationSection = (props: Props) => {
          <Box marginTop={2}>
            <Stack direction="row" gap={2}>
              <Box flex={1}>
-                <Field label={<div style={{ marginBottom: '5px' }}>Product</div>} noMargin>
+                <Field label={<div style={{ marginBottom: '5px' }}>Product *</div>} noMargin required>
                  <Combobox
                    data-testid="influxdb-v2-config-product-select"
                    value={options.jsonData.product}
@@ -112,7 +107,7 @@ export const UrlAndAuthenticationSection = (props: Props) => {
                </Field>
              </Box>
              <Box flex={1}>
-                <Field label={<div style={{ marginBottom: '5px' }}>Query language</div>} noMargin>
+                <Field label={<div style={{ marginBottom: '5px' }}>Query language *</div>} noMargin>
                  <Combobox
                    data-testid="influxdb-v2-config-query-language-select"
                    value={options.jsonData.product !== '' ? options.jsonData.version : ''}