From 972ee69fac4f3d4e0f4be4936011f9e31f7080b2 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Thu, 26 Dec 2024 12:13:17 +0800
Subject: [PATCH] style: view instance logs

---
 src/components/copy-button/index.tsx          | 15 +++++++-
 src/components/icon-font/index.tsx            |  2 +-
 src/components/status-tag/copy.less           | 20 ++++++-----
 src/components/status-tag/index.tsx           | 35 +++++++++++++++++--
 src/locales/en-US/models.ts                   |  2 +-
 src/locales/zh-CN/models.ts                   |  2 +-
 .../llmodels/components/instance-item.tsx     | 18 ++++++++--
 .../llmodels/components/view-logs-modal.tsx   |  1 +
 src/pages/llmodels/style/column-wrapper.less  |  3 +-
 src/pages/llmodels/style/search-result.less   |  9 ++---
 10 files changed, 83 insertions(+), 24 deletions(-)

diff --git a/src/components/copy-button/index.tsx b/src/components/copy-button/index.tsx
index 56f9fb9f..94a5f8ce 100644
--- a/src/components/copy-button/index.tsx
+++ b/src/components/copy-button/index.tsx
@@ -11,6 +11,15 @@ type CopyButtonProps = {
   type?: 'text' | 'primary' | 'dashed' | 'link' | 'default';
   size?: 'small' | 'middle' | 'large';
   shape?: 'circle' | 'round' | 'default';
+  placement?:
+    | 'top'
+    | 'left'
+    | 'right'
+    | 'bottom'
+    | 'topLeft'
+    | 'topRight'
+    | 'bottomLeft'
+    | 'bottomRight';
   style?: React.CSSProperties;
 };
 
@@ -21,6 +30,7 @@ const CopyButton: React.FC<CopyButtonProps> = ({
   shape = 'default',
   fontSize = '14px',
   style,
+  placement,
   size = 'middle'
 }) => {
   const intl = useIntl();
@@ -55,7 +65,10 @@ const CopyButton: React.FC<CopyButtonProps> = ({
   }, [buttonRef]);
 
   return (
-    <Tooltip title={intl.formatMessage({ id: 'common.button.copy' })}>
+    <Tooltip
+      title={intl.formatMessage({ id: 'common.button.copy' })}
+      placement={placement}
+    >
       <Button
         className="copy-button"
         ref={buttonRef}
diff --git a/src/components/icon-font/index.tsx b/src/components/icon-font/index.tsx
index 1f5ffdee..c7b71af8 100644
--- a/src/components/icon-font/index.tsx
+++ b/src/components/icon-font/index.tsx
@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
 // import './iconfont/iconfont.js';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/c/font_4613488_fabphdpng0n.js'
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_hdf3t88r4j.js'
 });
 
 export default IconFont;
diff --git a/src/components/status-tag/copy.less b/src/components/status-tag/copy.less
index ba7abab8..ff9ddfe8 100644
--- a/src/components/status-tag/copy.less
+++ b/src/components/status-tag/copy.less
@@ -1,8 +1,10 @@
 :local(.status-content-wrapper) {
-  // padding-top: 24px;
   &:hover {
     :global(.copy-button-wrapper) {
-      display: block;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
     }
   }
 
@@ -12,13 +14,10 @@
       background-color: #383838;
       position: absolute;
       z-index: 10;
-      right: 0;
+      right: -28px;
       top: 0;
-      border-radius: 0 8px 0 4px;
-    }
-
-    .simplebar-scrollbar::before {
-      background: var(--color-scroll-bg);
+      padding: 2px;
+      border-radius: 4px;
     }
 
     .simplebar-content {
@@ -26,3 +25,8 @@
     }
   }
 }
+
+.simplebar-scrollbar::before {
+  background: var(--color-scroll-bg);
+  width: var(--scrollbar-size);
+}
diff --git a/src/components/status-tag/index.tsx b/src/components/status-tag/index.tsx
index 1e6ba8ac..e4aade7a 100644
--- a/src/components/status-tag/index.tsx
+++ b/src/components/status-tag/index.tsx
@@ -1,9 +1,9 @@
 import { StatusColorMap } from '@/config';
 import { StatusType } from '@/config/types';
 import { InfoCircleOutlined } from '@ant-design/icons';
-import { Tooltip } from 'antd';
+import { Button, Divider, Tooltip } from 'antd';
 import classNames from 'classnames';
-import { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import SimpleBar from 'simplebar-react';
 import 'simplebar-react/dist/simplebar.min.css';
 import CopyButton from '../copy-button';
@@ -28,11 +28,19 @@ type StatusTagProps = {
   download?: {
     percent: number;
   };
+  actions?: {
+    label: string;
+    icon?: React.ReactNode;
+    key: string;
+    onClick?: () => void;
+    render?: () => React.ReactNode;
+  }[];
 };
 
 const StatusTag: React.FC<StatusTagProps> = ({
   statusValue,
   download,
+  actions = [],
   type = 'tag'
 }) => {
   const { text, status } = statusValue;
@@ -70,7 +78,30 @@ const StatusTag: React.FC<StatusTagProps> = ({
             style={{ color: 'rgba(255,255,255,.8)' }}
             text={statusValue.message || ''}
             size="small"
+            placement="right"
           ></CopyButton>
+          {actions?.map((item) => {
+            return (
+              <>
+                <Divider
+                  style={{
+                    marginBlock: 5,
+                    borderColor: 'rgba(255,255,255,.5)'
+                  }}
+                />
+                <Tooltip title={item.label} key={item.key} placement="right">
+                  <Button
+                    size="small"
+                    type="text"
+                    style={{ color: 'rgba(255,255,255,.8)', padding: 1 }}
+                    onClick={item.onClick}
+                  >
+                    <span className="font-size-14">{item.icon}</span>
+                  </Button>
+                </Tooltip>
+              </>
+            );
+          })}
         </div>
 
         <SimpleBar style={{ maxHeight: 200 }}>
diff --git a/src/locales/en-US/models.ts b/src/locales/en-US/models.ts
index 968e1d67..d4741ef9 100644
--- a/src/locales/en-US/models.ts
+++ b/src/locales/en-US/models.ts
@@ -85,6 +85,6 @@ export default {
     'vLLM: For non-GGUF format models, supports x86 Linux only.',
   'models.form.backend.voxbox': 'vox-box: For non-GGUF format audio models.',
   'models.form.search.gguftips':
-    'Check GGUF on Mac and Windows (uncheck for seaching audio models).',
+    'If using Mac or Windows as a worker, check GGUF (uncheck for audio models).',
   'models.form.button.addlabel': 'Add Label'
 };
diff --git a/src/locales/zh-CN/models.ts b/src/locales/zh-CN/models.ts
index 125e9874..3893a321 100644
--- a/src/locales/zh-CN/models.ts
+++ b/src/locales/zh-CN/models.ts
@@ -81,6 +81,6 @@ export default {
   'models.form.backend.vllm': 'vLLM: 用于非 GGUF 格式模型，仅支持 x86 Linux',
   'models.form.backend.voxbox': 'vox-box: 用于非 GGUF 格式的音频模型',
   'models.form.search.gguftips':
-    '在 Mac 和 Windows 上勾选 GGUF（搜索音频模型时取消勾选）。',
+    '当 Mac 或 Windows 作 worker 时勾选 GGUF（搜索音频模型时取消勾选）',
   'models.form.button.addlabel': '添加标签'
 };
diff --git a/src/pages/llmodels/components/instance-item.tsx b/src/pages/llmodels/components/instance-item.tsx
index 5309dfd5..851e5a29 100644
--- a/src/pages/llmodels/components/instance-item.tsx
+++ b/src/pages/llmodels/components/instance-item.tsx
@@ -10,7 +10,6 @@ import {
 } from '@/pages/resources/config/types';
 import {
   DeleteOutlined,
-  FieldTimeOutlined,
   HddFilled,
   InfoCircleOutlined,
   ThunderboltFilled
@@ -72,7 +71,7 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
         InstanceStatusMap.Error,
         InstanceStatusMap.Downloading
       ],
-      icon: <FieldTimeOutlined />
+      icon: <IconFont type="icon-logs" />
     },
     {
       label: 'common.button.delrecreate',
@@ -260,6 +259,21 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
                   >
                     {item.state && (
                       <StatusTag
+                        actions={
+                          item.state === InstanceStatusMap.Error
+                            ? [
+                                {
+                                  label: intl.formatMessage({
+                                    id: 'common.button.viewlog'
+                                  }),
+                                  key: 'viewlog',
+                                  icon: <IconFont type="icon-logs" />,
+                                  onClick: () =>
+                                    handleChildSelect('viewlog', item, list)
+                                }
+                              ]
+                            : []
+                        }
                         download={
                           item.state === InstanceStatusMap.Downloading
                             ? { percent: item.download_progress }
diff --git a/src/pages/llmodels/components/view-logs-modal.tsx b/src/pages/llmodels/components/view-logs-modal.tsx
index b760d3bf..079af005 100644
--- a/src/pages/llmodels/components/view-logs-modal.tsx
+++ b/src/pages/llmodels/components/view-logs-modal.tsx
@@ -66,6 +66,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
           </span>
         </span>
       }
+      zIndex={3000}
       open={open}
       centered={true}
       onCancel={handleCancel}
diff --git a/src/pages/llmodels/style/column-wrapper.less b/src/pages/llmodels/style/column-wrapper.less
index 1c11f546..6e3f1024 100644
--- a/src/pages/llmodels/style/column-wrapper.less
+++ b/src/pages/llmodels/style/column-wrapper.less
@@ -1,18 +1,17 @@
 .column-wrapper {
   flex: 1;
   position: relative;
-  // border-left: 1px solid var(--ant-color-split);
 }
 
 .simplebar-scrollbar::before {
   width: var(--scrollbar-size);
+  background: var(--scrollbar-handle-bg);
 }
 
 .column-wrapper-footer {
   flex: 1;
   display: flex;
   position: relative;
-  // border-left: 1px solid var(--ant-color-split);
 
   .column-wrapper {
     border-left: none;
diff --git a/src/pages/llmodels/style/search-result.less b/src/pages/llmodels/style/search-result.less
index 0ca89a41..cc16e52d 100644
--- a/src/pages/llmodels/style/search-result.less
+++ b/src/pages/llmodels/style/search-result.less
@@ -4,14 +4,12 @@
   background-color: rgba(255, 255, 255, 100%);
   padding: 16px @padding;
   border-radius: 0 0 var(--border-radius-base) var(--border-radius-base);
-  // overflow-y: auto;
-  // height: calc(100vh - 194px);
 }
 
 .gguf-tips {
   display: flex;
   align-items: center;
-  padding: 8px 0;
+  padding: 7px 0;
   color: var(--ant-color-text-tertiary);
 
   .warning {
@@ -24,14 +22,13 @@
   right: 0;
   padding-inline: @padding;
   background: var(--color-white-1);
-  // border-bottom: 1px solid var(--ant-color-split);
-  padding-bottom: 16px;
+  padding-bottom: 10px;
 
   .filter {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-top: 16px;
+    margin-top: 10px;
     color: var(--ant-color-text-tertiary);
 
     :global {