Merge pull request #940 from PrefectHQ/915

UI: Log Table Tweaks (Part 1)
PrefectHQ · Feb 7, 2022 · fd81cc0 · fd81cc0
2 parents 1dca677 + e63b93c
commit fd81cc0
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 20 deletions.
diff --git a/orion-ui/packages/orion-design/src/components/FlowRunLog.vue b/orion-ui/packages/orion-design/src/components/FlowRunLog.vue
@@ -86,8 +86,8 @@
   }
 
   @media screen and (min-width: map.get($breakpoints, 'md')) {
-    grid-template-areas: "task level time message";
-    grid-template-columns: [task] 140px [level] 65px [time] 100px [message] 1fr;
+    grid-template-areas: "level time message task";
+    grid-template-columns: [level] 65px [time] 100px [message] 1fr [task] 140px;
     padding: 0 var(--p-2);
 
     + .flow-run-log {

diff --git a/orion-ui/packages/orion-design/src/components/FlowRunLogs.vue b/orion-ui/packages/orion-design/src/components/FlowRunLogs.vue
@@ -79,7 +79,7 @@
     left: 0;
     right: 0;
     top: 50%;
-    background-color: #CECDD3;
+    background-color: #fff;
   }
 }
 

diff --git a/orion-ui/src/components/FlowRunLogsTabContent.vue b/orion-ui/src/components/FlowRunLogsTabContent.vue
@@ -1,23 +1,17 @@
 <template>
   <div class="flow-run-logs-tabs-content">
     <div class="flow-run-logs-tabs-content__header">
-      <p class="flow-run-logs-tabs-content__span">Showing: Start to Now</p>
       <m-select
         v-model="levelFilter"
         :options="levelOptions"
         class="flow-run-logs-tabs-content__filter"
       />
+       <CopyButton text :value="makeCsv" class="flow-run-logs__copy" toast="Logs copied to clipboard">
+          Copy Logs
+        </CopyButton>
     </div>
     <div class="flow-run-logs-tab-content__table">
       <div class="flow-run-logs-tab-content__table-header">
-        <span
-          class="
-            flow-run-logs-tab-content__column
-            flow-run-logs-tab-content__column-run
-          "
-        >
-          Run name
-        </span>
         <span
           class="
             flow-run-logs-tab-content__column
@@ -42,9 +36,14 @@
         >
           Message
         </span>
-        <CopyButton :value="makeCsv" toast="Logs copied to clipboard">
-          Copy Logs
-        </CopyButton>
+        <span
+          class="
+            flow-run-logs-tab-content__column
+            flow-run-logs-tab-content__column-run
+          "
+        >
+          Run name
+        </span>
       </div>
       <div ref="logsRef" class="flow-run-logs-tab-content__logs">
         <FlowRunLogs :logs="logs">
@@ -201,18 +200,18 @@ watch(
   grid-template-columns: [message] 1fr [copy] 115px;
 
   @media screen and (min-width: map.get($breakpoints, 'md')) {
-    grid-template-areas: 'task level time message copy';
-    grid-template-columns: [task] 140px [level] 65px [time] 100px [message] 1fr [copy] 115px;
+    grid-template-areas: 'level time message task';
+    grid-template-columns: [level] 65px [time] 100px [message] 1fr [task] 140px;
   }
 }
 
 .flow-run-logs-tab-content__column {
   font-weight: 600;
 }
 
-.flow-run-logs-tab-content__column-run,
 .flow-run-logs-tab-content__column--level,
-.flow-run-logs-tab-content__column--time {
+.flow-run-logs-tab-content__column--time,
+.flow-run-logs-tab-content__column-run {
   display: none;
 
   @media screen and (min-width: map.get($breakpoints, 'md')) {
@@ -273,4 +272,14 @@ watch(
   overflow-y: auto;
   position: relative;
 }
+
+.flow-run-logs__copy {
+  border: none;
+  background-color: inherit;
+  color: #024dfd;
+  cursor: pointer;
+  font-weight: 600;
+}
 </style>
+
+
diff --git a/orion-ui/src/views/FlowRun--views/Index.vue b/orion-ui/src/views/FlowRun--views/Index.vue
@@ -193,7 +193,7 @@ import { toPluralString } from '@/utilities/strings'
 
 const route = useRoute()
 
-const resultsTab: Ref<'task_runs' | 'sub_flow_runs' | 'logs'> = ref('task_runs')
+const resultsTab: Ref<'task_runs' | 'sub_flow_runs' | 'logs'> = ref('logs')
 
 const id = ref(route?.params.id as string)