feat(influxdb): add path and protocol to config input (#206)

Co-authored-by: Florian Haas <[email protected]>
Co-authored-by: Martin Man <[email protected]>

src/client/hooks/useFormValidation.ts

@@ -12,7 +12,7 @@ export function useFormValidation(validate: () => boolean) {
 }
 
 export function extractParameterNameAndValue<AppConfigNestedKey>(
-  event: React.ChangeEvent<HTMLInputElement>,
+  event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
 ): [AppConfigNestedKey, string | number | boolean] {
   let value: string | number | boolean = event.target.type === "checkbox" ? event.target.checked : event.target.value
   // TODO: figure how to better handle this ???

src/client/views/settings/InfluxDB.tsx

@@ -1,6 +1,17 @@
 import React from "react"
 import { useEffect, useState } from "react"
-import { CCard, CCardBody, CCardFooter, CForm, CFormLabel, CFormInput, CButton } from "@coreui/react"
+import {
+  CCard,
+  CCardBody,
+  CCardFooter,
+  CForm,
+  CFormLabel,
+  CFormInput,
+  CFormSelect,
+  CButton,
+  CCol,
+  CRow,
+} from "@coreui/react"
 
 import { useGetConfig, usePutConfig } from "../../hooks/useAdminApi"
 import { useFormValidation, extractParameterNameAndValue } from "../../hooks/useFormValidation"
@@ -31,7 +42,7 @@ function InfluxDB() {
     )
   })
 
-  function handleFormInputChange(event: React.ChangeEvent<HTMLInputElement>) {
+  function handleFormInputChange(event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) {
     const clone = { ...temporaryConfig!!! }
     const [name, value] = extractParameterNameAndValue(event)
     // TODO: fix this
@@ -51,26 +62,58 @@ function InfluxDB() {
       <CCard>
         <CCardBody>
           <CForm>
-            <div className="mb-3">
-              <CFormLabel htmlFor="host">Host</CFormLabel>
-              <CFormInput
-                type="text"
-                name="host"
-                placeholder="influxdb"
-                value={temporaryConfig.influxdb.host}
-                onChange={(event) => handleFormInputChange(event)}
-              />
-            </div>
-            <div className="mb-3">
-              <CFormLabel htmlFor="port">Port</CFormLabel>
-              <CFormInput
-                type="text"
-                name="port"
-                placeholder="8086"
-                value={temporaryConfig.influxdb.port}
-                onChange={(event) => handleFormInputChange(event)}
-              />
-            </div>
+            <CRow>
+              <CCol sm>
+                <div className="mb-3">
+                  <CFormLabel htmlFor="protocol">Protocol</CFormLabel>
+                  <CFormSelect
+                    id="protocol"
+                    name="protocol"
+                    value={temporaryConfig.influxdb.protocol}
+                    onChange={(event) => handleFormInputChange(event)}
+                  >
+                    <option value="http">http</option>
+                    <option value="https">https</option>
+                  </CFormSelect>
+                </div>
+              </CCol>
+              <CCol sm>
+                <div className="mb-3">
+                  <CFormLabel htmlFor="host">Host</CFormLabel>
+                  <CFormInput
+                    type="text"
+                    name="host"
+                    placeholder="influxdb"
+                    value={temporaryConfig.influxdb.host}
+                    onChange={(event) => handleFormInputChange(event)}
+                  />
+                </div>
+              </CCol>
+              <CCol sm>
+                <div className="mb-3">
+                  <CFormLabel htmlFor="port">Port</CFormLabel>
+                  <CFormInput
+                    type="text"
+                    name="port"
+                    placeholder="8086"
+                    value={temporaryConfig.influxdb.port}
+                    onChange={(event) => handleFormInputChange(event)}
+                  />
+                </div>
+              </CCol>
+              <CCol sm>
+                <div className="mb-3">
+                  <CFormLabel htmlFor="path">Path</CFormLabel>
+                  <CFormInput
+                    type="text"
+                    name="path"
+                    placeholder=""
+                    value={temporaryConfig.influxdb.path}
+                    onChange={(event) => handleFormInputChange(event)}
+                  />
+                </div>
+              </CCol>
+            </CRow>
             <div className="mb-3">
               <CFormLabel htmlFor="database">Database Name</CFormLabel>
               <CFormInput

src/server/influxdb.ts

@@ -1,6 +1,8 @@
 import { InfluxDB } from "influx"
 import { Server } from "./server"
 import { Logger } from "winston"
+import { AppInfluxDBProtocol } from "../shared/types"
+import { posix } from "node:path"
 
 export class InfluxDBBackend {
   server: Server
@@ -9,6 +11,8 @@ export class InfluxDBBackend {
 
   host: string = ""
   port: string = ""
+  path: string = ""
+  protocol: AppInfluxDBProtocol = "http"
   database: string = ""
   username?: string
   password?: string
@@ -38,11 +42,13 @@ export class InfluxDBBackend {
       return
     }
 
-    const { host, port, database, retention, username, password } = this.server.config.influxdb
+    const { host, port, protocol, path, username, password, database, retention } = this.server.config.influxdb
 
     if (
       this.host !== host ||
       this.port !== port ||
+      this.path !== path ||
+      this.protocol !== protocol ||
       this.database !== database ||
       this.username !== username ||
       this.password !== password
@@ -115,21 +121,33 @@ export class InfluxDBBackend {
   }
 
   private async _connect() {
-    const { host, port, database, retention, username, password } = this.server.config.influxdb
+    const { host, port, protocol, path, username, password, database, retention } = this.server.config.influxdb
 
+    this.protocol = protocol
     this.host = host
     this.port = port
     this.database = database
     this.username = username !== "" ? username : "root"
     this.password = password !== "" ? password : "root"
+    this.path = posix.normalize(path || "/")
+    // ensure path starts, and ends with "/" when set
+    if (!this.path.startsWith("/")) {
+      this.path = "/" + this.path
+    }
+    if (!this.path.endsWith("/")) {
+      this.path = this.path + "/"
+    }
 
-    this.logger.info(`Attempting connection to ${this.host}:${this.port}/${this.database} using ${this.username}:*****`)
+    this.logger.info(
+      `Attempting connection to ${this.protocol}://${this.host}:${this.port}${this.path}${this.database} using ${this.username}:*****`,
+    )
 
     try {
       this.influxClient = new InfluxDB({
         host: this.host,
         port: Number(this.port),
-        protocol: "http",
+        path: this.path,
+        protocol: this.protocol,
         database: this.database,
         username: this.username,
         password: this.password,

src/server/server.ts

@@ -11,6 +11,7 @@ import auth from "basic-auth"
 import {
   AppConfig,
   AppConfigFiles,
+  AppInfluxDBProtocol,
   AppSecrets,
   AppUISettings,
   createAppConfig,
@@ -354,8 +355,10 @@ export class Server {
     const location = this.configFiles.configLocation
     const defaultConfig = createAppConfig({
       influxdb: {
+        protocol: defaultInfluxDBURL.protocol.replace(":", "") as AppInfluxDBProtocol,
         host: defaultInfluxDBURL.hostname,
         port: defaultInfluxDBURL.port,
+        path: defaultInfluxDBURL.pathname,
         username: defaultInfluxDBUsername,
         password: defaultInfluxDBPassword,
         database: defaultInfluxDBDatabase,

src/shared/types.ts

@@ -57,9 +57,13 @@ export interface AppDataCollectionExpiryConfig {
   [portalId: string]: number | undefined // absolute time in millis when data collection will expire
 }
 
+export type AppInfluxDBProtocol = "http" | "https"
+
 export interface AppInfluxDBConfig {
+  protocol: AppInfluxDBProtocol
   host: string
   port: string
+  path?: string
   username?: string
   password?: string
   database: string
@@ -121,6 +125,7 @@ const defaultAppConfigValues: AppConfig = {
     expiry: {},
   },
   influxdb: {
+    protocol: "http",
     host: "localhost",
     port: "8086",
     database: "venus",