feat(console): add "network" section to QueryResult + move "count" and...

feat(console): add "network" section to QueryResult + move "count" and "compiler" to right column (#431)

ui/src/components/Text/index.tsx

@@ -9,6 +9,7 @@ type Transform = "capitalize" | "lowercase" | "uppercase"
 
 export type TextProps = Readonly<{
   _style?: FontStyle
+  align?: "left" | "right" | "center"
   className?: string
   code?: boolean
   color?: Color
@@ -38,6 +39,7 @@ export const textStyles = css<TextProps>`
   font-style: ${({ _style }) => _style || "inherit"};
   font-weight: ${({ weight }) => weight};
   text-transform: ${({ transform }) => transform};
+  ${({ align }) => (align ? `text-align: ${align}` : "")};
   ${({ ellipsis }) => ellipsis && ellipsisStyles};
 `
 

ui/src/scenes/Editor/QueryResult/index.tsx

@@ -29,7 +29,6 @@ const Details = styled.div`
   display: flex;
   margin-top: 0.5rem;
   padding: 1rem;
-  flex-direction: column;
   user-select: none;
   background: ${color("draculaBackground")};
 `
@@ -40,6 +39,15 @@ const DetailsLink = styled(Text)`
   }
 `
 
+const Column = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+const ColumnLeft = styled(Column)`
+  flex: 1;
+`
+
 const roundTiming = (time: number): number =>
   Math.round((time + Number.EPSILON) * 100) / 100
 
@@ -102,18 +110,28 @@ const QueryResult = ({ compiler, count, execute, fetch, rowCount }: Props) => {
         unmountOnExit
       >
         <Details>
-          <Text color="draculaForeground">
-            Fetch: {addColor(formatTiming(fetch))}
-          </Text>
-          <Text color="draculaForeground">
-            Execute: {addColor(formatTiming(execute))}
-          </Text>
-          <Text color="draculaForeground">
-            Count: {addColor(formatTiming(count))}
-          </Text>
-          <Text color="draculaForeground">
-            Compile: {addColor(formatTiming(compiler))}
-          </Text>
+          <ColumnLeft>
+            <Text color="draculaForeground">
+              Execute: {addColor(formatTiming(execute))}&nbsp;
+            </Text>
+            <Text color="draculaForeground">
+              Network:&nbsp;
+              {addColor(formatTiming(fetch - execute))}
+            </Text>
+            <Text color="draculaForeground">
+              Total:&nbsp;
+              {addColor(formatTiming(fetch))}
+            </Text>
+          </ColumnLeft>
+
+          <Column>
+            <Text align="right" color="gray2" size="sm">
+              Count: {formatTiming(count)}
+            </Text>
+            <Text align="right" color="gray2" size="sm">
+              Compile: {formatTiming(compiler)}
+            </Text>
+          </Column>
         </Details>
       </CSSTransition>
     </Wrapper>

ui/src/scenes/Notifications/Notification/index.tsx

@@ -16,12 +16,12 @@ type Props = NotificationShape
 
 type AnimationPlay = "paused" | "running"
 
-const Wrapper = styled(Toast)`
+const Wrapper = styled(Toast)<{ pinned: boolean }>`
   margin-top: 1rem;
   padding-right: 3rem;
   border-right: none;
-  border-bottom: none;
   box-shadow: ${color("black")} 0 0 4px;
+  ${({ pinned }) => (pinned ? "" : "border-bottom: none;")};
 
   overflow: hidden;
   ${bezierTransition};
@@ -144,6 +144,7 @@ const Notification = ({ createdAt, line1, title, type, ...rest }: Props) => {
         borderColor={getBorderColor(type)}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
+        pinned={pinned}
       >
         <Title color="gray2" hasLine1={!!line1}>
           [{format("HH:mm:ss", createdAt)}]&nbsp;{title}