feat: ui task view add reload (#3333)

umijs · Sep 29, 2019 · 46ee7bf · 46ee7bf
1 parent 29f14d6
commit 46ee7bf
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 27 deletions.
diff --git a/packages/umi-ui-tasks/src/server/util/stats.ts b/packages/umi-ui-tasks/src/server/util/stats.ts
@@ -60,7 +60,7 @@ export function parseChartData(stats) {
     return null;
   }
   let chartData;
-  const analyzer = require('webpack-bundle-analyzer/lib/analyzer');
+  const analyzer = require('umi-webpack-bundle-analyzer/lib/analyzer');
 
   try {
     /**

diff --git a/packages/umi-ui-tasks/src/ui/components/Analyze/index.module.less b/packages/umi-ui-tasks/src/ui/components/Analyze/index.module.less
@@ -54,8 +54,26 @@
   margin-left: 7px;
 }
 
+.iframeContainer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.reload {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 100;
+  cursor: pointer;
+  color: #aaa;
+  width: 24px;
+  height: 24px;
+}
+
 .iframe {
   width: 100%;
+  height: 100%;
   border: 0;
 }
 .empty {

diff --git a/packages/umi-ui-tasks/src/ui/components/Analyze/index.tsx b/packages/umi-ui-tasks/src/ui/components/Analyze/index.tsx
@@ -4,6 +4,7 @@ import Tooltip from './Tooltip';
 import filesize from 'filesize';
 import styles from './index.module.less';
 import { Analyze } from '../../util/analyze';
+import { Reload } from '@ant-design/icons';
 
 const SIZE_SWITCH_ITEMS = [
   { label: 'Stat', prop: 'statSize' },
@@ -19,6 +20,12 @@ interface IProps {
 
 class AnalyzeComponent extends Component<IProps> {
   treemap = null;
+  iframeRef = null;
+
+  constructor(props) {
+    super(props);
+    this.iframeRef = React.createRef();
+  }
 
   saveRef = treemap => {
     this.treemap = treemap;
@@ -27,6 +34,7 @@ class AnalyzeComponent extends Component<IProps> {
   state = {
     showTooltip: false,
     tooltipContent: '',
+    showReloadFlag: false,
   };
 
   handleMouseLeaveTreemap = () => {
@@ -91,8 +99,28 @@ class AnalyzeComponent extends Component<IProps> {
     });
   };
 
+  showReload = () => {
+    this.setState({
+      showReloadFlag: true,
+    });
+  };
+
+  hideReload = () => {
+    this.setState({
+      showReloadFlag: false,
+    });
+  };
+
+  reloadIframe = () => {
+    if (!this.iframeRef || !this.iframeRef.current) {
+      return;
+    }
+    this.iframeRef.current.contentWindow.location = this.props.src;
+  };
+
   render() {
     const { analyze, src, api } = this.props;
+    const { showReloadFlag } = this.state;
     const { intl } = api;
 
     if (!src && !analyze) {
@@ -104,9 +132,20 @@ class AnalyzeComponent extends Component<IProps> {
     }
 
     return (
-      <div className={styles.container}>
+      <div
+        className={styles.container}
+        onMouseEnter={this.showReload}
+        onMouseLeave={this.hideReload}
+      >
         {src ? (
-          <iframe className={styles.iframe} src={src} />
+          <div className={styles.iframeContainer}>
+            {showReloadFlag ? (
+              <div className={styles.reload} onClick={this.reloadIframe}>
+                <Reload />
+              </div>
+            ) : null}
+            <iframe ref={this.iframeRef} className={styles.iframe} src={src} />
+          </div>
         ) : (
           <>
             <Treemap

diff --git a/packages/umi-ui-tasks/src/ui/components/Build/index.tsx b/packages/umi-ui-tasks/src/ui/components/Build/index.tsx
@@ -44,24 +44,26 @@ const BuildComponent: React.FC<IProps> = ({ api, detail = {}, dispatch, dbPath }
       if (!init) {
         return () => {};
       }
-      dispatch({
-        type: `${namespace}/getTaskDetail`,
-        payload: {
-          taskType,
-          log: true,
-          dbPath,
-          callback: ({ log }) => {
-            setLog(log);
+      if (view === 'log') {
+        dispatch({
+          type: `${namespace}/getTaskDetail`,
+          payload: {
+            taskType,
+            log: true,
+            dbPath,
+            callback: ({ log }) => {
+              setLog(log);
+            },
           },
-        },
-      });
+        });
+      }
       return () => {
         form.resetFields();
         const terminal = getTerminalIns(taskType);
         terminal && terminal.clear();
       };
     },
-    [init],
+    [init, view],
   );
 
   async function build() {

diff --git a/packages/umi-ui-tasks/src/ui/components/Dev/index.tsx b/packages/umi-ui-tasks/src/ui/components/Dev/index.tsx
@@ -48,25 +48,27 @@ const DevComponent: React.FC<IProps> = ({ api, detail = {}, dispatch, dbPath })
       if (!init) {
         return () => {};
       }
-      dispatch({
-        type: `${namespace}/getTaskDetail`,
-        payload: {
-          taskType,
-          log: true,
-          dbPath,
-          callback: ({ log, stats }) => {
-            setLog(log);
+      if (view === 'log') {
+        dispatch({
+          type: `${namespace}/getTaskDetail`,
+          payload: {
+            taskType,
+            log: true,
+            dbPath,
+            callback: ({ log }) => {
+              setLog(log);
+            },
           },
-        },
-      });
+        });
+      }
       // UnMount: reset form
       return () => {
         form.resetFields();
         const terminal = getTerminalIns(taskType);
         terminal && terminal.clear();
       };
     },
-    [init],
+    [init, view],
   );
 
   async function dev() {
@@ -341,7 +343,11 @@ const DevComponent: React.FC<IProps> = ({ api, detail = {}, dispatch, dbPath })
               ) : (
                 <Analyze
                   api={api}
-                  src={detail.analyzePort ? `http://127.0.0.1:${detail.analyzePort}` : null}
+                  src={
+                    detail.analyzePort
+                      ? `http://${window.location.hostname}:${detail.analyzePort}`
+                      : null
+                  }
                 />
               )
             }

diff --git a/packages/umi-ui-tasks/src/ui/model/index.ts b/packages/umi-ui-tasks/src/ui/model/index.ts
@@ -81,14 +81,14 @@ export default {
     updateTaskDetail(state, { payload }) {
       const { taskType, detail, cwd } = payload;
       const { stats, ...rest } = detail;
-
       return {
         ...state,
         tasks: {
           ...state.tasks,
           [cwd]: {
             ...state.tasks[cwd],
             [taskType]: {
+              ...state.tasks[cwd][taskType],
               ...rest,
               analyze: stats ? new Analyze(stats) : null,
             },