Sfoglia il codice sorgente

Implement description on chart list

jnfrati 4 anni fa
parent
commit
47e04228c4
1 ha cambiato i file con 15 aggiunte e 0 eliminazioni
  1. 15 0
      dashboard/src/main/home/cluster-dashboard/chart/Chart.tsx

+ 15 - 0
dashboard/src/main/home/cluster-dashboard/chart/Chart.tsx

@@ -101,6 +101,12 @@ const Chart: React.FunctionComponent<Props> = ({
       <Title>
         <IconWrapper>{renderIcon()}</IconWrapper>
         {chart.name}
+        {chart?.config?.description && (
+          <>
+            <Dot style={{ marginLeft: "9px", color: "#ffffff88" }}>•</Dot>
+            <Description>{chart.config.description}</Description>
+          </>
+        )}
       </Title>
 
       <BottomWrapper>
@@ -147,6 +153,14 @@ const Chart: React.FunctionComponent<Props> = ({
 
 export default Chart;
 
+const Description = styled.div`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 200px;
+  color: #ffffff88;
+`;
+
 const BottomWrapper = styled.div`
   display: flex;
   justify-content: space-between;
@@ -244,6 +258,7 @@ const IconWrapper = styled.div`
 `;
 
 const Title = styled.div`
+  display: flex;
   position: relative;
   text-decoration: none;
   padding: 12px 35px 12px 45px;