Tune the column width, fix the problem of showing snapshot failures (#…

…210) Signed-off-by: bowenlan-amzn <[email protected]>
opensearch-project · Jun 29, 2022 · e82d77f · e82d77f
1 parent 2947db6
commit e82d77f
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 10 deletions.
diff --git a/public/pages/Repositories/containers/Repositories/Repositories.tsx b/public/pages/Repositories/containers/Repositories/Repositories.tsx
@@ -23,6 +23,7 @@ import CreateRepositoryFlyout from "../../components/CreateRepositoryFlyout";
 import { FieldValueSelectionFilterConfigType } from "@elastic/eui/src/components/search_bar/filters/field_value_selection_filter";
 import { BREADCRUMBS } from "../../../../utils/constants";
 import DeleteModal from "../../components/DeleteModal";
+import { truncateSpan } from "../../../Snapshots/helper";
 
 interface RepositoriesProps extends RouteComponentProps {
   snapshotManagementService: SnapshotManagementService;
@@ -67,6 +68,9 @@ export default class Repositories extends Component<RepositoriesProps, Repositor
         dataType: "string",
         width: "15%",
         align: "left",
+        render: (value: string, item: CatRepository) => {
+          return truncateSpan(value, 30);
+        },
       },
       {
         field: "type",

diff --git a/public/pages/SnapshotPolicies/containers/SnapshotPolicies/SnapshotPolicies.tsx b/public/pages/SnapshotPolicies/containers/SnapshotPolicies/SnapshotPolicies.tsx
@@ -146,7 +146,7 @@ export default class SnapshotPolicies extends Component<SnapshotPoliciesProps, S
         name: "Time last updated",
         sortable: true,
         dataType: "date",
-        width: "130px",
+        width: "150px",
         render: renderTimestampMillis,
       },
       {

diff --git a/...ic/pages/SnapshotPolicyDetails/containers/SnapshotPolicyDetails/SnapshotPolicyDetails.tsx b/...ic/pages/SnapshotPolicyDetails/containers/SnapshotPolicyDetails/SnapshotPolicyDetails.tsx
@@ -309,7 +309,7 @@ export default class SnapshotPolicyDetails extends Component<SnapshotPolicyDetai
     let creationLatestActivity: LatestActivities = { activityType: "Creation" };
     creationLatestActivity = { ...creationLatestActivity, ...metadata?.creation?.latest_execution };
     let latestActivities: LatestActivities[] = [creationLatestActivity];
-    if (policy.deletion != null) {
+    if (metadata?.deletion?.latest_execution != null) {
       let deletionLatestActivity: LatestActivities = { activityType: "Deletion" };
       deletionLatestActivity = { ...deletionLatestActivity, ...metadata?.deletion?.latest_execution };
       latestActivities = [...latestActivities, deletionLatestActivity];
@@ -320,7 +320,7 @@ export default class SnapshotPolicyDetails extends Component<SnapshotPolicyDetai
         <EuiFlexGroup style={{ padding: "0px 10px" }} justifyContent="spaceBetween" alignItems="center">
           <EuiFlexItem grow={false}>
             <EuiTitle size="m">
-              <h2>{policyId}</h2>
+              <span title={policyId}>{_.truncate(policyId)}</span>
             </EuiTitle>
           </EuiFlexItem>
 

diff --git a/public/pages/Snapshots/components/SnapshotFlyout/SnapshotFlyout.tsx b/public/pages/Snapshots/components/SnapshotFlyout/SnapshotFlyout.tsx
@@ -23,6 +23,8 @@ import { CoreServicesContext } from "../../../../components/core_services";
 import { getErrorMessage } from "../../../../utils/helpers";
 import * as H from "history";
 import { ROUTES } from "../../../../utils/constants";
+import InfoModal from "../../../SnapshotPolicyDetails/components/InfoModal";
+import { ModalConsumer } from "../../../../components/Modal";
 
 interface SnapshotFlyoutProps {
   snapshotId: string;
@@ -88,11 +90,15 @@ export default class SnapshotFlyout extends Component<SnapshotFlyoutProps, Snaps
     ];
 
     let error;
-    if (snapshot?.state === "PARTIAL" || snapshot?.state === "FAILED") {
+    if (snapshot?.failures != null) {
       error = (
         <EuiText size="xs">
           <dt>Error details</dt>
-          <dd>{snapshot?.failures}</dd>
+          <dd>
+            <ModalConsumer>
+              {({ onShow }) => <EuiLink onClick={() => onShow(InfoModal, { info: snapshot.failures })}>failures</EuiLink>}
+            </ModalConsumer>
+          </dd>
         </EuiText>
       );
     }

diff --git a/public/pages/Snapshots/containers/Snapshots/Snapshots.tsx b/public/pages/Snapshots/containers/Snapshots/Snapshots.tsx
@@ -19,7 +19,7 @@ import { Snapshot } from "../../../../../models/interfaces";
 import { BREADCRUMBS, RESTORE_SNAPSHOT_DOCUMENTATION_URL, ROUTES } from "../../../../utils/constants";
 import { renderTimestampMillis } from "../../../SnapshotPolicies/helpers";
 import DeleteModal from "../../../Repositories/components/DeleteModal/DeleteModal";
-import { snapshotStatusRender } from "../../helper";
+import { snapshotStatusRender, truncateSpan } from "../../helper";
 
 interface SnapshotsProps extends RouteComponentProps {
   snapshotManagementService: SnapshotManagementService;
@@ -94,7 +94,7 @@ export default class Snapshots extends Component<SnapshotsProps, SnapshotsState>
         name: "Policy",
         sortable: false,
         dataType: "string",
-        width: "150px",
+        width: "160px",
         render: (name: string, item: SnapshotsWithRepoAndPolicy) => {
           const truncated = _.truncate(name, { length: 20 });
           if (!!item.policy) {
@@ -107,23 +107,26 @@ export default class Snapshots extends Component<SnapshotsProps, SnapshotsState>
         field: "repository",
         name: "Repository",
         sortable: false,
-        width: "120px",
+        width: "150px",
         dataType: "string",
+        render: (value: string, item: SnapshotsWithRepoAndPolicy) => {
+          return truncateSpan(value);
+        },
       },
       {
         field: "start_epoch",
         name: "Start time",
         sortable: true,
         dataType: "date",
-        width: "130px",
+        width: "150px",
         render: renderTimestampMillis,
       },
       {
         field: "end_epoch",
         name: "End time",
         sortable: true,
         dataType: "date",
-        width: "130px",
+        width: "150px",
         render: renderTimestampMillis,
       },
     ];