datajunction-ui 0.0.1-a109 → 0.0.1-a110

package/src/app/pages/OverviewPage/__tests__/DimensionNodeUsagePanel.test.jsx

@@ -0,0 +1,76 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import DJClientContext from '../../../providers/djclient';
+import { DimensionNodeUsagePanel } from '../DimensionNodeUsagePanel';
+
+describe('<DimensionNodeUsagePanel />', () => {
+  it('fetches dimension nodes and displays them in sorted order', async () => {
+    const mockDimensions = [
+      { name: 'dimension_a', indegree: 2, cube_count: 5 }, // 7
+      { name: 'dimension_b', indegree: 1, cube_count: 10 }, // 11
+      { name: 'dimension_c', indegree: 3, cube_count: 3 }, // 6
+    ];
+
+    const mockDjClient = {
+      system: {
+        dimensions: jest.fn().mockResolvedValue(mockDimensions),
+      },
+    };
+
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <DimensionNodeUsagePanel />
+      </DJClientContext.Provider>,
+    );
+
+    // Wait for the API to be called
+    await waitFor(() => {
+      expect(mockDjClient.system.dimensions).toHaveBeenCalled();
+    });
+
+    // Check that rows are rendered
+    expect(screen.getByText('dimension_b')).toBeInTheDocument();
+    expect(screen.getByText('dimension_a')).toBeInTheDocument();
+    expect(screen.getByText('dimension_c')).toBeInTheDocument();
+
+    // Check that sorting is correct: b (11), a (7), c (6)
+    const rows = screen.getAllByRole('row').slice(1); // skip the header row
+    const names = rows.map(row => row.querySelector('a').textContent);
+    expect(names).toEqual(['dimension_b', 'dimension_a', 'dimension_c']);
+
+    // Check that links have correct hrefs
+    expect(screen.getByText('dimension_b').closest('a')).toHaveAttribute(
+      'href',
+      '/nodes/dimension_b',
+    );
+
+    // Check indegree and cube_count cells
+    expect(screen.getByText('1')).toBeInTheDocument(); // b indegree
+    expect(screen.getByText('10')).toBeInTheDocument(); // b cube_count
+    expect(screen.getByText('2')).toBeInTheDocument(); // a indegree
+    expect(screen.getByText('5')).toBeInTheDocument(); // a cube_count
+  });
+
+  it('handles empty dimensions gracefully', async () => {
+    const mockDjClient = {
+      system: {
+        dimensions: jest.fn().mockResolvedValue([]),
+      },
+    };
+
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <DimensionNodeUsagePanel />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.system.dimensions).toHaveBeenCalled();
+    });
+
+    // Table should still be there, but no rows
+    expect(screen.getByText('Dimension Node Usage')).toBeInTheDocument();
+    expect(
+      screen.queryByRole('row', { name: /dimension_/ }),
+    ).not.toBeInTheDocument();
+  });
+});

package/src/app/pages/OverviewPage/__tests__/GovernanceWarningsPanel.test.jsx

@@ -0,0 +1,77 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import DJClientContext from '../../../providers/djclient';
+import { GovernanceWarningsPanel } from '../GovernanceWarningsPanel';
+
+describe('<GovernanceWarningsPanel />', () => {
+  it('fetches governance warnings and displays percentages and orphaned dimension count', async () => {
+    const mockNodesWithoutDescription = [
+      { name: 'SOURCE', value: 0.1 }, // 10%
+      { name: 'METRIC', value: 0.2 }, // 20%
+    ];
+
+    const mockDimensions = [
+      { name: 'dim_1', indegree: 0, cube_count: 1 }, // orphaned
+      { name: 'dim_2', indegree: 1, cube_count: 0 }, // orphaned
+      { name: 'dim_3', indegree: 2, cube_count: 1 }, // not orphaned
+    ];
+
+    const mockDjClient = {
+      system: {
+        nodes_without_description: jest
+          .fn()
+          .mockResolvedValue(mockNodesWithoutDescription),
+        dimensions: jest.fn().mockResolvedValue(mockDimensions),
+      },
+    };
+
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <GovernanceWarningsPanel />
+      </DJClientContext.Provider>,
+    );
+
+    // Wait for both calls to be made and data rendered
+    await waitFor(() => {
+      expect(mockDjClient.system.nodes_without_description).toHaveBeenCalled();
+      expect(mockDjClient.system.dimensions).toHaveBeenCalled();
+    });
+
+    // Check missing description badges
+    expect(screen.getByText('10%')).toBeInTheDocument();
+    expect(screen.getByText('20%')).toBeInTheDocument();
+    expect(screen.getByText('sources')).toBeInTheDocument();
+    expect(screen.getByText('metrics')).toBeInTheDocument();
+
+    // Check orphaned dimension count: should be 2
+    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(screen.getByText(/dimension nodes/)).toBeInTheDocument();
+
+    // Should show the title
+    expect(screen.getByText('Governance Warnings')).toBeInTheDocument();
+    expect(screen.getByText('Missing Description')).toBeInTheDocument();
+    expect(screen.getByText('Orphaned Dimensions')).toBeInTheDocument();
+  });
+
+  it('shows fallback if no data returned', async () => {
+    const mockDjClient = {
+      system: {
+        nodes_without_description: jest.fn().mockResolvedValue([]),
+        dimensions: jest.fn().mockResolvedValue([]),
+      },
+    };
+
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <GovernanceWarningsPanel />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.system.nodes_without_description).toHaveBeenCalled();
+      expect(mockDjClient.system.dimensions).toHaveBeenCalled();
+    });
+
+    // Should show fallback value for orphaned nodes
+    expect(screen.getByText('...')).toBeInTheDocument();
+  });
+});

package/src/app/pages/OverviewPage/__tests__/NodesByTypePanel.test.jsx

@@ -0,0 +1,86 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import DJClientContext from '../../../providers/djclient';
+import { NodesByTypePanel } from '../NodesByTypePanel';
+
+describe('<NodesByTypePanel />', () => {
+  it('fetches nodes & materializations by type and renders them correctly', async () => {
+    const mockNodesByType = [
+      { name: 'source', value: 5 },
+      { name: 'cube', value: 2 },
+    ];
+    const mockMaterializationsByType = [
+      { name: 'transform', value: 3 },
+      { name: 'metric', value: 1 },
+    ];
+
+    const mockDjClient = {
+      system: {
+        node_counts_by_type: jest.fn().mockResolvedValue(mockNodesByType),
+        materialization_counts_by_type: jest
+          .fn()
+          .mockResolvedValue(mockMaterializationsByType),
+      },
+    };
+
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <NodesByTypePanel />
+      </DJClientContext.Provider>,
+    );
+
+    // Wait for async calls to complete
+    await waitFor(() => {
+      expect(mockDjClient.system.node_counts_by_type).toHaveBeenCalled();
+      expect(
+        mockDjClient.system.materialization_counts_by_type,
+      ).toHaveBeenCalled();
+    });
+
+    // Check that nodes by type appear
+    expect(screen.getByText('Nodes by Type')).toBeInTheDocument();
+    expect(screen.getByText('5')).toBeInTheDocument();
+    expect(screen.getByText('sources')).toBeInTheDocument();
+    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(screen.getByText('cubes')).toBeInTheDocument();
+
+    // Check that materializations by type appear
+    expect(screen.getByText('Materializations by Type')).toBeInTheDocument();
+    expect(screen.getByText('3')).toBeInTheDocument();
+    expect(screen.getByText('transforms')).toBeInTheDocument();
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('metrics')).toBeInTheDocument();
+
+    // Should render an icon for each entry
+    const icons = screen.getAllByTestId('node-icon');
+    expect(icons).toHaveLength(
+      mockNodesByType.length + mockMaterializationsByType.length,
+    );
+  });
+
+  it('renders nothing if no data returned', async () => {
+    const mockDjClient = {
+      system: {
+        node_counts_by_type: jest.fn().mockResolvedValue([]),
+        materialization_counts_by_type: jest.fn().mockResolvedValue([]),
+      },
+    };
+
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <NodesByTypePanel />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.system.node_counts_by_type).toHaveBeenCalled();
+      expect(
+        mockDjClient.system.materialization_counts_by_type,
+      ).toHaveBeenCalled();
+    });
+
+    expect(screen.getByText('Nodes by Type')).toBeInTheDocument();
+    expect(screen.getByText('Materializations by Type')).toBeInTheDocument();
+    expect(screen.queryByText('sources')).not.toBeInTheDocument();
+    expect(screen.queryByText('metrics')).not.toBeInTheDocument();
+  });
+});

package/src/app/pages/OverviewPage/__tests__/OverviewPanel.test.jsx

@@ -0,0 +1,78 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import DJClientContext from '../../../providers/djclient';
+import { OverviewPanel } from '../OverviewPanel';
+
+describe('<OverviewPanel />', () => {
+  it('renders Active Nodes and Valid/Invalid nodes correctly', async () => {
+    const mockNodesByActive = [
+      { name: 'true', value: 7 },
+      { name: 'false', value: 2 }, // Should be filtered out
+    ];
+
+    const mockNodesByStatus = [
+      { name: 'VALID', value: 5 },
+      { name: 'INVALID', value: 3 },
+    ];
+
+    const mockDjClient = {
+      system: {
+        node_counts_by_active: jest.fn().mockResolvedValue(mockNodesByActive),
+        node_counts_by_status: jest.fn().mockResolvedValue(mockNodesByStatus),
+      },
+    };
+
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <OverviewPanel />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.system.node_counts_by_active).toHaveBeenCalled();
+      expect(mockDjClient.system.node_counts_by_status).toHaveBeenCalled();
+    });
+
+    // Chart title
+    expect(screen.getByText('Overview')).toBeInTheDocument();
+
+    // Active Nodes section
+    expect(screen.getByText('7')).toBeInTheDocument();
+    expect(screen.getByText('Active Nodes')).toBeInTheDocument();
+    expect(screen.getAllByTestId('node-icon')).toHaveLength(1);
+
+    // Valid/Invalid status section
+    expect(screen.getByText('5')).toBeInTheDocument();
+    expect(screen.getByText('valid')).toBeInTheDocument();
+    expect(screen.getByText('3')).toBeInTheDocument();
+    expect(screen.getByText('invalid')).toBeInTheDocument();
+
+    // Should render one ValidIcon and one InvalidIcon
+    expect(screen.getAllByTestId('valid-icon')).toHaveLength(1);
+    expect(screen.getAllByTestId('invalid-icon')).toHaveLength(1);
+  });
+
+  it('renders no badges if data is empty', async () => {
+    const mockDjClient = {
+      system: {
+        node_counts_by_active: jest.fn().mockResolvedValue([]),
+        node_counts_by_status: jest.fn().mockResolvedValue([]),
+      },
+    };
+
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <OverviewPanel />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.system.node_counts_by_active).toHaveBeenCalled();
+      expect(mockDjClient.system.node_counts_by_status).toHaveBeenCalled();
+    });
+
+    expect(screen.getByText('Overview')).toBeInTheDocument();
+    expect(screen.queryByTestId('node-icon')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('valid-icon')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('invalid-icon')).not.toBeInTheDocument();
+  });
+});

package/src/app/pages/OverviewPage/__tests__/TrendsPanel.test.jsx

@@ -0,0 +1,120 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import DJClientContext from '../../../providers/djclient';
+import { TrendsPanel } from '../TrendsPanel';
+
+jest.mock('recharts', () => {
+  const Original = jest.requireActual('recharts');
+  return {
+    ...Original,
+    ResponsiveContainer: ({ children, ...props }) => (
+      <div data-testid="responsive-container">{children}</div>
+    ),
+    BarChart: ({ children, data, ...props }) => (
+      <div data-testid="barchart" data-data={JSON.stringify(data)}>
+        {children}
+      </div>
+    ),
+    CartesianGrid: props => <div data-testid="cartesian-grid" />,
+    XAxis: props => <div data-testid="x-axis" />,
+    YAxis: props => <div data-testid="y-axis" />,
+    Tooltip: props => <div data-testid="tooltip" />,
+    Legend: props => <div data-testid="legend" />,
+    Bar: props => (
+      <div data-testid={`bar-${props.dataKey}`} data-fill={props.fill} />
+    ),
+  };
+});
+
+describe('<TrendsPanel />', () => {
+  it('fetches and renders node trends', async () => {
+    const mockNodeTrends = [
+      {
+        date: '2024-01-01',
+        source: 2,
+        dimension: 1,
+        transform: 3,
+        metric: 5,
+        cube: 0,
+      },
+      {
+        date: '2024-01-02',
+        source: 1,
+        dimension: 2,
+        transform: 1,
+        metric: 3,
+        cube: 4,
+      },
+    ];
+
+    const mockDjClient = {
+      system: {
+        node_trends: jest.fn().mockResolvedValue(mockNodeTrends),
+      },
+    };
+
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <TrendsPanel />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.system.node_trends).toHaveBeenCalled();
+    });
+
+    // Chart title
+    expect(screen.getByText('Trends')).toBeInTheDocument();
+
+    // The Recharts containers render
+    expect(screen.getByTestId('responsive-container')).toBeInTheDocument();
+    expect(screen.getByTestId('barchart')).toBeInTheDocument();
+
+    // Should contain grid, axes, tooltip, legend
+    expect(screen.getByTestId('cartesian-grid')).toBeInTheDocument();
+    expect(screen.getByTestId('x-axis')).toBeInTheDocument();
+    expect(screen.getByTestId('y-axis')).toBeInTheDocument();
+    expect(screen.getByTestId('tooltip')).toBeInTheDocument();
+    expect(screen.getByTestId('legend')).toBeInTheDocument();
+
+    // Should render bars with expected colors
+    const expectedBars = {
+      source: '#00C49F',
+      dimension: '#FFBB28',
+      transform: '#0088FE',
+      metric: '#FF91A3',
+      cube: '#AA46BE',
+    };
+
+    Object.entries(expectedBars).forEach(([key, color]) => {
+      const bar = screen.getByTestId(`bar-${key}`);
+      expect(bar).toBeInTheDocument();
+      expect(bar).toHaveAttribute('data-fill', color);
+    });
+
+    // BarChart gets correct data
+    const barChart = screen.getByTestId('barchart');
+    expect(barChart.getAttribute('data-data')).toContain('2024-01-01');
+  });
+
+  it('renders with empty trends', async () => {
+    const mockDjClient = {
+      system: {
+        node_trends: jest.fn().mockResolvedValue([]),
+      },
+    };
+
+    render(
+      <DJClientContext.Provider value={{ DataJunctionAPI: mockDjClient }}>
+        <TrendsPanel />
+      </DJClientContext.Provider>,
+    );
+
+    await waitFor(() => {
+      expect(mockDjClient.system.node_trends).toHaveBeenCalled();
+    });
+
+    expect(screen.getByText('Trends')).toBeInTheDocument();
+    expect(screen.getByTestId('responsive-container')).toBeInTheDocument();
+    expect(screen.getByTestId('barchart')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,54 @@
+import { render, screen } from '@testing-library/react';
+import { OverviewPage } from '../index';
+
+jest.mock('../OverviewPanel', () => ({
+  OverviewPanel: () => <div data-testid="overview-panel">OverviewPanel</div>,
+}));
+jest.mock('../NodesByTypePanel', () => ({
+  NodesByTypePanel: () => (
+    <div data-testid="nodes-by-type-panel">NodesByTypePanel</div>
+  ),
+}));
+jest.mock('../GovernanceWarningsPanel', () => ({
+  GovernanceWarningsPanel: () => (
+    <div data-testid="governance-warnings-panel">GovernanceWarningsPanel</div>
+  ),
+}));
+jest.mock('../TrendsPanel', () => ({
+  TrendsPanel: () => <div data-testid="trends-panel">TrendsPanel</div>,
+}));
+jest.mock('../DimensionNodeUsagePanel', () => ({
+  DimensionNodeUsagePanel: () => (
+    <div data-testid="dimension-node-usage-panel">DimensionNodeUsagePanel</div>
+  ),
+}));
+
+describe('<OverviewPage />', () => {
+  it('renders the OverviewPage with all panels', () => {
+    render(<OverviewPage />);
+
+    // Check the main containers
+    const containers = screen.getAllByClassName
+      ? screen.getAllByClassName('chart-container')
+      : document.querySelectorAll('.chart-container');
+
+    expect(containers.length).toBe(2);
+
+    // Check each mocked panel appears
+    expect(screen.getByTestId('overview-panel')).toBeInTheDocument();
+    expect(screen.getByTestId('nodes-by-type-panel')).toBeInTheDocument();
+    expect(screen.getByTestId('governance-warnings-panel')).toBeInTheDocument();
+    expect(screen.getByTestId('trends-panel')).toBeInTheDocument();
+    expect(
+      screen.getByTestId('dimension-node-usage-panel'),
+    ).toBeInTheDocument();
+
+    // Check panels are in the correct containers
+    expect(containers[0].innerHTML).toContain('OverviewPanel');
+    expect(containers[0].innerHTML).toContain('NodesByTypePanel');
+    expect(containers[0].innerHTML).toContain('GovernanceWarningsPanel');
+
+    expect(containers[1].innerHTML).toContain('TrendsPanel');
+    expect(containers[1].innerHTML).toContain('DimensionNodeUsagePanel');
+  });
+});

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

@@ -0,0 +1,22 @@
+import { OverviewPanel } from './OverviewPanel';
+import { NodesByTypePanel } from './NodesByTypePanel';
+import { GovernanceWarningsPanel } from './GovernanceWarningsPanel';
+import { TrendsPanel } from './TrendsPanel';
+import { DimensionNodeUsagePanel } from './DimensionNodeUsagePanel';
+
+export function OverviewPage() {
+  return (
+    <div className="mid">
+      <div className="chart-container">
+        <OverviewPanel />
+        <NodesByTypePanel />
+        <GovernanceWarningsPanel />
+      </div>
+
+      <div className="chart-container">
+        <TrendsPanel />
+        <DimensionNodeUsagePanel />
+      </div>
+    </div>
+  );
+}

package/src/app/pages/RegisterTablePage/__tests__/__snapshots__/RegisterTablePage.test.jsx.snap

@@ -8,10 +8,11 @@ HTMLCollection [
   >
     <svg
       class="bi bi-check-circle-fill"
+      data-testid="valid-icon"
       fill="currentColor"
-      height="25"
+      height="25px"
       viewBox="0 0 16 16"
-      width="25"
+      width="25px"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path

package/src/app/services/DJService.js

@@ -88,6 +88,128 @@ export const DataJunctionAPI = {
     ).json();
   },
 
+  querySystemMetric: async function ({
+    metric,
+    dimensions = [],
+    filters = [],
+    orderby = [],
+  }) {
+    const params = new URLSearchParams();
+    dimensions.forEach(d => params.append('dimensions', d));
+    filters.forEach(f => params.append('filters', f));
+    orderby.forEach(o => params.append('orderby', o));
+
+    const url = `${DJ_URL}/system/data/${metric}?${params.toString()}`;
+    const res = await fetch(url, { credentials: 'include' });
+
+    if (!res.ok) {
+      throw new Error(`Failed to fetch metric data ${metric}: ${res.status}`);
+    }
+    return await res.json();
+  },
+
+  querySystemMetricSingleDimension: async function ({
+    metric,
+    dimension,
+    filters = [],
+    orderby = [],
+  }) {
+    const results = await DataJunctionAPI.querySystemMetric({
+      metric: metric,
+      dimensions: [dimension],
+      filters: filters,
+      orderby: orderby,
+    });
+    return results.map(row => {
+      return {
+        name:
+          row.find(entry => entry.col === dimension)?.value?.toString() ??
+          'unknown',
+        value: row.find(entry => entry.col === metric)?.value ?? 0,
+      };
+    });
+  },
+
+  system: {
+    node_counts_by_active: async function () {
+      return DataJunctionAPI.querySystemMetricSingleDimension({
+        metric: 'system.dj.number_of_nodes',
+        dimension: 'system.dj.is_active.active_id',
+      });
+    },
+    node_counts_by_type: async function () {
+      return DataJunctionAPI.querySystemMetricSingleDimension({
+        metric: 'system.dj.number_of_nodes',
+        dimension: 'system.dj.node_type.type',
+        filters: ['system.dj.is_active.active_id=true'],
+        orderby: ['system.dj.node_type.type'],
+      });
+    },
+    node_counts_by_status: async function () {
+      return DataJunctionAPI.querySystemMetricSingleDimension({
+        metric: 'system.dj.number_of_nodes',
+        dimension: 'system.dj.nodes.status',
+        filters: ['system.dj.is_active.active_id=true'],
+        orderby: ['system.dj.nodes.status'],
+      });
+    },
+    nodes_without_description: async function () {
+      return DataJunctionAPI.querySystemMetricSingleDimension({
+        metric: 'system.dj.node_without_description',
+        dimension: 'system.dj.node_type.type',
+        filters: ['system.dj.is_active.active_id=true'],
+        orderby: ['system.dj.node_type.type'],
+      });
+    },
+    node_trends: async function () {
+      const results = await (
+        await fetch(
+          `${DJ_URL}/system/data/system.dj.number_of_nodes?dimensions=system.dj.nodes.created_at_week&dimensions=system.dj.node_type.type&filters=system.dj.nodes.created_at_week>=20240101&orderby=system.dj.nodes.created_at_week`,
+          { credentials: 'include' },
+        )
+      ).json();
+      const byDateint = {};
+      results.forEach(row => {
+        const dateint = row.find(
+          r => r.col === 'system.dj.nodes.created_at_week',
+        )?.value;
+        const nodeType = row.find(
+          r => r.col === 'system.dj.node_type.type',
+        )?.value;
+        const count = row.find(
+          r => r.col === 'system.dj.number_of_nodes',
+        )?.value;
+        if (!byDateint[dateint]) {
+          byDateint[dateint] = { date: dateint };
+        }
+        byDateint[dateint][nodeType] =
+          (byDateint[dateint][nodeType] || 0) + count;
+      });
+      return Object.entries(byDateint).map(([dateint, data]) => {
+        return {
+          date: dateint,
+          ...data,
+        };
+      });
+    },
+    materialization_counts_by_type: async function () {
+      return DataJunctionAPI.querySystemMetricSingleDimension({
+        metric: 'system.dj.number_of_materializations',
+        dimension: 'system.dj.node_type.type',
+        filters: ['system.dj.is_active.active_id=true'],
+        orderby: ['system.dj.node_type.type'],
+      });
+    },
+
+    dimensions: async function () {
+      return await (
+        await fetch(`${DJ_URL}/system/dimensions`, {
+          credentials: 'include',
+        })
+      ).json();
+    },
+  },
+
   logout: async function () {
     return await fetch(`${DJ_URL}/logout/`, {
       credentials: 'include',