From e05265bb8e4799c154eaf690d47339f399ed6426 Mon Sep 17 00:00:00 2001
From: Khanh Tran <32532742+khanhtc1202@users.noreply.github.com>
Date: Wed, 20 Jul 2022 15:34:10 +0700
Subject: [PATCH] Add labels to deployments list page (#3811)

---
 .../deployments-page/deployment-item/index.tsx      | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/web/src/components/deployments-page/deployment-item/index.tsx b/web/src/components/deployments-page/deployment-item/index.tsx
index 10284e85a7..88745c0d69 100644
--- a/web/src/components/deployments-page/deployment-item/index.tsx
+++ b/web/src/components/deployments-page/deployment-item/index.tsx
@@ -1,4 +1,4 @@
-import { Box, ListItem, makeStyles, Typography } from "@material-ui/core";
+import { Box, Chip, ListItem, makeStyles, Typography } from "@material-ui/core";
 import dayjs from "dayjs";
 import { FC, memo } from "react";
 import { Link as RouterLink } from "react-router-dom";
@@ -34,6 +34,10 @@ const useStyles = makeStyles((theme) => ({
     ...ellipsis,
     color: theme.palette.text.hint,
   },
+  labelChip: {
+    marginLeft: theme.spacing(1),
+    marginBottom: theme.spacing(0.25),
+  },
 }));
 
 export interface DeploymentItemProps {
@@ -89,6 +93,13 @@ export const DeploymentItem: FC<DeploymentItemProps> = memo(
               className={classes.info}
             >
               {APPLICATION_KIND_TEXT[deployment.kind]}
+              {deployment?.labelsMap.map(([key, value], i) => (
+                <Chip
+                  label={key + ": " + value}
+                  className={classes.labelChip}
+                  key={i}
+                />
+              ))}
             </Typography>
           </Box>
           <Typography variant="body1" className={classes.description}>