datajunction-ui 0.0.1-a45 → 0.0.1-a45.dev14

package/src/app/pages/NodePage/NodeHistory.jsx

@@ -1,223 +1,201 @@
 import { useEffect, useState } from 'react';
-import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
 import * as React from 'react';
+import DiffIcon from '../../icons/DiffIcon';
+import { labelize } from '../../../utils/form';
+import CommitIcon from '../../icons/CommitIcon';
 
 export default function NodeHistory({ node, djClient }) {
   const [history, setHistory] = useState([]);
-  const [revisions, setRevisions] = useState([]);
 
   useEffect(() => {
     const fetchData = async () => {
       if (node) {
         const data = await djClient.history('node', node.name);
-        const revisions = await djClient.revisions(node.name);
         setHistory(data);
-        setRevisions(revisions);
       }
     };
     fetchData().catch(console.error);
   }, [djClient, node]);
 
   const eventData = event => {
+    const standard = (
+      <>
+        <a href={'#'} className={'highlight-svg'} title="Browse Details">
+          <CommitIcon /> Details
+        </a>
+      </>
+    );
+
+    if (event.activity_type === 'update' && event.entity_type === 'node') {
+      return (
+        <>
+          <a href={`/nodes/${event.node}/revisions/${event.details.version}`}>
+            <span className={`badge version`}>{event.details.version}</span>
+          </a>
+          <a
+            href={`/nodes/${event.node}/revisions/${event.details.version}`}
+            className={'highlight-svg'}
+            title="View Diff"
+          >
+            <DiffIcon /> Diff
+          </a>
+        </>
+      );
+    }
+    return '';
+  };
+
+  const eventDescription = event => {
+    if (event.activity_type === 'create' && event.entity_type === 'node') {
+      return (
+        <div className="history-left">
+          <b style={{ textTransform: 'capitalize' }}>{event.activity_type}</b>{' '}
+          {event.entity_type}{' '}
+          <b>
+            <a href={'/nodes/' + event.entity_name}>{event.entity_name}</a>
+          </b>
+        </div>
+      );
+    }
+    if (event.activity_type === 'create' && event.entity_type === 'link') {
+      return (
+        <div className="history-left">
+          <b style={{ textTransform: 'capitalize' }}>{event.activity_type}</b>{' '}
+          {event.entity_type} from{' '}
+          <b>
+            <a href={'/nodes/' + event.entity_name}>{event.entity_name}</a>
+          </b>{' '}
+          to{' '}
+          <b>
+            <a href={'/nodes/' + event.details.dimension}>
+              {event.details.dimension}
+            </a>
+          </b>
+        </div>
+      );
+    }
+    if (event.activity_type === 'update' && event.entity_type === 'node') {
+      return (
+        <div className="history-left">
+          <b style={{ textTransform: 'capitalize' }}>{event.activity_type}</b>{' '}
+          {event.entity_type}{' '}
+          <b>
+            <a href={'/nodes/' + event.entity_name}>{event.entity_name}</a>
+          </b>
+        </div>
+      );
+    }
+    if (event.activity_type === 'tag' && event.entity_type === 'node') {
+      return (
+        <div className="history-left">
+          Add tag{event.details.tags.length > 1 ? 's' : ''}{' '}
+          {event.details.tags.map(tag => (
+            <span className={'badge version'}>
+              <a href={`/tags/${tag}`}>{tag}</a>
+            </span>
+          ))}
+        </div>
+      );
+    }
+    if (event.activity_type === 'create' && event.entity_type === 'partition') {
+      return (
+        <div className="history-left">
+          Set <b>{event.details.partition.type_} partition</b> on{' '}
+          <a href={'/nodes/' + event.node}>{event.details.column}</a>
+        </div>
+      );
+    }
+
     if (
       event.activity_type === 'set_attribute' &&
       event.entity_type === 'column_attribute'
     ) {
-      return event.details.attributes
-        .map(attr => (
-          <div
-            key={event.id}
-            role="cell"
-            aria-label="HistoryAttribute"
-            aria-hidden="false"
-          >
-            Set{' '}
-            <span className={`badge partition_value`}>
-              {event.details.column}
-            </span>{' '}
-            as{' '}
-            <span className={`badge partition_value_highlight`}>
-              {attr.name}
-            </span>
-          </div>
-        ))
-        .reduce((prev, curr) => [prev, <br />, curr], []);
+      return (
+        <div className="history-left">
+          <b>Set column attributes</b> on{' '}
+          <b>
+            <a href={'/nodes/' + event.node}>{event.node}</a>
+          </b>
+        </div>
+      );
     }
-    if (event.activity_type === 'create' && event.entity_type === 'link') {
+
+    if (event.entity_type === 'materialization') {
       return (
-        <div
-          key={event.id}
-          role="cell"
-          aria-label="HistoryCreateLink"
-          aria-hidden="false"
-        >
-          Linked{' '}
-          <span className={`badge partition_value`}>
-            {event.details.column}
-          </span>{' '}
-          to
-          <span className={`badge partition_value_highlight`}>
-            {event.details.dimension}
+        <div className="history-left">
+          <span style={{ textTransform: 'capitalize' }}>
+            {event.activity_type}
           </span>{' '}
-          via
-          <span className={`badge partition_value`}>
-            {event.details.dimension_column}
-          </span>
+          <b>{event.entity_type}</b>{' '}
+          <a href={`/nodes/${event.node}/materializations`}>
+            {event.entity_name}
+          </a>
         </div>
       );
     }
+
     if (
-      event.activity_type === 'create' &&
-      event.entity_type === 'materialization'
+      event.activity_type === 'status_change' &&
+      event.entity_type === 'node'
     ) {
       return (
-        <div
-          key={event.id}
-          role="cell"
-          aria-label="HistoryCreateMaterialization"
-          aria-hidden="false"
-        >
-          Initialized materialization{' '}
-          <span className={`badge partition_value`}>
-            {event.details.materialization}
-          </span>
+        <div className="history-left">
+          <b style={{ textTransform: 'capitalize' }}>
+            {labelize(event.activity_type)}
+          </b>{' '}
+          on <a href={`/nodes/${event.node}`}>{event.node}</a> from{' '}
+          <b>{event.pre.status}</b> to <b>{event.post.status}</b>
         </div>
       );
     }
+
     if (
       event.activity_type === 'create' &&
       event.entity_type === 'availability'
     ) {
       return (
-        <div
-          key={event.id}
-          role="cell"
-          aria-label="HistoryCreateAvailability"
-          aria-hidden="false"
-        >
-          Materialized at{' '}
-          <span className={`badge partition_value_highlight`}>
+        <div className="history-left">
+          Materialized table{' '}
+          <code>
             {event.post.catalog}.{event.post.schema_}.{event.post.table}
-          </span>
-          from{' '}
-          <span className={`badge partition_value`}>
-            {event.post.min_temporal_partition}
-          </span>{' '}
-          to
-          <span className={`badge partition_value`}>
-            {event.post.max_temporal_partition}
-          </span>
+          </code>{' '}
+          with partitions between {event.post.min_temporal_partition} and{' '}
+          {event.post.max_temporal_partition} available for{' '}
+          <a href={'/nodes/' + event.node}>{event.node}</a>.
         </div>
       );
     }
-    if (
-      event.activity_type === 'status_change' &&
-      event.entity_type === 'node'
-    ) {
-      const expr = (
-        <div>
-          Caused by a change in upstream{' '}
-          <a href={`/nodes/${event.details['upstream_node']}`}>
-            {event.details['upstream_node']}
-          </a>
-        </div>
-      );
+
+    if (event.activity_type === 'create' && event.entity_type === 'backfill') {
       return (
-        <div
-          key={event.id}
-          role="cell"
-          aria-label="HistoryNodeStatusChange"
-          aria-hidden="false"
-        >
-          Status changed from{' '}
-          <span className={`status__${event.pre['status']}`}>
-            {event.pre['status']}
-          </span>{' '}
-          to{' '}
-          <span className={`status__${event.post['status']}`}>
-            {event.post['status']}
-          </span>{' '}
-          {event.details['upstream_node'] !== undefined ? expr : ''}
+        <div className="history-left">
+          Backfill created for materialization {event.details.materialization}{' '}
+          for partition {event.details.partition.column_name} from{' '}
+          {event.details.partition.range[0]} to{' '}
+          {event.details.partition.range[1]}
         </div>
       );
     }
-    return (
-      <div key={event.id}>
-        {JSON.stringify(event.details) === '{}'
-          ? ''
-          : JSON.stringify(event.details)}
-      </div>
-    );
   };
 
-  const tableData = history => {
-    return history.map(event => (
-      <tr key={`history-row-${event.id}`}>
-        <td className="text-start">
-          <span
-            className={`history_type__${event.activity_type} badge node_type`}
-          >
-            {event.activity_type}
-          </span>
-        </td>
-        <td>{event.entity_type}</td>
-        <td>{event.entity_name}</td>
-        <td>{event.user ? event.user : 'unknown'}</td>
-        <td>{event.created_at}</td>
-        <td>{eventData(event)}</td>
-      </tr>
-    ));
-  };
+  const removeTagNodeEventsWithoutTags = event =>
+    event.activity_type !== 'tag' ||
+    (event.activity_type === 'tag' &&
+      event.entity_type === 'node' &&
+      event.details.tags.length > 0);
 
-  const revisionsTable = revisions => {
-    return revisions.map(revision => (
-      <tr key={revision.version}>
-        <td className="text-start">
-          <span className={`badge node_type__source`}>{revision.version}</span>
-        </td>
-        <td>{revision.display_name}</td>
-        <td>{revision.description}</td>
-        <td>
-          <SyntaxHighlighter
-            language="sql"
-            style={foundation}
-            wrapLongLines={true}
-          >
-            {revision.query}
-          </SyntaxHighlighter>
-        </td>
-        <td>{revision.tags}</td>
-      </tr>
-    ));
-  };
   return (
-    <div className="table-vertical">
-      <table className="card-inner-table table" aria-label="Revisions">
-        <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
-          <tr>
-            <th className="text-start">Version</th>
-            <th>Display Name</th>
-            <th>Description</th>
-            <th>Query</th>
-            <th>Tags</th>
-          </tr>
-        </thead>
-        <tbody>{revisionsTable(revisions)}</tbody>
-      </table>
-      <table className="card-inner-table table" aria-label="Activity">
-        <thead className="fs-7 fw-bold text-gray-400 border-bottom-0">
-          <tr>
-            <th className="text-start">Activity</th>
-            <th>Type</th>
-            <th>Name</th>
-            <th>User</th>
-            <th>Timestamp</th>
-            <th>Details</th>
-          </tr>
-        </thead>
-        <tbody>{tableData(history)}</tbody>
-      </table>
-    </div>
+    <ul className="history-border" role="list" aria-label="Activity">
+      {history.filter(removeTagNodeEventsWithoutTags).map(event => (
+        <li key={`history-row-${event.id}`} className="history">
+          {eventDescription(event)}
+          <div className={'history-small'}>
+            done by <a href="#">{event.user ? event.user : 'unknown'}</a> on{' '}
+            {new Date(Date.parse(event.created_at)).toLocaleString()}
+          </div>
+          <div className="history-right">{eventData(event)}</div>
+        </li>
+      ))}
+    </ul>
   );
 }

package/src/app/pages/NodePage/NodeInfoTab.jsx

@@ -7,6 +7,9 @@ import ListGroupItem from '../../components/ListGroupItem';
 import ToggleSwitch from '../../components/ToggleSwitch';
 import DJClientContext from '../../providers/djclient';
 import { labelize } from '../../../utils/form';
+import { AlertMessage } from '../AddEditNodePage/AlertMessage';
+import AlertIcon from '../../icons/AlertIcon';
+import InvalidIcon from '../../icons/InvalidIcon';
 
 SyntaxHighlighter.registerLanguage('sql', sql);
 foundation.hljs['padding'] = '2rem';
@@ -39,6 +42,35 @@ export default function NodeInfoTab({ node }) {
   function toggle(value) {
     return !value;
   }
+  const metricsWarning =
+    node?.type === 'metric' && node?.incompatible_druid_functions.length > 0 ? (
+      <div className="message warning" style={{ marginTop: '0.7rem' }}>
+        ⚠{' '}
+        <small>
+          The following functions used in the metric definition may not be
+          compatible with Druid SQL:{' '}
+          {node?.incompatible_druid_functions.map(func => (
+            <li style={{ listStyleType: 'none', margin: '0.7rem 0.7rem' }}>
+              ⇢{' '}
+              <span style={{ background: '#fff', padding: '0.3rem' }}>
+                {func}
+              </span>
+            </li>
+          ))}
+          If you need your metrics to be compatible with Druid, please use{' '}
+          <a
+            href={
+              'https://druid.apache.org/docs/latest/querying/sql-functions/'
+            }
+          >
+            these supported functions
+          </a>
+          .
+        </small>
+      </div>
+    ) : (
+      ''
+    );
   const metricQueryDiv = (
     <div className="list-group-item d-flex">
       <div className="gap-2 w-100 justify-content-between py-3">
@@ -205,6 +237,7 @@ export default function NodeInfoTab({ node }) {
       className="list-group align-items-center justify-content-between flex-md-row gap-2"
       style={{ minWidth: '700px' }}
     >
+      {node?.type === 'metric' ? metricsWarning : ''}
       <ListGroupItem label="Description" value={node?.description} />
       <div className="list-group-item d-flex">
         <div className="d-flex gap-2 w-100 justify-content-between py-3">

package/src/app/pages/NodePage/RevisionDiff.jsx

@@ -0,0 +1,200 @@
+import { useContext, useEffect, useState } from 'react';
+import * as React from 'react';
+import { diffLines, formatLines } from 'unidiff';
+import { parseDiff, Diff, Hunk } from 'react-diff-view';
+
+import { useParams } from 'react-router-dom';
+import DJClientContext from '../../providers/djclient';
+import NamespaceHeader from '../../components/NamespaceHeader';
+import { labelize } from '../../../utils/form';
+import DiffIcon from '../../icons/DiffIcon';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
+import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql';
+
+SyntaxHighlighter.registerLanguage('sql', sql);
+foundation.hljs['padding'] = '2rem';
+
+export default function RevisionDiff() {
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [revisions, setRevisions] = useState([]);
+
+  const { name, revision } = useParams();
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const revisions = await djClient.revisions(name);
+      setRevisions(revisions);
+    };
+    fetchData().catch(console.error);
+  }, [djClient, name]);
+
+  const thisRevision = revisions
+    .map((rev, idx) => [idx, rev])
+    .filter((rev, idx) => {
+      return rev[1].version === revision;
+    });
+  const prevRevision = revisions.filter(
+    (rev, idx) => idx + 1 === thisRevision[0][0],
+  );
+
+  const EMPTY_HUNKS = [];
+
+  const revisionDiff = (older, newer) => {
+    const diffObj = {};
+    const fields = [
+      'display_name',
+      'version',
+      'query',
+      'mode',
+      'status',
+      'description',
+      'columns',
+      // 'catalog',
+      'schema',
+      'table',
+      'updated_at',
+    ];
+    if (older) {
+      for (const key of fields) {
+        if (older[key] && (key !== 'columns' || older.type === 'cube')) {
+          diffObj[key] = {};
+          diffObj[key].diffText = formatLines(
+            diffLines(
+              older
+                ? key === 'columns'
+                  ? older[key].map(col => col.name).join('\n')
+                  : older[key].toString()
+                : '',
+              newer
+                ? key === 'columns'
+                  ? newer[key].map(col => col.name).join('\n')
+                  : newer[key].toString()
+                : '',
+            ),
+            {
+              context: 5000,
+            },
+          );
+          const [diff] = parseDiff(diffObj[key].diffText, {
+            nearbySequences: 'zip',
+          });
+          diffObj[key].diff = diff;
+        }
+      }
+    }
+    return diffObj;
+  };
+
+  const diffObjects = revisionDiff(
+    prevRevision[0],
+    thisRevision[0] ? thisRevision[0][1] : thisRevision[0],
+  );
+
+  return (
+    <div className="node__header">
+      <NamespaceHeader
+        namespace={(prevRevision[0] ? prevRevision[0].name : '')
+          .split('.')
+          .slice(0, -1)
+          .join('.')}
+      />
+      <div className="card">
+        <div className="card-header">
+          <h3
+            className="card-title align-items-start flex-column"
+            style={{ display: 'inline-block' }}
+          >
+            <span
+              className="card-label fw-bold text-gray-800"
+              role="dialog"
+              aria-hidden="false"
+              aria-label="DisplayName"
+            >
+              <a
+                href={'/nodes/' + prevRevision[0]?.name}
+                className=""
+                role="dialog"
+                aria-hidden="false"
+                aria-label="NodeName"
+              >
+                {prevRevision[0]?.name}
+              </a>{' '}
+              <span
+                className={
+                  'node_type__' + prevRevision[0]?.type + ' badge node_type'
+                }
+                role="dialog"
+                aria-hidden="false"
+                aria-label="NodeType"
+              >
+                {prevRevision[0]?.type}
+              </span>
+            </span>
+          </h3>
+          <div>
+            <span
+              className="rounded-pill badge version"
+              style={{ marginLeft: '0.5rem', fontSize: '16px' }}
+            >
+              {prevRevision[0]?.version}
+            </span>
+            <DiffIcon />
+            <span
+              className="rounded-pill badge version"
+              style={{ marginLeft: '0.3rem', fontSize: '16px' }}
+            >
+              {thisRevision[0] ? thisRevision[0][1].version : ''}
+            </span>{' '}
+          </div>
+          {Object.keys(diffObjects).map(field => {
+            return (
+              <div className="diff" aria-label={'DiffView'} role={'gridcell'}>
+                <h4>
+                  {labelize(field)}{' '}
+                  <small className="no-change-banner">
+                    {diffObjects[field]?.diff.hunks.length > 0
+                      ? ''
+                      : 'no change'}
+                  </small>
+                </h4>
+                {diffObjects[field]?.diff.hunks.length > 0 ? (
+                  <Diff
+                    viewType="split"
+                    diffType=""
+                    hunks={diffObjects[field]?.diff.hunks || EMPTY_HUNKS}
+                    tokens={diffObjects[field]?.tokens}
+                  >
+                    {hunks =>
+                      hunks.map(hunk => <Hunk key={hunk.content} hunk={hunk} />)
+                    }
+                  </Diff>
+                ) : (
+                  <div className="no-change">
+                    {prevRevision[0] ? (
+                      field === 'query' ? (
+                        <>
+                          <SyntaxHighlighter
+                            language="sql"
+                            style={foundation}
+                            wrapLongLines={true}
+                          >
+                            {prevRevision[0].query}
+                          </SyntaxHighlighter>
+                        </>
+                      ) : (
+                        prevRevision[0][field].toString()
+                      )
+                    ) : (
+                      ''
+                    )}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/app/pages/NodePage/__tests__/NodePage.test.jsx

@@ -88,6 +88,7 @@ describe('<NodePage />', () => {
       created_at: '2023-08-21T16:48:56.932162+00:00',
       tags: [{ name: 'purpose', display_name: 'Purpose' }],
       primary_key: [],
+      incompatible_druid_functions: ['IF'],
       createNodeClientCode:
         'dj = DJBuilder(DJ_URL)\n\navg_repair_price = dj.create_metric(\n    description="Average repair price",\n    display_name="Default: Avg Repair Price",\n    name="default.avg_repair_price",\n    primary_key=[],\n    query="""SELECT  avg(price) default_DOT_avg_repair_price \n FROM default.repair_order_details\n\n"""\n)',
       dimensions: [
@@ -501,15 +502,9 @@ describe('<NodePage />', () => {
         'node',
         mocks.mockMetricNode.name,
       );
-      expect(djClient.DataJunctionAPI.revisions).toHaveBeenCalledWith(
-        mocks.mockMetricNode.name,
-      );
       expect(
-        screen.getByRole('table', { name: 'Revisions' }),
-      ).toMatchSnapshot();
-      expect(screen.getByRole('table', { name: 'Activity' })).toHaveTextContent(
-        'ActivityTypeNameUserTimestampDetailscreatenodedefault.avg_repair_priceunknown2023-08-21T16:48:56.950482+00:00',
-      );
+        screen.getByRole('list', { name: 'Activity' }),
+      ).toBeInTheDocument();
       screen
         .queryAllByRole('cell', {
           name: 'HistoryAttribute',