Topbar Dropdown Installer

packages/admin-ui/src/components/topbar/TopBar.tsx

@@ -2,6 +2,7 @@ import React from "react";
 // DropdownMenu components
 import DappnodeIdentity from "./dropdownMenus/DappnodeIdentity";
 import ChainDataDropdown from "./dropdownMenus/ChainDataDropdown";
+import InstallerDropdown from "./dropdownMenus/InstallerDropdown";
 import Notifications from "./dropdownMenus/Notifications";
 import Profile from "./dropdownMenus/Profile";
 import ThemeSwitch from "./dropdownMenus/ThemeSwitch";
@@ -13,32 +14,42 @@ import "./notifications.scss";
 import { AppContextIface } from "types";
 import Modules from "./dropdownMenus/Modules";
 
+// Pkgs Installing data
+import { useSelector } from "react-redux";
+import { getProgressLogsByDnp } from "services/isInstallingLogs/selectors";
+
 export const TopBar = ({
   username,
   appContext
 }: {
   username: string;
   appContext: AppContextIface;
-}) => (
-  <div id="topbar">
-    {/* Right justified items */}
+}) => {
+  const progressLogsByDnp = useSelector(getProgressLogsByDnp);
+  const isPkgInstalling = Object.keys(progressLogsByDnp).length !== 0;
+
+  return (
+    <div id="topbar">
+      {/* Right justified items */}
 
-    {appContext.theme === "light" ? (
-      <div className="beta">
-        <span>BETA</span>
-        {/* Theme usage requires more feedback */}
-        {/*<UsageSwitch toggleUsage={toggleUsage} /> */}
+      {appContext.theme === "light" ? (
+        <div className="beta">
+          <span>BETA</span>
+          {/* Theme usage requires more feedback */}
+          {/*<UsageSwitch toggleUsage={toggleUsage} /> */}
+          <ThemeSwitch toggleTheme={appContext.toggleTheme} />
+        </div>
+      ) : (
         <ThemeSwitch toggleTheme={appContext.toggleTheme} />
-      </div>
-    ) : (
-      <ThemeSwitch toggleTheme={appContext.toggleTheme} />
-    )}
+      )}
 
-    <DappnodeIdentity />
-    <div className="topnav-icon-separator" />
-    <Modules modulesContext={appContext} />
-    <ChainDataDropdown />
-    <Notifications />
-    <Profile username={username} />
-  </div>
-);
+      <DappnodeIdentity />
+      <div className="topnav-icon-separator" />
+      {isPkgInstalling && <InstallerDropdown installLogs={progressLogsByDnp} />}
+      <Modules modulesContext={appContext} />
+      <ChainDataDropdown />
+      <Notifications />
+      <Profile username={username} />
+    </div>
+  );
+};

packages/admin-ui/src/components/topbar/dropdownMenus/BaseDropdown.tsx

@@ -65,6 +65,8 @@ interface BaseDropdownProps {
   onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   offset?: number;
   moreVisible?: boolean;
+  unCollapsed?: boolean;
+  children?: React.JSX.Element;
 }
 
 function BaseDropdown({
@@ -74,9 +76,11 @@ function BaseDropdown({
   onClick,
   className,
   placeholder,
-  moreVisible
+  moreVisible,
+  unCollapsed,
+  children
 }: BaseDropdownProps) {
-  const [collapsed, setCollapsed] = useState(true);
+  const [collapsed, setCollapsed] = useState(unCollapsed ? false : true);
   const dropdownEl = useRef<HTMLDivElement>(null);
 
   function onToggle(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
@@ -177,7 +181,8 @@ function BaseDropdown({
             </div>
           )
         )}
-        {!messages.length && placeholder && (
+        {children && children}
+        {!messages.length && placeholder && !children && (
           <div className="placeholder">{placeholder}</div>
         )}
       </div>

packages/admin-ui/src/components/topbar/dropdownMenus/InstallerDropdown.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import BaseDropdown from "./BaseDropdown";
+import { FiDownload } from "react-icons/fi";
+import { ProgressLogs, ProgressLogsByDnp } from "types";
+import { ProgressLogsView } from "pages/installer/components/InstallCardComponents/ProgressLogsView";
+
+export default function InstallerDropdown({
+  installLogs
+}: {
+  installLogs: ProgressLogsByDnp;
+}) {
+  const progressCardLogs: ProgressLogs[] = [];
+
+  for (const key in installLogs) {
+    progressCardLogs.push({
+      [key]: installLogs[key][key].toString()
+    });
+  }
+
+  return (
+    <BaseDropdown
+      name="Installer"
+      messages={[{ type: "info" }]}
+      Icon={() => <FiDownload size={"1.4em"} />}
+      className="installer"
+      placeholder="No packages installing"
+      unCollapsed
+      children={
+        <div style={{ width: "100%" }}>
+          {progressCardLogs.map(log => (
+            <ProgressLogsView progressLogs={log} />
+          ))}
+        </div>
+      }
+    />
+  );
+}

packages/admin-ui/src/components/topbar/dropdownMenus/dropdown.scss

@@ -91,6 +91,9 @@
   &.chainstatus > .menu {
     right: -5.6rem;
   }
+  &.installer > .menu {
+    right: -9rem;
+  }
   &.dappnodeidentity > .menu {
     right: -9.2rem;
   }

packages/admin-ui/src/pages/installer/components/InstallCardComponents/ProgressLogsView.tsx

@@ -3,7 +3,6 @@ import { isEmpty } from "lodash-es";
 import { prettyDnpName } from "utils/format";
 // Components
 import ProgressBar from "react-bootstrap/ProgressBar";
-import Card from "components/Card";
 import { stringIncludes } from "utils/strings";
 import { ProgressLogs } from "types";
 
@@ -30,7 +29,7 @@ export function ProgressLogsView({
   if (!progressLogs || isEmpty(progressLogs)) return null;
 
   return (
-    <Card>
+    <>
       {Object.entries(progressLogs)
         // Don't show "core.dnp.dappnode.eth" actual progress log information
         .filter(([dnpName]) => dnpName !== "core.dnp.dappnode.eth")
@@ -39,10 +38,10 @@ export function ProgressLogsView({
           const progressing = Boolean(percent) || stringIncludes(log, "...");
           return (
             <div key={dnpName} className="row">
-              <div className="col-6 text-truncate">
+              <div className="col-4 text-truncate">
                 <span>{prettyDnpName(dnpName)}</span>
               </div>
-              <div className="col-6 text-truncate center">
+              <div className="col-8 text-truncate center">
                 <ProgressBar
                   now={percent ? parseInt(percent) : 100}
                   animated={progressing}
@@ -53,6 +52,6 @@ export function ProgressLogsView({
             </div>
           );
         })}
-    </Card>
+    </>
   );
 }

packages/admin-ui/src/pages/installer/components/InstallDnpView.tsx

@@ -329,13 +329,19 @@ const InstallDnpView: React.FC<InstallDnpViewProps> = ({
   return (
     <>
       {progressLogs ? (
-        <ProgressLogsView progressLogs={progressLogs} />
+        <Card>
+          <ProgressLogsView progressLogs={progressLogs} />
+        </Card>
       ) : showSuccess ? (
         <Card spacing>
           <StatusIcon success={true} message="Successfully installed!" />
         </Card>
       ) : isInstalling ? (
-        <ProgressLogsView progressLogs={{ [dnpName]: "Sending request..." }} />
+        <Card>
+          <ProgressLogsView
+            progressLogs={{ [dnpName]: "Sending request..." }}
+          />
+        </Card>
       ) : null}
 
       {requiresCoreUpdate && (

packages/admin-ui/src/pages/system/components/SystemUpdate/index.tsx

@@ -27,8 +27,11 @@ export default function SystemUpdate() {
     <>
       <SubTitle>Update</SubTitle>
       {/* This component will automatically hide if logs are empty */}
-      <ProgressLogsView progressLogs={coreProgressLogs} />
-
+      {coreProgressLogs && (
+        <Card>
+          <ProgressLogsView progressLogs={coreProgressLogs} />
+        </Card>
+      )}
       {coreUpdateAvailable ? (
         <SystemUpdateDetails />
       ) : loading ? (