Line data    Source code

       1              : import * as React from 'react';
       2              : import symbols from '@ankoh/dashql-svg-symbols';
       3              : 
       4              : import { useConnectionReferences, useConnectionRegistry } from './connection_registry.js';
       5              : import type { ConnectionState } from './connection_state.js';
       6              : import { connectionLabelParts, connectionLabelText, connectionOrdinals } from './connection_label.js';
       7              : import { ConnectionLabelView } from './connection_label_view.js';
       8              : import { HyperLogDashboard } from './hyper/hyper_log_dashboard.js';
       9              : import { ConnectionEngineFacts } from './connection_engine_facts.js';
      10              : import * as styles from './connection_overview_page.module.css';
      11              : import { CONNECTOR_ICON_STYLE, useConnectorIcon } from './connector_icon.js';
      12              : 
      13              : /// Does a connection run its queries in a Hyper, whose log the metrics are read from?
      14            0 : function isHyperConnection(connection: ConnectionState): boolean {
      15            0 :     return 'hyper' in connection.params;
      16            0 : }
      17              : 
      18              : interface Props {
      19              :     /// The id of the connection
      20              :     connectionId: string;
      21              :     /// Close the overview
      22              :     onClose: () => void;
      23              : }
      24              : 
      25              : /// The operational overview of a connection.
      26              : /// Closes itself once the connection is deleted.
      27            1 : export const ConnectionOverviewPage: React.FC<Props> = ({ connectionId, onClose }) => {
      28            0 :     const connectorIcon = useConnectorIcon();
      29            0 :     const [registry] = useConnectionRegistry();
      30            0 :     const references = useConnectionReferences();
      31            0 :     const connection = registry.connections.get(connectionId) ?? null;
      32            0 :     React.useEffect(() => {
      33            0 :         if (connection == null) onClose();
      34            0 :     }, [connection == null, onClose]);
      35            0 :     if (connection == null) return null;
      36            0 :     const label = connectionLabelParts(connection, connectionOrdinals(registry, references).get(connectionId) ?? null);
      37            0 :     const labelText = connectionLabelText(label);
      38            0 :     return (
      39            0 :         <div className={styles.container}>
      40            0 :             <section className={styles.page} aria-label={`Overview of ${labelText}`}>
      41            0 :                 <header className={styles.header}>
      42            0 :                     <svg width="16" height="16" aria-hidden="true">
      43            0 :                         <use xlinkHref={`${symbols}#${connectorIcon(connection.connectorInfo)}`} style={CONNECTOR_ICON_STYLE} />
      44            0 :                     </svg>
      45            0 :                     <h2 className={styles.title}>
      46            0 :                         <ConnectionLabelView parts={label} inline />
      47            0 :                         <span className={styles.title_separator}>/</span>
      48            0 :                         <span>Overview</span>
      49            0 :                     </h2>
      50            0 :                 </header>
      51            0 :                 <div>
      52            0 :                     {isHyperConnection(connection)
      53            0 :                         ? <HyperLogDashboard connectionId={connectionId} engine={<ConnectionEngineFacts connection={connection} />} />
      54              :                         : (
      55            0 :                             <p className={styles.unavailable} data-testid="connection-metrics-unavailable">
      56              :                                 Query metrics are available for Hyper connections.
      57            0 :                             </p>
      58              :                         )}
      59            0 :                 </div>
      60            0 :             </section>
      61            0 :         </div>
      62              :     );
      63            0 : };