style: view instance logs

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}

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;

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);
+}

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 }}>