metrics for stacks (#3022)

Co-authored-by: Justin Rhee <jusrhee@Justins-MacBook-Air.local>

dashboard/src/main/home/app-dashboard/expanded-app/ExpandedApp.tsx

@@ -820,6 +820,7 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
                         { label: "Overview", value: "overview" },
                         { label: "Events", value: "events" },
                         { label: "Logs", value: "logs" },
+                        { label: "Metrics", value: "metrics" },
                         { label: "Pre-deploy", value: "pre-deploy" },
                         {
                           label: "Environment variables",
@@ -842,6 +843,7 @@ const ExpandedApp: React.FC<Props> = ({ ...props }) => {
                       { label: "Overview", value: "overview" },
                       { label: "Events", value: "events" },
                       { label: "Logs", value: "logs" },
+                      { label: "Metrics", value: "metrics" },
                       { label: "Pre-deploy", value: "pre-deploy" },
                       {
                         label: "Environment variables",

dashboard/src/main/home/app-dashboard/expanded-app/MetricsSection.tsx

@@ -527,7 +527,6 @@ const MetricsSection: React.FunctionComponent<PropsType> = ({
       )}
       {data.length > 0 && isLoading === 0 && (
         <>
-          <AggregatedDataLegend data={data} />
           {currentChart?.config?.autoscaling?.enabled &&
             ["cpu", "memory"].includes(selectedMetric) && (
               <CheckboxRow
@@ -553,6 +552,9 @@ const MetricsSection: React.FunctionComponent<PropsType> = ({
               />
             )}
           </ParentSize>
+          <RowWrapper>
+            <AggregatedDataLegend data={data} />
+          </RowWrapper>
         </>
       )}
     </StyledMetricsSection>
@@ -561,6 +563,12 @@ const MetricsSection: React.FunctionComponent<PropsType> = ({
 
 export default MetricsSection;
 
+const RowWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+`;
+
 const Highlight = styled.div`
   display: flex;
   align-items: center;
@@ -725,15 +733,12 @@ const MetricsLabel = styled.div`
 
 const StyledMetricsSection = styled.div`
   width: 100%;
-  min-height: 400px;
-  height: calc(100vh - 400px);
+  min-height: 480px;
+  height: calc(100vh - 350px);
   display: flex;
   flex-direction: column;
   position: relative;
   font-size: 13px;
-  border-radius: 8px;
-  border: 1px solid #ffffff33;
-  padding: 18px 22px;
   animation: floatIn 0.3s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;

dashboard/src/main/home/cluster-dashboard/expanded-chart/metrics/AggregatedDataLegend.tsx

@@ -35,9 +35,7 @@ const AggregatedDataLegend = ({ data }: AggregatedDataLegendProps) => {
 export default AggregatedDataLegend;
 
 const AggregatedDataContainer = styled.div`
-  width: 200px;
   display: flex;
-  flex-direction: column;
   margin-block: 8px;
 `;
 
@@ -50,8 +48,9 @@ const AggregatedDataItem = styled.div`
 `;
 
 const DataBar = styled.div<{ color: string }>`
-  height: 100%;
-  width: 5px;
+  height: 10px;
+  width: 10px;
+  margin-left: 10px;
   border: 1px solid ${(props) => props.color};
   background-color: ${(props) => chroma(props.color).alpha(0.6).css()};
 `;