Prometheus: Configuration page overhaul (#66198)

* organize layout, make design uniform, add doc link

* fix e2e test

* move overhauled config parts into prometheus code

* update tooltips with doc links

* clean component styles for section padding, top and bottom 32px

* make additional settings subsection headers h6

* use secondary gray for section descriptions

* fix merge issues

* change inlineswitch to switch only in prom settings because the other components are shared

* remove legacy formfield and input, replace with inlinefield and input from grafana-ui

* find more formfield and UI design fixes like changing inlineformlabel to inlinefield

* remove unused inline form label

* replace legacy duration validations with <FieldValidationMessage>

* fix styles secondary gray from theme

* change language, headings and datasource -> data source

* update alert setting styles with new component

* update prom url heading and tooltip

* update default editor tooltip and set builder as default editor

* update interval tooltip

* update prom type tooltip

* update custom query params tooltip

* update exemplar internal link tooltip

* fix inline form styling inconsistency

* allow for using the DataSourceHTTPSettings component without the connection string

* remove overhaul component, re-use dshtttps comp, and use connection input in config editor

* make tooltips interactive to click links

* consistent label width across the elements we can control for now, fix exemplar switch

* make connection url a component

* refactor onBlur validation

* remove unused component

* add tests for config validations

* add more meaningful health check

* fix e2e test

* fix e2e test

* fix e2e test

* add error handling for more url errors

* remove unnecessary conversion

* health check tests

* Clean up the health check

* health check unit tests

* health check unit tests improved

* make pretty for drone

* lint check go

* lint check go

* add required attr to connection component

* Update public/app/plugins/datasource/prometheus/configuration/Connection.tsx

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

* fix read only issue for provisioned datasources

* validate multiple durations for incremental query setting

* use sentence case for headers

* use className consistently for styles

* add tests for url regex

* remove console logs

* only use query as healthcheck as the healthy api is not supported by Mimir

* fix exemplar e2e test

* remove overhaul prop from custom headers setting component

* remove connection section and use DatasourceHttpSettings connection with custom label and interactive tooltip

* add spaces back

* spaces

---------

Co-authored-by: ismail simsek <ismailsimsek09@gmail.com>
Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx

@@ -73,6 +73,7 @@ export const DataSourceHttpSettings = (props: HttpSettingsProps) => {
     azureAuthSettings,
     renderSigV4Editor,
     secureSocksDSProxyEnabled,
+    connectionElements,
   } = props;
   let urlTooltip;
   const [isAccessHelpVisible, setIsAccessHelpVisible] = useState(false);
@@ -93,6 +94,7 @@ export const DataSourceHttpSettings = (props: HttpSettingsProps) => {
       urlTooltip = (
         <>
           Your access method is <em>Browser</em>, this means the URL needs to be accessible from the browser.
+          {connectionElements?.tooltip}
         </>
       );
       break;
@@ -101,11 +103,12 @@ export const DataSourceHttpSettings = (props: HttpSettingsProps) => {
         <>
           Your access method is <em>Server</em>, this means the URL needs to be accessible from the grafana
           backend/server.
+          {connectionElements?.tooltip}
         </>
       );
       break;
     default:
-      urlTooltip = 'Specify a complete HTTP URL (for example http://your_server:8080)';
+      urlTooltip = <>Specify a complete HTTP URL (for example http://your_server:8080) {connectionElements?.tooltip}</>;
   }
 
   const accessSelect = (
@@ -143,14 +146,24 @@ export const DataSourceHttpSettings = (props: HttpSettingsProps) => {
   const azureAuthEnabled: boolean =
     (azureAuthSettings?.azureAuthSupported && azureAuthSettings.getAzureAuthEnabled(dataSourceConfig)) || false;
 
+  const connectionLabel = connectionElements?.label ? connectionElements?.label : 'URL';
+
   return (
     <div className="gf-form-group">
       <>
         <h3 className="page-heading">HTTP</h3>
         <div className="gf-form-group">
-          <div className="gf-form">
-            <FormField label="URL" labelWidth={13} tooltip={urlTooltip} inputEl={urlInput} />
-          </div>
+          {defaultUrl && (
+            <div className="gf-form">
+              <FormField
+                interactive={connectionElements?.tooltip ? true : false}
+                label={connectionLabel}
+                labelWidth={13}
+                tooltip={urlTooltip}
+                inputEl={urlInput}
+              />
+            </div>
+          )}
 
           {showAccessOptions && (
             <>

packages/grafana-ui/src/components/DataSourceSettings/types.ts

@@ -30,7 +30,7 @@ export interface HttpSettingsBaseProps<JSONData extends DataSourceJsonData = any
 
 export interface HttpSettingsProps extends HttpSettingsBaseProps {
   /** The default url for the data source */
-  defaultUrl: string;
+  defaultUrl?: string;
   /** Show the http access help box */
   showAccessOptions?: boolean;
   /** Show the SigV4 auth toggle option */
@@ -41,4 +41,9 @@ export interface HttpSettingsProps extends HttpSettingsBaseProps {
   renderSigV4Editor?: React.ReactNode;
   /** Show the Secure Socks Datasource Proxy toggle option */
   secureSocksDSProxyEnabled?: boolean;
+  /** connection URL label and tooltip */
+  connectionElements?: {
+    label?: string;
+    tooltip?: React.ReactNode;
+  };
 }