Merge pull request alibaba#162 from Lyt99/fix/webui-event-multiline

fix(webui): multiline display in event list & min width of page
BSWANG · Jan 26, 2024 · 4fdbabb · 4fdbabb
2 parents 49ae4cf + a456b0d
commit 4fdbabb
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 10 deletions.
diff --git a/webui/src/global.css b/webui/src/global.css
@@ -3,6 +3,7 @@
 
 body {
   -webkit-font-smoothing: antialiased;
+  min-width: 1100px;
 }
 
 .next-loading {

diff --git a/webui/src/pages/config/types.json b/webui/src/pages/config/types.json
@@ -1,7 +1,7 @@
 {
     "metric_probe": [
         {
-            "name": "virtcmdLatency"
+            "name": "virtcmdlatency"
         },
         {
             "name": "flow"

diff --git a/webui/src/pages/monitoring/events/components/EventList/index.module.css b/webui/src/pages/monitoring/events/components/EventList/index.module.css
@@ -2,16 +2,26 @@
   background-color: rgb(235, 245, 255);
   font-size: 15px;
   display: flex;
-  align-items: center;
-  height: 4em;
+  /* align-items: center; */
+  min-height: 4em;
   margin-bottom: 10px;
+  padding: 5px 0;
 }
 
 .eventInfo {
   margin-right: 20px;
+  height: 4em;
 }
 
 .eventMessage {
+  display: inline-block;
+  white-space: pre-wrap;
+  /* height: 1em; */
+  overflow: hidden;
+}
+
+.expandBtn {
+  display: inline-block;
 }
 
 .eventType {

diff --git a/webui/src/pages/monitoring/events/components/EventList/index.tsx b/webui/src/pages/monitoring/events/components/EventList/index.tsx
@@ -1,11 +1,17 @@
 import { EventData } from "@/services/event";
-import { List, Tag } from "@alifd/next";
+import { Button, List, Tag } from "@alifd/next";
 import styles from './index.module.css'
 
 interface EventListProps {
   data: EventData[]
 };
 
+const EventMessage = ({msg}): JSX.Element => {
+  return <div>
+      <span className={styles.eventMessage}>{msg}</span>
+    </div>;
+};
+
 const renderListItem = (ev: EventData, i: number): JSX.Element => {
   // convert nanosecond timestamp to date
   const date = new Date(ev.timestamp / 1000000);
@@ -18,9 +24,9 @@ const renderListItem = (ev: EventData, i: number): JSX.Element => {
       </div>
       <div>
         <div>
-          {ev.labels.map(i => <Tag key={i.name} className={styles.tag} size="small" color="blue">{`${i.name}: ${i.value}`}</Tag>)}
+          {ev.labels.filter(i => i.value !== '').map(i => <Tag key={i.name} className={styles.tag} size="small" color="blue">{`${i.name}: ${i.value}`}</Tag>)}
         </div>
-        <div className={styles.eventMessage}>{ev.msg}</div>
+        <EventMessage msg={ev.msg}/>
       </div>
     </div>
   )

diff --git a/webui/src/pages/monitoring/events/index.module.css b/webui/src/pages/monitoring/events/index.module.css
@@ -5,6 +5,8 @@
 .title {
   margin-right: 10px;
   margin-left: 20px;
+  width: 80px;
+  min-width: 80px;
 }
 
 .box {

diff --git a/webui/src/pages/monitoring/events/index.tsx b/webui/src/pages/monitoring/events/index.tsx
@@ -89,7 +89,7 @@ export default function Events() {
     return filteredNamespaces?.length ?
       pods.filter((i) => {
         return filteredNamespaces.includes(i.namespace)
-      }).map(i => i.name) : pods.map(i => i.name) ;
+      }).map(i => i.name) : pods.map(i => i.name);
   }, [pods, filteredNamespaces])
 
   const nodeNames = useMemo(() => nodes.map(i => i.name), [nodes])
@@ -112,13 +112,15 @@ export default function Events() {
           <Box direction="row" className={styles.box}>
             <span className={styles.title}>Event Type</span>
             <Select className={styles.select} mode="tag" dataSource={eventTypes} onChange={v => setFilteredTypes(v)} disabled={isLive} />
-            <span className={styles.title}>Nodes</span>
+            <span className={styles.title} style={{width: 50, minWidth: 50}}>Nodes</span>
             <Select className={styles.select} mode="tag" dataSource={nodeNames} onChange={v => setFilteredNodes(v)} disabled={isLive} />
+            </Box>
+            <Box direction="row" className={styles.box}>
             <span className={styles.title}>Namespaces</span>
             <Select className={styles.select} mode="tag" dataSource={namespaces} onChange={v => setFilteredNamespaces(v)} disabled={isLive} />
-            <span className={styles.title}>Pods</span>
+            <span className={styles.title} style={{width: 50, minWidth: 50}}>Pods</span>
             <Select className={styles.select} mode="tag" dataSource={podNames} onChange={v => setFilteredPods(v)} disabled={isLive} />
-            <div style={{ marginLeft: "auto" }}>
+            <div style={{ marginLeft: "auto", paddingLeft: 10, display: 'flex' }}>
               <Button
                 disabled={isLive}
                 className={styles.btn}