styling

packages/web/src/appobj/AppObjectList.js

@@ -7,7 +7,7 @@ import { ExpandIcon } from '../icons';
 import useTheme from '../theme/useTheme';
 
 const SubItemsDiv = styled.div`
-  margin-left: 16px;
+  margin-left: 28px;
 `;
 
 const ExpandIconHolder2 = styled.span`

packages/web/src/appobj/AppObjects.js

@@ -31,6 +31,12 @@ const StatusIconWrap = styled.span`
   margin-left: 5px;
 `;
 
+const ExtInfoWrap = styled.span`
+font-weight: normal;
+margin-left: 5px;
+  color: ${(props) => props.theme.left_font3};
+`;
+
 export function AppObjectCore({
   title,
   icon,
@@ -43,6 +49,7 @@ export function AppObjectCore({
   component = 'div',
   prefix = null,
   statusIcon,
+  extInfo,
   statusTitle,
   ...other
 }) {
@@ -78,6 +85,7 @@ export function AppObjectCore({
           <FontIcon icon={statusIcon} title={statusTitle} />
         </StatusIconWrap>
       )}
+      {extInfo && <ExtInfoWrap theme={theme}>{extInfo}</ExtInfoWrap>}
     </Component>
   );
 }

packages/web/src/appobj/connectionAppObject.js

@@ -82,6 +82,7 @@ const connectionAppObject = (flags) => (
       statusTitle = status.message;
     }
   }
+  const extInfo = engine;
 
   return {
     title,
@@ -94,6 +95,7 @@ const connectionAppObject = (flags) => (
     onClick,
     statusIcon,
     statusTitle,
+    extInfo,
   };
 };