-
-
- Volumes
-
- {snapshotDetails?.volumes?.length > 3 ? (
-
-
this.toggleShowAllVolumes()}
- >
- Show all {snapshotDetails?.volumes?.length} volumes
+ )}
+ {showAllPreSnapshotScripts && (
+
+ )}
+ {showAllPostSnapshotScripts && (
+
+ )}
+ {showAllWarnings && (
+
+ )}
+ {showAllErrors && (
+
+ )}
+
+
+
- {!isEmpty(snapshotDetails?.volumes) ? (
- this.renderShowAllVolumes(
- snapshotDetails?.volumes?.slice(0, 3)
- )
- ) : (
-
-
- {" "}
- No volumes to display{" "}
-
-
- )}
-
-
-
-
- Scripts
-
- {this.preSnapshotScripts()?.length > 3 &&
- selectedScriptTab === "Pre-snapshot scripts" ? (
-
- this.toggleShowAllPreScripts()}
- >
- Show all {this.preSnapshotScripts()?.length}{" "}
- pre-scripts
-
-
- ) : null}
- {this.postSnapshotScripts()?.length > 3 &&
- selectedScriptTab === "Post-snapshot scripts" ? (
-
+
+ {snapshotDetail.status !== "Completed" ? (
this.toggleShowAllPostScripts()}
- >
- Show all {this.postSnapshotScripts()?.length}{" "}
- post-scripts
-
-
- ) : null}
-
-
- {this.renderScriptsTabs()}
-
-
-
- {selectedScriptTab === "Pre-snapshot scripts" ? (
- !isEmpty(this.preSnapshotScripts()) ? (
- this.renderShowAllScripts(
- this.preSnapshotScripts().slice(0, 3)
- )
- ) : (
-
-
- {" "}
- No pre-{featureName} scripts to display{" "}
-
-
- )
- ) : selectedScriptTab === "Post-snapshot scripts" &&
- !isEmpty(this.postSnapshotScripts()) ? (
- this.renderShowAllScripts(
- this.postSnapshotScripts().slice(0, 3)
- )
- ) : (
-
-
- {" "}
- No post-{featureName} scripts to display{" "}
-
+ className={`status-indicator ${snapshotDetail?.status?.toLowerCase()} tw-mx-2 tw-mb-4`}
+ >
+ ) : null}
- )}
-
-
-
+
+
- {(!isEmpty(snapshotDetails?.errors) ||
- !isEmpty(snapshotDetails?.warnings)) && (
-
-
-
-
-
-
- Errors and warnings
-
- {snapshotDetails?.errors?.length > 3 &&
- selectedErrorsWarningTab === "Errors" ? (
-
-
this.toggleShowAllErrors()}
- >
- Show all {snapshotDetails?.errors?.length}{" "}
- errors{" "}
+
+
+
+
+ Size:{" "}
+
+ {snapshotDetail?.volumeSizeHuman}
-
- ) : null}
- {snapshotDetails?.warnings?.length > 3 &&
- selectedErrorsWarningTab === "Warnings" ? (
-
+
+
+ Status:{" "}
this.toggleShowAllWarnings()}
+ className={`tw-mb-4 status-indicator ${snapshotDetail?.status?.toLowerCase()} u-marginLeft--5`}
+ >
+ {Utilities.snapshotStatusToDisplayName(
+ snapshotDetail?.status
+ )}
+
+
+
+ {snapshotDetail?.status !== "InProgress" && (
+
+ this.viewLogs(snapshotDetail?.name)
+ }
>
- Show all {snapshotDetails?.warnings?.length}{" "}
- warnings{" "}
+ View logs
-
- ) : null}
-
-
- {this.renderErrorsWarningsTabs()}
+ )}
+
-
- {selectedErrorsWarningTab === "Errors" ? (
- !isEmpty(snapshotDetails?.errors) ? (
- this.renderShowAllErrors(
- snapshotDetails?.errors.slice(0, 3)
- )
- ) : (
-
-
- {" "}
- No errors to display{" "}
-
-
- )
- ) : selectedErrorsWarningTab === "Warnings" &&
- !isEmpty(snapshotDetails?.warnings) ? (
- this.renderShowAllWarnings(
- snapshotDetails?.warnings?.slice(0, 3)
- )
- ) : (
-
-
+
+ {snapshotDetail?.status === "InProgress" ? (
+
+
+
{" "}
- No warnings to display{" "}
+ This {featureName} has not completed yet, check
+ back soon{" "}
+ ) : (
+
+ {!isEmpty(snapshotDetail?.volumes) ||
+ !isEmpty(this.preSnapshotScripts(snapshotDetail)) ||
+ !isEmpty(
+ this.postSnapshotScripts(snapshotDetail)
+ ) ? (
+
+
+ {Utilities.toTitleCase(featureName)} timeline
+
+
+
+ {/* {this.renderTimeInterval(snapshotDetail)} */}
+
+
+ ) : null}
+
+
+
+
+
+
+ Volumes
+
+ {snapshotDetail?.volumes?.length > 3 ? (
+
+
+ this.toggleShowAllVolumes()
+ }
+ >
+ Show all{" "}
+ {snapshotDetail?.volumes?.length}{" "}
+ volumes
+
+
+ ) : null}
+
+ {!isEmpty(snapshotDetail?.volumes) ? (
+ this.renderShowAllVolumes(
+ snapshotDetail?.volumes?.slice(0, 3)
+ )
+ ) : (
+
+
+ {" "}
+ No volumes to display{" "}
+
+
+ )}
+
+
+
+
+
+ Scripts
+
+ {this.preSnapshotScripts()?.length > 3 &&
+ selectedScriptTab ===
+ "Pre-snapshot scripts" ? (
+
+
+ this.toggleShowAllPreScripts()
+ }
+ >
+ Show all{" "}
+ {this.preSnapshotScripts()?.length}{" "}
+ pre-scripts
+
+
+ ) : null}
+ {this.postSnapshotScripts(snapshotDetail)
+ ?.length > 3 &&
+ selectedScriptTab ===
+ "Post-snapshot scripts" ? (
+
+
+ this.toggleShowAllPostScripts()
+ }
+ >
+ Show all{" "}
+ {
+ this.postSnapshotScripts(
+ snapshotDetail
+ )?.length
+ }{" "}
+ post-scripts
+
+
+ ) : null}
+
+
+ {this.renderScriptsTabs()}
+
+
+
+ {selectedScriptTab ===
+ "Pre-snapshot scripts" ? (
+ !isEmpty(
+ this.preSnapshotScripts(snapshotDetail)
+ ) ? (
+ this.renderShowAllScripts(
+ this.preSnapshotScripts(
+ snapshotDetail
+ ).slice(0, 3)
+ )
+ ) : (
+
+
+ {" "}
+ No pre-{featureName} scripts to
+ display{" "}
+
+
+ )
+ ) : selectedScriptTab ===
+ "Post-snapshot scripts" &&
+ !isEmpty(
+ this.postSnapshotScripts(snapshotDetail)
+ ) ? (
+ this.renderShowAllScripts(
+ this.postSnapshotScripts(
+ snapshotDetail
+ ).slice(0, 3)
+ )
+ ) : (
+
+
+ {" "}
+ No post-{featureName} scripts to
+ display{" "}
+
+
+ )}
+
+
+
+
+
+ {(!isEmpty(snapshotDetail?.errors) ||
+ !isEmpty(snapshotDetail?.warnings)) && (
+
+
+
+
+
+
+ Errors and warnings
+
+ {snapshotDetail?.errors?.length > 3 &&
+ selectedErrorsWarningTab ===
+ "Errors" ? (
+
+
+ this.toggleShowAllErrors()
+ }
+ >
+ Show all{" "}
+ {snapshotDetail?.errors?.length}{" "}
+ errors{" "}
+
+
+ ) : null}
+ {snapshotDetail?.warnings?.length > 3 &&
+ selectedErrorsWarningTab ===
+ "Warnings" ? (
+
+
+ this.toggleShowAllWarnings()
+ }
+ >
+ Show all{" "}
+ {snapshotDetail?.warnings?.length}{" "}
+ warnings{" "}
+
+
+ ) : null}
+
+
+ {this.renderErrorsWarningsTabs(
+ snapshotDetail
+ )}
+
+
+
+ {selectedErrorsWarningTab === "Errors" ? (
+ !isEmpty(snapshotDetail?.errors) ? (
+ this.renderShowAllErrors(
+ snapshotDetail?.errors.slice(0, 3)
+ )
+ ) : (
+
+
+ {" "}
+ No errors to display{" "}
+
+
+ )
+ ) : selectedErrorsWarningTab ===
+ "Warnings" &&
+ !isEmpty(snapshotDetail?.warnings) ? (
+ this.renderShowAllWarnings(
+ snapshotDetail?.warnings?.slice(0, 3)
+ )
+ ) : (
+
+
+ {" "}
+ No warnings to display{" "}
+
+
+ )}
+
+
+
+
+ )}
+
)}
- )}
-
- )}
+ );
+ })}
+
+
+ );
+ };
+
+ render() {
+ const { isEmbeddedCluster, navigate } = this.props;
+
+ const {
+ loading,
+ showScriptsOutput,
+ selectedTab,
+ selectedScriptTab,
+ scriptOutput,
+ showAllVolumes,
+ showAllPreSnapshotScripts,
+ showAllPostSnapshotScripts,
+ selectedErrorsWarningTab,
+ showAllErrors,
+ showAllWarnings,
+ snapshotDetails,
+ currentSnapshotIndex,
+ series,
+ errorMessage,
+ errorTitle,
+ } = this.state;
+
+ let featureName = "snapshot";
+ if (isEmbeddedCluster) {
+ featureName = "backup";
+ }
+
+ const { params } = this.props;
+
+ const snapshotName = params.id;
+ if (loading) {
+ return (
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ this.props.navigate(-1)}>
+ {Utilities.toTitleCase(featureName)}
+
+ >
+ {snapshotName}
+
+
+ {this.renderSnapshot()}
{showScriptsOutput && scriptOutput && (
)}
- {showAllVolumes && (
-
- )}
- {showAllPreSnapshotScripts && (
-
- )}
- {showAllPostSnapshotScripts && (
-
- )}
- {showAllWarnings && (
-
- )}
- {showAllErrors && (
-
- )}
+
{this.state.toggleViewLogsModal && (
)}
-
- {" "}
- {snapshot?.volumeSuccessCount}/{snapshot?.volumeCount}
-
{snapshot?.status === "Completed" ? (
diff --git a/web/src/scss/utilities/base.scss b/web/src/scss/utilities/base.scss
index 480333a6a2..863e1a4432 100644
--- a/web/src/scss/utilities/base.scss
+++ b/web/src/scss/utilities/base.scss
@@ -247,7 +247,7 @@ body a {
background-color: #4999ad;
}
&.partiallyfailed::before {
- background-color: #f1843c;
+ background-color: #bc4752;
}
&.deleting::before {
background-color: #f7b500;