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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1-a45.dev14",
+  "version": "0.0.1a46.dev1",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {

package/src/app/pages/NamespacePage/index.jsx

@@ -94,7 +94,7 @@ export function NamespacePage() {
         </span>
       </td>
       <td>
-        <NodeStatus node={node} />
+        <NodeStatus node={node} revalidate={false} />
       </td>
       <td>
         <span className="status">{node.mode}</span>

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

@@ -1,28 +1,101 @@
-import { Component } from 'react';
+import { Component, useContext, useEffect, useRef, useState } from 'react';
 import ValidIcon from '../../icons/ValidIcon';
 import InvalidIcon from '../../icons/InvalidIcon';
+import DJClientContext from '../../providers/djclient';
+import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import markdown from 'react-syntax-highlighter/dist/cjs/languages/hljs/markdown';
+import * as React from 'react';
+import { AlertMessage } from '../AddEditNodePage/AlertMessage';
+import AlertIcon from '../../icons/AlertIcon';
+import { labelize } from '../../../utils/form';
 
-export default class NodeStatus extends Component {
-  render() {
-    const { node } = this.props;
-    return (
+SyntaxHighlighter.registerLanguage('markdown', markdown);
+
+export default function NodeStatus({ node, revalidate = true }) {
+  const MAX_ERROR_LENGTH = 200;
+  const djClient = useContext(DJClientContext).DataJunctionAPI;
+  const [validation, setValidation] = useState([]);
+
+  const [codeAnchor, setCodeAnchor] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (revalidate) {
+      const fetchData = async () => {
+        setValidation(await djClient.revalidate(node.name));
+      };
+      fetchData().catch(console.error);
+    }
+  }, [djClient, node, revalidate]);
+
+  const displayValidation =
+    revalidate && validation?.errors?.length > 0 ? (
       <>
-        {node?.status === 'valid' ? (
-          <span
-            className="status__valid status"
-            style={{ alignContent: 'center' }}
-          >
-            <ValidIcon />
-          </span>
-        ) : (
-          <span
-            className="status__invalid status"
-            style={{ alignContent: 'center' }}
-          >
-            <InvalidIcon />
-          </span>
-        )}
+        <button
+          className="badge"
+          style={{
+            backgroundColor: '#b34b00',
+            fontSize: '15px',
+            outline: '0',
+            border: '0',
+            cursor: 'pointer',
+          }}
+          onClick={() => setCodeAnchor(!codeAnchor)}
+        >
+          ⚠ {validation?.errors?.length} error
+          {validation?.errors?.length > 1 ? 's' : ''}
+        </button>
+        <div
+          className="popover"
+          ref={ref}
+          style={{
+            display: codeAnchor === false ? 'none' : 'block',
+            border: 'none',
+            paddingTop: '0px !important',
+            marginTop: '0px',
+            backgroundColor: 'transparent',
+          }}
+        >
+          {validation?.errors?.map((error, idx) => (
+            <div className="validation_error">
+              <b
+                style={{
+                  color: '#b34b00',
+                }}
+              >
+                {labelize(error.type.toLowerCase())}:
+              </b>{' '}
+              {error.message.length > MAX_ERROR_LENGTH
+                ? error.message.slice(0, MAX_ERROR_LENGTH - 1) + '...'
+                : error.message}
+            </div>
+          ))}
+        </div>
       </>
+    ) : (
+      <></>
     );
-  }
+
+  return (
+    <>
+      {revalidate && validation?.errors?.length > 0 ? (
+        displayValidation
+      ) : validation?.status === 'valid' || node?.status === 'valid' ? (
+        <span
+          className="status__valid status"
+          style={{ alignContent: 'center' }}
+        >
+          <ValidIcon />
+        </span>
+      ) : (
+        <span
+          className="status__invalid status"
+          style={{ alignContent: 'center' }}
+        >
+          <InvalidIcon />
+        </span>
+      )}
+    </>
+  );
 }

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

@@ -0,0 +1,63 @@
+import { useContext, useEffect, useRef, useState } from 'react';
+import * as React from 'react';
+import DJClientContext from '../../providers/djclient';
+import { Field, Form, Formik } from 'formik';
+import { displayMessageAfterSubmit } from '../../../utils/form';
+
+export default function PartitionValueForm({ col, materialization }) {
+  if (col.partition.type_ === 'temporal') {
+    return (
+      <>
+        <div
+          className="partition__full"
+          key={col.name}
+          style={{ width: '50%' }}
+        >
+          <div className="partition__header">{col.display_name}</div>
+          <div className="partition__body">
+            <span style={{ padding: '0.5rem' }}>From</span>{' '}
+            <Field
+              type="text"
+              name={`partitionValues.['${col.name}'].from`}
+              id={`${col.name}.from`}
+              placeholder="20230101"
+              default="20230101"
+              style={{ width: '7rem', paddingRight: '1rem' }}
+            />{' '}
+            <span style={{ padding: '0.5rem' }}>To</span>
+            <Field
+              type="text"
+              name={`partitionValues.['${col.name}'].to`}
+              id={`${col.name}.to`}
+              placeholder="20230102"
+              default="20230102"
+              style={{ width: '7rem' }}
+            />
+          </div>
+        </div>
+      </>
+    );
+  } else {
+    return (
+      <>
+        <div
+          className="partition__full"
+          key={col.name}
+          style={{ width: '50%' }}
+        >
+          <div className="partition__header">{col.display_name}</div>
+          <div className="partition__body">
+            <Field
+              type="text"
+              name={`partitionValues.['${col.name}']`}
+              id={col.name}
+              placeholder=""
+              default=""
+              style={{ width: '7rem', paddingRight: '1rem' }}
+            />
+          </div>
+        </div>
+      </>
+    );
+  }
+}

package/src/app/services/DJService.js

@@ -844,4 +844,15 @@ export const DataJunctionAPI = {
       })
     ).json();
   },
+  revalidate: async function (node) {
+    return await (
+      await fetch(`${DJ_URL}/nodes/${node}/validate`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+      })
+    ).json();
+  },
 };

package/src/styles/index.css

@@ -1202,3 +1202,18 @@ pre {
   text-transform: uppercase;
   padding-left: 10px;
 }
+
+.validation_error {
+  border: #b34b0025 1px solid;
+  border-left: #b34b00 5px solid;
+  padding-left: 20px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  font-size: small;
+  width: 600px;
+  word-wrap: break-word;
+  margin-top: 3px;
+  background-color: #ffffff;
+  margin-bottom: 3px;
+  margin-left: -20px;
+}