feat(sqllab): Show duration as separate column in Query History view (#25861)

superset-frontend/src/pages/QueryHistoryList/index.tsx

@@ -34,6 +34,7 @@ import {
 } from 'src/views/CRUD/utils';
 import withToasts from 'src/components/MessageToasts/withToasts';
 import { useListViewResource } from 'src/views/CRUD/hooks';
+import Label from 'src/components/Label';
 import SubMenu, { SubMenuProps } from 'src/features/home/SubMenu';
 import Popover from 'src/components/Popover';
 import { commonMenuData } from 'src/features/home/commonMenuData';
@@ -88,6 +89,11 @@ const StyledPopoverItem = styled.div`
   color: ${({ theme }) => theme.colors.grayscale.dark2};
 `;
 
+const TimerLabel = styled(Label)`
+  text-align: left;
+  font-family: ${({ theme }) => theme.typography.families.monospace};
+`;
+
 function QueryList({ addDangerToast }: QueryListProps) {
   const {
     state: { loading, resourceCount: queryCount, resourceCollection: queries },
@@ -204,7 +210,7 @@ function QueryList({ addDangerToast }: QueryListProps) {
         size: 'xl',
         Cell: ({
           row: {
-            original: { start_time, end_time },
+            original: { start_time },
           },
         }: any) => {
           const startMoment = moment.utc(start_time).local();
@@ -218,19 +224,25 @@ function QueryList({ addDangerToast }: QueryListProps) {
               {formattedStartTimeData[1]}
             </>
           );
-
-          return end_time ? (
-            <Tooltip
-              title={t(
-                'Duration: %s',
-                moment(moment.utc(end_time - start_time)).format(TIME_WITH_MS),
-              )}
-              placement="bottom"
-            >
-              <span>{formattedStartTime}</span>
-            </Tooltip>
-          ) : (
-            formattedStartTime
+          return formattedStartTime;
+        },
+      },
+      {
+        Header: t('Duration'),
+        size: 'xl',
+        Cell: ({
+          row: {
+            original: { status, start_time, end_time },
+          },
+        }: any) => {
+          const timerType = status === QueryState.FAILED ? 'danger' : status;
+          const timerTime = end_time
+            ? moment(moment.utc(end_time - start_time)).format(TIME_WITH_MS)
+            : '00:00:00.000';
+          return (
+            <TimerLabel type={timerType} role="timer">
+              {timerTime}
+            </TimerLabel>
           );
         },
       },