From f473d324dfd8e0afef16d9af1551398e8e513c5d Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 23 Oct 2022 23:45:43 -0700
Subject: [PATCH] Fix docker status error display

---
 src/components/services/item.jsx           |  2 +-
 src/components/services/widget/error.jsx   | 15 +++++++--------
 src/pages/api/docker/stats/[...service].js |  2 +-
 3 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/services/item.jsx b/src/components/services/item.jsx
index 56ed2b4b1..aa8e80962 100644
--- a/src/components/services/item.jsx
+++ b/src/components/services/item.jsx
@@ -85,7 +85,7 @@ export default function Item({ service }) {
         {service.container && service.server && (
           <div
             className={classNames(
-              statsOpen && !statsClosing ? "max-h-[55px] opacity-100" : " max-h-[0] opacity-0",
+              statsOpen && !statsClosing ? "max-h-[110px] opacity-100" : " max-h-[0] opacity-0",
               "w-full overflow-hidden transition-all duration-300 ease-in-out"
             )}
           >
diff --git a/src/components/services/widget/error.jsx b/src/components/services/widget/error.jsx
index d12aebf21..cf5e13661 100644
--- a/src/components/services/widget/error.jsx
+++ b/src/components/services/widget/error.jsx
@@ -1,6 +1,5 @@
 import { useTranslation } from "react-i18next";
 import { IoAlertCircle } from "react-icons/io5";
-import classNames from "classnames";
 
 function displayError(error) {
   return JSON.stringify(error[1] ? error[1] : error, null, 4);
@@ -12,7 +11,7 @@ function displayData(data) {
 
 export default function Error({ error }) {
   const { t } = useTranslation();
-  
+
   if (error?.data?.error) {
     error = error.data.error; // eslint-disable-line no-param-reassign
   }
@@ -21,24 +20,24 @@ export default function Error({ error }) {
     <details className="px-1 pb-1">
       <summary className="block text-center mt-1 mb-0 mx-auto p-3 rounded bg-rose-900/80 hover:bg-rose-900/95 text-theme-900 cursor-pointer">
         <div className="flex items-center justify-center text-xs font-bold">
-          <IoAlertCircle className="mr-1 w-5 h-5"/>{t("widget.api_error")} {t("widget.information")}
+          <IoAlertCircle className="mr-1 w-5 h-5"/>{t("widget.api_error")} {error.message && t("widget.information")}
         </div>
       </summary>
       <div className="bg-white dark:bg-theme-200/50 mt-2 rounded text-rose-900 text-xs font-mono whitespace-pre-wrap break-all">
         <ul className="p-4">
-          <li className="mb-2">
+          {error.message && <li>
             <span className="text-black">{t("widget.api_error")}:</span> {error.message}
-          </li>
-          {error.url && <li className="mb-2">
+          </li>}
+          {error.url && <li className="mt-2">
             <span className="text-black">{t("widget.url")}:</span> {error.url}
           </li>}
-          {error.rawError && <li className="mb-2">
+          {error.rawError && <li className="mt-2">
             <span className="text-black">{t("widget.raw_error")}:</span>
             <div className="ml-2">
               {displayError(error.rawError)}
             </div>
           </li>}
-          {error.data && <li className="mb-2">
+          {error.data && <li className="mt-2">
             <span className="text-black">{t("widget.response_data")}:</span>
             <div className="ml-2">
               {displayData(error.data)}
diff --git a/src/pages/api/docker/stats/[...service].js b/src/pages/api/docker/stats/[...service].js
index ca8c8bd3a..d214ffb28 100644
--- a/src/pages/api/docker/stats/[...service].js
+++ b/src/pages/api/docker/stats/[...service].js
@@ -46,7 +46,7 @@ export default async function handler(req, res) {
     });
   } catch {
     res.status(500).send({
-      error: "unknown error",
+      error: {message: "Unknown error"},
     });
   }
 }