From cfcb6e8f4ddf078ccdcec2a03788e39c6e4dfdef Mon Sep 17 00:00:00 2001
From: Konrad Szwarc <konrad.szwarc@elastic.co>
Date: Tue, 17 Sep 2024 10:18:09 +0200
Subject: [PATCH] [EDR Workflows][Osquery] Fix last results pack value
 (#192678)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The “Last Results” tab in the active pack details is displaying
incorrect date-time values. This is due to a mismatch in data format.
The component responsible for formatting the date-time values expects a
string, but it is currently receiving an array with a single string
inside.

Before:

![Screenshot 2024-09-12 at 10 33
39](https://github.com/user-attachments/assets/844fd699-a086-44d8-aa0b-a06e65e5aa60)

After:

![Screenshot 2024-09-12 at 12 40
04](https://github.com/user-attachments/assets/bcce9b69-58b8-438d-89e8-c78a3922845c)
---
 .../packs/pack_queries_status_table.tsx       | 40 +++++++++----------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/x-pack/plugins/osquery/public/packs/pack_queries_status_table.tsx b/x-pack/plugins/osquery/public/packs/pack_queries_status_table.tsx
index 53d55aef7475c..d43721a61b6d2 100644
--- a/x-pack/plugins/osquery/public/packs/pack_queries_status_table.tsx
+++ b/x-pack/plugins/osquery/public/packs/pack_queries_status_table.tsx
@@ -187,7 +187,7 @@ const ViewResultsInLensActionComponent: React.FC<ViewResultsInDiscoverActionProp
   const { data: logsDataView } = useLogsDataView({ skip: !actionId, checkOnly: true });
 
   const handleClick = useCallback(
-    (event: any) => {
+    (event: React.MouseEvent<HTMLButtonElement>) => {
       event.preventDefault();
 
       if (logsDataView?.id) {
@@ -372,33 +372,31 @@ const ScheduledQueryLastResults: React.FC<ScheduledQueryLastResultsProps> = ({
     interval,
   });
 
+  const timestamp = useMemo(() => {
+    const dateTime = lastResultsData?.['@timestamp'];
+    if (!dateTime) return undefined;
+
+    return Array.isArray(dateTime) ? dateTime[0] : dateTime;
+  }, [lastResultsData]);
+
   if (isLoading) {
     return <EuiLoadingSpinner />;
   }
 
-  if (!lastResultsData) {
-    return <>{'-'}</>;
-  }
-
   return (
     <EuiFlexGroup gutterSize="s" alignItems="center">
       <EuiFlexItem grow={4}>
-        {lastResultsData?.['@timestamp'] ? (
+        {timestamp ? (
           <EuiToolTip
             content={
               <>
-                <FormattedDate
-                  value={lastResultsData['@timestamp']}
-                  year="numeric"
-                  month="short"
-                  day="2-digit"
-                />{' '}
-                <FormattedTime value={lastResultsData['@timestamp']} timeZoneName="short" />
+                <FormattedDate value={timestamp} year="numeric" month="short" day="2-digit" />{' '}
+                <FormattedTime value={timestamp} timeZoneName="short" />
               </>
             }
           >
             <div data-test-subj="last-results-date">
-              <FormattedRelative value={lastResultsData['@timestamp']} />
+              <FormattedRelative value={timestamp} />
             </div>
           </EuiToolTip>
         ) : (
@@ -584,7 +582,7 @@ const PackQueriesStatusTableComponent: React.FC<PackQueriesStatusTableProps> = (
     Record<string, ReturnType<typeof ScheduledQueryExpandedContent>>
   >({});
 
-  const renderQueryColumn = useCallback((query: string, item: any) => {
+  const renderQueryColumn = useCallback((query: string, item: PackQueryFormData) => {
     const singleLine = removeMultilines(query);
     const content = singleLine.length > 55 ? `${singleLine.substring(0, 55)}...` : singleLine;
 
@@ -618,7 +616,7 @@ const PackQueriesStatusTableComponent: React.FC<PackQueriesStatusTableProps> = (
   );
 
   const renderLastResultsColumn = useCallback(
-    (item: any) => (
+    (item: PackQueryFormData) => (
       <ScheduledQueryLastResults
         actionId={getPackActionId(item.id, packName)}
         interval={item.interval}
@@ -627,19 +625,19 @@ const PackQueriesStatusTableComponent: React.FC<PackQueriesStatusTableProps> = (
     [packName]
   );
   const renderDocsColumn = useCallback(
-    (item: any) => (
+    (item: PackQueryFormData) => (
       <DocsColumnResults actionId={getPackActionId(item.id, packName)} interval={item.interval} />
     ),
     [packName]
   );
   const renderAgentsColumn = useCallback(
-    (item: any) => (
+    (item: PackQueryFormData) => (
       <AgentsColumnResults actionId={getPackActionId(item.id, packName)} interval={item.interval} />
     ),
     [packName]
   );
   const renderErrorsColumn = useCallback(
-    (item: any) => (
+    (item: PackQueryFormData) => (
       <ErrorsColumnResults
         queryId={item.id}
         interval={item.interval}
@@ -652,12 +650,12 @@ const PackQueriesStatusTableComponent: React.FC<PackQueriesStatusTableProps> = (
   );
 
   const renderDiscoverResultsAction = useCallback(
-    (item: any) => <PackViewInDiscoverAction item={item} packName={packName} />,
+    (item: PackQueryFormData) => <PackViewInDiscoverAction item={item} packName={packName} />,
     [packName]
   );
 
   const renderLensResultsAction = useCallback(
-    (item: any) => <PackViewInLensAction item={item} packName={packName} />,
+    (item: PackQueryFormData) => <PackViewInLensAction item={item} packName={packName} />,
     [packName]
   );