1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-08-02 04:15:28 +02:00

feat(ui/sidebar): support custom logos [EE-3753] (#7436)

* feat(ui/sidebar): show right logos
This commit is contained in:
Chaim Lev-Ari 2022-08-12 04:27:30 +03:00 committed by GitHub
parent a750259a2c
commit 92b7e64689
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 469 additions and 172 deletions

View file

@ -0,0 +1,126 @@
import { useState } from 'react';
import { Database, Hash, Server, Tag, Tool } from 'react-feather';
import { DialogOverlay } from '@reach/dialog';
import {
useStatus,
useVersionStatus,
} from '@/portainer/services/api/status.service';
import { Button } from '@@/buttons';
import styles from './Footer.module.css';
export function BuildInfoModalButton() {
const [isBuildInfoVisible, setIsBuildInfoVisible] = useState(false);
const statusQuery = useStatus();
if (!statusQuery.data) {
return null;
}
const { Version } = statusQuery.data;
return (
<>
<button
type="button"
data-cy="portainerSidebar-versionNumber"
className="btn-none"
onClick={() => setIsBuildInfoVisible(true)}
>
{Version}
</button>
{isBuildInfoVisible && (
<BuildInfoModal closeModal={() => setIsBuildInfoVisible(false)} />
)}
</>
);
}
function BuildInfoModal({ closeModal }: { closeModal: () => void }) {
const versionQuery = useVersionStatus();
const statusQuery = useStatus();
if (!statusQuery.data || !versionQuery.data) {
return null;
}
const { Edition } = statusQuery.data;
const { ServerVersion, DatabaseVersion, Build } = versionQuery.data;
return (
<DialogOverlay className={styles.dialog} isOpen>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" onClick={closeModal}>
×
</button>
<h5 className="modal-title">Portainer {Edition}</h5>
</div>
<div className="modal-body">
<div className={styles.versionInfo}>
<table>
<tbody>
<tr>
<td>
<span className="inline-flex items-center">
<Server size="13" className="space-right" />
Server Version: {ServerVersion}
</span>
</td>
<td>
<span className="inline-flex items-center">
<Database size="13" className="space-right" />
Database Version: {DatabaseVersion}
</span>
</td>
</tr>
<tr>
<td>
<span className="inline-flex items-center">
<Hash size="13" className="space-right" />
CI Build Number: {Build.BuildNumber}
</span>
</td>
<td>
<span>
<Tag size="13" className="space-right" />
Image Tag: {Build.ImageTag}
</span>
</td>
</tr>
</tbody>
</table>
</div>
<div className={styles.toolsList}>
<span className="inline-flex items-center">
<Tool size="13" className="space-right" />
Compilation tools:
</span>
<div className={styles.tools}>
<span className="text-muted small">
Nodejs v{Build.NodejsVersion}
</span>
<span className="text-muted small">
Yarn v{Build.YarnVersion}
</span>
<span className="text-muted small">
Webpack v{Build.WebpackVersion}
</span>
<span className="text-muted small">Go v{Build.GoVersion}</span>
</div>
</div>
</div>
<div className="modal-footer">
<Button className="bootbox-accept" onClick={closeModal}>
Ok
</Button>
</div>
</div>
</div>
</DialogOverlay>
);
}