fix: Fix some style

1. fix overview style
2. change menu position
3. fix metadata detail json css

Change-Id: I656fee63a4d54d3f17ed58617749aa79fa6ab6ec

src/layouts/admin-menu.jsx

@@ -558,20 +558,6 @@ const renderMenu = (t) => {
       key: '/configuration-admin',
       icon: <SettingOutlined />,
       children: [
-        {
-          path: '/configuration-admin/metadata',
-          name: t('Metadata Definitions'),
-          key: '/configuration-admin/metadata',
-          level: 1,
-          children: [
-            {
-              path: /^\/configuration-admin\/metadata\/detail\/.[^/]+$/,
-              name: t('Metadata Detail'),
-              key: 'metadata-detail',
-              level: 2,
-            },
-          ],
-        },
         {
           path: '/configuration-admin/info',
           name: t('System Info'),
@@ -592,6 +578,20 @@ const renderMenu = (t) => {
           key: '/configuration-admin/setting',
           level: 1,
         },
+        {
+          path: '/configuration-admin/metadata',
+          name: t('Metadata Definitions'),
+          key: '/configuration-admin/metadata',
+          level: 1,
+          children: [
+            {
+              path: /^\/configuration-admin\/metadata\/detail\/.[^/]+$/,
+              name: t('Metadata Detail'),
+              key: 'metadata-detail',
+              level: 2,
+            },
+          ],
+        },
       ],
     },
   ];

src/pages/base/containers/Overview/index.jsx

@@ -55,9 +55,9 @@ const actions = [
 @observer
 class Overview extends Component {
   renderAction = (item) => (
-    <Row className={styles.actionButton}>
+    <Row className={styles.actionButton} gutter={[8]}>
       <Col span={12} className={styles.main_icon}>
-        <img alt="avatar" src={item.avatar} style={{ height: 50 }} />
+        <img alt="avatar" src={item.avatar} className={styles.actionIcon} />
       </Col>
       <Col span={12} style={{ textAlign: 'center' }}>
         {item.label}

src/pages/base/containers/Overview/style.less

@@ -22,6 +22,13 @@
     color: #a3a3a3;
   }
 
+  .actionIcon {
+    display: block;
+    width: 50px;
+    height: 50px;
+    margin-left: 60px;
+  }
+
   :global {
     .ant-card {
       box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.09);

src/pages/configuration/containers/Metadata/Detail/BaseDetail.jsx

@@ -16,6 +16,7 @@ import React from 'react';
 import { inject, observer } from 'mobx-react';
 import { MetadataStore } from 'stores/glance/metadata';
 import Base from 'containers/BaseDetail';
+import styles from './styles.less';
 
 @inject('rootStore')
 @observer
@@ -69,9 +70,9 @@ export default class BaseDetail extends Base {
 
   get jsonCard() {
     const content = (
-      <div>
+      <pre className={styles.json_data}>
-        <pre>{JSON.stringify(this.detailData, null, 4)}</pre>
+        {JSON.stringify(this.detailData, null, 4)}
-      </div>
+      </pre>
     );
     const options = [
       {

src/pages/configuration/containers/Metadata/Detail/styles.less

@@ -0,0 +1,4 @@
+.json_data {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}