Instance list live updates

.github/workflows/playwright.yml

@@ -8,7 +8,7 @@ on:
  workflow_dispatch:
  inputs:
  api_url:
- description: 'API URL target for the tests.'
+ description: "API URL target for the tests."
  type: string
  required: true
 

e2e/instances.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from '@playwright/test'
-import {login, logout, uploadTestDatabase, deleteTestDatabase} from './utils'
+import { login, logout, uploadTestDatabase, deleteTestDatabase } from './utils'
 
 test.describe('new instance', () => {
  test.beforeEach(async ({ page }) => {
@@ -26,20 +26,20 @@ test.describe('new instance', () => {
  await expect(page.getByRole('group', { name: 'Database' })).toBeVisible()
 
  const randomName = 'e2e-test-' + Math.random().toString().substring(8)
- await page.getByRole('textbox', { name: 'Name'}).fill(randomName)
- await page.getByRole('textbox', { name: 'Description'}).fill('This is an e2e test instance.')
+ await page.getByRole('textbox', { name: 'Name' }).fill(randomName)
+ await page.getByRole('textbox', { name: 'Description' }).fill('This is an e2e test instance.')
 
  await page.getByTestId('dhis2-uiwidgets-singleselectfield').filter({ hasText: 'Database' }).getByTestId('dhis2-uicore-select-input').click()
  await page.getByText('whoami/test/empty-db.sql.gz').click()
 
  await expect(page.getByRole('button', { name: 'Create instance' })).toBeEnabled()
  await page.getByRole('button', { name: 'Create instance' }).click()
- await expect(page.getByRole('cell', { name: randomName })).toBeVisible({timeout: 10000})
+ await expect(page.getByRole('cell', { name: randomName })).toBeVisible({ timeout: 10000 })
 
- await page.getByRole('button', {name: 'Delete'}).click()
+ await page.getByRole('button', { name: 'Delete' }).click()
  await expect(page.getByTestId('dhis2-uicore-modalcontent')).toContainText(randomName)
- await page.getByRole('button', {name: 'Confirm'}).click()
+ await page.getByRole('button', { name: 'Confirm' }).click()
 
- await expect(page.getByTestId('dhis2-uicore-alertbar').getByText(`Successfully deleted instance "${randomName}"`)).toBeVisible({timeout: 10000})
+ await expect(page.getByTestId('dhis2-uicore-alertbar').getByText(`Successfully deleted instance "${randomName}"`)).toBeVisible({ timeout: 10000 })
  })
 })

e2e/utils/delete-database.ts

@@ -1,5 +1,4 @@
 import { expect } from '@playwright/test'
-import path from "path";
 
 const testDbName = 'test/empty-db.sql.gz'
 const testGroup = 'whoami'
@@ -10,10 +9,10 @@ export const deleteTestDatabase = async (page) => {
  await expect(page.getByRole('cell', { name: testDbName })).toBeVisible()
 
  const testDatabaseRow = page.locator(`//table[@data-test='dhis2-uicore-datatable']//tr[contains(td[1], '${testDbName}')]`)
- await testDatabaseRow.getByRole('button', {name: 'Delete'}).click()
+ await testDatabaseRow.getByRole('button', { name: 'Delete' }).click()
 
  await expect(page.getByTestId('dhis2-uicore-modalcontent')).toContainText(testDbName)
- await page.getByRole('button', {name: 'Confirm'}).click()
+ await page.getByRole('button', { name: 'Confirm' }).click()
 
  await expect(page.getByTestId('dhis2-uicore-alertbar').getByText(`Successfully deleted ${testGroup}/${testDbName}`)).toBeVisible()
 }

e2e/utils/upload-database.ts

@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test'
-import path from "path";
+import path from 'path'
 
 const dbNamePrefix = 'test/'
 const dbName = 'empty-db'
@@ -11,17 +11,17 @@ export const uploadTestDatabase = async (page) => {
  await page.getByRole('button', { name: 'Upload database' }).click()
 
  await expect(page.getByRole('button', { name: 'Select database' })).toBeVisible()
- const fileChooserPromise = page.waitForEvent('filechooser');
+ const fileChooserPromise = page.waitForEvent('filechooser')
  await page.getByRole('button', { name: 'Select database' }).click()
- const fileChooser = await fileChooserPromise;
- await fileChooser.setFiles(path.join(__dirname, `../fixtures/${dbName}${dbExtension}`));
- await page.getByTestId('upload-database-name').getByRole('textbox').fill(`${dbNamePrefix}${dbName}`);
- await expect(page.getByText(`Selected database file: ${dbNamePrefix}${dbName}${dbExtension}`)).toBeVisible();
+ const fileChooser = await fileChooserPromise
+ await fileChooser.setFiles(path.join(__dirname, `../fixtures/${dbName}${dbExtension}`))
+ await page.getByTestId('upload-database-name').getByRole('textbox').fill(`${dbNamePrefix}${dbName}`)
+ await expect(page.getByText(`Selected database file: ${dbNamePrefix}${dbName}${dbExtension}`)).toBeVisible()
 
  await expect(page.getByTestId('dhis2-uicore-modalactions').getByRole('button', { name: 'Upload' })).toBeEnabled()
  await page.getByTestId('dhis2-uicore-modalactions').getByRole('button', { name: 'Upload' }).click()
- await expect(page.getByText('Uploading database file: test/empty-db.sql.gz')).toBeVisible();
+ await expect(page.getByText('Uploading database file: test/empty-db.sql.gz')).toBeVisible()
 
- await expect(page.getByTestId('dhis2-uicore-alertbar').getByText('Database added successfully')).toBeVisible();
- await expect(page.getByRole('cell', { name: `${dbNamePrefix}${dbName}${dbExtension}` })).toBeVisible();
+ await expect(page.getByTestId('dhis2-uicore-alertbar').getByText('Database added successfully')).toBeVisible()
+ await expect(page.getByRole('cell', { name: `${dbNamePrefix}${dbName}${dbExtension}` })).toBeVisible()
 }

src/types/generated/index.ts

@@ -13,6 +13,7 @@ export type { Deployment } from './models/Deployment'
 export type { DeploymentInstance } from './models/DeploymentInstance'
 export type { DeploymentInstanceParameter } from './models/DeploymentInstanceParameter'
 export type { DeploymentInstanceParameters } from './models/DeploymentInstanceParameters'
+export type { Event } from './models/Event'
 export type { ExternalDownload } from './models/ExternalDownload'
 export type { FileHeader } from './models/FileHeader'
 export type { Group } from './models/Group'
@@ -21,7 +22,6 @@ export type { GroupsWithDeployments } from './models/GroupsWithDeployments'
 export type { GroupsWithInstances } from './models/GroupsWithInstances'
 export type { Instance } from './models/Instance'
 export type { InstanceParameter } from './models/InstanceParameter'
-export type { InstanceStatus } from './models/InstanceStatus'
 export type { Lock } from './models/Lock'
 export type { LockDatabaseRequest } from './models/LockDatabaseRequest'
 export type { MIMEHeader } from './models/MIMEHeader'

src/types/generated/models/DeploymentInstance.ts

@@ -16,13 +16,16 @@ export type DeploymentInstance = {
  groupName?: string
  id?: number
  /**
- * TODO: FK to name of Deployment?
+ * TODO: Delete name and group... Or at least don't persist
+ * TODO: Don't return the name
+ * ... Just delete both Name, Group and GroupName?
  */
  name?: string
  parameters?: DeploymentInstanceParameters
  /**
  * Stack *Stack `json:"stack,omitempty"`
  */
  stackName?: string
+ status?: string
  updatedAt?: string
 }

src/types/generated/models/InstanceStatus.ts → src/types/generated/models/Event.ts

@@ -3,4 +3,9 @@
 /* tslint:disable */
 /* eslint-disable */
 
-export type InstanceStatus = string
+export type Event = {
+ Data?: any
+ Event?: string
+ Id?: string
+ Retry?: number
+}

src/views/databases/upload-database-modal.tsx

@@ -126,7 +126,15 @@ export const UploadDatabaseModal: FC<UploadDatabaseModalProps> = ({ onClose, onC
  ))}
  </SingleSelectField>
  <div className={styles.fileAndExtension}>
- <InputField className={styles.field} dataTest="upload-database-name" label="Name" value={name} onChange={({ value }) => setName(value)} required disabled={loading} />
+ <InputField
+ className={styles.field}
+ dataTest="upload-database-name"
+ label="Name"
+ value={name}
+ onChange={({ value }) => setName(value)}
+ required
+ disabled={loading}
+ />
  <span>{extension}</span>
  </div>
  <SingleSelectField className={styles.field} selected={format} onChange={onSelectChange} label="Format">

src/views/instances/details/actions-dropdown-menu.tsx

@@ -48,7 +48,7 @@ export const ActionsDropdownMenu = ({ deploymentId, instanceId, stackName, refet
  return (
  <>
  <span ref={anchor}>
- <Button onClick={togglePopover} dataTest='instances-list-menu-button' small secondary loading={loading} icon={<IconMore24 />} />
+ <Button onClick={togglePopover} dataTest="instances-list-menu-button" small secondary loading={loading} icon={<IconMore24 />} />
  </span>
  {open && (
  <Popover onClickOutside={togglePopover} reference={anchor} placement="bottom-start">

src/views/instances/list/instances-list.tsx

@@ -14,7 +14,7 @@ import {
  NoticeBox,
  Tag,
 } from '@dhis2/ui'
-import type { FC } from 'react'
+import { FC, useEffect } from 'react'
 import Moment from 'react-moment'
 import { useNavigate } from 'react-router-dom'
 import { useAuthAxios } from '../../../hooks'
@@ -23,13 +23,26 @@ import { OpenButton } from './open-button'
 import styles from './instances-list.module.css'
 import { DeleteButton } from './delete-menu-button'
 import { Heading, MomentExpiresFromNow } from '../../../components'
+import { baseURL } from '../../../hooks/use-auth-axios'
+import { getAccessToken } from 'axios-jwt'
 
 export const InstancesList: FC = () => {
  const navigate = useNavigate()
  const [{ data, error, loading }, refetch] = useAuthAxios<GroupsWithDeployments[]>('/deployments', {
  useCache: false,
  })
 
+ useEffect(() => {
+ // TODO: Multiple listeners are added... After 5 connections are created no more can be instantiated
+ const token = getAccessToken()
+ const eventSource = new EventSource(`${baseURL}/subscribe?token=${token}`)
+ eventSource.addEventListener('instance-update', (event) => {
+ const parse = JSON.parse(event.data)
+ console.log(parse)
+ refetch()
+ })
+ }, [])
+
  return (
  <div className={styles.wrapper}>
  <Heading title="All instances">
@@ -81,9 +94,9 @@ export const InstancesList: FC = () => {
  </DataTableCell>
  <DataTableCell>{deployment.description}</DataTableCell>
  <DataTableCell>
- {deployment.instances?.map(({ stackName }) => (
+ {deployment.instances?.map(({ stackName, status }) => (
  <Tag key={stackName} className={styles.stackNameTag}>
- {stackName}
+ {stackName}({status})
  </Tag>
  ))}
  </DataTableCell>