diff --git a/resources/scripts/api/admin/databases/getDatabases.ts b/resources/scripts/api/admin/databases/getDatabases.ts index 4f88a30e..08ada8d9 100644 --- a/resources/scripts/api/admin/databases/getDatabases.ts +++ b/resources/scripts/api/admin/databases/getDatabases.ts @@ -11,6 +11,8 @@ export interface Database { maxDatabases: number; createdAt: Date; updatedAt: Date; + + getAddress (): string; } export const rawDataToDatabase = ({ attributes }: FractalResponseData): Database => ({ @@ -22,6 +24,8 @@ export const rawDataToDatabase = ({ attributes }: FractalResponseData): Database maxDatabases: attributes.max_databases, createdAt: new Date(attributes.created_at), updatedAt: new Date(attributes.updated_at), + + getAddress: () => `${attributes.host}:${attributes.port}`, }); interface ctx { diff --git a/resources/scripts/components/admin/databases/DatabasesContainer.tsx b/resources/scripts/components/admin/databases/DatabasesContainer.tsx index 605b4205..8df94fab 100644 --- a/resources/scripts/components/admin/databases/DatabasesContainer.tsx +++ b/resources/scripts/components/admin/databases/DatabasesContainer.tsx @@ -1,3 +1,4 @@ +import CopyOnClick from '@/components/elements/CopyOnClick'; import React, { useContext, useEffect, useState } from 'react'; import getDatabases, { Context as DatabasesContext } from '@/api/admin/databases/getDatabases'; import FlashMessageRender from '@/components/FlashMessageRender'; @@ -92,6 +93,7 @@ const DatabasesContainer = () => { + @@ -102,13 +104,25 @@ const DatabasesContainer = () => { - {database.id} + + + {database.id} + + + {database.name} - {database.host}:{database.port} + + + + {database.getAddress()} + + + + {database.username} )) }