feat(buildinfo): ability to see build info [EE-2552] (#7107)

* feat(buildinfo): ability to see build info [EE-2252]

* handle dark theme

* feat: add build info to status version

* feat: include ldflags in azure pipeline

* echo shell commands in azure build

* clean up main log

* allow tests to pass

* use data from backend

* allow clicking off modal to dismiss

* add placeholder versions

* refactor

* update button class

* fix modal displaying behind elements

Co-authored-by: Dmitry Salakhov <to@dimasalakhov.com>

app/react/sidebar/Footer.module.css

@@ -1,3 +1,42 @@
 :global(#page-wrapper:not(.open)) .root {
   display: none;
 }
+
+.dialog {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10000;
+}
+
+.versionInfo {
+  margin: 5px 15px 10px;
+  font-size: 12px;
+}
+
+.versionInfo table {
+  width: 100%;
+  table-layout: fixed;
+}
+
+.versionInfo td {
+  padding-bottom: 10px;
+}
+
+.toolsList {
+  padding: 15px;
+  border: 1px solid #d3d3d3;
+  border-radius: 5px;
+  background-color: rgba(211, 211, 211, 0.2);
+  width: max-width;
+  font-family: Arial;
+  word-break: break-all;
+}
+
+.toolsList span {
+  margin-bottom: 10px;
+}
+
+.tools span {
+  margin-right: 10px;
+}

app/react/sidebar/Footer.tsx

@@ -1,44 +1,150 @@
+import { useState } from 'react';
 import { useQuery } from 'react-query';
 import clsx from 'clsx';
+import { Database, Hash, Server, Tag, Tool } from 'react-feather';
+import { DialogOverlay } from '@reach/dialog';
 
-import { getStatus } from '@/portainer/services/api/status.service';
+import {
+  getStatus,
+  getVersionStatus,
+} from '@/portainer/services/api/status.service';
+
+import { Button } from '@@/buttons';
 
 import { UpdateNotification } from './UpdateNotifications';
 import styles from './Footer.module.css';
+import '@reach/dialog/styles.css';
 
 export function Footer() {
+  const [showBuildInfo, setShowBuildInfo] = useState(false);
   const statusQuery = useStatus();
+  const versionQuery = useVersionStatus();
 
-  if (!statusQuery.data) {
+  if (!statusQuery.data || !versionQuery.data) {
     return null;
   }
 
   const { Edition, Version } = statusQuery.data;
+  const { ServerVersion, DatabaseVersion, Build } = versionQuery.data;
+
+  function toggleModal() {
+    setShowBuildInfo(!showBuildInfo);
+  }
 
   return (
-    <div className={clsx(styles.root, 'text-center')}>
-      {process.env.PORTAINER_EDITION === 'CE' && <UpdateNotification />}
-      <div className="text-xs space-x-1 text-gray-5 be:text-gray-6">
-        <span>&copy;</span>
-        <span>Portainer {Edition}</span>
+    <>
+      <DialogOverlay className={styles.dialog} isOpen={showBuildInfo}>
+        <div className="modal-dialog">
+          <div className="modal-content">
+            <div className="modal-header">
+              <button type="button" className="close" onClick={toggleModal}>
+                ×
+              </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>
 
-        <span data-cy="portainerSidebar-versionNumber">{Version}</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={toggleModal}>
+                Ok
+              </Button>
+            </div>
+          </div>
+        </div>
+      </DialogOverlay>
 
-        {process.env.PORTAINER_EDITION === 'CE' && (
-          <a
-            href="https://www.portainer.io/install-BE-now"
-            className="text-blue-6 font-medium"
-            target="_blank"
-            rel="noreferrer"
+      <div className={clsx(styles.root, 'text-center')}>
+        {process.env.PORTAINER_EDITION === 'CE' && <UpdateNotification />}
+        <div className="text-xs space-x-1 text-gray-5 be:text-gray-6">
+          <span>&copy;</span>
+          <span>Portainer {Edition}</span>
+
+          <span
+            data-cy="portainerSidebar-versionNumber"
+            onClick={toggleModal}
+            // Accessibility requirements for a clickable span
+            onKeyPress={toggleModal}
+            role="button"
+            tabIndex={0}
           >
-            Upgrade
-          </a>
-        )}
+            {Version}
+          </span>
+
+          {process.env.PORTAINER_EDITION === 'CE' && (
+            <a
+              href="https://www.portainer.io/install-BE-now"
+              className="text-blue-6 font-medium"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Upgrade
+            </a>
+          )}
+        </div>
       </div>
-    </div>
+    </>
   );
 }
 
 function useStatus() {
   return useQuery(['status'], () => getStatus());
 }
+
+function useVersionStatus() {
+  return useQuery(['version'], () => getVersionStatus());
+}