datajunction-ui 0.0.1-rc.9 → 0.0.2-0.dev1

package/src/app/components/NodeListActions.jsx

@@ -0,0 +1,69 @@
+import DJClientContext from '../providers/djclient';
+import * as React from 'react';
+import DeleteIcon from '../icons/DeleteIcon';
+import EditIcon from '../icons/EditIcon';
+import { Form, Formik } from 'formik';
+import { useContext } from 'react';
+import { displayMessageAfterSubmit } from '../../utils/form';
+
+export default function NodeListActions({ nodeName }) {
+  const [editButton, setEditButton] = React.useState(<EditIcon />);
+  const [deleteButton, setDeleteButton] = React.useState(<DeleteIcon />);
+
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const deleteNode = async (values, { setStatus }) => {
+    if (
+      !window.confirm('Deleting node ' + values.nodeName + '. Are you sure?')
+    ) {
+      return;
+    }
+    const { status, json } = await djClient.deactivate(values.nodeName);
+    if (status === 200 || status === 201 || status === 204) {
+      setStatus({
+        success: <>Successfully deleted node {values.nodeName}</>,
+      });
+      setEditButton(''); // hide the Edit button
+      setDeleteButton(''); // hide the Delete button
+    } else {
+      setStatus({
+        failure: `${json.message}`,
+      });
+    }
+  };
+
+  const initialValues = {
+    nodeName: nodeName,
+  };
+
+  return (
+    <div>
+      <a href={`/nodes/${nodeName}/edit`} style={{ marginLeft: '0.5rem' }}>
+        {editButton}
+      </a>
+      <Formik initialValues={initialValues} onSubmit={deleteNode}>
+        {function Render({ status, setFieldValue }) {
+          return (
+            <Form className="deleteNode">
+              {displayMessageAfterSubmit(status)}
+              {
+                <>
+                  <button
+                    type="submit"
+                    style={{
+                      marginLeft: 0,
+                      all: 'unset',
+                      color: '#005c72',
+                      cursor: 'pointer',
+                    }}
+                  >
+                    {deleteButton}
+                  </button>
+                </>
+              }
+            </Form>
+          );
+        }}
+      </Formik>
+    </div>
+  );
+}

package/src/app/components/NodeMaterializationDelete.jsx

@@ -0,0 +1,90 @@
+import DJClientContext from '../providers/djclient';
+import * as React from 'react';
+import DeleteIcon from '../icons/DeleteIcon';
+import { Form, Formik } from 'formik';
+import { useContext } from 'react';
+import { displayMessageAfterSubmit } from '../../utils/form';
+
+export default function NodeMaterializationDelete({
+  nodeName,
+  materializationName,
+  nodeVersion = null,
+}) {
+  const [deleteButton, setDeleteButton] = React.useState(<DeleteIcon />);
+
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const deleteNode = async (values, { setStatus }) => {
+    if (
+      !window.confirm(
+        'Deleting materialization job ' +
+          values.materializationName +
+          ' for node version ' +
+          values.nodeVersion +
+          '. Are you sure?',
+      )
+    ) {
+      return;
+    }
+    const { status, json } = await djClient.deleteMaterialization(
+      values.nodeName,
+      values.materializationName,
+      values.nodeVersion,
+    );
+    if (status === 200 || status === 201 || status === 204) {
+      window.location.reload();
+      setStatus({
+        success: (
+          <>
+            Successfully deleted materialization job:{' '}
+            {values.materializationName}
+          </>
+        ),
+      });
+      setDeleteButton(''); // hide the Delete button
+    } else {
+      setStatus({
+        failure: `${json.message}`,
+      });
+    }
+  };
+
+  const initialValues = {
+    nodeName: nodeName,
+    materializationName: materializationName,
+    nodeVersion: nodeVersion,
+  };
+
+  return (
+    <div>
+      <Formik
+        key={`${nodeName}-${materializationName}-${nodeVersion}`}
+        initialValues={initialValues}
+        enableReinitialize={true}
+        onSubmit={deleteNode}
+      >
+        {function Render({ status, setFieldValue }) {
+          return (
+            <Form className="deleteNode">
+              {displayMessageAfterSubmit(status)}
+              {
+                <>
+                  <button
+                    type="submit"
+                    style={{
+                      marginLeft: 0,
+                      all: 'unset',
+                      color: '#005c72',
+                      cursor: 'pointer',
+                    }}
+                  >
+                    {deleteButton}
+                  </button>
+                </>
+              }
+            </Form>
+          );
+        }}
+      </Formik>
+    </div>
+  );
+}

package/src/app/components/NotificationBell.tsx

@@ -0,0 +1,223 @@
+import { useContext, useEffect, useState } from 'react';
+import DJClientContext from '../providers/djclient';
+import NotificationIcon from '../icons/NotificationIcon';
+import SettingsIcon from '../icons/SettingsIcon';
+import LoadingIcon from '../icons/LoadingIcon';
+import { formatRelativeTime } from '../utils/date';
+
+interface HistoryEntry {
+  id: number;
+  entity_type: string;
+  entity_name: string;
+  node: string;
+  activity_type: string;
+  user: string;
+  created_at: string;
+  details?: {
+    version?: string;
+    [key: string]: any;
+  };
+}
+
+interface EnrichedHistoryEntry extends HistoryEntry {
+  node_type?: string;
+  display_name?: string;
+}
+
+interface NodeInfo {
+  name: string;
+  type: string;
+  current?: {
+    displayName?: string;
+  };
+}
+
+// Calculate unread count based on last_viewed_notifications_at
+const calculateUnreadCount = (
+  notifs: HistoryEntry[],
+  lastViewed: string | null | undefined,
+): number => {
+  if (!lastViewed) return notifs.length;
+  const lastViewedDate = new Date(lastViewed);
+  return notifs.filter(n => new Date(n.created_at) > lastViewedDate).length;
+};
+
+// Enrich history entries with node info from GraphQL
+const enrichWithNodeInfo = (
+  entries: HistoryEntry[],
+  nodes: NodeInfo[],
+): EnrichedHistoryEntry[] => {
+  const nodeMap = new Map(nodes.map(n => [n.name, n]));
+  return entries.map(entry => {
+    const node = nodeMap.get(entry.entity_name);
+    return {
+      ...entry,
+      node_type: node?.type,
+      display_name: node?.current?.displayName,
+    };
+  });
+};
+
+interface NotificationBellProps {
+  onDropdownToggle?: (isOpen: boolean) => void;
+  forceClose?: boolean;
+}
+
+export default function NotificationBell({
+  onDropdownToggle,
+  forceClose,
+}: NotificationBellProps) {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [showDropdown, setShowDropdown] = useState(false);
+
+  // Close when forceClose becomes true
+  useEffect(() => {
+    if (forceClose && showDropdown) {
+      setShowDropdown(false);
+    }
+  }, [forceClose, showDropdown]);
+  const [notifications, setNotifications] = useState<EnrichedHistoryEntry[]>(
+    [],
+  );
+  const [loading, setLoading] = useState(false);
+  const [unreadCount, setUnreadCount] = useState(0);
+
+  // Fetch notifications on mount
+  useEffect(() => {
+    async function fetchNotifications() {
+      setLoading(true);
+      try {
+        const current = await djClient.whoami();
+        const history: HistoryEntry[] =
+          (await djClient.getSubscribedHistory(10)) || [];
+
+        // Get unique entity names and fetch their info via GraphQL
+        // (some may not be nodes, but GraphQL will just not return them)
+        const nodeNames = Array.from(new Set(history.map(h => h.entity_name)));
+        const nodes: NodeInfo[] = nodeNames.length
+          ? await djClient.getNodesByNames(nodeNames)
+          : [];
+
+        const enriched = enrichWithNodeInfo(history, nodes);
+        setNotifications(enriched);
+        setUnreadCount(
+          calculateUnreadCount(history, current?.last_viewed_notifications_at),
+        );
+      } catch (error) {
+        console.error('Error fetching notifications:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchNotifications();
+  }, [djClient]);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      if (!target.closest('.notification-bell-dropdown')) {
+        setShowDropdown(false);
+        onDropdownToggle?.(false);
+      }
+    };
+    document.addEventListener('click', handleClickOutside);
+    return () => document.removeEventListener('click', handleClickOutside);
+  }, [onDropdownToggle]);
+
+  const handleToggle = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    const willOpen = !showDropdown;
+
+    // Mark as read when opening
+    if (willOpen && unreadCount > 0) {
+      djClient.markNotificationsRead();
+      setUnreadCount(0);
+    }
+
+    setShowDropdown(willOpen);
+    onDropdownToggle?.(willOpen);
+  };
+
+  return (
+    <div className="nav-dropdown notification-bell-dropdown">
+      <button className="nav-icon-button" onClick={handleToggle}>
+        <NotificationIcon />
+        {unreadCount > 0 && (
+          <span className="notification-badge">{unreadCount}</span>
+        )}
+      </button>
+      {showDropdown && (
+        <div className="nav-dropdown-menu notifications-menu">
+          <div className="dropdown-header">
+            <span className="header-left">
+              <NotificationIcon /> Updates
+            </span>
+            <a
+              href="/settings#notifications"
+              className="header-settings"
+              title="Manage subscriptions"
+            >
+              <SettingsIcon />
+            </a>
+          </div>
+          <div className="notifications-list">
+            {loading ? (
+              <div className="dropdown-item">
+                <LoadingIcon centered={false} />
+              </div>
+            ) : notifications.length === 0 ? (
+              <div className="dropdown-item text-muted">
+                No updates on watched nodes
+              </div>
+            ) : (
+              notifications.slice(0, 5).map(entry => {
+                const version = entry.details?.version;
+                const href = version
+                  ? `/nodes/${entry.entity_name}/revisions/${version}`
+                  : `/nodes/${entry.entity_name}/history`;
+                return (
+                  <a key={entry.id} className="notification-item" href={href}>
+                    <span className="notification-node">
+                      <span className="notification-title">
+                        {entry.display_name || entry.entity_name}
+                        {version && (
+                          <span className="badge version">{version}</span>
+                        )}
+                      </span>
+                      {entry.display_name && (
+                        <span className="notification-entity">
+                          {entry.entity_name}
+                        </span>
+                      )}
+                    </span>
+                    <span className="notification-meta">
+                      {entry.node_type && (
+                        <span
+                          className={`node_type__${entry.node_type} badge node_type`}
+                        >
+                          {entry.node_type.toUpperCase()}
+                        </span>
+                      )}
+                      {entry.activity_type}d by{' '}
+                      <span style={{ color: '#333' }}>{entry.user}</span> ·{' '}
+                      {formatRelativeTime(entry.created_at)}
+                    </span>
+                  </a>
+                );
+              })
+            )}
+          </div>
+          {notifications.length > 0 && (
+            <>
+              <hr className="dropdown-divider" />
+              <a className="dropdown-item view-all" href="/notifications">
+                View all
+              </a>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/app/components/QueryInfo.jsx

@@ -0,0 +1,172 @@
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { solarizedDark } from 'react-syntax-highlighter/src/styles/hljs';
+import React from 'react';
+
+export default function QueryInfo({
+  id,
+  state,
+  engine_name,
+  engine_version,
+  errors,
+  links,
+  output_table,
+  scheduled,
+  started,
+  finished,
+  numRows,
+  isList = false,
+}) {
+  return isList === false ? (
+    <div className="table-responsive">
+      <table className="card-inner-table table">
+        <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
+          <tr>
+            <th>Query ID</th>
+            <th>Engine</th>
+            <th>State</th>
+            <th>Scheduled</th>
+            <th>Started</th>
+            <th>Errors</th>
+            <th>Links</th>
+            <th>Output Table</th>
+            <th>Number of Rows</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              <span className="rounded-pill badge bg-secondary-soft">{id}</span>
+            </td>
+            <td>
+              <span className="rounded-pill badge bg-secondary-soft">
+                {engine_name}
+                {' - '}
+                {engine_version}
+              </span>
+            </td>
+            <td>{state}</td>
+            <td>{scheduled}</td>
+            <td>{started}</td>
+            <td>
+              {errors?.length ? (
+                errors.map((e, idx) => (
+                  <p key={`error-${idx}`}>
+                    <span className="rounded-pill badge bg-secondary-error">
+                      {e}
+                    </span>
+                  </p>
+                ))
+              ) : (
+                <></>
+              )}
+            </td>
+            <td>
+              {links?.length ? (
+                links.map((link, idx) => (
+                  <p key={idx}>
+                    <a href={link} target="_blank" rel="noreferrer">
+                      {link}
+                    </a>
+                  </p>
+                ))
+              ) : (
+                <></>
+              )}
+            </td>
+            <td>{output_table}</td>
+            <td>{numRows}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  ) : (
+    <div className="rightbottom">
+      <ul style={{ padding: '20px' }}>
+        <li className={'query-info'}>
+          <label>Query ID</label>{' '}
+          <span className="tag_value rounded-pill badge">
+            {links?.length ? (
+              <a
+                href={links[links.length - 1]}
+                target={'_blank'}
+                rel="noreferrer"
+              >
+                {id}
+              </a>
+            ) : (
+              id
+            )}
+          </span>
+        </li>
+        <li className={'query-info'}>
+          <label>State</label>
+          <span className="tag_value rounded-pill badge">{state}</span>
+        </li>
+        <li className={'query-info'}>
+          <label>Engine</label>{' '}
+          <span className="tag_value rounded-pill badge">
+            {engine_name}
+            {' - '}
+            {engine_version}
+          </span>
+        </li>
+        <li className={'query-info'}>
+          <label>Scheduled</label> {scheduled}
+        </li>
+        <li className={'query-info'}>
+          <label>Started</label> {started}
+        </li>
+        <li className={'query-info'}>
+          <label>Finished</label> {finished}
+        </li>
+        <li className={'query-info'}>
+          <label>Logs</label>{' '}
+          {errors?.length ? (
+            errors.map(error => (
+              <div
+                style={{
+                  height: '800px',
+                  width: '80%',
+                  overflow: 'scroll',
+                  borderRadius: '0',
+                  border: '1px solid #ccc',
+                }}
+                className="queryrunner-query"
+              >
+                <SyntaxHighlighter
+                  language="javascript"
+                  style={solarizedDark}
+                  wrapLines={true}
+                >
+                  {error}
+                </SyntaxHighlighter>
+              </div>
+            ))
+          ) : (
+            <></>
+          )}
+        </li>
+        <li className={'query-info'}>
+          <label>Links:</label>{' '}
+          {links?.length ? (
+            links.map((link, idx) => (
+              <p key={idx}>
+                <a href={link} target="_blank" rel="noreferrer">
+                  {link}
+                </a>
+              </p>
+            ))
+          ) : (
+            <></>
+          )}
+        </li>
+        <li className={'query-info'}>
+          <label>Output Table:</label> {output_table}
+        </li>
+        <li className={'query-info'}>
+          <label>Rows:</label> {numRows}
+        </li>
+      </ul>
+    </div>
+  );
+}

package/src/app/components/Search.jsx

@@ -0,0 +1,94 @@
+import { useState, useEffect, useContext } from 'react';
+import DJClientContext from '../providers/djclient';
+import Fuse from 'fuse.js';
+
+import './search.css';
+
+export default function Search() {
+  const [fuse, setFuse] = useState();
+  const [searchValue, setSearchValue] = useState('');
+  const [searchResults, setSearchResults] = useState([]);
+
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+
+  const truncate = str => {
+    if (str === null) {
+      return '';
+    }
+    return str.length > 100 ? str.substring(0, 90) + '...' : str;
+  };
+
+  useEffect(() => {
+    const fetchNodes = async () => {
+      try {
+        const [data, tags] = await Promise.all([
+          djClient.nodeDetails(),
+          djClient.listTags(),
+        ]);
+        const allEntities = data.concat(
+          (tags || []).map(tag => {
+            tag.type = 'tag';
+            return tag;
+          }),
+        );
+        const fuse = new Fuse(allEntities || [], {
+          keys: [
+            'name', // will be assigned a `weight` of 1
+            { name: 'description', weight: 2 },
+            { name: 'display_name', weight: 3 },
+            { name: 'type', weight: 4 },
+            { name: 'tag_type', weight: 5 },
+          ],
+        });
+        setFuse(fuse);
+      } catch (error) {
+        console.error('Error fetching nodes or tags:', error);
+      }
+    };
+    fetchNodes();
+  }, []);
+
+  const handleChange = e => {
+    setSearchValue(e.target.value);
+    if (fuse) {
+      setSearchResults(fuse.search(e.target.value).map(result => result.item));
+    }
+  };
+
+  return (
+    <div>
+      <form
+        className="search-box"
+        onSubmit={e => {
+          e.preventDefault();
+        }}
+      >
+        <input
+          type="text"
+          placeholder="Search"
+          name="search"
+          value={searchValue}
+          onChange={handleChange}
+        />
+      </form>
+      <div className="search-results">
+        {searchResults.slice(0, 20).map(item => {
+          const itemUrl =
+            item.type !== 'tag' ? `/nodes/${item.name}` : `/tags/${item.name}`;
+          return (
+            <a href={itemUrl}>
+              <div key={item.name} className="search-result-item">
+                <span className={`node_type__${item.type} badge node_type`}>
+                  {item.type}
+                </span>
+                {item.display_name} (<b>{item.name}</b>){' '}
+                {item.description ? '- ' : ' '}
+                {truncate(item.description || '')}
+              </div>
+            </a>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/app/components/Tab.jsx

@@ -7,7 +7,14 @@ export default class Tab extends Component {
       <div className={selectedTab === id ? 'col active' : 'col'}>
         <div className="header-tabs nav-overflow nav nav-tabs">
           <div className="nav-item">
-            <button id={id} className="nav-link" tabIndex="0" onClick={onClick}>
+            <button
+              id={id}
+              className="nav-link"
+              tabIndex="0"
+              onClick={onClick}
+              aria-label={this.props.name}
+              aria-hidden="false"
+            >
               {this.props.name}
             </button>
           </div>

package/src/app/components/ToggleSwitch.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+const ToggleSwitch = ({ checked, onChange, toggleName }) => (
+  <>
+    <input
+      id="show-compiled-sql-toggle"
+      role="checkbox"
+      aria-label="ToggleSwitch"
+      aria-hidden="false"
+      type="checkbox"
+      className="checkbox"
+      checked={checked}
+      onChange={e => onChange(e.target.checked)}
+    />
+    <label htmlFor="show-compiled-sql-toggle" className="switch"></label>{' '}
+    {toggleName}
+  </>
+);
+
+export default ToggleSwitch;