feat: update web app console

core/web-app/next.config.js

@@ -6,15 +6,6 @@ const nextConfig = {
     appDir: true,
     esmExternals: 'loose',
   },
-  async redirects() {
-    return [
-      {
-        source: '/app/planning/:id',
-        destination: '/app/planning/:id/diagram',
-        permanent: true,
-      },
-    ];
-  },
   headers:
     process.env.NODE_ENV === 'development'
       ? () => [

core/web-app/package.json

@@ -23,14 +23,14 @@
     "daisyui": "^2.51.5",
     "dayjs": "^1.11.7",
     "eslint": "8.38.0",
-    "eslint-config-next": "13.3.0",
+    "eslint-config-next": "^14.0.1",
     "immer": "^10.0.2",
     "lodash": "^4.17.21",
     "nanoid": "^4.0.2",
-    "next": "13.3.0",
-    "react": "18.2.0",
+    "next": "^14.0.1",
+    "react": "^18.2.0",
     "react-ace": "^10.1.0",
-    "react-dom": "18.2.0",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.43.9",
     "reactflow": "^11.7.0",
     "typescript": "5.0.4",

core/web-app/src/app/app/autoscaling-history/history-heatmap.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { ResponsiveHeatMapCanvas } from '@nivo/heatmap';
 import dayjs, { Dayjs } from 'dayjs';
 import { groupBy } from 'lodash';
@@ -10,16 +8,17 @@ interface HistoryHeatmapProps {
   from: Dayjs;
   to: Dayjs;
 }
+
 function HistoryHeatmap({ history, from, to }: HistoryHeatmapProps) {
   const dataForHeatmap = useMemo(() => {
     if (!history) {
       return [];
     }
-    const groupedByDate = groupBy(history, (historyItem) => {
-      return dayjs.unix(historyItem.created_at).format('YYYY-MM-DD');
-    });
 
-    // Fill in missing dates
+    const groupedByDate = groupBy(history, (historyItem) =>
+      dayjs.unix(historyItem.created_at / 1000).format('YYYY-MM-DD')
+    );
+
     let current = from;
     while (current.isBefore(to) || current.isSame(to)) {
       const date = current.format('YYYY-MM-DD');
@@ -30,15 +29,12 @@ function HistoryHeatmap({ history, from, to }: HistoryHeatmapProps) {
     }
 
     const data = Object.entries(groupedByDate)
-      .sort(([dateA], [dateB]) => {
-        return dateA < dateB ? -1 : 1;
-      })
+      .sort(([dateA], [dateB]) => (dateA < dateB ? -1 : 1))
       .map(([date, historyItems]) => {
-        const groupedByHour = groupBy(historyItems, (historyItem) => {
-          return dayjs.unix(historyItem.created_at).format('HH');
-        });
+        const groupedByHour = groupBy(historyItems, (historyItem) =>
+          dayjs.unix(historyItem.created_at / 1000).format('HH')
+        );
 
-        // Fill in missing hours
         for (let i = 0; i < 24; i++) {
           const hour = i.toString().padStart(2, '0');
           if (!groupedByHour[hour]) {
@@ -54,10 +50,16 @@ function HistoryHeatmap({ history, from, to }: HistoryHeatmapProps) {
               return {
                 x: hour,
                 y: historyItems.length,
+                z: historyItems.some(
+                  (historyItem) => historyItem.fail_message !== undefined
+                )
+                  ? 'Failed'
+                  : 'Success',
               };
             }),
         };
       });
+
     return data;
   }, [history, from, to]);
 
@@ -76,28 +78,24 @@ function HistoryHeatmap({ history, from, to }: HistoryHeatmapProps) {
   return (
     <div className="h-80 w-full">
       <ResponsiveHeatMapCanvas
-        // forceSquare={true}
         data={dataForHeatmap}
-        xInnerPadding={0.1}
-        yInnerPadding={0.1}
-        margin={{ top: 70, right: 80, bottom: 20, left: 120 }}
+        margin={{ top: 50, right: 70, bottom: 30, left: 140 }}
         axisTop={{
           tickSize: 0,
           tickPadding: 10,
-          // tickRotation: -90,
-          legend: 'Time',
           legendOffset: -40,
           legendPosition: 'middle',
         }}
         axisLeft={{
           tickSize: 0,
           tickPadding: 20,
           tickRotation: 0,
+          format: (value) => value.replace(/-/g, '/'),
         }}
         colors={{
           type: 'diverging',
-          divergeAt: 0.4,
-          scheme: 'greens',
+          divergeAt: 0.3,
+          scheme: 'turbo',
           minValue: 0,
           maxValue,
         }}
@@ -107,9 +105,27 @@ function HistoryHeatmap({ history, from, to }: HistoryHeatmapProps) {
         enableLabels={true}
         labelTextColor={{
           from: 'color',
-          modifiers: [['brighter', 2]],
+          modifiers: [['brighter', 3]],
         }}
         annotations={[]}
+        tooltip={({ cell }) => (
+          <div
+            className={`p-2 text-white shadow-md ${
+              cell.data.z === 'Failed' ? 'bg-[#E0242E]' : 'bg-[#074EAB]'
+            }`}
+          >
+            <div className="text-xs">
+              Date: {cell.serieId.replace(/-/g, '/')}
+            </div>
+            <div className="text-xs">
+              Time: {cell.data.x}:00~{cell.data.x}:59
+            </div>
+            <div className="text-xs">Activity: {cell.data.y}</div>
+            {cell.data.z === 'Failed' ? (
+              <div className="text-xs">Status: {cell.data.z}</div>
+            ) : null}
+          </div>
+        )}
       />
     </div>
   );

core/web-app/src/app/app/autoscaling-history/layout.tsx

@@ -3,5 +3,5 @@ export default async function AutoscalingHistoryLayout({
 }: {
   children: React.ReactNode;
 }) {
-  return <div className="flex h-full w-full">{children}</div>;
+  return <div className="flex h-full w-full flex-row">{children}</div>;
 }