Merge pull request #553 from mudit06mah/feat/knative-refactor

knative: kservice: common: Refactor Kservice sections to match Headlamp UI

Author: illume

knative/src/components/common/ConditionsSection.tsx

@@ -14,18 +14,8 @@
  * limitations under the License.
  */
 
-import { SectionBox } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
-import {
-  Chip,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  Tooltip,
-  Typography,
-} from '@mui/material';
+import { SectionBox, SimpleTable } from '@kinvolk/headlamp-plugin/lib/CommonComponents';
+import { Chip, Tooltip, Typography } from '@mui/material';
 import type { Condition } from '../../resources/knative/common';
 import { getAge } from '../../utils/time';
 
@@ -34,62 +24,50 @@ type ConditionsSectionProps = {
 };
 
 export default function ConditionsSection({ conditions }: ConditionsSectionProps) {
+  const columns = [
+    {
+      label: 'Type',
+      getter: (c: Condition) => c.type,
+    },
+    {
+      label: 'Status',
+      getter: (c: Condition) =>
+        c.status === 'True' ? (
+          <Chip label="True" color="success" size="small" />
+        ) : c.status === 'False' ? (
+          <Chip label="False" color="error" size="small" />
+        ) : (
+          <Chip label={c.status || 'Unknown'} color="warning" size="small" />
+        ),
+    },
+    {
+      label: 'Reason',
+      getter: (c: Condition) => c.reason || '-',
+    },
+    {
+      label: 'Message',
+      getter: (c: Condition) =>
+        c.message ? (
+          <Tooltip title={c.message}>
+            <Typography variant="body2" color="text.secondary" noWrap sx={{ maxWidth: 400 }}>
+              {c.message}
+            </Typography>
+          </Tooltip>
+        ) : (
+          <Typography variant="body2" color="text.secondary" noWrap sx={{ maxWidth: 400 }}>
+            -
+          </Typography>
+        ),
+    },
+    {
+      label: 'Last Transition',
+      getter: (c: Condition) => (c.lastTransitionTime ? getAge(c.lastTransitionTime) : '-'),
+    },
+  ];
+
   return (
     <SectionBox title="Conditions">
-      <TableContainer>
-        <Table size="small" sx={{ tableLayout: 'fixed', width: '100%' }}>
-          <TableHead>
-            <TableRow>
-              <TableCell>Type</TableCell>
-              <TableCell>Status</TableCell>
-              <TableCell>Reason</TableCell>
-              <TableCell>Message</TableCell>
-              <TableCell>Last Transition</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {conditions.map(c => (
-              <TableRow key={c.type}>
-                <TableCell>{c.type}</TableCell>
-                <TableCell>
-                  {c.status === 'True' ? (
-                    <Chip label="True" color="success" size="small" />
-                  ) : c.status === 'False' ? (
-                    <Chip label="False" color="error" size="small" />
-                  ) : (
-                    <Chip label={c.status || 'Unknown'} color="warning" size="small" />
-                  )}
-                </TableCell>
-                <TableCell>{c.reason || '-'}</TableCell>
-                <TableCell>
-                  {c.message ? (
-                    <Tooltip title={c.message}>
-                      <Typography
-                        variant="body2"
-                        color="text.secondary"
-                        noWrap
-                        sx={{ maxWidth: 400 }}
-                      >
-                        {c.message}
-                      </Typography>
-                    </Tooltip>
-                  ) : (
-                    <Typography
-                      variant="body2"
-                      color="text.secondary"
-                      noWrap
-                      sx={{ maxWidth: 400 }}
-                    >
-                      -
-                    </Typography>
-                  )}
-                </TableCell>
-                <TableCell>{c.lastTransitionTime ? getAge(c.lastTransitionTime) : '-'}</TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
+      <SimpleTable columns={columns} data={conditions} />
     </SectionBox>
   );
 }