fix(client)!: update KG status indexing percentage (#2255)

* restore project-lock tests * fix KG status endpoint fixtures * add KG status progress tests BREAKING CHANGE: require a new version of renku-graph re SwissDataScienceCenter/renku-graph#1253
SwissDataScienceCenter · Jan 6, 2023 · 7235b95 · 7235b95
1 parent 83e7c76
commit 7235b95
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 49 deletions.
diff --git a/client/src/file/KnowledgeGraphStatus.present.js b/client/src/file/KnowledgeGraphStatus.present.js
@@ -45,15 +45,16 @@ function KnowledgeGraphStatus(props) {
   const { error, progress, webhookJustCreated } = props;
   if (error != null) {
     return <MigrationWarnAlert>
-      Knowledge Graph integration must be activated to view the lineage, but&nbsp;
+      Knowledge Graph integration must be activated to view the lineage, but
       there is a problem with the knowledge graph integration for this project. To resolve this problem,
-      you should contact the development team on&nbsp;
+      you should contact the development team on {" "}
       <a href={Links.GITTER}
-        target="_blank" rel="noreferrer noopener">Gitter</a> or&nbsp;
+        target="_blank" rel="noreferrer noopener">Gitter</a> or{" "}
       <a href={Links.GITHUB}
         target="_blank" rel="noreferrer noopener">GitHub</a>.
     </MigrationWarnAlert>;
   }
+
   if (progress == null) {
     return (
       <Loader />
@@ -111,7 +112,7 @@ function KnowledgeGraphStatus(props) {
     return (
       <div>
         <Alert color="primary">
-          <p>Knowledge Graph is building... {parseInt(progress)}%</p>
+          <p>Knowledge Graph is building... {progress}%</p>
           <Progress value={progress} />
         </Alert>
       </div>

diff --git a/client/src/project/Project.present.js b/client/src/project/Project.present.js
@@ -514,7 +514,7 @@ class ProjectViewHeader extends Component {
 class ProjectNav extends Component {
   render() {
     return (
-      <div className="pb-3 rk-search-bar pt-4 mt-1">
+      <div className="pb-3 rk-search-bar pt-4 mt-1" data-cy="project-navbar">
         <Col className="d-flex pb-2 mb-1 justify-content-start" md={12} lg={12}>
           <Nav pills className="nav-pills-underline">
             <NavItem>
@@ -617,7 +617,7 @@ class ProjectViewOverviewNav extends Component {
     //   <RenkuNavLink to={`${this.props.overviewUrl}/results`} title="Results" />
     // </NavItem>
     return (
-      <Nav className="flex-column nav-light nav-pills-underline">
+      <Nav className="flex-column nav-light nav-pills-underline" data-cy="project-overview-nav">
         <NavItem>
           <RenkuNavLink to={this.props.baseUrl} title="General" id="nav-overview-general" />
         </NavItem>
@@ -638,12 +638,12 @@ class ProjectViewOverviewNav extends Component {
 class ProjectViewOverview extends Component {
   render() {
     const { projectCoordinator } = this.props;
-    return <Col key="overview">
+    return <Col key="overview" data-cy="project-overview">
       <Row>
         <Col key="nav" sm={12} md={2}>
           <ProjectViewOverviewNav {...this.props} />
         </Col>
-        <Col key="content" sm={12} md={10}>
+        <Col key="content" sm={12} md={10} data-cy="project-overview-content">
           <Switch>
             <Route exact path={this.props.baseUrl} render={props => {
               return <ProjectViewGeneral readme={this.props.data.readme} {...this.props} />;

diff --git a/client/src/project/Project.state.js b/client/src/project/Project.state.js
@@ -529,26 +529,39 @@ class ProjectCoordinator {
   }
 
   fetchGraphStatus(client) {
-    return client.checkGraphStatus(this.get("metadata.id"))
+    const projectId = this.get("metadata.id");
+    if (!projectId)
+      return null;
+    return client.checkGraphStatus(projectId)
       .then((resp) => {
-        let progress;
-        if (resp.progress == null)
-          progress = GraphIndexingStatus.NO_PROGRESS;
-
-        if (resp.progress === 0 || resp.progress)
-          progress = resp.progress;
-        this.set("webhook.progress", progress);
-        return progress;
+        // extract the percentage
+        const progress = resp?.progress ?? null;
+        let percentage;
+        if (progress.percentage == null)
+          percentage = GraphIndexingStatus.NO_PROGRESS;
+
+        if (progress.percentage === 0 || progress.percentage)
+          percentage = progress.percentage;
+        this.setObject({
+          webhook: {
+            progress: percentage,
+            data: resp ? resp : {}
+          }
+        });
+        return percentage;
       })
       .catch((err) => {
         if (err.case === API_ERRORS.notFoundError) {
-          const progress = GraphIndexingStatus.NO_WEBHOOK;
-          this.set("webhook.progress", progress);
-          return progress;
+          const percentage = GraphIndexingStatus.NO_WEBHOOK;
+          this.setObject({
+            webhook: {
+              progress: percentage,
+              error: err ? err : {}
+            }
+          });
+          return percentage;
         }
-
         throw err;
-
       });
   }
 

diff --git a/client/src/utils/components/progress/Progress.css b/client/src/utils/components/progress/Progress.css
@@ -34,7 +34,6 @@
 
 .progress-bar {
     height: var(--progress_height);
-    background-color: #E6E9ED;
     width: 100%;
     overflow: hidden;
     position: relative;

diff --git a/tests/cypress/e2e/local/project.spec.ts b/tests/cypress/e2e/local/project.spec.ts
@@ -32,14 +32,37 @@ describe("display a project", () => {
   it("displays the project overview page", () => {
     cy.wait("@getProject");
     cy.wait("@getReadme");
-    // Check that the project header is shown
-    cy.get("[data-cy='header-project']").should("be.visible");
-    // Check that the readme is shown
-    cy.get("[data-cy='project-readme']").should("contain.text", "local test project");
-
-    // Check that the title is correct
-    cy.get("[data-cy='project-title']").first()
-      .should("contain.text", "local-test-project");
+    cy.get_cy("header-project").should("be.visible");
+    cy.get_cy("project-readme").should("be.visible").should("contain.text", "local test project");
+    cy.get_cy("project-title").should("be.visible").should("contain.text", "local-test-project");
+  });
+
+  it("displays lock correctly", () => {
+    fixtures.projectLockStatus({ locked: true });
+    cy.visit("/projects/e2e/local-test-project/overview/status");
+    cy.wait("@getProjectLockStatus");
+    cy.get_cy("project-overview-content").contains("project is currently being modified").should("exist");
+    fixtures.projectLockStatus({ locked: false });
+    cy.visit("/projects/e2e/local-test-project/overview/status");
+    cy.wait("@getProjectLockStatus");
+    cy.get_cy("project-overview-content").contains("project is currently being modified").should("not.exist");
+  });
+
+  it("displays the project KG status updates", () => {
+    cy.get_cy("project-overview-nav").contains("a", "Status").should("exist").click();
+    cy.url().should("include", "/projects/e2e/local-test-project/overview/status");
+    cy.get_cy("project-overview-content").contains("Knowledge Graph integration is active.").should("exist");
+    fixtures.getStatusProcessing();
+    cy.get_cy("project-overview-nav").contains("a", "Status").should("exist").click();
+    cy.wait("@getStatusProcessing");
+    cy.get_cy("project-overview-content").contains("Knowledge Graph integration is active.").should("not.exist");
+    cy.get_cy("project-overview-content").contains("Knowledge Graph is building").should("exist");
+    cy.get_cy("project-overview-content").contains("40%").should("exist");
+    fixtures.getStatusProcessing(true);
+    cy.get_cy("project-overview-nav").contains("a", "Status").should("exist").click();
+    cy.wait("@getStatusProcessing");
+    cy.get_cy("project-overview-content").contains("Knowledge Graph is building").should("not.exist");
+    cy.get_cy("project-overview-content").contains("Knowledge Graph integration is active.").should("exist");
   });
 
   it("update project settings overview", () => {
@@ -213,23 +236,6 @@ describe("display migration information", () => {
   });
 });
 
-describe("display lock status", () => {
-  const fixtures = new Fixtures(cy);
-  beforeEach(() => {
-    fixtures.config().versions().userTest();
-    fixtures.projects().landingUserProjects().projectTest();
-    fixtures.projectMigrationUpToDate();
-    cy.visit("/projects/e2e/local-test-project");
-  });
-
-  it("displays nothing for non-locked project", () => {
-    fixtures.projectLockStatus();
-    cy.visit("/projects/e2e/local-test-project/");
-    cy.contains("currently being modified").should("not.exist");
-  });
-
-});
-
 describe("display migration information for anon user", () => {
   const fixtures = new Fixtures(cy);
   beforeEach(() => {

diff --git a/tests/cypress/fixtures/project/project-status-done.json b/tests/cypress/fixtures/project/project-status-done.json
@@ -0,0 +1,12 @@
+{
+  "activated": true,
+  "progress": {
+    "done": 5,
+    "total": 5,
+    "percentage": 100.0
+  },
+  "details": {
+    "status": "success",
+    "message": "triples store"
+  }
+}
diff --git a/tests/cypress/fixtures/project/project-status-processing.json b/tests/cypress/fixtures/project/project-status-processing.json
@@ -0,0 +1,12 @@
+{
+  "activated": true,
+  "progress": {
+    "done": 2,
+    "total": 5,
+    "percentage": 40.0
+  },
+  "details": {
+    "status": "in-progress",
+    "message": "generating triples"
+  }
+}
diff --git a/tests/cypress/support/renkulab-fixtures/projects.ts b/tests/cypress/support/renkulab-fixtures/projects.ts
@@ -261,7 +261,11 @@ function Projects<T extends FixturesConstructor>(Parent: T) {
         body: { message: "Hook valid" }
       }).as(validationName);
       cy.intercept("/ui-server/api/projects/*/graph/status", {
-        body: { done: 1, total: 1, progress: 100.0 }
+        body: {
+          activated: true,
+          progress: { done: 5, total: 5, percentage: 100.0 },
+          details: { status: "success", message: "triples store" }
+        }
       });
       cy.intercept(`/ui-server/api/renku/${coreVersion}/version`, {
         body: {
@@ -355,6 +359,18 @@ function Projects<T extends FixturesConstructor>(Parent: T) {
       ).as(name);
       return this;
     }
+
+    getStatusProcessing(finished = false, name = "getStatusProcessing") {
+      const result = finished ?
+        "project/project-status-done.json" :
+        "project/project-status-processing.json";
+      const fixture = this.useMockedData ? { fixture: result } : undefined;
+      cy.intercept(
+        "/ui-server/api/projects/*/graph/status",
+        fixture
+      ).as(name);
+      return this;
+    }
   };
 }