feat(web): show more app info (#1145)

* feat(web): add app info

* database type used
* application binary path
* config path

* feat(web): label colors light theme

* feat(web): truncate long fields
This commit is contained in:
ze0s 2023-09-22 22:05:14 +02:00 committed by GitHub
parent 2eed1b3e90
commit d3ca3e59c0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 41 additions and 12 deletions

View file

@ -23,9 +23,9 @@ interface RowItemProps {
const RowItem = ({ label, value, title, emptyText }: RowItemProps) => {
return (
<div className="py-4 sm:py-5 sm:grid sm:grid-cols-4 sm:gap-4 sm:px-6">
<dt className="font-medium text-gray-500 dark:text-white" title={title}>{label}:</dt>
<dd className="mt-1 text-gray-900 dark:text-white sm:mt-0 sm:col-span-2 break-all">
{value ? <span className="px-1 py-0.5 bg-gray-200 dark:bg-gray-700 rounded shadow">{value}</span> : emptyText}
<dt className="font-medium text-gray-900 dark:text-white text-sm" title={title}>{label}</dt>
<dd className="mt-1 text-gray-900 dark:text-gray-300 text-sm sm:mt-0 sm:col-span-3 break-all truncate">
{value ? <span className="px-1.5 py-1 bg-gray-200 dark:bg-gray-700 rounded shadow">{value}</span> : emptyText}
</dd>
</div>
);
@ -59,9 +59,9 @@ const RowItemVersion = ({ label, value, title, newUpdate }: RowItemProps) => {
return (
<div className="py-4 sm:py-5 sm:grid sm:grid-cols-4 sm:gap-4 sm:px-6">
<dt className="font-medium text-gray-500 dark:text-white" title={title}>{label}:</dt>
<dd className="mt-1 text-gray-900 dark:text-white sm:mt-0 sm:col-span-2 break-all">
<span className="px-1 py-0.5 bg-gray-200 dark:bg-gray-700 rounded shadow">{value}</span>
<dt className="font-medium text-gray-900 dark:text-white text-sm" title={title}>{label}</dt>
<dd className="mt-1 text-gray-900 dark:text-gray-300 text-sm sm:mt-0 sm:col-span-2 break-all truncate">
<span className="px-1.5 py-1 bg-gray-200 dark:bg-gray-700 rounded shadow">{value}</span>
{newUpdate && newUpdate.html_url && (
<span>
<a href={newUpdate.html_url} target="_blank" rel="noopener noreferrer"><span className="ml-2 inline-flex items-center rounded-md bg-green-100 px-2.5 py-0.5 text-sm font-medium text-green-800">{newUpdate.name} available!</span></a>
@ -174,6 +174,9 @@ function ApplicationSettings() {
<RowItemVersion label="Version" value={data?.version} newUpdate={updateData ?? undefined} />
<RowItem label="Commit" value={data?.commit} />
<RowItem label="Build date" value={data?.date} />
<RowItem label="Application" value={data?.application} />
<RowItem label="Config path" value={data?.config_dir} />
<RowItem label="Database" value={data?.database} />
</dl>
</div>
<ul className="divide-y divide-gray-200 dark:divide-gray-700">

View file

@ -24,9 +24,9 @@ interface RowItemProps {
const RowItem = ({ label, value, title, emptyText }: RowItemProps) => {
return (
<div className="py-4 sm:py-5 sm:grid sm:grid-cols-4 sm:gap-4 sm:px-6">
<dt className="font-medium text-gray-500 dark:text-white" title={title}>{label}:</dt>
<dd className="mt-1 text-gray-900 dark:text-white sm:mt-0 sm:col-span-2 break-all">
<span className="px-1 py-0.5 bg-gray-200 dark:bg-gray-700 rounded shadow">{value ? value : emptyText}</span>
<dt className="font-medium text-gray-900 dark:text-white text-sm" title={title}>{label}</dt>
<dd className="mt-1 text-gray-900 dark:text-white text-sm sm:mt-0 sm:col-span-2 break-all truncate">
<span className="px-1.5 py-1 bg-gray-200 dark:bg-gray-700 rounded shadow">{value ? value : emptyText}</span>
</dd>
</div>
);
@ -42,9 +42,9 @@ interface RowItemNumberProps {
const RowItemNumber = ({ label, value, title, unit }: RowItemNumberProps) => {
return (
<div className="py-4 sm:py-5 sm:grid sm:grid-cols-4 sm:gap-4 sm:px-6">
<dt className="font-medium text-gray-500 dark:text-white" title={title}>{label}:</dt>
<dd className="mt-1 text-gray-900 dark:text-white sm:mt-0 sm:col-span-2 break-all">
<span className="px-1 py-0.5 bg-gray-200 dark:bg-gray-700 rounded shadow">{value}</span>
<dt className="font-medium text-gray-900 dark:text-white text-sm" title={title}>{label}</dt>
<dd className="mt-1 text-gray-900 dark:text-white text-sm sm:mt-0 sm:col-span-2 break-all truncate">
<span className="px-1.5 py-1 bg-gray-200 dark:bg-gray-700 rounded shadow truncate">{value}</span>
{unit &&
<span className="ml-1 text-sm text-gray-700 dark:text-gray-400">{unit}</span>
}

View file

@ -6,6 +6,9 @@
type LogLevel = "DEBUG" | "INFO" | "WARN" | "ERROR" | "TRACE";
interface Config {
config_dir: string;
application: string;
database: string;
host: string;
port: number;
log_level: LogLevel;