HDDS-11163. Improve Heatmap page UI

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/components/plots/heatmapPlot.tsx

@@ -0,0 +1,151 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { AgChartsReact } from 'ag-charts-react';
+import { byteToSize } from '@/utils/common';
+import { HeatmapResponse } from '@/v2/types/heatmap.types';
+
+type HeatmapPlotProps = {
+  data: HeatmapResponse;
+  onClick: (arg0: string) => void;
+  colorScheme: string[];
+  entityType: string;
+};
+
+const capitalize = <T extends string>(str: T) => {
+  return str.charAt(0).toUpperCase() + str.slice(1) as Capitalize<typeof str>;
+}
+
+const HeatmapPlot: React.FC<HeatmapPlotProps> = ({
+  data,
+  onClick,
+  colorScheme,
+  entityType = ''
+}) => {
+
+  const tooltipContent = (params: any) => {
+    let tooltipContent = `<span>
+      <strong>Size</strong>:
+      ${byteToSize(params.datum.size, 1)}
+      `;
+    if (params.datum.accessCount !== undefined) {
+      tooltipContent += `<br/>
+        <strong>Access count</strong>:
+      ${params.datum.accessCount }
+    `;
+      }
+    else{
+        tooltipContent += `<br/>
+        <strong>Max Access Count</strong>:
+      ${params.datum.maxAccessCount}
+    `;}
+    if (params.datum.label !== '') {
+      tooltipContent += `<br/>
+        <strong>Entity Name</strong>:
+        ${params.datum.label ? params.datum.label.split('/').slice(-1) : ''}
+      `;
+    }
+    tooltipContent += '</span>';
+    return tooltipContent;
+  };
+
+  const heatmapConfig = {
+    type: 'treemap',
+    labelKey: 'label',// the name of the key to fetch the label value from
+    sizeKey: 'normalizedSize',// the name of the key to fetch the value that will determine tile size
+    colorKey: 'color',
+    title: { color: '#424242', fontSize: 14, fontFamily: 'Roboto', fontWeight: '600' },
+    subtitle: { color: '#424242', fontSize: 12, fontFamily: 'Roboto', fontWeight: '400' },
+    tooltip: {
+      renderer: (params) => {
+        return {
+          content: tooltipContent(params)
+        };
+      }
+    },
+    formatter: ({ highlighted }: { highlighted: boolean }) => {
+      const stroke = highlighted ? '#CED4D9' : '#FFFFFF';
+      return { stroke };
+    },
+    labels: {
+      color: '#FFFFFF',
+      fontWeight: 'bold',
+      fontSize: 12
+    },
+    tileStroke: '#FFFFFF',
+    tileStrokeWidth: 1.4,
+    colorDomain: [
+      0.000,
+      0.050,
+      0.100,
+      0.150,
+      0.200,
+      0.250,
+      0.300,
+      0.350,
+      0.400,
+      0.450,
+      0.500,
+      0.550,
+      0.600,
+      0.650,
+      0.700,
+      0.750,
+      0.800,
+      0.850,
+      0.900,
+      0.950,
+      1.000
+    ],
+    colorRange: [...colorScheme],
+    groupFill: '#E6E6E6',
+    groupStroke: '#E1E2E6',
+    nodePadding: 3,
+    labelShadow: { enabled: false }, //labels shadow
+    gradient: false,
+    highlightStyle: {
+      text: {
+        color: '#424242',
+      },
+      item: {
+        fill: 'rgba(0, 0 ,0, 0.0)',
+      },
+    },
+    listeners: {
+        nodeClick: (event) => {
+        var data = event.datum;
+        // Leaf level box should not call API
+        if (!data.color)
+          if (data.path) {
+            onClick(data.path);
+          }
+        },
+      },
+    }
+
+  const options = {
+    data,
+    series: [heatmapConfig],
+    title: { text: `${capitalize(entityType)} Heatmap`}
+  };
+
+  return <AgChartsReact options={options} />
+}
+
+export default HeatmapPlot;

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/constants/heatmap.constants.tsx

@@ -0,0 +1,47 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const colourScheme = {
+  amberAlert: [
+    '#FFCF88',
+    '#FFCA87',
+    '#FFC586',
+    '#FFC085',
+    '#FFBB83',
+    '#FFB682',
+    '#FFB181',
+    '#FFA676',
+    '#FF9F6F',
+    '#FF9869',
+    '#FF9262',
+    '#FF8B5B',
+    '#FF8455',
+    '#FF7D4E',
+    '#FF8282',
+    '#FF7776',
+    '#FF6D6A',
+    '#FF625F',
+    '#FF5753',
+    '#FF4D47',
+    '#FF423B'
+  ]
+};
+
+export const TIME_PERIODS: string[] = ['24H', '7D', '90D']
+export const ENTITY_TYPES: string[] = ['key', 'bucket', 'volume']
+export const ROOT_PATH = '/'

hadoop-ozone/recon/src/main/resources/webapps/recon/ozone-recon-web/src/v2/pages/heatmap/heatmap.less

@@ -0,0 +1,86 @@
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+.content-div {
+  min-height: unset;
+  padding-bottom: 10px;
+
+  .heatmap-header-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+
+    @media (max-width: 1680px) {
+      flex-direction: column;
+    }
+
+    .heatmap-filter-section {
+      font-size: 14px;
+      font-weight: normal;
+      display: flex;
+      column-gap: 12px;
+
+      .path-input-container {
+        display: inline-flex;
+        align-items: flex-start;
+
+        .path-input-element {
+          margin: 0px 0px 0px 10px;
+          width: 20vw;
+        }
+      }
+
+      .entity-dropdown-button {
+        display: inline-block;
+      }
+
+      .date-dropdown-button {
+        display: inline-block;
+      }
+
+      .input-bar {
+        display: inline-block;
+        margin-left: 25px;
+      }
+
+      .input {
+        padding-left: 5px;
+        margin-right: 10px;
+        display: inline-block;
+        width: 400px;
+      }
+    }
+
+    .heatmap-legend-container {
+      display: flex !important;
+      align-self: flex-start;
+
+      .heatmap-legend-item {
+        display: flex;
+        align-items: center;
+        margin-left: 20px;
+      }
+    }
+  }
+
+  #heatmap-plot-container {
+    height: 600px;
+    width: 84vw;
+    margin-left: -12px;
+  }
+}