@atlaspack/inspector-frontend 0.1.1

package/src/ui/DefaultLoadingIndicator/DefaultLoadingIndicator.tsx

@@ -0,0 +1,14 @@
+import Spinner from '@atlaskit/spinner';
+import * as styles from './DefaultLoadingIndicator.module.css';
+
+export function DefaultLoadingIndicator({message}: {message?: string}) {
+  return (
+    <div
+      className={styles.defaultLoadingIndicator}
+      data-testid="atlaspack-inspector-loading-indicator"
+    >
+      <Spinner size="xlarge" />
+      <h2>{message ?? 'Loading cache stats...'}</h2>
+    </div>
+  );
+}

package/src/ui/app/StatsPage.tsx

@@ -0,0 +1,77 @@
+import {useSuspenseQuery} from '@tanstack/react-query';
+import {Box, Stack} from '@atlaskit/primitives';
+
+import {formatBytes} from '../util/formatBytes';
+
+export function StatsPage() {
+  const {data} = useSuspenseQuery<{
+    size: number;
+    keySize: number;
+    count: number;
+    assetContentCount: number;
+    assetContentSize: number;
+    assetMapCount: number;
+    assetMapSize: number;
+  }>({
+    queryKey: ['/api/stats'],
+  });
+
+  return (
+    <Box padding="space.100">
+      <Stack space="space.100">
+        <Box>
+          <h1>Atlaspack cache stats</h1>
+        </Box>
+
+        <table>
+          <tbody>
+            <tr>
+              <td>
+                <strong>Cache size</strong>
+              </td>
+              <td>{formatBytes(data.size)}</td>
+            </tr>
+            <tr>
+              <td>
+                <strong>Total size of all keys</strong>
+              </td>
+              <td>{formatBytes(data.keySize)}</td>
+            </tr>
+            <tr>
+              <td>
+                <strong>Number of cache entries</strong>
+              </td>
+              <td>{data.count}</td>
+            </tr>
+
+            <tr>
+              <td>
+                <strong>Number of asset content entries</strong>
+              </td>
+              <td>{data.assetContentCount}</td>
+            </tr>
+            <tr>
+              <td>
+                <strong>Total size of all asset content entries</strong>
+              </td>
+              <td>{formatBytes(data.assetContentSize)}</td>
+            </tr>
+
+            <tr>
+              <td>
+                <strong>Number of asset map entries</strong>
+              </td>
+              <td>{data.assetMapCount}</td>
+            </tr>
+            <tr>
+              <td>
+                <strong>Total size of all asset map entries</strong>
+              </td>
+              <td>{formatBytes(data.assetMapSize)}</td>
+            </tr>
+          </tbody>
+        </table>
+      </Stack>
+    </Box>
+  );
+}

package/src/ui/app/cache/CacheKeysIndexPage.tsx

@@ -0,0 +1,13 @@
+export function CacheKeysIndexPage() {
+  return (
+    <>
+      <p>
+        <strong>Click a cache key to view its contents</strong>
+      </p>
+      <p>
+        You can see all keys in the cache on your left. Click sorting button to
+        switch the sorting key.
+      </p>
+    </>
+  );
+}

package/src/ui/app/cache/CacheKeysPage.module.css

@@ -0,0 +1,11 @@
+.cacheKeysPage {
+  display: flex;
+  height: calc(100vh - 48px);
+  width: 100%;
+}
+
+.cacheKeysPageChild {
+  overflow: auto;
+  flex: 1;
+  max-height: 100%;
+}

package/src/ui/app/cache/CacheKeysPage.module.css.d.ts

@@ -0,0 +1,4 @@
+export const __esModule: true;
+export const cacheKeysPage: string;
+export const cacheKeysPageChild: string;
+

package/src/ui/app/cache/CacheKeysPage.tsx

@@ -0,0 +1,23 @@
+import {Outlet} from 'react-router';
+import {Box} from '@atlaskit/primitives';
+import {Suspense} from 'react';
+
+import {CacheKeyList} from './ui/CacheKeyList';
+import {DefaultLoadingIndicator} from '../../DefaultLoadingIndicator/DefaultLoadingIndicator';
+import * as styles from './CacheKeysPage.module.css';
+
+export function CacheKeysPage() {
+  return (
+    <div className={styles.cacheKeysPage}>
+      <CacheKeyList />
+
+      <div className={styles.cacheKeysPageChild}>
+        <Box padding="space.200">
+          <Suspense fallback={<DefaultLoadingIndicator />}>
+            <Outlet />
+          </Suspense>
+        </Box>
+      </div>
+    </div>
+  );
+}

package/src/ui/app/cache/[key]/CacheValuePage.tsx

@@ -0,0 +1,40 @@
+import {useParams} from 'react-router';
+import {useSuspenseQuery} from '@tanstack/react-query';
+import {Code, CodeBlock} from '@atlaskit/code';
+import {Box, Inline, Stack} from '@atlaskit/primitives';
+
+import {formatBytes} from '../../../util/formatBytes';
+
+interface CacheValueResponse {
+  size: number;
+  value: string;
+}
+
+export function CacheValuePage() {
+  const key = useParams().key;
+  if (!key) {
+    throw new Error('No key');
+  }
+
+  const {data: cacheValue} = useSuspenseQuery<CacheValueResponse>({
+    queryKey: [`/api/cache-value/${encodeURIComponent(key)}`],
+  });
+
+  return (
+    <Stack space="space.100">
+      <Box>
+        <strong>Cache entry</strong>
+      </Box>
+      <Box>
+        <Code>{key}</Code>
+      </Box>
+
+      <Inline space="space.100">
+        <Box>Cache entry size</Box>
+        <Code>{formatBytes(cacheValue.size)}</Code>
+      </Inline>
+
+      <CodeBlock text={cacheValue.value} />
+    </Stack>
+  );
+}

package/src/ui/app/cache/ui/CacheKeyList.module.css

@@ -0,0 +1,40 @@
+.cacheKeyList {
+  padding: 8px;
+  height: 100%;
+  gap: 8px;
+  display: flex;
+  background-color: var(--ds-surface-sunken);
+  flex-direction: column;
+  border: 1px solid var(--ds-border);
+  width: 300px;
+  flex-shrink: 0;
+}
+
+.cacheKeyListInner {
+  background-color: var(--ds-background-input);
+  padding: 4px;
+  border: 1px solid var(--ds-border);
+  border-radius: 4px;
+  flex: 1;
+  overflow: hidden;
+  gap: 4px;
+}
+
+.cacheKeyPlaceholderContainer {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cacheKeyListItemsContainer {
+  flex: 1;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  position: relative;
+}
+
+.cacheKeyListItemsContainerInner {
+  width: 100%;
+}

package/src/ui/app/cache/ui/CacheKeyList.module.css.d.ts

@@ -0,0 +1,7 @@
+export const __esModule: true;
+export const cacheKeyList: string;
+export const cacheKeyListInner: string;
+export const cacheKeyListItemsContainer: string;
+export const cacheKeyListItemsContainerInner: string;
+export const cacheKeyPlaceholderContainer: string;
+

package/src/ui/app/cache/ui/CacheKeyList.tsx

@@ -0,0 +1,187 @@
+import {useNavigate, useSearchParams} from 'react-router';
+import {useVirtualizer} from '@tanstack/react-virtual';
+import {useEffect, useMemo, useRef} from 'react';
+import {useInfiniteQuery} from '@tanstack/react-query';
+import qs from 'qs';
+import axios from 'axios';
+import Button, {LinkButton} from '@atlaskit/button/new';
+import {Box} from '@atlaskit/primitives';
+
+import * as styles from './CacheKeyList.module.css';
+import * as appStyles from '../../../App.module.css';
+
+/**
+ * The list of cache keys is an infinite paginated, virtualized list.
+ *
+ * That is because there might be a very large amount of keys to render.
+ */
+export function CacheKeyList() {
+  // sort by in querystring URL
+  const [searchParams, setSearchParams] = useSearchParams();
+  const sortBy = searchParams.get('sortBy') || 'order';
+  const setSortBy = (value: string) => {
+    searchParams.set('sortBy', value);
+    setSearchParams(searchParams);
+  };
+
+  const {
+    data: cacheKeys,
+    isLoading,
+    error,
+    fetchNextPage,
+    isFetchingNextPage,
+    hasNextPage,
+  } = useInfiniteQuery<{
+    keys: string[];
+    count: number;
+    hasNextPage: boolean;
+    nextPageCursor: string | null;
+  }>({
+    queryFn: async ({pageParam}) => {
+      const backendUrl = process.env.ATLASPACK_INSPECTOR_BACKEND_URL;
+      const {data} = await axios.get(
+        `${backendUrl}/api/cache-keys/?` +
+          qs.stringify({sortBy, cursor: pageParam}),
+      );
+      return data;
+    },
+    queryKey: ['/api/cache-keys/?' + qs.stringify({sortBy})],
+    initialPageParam: null,
+    getNextPageParam: (lastPage) => lastPage.nextPageCursor,
+  });
+
+  const allKeys = useMemo(
+    () => cacheKeys?.pages.flatMap((page) => page.keys) ?? [],
+    [cacheKeys?.pages],
+  );
+  const lastPage = cacheKeys?.pages[cacheKeys.pages.length - 1];
+  const parentRef = useRef<HTMLDivElement>(null);
+  const rowVirtualizer = useVirtualizer({
+    count: lastPage?.hasNextPage ? allKeys.length + 1 : allKeys.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 35,
+  });
+
+  const virtualItems = rowVirtualizer.getVirtualItems();
+  useEffect(() => {
+    const lastVirtualItem = virtualItems[virtualItems.length - 1];
+    const loaderRowIsShown =
+      allKeys[lastVirtualItem?.index] == null && lastPage?.hasNextPage;
+
+    if (hasNextPage && loaderRowIsShown && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [
+    allKeys,
+    allKeys.length,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    lastPage,
+    lastPage?.hasNextPage,
+    virtualItems,
+  ]);
+
+  const navigate = useNavigate();
+
+  const renderItems = () => {
+    if (isLoading) {
+      return (
+        <div className={styles.cacheKeyPlaceholderContainer}>Loading...</div>
+      );
+    }
+
+    if (error) {
+      return (
+        <div className={styles.cacheKeyPlaceholderContainer}>
+          Error: {error.message}
+        </div>
+      );
+    }
+
+    if (!allKeys.length) {
+      return (
+        <div className={styles.cacheKeyPlaceholderContainer}>No cache keys</div>
+      );
+    }
+
+    return (
+      <div className={styles.cacheKeyListItemsContainer} ref={parentRef}>
+        <div
+          className={styles.cacheKeyListItemsContainerInner}
+          style={{
+            height: `${rowVirtualizer.getTotalSize()}px`,
+          }}
+        >
+          {rowVirtualizer.getVirtualItems().map((virtualItem) => {
+            const key = allKeys[virtualItem.index];
+            const isLoaderRow = key == null && lastPage?.hasNextPage;
+            const rowStyle = {
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: `${virtualItem.size}px`,
+              transform: `translateY(${virtualItem.start}px)`,
+            } as const;
+
+            if (isLoaderRow) {
+              return (
+                <div
+                  key="loader"
+                  className={appStyles.sidebarItem}
+                  style={rowStyle}
+                >
+                  Loading...
+                </div>
+              );
+            }
+            const href = `/app/cache/${encodeURIComponent(
+              key,
+            )}?${searchParams.toString()}`;
+
+            return (
+              <div
+                key={virtualItem.index}
+                className={appStyles.sidebarItem}
+                style={rowStyle}
+              >
+                <LinkButton
+                  appearance="subtle"
+                  href={href}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    navigate(href);
+                  }}
+                >
+                  {key}
+                </LinkButton>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className={styles.cacheKeyList}>
+      <Box>
+        <Button
+          appearance="subtle"
+          onClick={() => {
+            if (sortBy === 'order') {
+              setSortBy('size');
+            } else {
+              setSortBy('order');
+            }
+          }}
+        >
+          Sorting by {sortBy}
+        </Button>
+      </Box>
+
+      <div className={styles.cacheKeyListInner}>{renderItems()}</div>
+    </div>
+  );
+}

package/src/ui/app/cache-invalidation/CacheInvalidationPage.tsx

@@ -0,0 +1,22 @@
+import {CacheFileList} from './ui/CacheFileList';
+import * as styles from '../cache/CacheKeysPage.module.css';
+import {Box} from '@atlaskit/primitives';
+import {DefaultLoadingIndicator} from '../../DefaultLoadingIndicator/DefaultLoadingIndicator';
+import {Suspense} from 'react';
+import {Outlet} from 'react-router';
+
+export function CacheInvalidationPage() {
+  return (
+    <div className={styles.cacheKeysPage}>
+      <CacheFileList />
+
+      <div className={styles.cacheKeysPageChild}>
+        <Box padding="space.200">
+          <Suspense fallback={<DefaultLoadingIndicator />}>
+            <Outlet />
+          </Suspense>
+        </Box>
+      </div>
+    </div>
+  );
+}

package/src/ui/app/cache-invalidation/[fileId]/CacheInvalidationFilePage.tsx

@@ -0,0 +1,22 @@
+import {useSuspenseQuery} from '@tanstack/react-query';
+import {useParams} from 'react-router';
+
+export function CacheInvalidationFilePage() {
+  const {fileId} = useParams();
+
+  if (!fileId) {
+    throw new Error('Invalid request, missing file ID');
+  }
+
+  const {data} = useSuspenseQuery({
+    queryKey: [`/api/cache-invalidation-files/${encodeURIComponent(fileId)}`],
+  });
+
+  return (
+    <div>
+      <h1>Cache invalidation file {fileId}</h1>
+
+      <pre>{JSON.stringify(data, null, 2)}</pre>
+    </div>
+  );
+}

package/src/ui/app/cache-invalidation/ui/CacheFileList.module.css

@@ -0,0 +1,40 @@
+.cacheFileList {
+  padding: 8px;
+  height: 100%;
+  gap: 8px;
+  display: flex;
+  background-color: var(--ds-surface-sunken);
+  flex-direction: column;
+  border: 1px solid var(--ds-border);
+  width: 300px;
+  flex-shrink: 0;
+}
+
+.cacheFileListInner {
+  background-color: var(--ds-background-input);
+  padding: 4px;
+  border: 1px solid var(--ds-border);
+  border-radius: 4px;
+  flex: 1;
+  overflow: hidden;
+  gap: 4px;
+}
+
+.cacheFilePlaceholderContainer {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cacheFileListItemsContainer {
+  flex: 1;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  position: relative;
+}
+
+.cacheFileListItemsContainerInner {
+  width: 100%;
+}

package/src/ui/app/cache-invalidation/ui/CacheFileList.module.css.d.ts

@@ -0,0 +1,7 @@
+export const __esModule: true;
+export const cacheFileList: string;
+export const cacheFileListInner: string;
+export const cacheFileListItemsContainer: string;
+export const cacheFileListItemsContainerInner: string;
+export const cacheFilePlaceholderContainer: string;
+