From dda16fd5c9298183f96296db329bb55a567bb99c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sindri=20=C3=9E=C3=B3r?=
 <70705172+SindriTh@users.noreply.github.com>
Date: Tue, 21 Nov 2023 09:58:11 +0000
Subject: [PATCH] Improve Performance of DBus Interface Handling and ListItem
 Rendering (#270)

* Added memo around ListItem

* Removed history

* Rewrite Demo

* Subscription handling rewrite

* Fixed number tinker
---
 .../IPC/src/Components/IOList/ListItem.tsx    | 126 ++----
 .../IPC/src/Components/Tinker/BoolTinker.tsx  |  35 +-
 .../IPC/src/Components/Tinker/JSONTinker.tsx  |  37 +-
 .../src/Components/Tinker/NumberTinker.tsx    |  54 ++-
 .../src/Components/Tinker/StringTinker.tsx    |  32 +-
 cockpit/IPC/src/views/IODebug.css             |  12 +-
 cockpit/IPC/src/views/IODebug.tsx             | 393 ++++++------------
 cockpit/IPC/src/views/ListDBUS.tsx            |   8 +
 cockpit/IPC/src/views/StateMachine.tsx        |   1 -
 9 files changed, 299 insertions(+), 399 deletions(-)

diff --git a/cockpit/IPC/src/Components/IOList/ListItem.tsx b/cockpit/IPC/src/Components/IOList/ListItem.tsx
index 34fcc71c64..aa191e6539 100644
--- a/cockpit/IPC/src/Components/IOList/ListItem.tsx
+++ b/cockpit/IPC/src/Components/IOList/ListItem.tsx
@@ -4,37 +4,29 @@ import React, { ChangeEvent, ReactElement } from 'react';
 import {
   ClipboardCopy,
   ClipboardCopyVariant,
-  DataListAction,
   DataListCell,
   DataListItem,
   DataListItemCells,
   DataListItemRow,
-  Dropdown,
-  DropdownItem,
-  DropdownList,
-  MenuToggleElement,
   Tooltip,
 } from '@patternfly/react-core';
 import Circle from 'src/Components/Simple/Circle';
 import { removeSlotOrg } from 'src/Components/Form/WidgetFunctions';
-import CustomMenuToggle from 'src/Components/Dropdown/CustomMenuToggle';
 import StringTinker from 'src/Components/Tinker/StringTinker';
 import BoolTinker from 'src/Components/Tinker/BoolTinker';
 import NumberTinker from 'src/Components/Tinker/NumberTinker';
 
 interface ListItemProps {
   dbusInterface: any,
-  index: number,
-  activeDropdown: number | null,
-  dropdownRefs: any,
-  onToggleClick: any,
-  setModalOpen: any,
   onCheck: (checked: boolean) => void,
+  isChecked: boolean,
+  data: any,
 }
 
 // eslint-disable-next-line react/function-component-definition
 const ListItem: React.FC<ListItemProps> = ({
-  dbusInterface, index, activeDropdown, dropdownRefs, onToggleClick, setModalOpen, onCheck,
+  dbusInterface,
+  onCheck, isChecked, data,
 }) => {
   const isMobile = window.innerWidth < 768;
   /**
@@ -42,15 +34,17 @@ const ListItem: React.FC<ListItemProps> = ({
   * @param data The data to be displayed
   * @returns ReactElement to be displayed
   */
-  function handleBoolContent(data: any): ReactElement {
+  function handleBoolContent(booldata: any): ReactElement {
     return (
       <Tooltip
-        content={`Value is ${data.Value ? 'true' : 'false'}`}
+        content={booldata !== null && isChecked ? `Value is ${booldata ? 'true' : 'false'}` : 'Unknown'} // NOSONAR
         enableFlip
         distance={5}
         entryDelay={1000}
       >
-        <Circle size="1rem" color={data.Value ? 'green' : 'red'} />
+        { isChecked && booldata !== null
+          ? <Circle size="1rem" color={booldata ? 'green' : 'red'} />
+          : <Circle size="1rem" color="#888888" />}
       </Tooltip>
     );
   }
@@ -60,10 +54,11 @@ const ListItem: React.FC<ListItemProps> = ({
    * @param data The data to be displayed
    * @returns ReactElement to be displayed
    */
-  function handleStringContent(data: any): ReactElement {
-    return (
-      <p style={{ marginBottom: '0px' }}>{data.Value}</p>
-    );
+  function handleStringContent(stringdata: any): ReactElement {
+    if (!isChecked || stringdata === null) {
+      return (<p style={{ marginBottom: '0px' }}>Unknown</p>);
+    }
+    return (<p style={{ marginBottom: '0px' }}>{stringdata}</p>);
   }
 
   /**
@@ -71,12 +66,16 @@ const ListItem: React.FC<ListItemProps> = ({
    * @param data The data to be displayed
    * @returns ReactElement to be displayed
    */
-  function handleJSONContent(data: any): ReactElement {
+  function handleJSONContent(stringdata: any): ReactElement {
+    if (!isChecked || stringdata === null) {
+      return (<p style={{ marginBottom: '0px' }}>Unknown</p>);
+    }
+
     // Test if string is JSON
     let isJSON = false;
-    if (data.Value[0] === '{' || data.Value[0] === '[') {
+    if (stringdata[0] === '{' || stringdata[0] === '[') {
       try {
-        JSON.parse(data.Value);
+        JSON.parse(stringdata);
         isJSON = true;
       } catch {
         isJSON = false;
@@ -92,16 +91,16 @@ const ListItem: React.FC<ListItemProps> = ({
           clickTip="Copied"
           variant={ClipboardCopyVariant.expansion}
           style={{
-            alignSelf: 'baseline', marginTop: '-.85rem', zIndex: 1, maxWidth: '25vw',
+            alignSelf: 'baseline', marginTop: '-.25rem', zIndex: 1, maxWidth: '25vw',
           }}
         >
-          {JSON.stringify(JSON.parse(data.Value), null, 2)}
+          {JSON.stringify(JSON.parse(stringdata), null, 2)}
         </ClipboardCopy>
       );
     }
 
     return (
-      <p style={{ marginBottom: '0px' }}>{data.Value}</p>
+      <p style={{ marginBottom: '0px' }}>{stringdata}</p>
     );
   }
 
@@ -110,23 +109,23 @@ const ListItem: React.FC<ListItemProps> = ({
    * @param data Interface data
    * @returns ReactElement to be displayed
    */
-  function getSecondaryContent(data: any): ReactElement | null {
-    const internals = (interfacedata: any) => {
-      switch (interfacedata.type) {
+  function getSecondaryContent(interfaceData: any): ReactElement | null {
+    const internals = (secData: any) => {
+      switch (secData.type) {
         case 'boolean':
-          return handleBoolContent(interfacedata.proxy.data);
+          return handleBoolContent(data);
 
         case 'string':
-          return handleJSONContent(interfacedata.proxy.data);
+          return handleJSONContent(data);
           // If the string is not JSON, it falls back to string
 
         case 'object':
-          return handleJSONContent(interfacedata.proxy.data);
+          return handleJSONContent(data);
 
         case 'number':
         case 'integer':
         case 'double':
-          return handleStringContent(interfacedata.proxy.data);
+          return handleStringContent(data);
 
         default:
           return <>Type Error</>;
@@ -142,7 +141,7 @@ const ListItem: React.FC<ListItemProps> = ({
         padding: isMobile ? '10px' : '0px',
       }}
       >
-        {internals(data)}
+        {internals(interfaceData)}
       </div>
     );
   }
@@ -152,22 +151,22 @@ const ListItem: React.FC<ListItemProps> = ({
  * @param data Interface data
  * @returns ReactElement to be displayed
  */
-  function getTinkerInterface(data: any): React.ReactElement | null {
+  function getTinkerInterface(interfaceData: any): React.ReactElement | null {
     const internals = (interfacedata: any) => {
       switch (interfacedata.type) {
         case 'boolean':
-          return <BoolTinker data={interfacedata} />;
+          return <BoolTinker interfaceData={interfacedata} isChecked={isChecked} />;
 
         case 'string':
-          return <StringTinker data={interfacedata} />;
+          return <StringTinker interfaceData={interfacedata} isChecked={isChecked} />;
 
         case 'object':
-          return <StringTinker data={interfacedata} />;
+          return <StringTinker interfaceData={interfacedata} isChecked={isChecked} />;
 
         case 'number':
         case 'integer':
         case 'double':
-          return <NumberTinker data={interfacedata} />;
+          return <NumberTinker interfaceData={interfacedata} isChecked={isChecked} />;
 
         default:
           return <>Type Error</>;
@@ -181,35 +180,34 @@ const ListItem: React.FC<ListItemProps> = ({
         justifyContent: 'start',
       }}
       >
-        {internals(data)}
+        {internals(interfaceData)}
       </div>
     );
   }
-  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
-    console.log(value);
-  };
 
   const handleCheckboxChange = (event: ChangeEvent<HTMLInputElement>) => {
     onCheck(event.target.checked);
   };
 
   return (
-    <DataListItem aria-labelledby="check-action-item1" key={dbusInterface.proxy.iface + dbusInterface.process}>
+    <DataListItem aria-labelledby="check-action-item1" key={dbusInterface.interfaceName}>
       <DataListItemRow size={10}>
         <DataListCell key="checkbox" style={{ display: 'flex', alignItems: 'center', marginRight: '1rem' }}>
           <input
             type="checkbox"
             onChange={handleCheckboxChange}
-            aria-label={`Select ${dbusInterface.proxy.iface}`}
+            aria-label={`Select ${dbusInterface.interfaceName}`}
+            checked={isChecked}
           />
         </DataListCell>
         <DataListItemCells
           dataListCells={[
             <DataListCell key="primary content" style={{ textAlign: 'left' }}>
-              <p className="PrimaryText">{removeSlotOrg(dbusInterface.proxy.iface)}</p>
+              <p className="PrimaryText">{removeSlotOrg(dbusInterface.interfaceName)}</p>
             </DataListCell>,
             <DataListCell
               key={`${dbusInterface.interfaceName}-secondary-content`}
+              className="SecondaryText"
               style={{
                 textAlign: 'right',
                 height: '100%',
@@ -223,6 +221,7 @@ const ListItem: React.FC<ListItemProps> = ({
               ? (
                 <DataListCell
                   key={`${dbusInterface.interfaceName}-tinker-content`}
+                  className="TinkerText"
                   style={{
                     textAlign: 'right',
                     height: '100%',
@@ -236,43 +235,6 @@ const ListItem: React.FC<ListItemProps> = ({
               : null,
           ]}
         />
-        <DataListAction
-          aria-labelledby="check-action-item1 check-action-action1"
-          id="check-action-action1"
-          aria-label="Actions"
-          isPlainButtonAction
-        >
-          <Dropdown
-            className="DropdownItem"
-            key={`${dbusInterface.proxy.iface}${dbusInterface.process}`}
-            toggle={(toggleRef: React.Ref<MenuToggleElement>) => ( // NOSONAR
-              <CustomMenuToggle
-                toggleRef={(ref) => {
-                  if (typeof toggleRef === 'function') {
-                    toggleRef(ref);
-                  }
-                  dropdownRefs.current[index] = ref; // Store the ref for the dropdown
-                }}
-                onClick={() => onToggleClick(index)}
-                isExpanded={dbusInterface.dropdown}
-              />
-            )}
-            isOpen={activeDropdown === index}
-            onSelect={onSelect}
-            popperProps={{ enableFlip: true }}
-          >
-            <DropdownList>
-              <DropdownItem key="history" style={{ textDecoration: 'none' }} isDisabled> View History </DropdownItem>
-              <DropdownItem
-                key={`watch-${dbusInterface.interfaceName}-dd`}
-                style={{ textDecoration: 'none' }}
-                onMouseDown={() => setModalOpen(index)}
-              >
-                Watch
-              </DropdownItem>
-            </DropdownList>
-          </Dropdown>
-        </DataListAction>
       </DataListItemRow>
     </DataListItem>
   );
diff --git a/cockpit/IPC/src/Components/Tinker/BoolTinker.tsx b/cockpit/IPC/src/Components/Tinker/BoolTinker.tsx
index b43a69d72a..750949ba1d 100644
--- a/cockpit/IPC/src/Components/Tinker/BoolTinker.tsx
+++ b/cockpit/IPC/src/Components/Tinker/BoolTinker.tsx
@@ -1,32 +1,41 @@
 /* eslint-disable react/function-component-definition */
 import React from 'react';
+import { TFC_DBUS_DOMAIN, TFC_DBUS_ORGANIZATION } from 'src/variables';
 import { AlertVariant, Switch } from '@patternfly/react-core';
 import { useAlertContext } from '../Alert/AlertContext';
 
 interface BoolTinkerIface {
-  data: any
+  interfaceData: any;
+  isChecked: boolean;
 }
 
-const BoolTinker: React.FC<BoolTinkerIface> = ({ data }) => {
+const BoolTinker: React.FC<BoolTinkerIface> = ({ interfaceData, isChecked }) => {
   const { addAlert } = useAlertContext();
-  const [value, setValue] = React.useState(data.proxy.data.Value);
+  const [value, setValue] = React.useState(interfaceData.data);
+  const slotPath = `/${TFC_DBUS_DOMAIN}/${TFC_DBUS_ORGANIZATION}/Slots`;
+  const signalPath = `/${TFC_DBUS_DOMAIN}/${TFC_DBUS_ORGANIZATION}/Signals`;
 
-  const handleInputChange = (newValue: boolean) => {
-    data.proxy.Tinker(newValue ? 1 : 0).then(() => {
-      addAlert(`Value of ${data.interfaceName} has been set ${newValue ? 'true' : 'false'}`, AlertVariant.success);
-      setValue(newValue);
-    }).catch(() => {
-      addAlert(`Error setting value of ${data.interfaceName}`, AlertVariant.danger);
+  const handleInputChange = async (newValue: boolean) => {
+    const client = window.cockpit.dbus(interfaceData.process, { bus: 'system', superuser: 'try' });
+    const proxy = client.proxy(interfaceData.interfaceName, interfaceData.direction === 'slot' ? slotPath : signalPath);
+    await proxy.wait().then(() => {
+      proxy.Tinker(newValue ? 1 : 0).then(() => {
+        addAlert(`Value of ${interfaceData.interfaceName} has been set ${newValue ? 'true' : 'false'}`, AlertVariant.success);
+        setValue(newValue);
+      }).catch((e: any) => {
+        addAlert(`Error setting value of ${interfaceData.interfaceName}`, AlertVariant.danger);
+        console.log(e);
+      });
     });
   };
 
   return (
     <Switch
-      aria-label={`tinker-{${data.iface}}-{${data.process}}}`}
-      isChecked={value}
+      aria-label={`tinker-{${interfaceData.interfaceName}}-{${interfaceData.process}}}`}
+      isChecked={isChecked ? value : false}
       onChange={(e, val) => handleInputChange(val)}
-      isDisabled={false}
-      key={`${data.iface}-${data.process}`}
+      isDisabled={!isChecked}
+      key={`${interfaceData.interfaceName}-${interfaceData.process}`}
     />
   );
 };
diff --git a/cockpit/IPC/src/Components/Tinker/JSONTinker.tsx b/cockpit/IPC/src/Components/Tinker/JSONTinker.tsx
index 7c6aa43454..ba7998ad7e 100644
--- a/cockpit/IPC/src/Components/Tinker/JSONTinker.tsx
+++ b/cockpit/IPC/src/Components/Tinker/JSONTinker.tsx
@@ -4,44 +4,61 @@ import {
   AlertVariant, Button, ClipboardCopy, ClipboardCopyVariant,
 } from '@patternfly/react-core';
 import { CheckIcon } from '@patternfly/react-icons';
+import { TFC_DBUS_DOMAIN, TFC_DBUS_ORGANIZATION } from 'src/variables';
 import { useAlertContext } from '../Alert/AlertContext';
 
 interface StringTinkerIface {
-  data: any;
+  interfaceData: any;
+  isChecked: boolean;
 }
 
-const StringTinker: React.FC<StringTinkerIface> = ({ data }) => {
-  const [inputValue, setInputValue] = useState<string>(data.proxy.data.Value);
+// eslint-disable-next-line react/function-component-definition
+const StringTinker: React.FC<StringTinkerIface> = ({ interfaceData, isChecked }) => {
+  const [inputValue, setInputValue] = useState<string>(interfaceData.data);
   const { addAlert } = useAlertContext();
+  const slotPath = `/${TFC_DBUS_DOMAIN}/${TFC_DBUS_ORGANIZATION}/Slots`;
+  const signalPath = `/${TFC_DBUS_DOMAIN}/${TFC_DBUS_ORGANIZATION}/Signals`;
+
   const handleInputChange = (value: string | number | undefined) => {
     setInputValue(value?.toString() ?? '');
   };
 
-  function updateDBUS() {
-    data.proxy.Tinker(inputValue);
-    addAlert(`Value of ${data.interfaceName} has been set to ${inputValue}`, AlertVariant.success);
+  async function updateDBUS() {
+    const client = window.cockpit.dbus(interfaceData.process, { bus: 'system', superuser: 'try' });
+    const proxy = client.proxy(interfaceData.interfaceName, interfaceData.direction === 'slot' ? slotPath : signalPath);
+    await proxy.wait().then(() => {
+      proxy.Tinker(inputValue);
+    }).catch((e: any) => {
+      addAlert(`Error setting value of ${interfaceData.interfaceName}`, AlertVariant.danger);
+      console.log(e);
+    });
+    addAlert(`Value of ${interfaceData.interfaceName} has been set to ${inputValue}`, AlertVariant.success);
   }
 
+  if (!isChecked) {
+    return (
+      <p>Unknown</p>);
+  }
   return (
     <>
       <ClipboardCopy
         isCode
         hoverTip="Copy"
         isReadOnly
-        value={inputValue}
+        value={isChecked ? inputValue : ''}
         clickTip="Copied"
         variant={ClipboardCopyVariant.expansion}
         onChange={(_, val) => handleInputChange(val)}
         onKeyDown={(e) => { if (e.key === 'Enter') { updateDBUS(); } }}
         style={{ alignSelf: 'baseline', marginTop: '-.25rem', zIndex: 1 }}
-        key={`${data.iface}-${data.process}`}
+        key={`${interfaceData.interfaceName}-${interfaceData.process}`}
       >
-        {JSON.stringify(JSON.parse(data.Value), null, 2)}
+        {JSON.stringify(JSON.parse(interfaceData.Value), null, 2)}
       </ClipboardCopy>
 
       <Button
         variant="plain"
-        onClick={() => data.proxy.Tinker(inputValue)}
+        onClick={() => updateDBUS()}
         icon={<CheckIcon />}
       />
     </>
diff --git a/cockpit/IPC/src/Components/Tinker/NumberTinker.tsx b/cockpit/IPC/src/Components/Tinker/NumberTinker.tsx
index 7ed084a030..c4d904776f 100644
--- a/cockpit/IPC/src/Components/Tinker/NumberTinker.tsx
+++ b/cockpit/IPC/src/Components/Tinker/NumberTinker.tsx
@@ -1,40 +1,59 @@
 /* eslint-disable react/function-component-definition */
 import React, { useCallback, useMemo, useState } from 'react';
+import { TFC_DBUS_DOMAIN, TFC_DBUS_ORGANIZATION } from 'src/variables';
 import { AlertVariant, TextInput } from '@patternfly/react-core';
 import { useAlertContext } from '../Alert/AlertContext';
 
 interface NumberTinkerIface {
-  data: any;
+  interfaceData: any;
+  isChecked: boolean;
 }
 
-const NumberTinker: React.FC<NumberTinkerIface> = ({ data: InterfaceOBJ }) => {
+const NumberTinker: React.FC<NumberTinkerIface> = ({ interfaceData, isChecked }) => {
   const [error, setError] = useState<string | undefined>(undefined);
   const { addAlert } = useAlertContext();
-  const typeJson = useMemo(() => JSON.parse(InterfaceOBJ.proxy.data.Type), [InterfaceOBJ.proxy.data.Type]);
-  const type = typeJson.type[0];
-  const min = typeJson.minimum as number;
-  const max = typeJson.maximum as number;
+  const [typeJson, setTypeJson] = useState<{ type: string[], minimum: number | null, maximum: number | null }>();
+  function getType(): void {
+    const proxy = window.cockpit.dbus(interfaceData.process)
+      .proxy(interfaceData.interfaceName, `/${TFC_DBUS_DOMAIN}/${TFC_DBUS_ORGANIZATION}/Slots`);
+    proxy.wait().then(() => {
+      try {
+        setTypeJson(JSON.parse(proxy.data.Type));
+      } catch (e) {
+        setTypeJson({ type: ['integer'], minimum: null, maximum: null });
+      }
+    });
+  }
+  const slotPath = `/${TFC_DBUS_DOMAIN}/${TFC_DBUS_ORGANIZATION}/Slots`;
+  const signalPath = `/${TFC_DBUS_DOMAIN}/${TFC_DBUS_ORGANIZATION}/Signals`;
+
+  useMemo(() => {
+    getType();
+  }, [interfaceData]);
 
   const handleInputChange = (value: string) => {
-    if (type !== 'integer' && type !== 'number') {
+    if (!typeJson) {
+      return { value: undefined, error: 'Unknown type' };
+    }
+    if (typeJson.type[0] !== 'integer' && typeJson.type[0] !== 'number') {
       return { value: undefined, error: 'Unknown type' };
     }
 
-    const val = type === 'integer' ? parseInt(value, 10) : parseFloat(value);
+    const val = typeJson.type[0] === 'integer' ? parseInt(value, 10) : parseFloat(value);
 
-    if (val < min) {
+    if (typeJson.minimum && val < typeJson.minimum) {
       return { value: val, error: 'Value is too low' };
     }
-    if (val > max) {
+    if (typeJson.maximum && val > typeJson.maximum) {
       return { value: val, error: 'Value is too high' };
     }
 
     return { value: val, error: undefined };
   };
 
-  const [inputValue, setInputValue] = useState<number | undefined>(() => handleInputChange(InterfaceOBJ.proxy.data.Value).value);
+  const [inputValue, setInputValue] = useState<number | undefined>(() => handleInputChange(interfaceData.data).value);
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+  const handleKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       if (error) {
         addAlert(`Data Validation Error: ${error}`, AlertVariant.danger);
@@ -44,7 +63,11 @@ const NumberTinker: React.FC<NumberTinkerIface> = ({ data: InterfaceOBJ }) => {
         addAlert('Input Error: Invalid Input', AlertVariant.danger);
         return;
       }
-      InterfaceOBJ.proxy.Tinker(inputValue);
+      const client = window.cockpit.dbus(interfaceData.process, { bus: 'system', superuser: 'try' });
+      const proxy = client.proxy(interfaceData.interfaceName, interfaceData.direction === 'slot' ? slotPath : signalPath);
+      await proxy.wait().then(() => {
+        proxy.Tinker(inputValue);
+      });
     }
   };
 
@@ -56,14 +79,15 @@ const NumberTinker: React.FC<NumberTinkerIface> = ({ data: InterfaceOBJ }) => {
 
   return (
     <TextInput
-      value={inputValue}
+      value={isChecked ? inputValue : ''}
       onChange={onChangeHandler}
       onKeyDown={handleKeyDown}
       validated={error ? 'error' : 'default'}
       type="number"
+      isDisabled={!isChecked}
       aria-label="tinker text input"
       className="tinker-number-input"
-      key={`${InterfaceOBJ.iface}-${InterfaceOBJ.process}`}
+      key={`${interfaceData.iface}-${interfaceData.process}`}
       style={{ minWidth: '4rem' }}
     />
   );
diff --git a/cockpit/IPC/src/Components/Tinker/StringTinker.tsx b/cockpit/IPC/src/Components/Tinker/StringTinker.tsx
index b41af15a44..17acebbfb9 100644
--- a/cockpit/IPC/src/Components/Tinker/StringTinker.tsx
+++ b/cockpit/IPC/src/Components/Tinker/StringTinker.tsx
@@ -1,38 +1,50 @@
 /* eslint-disable react/function-component-definition */
 import React, { useState } from 'react';
+import { TFC_DBUS_DOMAIN, TFC_DBUS_ORGANIZATION } from 'src/variables';
 import { AlertVariant, Button, TextInput } from '@patternfly/react-core';
 import { CheckIcon } from '@patternfly/react-icons';
 import { useAlertContext } from '../Alert/AlertContext';
 
 interface StringTinkerIface {
-  data: any;
+  interfaceData: any;
+  isChecked: boolean;
 }
 
-const StringTinker: React.FC<StringTinkerIface> = ({ data }) => {
-  const [inputValue, setInputValue] = useState<string>(data.proxy.data.Value);
+const StringTinker: React.FC<StringTinkerIface> = ({ interfaceData, isChecked }) => {
+  const [inputValue, setInputValue] = useState<string>(interfaceData.data);
   const { addAlert } = useAlertContext();
+  const slotPath = `/${TFC_DBUS_DOMAIN}/${TFC_DBUS_ORGANIZATION}/Slots`;
+  const signalPath = `/${TFC_DBUS_DOMAIN}/${TFC_DBUS_ORGANIZATION}/Signals`;
 
   const handleInputChange = (value: string) => {
     setInputValue(value);
   };
 
-  function updateDBUS() {
-    data.proxy.Tinker(inputValue);
-    addAlert(`Value of ${data.interfaceName} has been set to ${inputValue}`, AlertVariant.success);
+  async function updateDBUS() {
+    const client = window.cockpit.dbus(interfaceData.process, { bus: 'system', superuser: 'try' });
+    const proxy = client.proxy(interfaceData.interfaceName, interfaceData.direction === 'slot' ? slotPath : signalPath);
+    await proxy.wait().then(() => {
+      addAlert(`Value of ${interfaceData.interfaceName} has been set to ${inputValue}`, AlertVariant.success);
+      proxy.Tinker(inputValue);
+    }).catch((e: any) => {
+      addAlert(`Error setting value of ${interfaceData.interfaceName}`, AlertVariant.danger);
+      console.log(e);
+    });
   }
 
   return (
     <>
       <TextInput
-        value={inputValue}
+        value={isChecked ? inputValue : ''}
         onChange={(_, val) => handleInputChange(val)}
         onKeyDown={(e) => { if (e.key === 'Enter') { updateDBUS(); } }}
         type="text"
         aria-label="tinker text input"
-        key={`${data.iface}-${data.process}`}
-        style={{ minWidth: data.proxy.data.Value === inputValue ? '4rem' : '3rem' }}
+        key={`${interfaceData.interfaceName}-${interfaceData.process}`}
+        style={{ minWidth: interfaceData.data === inputValue ? '4rem' : '3rem' }}
+        isDisabled={!isChecked}
       />
-      {data.proxy.data.Value === inputValue ? null : (
+      {interfaceData.data === inputValue ? null : (
         <Button
           variant="plain"
           onClick={() => updateDBUS()}
diff --git a/cockpit/IPC/src/views/IODebug.css b/cockpit/IPC/src/views/IODebug.css
index 41b9cedf4b..00b5a937b7 100644
--- a/cockpit/IPC/src/views/IODebug.css
+++ b/cockpit/IPC/src/views/IODebug.css
@@ -66,7 +66,9 @@ button.Hovr {
 .PrimaryText {
     min-width: 30rem;
 }
-
+.SecondaryText {
+    min-width: 15rem !important;
+}
 .TransitionUp {
     transition: transform 0.3s ease-in-out;
 }
@@ -99,8 +101,16 @@ button.Hovr {
     .tinker-number-input {
         width: 6rem;
     }
+    .SecondaryText {
+        min-width: unset;
+    }
   }
 
+  @media (max-width: 1000px) {
+    .SecondaryText {
+        min-width: 10rem !important;
+    }
+  }
 .pf-v5-c-clipboard-copy__expandable-content {
     width: max-content !important;
 }
\ No newline at end of file
diff --git a/cockpit/IPC/src/views/IODebug.tsx b/cockpit/IPC/src/views/IODebug.tsx
index fab153e22b..633f955c7d 100644
--- a/cockpit/IPC/src/views/IODebug.tsx
+++ b/cockpit/IPC/src/views/IODebug.tsx
@@ -6,26 +6,21 @@ import React, {
   useEffect, useRef, useState,
 } from 'react';
 import {
-  DataList,
   Title,
-  Spinner,
   Divider,
+  DataList,
+  Spinner,
+  AlertVariant,
 } from '@patternfly/react-core';
-import { loadExternalScript } from 'src/Components/Interface/ScriptLoader';
 import './IODebug.css';
-import ListItem from 'src/Components/IOList/ListItem';
 import { DarkModeType } from 'src/App';
 import { TFC_DBUS_DOMAIN, TFC_DBUS_ORGANIZATION } from 'src/variables';
-import DraggableModal from 'src/Components/DraggableModal/DraggableModal';
-import { removeSlotOrg } from 'src/Components/Form/WidgetFunctions';
-import { AngleDownIcon } from '@patternfly/react-icons';
-import ToolBar, { FilterConfig } from 'src/Components/Table/Toolbar';
-import MultiSelectAttribute from 'src/Components/Table/ToolbarItems/MultiSelectAttribute';
+import loadExternalScript from 'src/Components/Interface/ScriptLoader';
+import ListItem from 'src/Components/IOList/ListItem';
+import { useAlertContext } from 'src/Components/Alert/AlertContext';
 import TextboxAttribute from 'src/Components/Table/ToolbarItems/TextBoxAttribute';
-
-declare global {
-  interface Window { cockpit: any; }
-}
+import MultiSelectAttribute from 'src/Components/Table/ToolbarItems/MultiSelectAttribute';
+import ToolBar, { FilterConfig } from 'src/Components/Table/Toolbar';
 
 /**
  * Parses DBUS XML strings to extract interfaces
@@ -51,142 +46,146 @@ const parseXMLInterfaces = (xml: string): { name: string, valueType: string }[]
 
 // eslint-disable-next-line react/function-component-definition
 const IODebug: React.FC<DarkModeType> = ({ isDark }) => {
-  const [dbusInterfaces, setDbusInterfaces] = useState<any[]>([]);
+  const [processDBUS, setProcessDBUS] = useState<any>();
   const [processes, setProcesses] = useState<string[]>();
-  const [isShowingEvents, setIsShowingEvents] = useState<boolean>(false);
-  const [activeDropdown, setActiveDropdown] = useState<number | null>(null);
-  const [history, setHistory] = useState<any>({});
-  const [openModals, setOpenModals] = useState<number[]>([]);
-  // eslint-disable-next-line @typescript-eslint/comma-spacing
-  const eventHandlersRef = useRef<Map<string,(e: any) => void>>(new Map()); // NOSONAR
-  const isMobile = window.matchMedia('(max-width: 768px)').matches;
-  const [unsortedEvents, setUnsortedEvents] = useState<any[]>([]);
+  const [dbusInterfaces, setDbusInterfaces] = useState<any[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
 
   const slotPath = `/${TFC_DBUS_DOMAIN}/${TFC_DBUS_ORGANIZATION}/Slots`;
   const signalPath = `/${TFC_DBUS_DOMAIN}/${TFC_DBUS_ORGANIZATION}/Signals`;
 
-  const handleChanged = (value: any, iFaceName:any) => {
-    setDbusInterfaces((prevInterfaces) => {
-      const index = prevInterfaces.findIndex((iface) => iface.interfaceName === iFaceName);
-      if (index === -1) return prevInterfaces;
-
-      const updatedInterfaces = [...prevInterfaces];
-      updatedInterfaces[index].proxy.data.Value = value;
-      if (openModals.includes(index) && !isMobile) {
-        setHistory((prevHistory: any) => {
-          const newHistory = { ...prevHistory };
-          if (!newHistory[iFaceName]) {
-            newHistory[iFaceName] = [];
-          }
-          if (newHistory[iFaceName].length > 200) { // Limit history to 200 entries per interface
-            newHistory[iFaceName].shift();
-          }
-          newHistory[iFaceName].push({ value, timestamp: Date.now() });
-          return newHistory;
-        });
-      }
-      if (isMobile) {
-        setUnsortedEvents((prevEvents: any) => {
-          const newEvents = [...prevEvents];
-          if (newEvents.length > 20) { // Limit history to 20 entries per interface
-            newEvents.shift();
-          }
-          newEvents.push({ interface: iFaceName, value, timestamp: Date.now() });
-          return newEvents;
-        });
-      }
+  const { addAlert } = useAlertContext();
+
+  const dbusInterfaceRef = useRef<any[]>([]);
 
-      return updatedInterfaces;
+  useEffect(() => {
+    loadExternalScript((allNames: string[]) => {
+      setProcesses(
+        allNames.filter((name: string) => name.includes(`${TFC_DBUS_DOMAIN}.${TFC_DBUS_ORGANIZATION}.tfc.`)),
+      );
+      setProcessDBUS(window.cockpit.dbus(null, { bus: 'system', superuser: 'try' }));
     });
+  }, []);
+
+  const notifyHandler = (data: any) => {
+    const removePath = data.detail[Object.keys(data.detail)[0]];
+    if (!removePath) return;
+    const ifaceName = Object.keys(removePath)[0];
+    const changedIndex = dbusInterfaceRef.current.findIndex((iface) => iface.interfaceName === ifaceName);
+    if (changedIndex !== -1 && dbusInterfaceRef.current[changedIndex].listener) {
+      setDbusInterfaces((prevState) => {
+        const newState = [...prevState];
+        const index = newState.findIndex((iface) => iface.interfaceName === ifaceName);
+        if (index !== -1) {
+          newState[index].data = removePath[ifaceName].Value;
+        }
+        return newState;
+      });
+    }
   };
 
-  const subscribeToItem = async (name: string, process: string, path:string) => {
-    const processDBUS = window.cockpit.dbus(process, { bus: 'system', superuser: 'try' });
-    console.log('Subscribed to ', name);
+  useEffect(() => {
+    if (!processDBUS || !loading) return;
 
     const match = {
-      interface: 'org.freedesktop.DBus.Properties',
-      path,
-      member: 'PropertiesChanged', // Standard DBus signal for property changes
-      arg0: name,
+      path_namespace: `/${TFC_DBUS_DOMAIN}/${TFC_DBUS_ORGANIZATION}`,
     };
-    const subscription:any = processDBUS.subscribe(match, (pathz: any, iface: any, signal: any, args: any) => {
-      // Check if the changed property is 'Value'
-      if (args && Object.keys(args[1]).includes('Value') && args[1].Value.v !== undefined) {
-        handleChanged(args[1].Value.v, name);
-      }
-    });
-    eventHandlersRef.current.set(name, subscription);
+    processDBUS.watch(match);
 
-    setDbusInterfaces((prevInterfaces) => {
-      const index = prevInterfaces.findIndex((iface) => iface.interfaceName === name);
-      if (index === -1) return prevInterfaces;
+    // Ensure only one listener is active at a time
+    processDBUS.removeEventListener('notify', notifyHandler);
+    console.log('Adding Event listener');
+    processDBUS.addEventListener('notify', notifyHandler);
 
-      const updatedInterfaces = [...prevInterfaces];
-      updatedInterfaces[index].listener = subscription;
-      return updatedInterfaces;
-    });
+    setLoading(false);
 
-    return subscription;
+    // eslint-disable-next-line consistent-return
+    return () => {
+      console.log('Removing Event listener');
+      processDBUS.removeEventListener('notify', notifyHandler);
+    };
+  }, [processDBUS]);
+
+  const subscribe = async (interfaceName: string) => {
+    const interfaceIndex = dbusInterfaces.findIndex((iface) => iface.interfaceName === interfaceName);
+    if (interfaceIndex === -1) return;
+    const client = window.cockpit.dbus(dbusInterfaces[interfaceIndex].process, { bus: 'system', superuser: 'try' });
+    const proxy = client.proxy(interfaceName, dbusInterfaces[interfaceIndex].direction === 'slot' ? slotPath : signalPath);
+    await proxy.wait().then(() => {
+      setDbusInterfaces((prevState) => {
+        const newState = [...prevState];
+        const index = newState.findIndex((iface) => iface.interfaceName === interfaceName);
+        if (index !== -1) {
+          newState[index].listener = true;
+          newState[index].data = proxy.data.Value;
+        }
+        return newState;
+      });
+    }).catch((error: any) => {
+      addAlert(`Failed to subscribe to ${interfaceName}`, AlertVariant.danger);
+      console.error('Failed to subscribe to interface:', error);
+    });
   };
 
-  const unsubscribeFromItem = async (name: string) => {
-    const subscription = dbusInterfaces.find((iface) => iface.interfaceName === name)?.listener;
-    if (!subscription) return;
-
-    subscription.remove();
-    eventHandlersRef.current.delete(name);
-    console.log('Unsubscribed from ', name);
-
-    setDbusInterfaces((prevInterfaces) => {
-      const index = prevInterfaces.findIndex((iface) => iface.interfaceName === name);
-      if (index === -1) return prevInterfaces;
-
-      const updatedInterfaces = [...prevInterfaces];
-      updatedInterfaces[index].listener = false;
-      return updatedInterfaces;
+  const unsubscribe = (interfaceName: string) => {
+    setDbusInterfaces((prevState) => {
+      const newState = [...prevState];
+      const index = newState.findIndex((iface) => iface.interfaceName === interfaceName);
+      if (index !== -1) {
+        newState[index].listener = false;
+      }
+      if (index === -1) {
+        addAlert(`Failed to unsubscribe from ${interfaceName}`, AlertVariant.danger);
+      }
+      return newState;
     });
   };
 
-  const getInterfaceData = async (interfaces:any, processDBUS: any, path:string, direction:string, process:string) => {
-    const processProxy = processDBUS.proxy('org.freedesktop.DBus.Introspectable', path);
+  useEffect(() => {
+    dbusInterfaceRef.current = dbusInterfaces;
+  }, [dbusInterfaces]);
+
+  const getInterfaceData = async (interfaces:any, tempDBUS: any, path:string, direction:string, process:string) => {
+    const processProxy = tempDBUS.proxy('org.freedesktop.DBus.Introspectable', path);
 
     try {
-      // eslint-disable-next-line no-await-in-loop, @typescript-eslint/no-loop-func
-      await processProxy.call('Introspect').then(async (data: any) => {
-        const interfacesData = parseXMLInterfaces(data);
-        // eslint-disable-next-line no-restricted-syntax
-        for (const interfaceData of interfacesData) {
-          const proxy = processDBUS.proxy(interfaceData.name, path);
-          // eslint-disable-next-line no-await-in-loop
-          await proxy.wait().then(() => {
-            interfaces.push({
-              proxy,
-              process,
-              interfaceName: interfaceData.name,
-              type: JSON.parse(proxy.Type).type[0] ?? interfaceData.valueType,
-              direction,
-              hidden: false,
-              listener: false,
-            });
-          });
-        }
+      const data = await processProxy.call('Introspect');
+      const interfacesData = parseXMLInterfaces(data);
+
+      // Create an array of promises for each proxy creation
+      const proxyPromises = interfacesData.map(async (interfaceData) => {
+        const proxy = tempDBUS.proxy(interfaceData.name, path);
+        await proxy.wait(); // Wait for the proxy to be ready
+
+        return {
+          data: proxy.data.Value,
+          process,
+          interfaceName: interfaceData.name,
+          type: JSON.parse(proxy.Type).type[0] ?? interfaceData.valueType,
+          direction,
+          hidden: false,
+          listener: false,
+        };
       });
+
+      // Wait for all proxies to be created
+      const newInterfaces = await Promise.all(proxyPromises);
+      interfaces.push(...newInterfaces);
     } catch (e) {
-      console.log(e);
+      console.error('Error in getInterfaceData:', e);
     }
   };
 
   const getInterfaceDataForProcess = async (process: any) => {
     const interfaces: any[] = [];
-    const processDBUS = window.cockpit.dbus(process, { bus: 'system', superuser: 'try' });
+    const tempDBUS = window.cockpit.dbus(process, { bus: 'system', superuser: 'try' });
     try {
-      await getInterfaceData(interfaces, processDBUS, slotPath, 'slot', process);
+      await getInterfaceData(interfaces, tempDBUS, slotPath, 'slot', process);
     } catch (e) {
       console.error(`Failed to get interface data for process ${process}:`, e);
     }
     try {
-      await getInterfaceData(interfaces, processDBUS, signalPath, 'signal', process);
+      await getInterfaceData(interfaces, tempDBUS, signalPath, 'signal', process);
     } catch (e) {
       console.error(`Failed to get interface data for process ${process}:`, e);
     }
@@ -206,64 +205,6 @@ const IODebug: React.FC<DarkModeType> = ({ isDark }) => {
     fetchAndConnectInterfaces();
   }, [processes]);
 
-  useEffect(() => {
-    const callback = (allNames: string[]) => {
-      setProcesses(
-        allNames.filter((name: string) => name.includes(`${TFC_DBUS_DOMAIN}.${TFC_DBUS_ORGANIZATION}.tfc.`)),
-      );
-    };
-    loadExternalScript(callback);
-  }, []);
-
-  /**
-   * Toggles the dropdown for the given index
-   * @param index Index of the dropdown
-   */
-  const onToggleClick = (index: number) => {
-    if (activeDropdown === index) {
-      setActiveDropdown(null);
-    } else {
-      setActiveDropdown(index);
-    }
-  };
-
-  const dropdownRefs = useRef<any[]>([]); // Create a ref array to hold dropdown references
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRefs.current.some((ref) => ref?.contains(event.target))) {
-        return;
-      }
-      setActiveDropdown(null); // Close all dropdowns
-    };
-
-    document.addEventListener('click', handleClickOutside);
-    return () => document.removeEventListener('click', handleClickOutside);
-  }, []);
-
-  const openModal = (index: number) => {
-    setOpenModals((prevOpenModals) => [...prevOpenModals, index]);
-  };
-  const closeModal = (index: number) => {
-    setOpenModals((prevOpenModals) => prevOpenModals.filter((i) => i !== index));
-  };
-  const isModalOpen = (index: number) => openModals.includes(index);
-
-  // use effect to scroll to bottom of div on unsortedEvent change
-  const scrollRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    if (scrollRef.current) {
-      const element = scrollRef.current;
-      const isNearBottom = element.scrollTop + element.clientHeight >= element.scrollHeight - 80;
-
-      if (isNearBottom) {
-        element.scrollTop = element.scrollHeight;
-      }
-    }
-  }, [unsortedEvents]);
-
-  // FILTER CODE
   const filterRefs: Record<string, React.RefObject<HTMLInputElement>> = {
     Name: useRef<HTMLInputElement | null>(null),
     Type: useRef<HTMLInputElement | null>(null),
@@ -423,20 +364,18 @@ const IODebug: React.FC<DarkModeType> = ({ isDark }) => {
             Slots
           </Title>
           <DataList aria-label="Checkbox and action data list example" key="slots">
-            {dbusInterfaces.length > 0 ? dbusInterfaces.map((dbusInterface: any, index: number) => {
+            {dbusInterfaces.length > 0 ? dbusInterfaces.map((dbusInterface: any) => {
               if (!dbusInterface.hidden && dbusInterface.direction === 'slot') {
                 return (
                   <ListItem
                     dbusInterface={dbusInterface}
-                    index={index}
                     key={`${dbusInterface.interfaceName}-${dbusInterface.process}-List-Slot`}
-                    activeDropdown={activeDropdown}
-                    dropdownRefs={dropdownRefs}
-                    onToggleClick={onToggleClick}
-                    setModalOpen={(i:number) => openModal(i)}
+                    isChecked={dbusInterface.listener}
+                    data={dbusInterface.data}
                     onCheck={() => (dbusInterface.listener
-                      ? unsubscribeFromItem(dbusInterface.interfaceName)
-                      : subscribeToItem(dbusInterface.interfaceName, dbusInterface.process, slotPath))}
+                      ? unsubscribe(dbusInterface.interfaceName)
+                      : subscribe(dbusInterface.interfaceName)
+                    )}
                   />
                 );
               }
@@ -449,20 +388,18 @@ const IODebug: React.FC<DarkModeType> = ({ isDark }) => {
             Signals
           </Title>
           <DataList aria-label="Checkbox and action data list example" key="signals">
-            {dbusInterfaces.length > 0 ? dbusInterfaces.map((dbusInterface: any, index: number) => {
+            {dbusInterfaces.length > 0 ? dbusInterfaces.map((dbusInterface: any) => {
               if (!dbusInterface.hidden && dbusInterface.direction === 'signal') {
                 return (
                   <ListItem
                     dbusInterface={dbusInterface}
-                    index={index}
                     key={`${dbusInterface.interfaceName}-${dbusInterface.process}-List-Signal`}
-                    activeDropdown={activeDropdown}
-                    dropdownRefs={dropdownRefs}
-                    onToggleClick={onToggleClick}
-                    setModalOpen={(i:number) => openModal(i)}
+                    isChecked={dbusInterface.listener}
+                    data={dbusInterface.data}
                     onCheck={() => (dbusInterface.listener
-                      ? unsubscribeFromItem(dbusInterface.name)
-                      : subscribeToItem(dbusInterface.interfaceName, dbusInterface.process, slotPath))}
+                      ? unsubscribe(dbusInterface.interfaceName)
+                      : subscribe(dbusInterface.interfaceName)
+                    )}
                   />
                 );
               }
@@ -473,84 +410,6 @@ const IODebug: React.FC<DarkModeType> = ({ isDark }) => {
           <div style={{ height: '10rem' }} />
         </div>
       </div>
-      {!isMobile && dbusInterfaces.map((dbusInterface:any, index:number) => (
-        <DraggableModal
-          key={`${dbusInterface.interfaceName}-${dbusInterface.process}-Modal`}
-          iface={dbusInterface}
-          isOpen={isModalOpen(index)}
-          visibilityIndex={openModals.indexOf(index)}
-          onClose={() => closeModal(index)}
-          datapoints={history[dbusInterface.interfaceName] ?? []}
-        >
-          {history[dbusInterface.interfaceName]?.map((datapoint: any) => (
-            <React.Fragment key={datapoint.timestamp}>
-              <div
-                style={{
-                  display: 'flex', flexDirection: 'row', justifyContent: 'space-between', padding: '0px 2rem',
-                }}
-              >
-                <div style={{ color: '#EEE' }}>
-                  {/* eslint-disable-next-line max-len */ }
-                  {`${new Date(datapoint.timestamp).toLocaleTimeString('de-DE')}.${new Date(datapoint.timestamp).getMilliseconds()}`}
-                </div>
-                <div style={{ color: '#EEE' }}>{datapoint.value.toString()}</div>
-              </div>
-            </React.Fragment>
-          ))}
-        </DraggableModal>
-      ))}
-      {isMobile
-                && (
-                <AngleDownIcon
-                  onClick={() => setIsShowingEvents(!isShowingEvents)}
-                  style={{
-                    position: 'fixed',
-                    bottom: 'calc(6.8rem + 5px)',
-                    left: '5px',
-                    transform: isShowingEvents ? 'translateY(0)' : 'translateY(6.8rem) rotate(180deg)',
-                  }}
-                  className="TransitionUp ArrowIcons"
-                />
-                )}
-      {isMobile
-            && (
-            <div
-              ref={scrollRef}
-              style={{
-                position: 'fixed',
-                bottom: '0px',
-                height: '6.8rem',
-                overflowY: 'scroll',
-                transform: isShowingEvents ? 'translateY(0)' : 'translateY(7rem)',
-                backgroundColor: '#111',
-                width: '100vw',
-              }}
-              className="TransitionUp"
-            >
-              {unsortedEvents.map((event:any) => (
-                <div
-                  key={event.timestamp}
-                  style={{
-                    display: 'flex',
-                    flexDirection: 'row',
-                    justifyContent: 'space-between',
-                    padding: '0px 0.2rem',
-                    width: '100vw',
-                    color: '#EEE',
-                    zIndex: 2,
-                  }}
-                >
-                  <p>
-                    {removeSlotOrg(event.interface)}
-                  </p>
-                  <p>
-                    {`${new Date(event.timestamp).toLocaleTimeString('de-DE')}.${new Date(event.timestamp).getMilliseconds()}`}
-                  </p>
-                  <p>{event.value.toString()}</p>
-                </div>
-              ))}
-            </div>
-            )}
     </div>
   );
 };
diff --git a/cockpit/IPC/src/views/ListDBUS.tsx b/cockpit/IPC/src/views/ListDBUS.tsx
index 1421217849..9043f22a61 100644
--- a/cockpit/IPC/src/views/ListDBUS.tsx
+++ b/cockpit/IPC/src/views/ListDBUS.tsx
@@ -31,6 +31,14 @@ const ListDBUS:React.FC<DarkModeType> = ({ isDark }) => {
     loadExternalScript(callback);
   }, []);
 
+  // // run after 2sec
+  // setTimeout(async () => {
+  //   const client = window.cockpit.dbus('com.skaginn3x.tfc.operations.def', { bus: 'system', superuser: 'try' });
+
+  //   const watch = client.watch('/com/skaginn3x/Slots');
+  //   console.log(watch);
+  // }, 2000);
+
   return (
     <div style={{ color: isDark ? '#EEE' : '#111' }}>
       <Title headingLevel="h1" size="2xl">DBUS Names</Title>
diff --git a/cockpit/IPC/src/views/StateMachine.tsx b/cockpit/IPC/src/views/StateMachine.tsx
index a9d34321ea..eb1d4e0c7a 100644
--- a/cockpit/IPC/src/views/StateMachine.tsx
+++ b/cockpit/IPC/src/views/StateMachine.tsx
@@ -115,7 +115,6 @@ const StateMachine: React.FC<DarkModeType> = ({ isDark }) => {
         // eslint-disable-next-line no-restricted-syntax
         for (const interfaceData of interfacesData) {
           const proxy = processDBUS.proxy(interfaceData, path);
-          console.log('proxy', proxy);
           // eslint-disable-next-line no-await-in-loop
           await proxy.wait().then(() => {
             const match = {