Line data    Source code

       1              : import * as React from 'react';
       2              : import icons from '@ankoh/dashql-svg-symbols';
       3              : 
       4              : import { AnchorAlignment, AnchorSide } from '../ui/foundations/anchored_position.js';
       5              : import { AnchoredOverlay } from '../ui/foundations/anchored_overlay.js';
       6              : import { OverlaySize } from '../ui/foundations/overlay.js';
       7              : import { VerticalTabs, VerticalTabVariant } from '../ui/foundations/vertical_tabs.js';
       8              : import { LogViewer } from '../ui/logs/log_viewer.js';
       9              : import { ShellQueryViewer } from './shell_query_history.js';
      10              : import { HttpRequestViewer } from '../ui/http/http_request_viewer.js';
      11              : import * as styles from './shell_navbar.module.css';
      12              : 
      13            1 : enum TabKey {
      14            1 :     LogViewer = 0,
      15            1 :     QueryViewer = 1,
      16            1 :     HttpRequests = 2,
      17            1 : }
      18              : 
      19              : interface ShellInternalsViewerProps {
      20              :     onClose: () => void;
      21              : }
      22              : 
      23            1 : export const ShellInternalsViewer: React.FC<ShellInternalsViewerProps> = props => {
      24            1 :     const [selectedTab, selectTab] = React.useState<TabKey>(TabKey.LogViewer);
      25              : 
      26            1 :     return (
      27            1 :         <VerticalTabs
      28            1 :             variant={VerticalTabVariant.Stacked}
      29            1 :             selectedTab={selectedTab}
      30            1 :             selectTab={selectTab}
      31            1 :             tabProps={{
      32            1 :                 [TabKey.LogViewer]: {
      33            1 :                     tabId: TabKey.LogViewer,
      34            1 :                     icon: `${icons}#log_24`,
      35            1 :                     labelShort: 'Logs',
      36            1 :                     ariaLabel: 'Application logs',
      37            1 :                     description: 'View application logs',
      38            1 :                     disabled: false,
      39            1 :                 },
      40            1 :                 [TabKey.QueryViewer]: {
      41            1 :                     tabId: TabKey.QueryViewer,
      42            1 :                     icon: `${icons}#database`,
      43            1 :                     labelShort: 'Queries',
      44            1 :                     ariaLabel: 'Query history',
      45            1 :                     description: 'View query execution history',
      46            1 :                     disabled: false,
      47            1 :                 },
      48            1 :                 [TabKey.HttpRequests]: {
      49            1 :                     tabId: TabKey.HttpRequests,
      50            1 :                     icon: `${icons}#globe_24`,
      51            1 :                     labelShort: 'Requests',
      52            1 :                     ariaLabel: 'HTTP requests',
      53            1 :                     description: 'View the outgoing HTTP requests',
      54            1 :                     disabled: false,
      55            1 :                 },
      56            1 :             }}
      57            1 :             tabKeys={[TabKey.LogViewer, TabKey.QueryViewer, TabKey.HttpRequests]}
      58            1 :             tabRenderers={{
      59            1 :                 [TabKey.LogViewer]: () => <LogViewer onClose={props.onClose} />,
      60            1 :                 [TabKey.QueryViewer]: () => <ShellQueryViewer onClose={props.onClose} />,
      61            1 :                 [TabKey.HttpRequests]: () => <HttpRequestViewer onClose={props.onClose} />,
      62            1 :             }}
      63            1 :         />
      64              :     );
      65            1 : };
      66              : 
      67            1 : export const ShellInternals: React.FC = () => {
      68            1 :     const [isOpen, setIsOpen] = React.useState(false);
      69            1 :     const close = React.useCallback(() => setIsOpen(false), []);
      70              : 
      71            1 :     return (
      72            1 :         <AnchoredOverlay
      73            1 :             open={isOpen}
      74            1 :             onOpen={() => setIsOpen(true)}
      75            1 :             onClose={close}
      76            1 :             side={AnchorSide.OutsideBottom}
      77            1 :             align={AnchorAlignment.End}
      78            1 :             anchorOffset={16}
      79            1 :             overlayProps={{ width: OverlaySize.XL, height: OverlaySize.L }}
      80            1 :             renderAnchor={(props: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
      81            1 :                 <button
      82            1 :                     {...props}
      83            1 :                     type="button"
      84            1 :                     className={styles.actionButton}
      85              :                 >
      86            1 :                     <svg width="14px" height="14px" aria-hidden="true">
      87            1 :                         <use xlinkHref={`${icons}#cpu_16`} />
      88            1 :                     </svg>
      89            1 :                     <span className={styles.actionLabel}>Client</span>
      90            1 :                 </button>
      91              :             )}
      92              :         >
      93            1 :             <ShellInternalsViewer onClose={close} />
      94            1 :         </AnchoredOverlay>
      95              :     );
      96            1 : };