From 41a8a10da710748c685723d43d39011792d6642c Mon Sep 17 00:00:00 2001
From: Dima Arnautov <dmitrii.arnautov@elastic.co>
Date: Fri, 14 Aug 2020 12:17:57 +0200
Subject: [PATCH] [ML] update expanded row

---
 x-pack/plugins/ml/common/types/inference.ts   |   2 +-
 .../models_management/expanded_row.tsx        | 176 ++++++++++--------
 2 files changed, 96 insertions(+), 82 deletions(-)

diff --git a/x-pack/plugins/ml/common/types/inference.ts b/x-pack/plugins/ml/common/types/inference.ts
index 18214836d92a4b..9d4e6eeb474c63 100644
--- a/x-pack/plugins/ml/common/types/inference.ts
+++ b/x-pack/plugins/ml/common/types/inference.ts
@@ -59,5 +59,5 @@ export interface ModelConfigResponse {
   model_id: string;
   tags: string;
   version: string;
-  inference_config: any;
+  inference_config?: Record<string, any>;
 }
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/models_management/expanded_row.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/models_management/expanded_row.tsx
index 0b99516df0ac91..6793a1f434a193 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/models_management/expanded_row.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/models_management/expanded_row.tsx
@@ -48,6 +48,17 @@ export const ExpandedRow: FC<ExpandedRowProps> = ({ item }) => {
     license_level,
   };
 
+  function formatToListItems(items: Record<string, any>) {
+    return Object.entries(items)
+      .map(([title, value]) => ({
+        title,
+        description: typeof value === 'object' ? JSON.stringify(value) : value,
+      }))
+      .filter(({ description }) => {
+        return description !== undefined;
+      });
+  }
+
   const tabs = [
     {
       id: 'details',
@@ -57,38 +68,6 @@ export const ExpandedRow: FC<ExpandedRowProps> = ({ item }) => {
           defaultMessage="Details"
         />
       ),
-      content: (
-        <>
-          <EuiSpacer size={'m'} />
-          <EuiPanel>
-            <EuiTitle size={'xs'}>
-              <h5>
-                <FormattedMessage
-                  id="xpack.ml.inference.modelsList.expandedRow.detailsTitle"
-                  defaultMessage="Details"
-                />
-              </h5>
-            </EuiTitle>
-            <EuiSpacer size={'m'} />
-            <EuiDescriptionList
-              type="column"
-              listItems={Object.entries(details).map(([title, value]) => ({
-                title,
-                description: typeof value === 'object' ? JSON.stringify(value) : value,
-              }))}
-            />
-          </EuiPanel>
-        </>
-      ),
-    },
-    {
-      id: 'config',
-      name: (
-        <FormattedMessage
-          id="xpack.ml.inference.modelsList.expandedRow.configTabLabel"
-          defaultMessage="Config"
-        />
-      ),
       content: (
         <>
           <EuiSpacer size={'m'} />
@@ -98,51 +77,84 @@ export const ExpandedRow: FC<ExpandedRowProps> = ({ item }) => {
                 <EuiTitle size={'xs'}>
                   <h5>
                     <FormattedMessage
-                      id="xpack.ml.inference.modelsList.expandedRow.inferenceConfigTitle"
-                      defaultMessage="Inference configuration"
+                      id="xpack.ml.inference.modelsList.expandedRow.detailsTitle"
+                      defaultMessage="Details"
                     />
                   </h5>
                 </EuiTitle>
                 <EuiSpacer size={'m'} />
                 <EuiDescriptionList
+                  compressed={true}
                   type="column"
-                  listItems={Object.entries(inferenceConfig[Object.keys(inferenceConfig)[0]]).map(
-                    ([title, value]) => ({
-                      title,
-                      description:
-                        typeof value === 'object' ? JSON.stringify(value) : (value as any),
-                    })
-                  )}
+                  listItems={formatToListItems(details)}
                 />
               </EuiPanel>
             </EuiFlexItem>
-            {metadata?.analytics_config && (
-              <EuiFlexItem>
-                <EuiPanel>
-                  <EuiTitle size={'xs'}>
-                    <h5>
-                      <FormattedMessage
-                        id="xpack.ml.inference.modelsList.expandedRow.analyticsConfigTitle"
-                        defaultMessage="Analytics configuration"
-                      />
-                    </h5>
-                  </EuiTitle>
-                  <EuiSpacer size={'m'} />
-                  <EuiDescriptionList
-                    type="column"
-                    listItems={Object.entries(metadata?.analytics_config).map(([title, value]) => ({
-                      title,
-                      description:
-                        typeof value === 'object' ? JSON.stringify(value) : (value as any),
-                    }))}
-                  />
-                </EuiPanel>
-              </EuiFlexItem>
-            )}
           </EuiFlexGrid>
         </>
       ),
     },
+    ...(inferenceConfig
+      ? [
+          {
+            id: 'config',
+            name: (
+              <FormattedMessage
+                id="xpack.ml.inference.modelsList.expandedRow.configTabLabel"
+                defaultMessage="Config"
+              />
+            ),
+            content: (
+              <>
+                <EuiSpacer size={'m'} />
+                <EuiFlexGrid columns={2}>
+                  <EuiFlexItem>
+                    <EuiPanel>
+                      <EuiTitle size={'xs'}>
+                        <h5>
+                          <FormattedMessage
+                            id="xpack.ml.inference.modelsList.expandedRow.inferenceConfigTitle"
+                            defaultMessage="Inference configuration"
+                          />
+                        </h5>
+                      </EuiTitle>
+                      <EuiSpacer size={'m'} />
+                      <EuiDescriptionList
+                        compressed={true}
+                        type="column"
+                        listItems={formatToListItems(
+                          inferenceConfig[Object.keys(inferenceConfig)[0]]
+                        )}
+                      />
+                    </EuiPanel>
+                  </EuiFlexItem>
+                  {metadata?.analytics_config && (
+                    <EuiFlexItem>
+                      <EuiPanel>
+                        <EuiTitle size={'xs'}>
+                          <h5>
+                            <FormattedMessage
+                              id="xpack.ml.inference.modelsList.expandedRow.analyticsConfigTitle"
+                              defaultMessage="Analytics configuration"
+                            />
+                          </h5>
+                        </EuiTitle>
+                        <EuiSpacer size={'m'} />
+                        <EuiDescriptionList
+                          compressed={true}
+                          type="column"
+                          listItems={formatToListItems(metadata?.analytics_config)}
+                        />
+                      </EuiPanel>
+                    </EuiFlexItem>
+                  )}
+                </EuiFlexGrid>
+              </>
+            ),
+          },
+        ]
+      : []),
+
     {
       id: 'stats',
       name: (
@@ -154,24 +166,26 @@ export const ExpandedRow: FC<ExpandedRowProps> = ({ item }) => {
       content: (
         <>
           <EuiSpacer size={'m'} />
-          <EuiPanel>
-            <EuiTitle size={'xs'}>
-              <h5>
-                <FormattedMessage
-                  id="xpack.ml.inference.modelsList.expandedRow.statsTitle"
-                  defaultMessage="Inference Stats"
+          <EuiFlexGrid columns={2}>
+            <EuiFlexItem>
+              <EuiPanel>
+                <EuiTitle size={'xs'}>
+                  <h5>
+                    <FormattedMessage
+                      id="xpack.ml.inference.modelsList.expandedRow.statsTitle"
+                      defaultMessage="Inference Stats"
+                    />
+                  </h5>
+                </EuiTitle>
+                <EuiSpacer size={'m'} />
+                <EuiDescriptionList
+                  compressed={true}
+                  type="column"
+                  listItems={formatToListItems(stats.inference_stats)}
                 />
-              </h5>
-            </EuiTitle>
-            <EuiSpacer size={'m'} />
-            <EuiDescriptionList
-              type="column"
-              listItems={Object.entries(stats.inference_stats).map(([title, value]) => ({
-                title,
-                description: typeof value === 'object' ? JSON.stringify(value) : value,
-              }))}
-            />
-          </EuiPanel>
+              </EuiPanel>
+            </EuiFlexItem>
+          </EuiFlexGrid>
         </>
       ),
     },