Merge pull request #1820 from nhost/changeset-release/main

feat(dashboard): improved error state

.github/workflows/changesets.yaml

@@ -169,7 +169,7 @@ jobs:
           EXPRESSION='s/"'$IMAGE':[0-9]\+\.[0-9]\+\.[0-9]\+"/"'$IMAGE':'$VERSION'"/g'
           find ./ -type f -exec sed -i -e $EXPRESSION {} \;
       - name: Create Pull Request
-        uses: peter-evans/create-pull-request@v4
+        uses: peter-evans/create-pull-request@v5
         with:
           token: ${{ secrets.GH_PAT }}
           commit-message: 'chore: bump nhost/dashboard to ${{ needs.version.outputs.dashboardVersion }}'

dashboard/.eslintrc.js

@@ -8,7 +8,11 @@ module.exports = {
     tsconfigRootDir: __dirname,
     project: './tsconfig.json',
   },
-  ignorePatterns: ['**/.eslintrc.js', '**/prettier.config.js'],
+  ignorePatterns: [
+    '**/.eslintrc.js',
+    '**/prettier.config.js',
+    '**/next.config.js',
+  ],
   rules: {
     'react/react-in-jsx-scope': 'off',
     'react/jsx-props-no-spreading': 'off',
@@ -21,6 +25,7 @@ module.exports = {
       'error',
       { allowArrowFunctions: true, allowFunctions: true },
     ],
+    'import/prefer-default-export': 'off',
     'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
     curly: ['error', 'all'],
     'no-restricted-exports': 'off',

dashboard/.gitignore

@@ -53,4 +53,5 @@ tailwind.json
 /test-results/
 /playwright-report/
 /playwright/.cache/
-storageState.json
+storageState.json
+e2e/.auth/*

dashboard/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @nhost/dashboard
 
+## 0.14.5
+
+### Patch Changes
+
+- ba0d57ee: fix(i18n): revert i18n library
+- 3328ed05: feat(projects): improve overview when there is an error
+
+## 0.14.4
+
+### Patch Changes
+
+- 5e0920ba: chore(deps): bump `next-seo` to v6
+- 706c9dc3: chore(deps): bump `@types/react` to 18.0.33
+- 99f8f6b3: feat(metrics): show metrics on the overview
+
+## 0.14.3
+
+### Patch Changes
+
+- @nhost/react-apollo@5.0.16
+
+## 0.14.2
+
+### Patch Changes
+
+- 3cb67300: fix(logs): don't break UI when clearing time picker
+- 7453bf3b: feat(projects): show project creator info
+- c166dad0: chore(tests): improve auth page tests
+- 6a290bb2: chore(deps): bump `@types/react` to 18.0.32
+
 ## 0.14.1
 
 ### Patch Changes

dashboard/README.md

@@ -64,16 +64,15 @@ pnpm storybook
 
 ### Environment Variables for Local Development and Self-Hosting
 
-| Name | Description |
+| Name                                          | Description                                                                                                                                                                                            |
-| ---- | ----------- |
+| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-
+| `NEXT_PUBLIC_NHOST_AUTH_URL`                  | The URL of the Auth service. When working locally, point it to the Auth service started by the CLI. When self-hosting, point it to the self-hosted Auth service.                                       |
-| `NEXT_PUBLIC_NHOST_AUTH_URL` | The URL of the Auth service. When working locally, point it to the Auth service started by the CLI. When self-hosting, point it to the self-hosted Auth service. |
+| `NEXT_PUBLIC_NHOST_FUNCTIONS_URL`             | The URL of the Functions service. When working locally, point it to the Functions service started by the CLI. When self-hosting, point it to the self-hosted Functions service.                        |
-| `NEXT_PUBLIC_NHOST_FUNCTIONS_URL` | The URL of the Functions service. When working locally, point it to the Functions service started by the CLI. When self-hosting, point it to the self-hosted Functions service. |
+| `NEXT_PUBLIC_NHOST_GRAPHQL_URL`               | The URL of the GraphQL service. When working locally, point it to the GraphQL service started by the CLI. When self-hosting, point it to the self-hosted GraphQL service.                              |
-| `NEXT_PUBLIC_NHOST_GRAPHQL_URL` | The URL of the GraphQL service. When working locally, point it to the GraphQL service started by the CLI. When self-hosting, point it to the self-hosted GraphQL service. |
+| `NEXT_PUBLIC_NHOST_STORAGE_URL`               | The URL of the Storage service. When working locally, point it to the Storage service started by the CLI. When self-hosting, point it to the self-hosted Storage service.                              |
-| `NEXT_PUBLIC_NHOST_STORAGE_URL` | The URL of the Storage service. When working locally, point it to the Storage service started by the CLI. When self-hosting, point it to the self-hosted Storage service. |
+| `NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL`        | The URL of the Hasura Console. When working locally, point it to the Hasura Console started by the CLI. When self-hosting, point it to the self-hosted Hasura Console.                                 |
-| `NEXT_PUBLIC_NHOST_HASURA_CONSOLE_URL` | The URL of the Hasura Console. When working locally, point it to the Hasura Console started by the CLI. When self-hosting, point it to the self-hosted Hasura Console. |
+| `NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL` | The URL of Hasura's Migrations service. When working locally, point it to the Migrations service started by the CLI.                                                                                   |
-| `NEXT_PUBLIC_NHOST_HASURA_MIGRATIONS_API_URL` | The URL of Hasura's Migrations service. When working locally, point it to the Migrations service started by the CLI. |
+| `NEXT_PUBLIC_NHOST_HASURA_API_URL`            | The URL of Hasura's Schema and Metadata API. When working locally, point it to the Schema and Metadata API started by the CLI. When self-hosting, point it to the self-hosted Schema and Metadata API. |
-| `NEXT_PUBLIC_NHOST_HASURA_API_URL` | The URL of Hasura's Schema and Metadata API. When working locally, point it to the Schema and Metadata API started by the CLI. When self-hosting, point it to the self-hosted Schema and Metadata API. |
 
 ### Other Environment Variables
 

dashboard/e2e/auth/ban-user.test.ts

@@ -0,0 +1,50 @@
+import {
+  TEST_PROJECT_NAME,
+  TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { faker } from '@faker-js/faker';
+import test, { expect } from '@playwright/test';
+
+test('should be able to ban and unban a user', async ({ page }) => {
+  await page.goto('/');
+
+  await openProject({
+    page,
+    projectName: TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: TEST_PROJECT_SLUG,
+  });
+
+  await page
+    .getByRole('navigation', { name: /main navigation/i })
+    .getByRole('link', { name: /auth/i })
+    .click();
+
+  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
+
+  const email = generateTestEmail();
+  const password = faker.internet.password();
+
+  await createUser({ page, email, password });
+
+  await page
+    .getByRole('button', { name: `View ${email}`, exact: true })
+    .click();
+  await page.getByRole('button', { name: /actions/i }).click();
+  await page.getByRole('menuitem', { name: /ban user/i }).click();
+
+  await expect(
+    page.getByText(/user has been banned successfully./i),
+  ).toBeVisible();
+  await expect(page.locator('form').getByText(/^banned$/i)).toBeVisible();
+
+  await page.getByRole('button', { name: /actions/i }).click();
+  await page.getByRole('menuitem', { name: /unban user/i }).click();
+
+  await expect(
+    page.getByText(/user has been unbanned successfully./i),
+  ).toBeVisible();
+  await expect(page.locator('form').getByText(/^banned$/i)).not.toBeVisible();
+});

dashboard/e2e/auth/create-user.test.ts

@@ -0,0 +1,65 @@
+import {
+  TEST_PROJECT_NAME,
+  TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { faker } from '@faker-js/faker';
+import type { Page } from '@playwright/test';
+import test, { expect } from '@playwright/test';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.beforeEach(async () => {
+  await page.goto('/');
+
+  await openProject({
+    page,
+    projectName: TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: TEST_PROJECT_SLUG,
+  });
+
+  await page
+    .getByRole('navigation', { name: /main navigation/i })
+    .getByRole('link', { name: /auth/i })
+    .click();
+
+  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('should create a user', async () => {
+  const email = generateTestEmail();
+  const password = faker.internet.password();
+
+  await createUser({ page, email, password });
+
+  await expect(
+    page.getByRole('button', { name: `View ${email}`, exact: true }),
+  ).toBeVisible();
+});
+
+test('should not be able to create a user with an existing email', async () => {
+  const email = generateTestEmail();
+  const password = faker.internet.password();
+
+  await createUser({ page, email, password });
+
+  await expect(
+    page.getByRole('button', { name: `View ${email}`, exact: true }),
+  ).toBeVisible();
+
+  await createUser({ page, email, password });
+
+  await expect(
+    page.getByRole('dialog').getByText(/email already in use/i),
+  ).toBeVisible();
+});

dashboard/e2e/auth/delete-user.test.ts

@@ -0,0 +1,96 @@
+import {
+  TEST_PROJECT_NAME,
+  TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { faker } from '@faker-js/faker';
+import type { Page } from '@playwright/test';
+import test, { expect } from '@playwright/test';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.beforeEach(async () => {
+  await page.goto('/');
+
+  await openProject({
+    page,
+    projectName: TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: TEST_PROJECT_SLUG,
+  });
+
+  await page
+    .getByRole('navigation', { name: /main navigation/i })
+    .getByRole('link', { name: /auth/i })
+    .click();
+
+  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('should be able to delete a user', async () => {
+  const email = generateTestEmail();
+  const password = faker.internet.password();
+
+  await createUser({ page, email, password });
+
+  await expect(
+    page.getByRole('button', { name: `View ${email}`, exact: true }),
+  ).toBeVisible();
+
+  await page
+    .getByRole('button', { name: `More options for ${email}`, exact: true })
+    .click();
+  await page.getByRole('menuitem', { name: /delete user/i }).click();
+
+  await expect(page.getByRole('dialog')).toBeVisible();
+  await expect(
+    page.getByRole('heading', { name: /delete user/i }),
+  ).toBeVisible();
+  await expect(
+    page.getByText(`Are you sure you want to delete the "${email}" user?`),
+  ).toBeVisible();
+
+  await page.getByRole('button', { name: /delete/i, exact: true }).click();
+
+  await expect(page.getByRole('dialog')).not.toBeVisible();
+
+  await expect(
+    page.getByRole('button', { name: `View ${email}`, exact: true }),
+  ).not.toBeVisible();
+});
+
+test('should be able to delete a user from the details page', async () => {
+  const email = generateTestEmail();
+  const password = faker.internet.password();
+
+  await createUser({ page, email, password });
+
+  await page
+    .getByRole('button', { name: `View ${email}`, exact: true })
+    .click();
+
+  await page.getByRole('button', { name: /actions/i }).click();
+  await page.getByRole('menuitem', { name: /delete user/i }).click();
+
+  await expect(page.getByRole('dialog')).toBeVisible();
+  await expect(
+    page.getByRole('heading', { name: /delete user/i }),
+  ).toBeVisible();
+  await expect(
+    page.getByText(`Are you sure you want to delete the "${email}" user?`),
+  ).toBeVisible();
+
+  await page.getByRole('button', { name: /delete/i, exact: true }).click();
+  await expect(
+    page.getByRole('button', { name: `View ${email}`, exact: true }),
+  ).not.toBeVisible();
+});

dashboard/e2e/auth/user-management.test.ts

@@ -1,93 +0,0 @@
-import {
-  TEST_PROJECT_NAME,
-  TEST_PROJECT_SLUG,
-  TEST_WORKSPACE_SLUG,
-} from '@/e2e/env';
-import { openProject } from '@/e2e/utils';
-import type { Page } from '@playwright/test';
-import { expect, test } from '@playwright/test';
-
-let page: Page;
-
-test.describe.configure({ mode: 'serial' });
-
-test.beforeAll(async ({ browser }) => {
-  page = await browser.newPage();
-
-  await page.goto('/');
-
-  await openProject({
-    page,
-    projectName: TEST_PROJECT_NAME,
-    workspaceSlug: TEST_WORKSPACE_SLUG,
-    projectSlug: TEST_PROJECT_SLUG,
-  });
-
-  await page
-    .getByRole('navigation', { name: /main navigation/i })
-    .getByRole('link', { name: /auth/i })
-    .click();
-
-  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
-});
-
-test.afterAll(async () => {
-  await page.close();
-});
-
-test('should create a user', async () => {
-  await expect(
-    page.getByRole('heading', { name: /there are no users yet/i }),
-  ).toBeVisible();
-
-  await page
-    .getByRole('button', { name: /create user/i })
-    .first()
-    .click();
-
-  await expect(page.getByRole('dialog')).toBeVisible();
-  await expect(
-    page.getByRole('heading', { name: /create user/i }),
-  ).toBeVisible();
-
-  await page
-    .getByRole('textbox', { name: /email/i })
-    .fill('testuser@example.com');
-  await page.getByRole('textbox', { name: /password/i }).fill('test.password');
-  await page.getByRole('button', { name: /create/i, exact: true }).click();
-
-  await expect(page.getByRole('dialog')).not.toBeVisible();
-
-  await expect(
-    page.getByRole('button', { name: /view testuser@example.com/i }),
-  ).toBeVisible();
-});
-
-test('should delete a user', async () => {
-  await expect(
-    page.getByRole('button', { name: /view testuser@example.com/i }),
-  ).toBeVisible();
-
-  await page
-    .getByRole('button', { name: /more options for testuser@example.com/i })
-    .click();
-  await page.getByRole('menuitem', { name: /delete user/i }).click();
-
-  await expect(page.getByRole('dialog')).toBeVisible();
-  await expect(
-    page.getByRole('heading', { name: /delete user/i }),
-  ).toBeVisible();
-  await expect(
-    page.getByText(
-      /are you sure you want to delete the "testuser@example.com" user?/i,
-    ),
-  ).toBeVisible();
-
-  await page.getByRole('button', { name: /delete/i, exact: true }).click();
-
-  await expect(page.getByRole('dialog')).not.toBeVisible();
-
-  await expect(
-    page.getByRole('heading', { name: /there are no users yet/i }),
-  ).toBeVisible();
-});

dashboard/e2e/auth/verify-user.test.ts

@@ -0,0 +1,103 @@
+import {
+  TEST_PROJECT_NAME,
+  TEST_PROJECT_SLUG,
+  TEST_WORKSPACE_SLUG,
+} from '@/e2e/env';
+import { createUser, generateTestEmail, openProject } from '@/e2e/utils';
+import { faker } from '@faker-js/faker';
+import type { Page } from '@playwright/test';
+import { expect, test } from '@playwright/test';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+});
+
+test.beforeEach(async () => {
+  await page.goto('/');
+
+  await openProject({
+    page,
+    projectName: TEST_PROJECT_NAME,
+    workspaceSlug: TEST_WORKSPACE_SLUG,
+    projectSlug: TEST_PROJECT_SLUG,
+  });
+
+  await page
+    .getByRole('navigation', { name: /main navigation/i })
+    .getByRole('link', { name: /auth/i })
+    .click();
+
+  await page.waitForURL(`/${TEST_WORKSPACE_SLUG}/${TEST_PROJECT_SLUG}/users`);
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('should be able to verify the email of a user', async () => {
+  const email = generateTestEmail();
+  const password = faker.internet.password();
+
+  await createUser({ page, email, password });
+
+  await page
+    .getByRole('button', { name: `View ${email}`, exact: true })
+    .click();
+
+  await expect(
+    page.getByRole('checkbox', { name: /email verified/i }),
+  ).not.toBeChecked();
+  await page.getByRole('checkbox', { name: /email verified/i }).check();
+
+  await page.getByRole('button', { name: /save/i }).click();
+
+  await expect(
+    page.getByText(/user settings have been updated successfully./i),
+  ).toBeVisible();
+
+  await page
+    .getByRole('button', { name: `View ${email}`, exact: true })
+    .click();
+
+  await expect(
+    page.getByRole('checkbox', { name: /email verified/i }),
+  ).toBeChecked();
+});
+
+test('should be able to verify the phone number of a user', async () => {
+  const email = generateTestEmail();
+  const password = faker.internet.password();
+  const phoneNumber = faker.phone.number();
+
+  await createUser({ page, email, password });
+
+  await page
+    .getByRole('button', { name: `View ${email}`, exact: true })
+    .click();
+
+  await expect(
+    page.getByRole('checkbox', { name: /phone number verified/i }),
+  ).toBeDisabled();
+
+  await page.getByRole('textbox', { name: /phone number/i }).fill(phoneNumber);
+  await page.getByRole('checkbox', { name: /phone number verified/i }).check();
+  await page.getByRole('button', { name: /save/i }).click();
+
+  await expect(
+    page.getByText(/user settings have been updated successfully./i),
+  ).toBeVisible();
+
+  await page
+    .getByRole('button', { name: `View ${email}`, exact: true })
+    .click();
+
+  await expect(
+    page.getByRole('textbox', { name: /phone number/i }),
+  ).toHaveValue(phoneNumber);
+
+  await expect(
+    page.getByRole('checkbox', { name: /phone number verified/i }),
+  ).toBeChecked();
+});

dashboard/e2e/overview/overview.test.ts

@@ -72,7 +72,7 @@ test("should show the project's name, the Upgrade button and the Settings button
   await expect(
     page.getByRole('heading', { name: TEST_PROJECT_NAME }),
   ).toBeVisible();
-  await expect(page.getByText(/free plan/i)).toBeVisible();
+  await expect(page.getByText(/starter/i)).toBeVisible();
   await expect(page.getByRole('button', { name: /upgrade/i })).toBeVisible();
   await expect(
     page.getByRole('main').getByRole('link', { name: /settings/i }),
@@ -94,16 +94,26 @@ test('should not have a GitHub repository connected', async () => {
   ).toBeVisible();
 });
 
-test('should show proper limits for the free project', async () => {
+test('should show metrics', async () => {
-  // Limit for Database
+  await expect(page.getByText(/cpu usage seconds\d+/i)).toBeVisible();
-  await expect(page.getByText(/of 500 MB/i)).toBeVisible();
+  await expect(page.getByText(/total requests\d+/i)).toBeVisible();
-
+  await expect(page.getByText(/function invocations\d+/i)).toBeVisible();
-  // Limit for Storage
+  await expect(
-  await expect(page.getByText(/of 1 GB/i)).toBeVisible();
+    page.getByText(/egress volume\d+(\.\d+)? [a-zA-Z]+/i),
-
+  ).toBeVisible();
-  // Limit for Users
+  await expect(page.getByText(/logs\d+(\.\d+)? [a-zA-Z]+/i)).toBeVisible();
-  await expect(page.getByText(/of 10000/i)).toBeVisible();
+});
-
+
-  // Limit for Functions
+test('should show proper limits for the free project', async () => {
-  await expect(page.getByText(/of 10$/i, { exact: true })).toBeVisible();
+  await expect(
+    page.getByText(/database\d+(\.\d+)? [a-zA-Z]+ of \d+(\.\d+)? [a-zA-Z]+/i),
+  ).toBeVisible();
+
+  await expect(
+    page.getByText(/storage\d+(\.\d+)? [a-zA-Z]+ of \d+(\.\d+)? [a-zA-Z]+/i),
+  ).toBeVisible();
+
+  await expect(page.getByText(/users[0-9]+ of [0-9]+/i)).toBeVisible();
+
+  await expect(page.getByText(/functions[0-9]+ of [0-9]+/i)).toBeVisible();
 });

dashboard/e2e/setup/auth.setup.ts

@@ -3,12 +3,9 @@ import {
   TEST_USER_EMAIL,
   TEST_USER_PASSWORD,
 } from '@/e2e/env';
-import { chromium } from '@playwright/test';
+import { test as setup } from '@playwright/test';
-
-async function globalSetup() {
-  const browser = await chromium.launch();
-  const page = await browser.newPage({ baseURL: TEST_DASHBOARD_URL });
 
+setup('authenticate user', async ({ page }) => {
   await page.goto('/');
   await page.waitForURL('/signin');
   await page.getByRole('link', { name: /continue with email/i }).click();
@@ -19,9 +16,5 @@ async function globalSetup() {
   await page.getByRole('button', { name: /sign in/i }).click();
 
   await page.waitForURL(TEST_DASHBOARD_URL);
-  await page.context().storageState({ path: 'storageState.json' });
+  await page.context().storageState({ path: 'e2e/.auth/user.json' });
-
+});
-  await browser.close();
-}
-
-export default globalSetup;

dashboard/e2e/utils.ts

@@ -1,3 +1,4 @@
+import { faker } from '@faker-js/faker';
 import type { Page } from '@playwright/test';
 
 /**
@@ -148,3 +149,41 @@ export async function deleteTable({
   await page.getByRole('menuitem', { name: /delete table/i }).click();
   await page.getByRole('button', { name: /delete/i }).click();
 }
+
+/**
+ * Creates a new user.
+ *
+ * @param page - The Playwright page object.
+ * @param email - The email of the user to create.
+ * @param password - The password of the user to create.
+ * @returns A promise that resolves when the user is created.
+ */
+export async function createUser({
+  page,
+  email,
+  password,
+}: {
+  page: Page;
+  email: string;
+  password: string;
+}) {
+  await page
+    .getByRole('button', { name: /create user/i })
+    .first()
+    .click();
+
+  await page.getByRole('textbox', { name: /email/i }).fill(email);
+  await page.getByRole('textbox', { name: /password/i }).fill(password);
+  await page.getByRole('button', { name: /create/i, exact: true }).click();
+}
+
+/**
+ * Generates a test email address with the given prefix (if provided).
+ *
+ * @param prefix - The prefix to use for the email address. (Default: `Nhost_Test_`)
+ */
+export function generateTestEmail(prefix: string = 'Nhost_Test_') {
+  const email = faker.internet.email();
+
+  return [prefix, email].join('');
+}

dashboard/global-teardown.ts

@@ -13,7 +13,7 @@ async function globalTeardown() {
 
   const context = await browser.newContext({
     baseURL: TEST_DASHBOARD_URL,
-    storageState: 'storageState.json',
+    storageState: 'e2e/.auth/user.json',
   });
 
   const page = await context.newPage();

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/dashboard",
-  "version": "0.14.1",
+  "version": "0.14.5",
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -57,10 +57,9 @@
     "just-kebab-case": "^4.1.1",
     "lodash.debounce": "^4.0.8",
     "next": "^12.3.1",
-    "next-seo": "^5.14.1",
+    "next-seo": "^6.0.0",
     "node-pg-format": "^1.3.5",
     "pluralize": "^8.0.0",
-    "prettysize": "^2.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-error-boundary": "^4.0.0",
@@ -106,7 +105,7 @@
     "@types/lodash.debounce": "^4.0.7",
     "@types/node": "^16.11.7",
     "@types/pluralize": "^0.0.29",
-    "@types/react": "18.0.30",
+    "@types/react": "18.0.33",
     "@types/react-dom": "18.0.11",
     "@types/react-table": "^7.7.12",
     "@types/testing-library__jest-dom": "^5.14.5",

dashboard/playwright.config.ts

@@ -1,5 +1,4 @@
 import { defineConfig, devices } from '@playwright/test';
-
 import dotenv from 'dotenv';
 import path from 'path';
 
@@ -16,18 +15,24 @@ export default defineConfig({
   retries: process.env.CI ? 2 : 0,
   workers: process.env.CI ? 1 : undefined,
   reporter: 'html',
-  globalSetup: require.resolve('./global-setup'),
   globalTeardown: require.resolve('./global-teardown'),
   use: {
     actionTimeout: 0,
     trace: 'on-first-retry',
-    storageState: 'storageState.json',
     baseURL: process.env.NHOST_TEST_DASHBOARD_URL,
   },
   projects: [
+    {
+      name: 'setup',
+      testMatch: ['**/setup/*.setup.ts'],
+    },
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      use: {
+        ...devices['Desktop Chrome'],
+        storageState: 'e2e/.auth/user.json',
+      },
+      dependencies: ['setup'],
     },
   ],
 });

dashboard/src/components/applications/ApplicationErrored.tsx

@@ -10,24 +10,23 @@ import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Button from '@/ui/v2/Button';
 import { Dropdown } from '@/ui/v2/Dropdown';
 import Text from '@/ui/v2/Text';
-import { discordAnnounce } from '@/utils/discordAnnounce';
-import { getPreviousApplicationState } from '@/utils/getPreviousApplicationState';
-import { getApplicationStatusString } from '@/utils/helpers';
-import { triggerToast } from '@/utils/toast';
-import { updateOwnCache } from '@/utils/updateOwnCache';
 import {
   useDeleteApplicationMutation,
   useGetApplicationStateQuery,
   useInsertApplicationMutation,
   useUpdateApplicationMutation,
 } from '@/utils/__generated__/graphql';
+import { discordAnnounce } from '@/utils/discordAnnounce';
+import { getPreviousApplicationState } from '@/utils/getPreviousApplicationState';
+import { getApplicationStatusString } from '@/utils/helpers';
+import { triggerToast } from '@/utils/toast';
+import { updateOwnCache } from '@/utils/updateOwnCache';
 import { useApolloClient } from '@apollo/client';
 import { useUserData } from '@nhost/nextjs';
 import Image from 'next/image';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import ApplicationInfo from './ApplicationInfo';
 import ApplicationLive from './ApplicationLive';
-import ApplicationUnknown from './ApplicationUnknown';
 import { RemoveApplicationModal } from './RemoveApplicationModal';
 import { StagingMetadata } from './StagingMetadata';
 
@@ -47,9 +46,9 @@ export default function ApplicationErrored() {
     variables: { appId: currentApplication.id },
   });
 
-  const [previousState, setPreviousState] = useState<ApplicationStatus | null>(
+  const previousState = data?.app?.appStates
-    null,
+    ? getPreviousApplicationState(data.app.appStates)
-  );
+    : null;
 
   const [showRecreateModal, setShowRecreateModal] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
@@ -140,20 +139,6 @@ export default function ApplicationErrored() {
     await recreateApplication();
   }
 
-  useEffect(() => {
-    if (loading) {
-      return;
-    }
-    if (error) {
-      return;
-    }
-
-    const previousAcceptedState = getPreviousApplicationState(
-      data.app.appStates,
-    );
-    setPreviousState(previousAcceptedState);
-  }, [setPreviousState, data, loading, error]);
-
   if (loading || previousState === null) {
     return (
       <Container className="mx-auto mt-12 max-w-sm text-center">
@@ -170,19 +155,13 @@ export default function ApplicationErrored() {
     return null;
   }
 
-  if (previousState === ApplicationStatus.Live) {
+  if (
-    return <ApplicationLive />;
+    previousState === ApplicationStatus.Updating ||
-  }
+    previousState === ApplicationStatus.Empty
-
+  ) {
-  // For now, if the application errored and the previous state to this error is an UPDATING state, we want to show the dashboard,
+    return (
-  // it's likely that most services are up and we shouldn't block all functionality. In the future, we're going to have a way to
+      <ApplicationLive errorMessage="Error deploying the project most likely due to invalid configuration. Please review your project's configuration and logs for more information." />
-  // redeploy the app again, and get to a healthy state. @GC
+    );
-  if (previousState === ApplicationStatus.Updating) {
-    return <ApplicationLive />;
-  }
-
-  if (previousState === ApplicationStatus.Empty) {
-    return <ApplicationUnknown />;
   }
 
   return (

dashboard/src/components/applications/ApplicationLive.tsx

@@ -1,20 +1,31 @@
 import MaintenanceAlert from '@/components/common/MaintenanceAlert';
 import RetryableErrorBoundary from '@/components/common/RetryableErrorBoundary';
 import Container from '@/components/layout/Container';
-import { features } from '@/components/overview/features';
-import { frameworks } from '@/components/overview/frameworks';
 import OverviewDeployments from '@/components/overview/OverviewDeployments';
 import OverviewDocumentation from '@/components/overview/OverviewDocumentation';
+import OverviewMetrics from '@/components/overview/OverviewMetrics/OverviewMetrics';
 import OverviewMigration from '@/components/overview/OverviewMigration';
 import OverviewProjectInfo from '@/components/overview/OverviewProjectInfo';
 import OverviewRepository from '@/components/overview/OverviewRepository';
 import OverviewTopBar from '@/components/overview/OverviewTopBar';
 import OverviewUsage from '@/components/overview/OverviewUsage';
+import { features } from '@/components/overview/features';
+import { frameworks } from '@/components/overview/frameworks';
 import useIsPlatform from '@/hooks/common/useIsPlatform';
 import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { Alert } from '@/ui/Alert';
 import Divider from '@/ui/v2/Divider';
 
-export default function ApplicationLive() {
+export interface ApplicationLiveProps {
+  /**
+   * Error message to display in the alert.
+   */
+  errorMessage?: string;
+}
+
+export default function ApplicationLive({
+  errorMessage,
+}: ApplicationLiveProps) {
   const isPlatform = useIsPlatform();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
   const isProjectUsingRDS = currentApplication?.featureFlags.some(
@@ -24,6 +35,8 @@ export default function ApplicationLive() {
   if (!isPlatform) {
     return (
       <Container>
+        {errorMessage && <Alert severity="error">{errorMessage}</Alert>}
+
         <OverviewTopBar />
 
         <div className="grid grid-cols-1 gap-12 lg:grid-cols-3">
@@ -54,10 +67,17 @@ export default function ApplicationLive() {
   return (
     <Container>
       <MaintenanceAlert />
+
+      {errorMessage && <Alert severity="error">{errorMessage}</Alert>}
+
       <OverviewTopBar />
 
       <div className="grid grid-cols-1 gap-12 pt-3 lg:grid-cols-3">
-        <div className="order-2 grid grid-flow-row gap-12 lg:order-1 lg:col-span-2">
+        <div className="grid grid-flow-row gap-12 lg:col-span-2">
+          <RetryableErrorBoundary>
+            <OverviewMetrics />
+          </RetryableErrorBoundary>
+
           <RetryableErrorBoundary>
             <OverviewDeployments />
           </RetryableErrorBoundary>
@@ -66,16 +86,18 @@ export default function ApplicationLive() {
             title="Pick your favorite framework and start learning"
             description="Nhost integrates smoothly with all of the frameworks you already know."
             cardElements={frameworks}
+            className="hidden lg:block"
           />
 
           <OverviewDocumentation
             title="Platform Documentation"
             description="More in-depth documentation for key features."
             cardElements={features}
+            className="hidden lg:block"
           />
         </div>
 
-        <div className="order-1 grid grid-flow-row content-start gap-8 lg:order-2 lg:col-span-1 lg:gap-12">
+        <div className="grid grid-flow-row content-start gap-8 lg:col-span-1 lg:gap-12">
           {isProjectUsingRDS && (
             <>
               <OverviewMigration />
@@ -88,6 +110,20 @@ export default function ApplicationLive() {
           <Divider />
           <OverviewUsage />
         </div>
+
+        <OverviewDocumentation
+          title="Pick your favorite framework and start learning"
+          description="Nhost integrates smoothly with all of the frameworks you already know."
+          cardElements={frameworks}
+          className="lg:hidden"
+        />
+
+        <OverviewDocumentation
+          title="Platform Documentation"
+          description="More in-depth documentation for key features."
+          cardElements={features}
+          className="lg:hidden"
+        />
       </div>
     </Container>
   );

dashboard/src/components/layout/ProjectLayout/ProjectLayout.tsx

@@ -9,6 +9,7 @@ import { useGetAllUserWorkspacesAndApplications } from '@/hooks/useGetAllUserWor
 import { useNavigationVisible } from '@/hooks/useNavigationVisible';
 import useNotFoundRedirect from '@/hooks/useNotFoundRedirect';
 import { useSetAppWorkspaceContextFromUserContext } from '@/hooks/useSetAppWorkspaceContextFromUserContext';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import type { BoxProps } from '@/ui/v2/Box';
 import Box from '@/ui/v2/Box';
 import { NextSeo } from 'next-seo';
@@ -30,9 +31,15 @@ function ProjectLayoutContent({
     ...mainContainerProps
   } = {},
 }: ProjectLayoutProps) {
-  const { currentApplication, currentWorkspace } =
+  // TODO: This will be removed once we migrated every occurrence to
+  // useCurrentWorkspaceAndProject()
+  const { currentWorkspace, currentApplication } =
     useCurrentWorkspaceAndApplication();
 
+  const { currentProject, loading, error } = useCurrentWorkspaceAndProject({
+    fetchPolicy: 'network-only',
+  });
+
   const router = useRouter();
   const shouldDisplayNav = useNavigationVisible();
   const isPlatform = useIsPlatform();
@@ -63,10 +70,14 @@ function ProjectLayoutContent({
     }
   }, [isPlatform, isRestrictedPath, router]);
 
-  if (!currentWorkspace || !currentApplication || isRestrictedPath) {
+  if (!currentWorkspace || !currentApplication || isRestrictedPath || loading) {
     return <LoadingScreen />;
   }
 
+  if (error) {
+    throw error;
+  }
+
   if (!isPlatform) {
     return (
       <>
@@ -104,7 +115,7 @@ function ProjectLayoutContent({
       >
         {children}
 
-        <NextSeo title={currentApplication.name} />
+        <NextSeo title={currentProject.name} />
       </Box>
     </>
   );

dashboard/src/components/logs/LogsTimePicker/LogsTimePicker.tsx

@@ -4,6 +4,7 @@ import { useDropdown } from '@/ui/v2/Dropdown';
 import type { InputProps } from '@/ui/v2/Input';
 import Input from '@/ui/v2/Input';
 import { format, set } from 'date-fns';
+import type { ChangeEvent } from 'react';
 
 export interface LogTimePickerProps extends InputProps {
   /**
@@ -22,21 +23,21 @@ function LogsTimePicker({
 }: any) {
   const { handleClose } = useDropdown();
 
-  const handleCancel = () => {
+  function handleCancel() {
     handleClose();
-  };
+  }
 
-  const handleApply = () => {
+  function handleApply() {
     onChange(selectedDate);
     handleClose();
-  };
+  }
 
-  const handleTimePicking = (event) => {
+  function handleChange(event: ChangeEvent<HTMLInputElement>) {
-    const [hours, minutes, seconds] = event.target.value.split(':');
+    const [hours, minutes, seconds] = event.target.value?.split(':') || [];
 
-    const hoursNumber = parseInt(hours, 10);
+    const hoursNumber = parseInt(hours || '0', 10);
-    const minutesNumber = parseInt(minutes, 10);
+    const minutesNumber = parseInt(minutes || '0', 10);
-    const secondsNumber = parseInt(seconds, 10);
+    const secondsNumber = parseInt(seconds || '0', 10);
 
     const newDate = set(new Date(selectedDate), {
       hours: hoursNumber,
@@ -51,7 +52,7 @@ function LogsTimePicker({
     }
 
     setSelectedDate(newDate);
-  };
+  }
 
   return (
     <div className="mx-auto grid grid-flow-row items-center self-center">
@@ -64,7 +65,7 @@ function LogsTimePicker({
             formControl: { className: 'grid grid-flow-col gap-x-3' },
             label: { sx: { fontSize: '14px' } },
           }}
-          onChange={handleTimePicking}
+          onChange={handleChange}
           type="time"
           label="Select Time"
           sx={{

dashboard/src/components/overview/MetricsCard/MetricsCard.tsx

@@ -0,0 +1,58 @@
+import type { BoxProps } from '@/ui/v2/Box';
+import Box from '@/ui/v2/Box';
+import Text from '@/ui/v2/Text';
+import Tooltip from '@/ui/v2/Tooltip';
+import { InfoIcon } from '@/ui/v2/icons/InfoIcon';
+import { twMerge } from 'tailwind-merge';
+
+export interface MetricsCardProps extends BoxProps {
+  /**
+   * Label of the card.
+   */
+  label?: string;
+  /**
+   * Value of the card.
+   */
+  value?: string;
+  /**
+   * Tooltip of the card.
+   */
+  tooltip?: string;
+}
+
+export default function MetricsCard({
+  label,
+  value,
+  tooltip,
+  className,
+}: MetricsCardProps) {
+  return (
+    <Box
+      className={twMerge(
+        'grid grid-flow-row gap-2 rounded-md px-4 py-3',
+        className,
+      )}
+      sx={{ backgroundColor: 'grey.200' }}
+    >
+      <div className="grid grid-flow-col items-center justify-between gap-2">
+        {label && (
+          <Text className="truncate font-medium" color="secondary">
+            {label}
+          </Text>
+        )}
+
+        {tooltip && (
+          <Tooltip title={tooltip}>
+            <InfoIcon className="h-4 w-4" />
+          </Tooltip>
+        )}
+      </div>
+
+      {value && (
+        <Text variant="h2" component="p" className="truncate">
+          {value}
+        </Text>
+      )}
+    </Box>
+  );
+}

dashboard/src/components/overview/MetricsCard/index.ts

@@ -0,0 +1,2 @@
+export * from './MetricsCard';
+export { default as MetricsCard } from './MetricsCard';

dashboard/src/components/overview/OverviewDocumentation/OverviewDocumentation.tsx

@@ -35,7 +35,7 @@ export default function OverviewDocumentation({
         <Text color="secondary">{description}</Text>
       </div>
 
-      <div className="mt-6 grid grid-flow-row items-center gap-6 xs:grid-cols-2 lg:grid-cols-4 lg:gap-4">
+      <div className="mt-6 grid grid-flow-row items-center gap-6 xs:grid-cols-2 lg:gap-4 xl:grid-cols-4">
         {cardElements.map(
           ({
             title: cardTitle,

dashboard/src/components/overview/OverviewMetrics/OverviewMetrics.tsx

@@ -0,0 +1,84 @@
+import type { MetricsCardProps } from '@/components/overview/MetricsCard';
+import { MetricsCard } from '@/components/overview/MetricsCard';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
+import Text from '@/ui/v2/Text';
+import { useGetProjectMetricsQuery } from '@/utils/__generated__/graphql';
+import { prettifyNumber } from '@/utils/common/prettifyNumber';
+import { prettifySize } from '@/utils/common/prettifySize';
+import { twMerge } from 'tailwind-merge';
+
+const now = new Date();
+
+export default function OverviewMetrics() {
+  const { currentProject } = useCurrentWorkspaceAndProject();
+  const { data, loading, error } = useGetProjectMetricsQuery({
+    variables: {
+      appId: currentProject?.id,
+      subdomain: currentProject?.subdomain,
+      from: new Date(now.getFullYear(), now.getMonth(), 1),
+    },
+    skip: !currentProject?.id,
+  });
+
+  const cardElements: MetricsCardProps[] = [
+    {
+      label: 'CPU Usage Seconds',
+      tooltip: 'Total time the service has used the CPUs',
+      value: prettifyNumber(data?.cpuSecondsUsage?.value || 0),
+    },
+    {
+      label: 'Total Requests',
+      tooltip:
+        'Total amount of requests your services have received excluding functions',
+      value: prettifyNumber(data?.totalRequests?.value || 0, {
+        numberOfDecimals: data?.totalRequests?.value > 1000 ? 2 : 0,
+      }),
+    },
+    {
+      label: 'Function Invocations',
+      tooltip: 'Number of times your functions have been called',
+      value: prettifyNumber(data?.functionInvocations?.value || 0, {
+        numberOfDecimals: 0,
+      }),
+    },
+    {
+      label: 'Egress Volume',
+      tooltip: 'Amount of data your services have sent to users',
+      value: prettifySize(data?.egressVolume?.value || 0),
+    },
+    {
+      label: 'Logs',
+      tooltip: 'Amount of logs stored',
+      value: prettifySize(data?.logsVolume?.value || 0),
+    },
+  ];
+
+  if (!data && error) {
+    throw error;
+  }
+
+  return (
+    <div className="grid grid-flow-row gap-4">
+      <div className="grid grid-cols-1 justify-start gap-4 xs:grid-cols-2 md:grid-cols-3">
+        {cardElements.map(({ label, value, tooltip, className, ...props }) => (
+          <MetricsCard
+            {...props}
+            key={label}
+            label={!loading ? label : null}
+            value={!loading ? value : null}
+            tooltip={!loading ? tooltip : null}
+            className={twMerge(
+              'min-h-[92px]',
+              loading && 'animate-pulse',
+              className,
+            )}
+          />
+        ))}
+      </div>
+
+      <Text color="disabled">
+        Your resource usage since the beginning of the month.
+      </Text>
+    </div>
+  );
+}

dashboard/src/components/overview/OverviewMetrics/index.ts

@@ -0,0 +1 @@
+export { default } from './OverviewMetrics';

dashboard/src/components/overview/OverviewProjectInfo/OverviewProjectInfo.tsx

@@ -1,11 +1,11 @@
 import InfoCard from '@/components/overview/InfoCard';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import Text from '@/ui/v2/Text';
 import Image from 'next/image';
 
 export default function OverviewProjectInfo() {
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
+  const { currentProject } = useCurrentWorkspaceAndProject();
-  const { region, subdomain } = currentApplication || {};
+  const { region, subdomain } = currentProject || {};
   const isRegionAvailable =
     region?.awsName && region?.countryCode && region?.city;
 
@@ -13,14 +13,14 @@ export default function OverviewProjectInfo() {
     <div className="grid grid-flow-row content-start gap-6">
       <Text variant="h3">Project Info</Text>
 
-      {currentApplication && (
+      {currentProject && (
         <div className="grid grid-flow-row gap-3">
           <InfoCard
             title="Region"
             value={region?.awsName}
             customValue={
-              region.countryCode &&
+              region?.countryCode &&
-              region.city && (
+              region?.city && (
                 <div className="grid grid-flow-col items-center gap-1 self-center">
                   <Image
                     src={`/assets/flags/${region.countryCode}.svg`}
@@ -29,7 +29,7 @@ export default function OverviewProjectInfo() {
                     height={12}
                   />
 
-                  <Text className="text-sm font-medium truncate">
+                  <Text className="truncate text-sm font-medium">
                     {region.city} ({region.awsName})
                   </Text>
                 </div>

dashboard/src/components/overview/OverviewTopBar/OverviewTopBar.tsx

@@ -2,20 +2,19 @@ import { ChangePlanModal } from '@/components/applications/ChangePlanModal';
 import { useDialog } from '@/components/common/DialogProvider';
 import { useUI } from '@/context/UIContext';
 import useIsPlatform from '@/hooks/common/useIsPlatform';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
-import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
 import Chip from '@/ui/v2/Chip';
 import CogIcon from '@/ui/v2/icons/CogIcon';
 import Text from '@/ui/v2/Text';
+import { formatDistanceToNowStrict, parseISO } from 'date-fns';
 import Image from 'next/image';
 import Link from 'next/link';
 
 export default function OverviewTopBar() {
   const isPlatform = useIsPlatform();
-  const { currentWorkspace, currentApplication } =
+  const { currentWorkspace, currentProject } = useCurrentWorkspaceAndProject();
-    useCurrentWorkspaceAndApplication();
+  const isPro = !currentProject?.plan?.isFree;
-  const isPro = !currentApplication?.plan?.isFree;
   const { openAlertDialog } = useDialog();
   const { maintenanceActive } = useUI();
 
@@ -44,63 +43,92 @@ export default function OverviewTopBar() {
 
   return (
     <div className="grid items-center gap-4 pb-5 md:grid-flow-col md:place-content-between md:py-5">
-      <div className="grid items-center gap-2 md:grid-flow-col">
+      <div className="grid items-center gap-4 md:grid-flow-col">
         <div className="grid grid-flow-col items-center justify-start gap-2">
           <div className="h-10 w-10 overflow-hidden rounded-lg">
             <Image
               src="/logos/new.svg"
               alt="Nhost Logo"
-              width={40}
+              width={56}
-              height={40}
+              height={56}
             />
           </div>
 
-          <Text variant="h2" component="h1">
+          <div className="grid grid-flow-row">
-            {currentApplication.name}
+            <div className="grid grid-flow-row items-center justify-start md:grid-flow-col md:gap-3">
-          </Text>
+              <Text
-        </div>
+                variant="h2"
-
+                component="h1"
-        <Box className="grid grid-flow-col items-center justify-start gap-2">
+                className="grid grid-flow-col items-center gap-3"
-          {isPro ? (
-            <Chip
-              className="self-center font-medium"
-              size="small"
-              label="Pro Plan"
-              color="primary"
-            />
-          ) : (
-            <>
-              <Chip
-                className="self-center font-medium"
-                size="small"
-                label="Free Plan"
-                color="default"
-                variant="filled"
-              />
-              <Button
-                variant="borderless"
-                className="mr-2"
-                onClick={() => {
-                  openAlertDialog({
-                    title: 'Upgrade your plan.',
-                    payload: <ChangePlanModal />,
-                    props: {
-                      PaperProps: { className: 'p-0 max-w-xl w-full' },
-                      hidePrimaryAction: true,
-                      hideSecondaryAction: true,
-                      hideTitle: true,
-                    },
-                  });
-                }}
               >
-                Upgrade
+                {currentProject.name}
-              </Button>
+              </Text>
-            </>
+
-          )}
+              {currentProject.creator && (
-        </Box>
+                <Text
+                  color="secondary"
+                  variant="subtitle2"
+                  className="md:hidden"
+                >
+                  Created by{' '}
+                  {currentProject.creator?.displayName ||
+                    currentProject.creator?.email}{' '}
+                  {formatDistanceToNowStrict(
+                    parseISO(currentProject.createdAt),
+                  )}{' '}
+                  ago
+                </Text>
+              )}
+
+              <div className="mt-1 inline-grid grid-flow-col items-center justify-start gap-2 md:mt-0">
+                <Chip
+                  size="small"
+                  label={isPro ? 'Pro' : 'Starter'}
+                  color={isPro ? 'primary' : 'default'}
+                />
+
+                {!isPro && (
+                  <Button
+                    variant="borderless"
+                    className="mr-2"
+                    onClick={() => {
+                      openAlertDialog({
+                        title: 'Upgrade your plan.',
+                        payload: <ChangePlanModal />,
+                        props: {
+                          PaperProps: { className: 'p-0 max-w-xl w-full' },
+                          hidePrimaryAction: true,
+                          hideSecondaryAction: true,
+                          hideTitle: true,
+                        },
+                      });
+                    }}
+                  >
+                    Upgrade
+                  </Button>
+                )}
+              </div>
+            </div>
+
+            {currentProject.creator && (
+              <Text
+                color="secondary"
+                variant="subtitle2"
+                className="hidden md:block"
+              >
+                Created by{' '}
+                {currentProject.creator?.displayName ||
+                  currentProject.creator?.email}{' '}
+                {formatDistanceToNowStrict(parseISO(currentProject.createdAt))}{' '}
+                ago
+              </Text>
+            )}
+          </div>
+        </div>
       </div>
+
       <Link
-        href={`/${currentWorkspace.slug}/${currentApplication.slug}/settings/general`}
+        href={`/${currentWorkspace.slug}/${currentProject.slug}/settings/general`}
         passHref
       >
         <Button

dashboard/src/components/overview/OverviewUsage/OverviewUsage.tsx

@@ -1,53 +1,55 @@
 import RetryableErrorBoundary from '@/components/common/RetryableErrorBoundary';
 import {
   useGetAppFunctionsMetadataQuery,
+  useGetProjectMetricsQuery,
   useGetRemoteAppMetricsQuery,
 } from '@/generated/graphql';
 import useIsPlatform from '@/hooks/common/useIsPlatform';
-import useDatabaseSizeOfApplication from '@/hooks/overview/useDatabaseSizeOfApplication';
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
 import { useRemoteApplicationGQLClient } from '@/hooks/useRemoteApplicationGQLClient';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
 import LinearProgress from '@/ui/v2/LinearProgress';
 import Text from '@/ui/v2/Text';
-import prettysize from 'prettysize';
+import { prettifySize } from '@/utils/common/prettifySize';
-import { useEffect, useState } from 'react';
+
+const now = new Date();
 
 export interface UsageProgressProps {
   /**
    * The title of the current service being rendered.
    */
-  service: string;
+  label: string;
   /**
    * The amount used for a given servince on the current project.
    */
-  used: number;
+  used?: string | number;
   /**
    * The total amount of a given service.
    */
-  total: number;
+  total?: string | number;
+  /**
+   * The percentage of the service used.
+   */
+  percentage?: number;
 }
 
-export function UsageProgress({ service, used, total }: UsageProgressProps) {
+export function UsageProgress({
-  const denotesFileSizes = service === 'Database' || service === 'Storage';
+  label,
-  const normalizedTotal = denotesFileSizes ? total * 1024 * 1024 : total;
+  used,
-  const percentage = Math.round((used / normalizedTotal) * 100);
+  total,
-  const prettyTotal = denotesFileSizes
+  percentage,
-    ? prettysize(total * 1024 * 1024)
+}: UsageProgressProps) {
-    : total;
-  const prettyUsed = denotesFileSizes ? prettysize(used) : used;
-
   return (
     <div className="flex flex-col space-y-3">
       <div className="flex flex-row place-content-between items-center">
         <Text variant="subtitle2" className="lg:!font-medium">
-          {service}
+          {label}
         </Text>
 
         <Text className="text-xs !font-medium">
-          {prettyUsed}{' '}
+          {used} {total && <span className="opacity-80">of {total}</span>}
-          {total && <span className="opacity-80">of {prettyTotal}</span>}
         </Text>
       </div>
+
       <LinearProgress
         variant="determinate"
         value={percentage === 0 ? -1 : percentage}
@@ -56,92 +58,120 @@ export function UsageProgress({ service, used, total }: UsageProgressProps) {
   );
 }
 
-const services = [
-  {
-    service: 'Database',
-    total: { Starter: 500, Pro: 10240 },
-  },
-  {
-    service: 'Storage',
-    total: { Starter: 1024, Pro: 10240 },
-  },
-  {
-    service: 'Users',
-    total: { Starter: 10000, Pro: 100000 },
-  },
-  {
-    service: 'Functions',
-    total: { Starter: 10, Pro: 50 },
-  },
-];
-
 export function OverviewUsageMetrics() {
   const isPlatform = useIsPlatform();
-  const { currentApplication } = useCurrentWorkspaceAndApplication();
+  const { currentProject } = useCurrentWorkspaceAndProject();
   const remoteAppClient = useRemoteApplicationGQLClient();
 
-  const [metrics, setMetrics] = useState({
+  const { data: functionsInfoData, loading: functionMetricsLoading } =
-    functions: 0,
+    useGetAppFunctionsMetadataQuery({
-    storage: 0,
+      variables: { id: currentProject?.id },
-    database: 0,
+      skip: !isPlatform || !currentProject,
-    users: 0,
+    });
-  });
 
-  const { data: functionsInfoData } = useGetAppFunctionsMetadataQuery({
+  const { data: projectMetrics, loading: projectMetricsLoading } =
-    variables: { id: currentApplication?.id },
+    useGetProjectMetricsQuery({
-    skip: !isPlatform,
+      variables: {
-  });
+        appId: currentProject?.id,
+        subdomain: currentProject?.subdomain,
+        from: new Date(now.getFullYear(), now.getMonth(), 1),
+      },
+      skip: !isPlatform || !currentProject,
+    });
 
-  const { data: databaseSizeData } = useDatabaseSizeOfApplication(
+  const { data: remoteAppMetricsData, loading: remoteAppMetricsLoading } =
-    [currentApplication?.name, 'databaseSize'],
+    useGetRemoteAppMetricsQuery({
-    { enabled: !!currentApplication },
+      client: remoteAppClient,
-  );
+      skip: !currentProject,
+    });
 
-  const { data: remoteAppMetricsData } = useGetRemoteAppMetricsQuery({
+  const metricsLoading =
-    client: remoteAppClient,
+    functionMetricsLoading || projectMetricsLoading || remoteAppMetricsLoading;
-    skip: !currentApplication,
+  // metrics for database
-  });
+  const usedDatabase = projectMetrics?.postgresVolumeUsage.value || 0;
+  const totalDatabase = projectMetrics?.postgresVolumeCapacity.value || 0;
 
-  useEffect(() => {
+  // metrics for storage
-    if (databaseSizeData) {
+  const usedStorage =
-      setMetrics((m) => ({
+    remoteAppMetricsData?.filesAggregate?.aggregate?.sum?.size || 0;
-        ...m,
+  const totalStorage = currentProject?.plan?.isFree
-        database: databaseSizeData.databaseSize,
+    ? 1 * 1000 ** 3 // 1 GB
-      }));
+    : 10 * 1000 ** 3; // 10 GB
-    }
-  }, [databaseSizeData]);
 
-  useEffect(() => {
+  // metrics for users
-    if (remoteAppMetricsData) {
+  const usedUsers = remoteAppMetricsData?.usersAggregate?.aggregate?.count || 0;
-      setMetrics((m) => ({
+  const totalUsers = currentProject?.plan?.isFree ? 10000 : 100000;
-        ...m,
-        storage: remoteAppMetricsData.filesAggregate.aggregate.sum.size,
-        users: remoteAppMetricsData.usersAggregate.aggregate.count,
-      }));
-    }
-  }, [remoteAppMetricsData]);
 
-  useEffect(() => {
+  // metrics for functions
-    if (functionsInfoData) {
+  const usedFunctions = functionsInfoData?.app.metadataFunctions.length || 0;
-      setMetrics((m) => ({
+  const totalFunctions = currentProject?.plan?.isFree ? 10 : 50;
-        ...m,
+
-        functions: functionsInfoData.app.metadataFunctions.length,
+  if (metricsLoading) {
-      }));
+    return (
-    }
+      <div className="grid grid-flow-row content-start gap-6">
-  }, [functionsInfoData]);
+        <UsageProgress label="Database" percentage={0} />
+        <UsageProgress label="Storage" percentage={0} />
+        <UsageProgress label="Users" percentage={0} />
+        <UsageProgress label="Functions" percentage={0} />
+      </div>
+    );
+  }
+
+  if (!isPlatform) {
+    return (
+      <div className="grid grid-flow-row content-start gap-6">
+        <UsageProgress
+          label="Database"
+          used={prettifySize(0)}
+          percentage={100}
+        />
+
+        <UsageProgress
+          label="Storage"
+          used={prettifySize(usedStorage)}
+          percentage={100}
+        />
+
+        <UsageProgress label="Users" used={usedUsers} percentage={100} />
+
+        <UsageProgress
+          label="Functions"
+          used={usedFunctions}
+          percentage={100}
+        />
+      </div>
+    );
+  }
 
   return (
     <div className="grid grid-flow-row content-start gap-6">
-      {services.map((service) => (
+      <UsageProgress
-        <UsageProgress
+        label="Database"
-          key={service.service}
+        used={prettifySize(usedDatabase)}
-          service={service.service}
+        total={prettifySize(totalDatabase)}
-          used={metrics[service.service.toLowerCase()]}
+        percentage={(usedDatabase / totalDatabase) * 100}
-          total={
+      />
-            isPlatform ? service.total[currentApplication.plan?.name] : null
+
-          }
+      <UsageProgress
-        />
+        label="Storage"
-      ))}
+        used={prettifySize(usedStorage)}
+        total={prettifySize(totalStorage)}
+        percentage={(usedStorage / totalStorage) * 100}
+      />
+
+      <UsageProgress
+        label="Users"
+        used={usedUsers}
+        total={totalUsers}
+        percentage={(usedUsers / totalUsers) * 100}
+      />
+
+      <UsageProgress
+        label="Functions"
+        used={usedFunctions}
+        total={totalFunctions}
+        percentage={(usedFunctions / totalFunctions) * 100}
+      />
     </div>
   );
 }

dashboard/src/components/ui/v2/ListItem/ListItemText.tsx

@@ -11,7 +11,7 @@ const StyledListItemText = styled(MaterialListItemText)(({ theme }) => ({
   display: 'grid',
   justifyContent: 'start',
   gridAutoFlow: 'row',
-  gap: theme.spacing(0.5),
+  gap: theme.spacing(0.25),
   fontSize: theme.typography.pxToRem(15),
   [`&.${listItemTextClasses.root}`]: {
     margin: 0,

dashboard/src/components/ui/v2/Tooltip/Tooltip.tsx

@@ -28,10 +28,10 @@ const StyledTooltip = styled(Box)(({ theme }) => ({
     lineHeight: '1.375rem',
     backgroundColor:
       theme.palette.mode === 'dark'
-        ? theme.palette.grey[300]
+        ? theme.palette.grey[400]
         : theme.palette.grey[700],
     color: theme.palette.common.white,
-    padding: theme.spacing(0.5, 1),
+    padding: theme.spacing(0.75, 1.25),
     borderRadius: theme.shape.borderRadius,
     WebkitFontSmoothing: 'antialiased',
     boxShadow:

dashboard/src/components/ui/v2/icons/InfoIcon/InfoIcon.tsx

@@ -0,0 +1,34 @@
+import type { IconProps } from '@/ui/v2/icons';
+import SvgIcon from '@/ui/v2/icons/SvgIcon';
+import type { ForwardedRef } from 'react';
+import { forwardRef } from 'react';
+
+function InfoIcon(props: IconProps, ref: ForwardedRef<SVGSVGElement>) {
+  return (
+    <SvgIcon
+      width="16"
+      height="16"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      aria-label="Info"
+      ref={ref}
+      {...props}
+    >
+      <path
+        opacity="0.2"
+        d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M9 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM6.5 8.25h.75V11c0 .414.336.75.75.75h1.5v-1.5h-.75V7.5A.75.75 0 0 0 8 6.75H6.5v1.5Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+}
+
+InfoIcon.displayName = 'NhostInfoIcon';
+
+export default forwardRef(InfoIcon);

dashboard/src/components/ui/v2/icons/InfoIcon/index.ts

@@ -0,0 +1 @@
+export { default as InfoIcon } from './InfoIcon';

dashboard/src/components/users/CreateUserForm/CreateUserForm.tsx

@@ -32,7 +32,6 @@ export const validationSchema = Yup.object({
     .required('This field is required.'),
   password: Yup.string()
     .label('Users Password')
-    .min(8, 'Password must be at least 8 characters long.')
     .required('This field is required.'),
 });
 
@@ -99,7 +98,7 @@ export default function CreateUserForm({
         }),
         {
           loading: 'Creating user...',
-          success: 'User created successfully.',
+          success: 'User has been created successfully.',
           error: getServerError(
             'An error occurred while trying to create the user.',
           ),

dashboard/src/components/users/EditUserForm/EditUserForm.tsx

@@ -19,6 +19,7 @@ import Option from '@/ui/v2/Option';
 import Text from '@/ui/v2/Text';
 import getReadableProviderName from '@/utils/common/getReadableProviderName';
 import { copy } from '@/utils/copy';
+import getServerError from '@/utils/settings/getServerError';
 import getUserRoles from '@/utils/settings/getUserRoles';
 import { getToastStyleProps } from '@/utils/settings/settingsConstants';
 import {
@@ -168,11 +169,13 @@ export default function EditUserForm({
       {
         loading: shouldBan ? 'Banning user...' : 'Unbanning user...',
         success: shouldBan
-          ? 'User banned successfully'
+          ? 'User has been banned successfully.'
-          : 'User unbanned successfully.',
+          : 'User has been unbanned successfully.',
-        error: shouldBan
+        error: getServerError(
-          ? 'An error occurred while trying to ban the user.'
+          shouldBan
-          : 'An error occurred while trying to unban the user.',
+            ? 'An error occurred while trying to ban the user.'
+            : 'An error occurred while trying to unban the user.',
+        ),
       },
       getToastStyleProps(),
     );
@@ -213,7 +216,7 @@ export default function EditUserForm({
                     Actions
                   </Button>
                 </Dropdown.Trigger>
-                <Dropdown.Content menu disablePortal className="h-full w-full">
+                <Dropdown.Content menu className="h-full w-full">
                   <Dropdown.Item
                     className="font-medium"
                     sx={{ color: 'error.main' }}
@@ -316,6 +319,7 @@ export default function EditUserForm({
                     id="emailVerified"
                     name="emailVerified"
                     label="Verified"
+                    aria-label="Email Verified"
                   />
                 )
               }
@@ -354,6 +358,7 @@ export default function EditUserForm({
                     id="phoneNumberVerified"
                     name="phoneNumberVerified"
                     label="Verified"
+                    aria-label="Phone Number Verified"
                     disabled={!form.watch('phoneNumber')}
                   />
                 )

dashboard/src/components/users/UsersBody/UsersBody.tsx

@@ -151,7 +151,7 @@ export default function UsersBody({ users, onSubmit }: UsersBodyProps) {
       updateUserMutationPromise,
       {
         loading: `Updating user's settings...`,
-        success: 'User settings updated successfully.',
+        success: 'User settings have been updated successfully.',
         error: getServerError(
           `An error occurred while trying to update this user's settings.`,
         ),

dashboard/src/components/workspace/WorkspaceApps.tsx

@@ -1,21 +1,31 @@
-import { useCurrentWorkspaceAndApplication } from '@/hooks/useCurrentWorkspaceAndApplication';
+import RetryableErrorBoundary from '@/components/common/RetryableErrorBoundary';
-import Status, { StatusEnum } from '@/ui/Status';
+import { useCurrentWorkspaceAndProject } from '@/hooks/v2/useCurrentWorkspaceAndProject';
+import ActivityIndicator from '@/ui/v2/ActivityIndicator';
 import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
+import Chip from '@/ui/v2/Chip';
 import Divider from '@/ui/v2/Divider';
 import PlusCircleIcon from '@/ui/v2/icons/PlusCircleIcon';
 import List from '@/ui/v2/List';
 import { ListItem } from '@/ui/v2/ListItem';
 import Text from '@/ui/v2/Text';
+import { formatDistanceToNowStrict, parseISO } from 'date-fns';
 import Image from 'next/image';
 import NavLink from 'next/link';
 import { Fragment } from 'react';
 
 function AllWorkspaceApps() {
-  const { currentWorkspace } = useCurrentWorkspaceAndApplication();
+  const { currentWorkspace, loading, error } = useCurrentWorkspaceAndProject();
-  const noApplications = currentWorkspace?.applications.length === 0;
 
-  if (noApplications) {
+  if (loading) {
+    return <ActivityIndicator label="Loading projects..." delay={1000} />;
+  }
+
+  if (error) {
+    throw error;
+  }
+
+  if (currentWorkspace?.projects?.length === 0) {
     return (
       <Box className="flex flex-row border-y py-4">
         <Text className="text-xs" color="secondary">
@@ -29,25 +39,50 @@ function AllWorkspaceApps() {
     <List>
       <Divider component="li" />
 
-      {currentWorkspace?.applications.map((app) => (
+      {currentWorkspace?.projects.map((project) => (
-        <Fragment key={app.id}>
+        <Fragment key={project.id}>
           <ListItem.Root>
-            <NavLink href={`${currentWorkspace?.slug}/${app.slug}`} passHref>
+            <NavLink
-              <ListItem.Button className="grid grid-flow-col justify-between gap-2">
+              href={`${currentWorkspace?.slug}/${project.slug}`}
-                <div className="grid grid-flow-col items-center gap-2">
+              passHref
-                  <div className="h-8 w-8 overflow-hidden rounded-lg">
+            >
-                    <Image
+              <ListItem.Button className="grid grid-flow-col items-center justify-between gap-2">
-                      src="/logos/new.svg"
+                <div className="grid grid-flow-col items-center justify-start gap-2">
-                      alt="Nhost Logo"
+                  <ListItem.Avatar>
-                      width={32}
+                    <div className="h-8 w-8 overflow-hidden rounded-lg">
-                      height={32}
+                      <Image
-                    />
+                        src="/logos/new.svg"
-                  </div>
+                        alt="Nhost Logo"
+                        width={32}
+                        height={32}
+                      />
+                    </div>
+                  </ListItem.Avatar>
 
-                  <Text className="font-medium">{app.name}</Text>
+                  <ListItem.Text
+                    primary={project.name}
+                    secondary={
+                      project.creator ? (
+                        <span>
+                          {`Created by ${
+                            project.creator.displayName || project.creator.email
+                          } ${formatDistanceToNowStrict(
+                            parseISO(project.createdAt),
+                          )} ago`}
+                        </span>
+                      ) : undefined
+                    }
+                    secondaryTypographyProps={{
+                      className: 'text-xs',
+                    }}
+                  />
                 </div>
 
-                <Status status={StatusEnum.Plan}>{app.plan.name}</Status>
+                <Chip
+                  size="small"
+                  label={project.plan.isFree ? 'Starter' : 'Pro'}
+                  color={project.plan.isFree ? 'default' : 'primary'}
+                />
               </ListItem.Button>
             </NavLink>
           </ListItem.Root>
@@ -59,30 +94,35 @@ function AllWorkspaceApps() {
   );
 }
 export default function WorkspaceApps() {
-  const { currentWorkspace } = useCurrentWorkspaceAndApplication();
+  const { currentWorkspace, loading } = useCurrentWorkspaceAndProject();
 
   return (
     <div className="mt-9">
       <div className="mx-auto max-w-3xl font-display">
-        <div className="mb-4 flex flex-row place-content-between">
+        <div className="mb-4 grid grid-flow-col items-center justify-between gap-2">
           <Text className="text-lg font-medium">Projects</Text>
-          <NavLink
+
-            href={{
+          {!loading && (
-              pathname: '/new',
+            <NavLink
-              query: { workspace: currentWorkspace.slug },
+              href={{
-            }}
+                pathname: '/new',
-          >
+                query: { workspace: currentWorkspace?.slug },
-            <Button
+              }}
-              variant="outlined"
-              color="secondary"
-              startIcon={<PlusCircleIcon />}
             >
-              New Project
+              <Button
-            </Button>
+                variant="outlined"
-          </NavLink>
+                color="secondary"
+                startIcon={<PlusCircleIcon />}
+              >
+                New Project
+              </Button>
+            </NavLink>
+          )}
         </div>
 
-        <AllWorkspaceApps />
+        <RetryableErrorBoundary errorMessageProps={{ className: 'px-0' }}>
+          <AllWorkspaceApps />
+        </RetryableErrorBoundary>
       </div>
     </div>
   );

dashboard/src/gql/app/getProjectMetrics.gql

@@ -0,0 +1,37 @@
+query GetProjectMetrics(
+  $appId: String!
+  $subdomain: String!
+  $from: Timestamp
+  $to: Timestamp
+) {
+  logsVolume: getLogsVolume(appID: $appId, from: $from, to: $to) {
+    value
+  }
+  cpuSecondsUsage: getCPUSecondsUsage(appID: $appId, from: $from, to: $to) {
+    value
+  }
+  functionInvocations: getFunctionsInvocations(
+    appID: $appId
+    from: $from
+    to: $to
+  ) {
+    value
+  }
+  postgresVolumeCapacity: getPostgresVolumeCapacity(appID: $appId) {
+    value
+  }
+  postgresVolumeUsage: getPostgresVolumeUsage(appID: $appId) {
+    value
+  }
+  totalRequests: getTotalRequests(appID: $appId, from: $from, to: $to) {
+    value
+  }
+  egressVolume: getEgressVolume(
+    appID: $appId
+    subdomain: $subdomain
+    from: $from
+    to: $to
+  ) {
+    value
+  }
+}

dashboard/src/gql/app/getWorkspaceAndProject.graphql

@@ -0,0 +1,26 @@
+fragment Workspace on workspaces {
+  id
+  name
+  slug
+  workspaceMembers {
+    id
+    user {
+      id
+      email
+      displayName
+    }
+    type
+  }
+  projects: apps {
+    ...Project
+  }
+}
+
+query GetWorkspaceAndProject($workspaceSlug: String!, $projectSlug: String) {
+  workspaces(where: { slug: { _eq: $workspaceSlug } }) {
+    ...Workspace
+  }
+  projects: apps(where: { slug: { _eq: $projectSlug } }) {
+    ...Project
+  }
+}

dashboard/src/gql/fragments/project.gql

@@ -0,0 +1,59 @@
+fragment Project on apps {
+  id
+  slug
+  name
+  repositoryProductionBranch
+  subdomain
+  isProvisioned
+  createdAt
+  desiredState
+  nhostBaseFolder
+  providersUpdated
+  config(resolve: true) {
+    hasura {
+      adminSecret
+    }
+  }
+  featureFlags {
+    description
+    id
+    name
+    value
+  }
+  appStates(order_by: { createdAt: desc }, limit: 1) {
+    id
+    appId
+    message
+    stateId
+    createdAt
+  }
+  region {
+    id
+    countryCode
+    awsName
+    city
+  }
+  plan {
+    id
+    name
+    isFree
+  }
+  githubRepository {
+    fullName
+  }
+  deployments(limit: 4, order_by: { deploymentEndedAt: desc }) {
+    id
+    commitSHA
+    commitMessage
+    commitUserName
+    deploymentStartedAt
+    deploymentEndedAt
+    commitUserAvatarUrl
+    deploymentStatus
+  }
+  creator {
+    id
+    email
+    displayName
+  }
+}

dashboard/src/gql/user/getOneUser.gql

@@ -1,58 +1,3 @@
-fragment Project on apps {
-  id
-  slug
-  name
-  repositoryProductionBranch
-  subdomain
-  isProvisioned
-  createdAt
-  desiredState
-  nhostBaseFolder
-  providersUpdated
-  config(resolve: true) {
-    hasura {
-      adminSecret
-    }
-  }
-  featureFlags {
-    description
-    id
-    name
-    value
-  }
-  appStates(order_by: { createdAt: desc }, limit: 1) {
-    id
-    appId
-    message
-    stateId
-    createdAt
-  }
-  region {
-    id
-    countryCode
-    awsName
-    city
-  }
-  plan {
-    id
-    name
-    isFree
-  }
-  githubRepository {
-    fullName
-  }
-  deployments(limit: 4, order_by: { deploymentEndedAt: desc }) {
-    id
-    commitSHA
-    commitMessage
-    commitUserName
-    deploymentStartedAt
-    deploymentEndedAt
-    commitUserAvatarUrl
-    deploymentStatus
-  }
-}
-
 query getOneUser($userId: uuid!) {
   user(id: $userId) {
     id

dashboard/src/hooks/useApplicationState.tsx

@@ -5,23 +5,29 @@ import { useCurrentWorkspaceAndApplication } from './useCurrentWorkspaceAndAppli
  * This hook returns the current application state. If the application state
  * has not been filled, it returns an Empty application status.
  */
-export default function useApplicationState(): ApplicationStatus {
+export default function useApplicationState(): {
+  state: ApplicationStatus;
+  message?: string;
+} {
   const { currentApplication } = useCurrentWorkspaceAndApplication();
   const noApplication = !currentApplication;
 
   if (noApplication) {
-    return ApplicationStatus.Empty;
+    return { state: ApplicationStatus.Empty };
   }
 
   const emptyApplicationStates = !currentApplication.appStates;
 
   if (noApplication || emptyApplicationStates) {
-    return ApplicationStatus.Empty;
+    return { state: ApplicationStatus.Empty };
   }
 
   if (currentApplication.appStates?.length === 0) {
-    return ApplicationStatus.Empty;
+    return { state: ApplicationStatus.Empty };
   }
 
-  return currentApplication.appStates[0].stateId;
+  return {
+    state: currentApplication.appStates[0].stateId,
+    message: currentApplication.appStates[0].message,
+  };
 }

dashboard/src/hooks/useCheckProvisioning.tsx

@@ -39,6 +39,8 @@ export function useCheckProvisioning() {
 
   const memoizedUpdateCache = useCallback(updateOwnCache, [client]);
 
+  const currentApplicationId = currentApplication?.id;
+
   useEffect(() => {
     startPolling(2000);
   }, [startPolling]);
@@ -84,7 +86,7 @@ export function useCheckProvisioning() {
         createdAt: data.app.appStates[0].createdAt,
       });
       discordAnnounce(
-        `Application ${currentApplication.id} errored after provisioning: ${data.app.appStates[0].message}`,
+        `Application ${currentApplicationId} errored after provisioning: ${data.app.appStates[0].message}`,
       );
       stopPolling();
       memoizedUpdateCache();
@@ -93,7 +95,7 @@ export function useCheckProvisioning() {
     data,
     stopPolling,
     memoizedUpdateCache,
-    currentApplication.id,
+    currentApplicationId,
     currentApplicationState.state,
   ]);
 

dashboard/src/hooks/useNavigationVisible.tsx

@@ -9,7 +9,7 @@ import usePreviousApplicationState from './usePreviousApplicationStates';
  */
 export function useNavigationVisible() {
   const { currentApplication } = useCurrentWorkspaceAndApplication();
-  const applicationState = useApplicationState();
+  const { state } = useApplicationState();
   const previousApplicationState = usePreviousApplicationState();
 
   const router = useRouter();
@@ -39,14 +39,14 @@ export function useNavigationVisible() {
   }
 
   if (
-    applicationState === ApplicationStatus.Live ||
+    state === ApplicationStatus.Live ||
-    applicationState === ApplicationStatus.Updating
+    state === ApplicationStatus.Updating
   ) {
     return true;
   }
 
   if (
-    applicationState === ApplicationStatus.Errored &&
+    state === ApplicationStatus.Errored &&
     previousApplicationState === ApplicationStatus.Updating
   ) {
     return true;

dashboard/src/hooks/v2/useCurrentWorkspaceAndProject/index.ts

@@ -0,0 +1 @@
+export { default as useCurrentWorkspaceAndProject } from './useCurrentWorkspaceAndProject';

dashboard/src/hooks/v2/useCurrentWorkspaceAndProject/useCurrentWorkspaceAndProject.ts

@@ -0,0 +1,115 @@
+import useIsPlatform from '@/hooks/common/useIsPlatform';
+import type { Project, Workspace } from '@/types/application';
+import { ApplicationStatus } from '@/types/application';
+import type { GetWorkspaceAndProjectQueryHookResult } from '@/utils/__generated__/graphql';
+import { useGetWorkspaceAndProjectQuery } from '@/utils/__generated__/graphql';
+import { getHasuraAdminSecret } from '@/utils/env';
+import type { QueryHookOptions } from '@apollo/client';
+import { useRouter } from 'next/router';
+
+export interface UseCurrentWorkspaceAndProjectOptions {
+  /**
+   * The fetch policy to use.
+   *
+   * @default 'cache-first'
+   */
+  fetchPolicy?: QueryHookOptions['fetchPolicy'];
+}
+
+export interface UseCurrentWorkspaceAndProjectReturnType {
+  /**
+   * The current workspace.
+   */
+  currentWorkspace: Workspace;
+  /**
+   * The current project.
+   */
+  currentProject: Project;
+  /**
+   * Whether the query is loading.
+   */
+  loading?: GetWorkspaceAndProjectQueryHookResult['loading'];
+  /**
+   * The error if any.
+   */
+  error?: GetWorkspaceAndProjectQueryHookResult['error'];
+}
+
+export default function useCurrentWorkspaceAndProject(
+  options?: UseCurrentWorkspaceAndProjectOptions,
+): UseCurrentWorkspaceAndProjectReturnType {
+  const isPlatform = useIsPlatform();
+
+  const {
+    query: { workspaceSlug, appSlug },
+    isReady,
+  } = useRouter();
+
+  const { data, loading, error } = useGetWorkspaceAndProjectQuery({
+    variables: {
+      workspaceSlug: (workspaceSlug as string) || '',
+      projectSlug: (appSlug as string) || '',
+    },
+    fetchPolicy: options?.fetchPolicy || 'cache-first',
+    skip: !isPlatform || !isReady || !workspaceSlug,
+  });
+
+  if (!isPlatform) {
+    const localProject: Project = {
+      id: 'local',
+      slug: 'local',
+      name: 'local',
+      appStates: [
+        {
+          id: 'local',
+          appId: 'local',
+          stateId: ApplicationStatus.Live,
+          createdAt: new Date().toISOString(),
+        },
+      ],
+      deployments: [],
+      subdomain: 'local',
+      region: {
+        id: null,
+        countryCode: null,
+        city: null,
+        awsName: null,
+      },
+      isProvisioned: true,
+      createdAt: new Date().toISOString(),
+      desiredState: ApplicationStatus.Live,
+      featureFlags: [],
+      providersUpdated: true,
+      repositoryProductionBranch: null,
+      nhostBaseFolder: null,
+      plan: null,
+      config: {
+        hasura: {
+          adminSecret: getHasuraAdminSecret(),
+        },
+      },
+    };
+
+    return {
+      currentWorkspace: {
+        id: 'local',
+        slug: 'local',
+        name: 'local',
+        projects: [localProject],
+        workspaceMembers: [],
+      },
+      currentProject: localProject,
+      loading: false,
+    };
+  }
+
+  const [currentWorkspace] = data?.workspaces || [];
+  const [currentProject] = data?.projects || [];
+
+  return {
+    currentWorkspace,
+    currentProject,
+    loading: data ? false : loading,
+    error,
+  };
+}

dashboard/src/pages/[workspaceSlug]/[appSlug]/backups.tsx

@@ -11,8 +11,8 @@ import Box from '@/ui/v2/Box';
 import Button from '@/ui/v2/Button';
 import Chip from '@/ui/v2/Chip';
 import Text from '@/ui/v2/Text';
+import { prettifySize } from '@/utils/common/prettifySize';
 import { formatDistanceStrict, formatISO9075 } from 'date-fns';
-import prettysize from 'prettysize';
 import type { ReactElement } from 'react';
 import { useState } from 'react';
 
@@ -58,13 +58,13 @@ function BackupRow({ backup }: any) {
         />
       )}
       <Box className="flex flex-row place-content-between py-3">
-        <Text className="w-drop self-center font-medium text-xs">
+        <Text className="w-drop self-center text-xs font-medium">
           {formatISO9075(new Date(createdAt))}
         </Text>
-        <Text className="w-drop self-center font-medium text-xs">
+        <Text className="w-drop self-center text-xs font-medium">
-          {prettysize(size)}
+          {prettifySize(size)}
         </Text>
-        <Text className="w-drop self-center font-medium text-xs">
+        <Text className="w-drop self-center text-xs font-medium">
           {formatDistanceStrict(new Date(createdAt), new Date(), {
             addSuffix: true,
           })}
@@ -108,9 +108,9 @@ function BackupsTable() {
   return (
     <>
       <Box className="flex flex-row place-content-between border-b-1 py-2">
-        <Text className="w-drop font-bold text-xs">Backup</Text>
+        <Text className="w-drop text-xs font-bold">Backup</Text>
-        <Text className="w-drop font-bold text-xs">Size</Text>
+        <Text className="w-drop text-xs font-bold">Size</Text>
-        <Text className="w-drop font-bold text-xs">Backed Up</Text>
+        <Text className="w-drop text-xs font-bold">Backed Up</Text>
         <div className="w-20" />
       </Box>
       <Box className="border-b-1">
@@ -133,7 +133,7 @@ function BackupsTable() {
 function SectionContainer({ title }: any) {
   return (
     <div className="mt-6 w-full">
-      <Text className="font-medium text-lg">{title}</Text>
+      <Text className="text-lg font-medium">{title}</Text>
       <Text className="font-normal">
         The database backup includes database schema, database data and Hasura
         metadata. It does not include the actual files in Storage.

dashboard/src/pages/[workspaceSlug]/[appSlug]/database/browser/[dataSourceSlug]/index.tsx

@@ -16,9 +16,7 @@ export default function DataBrowserDatabaseDetailsPage() {
         description={
           <span>
             Database{' '}
-            <InlineCode className="bg-gray-200 bg-opacity-80 px-1.5 text-sm">
+            <InlineCode className="px-1.5 text-sm">{dataSourceSlug}</InlineCode>{' '}
-              {dataSourceSlug}
-            </InlineCode>{' '}
             does not exist.
           </span>
         }

dashboard/src/pages/[workspaceSlug]/[appSlug]/index.tsx

@@ -15,7 +15,7 @@ import type { ReactElement } from 'react';
 
 export default function AppIndexPage() {
   const isPlatform = useIsPlatform();
-  const applicationState = useApplicationState();
+  const { state } = useApplicationState();
   const { currentApplication } = useCurrentWorkspaceAndApplication();
 
   if (!isPlatform) {
@@ -26,7 +26,7 @@ export default function AppIndexPage() {
     return <ApplicationMigrating />;
   }
 
-  switch (applicationState) {
+  switch (state) {
     case ApplicationStatus.Empty:
       return <ApplicationProvisioning />;
     case ApplicationStatus.Provisioning:

dashboard/src/pages/[workspaceSlug]/[appSlug]/logs/index.tsx

@@ -134,9 +134,5 @@ export default function LogsPage() {
 }
 
 LogsPage.getLayout = function getLayout(page: ReactElement) {
-  return (
+  return <ProjectLayout>{page}</ProjectLayout>;
-    <ProjectLayout mainContainerProps={{ className: 'bg-gray-50' }}>
-      {page}
-    </ProjectLayout>
-  );
 };

dashboard/src/types/application.ts

@@ -6,6 +6,7 @@ import type {
   PermissionVariableFragment,
   ProjectFragment,
   SecretFragment,
+  WorkspaceFragment,
 } from '@/utils/__generated__/graphql';
 
 /**
@@ -62,6 +63,7 @@ export type FeatureFlag = {
   value: string;
 };
 
+export type Workspace = WorkspaceFragment;
 export type Project = ProjectFragment;
 
 export interface PermissionVariable extends PermissionVariableFragment {

dashboard/src/utils/__generated__/graphql.ts

@@ -27,7 +27,6 @@ export type Scalars = {
   citext: any;
   float64: any;
   jsonb: any;
-  labels: any;
   smallint: any;
   timestamp: any;
   timestamptz: any;
@@ -1691,14 +1690,7 @@ export type Log = {
 
 export type Metrics = {
   __typename?: 'Metrics';
-  rows: Array<RowMetric>;
+  value: Scalars['float64'];
-};
-
-export type RowMetric = {
-  __typename?: 'RowMetric';
-  labels?: Maybe<Scalars['labels']>;
-  time: Scalars['Timestamp'];
-  value?: Maybe<Scalars['float64']>;
 };
 
 export type StatsLiveApps = {
@@ -9233,6 +9225,7 @@ export type Mutation_Root = {
   insert_regions_one?: Maybe<Regions>;
   migrateRDSToPostgres: Scalars['Boolean'];
   pauseInactiveApps: Array<Scalars['String']>;
+  replaceConfig: ConfigConfig;
   resetPostgresPassword: Scalars['Boolean'];
   restoreApplicationDatabase: Scalars['Boolean'];
   /** update single row of the table: "apps" */
@@ -10250,6 +10243,13 @@ export type Mutation_RootMigrateRdsToPostgresArgs = {
 };
 
 
+/** mutation root */
+export type Mutation_RootReplaceConfigArgs = {
+  appID: Scalars['uuid'];
+  config: ConfigConfigInsertInput;
+};
+
+
 /** mutation root */
 export type Mutation_RootResetPostgresPasswordArgs = {
   appID: Scalars['String'];
@@ -11428,6 +11428,7 @@ export type Plans = {
   featureBackupEnabled: Scalars['Boolean'];
   featureCustomDomainsEnabled: Scalars['Boolean'];
   featureCustomEmailTemplatesEnabled: Scalars['Boolean'];
+  featureCustomResources: Scalars['Boolean'];
   /** Weather or not to deploy email templates for git deployments */
   featureDeployEmailTemplates: Scalars['Boolean'];
   /** Function execution timeout in seconds */
@@ -11521,6 +11522,7 @@ export type Plans_Bool_Exp = {
   featureBackupEnabled?: InputMaybe<Boolean_Comparison_Exp>;
   featureCustomDomainsEnabled?: InputMaybe<Boolean_Comparison_Exp>;
   featureCustomEmailTemplatesEnabled?: InputMaybe<Boolean_Comparison_Exp>;
+  featureCustomResources?: InputMaybe<Boolean_Comparison_Exp>;
   featureDeployEmailTemplates?: InputMaybe<Boolean_Comparison_Exp>;
   featureFunctionExecutionTimeout?: InputMaybe<Int_Comparison_Exp>;
   featureMaxDbSize?: InputMaybe<Int_Comparison_Exp>;
@@ -11562,6 +11564,7 @@ export type Plans_Insert_Input = {
   featureBackupEnabled?: InputMaybe<Scalars['Boolean']>;
   featureCustomDomainsEnabled?: InputMaybe<Scalars['Boolean']>;
   featureCustomEmailTemplatesEnabled?: InputMaybe<Scalars['Boolean']>;
+  featureCustomResources?: InputMaybe<Scalars['Boolean']>;
   /** Weather or not to deploy email templates for git deployments */
   featureDeployEmailTemplates?: InputMaybe<Scalars['Boolean']>;
   /** Function execution timeout in seconds */
@@ -11647,6 +11650,7 @@ export type Plans_Order_By = {
   featureBackupEnabled?: InputMaybe<Order_By>;
   featureCustomDomainsEnabled?: InputMaybe<Order_By>;
   featureCustomEmailTemplatesEnabled?: InputMaybe<Order_By>;
+  featureCustomResources?: InputMaybe<Order_By>;
   featureDeployEmailTemplates?: InputMaybe<Order_By>;
   featureFunctionExecutionTimeout?: InputMaybe<Order_By>;
   featureMaxDbSize?: InputMaybe<Order_By>;
@@ -11679,6 +11683,8 @@ export enum Plans_Select_Column {
   /** column name */
   FeatureCustomEmailTemplatesEnabled = 'featureCustomEmailTemplatesEnabled',
   /** column name */
+  FeatureCustomResources = 'featureCustomResources',
+  /** column name */
   FeatureDeployEmailTemplates = 'featureDeployEmailTemplates',
   /** column name */
   FeatureFunctionExecutionTimeout = 'featureFunctionExecutionTimeout',
@@ -11714,6 +11720,7 @@ export type Plans_Set_Input = {
   featureBackupEnabled?: InputMaybe<Scalars['Boolean']>;
   featureCustomDomainsEnabled?: InputMaybe<Scalars['Boolean']>;
   featureCustomEmailTemplatesEnabled?: InputMaybe<Scalars['Boolean']>;
+  featureCustomResources?: InputMaybe<Scalars['Boolean']>;
   /** Weather or not to deploy email templates for git deployments */
   featureDeployEmailTemplates?: InputMaybe<Scalars['Boolean']>;
   /** Function execution timeout in seconds */
@@ -11786,6 +11793,7 @@ export type Plans_Stream_Cursor_Value_Input = {
   featureBackupEnabled?: InputMaybe<Scalars['Boolean']>;
   featureCustomDomainsEnabled?: InputMaybe<Scalars['Boolean']>;
   featureCustomEmailTemplatesEnabled?: InputMaybe<Scalars['Boolean']>;
+  featureCustomResources?: InputMaybe<Scalars['Boolean']>;
   /** Weather or not to deploy email templates for git deployments */
   featureDeployEmailTemplates?: InputMaybe<Scalars['Boolean']>;
   /** Function execution timeout in seconds */
@@ -11829,6 +11837,8 @@ export enum Plans_Update_Column {
   /** column name */
   FeatureCustomEmailTemplatesEnabled = 'featureCustomEmailTemplatesEnabled',
   /** column name */
+  FeatureCustomResources = 'featureCustomResources',
+  /** column name */
   FeatureDeployEmailTemplates = 'featureDeployEmailTemplates',
   /** column name */
   FeatureFunctionExecutionTimeout = 'featureFunctionExecutionTimeout',
@@ -12037,41 +12047,13 @@ export type Query_Root = {
   files: Array<Files>;
   /** fetch aggregated fields from the table: "storage.files" */
   filesAggregate: Files_Aggregate;
-  /**
+  getCPUSecondsUsage: Metrics;
-   * Returns CPU metrics for a given application.
+  getEgressVolume: Metrics;
-   * If `from` and `to` are not provided, they default to an hour ago and now, respectively.
+  getFunctionsInvocations: Metrics;
-   *
+  getLogsVolume: Metrics;
-   * CPU usage is calculated as the average CPU usage over the period of 1m.
-   *
-   * Unit returned is millicores.
-   */
-  getCPUMetrics: Metrics;
-  /**
-   * Returns memory metrics for a given application.
-   * If `from` and `to` are not provided, they default to an hour ago and now, respectively.
-   *
-   * Memory usage is returned in MiB.
-   */
-  getMemoryMetrics: Metrics;
-  /**
-   * Returns disk capacity for the volume used by postgres to store the database.
-   * If `from` and `to` are not provided, they default to an hour ago and now, respectively.
-   *
-   * Disk usage is returned in MiB.
-   */
   getPostgresVolumeCapacity: Metrics;
-  /**
-   * Returns disk usage for the volume used by postgres to store the database.
-   * If `from` and `to` are not provided, they default to an hour ago and now, respectively.
-   *
-   * Disk usage is returned in MiB.
-   */
   getPostgresVolumeUsage: Metrics;
-  /**
+  getTotalRequests: Metrics;
-   * Return requests per second for a given application by service.
-   * If `from` and `to` are not provided, they default to an hour ago and now, respectively.
-   */
-  getRequestsPerSecond: Metrics;
   /** fetch data from the table: "github_app_installations" using primary key columns */
   githubAppInstallation?: Maybe<GithubAppInstallations>;
   /** fetch data from the table: "github_app_installations" */
@@ -12643,14 +12625,29 @@ export type Query_RootFilesAggregateArgs = {
 };
 
 
-export type Query_RootGetCpuMetricsArgs = {
+export type Query_RootGetCpuSecondsUsageArgs = {
   appID: Scalars['String'];
   from?: InputMaybe<Scalars['Timestamp']>;
   to?: InputMaybe<Scalars['Timestamp']>;
 };
 
 
-export type Query_RootGetMemoryMetricsArgs = {
+export type Query_RootGetEgressVolumeArgs = {
+  appID: Scalars['String'];
+  from?: InputMaybe<Scalars['Timestamp']>;
+  subdomain: Scalars['String'];
+  to?: InputMaybe<Scalars['Timestamp']>;
+};
+
+
+export type Query_RootGetFunctionsInvocationsArgs = {
+  appID: Scalars['String'];
+  from?: InputMaybe<Scalars['Timestamp']>;
+  to?: InputMaybe<Scalars['Timestamp']>;
+};
+
+
+export type Query_RootGetLogsVolumeArgs = {
   appID: Scalars['String'];
   from?: InputMaybe<Scalars['Timestamp']>;
   to?: InputMaybe<Scalars['Timestamp']>;
@@ -12659,19 +12656,17 @@ export type Query_RootGetMemoryMetricsArgs = {
 
 export type Query_RootGetPostgresVolumeCapacityArgs = {
   appID: Scalars['String'];
-  from?: InputMaybe<Scalars['Timestamp']>;
+  t?: InputMaybe<Scalars['Timestamp']>;
-  to?: InputMaybe<Scalars['Timestamp']>;
 };
 
 
 export type Query_RootGetPostgresVolumeUsageArgs = {
   appID: Scalars['String'];
-  from?: InputMaybe<Scalars['Timestamp']>;
+  t?: InputMaybe<Scalars['Timestamp']>;
-  to?: InputMaybe<Scalars['Timestamp']>;
 };
 
 
-export type Query_RootGetRequestsPerSecondArgs = {
+export type Query_RootGetTotalRequestsArgs = {
   appID: Scalars['String'];
   from?: InputMaybe<Scalars['Timestamp']>;
   to?: InputMaybe<Scalars['Timestamp']>;
@@ -16558,11 +16553,31 @@ export type GetAppProvisionStatusQueryVariables = Exact<{
 
 export type GetAppProvisionStatusQuery = { __typename?: 'query_root', apps: Array<{ __typename?: 'apps', id: any, isProvisioned: boolean, subdomain: string, createdAt: any }> };
 
+export type GetProjectMetricsQueryVariables = Exact<{
+  appId: Scalars['String'];
+  subdomain: Scalars['String'];
+  from?: InputMaybe<Scalars['Timestamp']>;
+  to?: InputMaybe<Scalars['Timestamp']>;
+}>;
+
+
+export type GetProjectMetricsQuery = { __typename?: 'query_root', logsVolume: { __typename?: 'Metrics', value: any }, cpuSecondsUsage: { __typename?: 'Metrics', value: any }, functionInvocations: { __typename?: 'Metrics', value: any }, postgresVolumeCapacity: { __typename?: 'Metrics', value: any }, postgresVolumeUsage: { __typename?: 'Metrics', value: any }, totalRequests: { __typename?: 'Metrics', value: any }, egressVolume: { __typename?: 'Metrics', value: any } };
+
 export type GetRemoteAppRolesQueryVariables = Exact<{ [key: string]: never; }>;
 
 
 export type GetRemoteAppRolesQuery = { __typename?: 'query_root', authRoles: Array<{ __typename?: 'authRoles', role: string }> };
 
+export type WorkspaceFragment = { __typename?: 'workspaces', id: any, name: string, slug: string, workspaceMembers: Array<{ __typename?: 'workspaceMembers', id: any, type: string, user: { __typename?: 'users', id: any, email?: any | null, displayName: string } }>, projects: Array<{ __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, isProvisioned: boolean, createdAt: any, desiredState: number, nhostBaseFolder: string, providersUpdated?: boolean | null, config?: { __typename?: 'ConfigConfig', hasura: { __typename?: 'ConfigHasura', adminSecret: string } } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, awsName: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, isFree: boolean }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }>, creator?: { __typename?: 'users', id: any, email?: any | null, displayName: string } | null }> };
+
+export type GetWorkspaceAndProjectQueryVariables = Exact<{
+  workspaceSlug: Scalars['String'];
+  projectSlug?: InputMaybe<Scalars['String']>;
+}>;
+
+
+export type GetWorkspaceAndProjectQuery = { __typename?: 'query_root', workspaces: Array<{ __typename?: 'workspaces', id: any, name: string, slug: string, workspaceMembers: Array<{ __typename?: 'workspaceMembers', id: any, type: string, user: { __typename?: 'users', id: any, email?: any | null, displayName: string } }>, projects: Array<{ __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, isProvisioned: boolean, createdAt: any, desiredState: number, nhostBaseFolder: string, providersUpdated?: boolean | null, config?: { __typename?: 'ConfigConfig', hasura: { __typename?: 'ConfigHasura', adminSecret: string } } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, awsName: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, isFree: boolean }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }>, creator?: { __typename?: 'users', id: any, email?: any | null, displayName: string } | null }> }>, projects: Array<{ __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, isProvisioned: boolean, createdAt: any, desiredState: number, nhostBaseFolder: string, providersUpdated?: boolean | null, config?: { __typename?: 'ConfigConfig', hasura: { __typename?: 'ConfigHasura', adminSecret: string } } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, awsName: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, isFree: boolean }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }>, creator?: { __typename?: 'users', id: any, email?: any | null, displayName: string } | null }> };
+
 export type InsertApplicationMutationVariables = Exact<{
   app: Apps_Insert_Input;
 }>;
@@ -16790,6 +16805,8 @@ export type GetFilesAggregateQueryVariables = Exact<{
 
 export type GetFilesAggregateQuery = { __typename?: 'query_root', filesAggregate: { __typename?: 'files_aggregate', aggregate?: { __typename?: 'files_aggregate_fields', count: number } | null } };
 
+export type ProjectFragment = { __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, isProvisioned: boolean, createdAt: any, desiredState: number, nhostBaseFolder: string, providersUpdated?: boolean | null, config?: { __typename?: 'ConfigConfig', hasura: { __typename?: 'ConfigHasura', adminSecret: string } } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, awsName: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, isFree: boolean }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }>, creator?: { __typename?: 'users', id: any, email?: any | null, displayName: string } | null };
+
 export type GithubRepositoryFragment = { __typename?: 'githubRepositories', id: any, name: string, fullName: string, private: boolean, githubAppInstallation: { __typename?: 'githubAppInstallations', id: any, accountLogin?: string | null, accountType?: string | null, accountAvatarUrl?: string | null } };
 
 export type GetGithubRepositoriesQueryVariables = Exact<{ [key: string]: never; }>;
@@ -17014,14 +17031,12 @@ export type GetFreeAndActiveProjectsQueryVariables = Exact<{
 
 export type GetFreeAndActiveProjectsQuery = { __typename?: 'query_root', freeAndActiveProjects: Array<{ __typename?: 'apps', id: any }> };
 
-export type ProjectFragment = { __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, isProvisioned: boolean, createdAt: any, desiredState: number, nhostBaseFolder: string, providersUpdated?: boolean | null, config?: { __typename?: 'ConfigConfig', hasura: { __typename?: 'ConfigHasura', adminSecret: string } } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, awsName: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, isFree: boolean }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }> };
-
 export type GetOneUserQueryVariables = Exact<{
   userId: Scalars['uuid'];
 }>;
 
 
-export type GetOneUserQuery = { __typename?: 'query_root', user?: { __typename?: 'users', id: any, displayName: string, avatarUrl: string, workspaceMembers: Array<{ __typename?: 'workspaceMembers', id: any, userId: any, workspaceId: any, type: string, workspace: { __typename?: 'workspaces', creatorUserId?: any | null, id: any, slug: string, name: string, apps: Array<{ __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, isProvisioned: boolean, createdAt: any, desiredState: number, nhostBaseFolder: string, providersUpdated?: boolean | null, config?: { __typename?: 'ConfigConfig', hasura: { __typename?: 'ConfigHasura', adminSecret: string } } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, awsName: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, isFree: boolean }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }> }> } }> } | null };
+export type GetOneUserQuery = { __typename?: 'query_root', user?: { __typename?: 'users', id: any, displayName: string, avatarUrl: string, workspaceMembers: Array<{ __typename?: 'workspaceMembers', id: any, userId: any, workspaceId: any, type: string, workspace: { __typename?: 'workspaces', creatorUserId?: any | null, id: any, slug: string, name: string, apps: Array<{ __typename?: 'apps', id: any, slug: string, name: string, repositoryProductionBranch: string, subdomain: string, isProvisioned: boolean, createdAt: any, desiredState: number, nhostBaseFolder: string, providersUpdated?: boolean | null, config?: { __typename?: 'ConfigConfig', hasura: { __typename?: 'ConfigHasura', adminSecret: string } } | null, featureFlags: Array<{ __typename?: 'featureFlags', description: string, id: any, name: string, value: string }>, appStates: Array<{ __typename?: 'appStateHistory', id: any, appId: any, message?: string | null, stateId: number, createdAt: any }>, region: { __typename?: 'regions', id: any, countryCode: string, awsName: string, city: string }, plan: { __typename?: 'plans', id: any, name: string, isFree: boolean }, githubRepository?: { __typename?: 'githubRepositories', fullName: string } | null, deployments: Array<{ __typename?: 'deployments', id: any, commitSHA: string, commitMessage?: string | null, commitUserName?: string | null, deploymentStartedAt?: any | null, deploymentEndedAt?: any | null, commitUserAvatarUrl?: string | null, deploymentStatus?: string | null }>, creator?: { __typename?: 'users', id: any, email?: any | null, displayName: string } | null }> } }> } | null };
 
 export type GetUserAllWorkspacesQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -17223,6 +17238,86 @@ export const GetAppByWorkspaceAndNameFragmentDoc = gql`
   }
 }
     `;
+export const ProjectFragmentDoc = gql`
+    fragment Project on apps {
+  id
+  slug
+  name
+  repositoryProductionBranch
+  subdomain
+  isProvisioned
+  createdAt
+  desiredState
+  nhostBaseFolder
+  providersUpdated
+  config(resolve: true) {
+    hasura {
+      adminSecret
+    }
+  }
+  featureFlags {
+    description
+    id
+    name
+    value
+  }
+  appStates(order_by: {createdAt: desc}, limit: 1) {
+    id
+    appId
+    message
+    stateId
+    createdAt
+  }
+  region {
+    id
+    countryCode
+    awsName
+    city
+  }
+  plan {
+    id
+    name
+    isFree
+  }
+  githubRepository {
+    fullName
+  }
+  deployments(limit: 4, order_by: {deploymentEndedAt: desc}) {
+    id
+    commitSHA
+    commitMessage
+    commitUserName
+    deploymentStartedAt
+    deploymentEndedAt
+    commitUserAvatarUrl
+    deploymentStatus
+  }
+  creator {
+    id
+    email
+    displayName
+  }
+}
+    `;
+export const WorkspaceFragmentDoc = gql`
+    fragment Workspace on workspaces {
+  id
+  name
+  slug
+  workspaceMembers {
+    id
+    user {
+      id
+      email
+      displayName
+    }
+    type
+  }
+  projects: apps {
+    ...Project
+  }
+}
+    ${ProjectFragmentDoc}`;
 export const PrefetchNewAppRegionsFragmentDoc = gql`
     fragment PrefetchNewAppRegions on regions {
   id
@@ -17391,62 +17486,6 @@ export const RemoteAppGetUsersFragmentDoc = gql`
   disabled
 }
     `;
-export const ProjectFragmentDoc = gql`
-    fragment Project on apps {
-  id
-  slug
-  name
-  repositoryProductionBranch
-  subdomain
-  isProvisioned
-  createdAt
-  desiredState
-  nhostBaseFolder
-  providersUpdated
-  config(resolve: true) {
-    hasura {
-      adminSecret
-    }
-  }
-  featureFlags {
-    description
-    id
-    name
-    value
-  }
-  appStates(order_by: {createdAt: desc}, limit: 1) {
-    id
-    appId
-    message
-    stateId
-    createdAt
-  }
-  region {
-    id
-    countryCode
-    awsName
-    city
-  }
-  plan {
-    id
-    name
-    isFree
-  }
-  githubRepository {
-    fullName
-  }
-  deployments(limit: 4, order_by: {deploymentEndedAt: desc}) {
-    id
-    commitSHA
-    commitMessage
-    commitUserName
-    deploymentStartedAt
-    deploymentEndedAt
-    commitUserAvatarUrl
-    deploymentStatus
-  }
-}
-    `;
 export const GetWorkspaceMembersWorkspaceMemberFragmentDoc = gql`
     fragment getWorkspaceMembersWorkspaceMember on workspaceMembers {
   id
@@ -17882,6 +17921,74 @@ export type GetAppProvisionStatusQueryResult = Apollo.QueryResult<GetAppProvisio
 export function refetchGetAppProvisionStatusQuery(variables: GetAppProvisionStatusQueryVariables) {
       return { query: GetAppProvisionStatusDocument, variables: variables }
     }
+export const GetProjectMetricsDocument = gql`
+    query GetProjectMetrics($appId: String!, $subdomain: String!, $from: Timestamp, $to: Timestamp) {
+  logsVolume: getLogsVolume(appID: $appId, from: $from, to: $to) {
+    value
+  }
+  cpuSecondsUsage: getCPUSecondsUsage(appID: $appId, from: $from, to: $to) {
+    value
+  }
+  functionInvocations: getFunctionsInvocations(
+    appID: $appId
+    from: $from
+    to: $to
+  ) {
+    value
+  }
+  postgresVolumeCapacity: getPostgresVolumeCapacity(appID: $appId) {
+    value
+  }
+  postgresVolumeUsage: getPostgresVolumeUsage(appID: $appId) {
+    value
+  }
+  totalRequests: getTotalRequests(appID: $appId, from: $from, to: $to) {
+    value
+  }
+  egressVolume: getEgressVolume(
+    appID: $appId
+    subdomain: $subdomain
+    from: $from
+    to: $to
+  ) {
+    value
+  }
+}
+    `;
+
+/**
+ * __useGetProjectMetricsQuery__
+ *
+ * To run a query within a React component, call `useGetProjectMetricsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetProjectMetricsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetProjectMetricsQuery({
+ *   variables: {
+ *      appId: // value for 'appId'
+ *      subdomain: // value for 'subdomain'
+ *      from: // value for 'from'
+ *      to: // value for 'to'
+ *   },
+ * });
+ */
+export function useGetProjectMetricsQuery(baseOptions: Apollo.QueryHookOptions<GetProjectMetricsQuery, GetProjectMetricsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetProjectMetricsQuery, GetProjectMetricsQueryVariables>(GetProjectMetricsDocument, options);
+      }
+export function useGetProjectMetricsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetProjectMetricsQuery, GetProjectMetricsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetProjectMetricsQuery, GetProjectMetricsQueryVariables>(GetProjectMetricsDocument, options);
+        }
+export type GetProjectMetricsQueryHookResult = ReturnType<typeof useGetProjectMetricsQuery>;
+export type GetProjectMetricsLazyQueryHookResult = ReturnType<typeof useGetProjectMetricsLazyQuery>;
+export type GetProjectMetricsQueryResult = Apollo.QueryResult<GetProjectMetricsQuery, GetProjectMetricsQueryVariables>;
+export function refetchGetProjectMetricsQuery(variables: GetProjectMetricsQueryVariables) {
+      return { query: GetProjectMetricsDocument, variables: variables }
+    }
 export const GetRemoteAppRolesDocument = gql`
     query getRemoteAppRoles {
   authRoles {
@@ -17919,6 +18026,49 @@ export type GetRemoteAppRolesQueryResult = Apollo.QueryResult<GetRemoteAppRolesQ
 export function refetchGetRemoteAppRolesQuery(variables?: GetRemoteAppRolesQueryVariables) {
       return { query: GetRemoteAppRolesDocument, variables: variables }
     }
+export const GetWorkspaceAndProjectDocument = gql`
+    query GetWorkspaceAndProject($workspaceSlug: String!, $projectSlug: String) {
+  workspaces(where: {slug: {_eq: $workspaceSlug}}) {
+    ...Workspace
+  }
+  projects: apps(where: {slug: {_eq: $projectSlug}}) {
+    ...Project
+  }
+}
+    ${WorkspaceFragmentDoc}
+${ProjectFragmentDoc}`;
+
+/**
+ * __useGetWorkspaceAndProjectQuery__
+ *
+ * To run a query within a React component, call `useGetWorkspaceAndProjectQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetWorkspaceAndProjectQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetWorkspaceAndProjectQuery({
+ *   variables: {
+ *      workspaceSlug: // value for 'workspaceSlug'
+ *      projectSlug: // value for 'projectSlug'
+ *   },
+ * });
+ */
+export function useGetWorkspaceAndProjectQuery(baseOptions: Apollo.QueryHookOptions<GetWorkspaceAndProjectQuery, GetWorkspaceAndProjectQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<GetWorkspaceAndProjectQuery, GetWorkspaceAndProjectQueryVariables>(GetWorkspaceAndProjectDocument, options);
+      }
+export function useGetWorkspaceAndProjectLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<GetWorkspaceAndProjectQuery, GetWorkspaceAndProjectQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<GetWorkspaceAndProjectQuery, GetWorkspaceAndProjectQueryVariables>(GetWorkspaceAndProjectDocument, options);
+        }
+export type GetWorkspaceAndProjectQueryHookResult = ReturnType<typeof useGetWorkspaceAndProjectQuery>;
+export type GetWorkspaceAndProjectLazyQueryHookResult = ReturnType<typeof useGetWorkspaceAndProjectLazyQuery>;
+export type GetWorkspaceAndProjectQueryResult = Apollo.QueryResult<GetWorkspaceAndProjectQuery, GetWorkspaceAndProjectQueryVariables>;
+export function refetchGetWorkspaceAndProjectQuery(variables: GetWorkspaceAndProjectQueryVariables) {
+      return { query: GetWorkspaceAndProjectDocument, variables: variables }
+    }
 export const InsertApplicationDocument = gql`
     mutation insertApplication($app: apps_insert_input!) {
   insertApp(object: $app) {

dashboard/src/utils/common/prettifyNumber/index.ts

@@ -0,0 +1,2 @@
+export * from './prettifyNumber';
+export { default as prettifyNumber } from './prettifyNumber';

dashboard/src/utils/common/prettifyNumber/prettifyNumber.test.ts

@@ -0,0 +1,79 @@
+import prettifyNumber from './prettifyNumber';
+
+test('should throw an error if multiplier is lower than 0', () => {
+  expect(() => prettifyNumber(1000, { multiplier: -1 })).toThrowError(
+    'Multiplier must be greater than 0',
+  );
+});
+
+test('should return the input value if it is lower than the multiplier', () => {
+  expect(prettifyNumber(980)).toBe('980');
+  expect(prettifyNumber(-980)).toBe('-980');
+  expect(prettifyNumber(1500, { multiplier: 2000 })).toBe('1500');
+  expect(prettifyNumber(-1500, { multiplier: 2000 })).toBe('-1500');
+});
+
+test('should return the converted value', () => {
+  expect(prettifyNumber(1000)).toBe('1k');
+  expect(prettifyNumber(-1000)).toBe('-1k');
+  expect(prettifyNumber(1420)).toBe('1.42k');
+  expect(prettifyNumber(-1420)).toBe('-1.42k');
+  expect(prettifyNumber(54091776)).toBe('54.09M');
+  expect(prettifyNumber(-54091776)).toBe('-54.09M');
+  expect(prettifyNumber(23475400000)).toBe('23.48B');
+  expect(prettifyNumber(-23475400000)).toBe('-23.48B');
+});
+
+test('should return the converted value with custom multiplier', () => {
+  expect(prettifyNumber(1024, { multiplier: 1024 })).toBe('1k');
+  expect(prettifyNumber(1420, { multiplier: 1024 })).toBe('1.39k');
+  expect(prettifyNumber(54091776, { multiplier: 1024 })).toBe('51.59M');
+  expect(prettifyNumber(23475400000, { multiplier: 1024 })).toBe('21.86B');
+});
+
+test('should be able to change the labels', () => {
+  const customLabels = [
+    'Bytes',
+    'KiB',
+    'MiB',
+    'GiB',
+    'TiB',
+    'PiB',
+    'EiB',
+    'ZiB',
+    'YiB',
+  ];
+
+  expect(prettifyNumber(1024, { labels: customLabels, multiplier: 1024 })).toBe(
+    '1KiB',
+  );
+  expect(prettifyNumber(1420, { labels: customLabels, multiplier: 1024 })).toBe(
+    '1.39KiB',
+  );
+  expect(
+    prettifyNumber(54091776, { labels: customLabels, multiplier: 1024 }),
+  ).toBe('51.59MiB');
+  expect(
+    prettifyNumber(23475400000, { labels: customLabels, multiplier: 1024 }),
+  ).toBe('21.86GiB');
+});
+
+test('should be able to change the separator', () => {
+  expect(prettifyNumber(1024, { separator: ' ' })).toBe('1.02 k');
+  expect(prettifyNumber(1420, { separator: ' ' })).toBe('1.42 k');
+  expect(prettifyNumber(54091776, { separator: ' ' })).toBe('54.09 M');
+  expect(prettifyNumber(23475400000, { separator: ' ' })).toBe('23.48 B');
+});
+
+test('should be able to change the number of decimals', () => {
+  expect(prettifyNumber(1024, { numberOfDecimals: 0 })).toBe('1k');
+  expect(prettifyNumber(1420, { numberOfDecimals: 0 })).toBe('1k');
+  expect(prettifyNumber(54091776, { numberOfDecimals: 0 })).toBe('54M');
+  expect(prettifyNumber(23475400000, { numberOfDecimals: 0 })).toBe('23B');
+});
+
+test('should always use the last available label if the value is too large', () => {
+  expect(prettifyNumber(10000000, { labels: ['Bytes', 'KB'] })).toBe('10000KB');
+
+  expect(prettifyNumber(10000, { labels: [] })).toBe('10000');
+});

dashboard/src/utils/common/prettifyNumber/prettifyNumber.ts

@@ -0,0 +1,90 @@
+export interface PrettifyNumberOptions {
+  /**
+   * Multiplier for value. Useful if you want to convert to a different unit.
+   * Must be greater than 0.
+   *
+   * @default 1000
+   */
+  multiplier?: number;
+  /**
+   * Labels used for prettified numbers.
+   *
+   * @default ['','k','M','B','T']
+   */
+  labels?: string[];
+  /**
+   * Maximum number of decimals to use.
+   *
+   * @default 2
+   */
+  numberOfDecimals?: number;
+  /**
+   * Separator between value and label.
+   *
+   * @default ''
+   */
+  separator?: string;
+}
+
+function formatValue(value: number, numberOfDecimals: number) {
+  return value.toLocaleString(undefined, {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: numberOfDecimals,
+    useGrouping: false,
+  });
+}
+
+/**
+ * Prettify a `value`. For every `multiplier` the value will be divided and the
+ * next label will be used.
+ *
+ * @example
+ * ```js
+ * 1000 => '1k' // Given that "k" is the next label
+ * 1000000 => '1M' // Given that "M" is the next label
+ * 1234567 => '1.23M' // Given that "M" is the next label
+ * ```
+ *
+ * @param value - Value to prettify
+ * @param options - Configuration options
+ * @returns Prettified value
+ */
+export default function prettifyNumber(
+  value: number,
+  options?: PrettifyNumberOptions,
+) {
+  const {
+    multiplier = 1000,
+    numberOfDecimals = 2,
+    labels = ['', 'k', 'M', 'B', 'T'],
+    separator = '',
+  } = options || {};
+
+  if (multiplier < 0) {
+    throw new Error('Multiplier must be greater than 0');
+  }
+
+  if (Math.abs(value) < multiplier) {
+    const label = labels?.[0];
+
+    return [formatValue(value, numberOfDecimals), label]
+      .filter(Boolean)
+      .join(separator)
+      .trim();
+  }
+
+  // Power should be between 0 and the length of the labels array
+  const power = Math.min(
+    Math.max(labels.length - 1, 0),
+    Math.floor(Math.log(Math.abs(value)) / Math.log(multiplier)),
+  );
+
+  const formattedValue = formatValue(
+    value / multiplier ** power,
+    numberOfDecimals,
+  );
+
+  const label = labels?.[power];
+
+  return [formattedValue, label].filter(Boolean).join(separator).trim();
+}

dashboard/src/utils/common/prettifySize/index.ts

@@ -0,0 +1 @@
+export { default as prettifySize } from './prettifySize';

dashboard/src/utils/common/prettifySize/prettifySize.ts

@@ -0,0 +1,20 @@
+import type { PrettifyNumberOptions } from '@/utils/common/prettifyNumber';
+import { prettifyNumber } from '@/utils/common/prettifyNumber';
+
+/**
+ * Prettify a size value in bytes.
+ *
+ * @param size - Size in bytes
+ * @param options - Configuration options
+ * @returns Prettified size
+ */
+export default function prettifySize(
+  size: number,
+  options?: PrettifyNumberOptions,
+) {
+  return prettifyNumber(size, {
+    labels: ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
+    separator: ' ',
+    ...options,
+  });
+}

dashboard/src/utils/getPreviousApplicationState.ts

@@ -8,18 +8,12 @@ type AcceptedState =
   | ApplicationStatus.Updating;
 
 function checkIfAcceptedState(appState: ApplicationStatus) {
-  switch (appState) {
+  return [
-    case ApplicationStatus.Provisioning:
+    ApplicationStatus.Provisioning,
-      return true;
+    ApplicationStatus.Unpausing,
-    case ApplicationStatus.Unpausing:
+    ApplicationStatus.Pausing,
-      return true;
+    ApplicationStatus.Updating,
-    case ApplicationStatus.Pausing:
+  ].includes(appState);
-      return true;
-    case ApplicationStatus.Updating:
-      return true;
-    default:
-      return false;
-  }
 }
 
 /**

docs/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @nhost/docs
 
+## 0.0.16
+
+### Patch Changes
+
+- e7cb5070: fix(docs): use updated URLs everywhere
+
+## 0.0.15
+
+### Patch Changes
+
+- 0795d1c6: chore: add link to event triggers on the serverless functions page
+
 ## 0.0.14
 
 ### Patch Changes

docs/docs/cli/index.mdx

@@ -85,13 +85,13 @@ Hasura Console starts automatically and your Nhost project is running locally.
 
 ## Subdomain and Region
 
-Use `localhost` as the `subdomain`, and skip `region` when using the CLI and the [JavaScript SDK](/reference/javascript):
+Use `local` as the `subdomain`, and skip `region` when using the CLI and the [JavaScript SDK](/reference/javascript):
 
 ```js
 import { NhostClient } from '@nhost/nhost-js'
 
 const nhost = new NhostClient({
-  subdomain: 'localhost'
+  subdomain: 'local'
 })
 ```
 
@@ -104,18 +104,19 @@ The Mailhog address is listed after starting [`nhost up`](/reference/cli/up):
 ```
 $ nhost up
 URLs:
-- Postgres:         postgres://postgres:postgres@localhost:5432/postgres
+- Postgres:         postgres://postgres:postgres@local.db.nhost.run:5432/postgres
-- GraphQL:          http://localhost:1337/v1/graphql
+- Hasura:           https://local.hasura.nhost.run
-- Auth:             http://localhost:1337/v1/auth
+- GraphQL:          https://local.graphql.nhost.run/v1
-- Storage:          http://localhost:1337/v1/storage
+- Auth:             https://local.auth.nhost.run/v1
-- Functions:        http://localhost:1337/v1/functions
+- Storage:          https://local.storage.nhost.run/v1
+- Functions:        https://local.functions.nhost.run/v1
 
-- Hasura console:  http://localhost:9695
+- Dashboard:        http://localhost:3030
 // highlight-start
-- Mailhog:         http://localhost:8025
+- Mailhog:          http://localhost:8025
 // highlight-end
 
-- subdomain:       localhost
+- subdomain:       local
 - region:          (empty)
 ```
 

docs/docs/cli/local-development.mdx

@@ -314,14 +314,14 @@ Every JavaScript and TypeScript file inside the `functions/` folder becomes an
 API endpoint.
 
 Locally, the base URL for the serverless functions is
-`http://localhost:1337/v1/functions`. Then, the endpoint for each function is
+`http://local.functions.nhost.run/v1/`. Then, the endpoint for each function is
 determined by its filename or the name of its dedicated parent directory.
 
 For example, the endpoint for our function is
-`http://localhost:1337/v1/functions/time`.
+`http://local.functions.nhost.run/v1/time`.
 
 ```bash
-curl http://localhost:1337/v1/functions/time\?name\=Greg
+curl http://local.functions.nhost.run/v1/time\?name\=Greg
 Hello Greg! It's now: Wed, 27 Apr 2022 18:52:12 GMT
 ```
 

docs/docs/graphql/index.mdx

@@ -24,7 +24,7 @@ Building your GraphQL API is a lot of work, but with Nhost it's easy because eve
 
 ## Endpoint
 
-The GraphQL API is available at `https://[subdomain].graphql.[region].nhost.run/v1` When using the [CLI](/cli) the GraphQL API is available at `http://localhost:1337/v1/graphql`.
+The GraphQL API is available at `https://[subdomain].graphql.[region].nhost.run/v1` When using the [CLI](/cli) the GraphQL API is available at `https://local.graphql.nhost.run/v1`.
 
 ## GraphQL Clients for JavaScript
 

docs/docs/graphql/remote-schemas/stripe.mdx

@@ -160,7 +160,7 @@ Learn more about the [Nhost CLI](/cli).
 
 Test the Stripe GraphQL API in the browser:
 
-[http://localhost:1337/v1/functions/graphql/stripe](http://localhost:1337/v1/functions/graphql/stripe)
+[https://local.functions.nhost.run/v1/graphql/stripe](https://local.functions.nhost.run/v1/graphql/stripe)
 
 ## Remote Schema
 

docs/docs/serverless-functions.mdx

@@ -84,6 +84,8 @@ older (`functions/_utils/<utils-files>.js`).
 
 [Environment variables](/platform/environment-variables) are available inside your Serverless Functions. Both in production and when running Nhost locally using the [Nhost CLI](/cli).
 
+The same [environment variables that are used to configure event triggers](https://docs.nhost.io/database/event-triggers#format) can be used to authenticate regular serverless functions.
+
 ## Examples
 
 We have multiple examples of Serverless Functions in our [Nhost repository](https://github.com/nhost/nhost/tree/main/examples/serverless-functions/functions).

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/docs",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",

integrations/apollo/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nhost/apollo
 
+## 5.2.1
+
+### Patch Changes
+
+- 0d73e87a: fix(ws): don't open unnecessary connections
+- 0d73e87a: fix(ws): increase retry attempts and implement exponential backoff
+
 ## 5.2.0
 
 ### Patch Changes

integrations/apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/apollo",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "description": "Nhost Apollo Client library",
   "license": "MIT",
   "keywords": [

integrations/apollo/src/index.ts

@@ -72,7 +72,22 @@ export const createApolloClient = ({
     ? createRestartableClient({
         url: uri.startsWith('https') ? uri.replace(/^https/, 'wss') : uri.replace(/^http/, 'ws'),
         shouldRetry: () => true,
-        retryAttempts: 10,
+        retryAttempts: 100,
+        retryWait: async (retries) => {
+          // start with 1 second delay
+          const baseDelay = 1000
+
+          // max 3 seconds of jitter
+          const maxJitter = 3000
+
+          // exponential backoff with jitter
+          return new Promise((resolve) =>
+            setTimeout(
+              resolve,
+              baseDelay * Math.pow(2, retries) + Math.floor(Math.random() * maxJitter)
+            )
+          )
+        },
         connectionParams: () => ({
           headers: {
             ...headers,
@@ -141,7 +156,7 @@ export const createApolloClient = ({
       // update token
       token = state.context.accessToken.value
 
-      if (!isBrowser) {
+      if (!isBrowser || !wsClient?.isOpen()) {
         return
       }
 

integrations/apollo/src/ws.ts

@@ -3,6 +3,7 @@ import { Client, ClientOptions, createClient } from 'graphql-ws'
 
 export interface RestartableClient extends Client {
   restart(): void
+  isOpen(): boolean
 }
 
 export function createRestartableClient(options: ClientOptions): RestartableClient {
@@ -10,6 +11,8 @@ export function createRestartableClient(options: ClientOptions): RestartableClie
   let restart = () => {
     restartRequested = true
   }
+
+  let connectionOpen = false
   let socket: WebSocket
   let timedOut: NodeJS.Timeout
 
@@ -46,6 +49,7 @@ export function createRestartableClient(options: ClientOptions): RestartableClie
       opened: (originalSocket) => {
         socket = originalSocket as WebSocket
         options.on?.opened?.(socket)
+        connectionOpen = true
 
         restart = () => {
           if (socket.readyState === WebSocket.OPEN) {
@@ -63,12 +67,17 @@ export function createRestartableClient(options: ClientOptions): RestartableClie
           restartRequested = false
           restart()
         }
+      },
+      closed: (event) => {
+        options?.on?.closed?.(event)
+        connectionOpen = false
       }
     }
   })
 
   return {
     ...client,
-    restart: () => restart()
+    restart: () => restart(),
+    isOpen: () => connectionOpen
   }
 }

integrations/react-apollo/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nhost/react-apollo
 
+## 5.0.16
+
+### Patch Changes
+
+- Updated dependencies [0d73e87a]
+- Updated dependencies [0d73e87a]
+  - @nhost/apollo@5.2.1
+
 ## 5.0.15
 
 ### Patch Changes

integrations/react-apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react-apollo",
-  "version": "5.0.15",
+  "version": "5.0.16",
   "description": "Nhost React Apollo client",
   "license": "MIT",
   "keywords": [

integrations/react-urql/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/react-urql
 
+## 2.0.14
+
+### Patch Changes
+
+- 09cf5d4b: chore(deps): bump `urql` to v4
+
 ## 2.0.13
 
 ### Patch Changes

integrations/react-urql/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react-urql",
-  "version": "2.0.13",
+  "version": "2.0.14",
   "description": "Nhost React URQL client",
   "license": "MIT",
   "keywords": [
@@ -75,6 +75,6 @@
     "graphql": "16.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "urql": "^3.0.3"
+    "urql": "^4.0.0"
   }
 }

package.json

@@ -76,7 +76,7 @@
     "husky": "^8.0.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
-    "turbo": "1.8.6",
+    "turbo": "1.8.8",
     "typedoc": "^0.22.18",
     "typescript": "4.9.5",
     "vite": "^4.0.2",