IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Settings: Add skeleton loader (#79234)

Browse Source 
* add skeleton for settings page

* go back to using style so it all overrides properly
This commit is contained in:
Ashley Harrison 2023-12-08 09:25:06 +00:00 committed by GitHub
parent 508fbc8f5b
commit 7ddcd0c961
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 80 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
public/app/features/admin/AdminSettings.tsx
View File

@ -4,39 +4,24 @@ import { useAsync } from 'react-use';
import { getBackendSrv } from '@grafana/runtime';
import { Page } from 'app/core/components/Page/Page';
type Settings = { [key: string]: { [key: string]: string } };
import { AdminSettingsTable } from './AdminSettingsTable';
export type Settings = { [key: string]: { [key: string]: string } };
function AdminSettings() {
const { loading, value: settings } = useAsync(() => getBackendSrv().get<Settings>('/api/admin/settings'), []);
return (
<Page navId="server-settings">
<Page.Contents isLoading={loading}>
<Page.Contents>
<div className="grafana-info-box span8" style={{ margin: '20px 0 25px 0' }}>
These system settings are defined in grafana.ini or custom.ini (or overridden in ENV variables). To change
these you currently need to restart Grafana.
</div>
{settings && (
<table className="filter-table">
<tbody>
{Object.entries(settings).map(([sectionName, sectionSettings], i) => (
<React.Fragment key={`section-${i}`}>
<tr>
<td className="admin-settings-section">{sectionName}</td>
<td />
</tr>
{Object.entries(sectionSettings).map(([settingName, settingValue], j) => (
<tr key={`property-${j}`}>
<td style={{ paddingLeft: '25px' }}>{settingName}</td>
<td style={{ whiteSpace: 'break-spaces' }}>{settingValue}</td>
</tr>
))}
</React.Fragment>
))}
</tbody>
</table>
)}
{loading && <AdminSettingsTable.Skeleton />}
{settings && <AdminSettingsTable settings={settings} />}
</Page.Contents>
</Page>
);

73
public/app/features/admin/AdminSettingsTable.tsx Normal file
View File

@ -0,0 +1,73 @@
import React from 'react';
import Skeleton from 'react-loading-skeleton';
import { Settings } from './AdminSettings';
interface Props {
settings: Settings;
}
export const AdminSettingsTable = ({ settings }: Props) => {
return (
<table className="filter-table">
<tbody>
{Object.entries(settings).map(([sectionName, sectionSettings], i) => (
<React.Fragment key={`section-${i}`}>
<tr>
<td className="admin-settings-section">{sectionName}</td>
<td />
</tr>
{Object.entries(sectionSettings).map(([settingName, settingValue], j) => (
<tr key={`property-${j}`}>
<td style={{ paddingLeft: '25px' }}>{settingName}</td>
<td style={{ whiteSpace: 'break-spaces' }}>{settingValue}</td>
</tr>
))}
</React.Fragment>
))}
</tbody>
</table>
);
};
// note: don't want to put this in render function else it will get regenerated
const randomValues = new Array(50).fill(null).map(() => Math.random());
const AdminSettingsTableSkeleton = () => {
return (
<table className="filter-table">
<tbody>
{randomValues.map((randomValue, index) => {
const isSection = index === 0 || randomValue > 0.9;
return (
<React.Fragment key={index}>
{isSection && (
<tr>
<td className="admin-settings-section">
<Skeleton width={getRandomInRange(40, 80, randomValue)} />
</td>
<td />
</tr>
)}
<tr>
<td style={{ paddingLeft: '25px' }}>
<Skeleton width={getRandomInRange(60, 100, randomValue)} />
</td>
<td>
<Skeleton width={getRandomInRange(80, 320, randomValue)} />
</td>
</tr>
</React.Fragment>
);
})}
</tbody>
</table>
);
};
function getRandomInRange(min: number, max: number, randomSeed: number) {
return randomSeed * (max - min) + min;
}
AdminSettingsTable.Skeleton = AdminSettingsTableSkeleton;