chore: add error tip when nothing get from backend (#659)

frontend/packages/core/components/Error.tsx

+import React, {FunctionComponent} from 'react';
+import {Trans, useTranslation} from '~/utils/i18n';
+import {WithStyled, backgroundColor, em, link, rem, size, textColor, textLightColor} from '~/utils/style';
+
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: ${backgroundColor};
+    height: 100%;
+    width: 100%;
+
+    > .image {
+        background-image: url(${`${process.env.PUBLIC_PATH}/images/empty.svg`});
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: 100% 100%;
+        ${size(rem(244), rem(280))}
+    }
+
+    > .inner {
+        width: calc(50% - ${rem(280)});
+        color: ${textLightColor};
+        ${link}
+
+        h4 {
+            color: ${textColor};
+            font-size: ${em(18)};
+            font-weight: 700;
+        }
+
+        p {
+            margin: 0;
+        }
+
+        ol {
+            padding-left: 2em;
+            line-height: 1.857142857;
+        }
+    }
+`;
+
+const Error: FunctionComponent<WithStyled> = ({className, children}) => {
+    const {t} = useTranslation('errors');
+
+    return (
+        <Wrapper className={className}>
+            <div className="image"></div>
+            <div className="inner">
+                {children || (
+                    <>
+                        <h4>{t('errors:common.title')}</h4>
+                        <p>{t('errors:common.description')}</p>
+                        <ol>
+                            <li>
+                                <Trans i18nKey="errors:common.1">
+                                    Log files are not generated. Please refer to&nbsp;
+                                    <a href="https://github.com/PaddlePaddle/VisualDL" target="_blank" rel="noreferrer">
+                                        README
+                                    </a>
+                                    &nbsp;to create log files.
+                                </Trans>
+                            </li>
+                            <li>
+                                <Trans i18nKey="errors:common.2">
+                                    Log files are generated but data is not written yet. Please refer to&nbsp;
+                                    <a
+                                        href="https://github.com/PaddlePaddle/VisualDL/blob/develop/docs/components/README.md"
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        VisualDL User Guide
+                                    </a>
+                                    &nbsp;to write visualized data.
+                                </Trans>
+                            </li>
+                            <li>
+                                <Trans i18nKey="errors:common.3">
+                                    Log files are generated and data is writte. Please try to&nbsp;
+                                    <a href="javascript:location.reload()">Refresh</a>.
+                                </Trans>
+                            </li>
+                            <li>
+                                <Trans i18nKey="errors:common.4">
+                                    Log files are generated but path to log directory is wrong. Please check your
+                                    directory and try again.
+                                </Trans>
+                            </li>
+                        </ol>
+                    </>
+                )}
+            </div>
+        </Wrapper>
+    );
+};
+
+export default Error;

frontend/packages/core/pages/high-dimensional.tsx

@@ -7,6 +7,7 @@ import {em, rem} from '~/utils/style';
 
 import Checkbox from '~/components/Checkbox';
 import Content from '~/components/Content';
+import Error from '~/components/Error';
 import Field from '~/components/Field';
 import HighDimensionalChart from '~/components/HighDimensionalPage/HighDimensionalChart';
 import Icon from '~/components/Icon';
@@ -95,7 +96,8 @@ const HighDimensional: NextI18NextPage = () => {
     const bottom = useMemo(() => <RunningToggle running={running} onToggle={setRunning} />, [running, setRunning]);
 
     const aside = useMemo(
-        () => (
+        () =>
+            labelList.length ? (
                 <Aside bottom={bottom}>
                     <AsideSection>
                         <AsideTitle>{t('common:select-runs')}</AsideTitle>
@@ -142,7 +144,7 @@ const HighDimensional: NextI18NextPage = () => {
                         </Field>
                     </AsideSection>
                 </Aside>
-        ),
+            ) : null,
         [t, bottom, dimension, label, labelList, labelVisibility, reduction, search]
     );
 
@@ -151,7 +153,9 @@ const HighDimensional: NextI18NextPage = () => {
             <Preloader url="/runs" />
             <Title>{t('common:high-dimensional')}</Title>
             <Content aside={aside} loading={loading}>
-                {error ? (
+                {!loading && !list.length ? (
+                    <Error />
+                ) : error ? (
                     <div>{t('common:error')}</div>
                 ) : loading ? null : (
                     <HighDimensionalChart

frontend/packages/core/pages/samples.tsx

@@ -7,6 +7,7 @@ import React, {useCallback, useMemo, useState} from 'react';
 import {AsideSection} from '~/components/Aside';
 import Checkbox from '~/components/Checkbox';
 import Content from '~/components/Content';
+import Error from '~/components/Error';
 import Field from '~/components/Field';
 import Preloader from '~/components/Preloader';
 import RunAside from '~/components/RunAside';
@@ -49,7 +50,8 @@ const Samples: NextI18NextPage = () => {
     const [contrast, setContrast] = useState(1);
 
     const aside = useMemo(
-        () => (
+        () =>
+            runs.length ? (
                 <RunAside
                     runs={runs}
                     selectedRuns={selectedRuns}
@@ -73,7 +75,7 @@ const Samples: NextI18NextPage = () => {
                         </Field>
                     </AsideSection>
                 </RunAside>
-        ),
+            ) : null,
         [t, brightness, contrast, onChangeRuns, running, runs, selectedRuns, showActualSize]
     );
 
@@ -97,12 +99,16 @@ const Samples: NextI18NextPage = () => {
             <Preloader url="/images/tags" />
             <Title>{t('common:samples')}</Title>
             <Content aside={aside} loading={loadingRuns}>
+                {!loadingRuns && !runs.length ? (
+                    <Error />
+                ) : (
                     <ChartPage
                         items={ungroupedSelectedTags}
                         chartSize={chartSize}
                         withChart={withChart}
                         loading={loadingRuns || loadingTags}
                     />
+                )}
             </Content>
         </>
     );

frontend/packages/core/pages/scalars.tsx

@@ -6,6 +6,7 @@ import {sortingMethodMap, xAxisMap} from '~/resource/scalars';
 import {AsideSection} from '~/components/Aside';
 import Checkbox from '~/components/Checkbox';
 import Content from '~/components/Content';
+import Error from '~/components/Error';
 import Field from '~/components/Field';
 import Preloader from '~/components/Preloader';
 import RadioButton from '~/components/RadioButton';
@@ -53,7 +54,8 @@ const Scalars: NextI18NextPage = () => {
     const [ignoreOutliers, setIgnoreOutliers] = useState(false);
 
     const aside = useMemo(
-        () => (
+        () =>
+            runs.length ? (
                 <RunAside
                     runs={runs}
                     selectedRuns={selectedRuns}
@@ -94,7 +96,7 @@ const Scalars: NextI18NextPage = () => {
                         </Field>
                     </AsideSection>
                 </RunAside>
-        ),
+            ) : null,
         [t, ignoreOutliers, onChangeRuns, running, runs, selectedRuns, smoothing, tooltipSorting, xAxis]
     );
 
@@ -120,7 +122,11 @@ const Scalars: NextI18NextPage = () => {
             <Preloader url="/scalars/tags" />
             <Title>{t('common:scalars')}</Title>
             <Content aside={aside} loading={loadingRuns}>
+                {!loadingRuns && !runs.length ? (
+                    <Error />
+                ) : (
                     <ChartPage items={tags} withChart={withChart} loading={loadingRuns || loadingTags} />
+                )}
             </Content>
         </>
     );

frontend/packages/core/public/locales/en/errors.json

 {
     "error-with-status": "A {{statusCode}} error occurred on server",
     "error-without-status": "An error occurred on the server",
-    "page-not-found": "Page Not Found"
+    "page-not-found": "Page Not Found",
+    "common": {
+        "title": "No visualized data.",
+        "description": "Possible reasons are:",
+        "1": "Log files are not generated. Please refer to <1>README</1> to create log files.",
+        "2": "Log files are generated but data is not written yet. Please refer to <1>VisualDL User Guide</1> to write visualized data.",
+        "3": "Log files are generated and data is writte. Please try to <1>Refresh</1>.",
+        "4": "Log files are generated but path to log directory is wrong. Please check your directory and try again."
+    }
 }

frontend/packages/core/public/locales/zh/errors.json

 {
     "error-with-status": "服务器发生了一个 {{statusCode}} 错误",
     "error-without-status": "服务器发生了一个错误",
-    "page-not-found": "页面不存在"
+    "page-not-found": "页面不存在",
+    "common": {
+        "title": "无可视化结果展示",
+        "description": "有以下几种可能原因，请您参考相应解决方案：",
+        "1": "未生成日志文件。请参考 <1>README</1> 创建日志文件。",
+        "2": "已生成日志文件，但尚未打点数据。请参考 <1>VisualDL使用指南</1> ，对需要进行可视化的数据进行打点记录。",
+        "3": "已生成文件并打点数据，请尝试 <1>刷新</1> 。",
+        "4": "已生成文件，但日志文件路径错误，请确保文件路径正确。"
+    }
 }