InfluxDB: Add http configuration when selecting InfluxDB v2 flavor (#30827)

* Add dev env block for influx2

* Add http settings to influx config

* Update devenv/docker/blocks/influxdb2/docker-compose.yaml

Co-authored-by: Sofia Papagiannaki <papagian@users.noreply.github.com>

Co-authored-by: Sofia Papagiannaki <papagian@users.noreply.github.com>

devenv/docker/blocks/influxdb2/docker-compose.yaml

+  influxdb:
+    image: quay.io/influxdb/influxdb:v2.0.3
+    container_name: influxdb2
+    ports:
+      - '8086:8086'
+    environment:
+      INFLUXDB_REPORTING_DISABLED: 'true'
+    volumes:
+      - ./docker/blocks/influxdb2/influxdb.conf:/etc/influxdb/influxdb.conf
+
+  # Use the influx cli to set up an influxdb instance.
+  influxdb_cli:
+    links:
+      - influxdb
+    image: quay.io/influxdb/influxdb:v2.0.3
+    # Use these same configurations parameters in your telegraf configuration, mytelegraf.conf.
+    entrypoint: influx setup --bucket mybucket -t mytoken -o myorg --username=grafana --password=grafana12345 --host=http://influxdb:8086 -f
+      # Wait for the influxd service in the influxdb container has fully bootstrapped before trying to setup an influxdb instance with the influxdb_cli service.
+    restart: on-failure:10
+    depends_on:
+      - influxdb
+
+  fake-influxdb-data:
+    image: grafana/fake-data-gen
+    links:
+      - influxdb
+    environment:
+      FD_DATASOURCE: influxdb
+      FD_PORT: 8086
+
+  telegraf:
+    image: telegraf
+    links:
+      - influxdb
+    depends_on:
+      - influxdb_cli
+    volumes:
+      - ./docker/blocks/influxdb2/telegraf.conf:/etc/telegraf/telegraf.conf:ro
+      - /var/log:/var/log
+      - ../data/log:/var/log/grafana

devenv/docker/blocks/influxdb2/influxdb.conf

+reporting-disabled = false
+
+[meta]
+  # Where the metadata/raft database is stored
+  dir = "/var/lib/influxdb/meta"
+
+  retention-autocreate = true
+
+  # If log messages are printed for the meta service
+  logging-enabled = true
+  pprof-enabled = false
+
+  # The default duration for leases.
+  lease-duration = "1m0s"
+
+[data]
+  # Controls if this node holds time series data shards in the cluster
+  enabled = true
+
+  dir = "/var/lib/influxdb/data"
+
+  # These are the WAL settings for the storage engine >= 0.9.3
+  wal-dir = "/var/lib/influxdb/wal"
+  wal-logging-enabled = true
+
+
+[coordinator]
+  write-timeout = "10s"
+  max-concurrent-queries = 0
+  query-timeout = "0"
+  log-queries-after = "0"
+  max-select-point = 0
+  max-select-series = 0
+  max-select-buckets = 0
+
+[retention]
+  enabled = true
+  check-interval = "30m"
+
+[shard-precreation]
+  enabled = true
+  check-interval = "10m"
+  advance-period = "30m"
+
+[monitor]
+  store-enabled = true # Whether to record statistics internally.
+  store-database = "_internal" # The destination database for recorded statistics
+  store-interval = "10s" # The interval at which to record statistics
+
+[admin]
+  enabled = true
+  bind-address = ":8083"
+  https-enabled = false
+  https-certificate = "/etc/ssl/influxdb.pem"
+
+[http]
+  enabled = true
+  bind-address = ":8086"
+  auth-enabled = true
+  log-enabled = true
+  write-tracing = false
+  pprof-enabled = false
+  https-enabled = false
+  https-certificate = "/etc/ssl/influxdb.pem"
+  ### Use a separate private key location.
+  # https-private-key = ""
+  max-row-limit = 10000
+  realm = "InfluxDB"
+
+  unix-socket-enabled = false # enable http service over unix domain socket
+  # bind-socket = "/var/run/influxdb.sock"
+  flux-enabled = true
+
+[subscriber]
+  enabled = true
+
+[[graphite]]
+  enabled = false
+
+[[collectd]]
+  enabled = false
+
+[[opentsdb]]
+  enabled = false
+
+[[udp]]
+  enabled = false
+
+[continuous_queries]
+  log-enabled = true
+  enabled = true
+  # run-interval = "1s" # interval for how often continuous queries will be checked if they need to run
+

public/app/plugins/datasource/influxdb/components/ConfigEditor.tsx

@@ -62,21 +62,12 @@ export class ConfigEditor extends PureComponent<Props> {
       delete copy.user;
       delete copy.database;
     }
-    onOptionsChange(copy);
-  };
 
-  onUpdateInflux2xURL = (e: React.SyntheticEvent<HTMLInputElement>) => {
-    const { options, onOptionsChange } = this.props;
-    onOptionsChange({
-      ...options,
-      url: e.currentTarget.value,
-      access: 'proxy',
-      basicAuth: true,
-    });
+    onOptionsChange(copy);
   };
 
   renderInflux2x() {
-    const { options } = this.props;
+    const { options, onOptionsChange } = this.props;
     const { secureJsonFields } = options;
     const secureJsonData = (options.secureJsonData || {}) as InfluxSecureJsonData;
 
@@ -95,25 +86,14 @@ export class ConfigEditor extends PureComponent<Props> {
         </div>
         <br />
 
-        <h3 className="page-heading">Connection</h3>
-        <div className="gf-form-inline">
-          <div className="gf-form">
-            <InlineFormLabel
-              className="width-10"
-              tooltip="This URL needs to be accessible from the grafana backend/server."
-            >
-              URL
-            </InlineFormLabel>
-            <div className="width-20">
-              <Input
-                className="width-20"
-                value={options.url || ''}
-                placeholder="http://localhost:9999"
-                onChange={this.onUpdateInflux2xURL}
-              />
-            </div>
-          </div>
-        </div>
+        <DataSourceHttpSettings
+          showAccessOptions={false}
+          dataSourceConfig={options}
+          defaultUrl="http://localhost:8086"
+          onChange={onOptionsChange}
+        />
+
+        <h3 className="page-heading">InfluxDB Details</h3>
         <div className="gf-form-inline">
           <div className="gf-form">
             <InlineFormLabel className="width-10">Organization</InlineFormLabel>