mod: service icon to img

src/App.tsx

@@ -25,13 +25,14 @@ type IProps = RouteComponentProps;
 
 class App extends React.Component<IProps> {
   currentLocale;
+
   constructor(props: IProps) {
     super(props);
     const regx = /lang=(\w+)/g;
     const match = regx.exec(props.history.location.search);
     const lang = document.documentElement.getAttribute('lang');
-    
-    if(!cookies.get('locale')){
+
+    if (!cookies.get('locale')) {
       if (match) {
         cookies.set('locale', match[1] === 'EN_US' ? 'EN_US' : 'ZH_CN');
       } else {

src/AuthorizedRoute.tsx

@@ -1,6 +1,11 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Redirect, Route, RouteComponentProps, withRouter } from 'react-router-dom';
+import {
+  Redirect,
+  Route,
+  RouteComponentProps,
+  withRouter,
+} from 'react-router-dom';
 import cookies from 'js-cookie';
 
 import { IRootState } from '@/store';
@@ -25,10 +30,8 @@ const AuthorizedRoute = (props: IProps) => {
     ) : (
       <Route render={render} {...rest} />
     );
-  } else {
-    return <Redirect to="/login" {...rest} />;
   }
+  return <Redirect to="/login" {...rest} />;
 };
 
-
 export default connect(mapState, mapDispatch)(withRouter(AuthorizedRoute));

src/components/MetricPopover/index.tsx

@@ -20,12 +20,18 @@ export const MetricPopover = (props: { list }) => {
       content={
         <div className={styles.popoverMetric}>
           <div className={styles.metricContent}>
-            <Form className={styles.metric} labelCol={{ span: 13 }} wrapperCol={{ span: 11 }}>
+            <Form
+              className={styles.metric}
+              labelCol={{ span: 13 }}
+              wrapperCol={{ span: 11 }}
+            >
               {props.list.map(option => {
-                if(intl.get(`metric_description.${option.metric}`)){
-                  return <Form.Item key={option.metric} label={option.metric}>
-                    {intl.get(`metric_description.${option.metric}`)}
-                  </Form.Item>;
+                if (intl.get(`metric_description.${option.metric}`)) {
+                  return (
+                    <Form.Item key={option.metric} label={option.metric}>
+                      {intl.get(`metric_description.${option.metric}`)}
+                    </Form.Item>
+                  );
                 }
               })}
             </Form>

src/components/Service/ServiceCardEdit/index.tsx

@@ -27,13 +27,16 @@ class ServiceCardEdit extends React.Component<IProps> {
   formRef = React.createRef<FormInstance>();
 
   handleUpdateMetricType = (value: string) => {
-    const { serviceMetric = { spaces: [], graphd: [], storaged:[], metad:[] }, editType } = this.props;
+    const {
+      serviceMetric = { spaces: [], graphd: [], storaged: [], metad: [] },
+      editType,
+    } = this.props;
     const metric = serviceMetric[`${editType}d`].filter(
       item => item.metric === value,
     )[0];
     this.formRef.current!.setFieldsValue({
       metricFunction: metric?.metricType[0].value,
-      space: ''
+      space: '',
     });
   };
 
@@ -61,7 +64,8 @@ class ServiceCardEdit extends React.Component<IProps> {
   };
 
   render() {
-    const { editIndex, editType, serviceMetric, panelConfig, onClose } = this.props;
+    const { editIndex, editType, serviceMetric, panelConfig, onClose } =
+      this.props;
     const editItem = panelConfig[editType][editIndex];
     return (
       <div className="service-card-edit">
@@ -101,13 +105,10 @@ class ServiceCardEdit extends React.Component<IProps> {
                 item => item.metric === metric,
               )[0]?.isSpaceMetric;
               return getFieldValue('metric') && isSpaceMetric ? (
-                <Form.Item
-                  label={intl.get('service.spaces')}
-                  name="space"
-                >
+                <Form.Item label={intl.get('service.spaces')} name="space">
                   <DashboardSelect>
                     <Option key="all" value="">
-                      {intl.get('common.all')} 
+                      {intl.get('common.all')}
                     </Option>
                     {serviceMetric.spaces?.map(space => (
                       <Option key={space} value={space}>

src/components/Service/ServiceHeader/index.less

@@ -19,6 +19,10 @@
 			font-size: 18px;
 			text-transform: capitalize;
 		}
+		img{
+			width: 28px;
+			height: 28px;
+		}
 	}
 
 	.btn-icon-with-desc {

src/components/Service/ServiceHeader/index.tsx

@@ -1,18 +1,36 @@
 import React from 'react';
 import Icon from '@/components/Icon';
+import metadIcon from '@base/static/images/Meta-image.png';
+import graphdIcon from '@base/static/images/Graphd-image.png';
+import storagedIcon from '@base/static/images/Storage-image.png';
 import './index.less';
 
 interface IProps {
   title: string;
-  icon: string;
+  icon?: string;
 }
 class ServiceHeader extends React.PureComponent<IProps> {
+  getLogo = () => {
+    const { title } = this.props;
+    switch (title) {
+      case 'Graph Service':
+        return graphdIcon;
+      case 'Storage Service':
+        return storagedIcon;
+      case 'Meta Service':
+        return metadIcon;
+      default:
+        break;
+    }
+  };
+
   render() {
     const { title, icon } = this.props;
     return (
       <div className="service-content-header">
         <div className="flex header-left">
-          <Icon className="icon-graph blue" icon={icon} />
+          {!!icon && <Icon className="icon-graph blue" icon={icon} />}
+          {!icon && <img src={this.getLogo()} />}
           <span className="title">{title}</span>
         </div>
         <div className="flex">{this.props.children}</div>

src/components/StatusPanel/index.tsx

@@ -6,48 +6,42 @@ import { NEBULA_COUNT } from '@/utils/promQL';
 import { DETAIL_DEFAULT_RANGE } from '@/utils/dashboard';
 import { SERVICE_POLLING_INTERVAL } from '@/utils/service';
 
-
 import './index.less';
 
-const mapState = () => {
-  return {
-  };
-};
+const mapState = () => ({});
 
+const mapDispatch = (dispatch: IDispatch) => ({
+  asyncGetStatus: dispatch.service.asyncGetStatus,
+});
 
-const mapDispatch = (dispatch: IDispatch) => {
-  return {
-    asyncGetStatus: dispatch.service.asyncGetStatus,
-  };
-};
-
-interface IProps extends ReturnType<typeof mapDispatch>{
-  type: string,
-  getStatus: (payload)=> void;
+interface IProps extends ReturnType<typeof mapDispatch> {
+  type: string;
+  getStatus: (payload) => void;
 }
 
 interface IState {
-  normal: number,
-  abnormal: number,
+  normal: number;
+  abnormal: number;
 }
 class StatusPanel extends React.PureComponent<IProps, IState> {
   pollingTimer: any;
+
   constructor(props: IProps) {
     super(props);
     this.state = {
       normal: 0,
-      abnormal: 0
+      abnormal: 0,
     };
   }
+
   componentDidMount() {
     this.pollingData();
   }
 
-
   pollingData = () => {
     this.asyncGetStatus();
     this.pollingTimer = setTimeout(this.pollingData, SERVICE_POLLING_INTERVAL);
-  }
+  };
 
   componentWillUnmount() {
     if (this.pollingTimer) {
@@ -57,23 +51,27 @@ class StatusPanel extends React.PureComponent<IProps, IState> {
 
   asyncGetStatus = async () => {
     const { type } = this.props;
-    const { normal, abnormal } = await this.props.getStatus({
+    const { normal, abnormal } = (await this.props.getStatus({
       query: NEBULA_COUNT[type],
       end: Date.now(),
-      interval:DETAIL_DEFAULT_RANGE,
-    }) as any;
+      interval: DETAIL_DEFAULT_RANGE,
+    })) as any;
     this.setState({ normal, abnormal });
-  } 
+  };
 
   render() {
     const { normal, abnormal } = this.state;
     return (
       <ul className="status-panel">
-        <li className="normal">{intl.get('service.normal')}: <span>{normal}</span></li>
-        <li className="abnormal">{intl.get('service.abnormal')}: <span>{abnormal}</span></li>
+        <li className="normal">
+          {intl.get('service.normal')}: <span>{normal}</span>
+        </li>
+        <li className="abnormal">
+          {intl.get('service.abnormal')}: <span>{abnormal}</span>
+        </li>
       </ul>
     );
   }
 }
 
-export default connect(mapState, mapDispatch)(StatusPanel);
+export default connect(mapState, mapDispatch)(StatusPanel);

src/config/index.ts

@@ -1 +1 @@
-export * from './constants';
+export * from './constants';

src/config/rules.ts

@@ -17,4 +17,4 @@ export const versionRulesFn = intl => [
     required: true,
     message: intl.get('rules.versionRequired'),
   },
-];
+];

src/config/service.ts

@@ -25,5 +25,5 @@ export default {
   execPromQL,
   execPromQLByRange,
   getCustomConfig,
-  getAnnotationLineConfig
+  getAnnotationLineConfig,
 };