Elastic: Fixes config UI issues (#29608)

* Elastic: Fixes config UI issues

* Fixed index name input issue

public/app/plugins/datasource/elasticsearch/configuration/DataLink.tsx

@@ -92,6 +92,7 @@ export const DataLink = (props: Props) => {
 
       <div className={styles.row}>
         <Switch
+          labelClass={'width-6'}
           label="Internal link"
           checked={showInternalLink}
           onChange={() => {

public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx

@@ -32,9 +32,9 @@ export const DataLinks = (props: Props) => {
         Add links to existing fields. Links will be shown in log row details next to the field value.
       </div>
 
-      <div className="gf-form-group">
-        {value &&
-          value.map((field, index) => {
+      {value && value.length > 0 && (
+        <div className="gf-form-group">
+          {value.map((field, index) => {
             return (
               <DataLink
                 className={styles.dataLink}
@@ -61,23 +61,23 @@ export const DataLinks = (props: Props) => {
               />
             );
           })}
-        <div>
-          <Button
-            variant={'secondary'}
-            className={css`
-              margin-right: 10px;
-            `}
-            icon="plus"
-            onClick={event => {
-              event.preventDefault();
-              const newDataLinks = [...(value || []), { field: '', url: '' }];
-              onChange(newDataLinks);
-            }}
-          >
-            Add
-          </Button>
         </div>
-      </div>
+      )}
+
+      <Button
+        variant={'secondary'}
+        className={css`
+          margin-right: 10px;
+        `}
+        icon="plus"
+        onClick={event => {
+          event.preventDefault();
+          const newDataLinks = [...(value || []), { field: '', url: '' }];
+          onChange(newDataLinks);
+        }}
+      >
+        Add
+      </Button>
     </>
   );
 };

public/app/plugins/datasource/elasticsearch/configuration/ElasticDetails.tsx

@@ -34,7 +34,7 @@ export const ElasticDetails = (props: Props) => {
 
       <div className="gf-form-group">
         <div className="gf-form-inline">
-          <div className="gf-form max-width-25">
+          <div className="gf-form">
             <FormField
               labelWidth={10}
               inputWidth={15}
@@ -46,7 +46,7 @@ export const ElasticDetails = (props: Props) => {
             />
           </div>
 
-          <div className="gf-form width-14">
+          <div className="gf-form">
             <FormField
               labelWidth={10}
               label="Pattern"
@@ -76,32 +76,30 @@ export const ElasticDetails = (props: Props) => {
         </div>
 
         <div className="gf-form">
-          <span className="gf-form-select-wrapper">
-            <FormField
-              labelWidth={10}
-              label="Version"
-              inputEl={
-                <Select
-                  options={esVersions}
-                  onChange={option => {
-                    const maxConcurrentShardRequests = getMaxConcurrenShardRequestOrDefault(
-                      value.jsonData.maxConcurrentShardRequests,
-                      option.value!
-                    );
-                    onChange({
-                      ...value,
-                      jsonData: {
-                        ...value.jsonData,
-                        esVersion: option.value!,
-                        maxConcurrentShardRequests,
-                      },
-                    });
-                  }}
-                  value={esVersions.find(version => version.value === value.jsonData.esVersion)}
-                />
-              }
-            />
-          </span>
+          <FormField
+            labelWidth={10}
+            label="Version"
+            inputEl={
+              <Select
+                options={esVersions}
+                onChange={option => {
+                  const maxConcurrentShardRequests = getMaxConcurrenShardRequestOrDefault(
+                    value.jsonData.maxConcurrentShardRequests,
+                    option.value!
+                  );
+                  onChange({
+                    ...value,
+                    jsonData: {
+                      ...value.jsonData,
+                      esVersion: option.value!,
+                      maxConcurrentShardRequests,
+                    },
+                  });
+                }}
+                value={esVersions.find(version => version.value === value.jsonData.esVersion)}
+              />
+            }
+          />
         </div>
         {value.jsonData.esVersion >= 56 && (
           <div className="gf-form max-width-30">