Merge pull request #27 from jasonrhodes/k8s-node-logs-table-tweaks

Fixing design for k8s node representation

x-pack/plugins/asset_inventory/public/components/custom_description_list.tsx

@@ -0,0 +1,55 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
+import React, { Fragment } from 'react';
+
+export interface DLItem {
+  title: string;
+  description: string | React.ReactNode;
+}
+
+export function CustomDescriptionList({ items }: { items: DLItem[] }) {
+  const pairs = items.reduce<Array<[DLItem, DLItem?]>>((p, item) => {
+    const latest = p[p.length - 1];
+    if (!latest || latest.length === 2) {
+      p.push([item]);
+    } else if (latest.length === 1) {
+      latest.push(item);
+    }
+    return p;
+  }, []);
+
+  return (
+    <>
+      {pairs.map((pair, i) => (
+        <Fragment key={`dl-row-${i}`}>
+          <EuiFlexGroup>
+            <CustomDLItem item={pair[0]} />
+            <CustomDLItem item={pair[1]} />
+          </EuiFlexGroup>
+          {i === pairs.length - 1 ? null : <EuiSpacer />}
+        </Fragment>
+      ))}
+    </>
+  );
+}
+
+function CustomDLItem({ item }: { item?: DLItem }) {
+  if (!item) {
+    return null;
+  }
+
+  return (
+    <EuiFlexItem>
+      <EuiText>
+        <b>{item.title}</b>
+      </EuiText>
+      <div>{item.description}</div>
+    </EuiFlexItem>
+  );
+}

x-pack/plugins/asset_inventory/public/components/k8s_cluster_info.tsx

@@ -5,18 +5,20 @@
  * 2.0.
  */
 
-import { EuiDescriptionList, EuiHealth, EuiIcon, EuiPageTemplate, EuiSpacer } from '@elastic/eui';
+import { EuiHealth, EuiIcon, EuiPageTemplate } from '@elastic/eui';
 import { capitalize } from 'lodash';
 import React from 'react';
 import { K8sCluster } from '../../common/types_api';
 import { cloudIconMap, statusMap } from '../constants';
+import { CustomDescriptionList, DLItem } from './custom_description_list';
 import { K8sNodesTable } from './k8s_nodes_table';
+import { SectionRule } from './section_rule';
 
 export function K8sClusterInfo({ cluster }: { cluster: K8sCluster }) {
-  const list: Array<{ title: string; description: React.ReactChild }> = [
+  const list: DLItem[] = [
     {
       title: 'Cluster name',
-      description: cluster.name || '',
+      description: cluster.name,
     },
     {
       title: 'Status',
@@ -28,20 +30,12 @@ export function K8sClusterInfo({ cluster }: { cluster: K8sCluster }) {
     },
     {
       title: 'Version',
-      description: cluster.version || '',
+      description: cluster.version,
+    },
+    {
+      title: '',
+      description: '',
     },
-    // {
-    //   title: 'Nodes',
-    //   description: (
-    //     <ul>
-    //       {nodes.map((node) => (
-    //         <li key={node.id}>
-    //           <Link to={`/k8s/nodes/${node.name}`}>{node.name}</Link>
-    //         </li>
-    //       ))}
-    //     </ul>
-    //   ),
-    // },
   ];
 
   if (cluster.cloud?.provider) {
@@ -61,8 +55,8 @@ export function K8sClusterInfo({ cluster }: { cluster: K8sCluster }) {
   return (
     <>
       <EuiPageTemplate.Section>
-        <EuiDescriptionList listItems={list} />
-        <EuiSpacer />
+        <CustomDescriptionList items={list} />
+        <SectionRule />
         <K8sNodesTable nodes={cluster.nodes} />
       </EuiPageTemplate.Section>
     </>

x-pack/plugins/asset_inventory/public/components/k8s_logs_table.tsx

@@ -5,10 +5,9 @@
  * 2.0.
  */
 
-import { EuiInMemoryTable, EuiText } from '@elastic/eui';
+import { EuiInMemoryTable, EuiSpacer, EuiText } from '@elastic/eui';
 import React from 'react';
 import { K8sNodeLog } from '../../common/types_api';
-import { relativeTimeString } from '../lib/relative_time';
 
 export function K8sLogsTable({ logs }: { logs: K8sNodeLog[] }) {
   const columns = [
@@ -17,7 +16,7 @@ export function K8sLogsTable({ logs }: { logs: K8sNodeLog[] }) {
       name: 'Timestamp',
       sortable: true,
       width: '400px',
-      render: (ts: string) => relativeTimeString(new Date(ts)),
+      render: (ts: string) => getUTCTime(new Date(ts)),
     },
     {
       field: 'message',
@@ -29,8 +28,9 @@ export function K8sLogsTable({ logs }: { logs: K8sNodeLog[] }) {
   return (
     <>
       <EuiText>
-        <b>Node Logs (Last 12 Hours)</b>
+        <b>Node Logs (Last 24 Hours, 500 logs max)</b>
       </EuiText>
+      <EuiSpacer />
       <EuiInMemoryTable<K8sNodeLog>
         loading={false}
         columns={columns}
@@ -47,3 +47,18 @@ export function K8sLogsTable({ logs }: { logs: K8sNodeLog[] }) {
     </>
   );
 }
+
+function getUTCTime(date: Date) {
+  const hour = padLeft(date.getUTCHours());
+  const minute = padLeft(date.getUTCMinutes());
+  const second = padLeft(date.getUTCSeconds());
+  return `${hour}:${minute}:${second}`;
+}
+
+function padLeft(n: number) {
+  if (n < 10) {
+    return `0${n}`;
+  }
+
+  return `${n}`;
+}