fix(fe/uploadings): disable button when uploading is stopped or error found

public/static/css/white.css

@@ -648,3 +648,11 @@
 .item-name-horizontal {
   width: 48rem;
 }
+
+.theme-default .badge {
+  border: none;
+  border-radius: 0.5rem;
+  font-weight: bold;
+  font-size: 1.2rem;
+  padding: 0.8rem 1rem;
+}

src/client/web/src/components/panel_uploadings.tsx

@@ -76,9 +76,12 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
     const uploadingRows = uploadings.map((uploading: UploadEntry) => {
       const pathParts = uploading.filePath.split("/");
       const fileName = pathParts[pathParts.length - 1];
-      const progress = Math.floor((uploading.uploaded / uploading.size) * 100);
+      const progress =
+        uploading.size === 0
+          ? 100
+          : Math.floor((uploading.uploaded / uploading.size) * 100);
 
-      const op = (
+      let rightCell = (
         <div className="item-op">
           <button
             onClick={() => this.stopUploading(uploading.filePath)}
@@ -95,6 +98,29 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
         </div>
       );
 
+      switch (uploading.state) {
+        case UploadState.Error:
+          rightCell = (
+            <div className="item-op">
+              <span className="badge white-font red0-bg">
+                {this.props.msg.pkg.get("state.error")}
+              </span>
+            </div>
+          );
+          break;
+        case UploadState.Stopped:
+          rightCell = (
+            <div className="item-op">
+              <span className="badge yellow0-font black-bg">
+                {this.props.msg.pkg.get("state.stopped")}
+              </span>
+            </div>
+          );
+          break;
+        default:
+        // no op
+      }
+
       const progressBar = (
         <div className="progress-grey">
           <div
@@ -124,7 +150,7 @@ export class UploadingsPanel extends React.Component<Props, State, {}> {
             </span>
           </div>
 
-          <div className="op">{op}</div>
+          <div className="op">{rightCell}</div>
 
           {progressBar}
           {errorInfo}

src/client/web/src/i18n/en_US.ts

@@ -133,7 +133,9 @@ export const msgs: Map<string, string> = Map({
   "op.cancel": "Cancel",
   "term.time": "Time",
   "breadcrumb.loc": "Location",
-  "endpoints": "Endpoints",
+  endpoints: "Endpoints",
   "endpoints.root": "Root",
   "endpoints.home": "Home",
+  "state.stopped": "Stopped",
+  "state.error": "Error",
 });

src/client/web/src/i18n/zh_CN.ts

@@ -133,4 +133,6 @@ export const msgs: Map<string, string> = Map({
   "endpoints": "端点",
   "endpoints.root": "根",
   "endpoints.home": "家",
+  "state.stopped": "已停止",
+  "state.error": "错误",
 });