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:
parent
a750259a2c
commit
92b7e64689
16 changed files with 469 additions and 172 deletions
126
app/react/sidebar/Footer/BuildInfoModal.tsx
Normal file
126
app/react/sidebar/Footer/BuildInfoModal.tsx
Normal 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>
|
||||
);
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue