datajunction-ui 0.0.153 → 0.0.155

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.153",
+  "version": "0.0.155",
   "description": "DataJunction UI",
   "module": "src/index.tsx",
   "repository": {

package/src/app/components/NamespaceHeader.jsx

@@ -75,30 +75,48 @@ export default function NamespaceHeader({
             onGitConfigLoaded(config);
           }
 
-          // If this is a branch namespace, fetch parent's git config, branches, and check for existing PR
-          if (config?.parent_namespace) {
-            try {
-              const parentConfig = await djClient.getNamespaceGitConfig(
-                config.parent_namespace,
-              );
-              setParentGitConfig(parentConfig);
-            } catch (e) {
-              console.error('Failed to fetch parent git config:', e);
-            }
+          // If this namespace is inside a branch (or IS the branch), fetch
+          // parent/branches/PR.
+          const branchNs = config?.branch_namespace;
+          if (branchNs) {
+            // The branch namespace itself carries the parent_namespace FK to
+            // the git root. If this is a subnamespace, fetch the branch's
+            // config to get that FK; otherwise the current config already
+            // has it.
+            const branchConfig =
+              branchNs === namespace
+                ? config
+                : await djClient
+                    .getNamespaceGitConfig(branchNs)
+                    .catch(() => null);
+            const gitRootNs = branchConfig?.parent_namespace;
 
-            try {
-              const branchList = await djClient.getNamespaceBranches(
-                config.parent_namespace,
-              );
-              setBranches(branchList || []);
-            } catch (e) {
-              console.error('Failed to fetch branches:', e);
+            if (gitRootNs) {
+              try {
+                const parentConfig = await djClient.getNamespaceGitConfig(
+                  gitRootNs,
+                );
+                setParentGitConfig(parentConfig);
+              } catch (e) {
+                console.error('Failed to fetch parent git config:', e);
+              }
+
+              try {
+                const branchList = await djClient.getNamespaceBranches(
+                  gitRootNs,
+                );
+                setBranches(branchList || []);
+              } catch (e) {
+                console.error('Failed to fetch branches:', e);
+              }
             }
 
-            // Check for existing PR
+            // Check for existing PR scoped to the branch, not the current
+            // (sub)namespace — a branch has at most one PR regardless of
+            // which subnamespace page the user is on.
             setPrLoading(true);
             try {
-              const pr = await djClient.getPullRequest(namespace);
+              const pr = await djClient.getPullRequest(branchNs);
               setExistingPR(pr);
             } catch (e) {
               // No PR or error - that's fine
@@ -146,7 +164,16 @@ export default function NamespaceHeader({
   const hasGitConfig =
     gitConfig?.github_repo_path ||
     (gitConfig?.parent_namespace && gitConfig?.git_branch);
-  const isBranchNamespace = !!gitConfig?.parent_namespace;
+  // ``branch_namespace`` is the branch this namespace belongs to (equals the
+  // namespace when called against the branch itself, the ancestor branch when
+  // called against a descendant).
+  // isBranchNamespace = "this IS the branch" (used for the breadcrumb branch
+  // switcher); isInBranch = "this lives under a branch" (used to show
+  // branch-scoped git controls on subnamespaces too).
+  const branchNamespace = gitConfig?.branch_namespace || null;
+  const isBranchNamespace = branchNamespace === namespace;
+  const isInBranch = !!branchNamespace;
+  const branchScopeNamespace = branchNamespace || namespace;
   const isGitRoot = gitConfig?.github_repo_path && !gitConfig?.parent_namespace;
   const canCreateBranches = isGitRoot && gitConfig?.default_branch;
 
@@ -169,21 +196,33 @@ export default function NamespaceHeader({
     return await djClient.createBranch(namespace, branchName);
   };
 
+  // Sync/PR operations always target the whole branch namespace, even
+  // when invoked from a subnamespace page.
   const handleSyncToGit = async commitMessage => {
-    return await djClient.syncNamespaceToGit(namespace, commitMessage);
+    return await djClient.syncNamespaceToGit(
+      branchScopeNamespace,
+      commitMessage,
+    );
   };
 
   const handleCreatePR = async (title, body, onProgress) => {
     // First sync changes to git using PR title as commit message
     if (onProgress) onProgress('syncing');
-    const syncResult = await djClient.syncNamespaceToGit(namespace, title);
+    const syncResult = await djClient.syncNamespaceToGit(
+      branchScopeNamespace,
+      title,
+    );
     if (syncResult?._error) {
       return syncResult;
     }
 
     // Then create the PR
     if (onProgress) onProgress('creating');
-    const result = await djClient.createPullRequest(namespace, title, body);
+    const result = await djClient.createPullRequest(
+      branchScopeNamespace,
+      title,
+      body,
+    );
     if (result && !result._error) {
       setExistingPR(result);
     }
@@ -827,8 +866,11 @@ export default function NamespaceHeader({
 
         {/* Right side: git actions + children */}
         <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-          {/* Git controls for non-branch namespaces */}
-          {namespace && !isBranchNamespace && !gitConfigLoading && (
+          {/* Git controls for namespaces not inside a branch (git roots,
+              orphan namespaces). Subnamespaces under a branch fall through
+              to the branch-scoped block below so we don't render two sets
+              of buttons. */}
+          {namespace && !isInBranch && !gitConfigLoading && (
             <>
               <button
                 style={buttonStyle}
@@ -878,8 +920,8 @@ export default function NamespaceHeader({
             </>
           )}
 
-          {/* Git controls for branch namespaces */}
-          {isBranchNamespace && hasGitConfig && (
+          {/* Git controls for branch namespaces (and subnamespaces under them) */}
+          {isInBranch && hasGitConfig && (
             <>
               <button
                 style={buttonStyle}
@@ -1063,7 +1105,7 @@ export default function NamespaceHeader({
           isOpen={showSyncToGit}
           onClose={() => setShowSyncToGit(false)}
           onSync={handleSyncToGit}
-          namespace={namespace}
+          namespace={branchScopeNamespace}
           gitBranch={gitConfig?.git_branch}
           repoPath={gitConfig?.github_repo_path}
         />
@@ -1072,7 +1114,7 @@ export default function NamespaceHeader({
           isOpen={showCreatePR}
           onClose={() => setShowCreatePR(false)}
           onCreate={handleCreatePR}
-          namespace={namespace}
+          namespace={branchScopeNamespace}
           gitBranch={gitConfig?.git_branch}
           parentBranch={
             parentGitConfig?.git_branch || parentGitConfig?.default_branch

package/src/app/components/__tests__/NamespaceHeader.test.jsx

@@ -590,6 +590,7 @@ describe('<NamespaceHeader />', () => {
           git_path: 'nodes/',
           git_only: false,
           parent_namespace: 'test.main',
+          branch_namespace: 'test.feature',
         })
         .mockResolvedValueOnce({
           github_repo_path: 'test/repo',
@@ -672,6 +673,7 @@ describe('<NamespaceHeader />', () => {
           git_path: 'nodes/',
           git_only: false,
           parent_namespace: 'test.main',
+          branch_namespace: 'test.feature',
         })
         .mockResolvedValueOnce({
           github_repo_path: 'test/repo',
@@ -830,6 +832,7 @@ describe('<NamespaceHeader />', () => {
           git_path: 'nodes/',
           git_only: false,
           parent_namespace: 'test.main',
+          branch_namespace: 'test.feature',
         })
         .mockResolvedValueOnce({
           github_repo_path: 'test/repo',
@@ -893,6 +896,7 @@ describe('<NamespaceHeader />', () => {
         git_path: 'nodes/',
         git_only: false,
         parent_namespace: 'test.main',
+        branch_namespace: 'test.feature',
       }),
       getPullRequest: jest.fn().mockResolvedValue({
         pr_number: 42,
@@ -932,6 +936,7 @@ describe('<NamespaceHeader />', () => {
           git_path: 'nodes/',
           git_only: false,
           parent_namespace: 'test.main',
+          branch_namespace: 'test.feature',
         })
         .mockResolvedValueOnce({
           github_repo_path: 'test/repo',
@@ -1019,6 +1024,7 @@ describe('<NamespaceHeader />', () => {
           git_path: 'nodes/',
           git_only: false,
           parent_namespace: 'test.main',
+          branch_namespace: 'test.feature',
         })
         .mockResolvedValueOnce({
           github_repo_path: 'test/repo',
@@ -1087,6 +1093,7 @@ describe('<NamespaceHeader />', () => {
           git_path: 'nodes/',
           git_only: false,
           parent_namespace: 'test.main',
+          branch_namespace: 'test.feature',
         })
         .mockResolvedValueOnce({
           github_repo_path: 'test/repo',
@@ -1142,6 +1149,7 @@ describe('<NamespaceHeader />', () => {
           git_path: 'nodes/',
           git_only: false,
           parent_namespace: 'test.main',
+          branch_namespace: 'test.feature',
         })
         .mockRejectedValueOnce(new Error('Parent not found')),
       getPullRequest: jest.fn().mockResolvedValue(null),
@@ -1184,6 +1192,7 @@ describe('<NamespaceHeader />', () => {
           git_path: 'nodes/',
           git_only: false,
           parent_namespace: 'test.main',
+          branch_namespace: 'test.feature',
         })
         .mockResolvedValueOnce({
           github_repo_path: 'test/repo',
@@ -1339,6 +1348,7 @@ describe('<NamespaceHeader />', () => {
           git_path: 'nodes/',
           git_only: false,
           parent_namespace: 'test.main',
+          branch_namespace: 'test.feature',
         })
         .mockResolvedValueOnce({
           github_repo_path: 'test/repo',

package/src/app/index.tsx

@@ -10,6 +10,7 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { NamespacePage } from './pages/NamespacePage/Loadable';
 import { MyWorkspacePage } from './pages/MyWorkspacePage/Loadable';
 import { OverviewPage } from './pages/OverviewPage/Loadable';
+import { SystemMetricsExplorerPage } from './pages/SystemMetricsExplorerPage/Loadable';
 import { SettingsPage } from './pages/SettingsPage/Loadable';
 import { NotificationsPage } from './pages/NotificationsPage/Loadable';
 import { NodePage } from './pages/NodePage/Loadable';
@@ -153,6 +154,11 @@ export function App() {
                           key="overview"
                           element={<OverviewPage />}
                         />
+                        <Route
+                          path="overview/explore"
+                          key="overview-explore"
+                          element={<SystemMetricsExplorerPage />}
+                        />
                         <Route
                           path="workspace"
                           key="workspace"

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

@@ -9,7 +9,7 @@ import PartitionColumnPopover from './PartitionColumnPopover';
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { foundation } from 'react-syntax-highlighter/src/styles/hljs';
 
-export default function NodeColumnTab({ node, djClient }) {
+export default function NodeColumnTab({ node, djClient, readOnly = false }) {
   const [attributes, setAttributes] = useState([]);
   const [dimensions, setDimensions] = useState([]);
   const [columns, setColumns] = useState([]);
@@ -182,14 +182,16 @@ export default function NodeColumnTab({ node, djClient }) {
               aria-hidden="false"
             >
               {col.description || ''}
-              <EditColumnDescriptionPopover
-                column={col}
-                node={node}
-                onSubmit={async () => {
-                  const res = await djClient.node(node.name);
-                  setColumns(res.columns);
-                }}
-              />
+              {!readOnly && (
+                <EditColumnDescriptionPopover
+                  column={col}
+                  node={node}
+                  onSubmit={async () => {
+                    const res = await djClient.node(node.name);
+                    setColumns(res.columns);
+                  }}
+                />
+              )}
             </span>
           </td>
           <td>
@@ -246,49 +248,55 @@ export default function NodeColumnTab({ node, djClient }) {
                     </a>
                   </span>
                 )}
-                <ManageDimensionLinksDialog
+                {!readOnly && (
+                  <ManageDimensionLinksDialog
+                    column={col}
+                    node={node}
+                    dimensions={dimensions}
+                    fkLinks={fkLinksForColumn}
+                    referenceLink={referenceLink}
+                    onSubmit={async () => {
+                      const res = await djClient.node(node.name);
+                      setLinks(res.dimension_links);
+                      setColumns(res.columns);
+                    }}
+                  />
+                )}
+              </div>
+            </td>
+          ) : (
+            ''
+          )}
+          {node.type !== 'cube' ? (
+            <td>
+              {showColumnAttributes(col)}
+              {!readOnly && (
+                <EditColumnPopover
                   column={col}
                   node={node}
-                  dimensions={dimensions}
-                  fkLinks={fkLinksForColumn}
-                  referenceLink={referenceLink}
+                  options={attributes}
                   onSubmit={async () => {
                     const res = await djClient.node(node.name);
-                    setLinks(res.dimension_links);
                     setColumns(res.columns);
                   }}
                 />
-              </div>
+              )}
             </td>
           ) : (
             ''
           )}
-          {node.type !== 'cube' ? (
-            <td>
-              {showColumnAttributes(col)}
-              <EditColumnPopover
+          <td>
+            {showColumnPartition(col)}
+            {!readOnly && (
+              <PartitionColumnPopover
                 column={col}
                 node={node}
-                options={attributes}
                 onSubmit={async () => {
                   const res = await djClient.node(node.name);
                   setColumns(res.columns);
                 }}
               />
-            </td>
-          ) : (
-            ''
-          )}
-          <td>
-            {showColumnPartition(col)}
-            <PartitionColumnPopover
-              column={col}
-              node={node}
-              onSubmit={async () => {
-                const res = await djClient.node(node.name);
-                setColumns(res.columns);
-              }}
-            />
+            )}
           </td>
         </tr>
       );

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

@@ -16,7 +16,11 @@ const cronstrue = require('cronstrue');
  * For non-cube nodes, the parent component (index.jsx) renders
  * NodePreAggregationsTab instead.
  */
-export default function NodeMaterializationTab({ node, djClient }) {
+export default function NodeMaterializationTab({
+  node,
+  djClient,
+  readOnly = false,
+}) {
   const [rawMaterializations, setRawMaterializations] = useState([]);
   const [selectedRevisionTab, setSelectedRevisionTab] = useState(null);
   const [showInactive, setShowInactive] = useState(false);
@@ -179,7 +183,7 @@ export default function NodeMaterializationTab({ node, djClient }) {
                 Show Inactive
               </label>
             )}
-            {node && <AddMaterializationPopover node={node} />}
+            {node && !readOnly && <AddMaterializationPopover node={node} />}
           </div>
         </div>
       );
@@ -282,6 +286,7 @@ export default function NodeMaterializationTab({ node, djClient }) {
             Show Inactive
           </label>
           {node &&
+            !readOnly &&
             (hasLatestVersionMaterialization ? (
               <button
                 className="edit_button"
@@ -322,11 +327,13 @@ export default function NodeMaterializationTab({ node, djClient }) {
                 .join(' ')}
             </div>
             <div className="td">
-              <NodeMaterializationDelete
-                nodeName={node.name}
-                materializationName={materialization.name}
-                nodeVersion={selectedRevisionTab}
-              />
+              {!readOnly && (
+                <NodeMaterializationDelete
+                  nodeName={node.name}
+                  materializationName={materialization.name}
+                  nodeVersion={selectedRevisionTab}
+                />
+              )}
             </div>
             <div className="td">
               <span className={`badge cron`}>{materialization.schedule}</span>
@@ -397,13 +404,15 @@ export default function NodeMaterializationTab({ node, djClient }) {
                   </summary>
                   {materialization.strategy === 'incremental_time' ? (
                     <ul>
-                      <li>
-                        <AddBackfillPopover
-                          node={node}
-                          materialization={materialization}
-                          onSubmit={fetchData}
-                        />
-                      </li>
+                      {!readOnly && (
+                        <li>
+                          <AddBackfillPopover
+                            node={node}
+                            materialization={materialization}
+                            onSubmit={fetchData}
+                          />
+                        </li>
+                      )}
                       {materialization.backfills.map(backfill => (
                         <li className="backfill">
                           <div className="partitionLink">

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

@@ -136,7 +136,13 @@ export function NodePage() {
       tabToDisplay = node ? <NodeInfoTab node={node} /> : '';
       break;
     case 'columns':
-      tabToDisplay = <NodeColumnTab node={node} djClient={djClient} />;
+      tabToDisplay = (
+        <NodeColumnTab
+          node={node}
+          djClient={djClient}
+          readOnly={!!gitConfig?.git_only}
+        />
+      );
       break;
     case 'data-flow':
       tabToDisplay = <NodeDataFlowTab djNode={node} />;
@@ -152,7 +158,11 @@ export function NodePage() {
       // Other nodes (transform, metric, dimension) use pre-aggregations tab
       tabToDisplay =
         node?.type === 'cube' ? (
-          <NodeMaterializationTab node={node} djClient={djClient} />
+          <NodeMaterializationTab
+            node={node}
+            djClient={djClient}
+            readOnly={!!gitConfig?.git_only}
+          />
         ) : (
           <NodePreAggregationsTab node={node} />
         );
@@ -253,6 +263,42 @@ export function NodePage() {
                   >
                     {node?.type}
                   </span>
+                  {gitConfigLoaded && isGitOnly && (
+                    <span
+                      style={{
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        marginLeft: '4px',
+                        color: '#92400e',
+                        verticalAlign: 'middle',
+                        cursor: 'help',
+                      }}
+                      aria-label="ReadOnly"
+                      title="Read-only — edits must go through git."
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="14"
+                        height="14"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      >
+                        <rect
+                          x="3"
+                          y="11"
+                          width="18"
+                          height="11"
+                          rx="2"
+                          ry="2"
+                        />
+                        <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+                      </svg>
+                    </span>
+                  )}
                 </span>
               </h3>
               <NodeButtons />

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

@@ -7,6 +7,17 @@ import { DimensionNodeUsagePanel } from './DimensionNodeUsagePanel';
 export function OverviewPage() {
   return (
     <div className="mid">
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'flex-end',
+          padding: '0.5rem 1rem',
+        }}
+      >
+        <a href="/overview/explore" className="button-3 neutral-button">
+          Explore system metrics →
+        </a>
+      </div>
       <div className="chart-container">
         <OverviewPanel />
         <NodesByTypePanel />

package/src/app/pages/SystemMetricsExplorerPage/Loadable.jsx

@@ -0,0 +1,16 @@
+/**
+ * Asynchronously loads the component for the System Metrics Explorer page
+ */
+
+import * as React from 'react';
+import { lazyLoad } from '../../../utils/loadable';
+
+export const SystemMetricsExplorerPage = props => {
+  return lazyLoad(
+    () => import('./index'),
+    module => module.SystemMetricsExplorerPage,
+    {
+      fallback: <div></div>,
+    },
+  )(props);
+};