feat:launchpad monitor api & template ssr (#4482)

* feat:launchpad monitoring api

Signed-off-by: jingyang <3161362058@qq.com>

* fix i18n

* template ssr

* fix

---------

Signed-off-by: jingyang <3161362058@qq.com>

frontend/providers/applaunchpad/.env.template

@@ -2,4 +2,7 @@ NEXT_PUBLIC_MOCK_USER=
 SEALOS_DOMAIN="cloud.sealos.io"
 DOMAIN_PORT=
 FASTGPT_KEY=
-CURRENCY=
+CURRENCY=
+MONITOR_URL=
+INGRESS_SECRET=
+GUIDE_ENABLED=

frontend/providers/applaunchpad/next-i18next.config.js

@@ -9,4 +9,4 @@ module.exports = {
     locales: ['en', 'zh'],
     localeDetection: false
   }
-};
+}

frontend/providers/applaunchpad/public/locales/en/common.json

@@ -182,5 +182,49 @@
   "Add Port": "Add Port",
   "Age": "Age",
   "Amount": "Amount",
-  "ConfigMap Tip": "ConfigMap"
+  "ConfigMap Tip": "ConfigMap",
+  "No Data Available": "No Data",
+  "Restart Success": "Restart Success",
+  "Total": "Total",
+  "Copy": "Copy",
+  "Open Link": "Open Link",
+  "Application paused": "Application Paused",
+  "Start Successful": "Start Successful",
+  "Card": "Card",
+  "Pod": "Pod",
+  "No GPU": "No Gpu",
+  "Pod Name": "Pod Name",
+  "Port": "Port",
+  "Waiting": "Waiting",
+  "Yes": "Yes",
+  "vm": "vm",
+  "Deploy": "Deploy",
+  "Application failed": "Application failed",
+  "CPU target value": "cpu target value",
+  "Cname auth error: customDomain's cname is not equal to publicDomain": "Cname auth error: customDomain's cname is not equal to publicDomain",
+  "ConfigMap Conflict": "ConfigMap Conflict",
+  "Copy Domain Success": "Copy Domain Success",
+  "Custom Domain Error": "Custom Domain Error",
+  "If no, the default command is used": "If no, the default command is used",
+  "Input your custom domain": "Input your custom domain",
+  "Inventory": "Inventory",
+  "Items": "Items",
+  "Memory target value": "Memory target value",
+  "Not allowed to change app name": "Not allowed to change app name",
+  "Number of instances: 1 to 20": "Number of instances: 1 to 20",
+  "Public Access": "Public Access",
+  "Restart Failed": "Restart Failed",
+  "Start Failed": "Start Failed",
+  "Starts with a letter and can contain only lowercase letters, digits, and hyphens (-)": "Starts with a letter and can contain only lowercase letters, digits, and hyphens (-)",
+  "The Cpu target is empty": "The Cpu target is empty",
+  "The application name can contain only lowercase letters, digits, and hyphens (-) and must start with a letter": "The application name can contain only lowercase letters, digits, and hyphens (-) and must start with a letter",
+  "The cpu target value must be positive": "The cpu target value must be positive",
+  "The image cannot be empty": "The image cannot be empty",
+  "The maximum number of instances is 20": "The maximum number of instances is 20",
+  "The minimum number of instances is 1": "The minimum number of instances is 1",
+  "The number of instances cannot be empty": "The number of instances cannot be empty",
+  "The password cannot be empty": "The password cannot be empty",
+  "The target cpu value must be less than 100": "The target cpu value must be less than 100",
+  "The user name cannot be empty": "The user name cannot be empty",
+  "Under Stock": "Under Stock"
 }

frontend/providers/applaunchpad/public/locales/zh/common.json

@@ -141,7 +141,7 @@
   "File Name": "文件名",
   "Filename can not empty": "文件名不能为空",
   "File Value can not empty": "文件值不能为空",
-  "ConfigMap Conflict": "ConfigMap Path Conflict",
+  "ConfigMap Conflict": "配置映射冲突",
   "Storage path can not empty": "挂载路径不能为空",
   "Storage Range": "容量范围",
   "Storage Value can not empty": "容量不能为空",
@@ -221,5 +221,10 @@
   "Configurable number of instances or automatic horizontal scaling": "可配置实例数或自动横向伸缩",
   "gift time tip": "{{time}} 小时内",
   "gift amount tip": "充值 {{amount}} 赠送 {{gift}} ",
-  "ConfigMap Tip": "配置文件"
+  "ConfigMap Tip": "配置文件",
+  "No Data Available": "暂无数据",
+  "Restart Success": "重启成功",
+  "ConfigMap Path Conflict": "ConfigMap 路径冲突",
+  "Deploy Application": "部署应用",
+  "Reboot Success": "重启成功"
 }

frontend/providers/applaunchpad/src/api/app.ts

@@ -8,6 +8,7 @@ import {
   adaptEvents
 } from '@/utils/adapt';
 import type { AppPatchPropsType } from '@/types/app';
+import { MonitorDataResult, MonitorQueryKey } from '@/types/monitor';
 
 export const postDeployApp = (yamlList: string[]) => POST('/api/applyApp', { yamlList });
 
@@ -50,3 +51,9 @@ export const pauseAppByName = (appName: string) => GET(`/api/pauseApp?appName=${
 export const startAppByName = (appName: string) => GET(`/api/startApp?appName=${appName}`);
 
 export const restartPodByName = (podName: string) => GET(`/api/restartPod?podName=${podName}`);
+
+export const getAppMonitorData = (payload: {
+  queryName: string;
+  queryKey: keyof MonitorQueryKey;
+  step: string;
+}) => GET<MonitorDataResult[]>(`/api/monitor/getMonitorData`, payload);

frontend/providers/applaunchpad/src/components/PodLineChart/index.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import * as echarts from 'echarts';
 import { useGlobalStore } from '@/store/global';
+import { MonitorDataResult } from '@/types/monitor';
+import dayjs from 'dayjs';
 
 const map = {
   blue: {
@@ -92,14 +94,16 @@ const map = {
 
 const PodLineChart = ({
   type,
-  limit = 1000000,
   data
 }: {
   type: 'blue' | 'deepBlue' | 'green' | 'purple';
-  limit: number;
-  data: number[];
+  data?: MonitorDataResult;
 }) => {
   const { screenWidth } = useGlobalStore();
+  const xData =
+    data?.xData?.map((time) => (time ? dayjs(time * 1000).format('HH:mm') : '')) ||
+    new Array(30).fill(0);
+  const yData = data?.yData || new Array(30).fill('');
 
   const Dom = useRef<HTMLDivElement>(null);
   const myChart = useRef<echarts.ECharts>();
@@ -125,7 +129,7 @@ const PodLineChart = ({
       type: 'category',
       show: false,
       boundaryGap: false,
-      data: data.map((_, i) => i)
+      data: xData
     },
     yAxis: {
       type: 'value',
@@ -146,19 +150,21 @@ const PodLineChart = ({
       axisPointer: {
         type: 'line'
       },
-      formatter: (e: any[]) => `${e[0]?.value || 0}%`
+      formatter: (params: any[]) => {
+        const axisValue = params[0]?.axisValue;
+        return `${axisValue} ${params[0]?.value || 0}%`;
+      }
     },
     series: [
       {
-        data: new Array(data.length).fill(0),
+        data: yData,
         type: 'line',
         showSymbol: false,
         smooth: true,
         animationDuration: 300,
         animationEasingUpdate: 'linear',
         ...optionStyle,
         emphasis: {
-          // highlight
           disabled: true
         }
       }
@@ -175,14 +181,10 @@ const PodLineChart = ({
   // data changed, update
   useEffect(() => {
     if (!myChart.current || !myChart?.current?.getOption()) return;
-
-    const uniData = data.map((item) => ((item / limit) * 100).toFixed(2));
-
-    const x = option.current.xAxis.data;
-    option.current.xAxis.data = [...x.slice(1), x[x.length - 1] + 1];
-    option.current.series[0].data = uniData;
+    option.current.xAxis.data = xData;
+    option.current.series[0].data = yData;
     myChart.current.setOption(option.current);
-  }, [data, limit]);
+  }, [xData, yData]);
 
   // type changed, update
   useEffect(() => {