feat(#8): add response timings

getezy · Sep 6, 2022 · 97862aa · 97862aa
1 parent 71824ec
commit 97862aa
Show file tree

Hide file tree

Showing 21 changed files with 220 additions and 130 deletions.
diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@
 
 </div>
 
-`ezy` - desktop gRPC client.
+Desktop gRPC/gRPC-Web client.
 
 <div align="center">
   <img src="docs/preview.gif" align="center">
@@ -21,24 +21,20 @@
 🚧 This project is in beta phase and can get breaking changes at any time until it goes to v1.
 
 ## Features
-✅ Persisted collections.  
-✅ Multi-tabs.  
-✅ Shortcuts.  
-✅ Environments.  
-
-**gRPC**  
-✅ Unary calls.  
-✅ Client/Server/Bi-directional streaming.  
-✅ Stream cancelation.  
-✅ Metadata support.  
-✅ TLS (Server-side/Mutual) with CA/Self-Signed certificates.  
-
-**gRPC-Web**  
-✅ Unary calls.  
-✅ Server streaming.  
-✅ Stream cancelation.  
-✅ Metadata (Browser Headers) support.  
-✅ TLS (Server-side/Mutual) with CA/Self-Signed certificates.  
+✅ Tabs  
+✅ Shortcuts  
+✅ Environments  
+✅ Persisted collections  
+
+|                                                           	| gRPC 	|                            gRPC-Web                   |
+|-----------------------------------------------------------	|:----:	|:-------------------------------------------------------------:	  |
+| Unary Calls                                               	|   ✅  	|                               ✅                               	|
+| Server Streaming                                          	|   ✅  	|                               ✅                               	|
+| Client Streaming                                          	|   ✅  	| ❌ [read](https://github.com/grpc/grpc-web#streaming-support) 	  |
+| Bi-directional Streaming                                  	|   ✅  	| ❌ [read](https://github.com/grpc/grpc-web#streaming-support) 	  |
+| Stream cancelation                                        	|   ✅  	|                               ✅                               	|
+| Metadata                                                  	|   ✅  	|                       ✅ Browser Headers                       	|
+| TLS (Server-side/Mutual) with CA/Self-Signed certificates 	|   ✅  	|                               ✅                               	|
 
 ## Getting started
 Install the latest version for your OS from [release page](https://github.com/getezy/ezy/releases/latest).

diff --git a/src/app/components/tabs/tab-bar/tab-bar.styled.ts b/src/app/components/tabs/tab-bar/tab-bar.styled.ts
@@ -1,8 +1,22 @@
 import { styled } from '@nextui-org/react';
 
+export const TabBarWrapper = styled('div', {
+  display: 'flex',
+  flexWrap: 'nowrap',
+  overflow: 'hidden',
+});
+
+export const TabBarRightNodeWrapper = styled('div', {
+  display: 'flex',
+  flexWrap: 'nowrap',
+  alignItems: 'center',
+  marginLeft: 'auto',
+});
+
 export const StyledTabBar = styled('div', {
   position: 'relative',
   display: 'flex',
+  flex: 1,
   flexWrap: 'nowrap',
   overflow: 'auto',
 

diff --git a/src/app/components/tabs/tab-bar/tab-bar.tsx b/src/app/components/tabs/tab-bar/tab-bar.tsx
@@ -18,7 +18,7 @@ import React, { PropsWithChildren } from 'react';
 import { useOnScreen, useRefs } from '../hooks';
 import { TabProps } from '../tab';
 import { ActiveBar, ActiveBarProps } from './active-bar';
-import { StyledTabBar } from './tab-bar.styled';
+import { StyledTabBar, TabBarRightNodeWrapper, TabBarWrapper } from './tab-bar.styled';
 import { TabBarItem, TabBarItemDraggable } from './tab-bar-item';
 
 export type TabBarProps = {
@@ -37,6 +37,11 @@ export type TabBarProps = {
    */
   draggable?: boolean;
 
+  /**
+   * Fixed right node
+   */
+  rightNode?: React.ReactNode;
+
   /**
    * Fires on tab click.
    */
@@ -132,6 +137,7 @@ export const TabBar: React.FC<PropsWithChildren<TabBarProps>> = ({
   activeBar,
   activeKey,
   draggable = false,
+  rightNode,
   onTabActivate,
   onTabClose,
   onTabDragEnd = () => {},
@@ -189,56 +195,63 @@ export const TabBar: React.FC<PropsWithChildren<TabBarProps>> = ({
     };
 
     return (
-      <StyledTabBar ref={tabBarRef}>
-        <DndContext
-          autoScroll
-          sensors={sensors}
-          collisionDetection={closestCenter}
-          onDragStart={handleDragStart}
-          onDragEnd={handleDragEnd}
-        >
-          <SortableContext
-            items={tabBarItems.map((tab) => ({ id: tab.props.id }))}
-            strategy={horizontalListSortingStrategy}
-          >
-            {tabBarItems.map((child) =>
-              renderTabBarItemDraggable(
-                child,
-                { activeKey, onTabActivate, onTabClose, draggable },
-                getRef(child.props.id)
-              )
-            )}
-            <ActiveBar {...activeBar} css={activeBarStyles} />
-          </SortableContext>
-          <DragOverlay
-            adjustScale={false}
-            zIndex={1}
-            modifiers={[restrictToParentElement, restrictToHorizontalAxis]}
+      <TabBarWrapper>
+        <StyledTabBar ref={tabBarRef}>
+          <DndContext
+            autoScroll
+            sensors={sensors}
+            collisionDetection={closestCenter}
+            onDragStart={handleDragStart}
+            onDragEnd={handleDragEnd}
           >
-            {activeDraggingItem
-              ? renderTabBarItem(
-                  tabBarItems.find((item) => item.props.id === activeDraggingItem)!,
-                  {
-                    activeKey,
-                  }
+            <SortableContext
+              items={tabBarItems.map((tab) => ({ id: tab.props.id }))}
+              strategy={horizontalListSortingStrategy}
+            >
+              {tabBarItems.map((child) =>
+                renderTabBarItemDraggable(
+                  child,
+                  { activeKey, onTabActivate, onTabClose, draggable },
+                  getRef(child.props.id)
                 )
-              : null}
-          </DragOverlay>
-        </DndContext>
-      </StyledTabBar>
+              )}
+              <ActiveBar {...activeBar} css={activeBarStyles} />
+            </SortableContext>
+            <DragOverlay
+              adjustScale={false}
+              zIndex={1}
+              modifiers={[restrictToParentElement, restrictToHorizontalAxis]}
+            >
+              {activeDraggingItem
+                ? renderTabBarItem(
+                    tabBarItems.find((item) => item.props.id === activeDraggingItem)!,
+                    {
+                      activeKey,
+                    }
+                  )
+                : null}
+            </DragOverlay>
+          </DndContext>
+        </StyledTabBar>
+        {rightNode && <TabBarRightNodeWrapper>{rightNode}</TabBarRightNodeWrapper>}
+      </TabBarWrapper>
     );
   }
 
   return (
-    <StyledTabBar ref={tabBarRef}>
-      {tabBarItems.map((child) =>
-        renderTabBarItem(
-          child,
-          { activeKey, onTabActivate, onTabClose, draggable },
-          getRef(child.props.id)
-        )
-      )}
-      <ActiveBar {...activeBar} css={activeBarStyles} />
-    </StyledTabBar>
+    <TabBarWrapper>
+      <StyledTabBar ref={tabBarRef}>
+        {tabBarItems.map((child) =>
+          renderTabBarItem(
+            child,
+            { activeKey, onTabActivate, onTabClose, draggable },
+            getRef(child.props.id)
+          )
+        )}
+        <ActiveBar {...activeBar} css={activeBarStyles} />
+      </StyledTabBar>
+      {rightNode && <TabBarRightNodeWrapper>{rightNode}</TabBarRightNodeWrapper>}
+      {/* {rightNode} */}
+    </TabBarWrapper>
   );
 };
diff --git a/src/app/components/tabs/tabs.tsx b/src/app/components/tabs/tabs.tsx
@@ -20,6 +20,7 @@ export const Tabs: React.FC<TabsProps> = ({
   activeBar,
   activeKey,
   draggable,
+  rightNode,
   onTabActivate,
   onTabClose,
   onTabDragEnd,
@@ -38,6 +39,7 @@ export const Tabs: React.FC<TabsProps> = ({
         activeKey={activeKey}
         activeBar={activeBar}
         draggable={draggable}
+        rightNode={rightNode}
         onTabActivate={onTabActivate}
         onTabClose={onTabClose}
         onTabDragEnd={onTabDragEnd}

diff --git a/src/app/pages/status-bar.tsx b/src/app/pages/status-bar.tsx
@@ -1,4 +1,4 @@
-import { Badge, Container } from '@nextui-org/react';
+import { Container, Text } from '@nextui-org/react';
 import React from 'react';
 
 import packageJson from '../../../package.json';
@@ -23,14 +23,9 @@ export const StatusBar: React.FC = () => {
       css={{ borderTop: 'solid 1px $neutralBorder', height: 20 }}
     >
       <Container gap={0} responsive={false} display="flex" justify="flex-start" alignItems="center">
-        <Badge
-          size="xs"
-          variant="flat"
-          isSquared
-          css={{ height: 18, fontSize: 9, userSelect: 'none' }}
-        >
+        <Text b size={9} css={{ userSelect: 'none', color: '$accents7' }}>
           {packageJson.version}
-        </Badge>
+        </Text>
       </Container>
       <Container gap={0} responsive={false} display="flex" justify="flex-end" alignItems="center">
         {alignment === Alignment.VERTICAL ? (

diff --git a/src/app/pages/tabs-container/collection-types/grpc/hooks/use-bidirectional-streaming.ts b/src/app/pages/tabs-container/collection-types/grpc/hooks/use-bidirectional-streaming.ts
@@ -27,6 +27,7 @@ export function useBidirectionalStreaming() {
         tab.id,
         {
           type: GrpcStreamMessageType.STARTED,
+          timestamp: new Date().getTime(),
         },
         true
       );
@@ -38,12 +39,14 @@ export function useBidirectionalStreaming() {
         (data) => {
           addGrpcStreamMessage(tab.id, {
             type: GrpcStreamMessageType.SERVER_MESSAGE,
+            timestamp: new Date().getTime(),
             value: JSON.stringify(data, null, 2),
           });
         },
         (error) => {
           addGrpcStreamMessage(tab.id, {
             type: GrpcStreamMessageType.ERROR,
+            timestamp: new Date().getTime(),
             value: error.message,
           });
 
@@ -52,6 +55,7 @@ export function useBidirectionalStreaming() {
         () => {
           addGrpcStreamMessage(tab.id, {
             type: GrpcStreamMessageType.SERVER_STREAMING_ENDED,
+            timestamp: new Date().getTime(),
           });
 
           onEnd();
@@ -80,6 +84,7 @@ export function useBidirectionalStreaming() {
 
       addGrpcStreamMessage(tab.id, {
         type: GrpcStreamMessageType.CLIENT_MESSAGE,
+        timestamp: new Date().getTime(),
         value: tab.data.requestTabs.request.value,
       });
     } catch (error: any) {
@@ -95,6 +100,7 @@ export function useBidirectionalStreaming() {
 
     addGrpcStreamMessage(tab.id, {
       type: GrpcStreamMessageType.CLIENT_STREAMING_ENDED,
+      timestamp: new Date().getTime(),
     });
   }
 
@@ -104,6 +110,7 @@ export function useBidirectionalStreaming() {
   ): Promise<void> {
     addGrpcStreamMessage(tab.id, {
       type: GrpcStreamMessageType.CANCELED,
+      timestamp: new Date().getTime(),
     });
 
     await window.clients.grpc.bidirectionalStreaming.cancel(callId);

diff --git a/src/app/pages/tabs-container/collection-types/grpc/hooks/use-client-streaming.ts b/src/app/pages/tabs-container/collection-types/grpc/hooks/use-client-streaming.ts
@@ -27,6 +27,7 @@ export function useClientStreaming() {
         tab.id,
         {
           type: GrpcStreamMessageType.STARTED,
+          timestamp: new Date().getTime(),
         },
         true
       );
@@ -38,12 +39,14 @@ export function useClientStreaming() {
         (data) => {
           addGrpcStreamMessage(tab.id, {
             type: GrpcStreamMessageType.SERVER_MESSAGE,
+            timestamp: new Date().getTime(),
             value: JSON.stringify(data, null, 2),
           });
         },
         (error) => {
           addGrpcStreamMessage(tab.id, {
             type: GrpcStreamMessageType.ERROR,
+            timestamp: new Date().getTime(),
             value: JSON.stringify(error, null, 2),
           });
 
@@ -73,6 +76,7 @@ export function useClientStreaming() {
 
       addGrpcStreamMessage(tab.id, {
         type: GrpcStreamMessageType.CLIENT_MESSAGE,
+        timestamp: new Date().getTime(),
         value: tab.data.requestTabs.request.value,
       });
     } catch (error: any) {
@@ -85,6 +89,7 @@ export function useClientStreaming() {
 
     addGrpcStreamMessage(tab.id, {
       type: GrpcStreamMessageType.CLIENT_STREAMING_ENDED,
+      timestamp: new Date().getTime(),
     });
   }
 
@@ -96,6 +101,7 @@ export function useClientStreaming() {
 
     addGrpcStreamMessage(tab.id, {
       type: GrpcStreamMessageType.CANCELED,
+      timestamp: new Date().getTime(),
     });
   }
 

diff --git a/src/app/pages/tabs-container/collection-types/grpc/hooks/use-server-streaming.ts b/src/app/pages/tabs-container/collection-types/grpc/hooks/use-server-streaming.ts
@@ -29,6 +29,7 @@ export function useServerStreaming() {
         tab.id,
         {
           type: GrpcStreamMessageType.STARTED,
+          timestamp: new Date().getTime(),
           value: tab.data.requestTabs.request.value,
         },
         true
@@ -45,12 +46,14 @@ export function useServerStreaming() {
         (data) => {
           addGrpcStreamMessage(tab.id, {
             type: GrpcStreamMessageType.SERVER_MESSAGE,
+            timestamp: new Date().getTime(),
             value: JSON.stringify(data, null, 2),
           });
         },
         (error) => {
           addGrpcStreamMessage(tab.id, {
             type: GrpcStreamMessageType.ERROR,
+            timestamp: new Date().getTime(),
             value: error.message,
           });
 
@@ -59,6 +62,7 @@ export function useServerStreaming() {
         () => {
           addGrpcStreamMessage(tab.id, {
             type: GrpcStreamMessageType.SERVER_STREAMING_ENDED,
+            timestamp: new Date().getTime(),
           });
 
           onEnd();
@@ -82,6 +86,7 @@ export function useServerStreaming() {
   ): Promise<void> {
     addGrpcStreamMessage(tab.id, {
       type: GrpcStreamMessageType.CANCELED,
+      timestamp: new Date().getTime(),
     });
 
     const client =