feat: support ui 2.0 add logs view (labring#5357)

* feat: datePicker

* feat: header ui

* fix: DatePicker input status bug

* feat: header ui

* feat: log number ui

* feat: LogCount ui

* add layout

* update layouts

* add AdvancedInfo

* chore: move file to page/log

* chore: move log component to log/component

* fix: add contains and not contains operator

* feat: log list header ui

* update index

* feat: log table ui

* chore: i18n adjust

* fix: pod and container

* update style

* update monitor

* update pages

* chore: adjust logs components position

* fix: select placeholder

chore: stash

monitor

update detail page

* add api

* update logs

* add logs & filter & logCounts

* update logs

* update

* update MonitorChart

* add prevFieldList

* update api

* delete table

* update log api

* update scroll

* update common.json

* update defaultRecentDate

* fix

* update keys

* update timerange

* done

* update datepicker

* add queryPodList api

* update podname

* fix init pods

* fix ReleaseModal

fix ReleaseModal

fix ReleaseModal

* delete release-modal

* fix log height

* fix pvc bug

* update info style

* fix: env info overflow

---------

Co-authored-by: mlhiter <[email protected]>

Author: zjy365

frontend/packages/ui/src/components/Select/index.tsx

@@ -54,7 +54,16 @@ const MySelect = (
     }
   });
 
-  const activeMenu = useMemo(() => list.find((item) => item.value === value), [list, value]);
+  const activeMenu = useMemo(() => {
+    const foundItem = list.find((item) => item.value === value);
+    if (!foundItem && value) {
+      return {
+        label: value,
+        value: value
+      };
+    }
+    return foundItem;
+  }, [list, value]);
 
   return (
     <Menu autoSelect={false} isOpen={isOpen} onOpen={onOpen} onClose={onClose}>

frontend/pnpm-lock.yaml

@@ -19,6 +19,8 @@ launchpad:
       url: http://launchpad-monitor.sealos.svc.cluster.local:8428
     billing:
       url: "http://account-service.account-system.svc:2333"
+    log:
+      url: "http://service-vlogs.sealos.svc.cluster.local:8428"
   appResourceFormSliderConfig:
     default:
       cpu: [100, 200, 500, 1000, 2000, 3000, 4000, 8000]

frontend/providers/applaunchpad/data/config.yaml

@@ -23,9 +23,11 @@
     "@sealos/driver": "workspace:^",
     "@sealos/ui": "workspace:^",
     "@tanstack/react-query": "^4.35.3",
+    "@tanstack/react-table": "^8.10.7",
     "ansi_up": "^5.2.1",
     "axios": "^1.5.1",
     "base64-stream": "^1.0.0",
+    "date-fns": "^2.30.0",
     "dayjs": "^1.11.10",
     "decimal.js": "^10.4.3",
     "dns": "^0.2.2",
@@ -45,6 +47,7 @@
     "nprogress": "^0.2.0",
     "prettier": "^2.8.8",
     "react": "18.2.0",
+    "react-day-picker": "^8.8.2",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.46.2",
     "react-i18next": "^14.1.2",

frontend/providers/applaunchpad/package.json

@@ -51,8 +51,8 @@
   "ConfigMap Path Conflict": "ConfigMap Path Conflict",
   "ConfigMap Tip": "ConfigMap",
   "Configurable number of instances or automatic horizontal scaling": "Configurable replica count and auto horizontal scaling",
-  "Configuration File": "Configmap",
-  "Confirm": "Yes",
+  "Configuration File": "Configmaps",
+  "Confirm": "Confirm",
   "Confirm deletion": "Yes",
   "Confirm Deploy Application?": "Are you sure you want to deploy the application?",
   "Confirm to restart this application?": "Are you sure you want to update the application?",
@@ -86,7 +86,7 @@
   "Edit Env Variable": "Edit Environment Variables",
   "Edit Environment Variables": "Edit Environment Variables",
   "Env Placeholder": "one per line, key and value separated by colon or equals sign, e.g.:\nmongoUrl=127.0.0.1:8000\nredisUrl:127.0.0.0:8001\n-env1 =test",
-  "Environment Variables": "Environment",
+  "Environment Variables": "Environment Variables",
   "Export": "Export",
   "Export Domain": "Assigned Domain",
   "file": "File",
@@ -163,7 +163,7 @@
   "please enter app name": "please enter: {{appName}}",
   "Pod": "Pod",
   "Pod Name": "Pod Name",
-  "Pods List": "Pods List",
+  "Pods List": "Pod List",
   "Port": "Port",
   "private": "private",
   "Private": "Private",
@@ -197,7 +197,7 @@
   "Stateless": "Stateless",
   "Status": "Status",
   "storage": "Storage",
-  "Storage": "Storage",
+  "Storage": "Mounted Volumes",
   "Storage path can not empty": "Storage mount path is required",
   "Storage Range": "Storage Range",
   "Storage Value can not empty": "Storage size is required",
@@ -257,7 +257,7 @@
   "total_price_tip": "The estimated cost does not include port fees and traffic fees, and is subject to actual usage.",
   "nodeports": "NodePorts",
   "streaming_logs": "Streaming logs",
-  "within_5_minutes": "Within 5 minutes",
+  "within_5_minute": "Within 5 minute",
   "within_1_hour": "Within 1 hour",
   "within_1_day": "Within 1 day",
   "terminated_logs": "Terminated logs",
@@ -277,5 +277,45 @@
     "storage_path_placeholder": "For Example: /data"
   },
   "guide_deploy_button": "Complete creation",
-  "shared": "Shared"
+  "filter": "Filter",
+  "start": "Start",
+  "end": "End",
+  "time_zone": "Time Zone",
+  "recently": "Last",
+  "minute": "minutes",
+  "day": "days",
+  "hour": "hours",
+  "time": "Range",
+  "log_number": "Log Number",
+  "close": "Off",
+  "normal_filter": "Normal",
+  "advanced_filter": "Advance",
+  "json_mode": "JSON Mode",
+  "only_stderr": "Stderr Only",
+  "keyword": "Keywords",
+  "search": "Search",
+  "equal": "equal",
+  "greater_than": "Greater than",
+  "less_than": "Less than",
+  "field_name": "Select Field",
+  "value": "Enter Value",
+  "logNumber": "Log Counts",
+  "overview": "Overview",
+  "monitor": "Monitors",
+  "logs": "Logs",
+  "application_source": "Source",
+  "contains": "contains",
+  "not_contains": "not contains",
+  "visible": "Visable",
+  "hidden": "Hidden",
+  "export_log": "Export",
+  "no_data_available": "No data available",
+  "all": "All",
+  "hour-singular": "hour",
+  "not_equal": "not",
+  "field_settings": "Field Setting",
+  "selected": "Selected",
+  "please_select": "Please Select",
+  "refetching_success": "Refresh Successful",
+  "refresh": "refresh"
 }

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

@@ -30,7 +30,7 @@
   "Auto scaling": "弹性伸缩",
   "Balance": "余额",
   "Basic Config": "基础配置",
-  "Basic Information": "基本信息",
+  "Basic Information": "基础信息",
   "Can help you deploy any Docker image": "丰富的镜像仓库，支持任意 Docker 镜像",
   "Can not change storage path": "不允许修改挂载路径",
   "Cancel": "取消",
@@ -162,8 +162,8 @@
   "Please enter": "请输入",
   "please enter app name": "请输入：{{appName}}",
   "Pod": "实例",
-  "Pod Name": "实例名",
-  "Pods List": "实例列表",
+  "Pod Name": "Pod 名称",
+  "Pods List": "Pod 列表",
   "Port": "端口",
   "private": "私有",
   "Private": "私有",
@@ -257,7 +257,7 @@
   "total_price_tip": "预估费用不包括端口费用和流量费用,以实际使用为准",
   "nodeports": "外网端口",
   "streaming_logs": "实时日志",
-  "within_5_minutes": "五分钟内",
+  "within_5_minute": "五分钟内",
   "within_1_hour": "一小时内",
   "within_1_day": "一天内",
   "terminated_logs": "中断前",
@@ -278,5 +278,44 @@
     "storage_path_placeholder": "如：/data"
   },
   "guide_deploy_button": "完成创建",
-  "shared": "共享"
+  "filter": "筛选",
+  "start": "开始",
+  "end": "结束",
+  "time_zone": "时区",
+  "recently": "最近",
+  "minute": "分钟",
+  "hour": "小时",
+  "day": "天",
+  "time": "时间",
+  "log_number": "日志数",
+  "close": "关闭",
+  "normal_filter": "普通筛选",
+  "advanced_filter": "高级筛选",
+  "json_mode": "JSON模式",
+  "only_stderr": "只看 Stderr",
+  "keyword": "关键词",
+  "search": "查询",
+  "field_name": "字段名",
+  "equal": "等于",
+  "value": "值",
+  "logNumber": "日志数量",
+  "overview": "概览",
+  "monitor": "监控",
+  "logs": "日志",
+  "application_source": "来源",
+  "contains": "包含",
+  "not_contains": "不包含",
+  "visible": "可见",
+  "hidden": "隐藏",
+  "piece": "个",
+  "export_log": "导出日志",
+  "no_data_available": "暂无数据",
+  "all": "全部",
+  "hour-singular": "小时",
+  "not_equal": "不等于",
+  "field_settings": "字段设置",
+  "selected": "已选中",
+  "please_select": "请选择",
+  "refetching_success": "刷新成功",
+  "refresh": "刷新"
 }

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

@@ -9,6 +9,8 @@ import {
 } from '@/utils/adapt';
 import type { AppPatchPropsType, PodDetailType } from '@/types/app';
 import { MonitorDataResult, MonitorQueryKey } from '@/types/monitor';
+import { LogQueryPayload } from '@/pages/api/log/queryLogs';
+import { PodListQueryPayload } from '@/pages/api/log/queryPodList';
 
 export const postDeployApp = (yamlList: string[]) => POST('/api/applyApp', { yamlList });
 
@@ -58,4 +60,11 @@ export const getAppMonitorData = (payload: {
   queryName: string;
   queryKey: keyof MonitorQueryKey;
   step: string;
+  start?: number;
+  end?: number;
 }) => GET<MonitorDataResult[]>(`/api/monitor/getMonitorData`, payload);
+
+export const getAppLogs = (payload: LogQueryPayload) => POST<string>('/api/log/queryLogs', payload);
+
+export const getLogPodList = (payload: PodListQueryPayload) =>
+  POST<string[]>('/api/log/queryPodList', payload);