diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index 47fed3a154..dafe2ae844 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -3,7 +3,7 @@ repos: - repo: https://github.com/pre-commit/pre-commit-hooks - rev: v4.5.0 + rev: v6.0.0 hooks: - id: check-yaml args: [ '--unsafe' ] @@ -21,8 +21,8 @@ repos: - id: requirements-txt-fixer - id: detect-private-key - id: fix-byte-order-marker - - repo: https://github.com/psf/black - rev: 23.11.0 + - repo: https://github.com/psf/black-pre-commit-mirror + rev: 25.12.0 hooks: - id: black language_version: python3 @@ -46,13 +46,13 @@ repos: # - id: mypy # files: ^(src/|tests/|plugins/) - repo: https://github.com/asottile/reorder-python-imports - rev: v3.12.0 + rev: v3.16.0 hooks: - id: reorder-python-imports args: [ --py37-plus, '--application-directories=.:src' ] # use latest python syntax - repo: https://github.com/asottile/pyupgrade - rev: v3.15.0 + rev: v3.21.2 hooks: - id: pyupgrade args: [ --py37-plus ] @@ -65,7 +65,7 @@ repos: # args: [ -s, B101 ] # add copyright notice - repo: https://github.com/Lucas-C/pre-commit-hooks - rev: v1.5.4 + rev: v1.5.5 hooks: - id: insert-license files: \.java$ @@ -144,7 +144,7 @@ repos: - --license-filepath - NOTICE.txt - repo: https://github.com/pre-commit/mirrors-prettier - rev: v3.1.0 + rev: v4.0.0-alpha.8 hooks: - id: prettier types_or: [scss, css, javascript, ts, html] diff --git a/examples/pgvector-embedder/40_ingest_embeddings.py b/examples/pgvector-embedder/40_ingest_embeddings.py index 289cb939c5..6ca5230043 100644 --- a/examples/pgvector-embedder/40_ingest_embeddings.py +++ b/examples/pgvector-embedder/40_ingest_embeddings.py @@ -41,9 +41,11 @@ def run(job_input: IJobInput): embedding_payload = { "id": composite_id, - "embedding": embeddings[i].tolist() - if isinstance(embeddings[i], np.ndarray) - else embeddings[i], + "embedding": ( + embeddings[i].tolist() + if isinstance(embeddings[i], np.ndarray) + else embeddings[i] + ), } job_input.send_object_for_ingestion( payload=embedding_payload, diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/explore/data-jobs/data-jobs.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/explore/data-jobs/data-jobs.spec.js index f5fbf51fe5..b6981555d8 100644 --- a/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/explore/data-jobs/data-jobs.spec.js +++ b/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/explore/data-jobs/data-jobs.spec.js @@ -5,10 +5,13 @@ /// -import { DataJobsExplorePage } from '../../../../support/pages/explore/data-jobs/data-jobs.po'; -import { DataJobExploreDetailsPage } from '../../../../support/pages/explore/data-jobs/details/data-job-details.po'; +import { DataJobsExplorePage } from "../../../../support/pages/explore/data-jobs/data-jobs.po"; +import { DataJobExploreDetailsPage } from "../../../../support/pages/explore/data-jobs/details/data-job-details.po"; -describe('Data Jobs Explore Page', { tags: ['@dataPipelines', '@exploreDataJobs', '@explore'] }, () => { +describe( + "Data Jobs Explore Page", + { tags: ["@dataPipelines", "@exploreDataJobs", "@explore"] }, + () => { /** * @type {DataJobsExplorePage} */ @@ -23,305 +26,464 @@ describe('Data Jobs Explore Page', { tags: ['@dataPipelines', '@exploreDataJobs' let additionalTestJobFixture; before(() => { - return DataJobsExplorePage.recordHarIfSupported() - .then(() => cy.clearLocalStorageSnapshot('data-jobs-explore')) - .then(() => DataJobsExplorePage.login()) - .then(() => cy.saveLocalStorage('data-jobs-explore')) - .then(() => DataJobsExplorePage.deleteShortLivedTestJobsNoDeploy(true)) - .then(() => DataJobsExplorePage.createShortLivedTestJobsNoDeploy()) - .then(() => - DataJobsExplorePage.loadShortLivedTestJobsFixtureNoDeploy().then((fixtures) => { - testJobsFixture = [fixtures[0], fixtures[1]]; - additionalTestJobFixture = fixtures[2]; - - return cy.wrap({ - context: 'explore::data-jobs.spec::before()', - action: 'continue' - }); - }) - ); + return DataJobsExplorePage.recordHarIfSupported() + .then(() => cy.clearLocalStorageSnapshot("data-jobs-explore")) + .then(() => DataJobsExplorePage.login()) + .then(() => cy.saveLocalStorage("data-jobs-explore")) + .then(() => DataJobsExplorePage.deleteShortLivedTestJobsNoDeploy(true)) + .then(() => DataJobsExplorePage.createShortLivedTestJobsNoDeploy()) + .then(() => + DataJobsExplorePage.loadShortLivedTestJobsFixtureNoDeploy().then( + (fixtures) => { + testJobsFixture = [fixtures[0], fixtures[1]]; + additionalTestJobFixture = fixtures[2]; + + return cy.wrap({ + context: "explore::data-jobs.spec::before()", + action: "continue", + }); + }, + ), + ); }); after(() => { - DataJobsExplorePage.deleteShortLivedTestJobsNoDeploy(); + DataJobsExplorePage.deleteShortLivedTestJobsNoDeploy(); - DataJobsExplorePage.saveHarIfSupported(); + DataJobsExplorePage.saveHarIfSupported(); }); beforeEach(() => { - cy.restoreLocalStorage('data-jobs-explore'); + cy.restoreLocalStorage("data-jobs-explore"); - DataJobsExplorePage.wireUserSession(); - DataJobsExplorePage.initInterceptors(); + DataJobsExplorePage.wireUserSession(); + DataJobsExplorePage.initInterceptors(); }); - describe('smoke', { tags: ['@smoke'] }, () => { - it('page is loaded and shows data jobs', () => { - dataJobsExplorePage = DataJobsExplorePage.navigateWithSideMenu(); + describe("smoke", { tags: ["@smoke"] }, () => { + it("page is loaded and shows data jobs", () => { + dataJobsExplorePage = DataJobsExplorePage.navigateWithSideMenu(); - dataJobsExplorePage.getPageTitle().scrollIntoView().should('be.visible').invoke('text').invoke('trim').should('eq', 'Explore Data Jobs'); + dataJobsExplorePage + .getPageTitle() + .scrollIntoView() + .should("be.visible") + .invoke("text") + .invoke("trim") + .should("eq", "Explore Data Jobs"); - dataJobsExplorePage.getDataGrid().scrollIntoView().should('be.visible'); + dataJobsExplorePage.getDataGrid().scrollIntoView().should("be.visible"); - // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page - dataJobsExplorePage.filterByJobName(testJobsFixture[0].job_name.substring(0, 20)); + // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page + dataJobsExplorePage.filterByJobName( + testJobsFixture[0].job_name.substring(0, 20), + ); - testJobsFixture.forEach((testJob) => { - cy.log('Fixture for name: ' + testJob.job_name); + testJobsFixture.forEach((testJob) => { + cy.log("Fixture for name: " + testJob.job_name); - dataJobsExplorePage.getDataGridCell(testJob.job_name).scrollIntoView().should('be.visible'); - }); + dataJobsExplorePage + .getDataGridCell(testJob.job_name) + .scrollIntoView() + .should("be.visible"); }); + }); - it('navigates to data job', () => { - cy.log('Fixture for name: ' + testJobsFixture[0].job_name); + it("navigates to data job", () => { + cy.log("Fixture for name: " + testJobsFixture[0].job_name); - dataJobsExplorePage = DataJobsExplorePage.navigateTo(); + dataJobsExplorePage = DataJobsExplorePage.navigateTo(); - // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page - dataJobsExplorePage.filterByJobName(testJobsFixture[0].job_name.substring(0, 20)); + // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page + dataJobsExplorePage.filterByJobName( + testJobsFixture[0].job_name.substring(0, 20), + ); - dataJobsExplorePage.openJobDetails(testJobsFixture[0].team, testJobsFixture[0].job_name); + dataJobsExplorePage.openJobDetails( + testJobsFixture[0].team, + testJobsFixture[0].job_name, + ); - const dataJobExploreDetailsPage = DataJobExploreDetailsPage.getPage(); + const dataJobExploreDetailsPage = DataJobExploreDetailsPage.getPage(); - dataJobExploreDetailsPage.getPageTitle().scrollIntoView().should('be.visible').should('contains.text', testJobsFixture[0].job_name); + dataJobExploreDetailsPage + .getPageTitle() + .scrollIntoView() + .should("be.visible") + .should("contains.text", testJobsFixture[0].job_name); - dataJobExploreDetailsPage.getDescriptionField().scrollIntoView().should('be.visible').should('contain.text', testJobsFixture[0].description); - }); + dataJobExploreDetailsPage + .getDescriptionField() + .scrollIntoView() + .should("be.visible") + .should("contain.text", testJobsFixture[0].description); + }); }); - describe('extended', () => { - it('refresh load newly created data jobs', () => { - dataJobsExplorePage = DataJobsExplorePage.navigateTo(); - - // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page - dataJobsExplorePage.filterByJobName(testJobsFixture[0].job_name.substring(0, 20)); - - dataJobsExplorePage.getDataGridCell(testJobsFixture[0].job_name).invoke('text').invoke('trim').should('eq', testJobsFixture[0].job_name); - - dataJobsExplorePage.getDataGridCell(additionalTestJobFixture.job_name).should('not.exist'); - - DataJobsExplorePage.createAdditionalShortLivedTestJobsNoDeploy(); - - dataJobsExplorePage.refreshDataGrid(); - - dataJobsExplorePage.getDataGridCell(additionalTestJobFixture.job_name).invoke('text').invoke('trim').should('eq', additionalTestJobFixture.job_name); - }); - - it('filters data jobs', () => { - cy.log('Fixture for name: ' + testJobsFixture[0].job_name); - - dataJobsExplorePage = DataJobsExplorePage.navigateTo(); - - dataJobsExplorePage.filterByJobName(testJobsFixture[0].job_name); - - dataJobsExplorePage.getDataGridCell(testJobsFixture[0].job_name).scrollIntoView().should('be.visible'); - - dataJobsExplorePage.getDataGridCell(testJobsFixture[1].job_name).should('not.exist'); - }); - - it('searches data jobs', () => { - cy.log('Fixture for name: ' + testJobsFixture[0].job_name); - - dataJobsExplorePage = DataJobsExplorePage.navigateTo(); - - // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page - dataJobsExplorePage.filterByJobName(testJobsFixture[1].job_name.substring(0, 20)); - - dataJobsExplorePage.getDataGridCell(testJobsFixture[1].job_name).scrollIntoView().should('be.visible'); - - // verify url contains jobName value - dataJobsExplorePage.getCurrentUrl().should('match', new RegExp(`\\/explore\\/data-jobs\\?jobName=${testJobsFixture[1].job_name.substring(0, 20)}&deploymentStatus=all$`)); - - dataJobsExplorePage.searchByJobName(testJobsFixture[0].job_name); - - dataJobsExplorePage.getDataGridCell(testJobsFixture[0].job_name).scrollIntoView().should('be.visible'); - - dataJobsExplorePage.getDataGridCell(testJobsFixture[1].job_name).should('not.exist'); - }); - - it('searches data jobs, search parameter goes into URL', () => { - cy.log('Fixture for name: ' + testJobsFixture[0].job_name); - - dataJobsExplorePage = DataJobsExplorePage.navigateTo(); - - // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page - dataJobsExplorePage.filterByJobName(testJobsFixture[0].job_name.substring(0, 20)); - - // verify 2 test rows visible - dataJobsExplorePage.getDataGridCell(testJobsFixture[0].job_name).scrollIntoView().should('be.visible'); - dataJobsExplorePage.getDataGridCell(testJobsFixture[1].job_name).scrollIntoView().should('be.visible'); - - // do search - dataJobsExplorePage.searchByJobName(testJobsFixture[0].job_name); - - // verify 1 test row visible - dataJobsExplorePage.getDataGridCell(testJobsFixture[0].job_name).scrollIntoView().should('be.visible'); - dataJobsExplorePage.getDataGridCell(testJobsFixture[1].job_name).should('not.exist'); - - // verify url contains search value - dataJobsExplorePage.getCurrentUrl().should('match', new RegExp(`\\/explore\\/data-jobs\\?search=${testJobsFixture[0].job_name}&jobName=${testJobsFixture[0].job_name.substring(0, 20)}&deploymentStatus=all$`)); - - // clear search with clear() method - dataJobsExplorePage.clearSearchField(); - - // verify 2 test rows visible - dataJobsExplorePage.getDataGridCell(testJobsFixture[0].job_name).scrollIntoView().should('be.visible'); - dataJobsExplorePage.getDataGridCell(testJobsFixture[1].job_name).scrollIntoView().should('be.visible'); - - // verify url does not contain search value - dataJobsExplorePage.getCurrentUrl().should('match', new RegExp(`\\/explore\\/data-jobs\\?jobName=${testJobsFixture[0].job_name.substring(0, 20)}&deploymentStatus=all$`)); - }); - - it('searches data jobs, perform search when URL contains search parameter', () => { - cy.log('Fixture for name: ' + testJobsFixture[1].job_name); - - // navigate with search value in URL - dataJobsExplorePage = DataJobsExplorePage.navigateToDataJobUrl(`/explore/data-jobs?search=${testJobsFixture[1].job_name}`); - - dataJobsExplorePage.waitForGridToLoad(null); - - // verify url contains search value - dataJobsExplorePage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true - }) - .should('deep.equal', { - pathSegment: '/explore/data-jobs', - queryParams: { - search: testJobsFixture[1].job_name, - deploymentStatus: 'all' - } - }); - - // verify 1 test row visible - dataJobsExplorePage.getDataGridCell(testJobsFixture[0].job_name).should('not.exist'); - dataJobsExplorePage.getDataGridCell(testJobsFixture[1].job_name).scrollIntoView().should('be.visible'); - - // clear search with button - dataJobsExplorePage.clearSearchFieldWithButton(); - - // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page - dataJobsExplorePage.filterByJobName(testJobsFixture[0].job_name.substring(0, 20)); - - // verify 2 test rows visible - dataJobsExplorePage.getDataGridCell(testJobsFixture[0].job_name).scrollIntoView().should('be.visible'); - dataJobsExplorePage.getDataGridCell(testJobsFixture[1].job_name).scrollIntoView().should('be.visible'); - - // verify url does not contain search value - dataJobsExplorePage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true - }) - .should('deep.equal', { - pathSegment: '/explore/data-jobs', - queryParams: { - jobName: testJobsFixture[0].job_name.substring(0, 20), - deploymentStatus: 'all' - } - }); - }); - - it('filter description data jobs', () => { - dataJobsExplorePage = DataJobsExplorePage.navigateTo(); - - // show panel for show/hide columns - dataJobsExplorePage.toggleColumnShowHidePanel(); - - // verify column is not checked in toggling menu - dataJobsExplorePage.getDataGridColumnShowHideOption('Description').should('exist').should('not.be.checked'); - - // verify header cell for column is not rendered - dataJobsExplorePage.getDataGridHeaderCell('Description').should('have.length', 0); - - // toggle column to render - dataJobsExplorePage.checkColumnShowHideOption('Description'); - - // verify column is checked in toggling menu - dataJobsExplorePage.getHeaderColumnDescriptionName().should('exist'); - - // filter by job description - dataJobsExplorePage.filterByJobDescription('Test description 1'); - - // verify url contains description value - dataJobsExplorePage.getCurrentUrl().should('match', new RegExp(`\\/explore\\/data-jobs\\?description=Test%20description%201&deploymentStatus=all$`)); - - dataJobsExplorePage.getDataGridCell(testJobsFixture[0].job_name).scrollIntoView().should('be.visible'); - - dataJobsExplorePage.getDataGridCell(testJobsFixture[1].job_name).should('not.exist'); - }); - - it('perform filtering by description when URL contains description parameter', () => { - // navigate with description value in URL - dataJobsExplorePage = DataJobsExplorePage.navigateToDataJobUrl(`/explore/data-jobs?description=Test%20description%201`); - - dataJobsExplorePage.waitForGridToLoad(null); - - // show panel for show/hide columns - dataJobsExplorePage.toggleColumnShowHidePanel(); - - // toggle column to render - dataJobsExplorePage.checkColumnShowHideOption('Description'); - - // verify url contains description value - dataJobsExplorePage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: '/explore/data-jobs', - queryParams: { - description: 'Test description 1', - deploymentStatus: 'all' - } - }); - - // verify 1 test row visible - dataJobsExplorePage.getDataGridCell(testJobsFixture[0].job_name).scrollIntoView().should('be.visible'); - - dataJobsExplorePage.getDataGridCell(testJobsFixture[1].job_name).should('not.exist'); - }); - - it('show/hide column when toggling from menu', () => { - dataJobsExplorePage = DataJobsExplorePage.navigateTo(); - - // show panel for show/hide columns - dataJobsExplorePage.toggleColumnShowHidePanel(); - - // verify correct options are rendered - dataJobsExplorePage.getDataGridColumnShowHideOptionsValues().should('have.length', 10).invoke('join', ',').should('eq', 'Description,Deployment Status,Python Version,Last Execution Duration,Success rate,Next run (UTC),Last Deployed (UTC),Last Deployed By,Source,Logs'); - - // verify column is not checked in toggling menu - dataJobsExplorePage.getDataGridColumnShowHideOption('Last Execution Duration').should('exist').should('not.be.checked'); - - // verify header cell for column is not rendered - dataJobsExplorePage.getDataGridHeaderCell('Last Execution Duration').should('have.length', 0); - - // toggle column to render - dataJobsExplorePage.checkColumnShowHideOption('Last Execution Duration'); - - // verify column is checked in toggling menu - dataJobsExplorePage.getDataGridColumnShowHideOption('Last Execution Duration').should('exist').should('be.checked'); - - // verify header cell for column is rendered - dataJobsExplorePage.getDataGridHeaderCell('Last Execution Duration').should('have.length', 1); - - // toggle column to hide - dataJobsExplorePage.uncheckColumnShowHideOption('Last Execution Duration'); - - // verify column is not checked in toggling menu - dataJobsExplorePage.getDataGridColumnShowHideOption('Last Execution Duration').should('exist').should('not.be.checked'); - - // verify header cell for column is not rendered - dataJobsExplorePage.getDataGridHeaderCell('Last Execution Duration').should('have.length', 0); - - // hide panel for show/hide columns - dataJobsExplorePage.toggleColumnShowHidePanel(); - }); + describe("extended", () => { + it("refresh load newly created data jobs", () => { + dataJobsExplorePage = DataJobsExplorePage.navigateTo(); + + // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page + dataJobsExplorePage.filterByJobName( + testJobsFixture[0].job_name.substring(0, 20), + ); + + dataJobsExplorePage + .getDataGridCell(testJobsFixture[0].job_name) + .invoke("text") + .invoke("trim") + .should("eq", testJobsFixture[0].job_name); + + dataJobsExplorePage + .getDataGridCell(additionalTestJobFixture.job_name) + .should("not.exist"); + + DataJobsExplorePage.createAdditionalShortLivedTestJobsNoDeploy(); + + dataJobsExplorePage.refreshDataGrid(); + + dataJobsExplorePage + .getDataGridCell(additionalTestJobFixture.job_name) + .invoke("text") + .invoke("trim") + .should("eq", additionalTestJobFixture.job_name); + }); + + it("filters data jobs", () => { + cy.log("Fixture for name: " + testJobsFixture[0].job_name); + + dataJobsExplorePage = DataJobsExplorePage.navigateTo(); + + dataJobsExplorePage.filterByJobName(testJobsFixture[0].job_name); + + dataJobsExplorePage + .getDataGridCell(testJobsFixture[0].job_name) + .scrollIntoView() + .should("be.visible"); + + dataJobsExplorePage + .getDataGridCell(testJobsFixture[1].job_name) + .should("not.exist"); + }); + + it("searches data jobs", () => { + cy.log("Fixture for name: " + testJobsFixture[0].job_name); + + dataJobsExplorePage = DataJobsExplorePage.navigateTo(); + + // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page + dataJobsExplorePage.filterByJobName( + testJobsFixture[1].job_name.substring(0, 20), + ); + + dataJobsExplorePage + .getDataGridCell(testJobsFixture[1].job_name) + .scrollIntoView() + .should("be.visible"); + + // verify url contains jobName value + dataJobsExplorePage + .getCurrentUrl() + .should( + "match", + new RegExp( + `\\/explore\\/data-jobs\\?jobName=${testJobsFixture[1].job_name.substring(0, 20)}&deploymentStatus=all$`, + ), + ); + + dataJobsExplorePage.searchByJobName(testJobsFixture[0].job_name); + + dataJobsExplorePage + .getDataGridCell(testJobsFixture[0].job_name) + .scrollIntoView() + .should("be.visible"); + + dataJobsExplorePage + .getDataGridCell(testJobsFixture[1].job_name) + .should("not.exist"); + }); + + it("searches data jobs, search parameter goes into URL", () => { + cy.log("Fixture for name: " + testJobsFixture[0].job_name); + + dataJobsExplorePage = DataJobsExplorePage.navigateTo(); + + // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page + dataJobsExplorePage.filterByJobName( + testJobsFixture[0].job_name.substring(0, 20), + ); + + // verify 2 test rows visible + dataJobsExplorePage + .getDataGridCell(testJobsFixture[0].job_name) + .scrollIntoView() + .should("be.visible"); + dataJobsExplorePage + .getDataGridCell(testJobsFixture[1].job_name) + .scrollIntoView() + .should("be.visible"); + + // do search + dataJobsExplorePage.searchByJobName(testJobsFixture[0].job_name); + + // verify 1 test row visible + dataJobsExplorePage + .getDataGridCell(testJobsFixture[0].job_name) + .scrollIntoView() + .should("be.visible"); + dataJobsExplorePage + .getDataGridCell(testJobsFixture[1].job_name) + .should("not.exist"); + + // verify url contains search value + dataJobsExplorePage + .getCurrentUrl() + .should( + "match", + new RegExp( + `\\/explore\\/data-jobs\\?search=${testJobsFixture[0].job_name}&jobName=${testJobsFixture[0].job_name.substring(0, 20)}&deploymentStatus=all$`, + ), + ); + + // clear search with clear() method + dataJobsExplorePage.clearSearchField(); + + // verify 2 test rows visible + dataJobsExplorePage + .getDataGridCell(testJobsFixture[0].job_name) + .scrollIntoView() + .should("be.visible"); + dataJobsExplorePage + .getDataGridCell(testJobsFixture[1].job_name) + .scrollIntoView() + .should("be.visible"); + + // verify url does not contain search value + dataJobsExplorePage + .getCurrentUrl() + .should( + "match", + new RegExp( + `\\/explore\\/data-jobs\\?jobName=${testJobsFixture[0].job_name.substring(0, 20)}&deploymentStatus=all$`, + ), + ); + }); + + it("searches data jobs, perform search when URL contains search parameter", () => { + cy.log("Fixture for name: " + testJobsFixture[1].job_name); + + // navigate with search value in URL + dataJobsExplorePage = DataJobsExplorePage.navigateToDataJobUrl( + `/explore/data-jobs?search=${testJobsFixture[1].job_name}`, + ); + + dataJobsExplorePage.waitForGridToLoad(null); + + // verify url contains search value + dataJobsExplorePage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + }) + .should("deep.equal", { + pathSegment: "/explore/data-jobs", + queryParams: { + search: testJobsFixture[1].job_name, + deploymentStatus: "all", + }, + }); + + // verify 1 test row visible + dataJobsExplorePage + .getDataGridCell(testJobsFixture[0].job_name) + .should("not.exist"); + dataJobsExplorePage + .getDataGridCell(testJobsFixture[1].job_name) + .scrollIntoView() + .should("be.visible"); + + // clear search with button + dataJobsExplorePage.clearSearchFieldWithButton(); + + // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page + dataJobsExplorePage.filterByJobName( + testJobsFixture[0].job_name.substring(0, 20), + ); + + // verify 2 test rows visible + dataJobsExplorePage + .getDataGridCell(testJobsFixture[0].job_name) + .scrollIntoView() + .should("be.visible"); + dataJobsExplorePage + .getDataGridCell(testJobsFixture[1].job_name) + .scrollIntoView() + .should("be.visible"); + + // verify url does not contain search value + dataJobsExplorePage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + }) + .should("deep.equal", { + pathSegment: "/explore/data-jobs", + queryParams: { + jobName: testJobsFixture[0].job_name.substring(0, 20), + deploymentStatus: "all", + }, + }); + }); + + it("filter description data jobs", () => { + dataJobsExplorePage = DataJobsExplorePage.navigateTo(); + + // show panel for show/hide columns + dataJobsExplorePage.toggleColumnShowHidePanel(); + + // verify column is not checked in toggling menu + dataJobsExplorePage + .getDataGridColumnShowHideOption("Description") + .should("exist") + .should("not.be.checked"); + + // verify header cell for column is not rendered + dataJobsExplorePage + .getDataGridHeaderCell("Description") + .should("have.length", 0); + + // toggle column to render + dataJobsExplorePage.checkColumnShowHideOption("Description"); + + // verify column is checked in toggling menu + dataJobsExplorePage.getHeaderColumnDescriptionName().should("exist"); + + // filter by job description + dataJobsExplorePage.filterByJobDescription("Test description 1"); + + // verify url contains description value + dataJobsExplorePage + .getCurrentUrl() + .should( + "match", + new RegExp( + `\\/explore\\/data-jobs\\?description=Test%20description%201&deploymentStatus=all$`, + ), + ); + + dataJobsExplorePage + .getDataGridCell(testJobsFixture[0].job_name) + .scrollIntoView() + .should("be.visible"); + + dataJobsExplorePage + .getDataGridCell(testJobsFixture[1].job_name) + .should("not.exist"); + }); + + it("perform filtering by description when URL contains description parameter", () => { + // navigate with description value in URL + dataJobsExplorePage = DataJobsExplorePage.navigateToDataJobUrl( + `/explore/data-jobs?description=Test%20description%201`, + ); + + dataJobsExplorePage.waitForGridToLoad(null); + + // show panel for show/hide columns + dataJobsExplorePage.toggleColumnShowHidePanel(); + + // toggle column to render + dataJobsExplorePage.checkColumnShowHideOption("Description"); + + // verify url contains description value + dataJobsExplorePage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: "/explore/data-jobs", + queryParams: { + description: "Test description 1", + deploymentStatus: "all", + }, + }); + + // verify 1 test row visible + dataJobsExplorePage + .getDataGridCell(testJobsFixture[0].job_name) + .scrollIntoView() + .should("be.visible"); + + dataJobsExplorePage + .getDataGridCell(testJobsFixture[1].job_name) + .should("not.exist"); + }); + + it("show/hide column when toggling from menu", () => { + dataJobsExplorePage = DataJobsExplorePage.navigateTo(); + + // show panel for show/hide columns + dataJobsExplorePage.toggleColumnShowHidePanel(); + + // verify correct options are rendered + dataJobsExplorePage + .getDataGridColumnShowHideOptionsValues() + .should("have.length", 10) + .invoke("join", ",") + .should( + "eq", + "Description,Deployment Status,Python Version,Last Execution Duration,Success rate,Next run (UTC),Last Deployed (UTC),Last Deployed By,Source,Logs", + ); + + // verify column is not checked in toggling menu + dataJobsExplorePage + .getDataGridColumnShowHideOption("Last Execution Duration") + .should("exist") + .should("not.be.checked"); + + // verify header cell for column is not rendered + dataJobsExplorePage + .getDataGridHeaderCell("Last Execution Duration") + .should("have.length", 0); + + // toggle column to render + dataJobsExplorePage.checkColumnShowHideOption( + "Last Execution Duration", + ); + + // verify column is checked in toggling menu + dataJobsExplorePage + .getDataGridColumnShowHideOption("Last Execution Duration") + .should("exist") + .should("be.checked"); + + // verify header cell for column is rendered + dataJobsExplorePage + .getDataGridHeaderCell("Last Execution Duration") + .should("have.length", 1); + + // toggle column to hide + dataJobsExplorePage.uncheckColumnShowHideOption( + "Last Execution Duration", + ); + + // verify column is not checked in toggling menu + dataJobsExplorePage + .getDataGridColumnShowHideOption("Last Execution Duration") + .should("exist") + .should("not.be.checked"); + + // verify header cell for column is not rendered + dataJobsExplorePage + .getDataGridHeaderCell("Last Execution Duration") + .should("have.length", 0); + + // hide panel for show/hide columns + dataJobsExplorePage.toggleColumnShowHidePanel(); + }); }); -}); + }, +); diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/explore/data-jobs/details/data-job-details.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/explore/data-jobs/details/data-job-details.spec.js index 90d867f2b6..c5685bfb10 100644 --- a/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/explore/data-jobs/details/data-job-details.spec.js +++ b/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/explore/data-jobs/details/data-job-details.spec.js @@ -5,10 +5,13 @@ /// -import { DataJobsExplorePage } from '../../../../../support/pages/explore/data-jobs/data-jobs.po'; -import { DataJobExploreDetailsPage } from '../../../../../support/pages/explore/data-jobs/details/data-job-details.po'; +import { DataJobsExplorePage } from "../../../../../support/pages/explore/data-jobs/data-jobs.po"; +import { DataJobExploreDetailsPage } from "../../../../../support/pages/explore/data-jobs/details/data-job-details.po"; -describe('Data Job Explore Details Page', { tags: ['@dataPipelines', '@exploreDataJobDetails', '@explore'] }, () => { +describe( + "Data Job Explore Details Page", + { tags: ["@dataPipelines", "@exploreDataJobDetails", "@explore"] }, + () => { /** * @type {DataJobExploreDetailsPage} */ @@ -23,101 +26,191 @@ describe('Data Job Explore Details Page', { tags: ['@dataPipelines', '@exploreDa let dataJobsExplorePage; before(() => { - return DataJobExploreDetailsPage.recordHarIfSupported() - .then(() => cy.clearLocalStorageSnapshot('data-job-explore-details')) - .then(() => DataJobExploreDetailsPage.login()) - .then(() => cy.saveLocalStorage('data-job-explore-details')) - .then(() => DataJobExploreDetailsPage.deleteShortLivedTestJobsNoDeploy(true)) - .then(() => DataJobExploreDetailsPage.createShortLivedTestJobsNoDeploy()) - .then(() => - DataJobExploreDetailsPage.loadShortLivedTestJobsFixtureNoDeploy().then((fixtures) => { - testJobsFixture = [fixtures[0], fixtures[1]]; - - return cy.wrap({ - context: 'explore::data-job-details.spec::before()', - action: 'continue' - }); - }) - ); + return DataJobExploreDetailsPage.recordHarIfSupported() + .then(() => cy.clearLocalStorageSnapshot("data-job-explore-details")) + .then(() => DataJobExploreDetailsPage.login()) + .then(() => cy.saveLocalStorage("data-job-explore-details")) + .then(() => + DataJobExploreDetailsPage.deleteShortLivedTestJobsNoDeploy(true), + ) + .then(() => + DataJobExploreDetailsPage.createShortLivedTestJobsNoDeploy(), + ) + .then(() => + DataJobExploreDetailsPage.loadShortLivedTestJobsFixtureNoDeploy().then( + (fixtures) => { + testJobsFixture = [fixtures[0], fixtures[1]]; + + return cy.wrap({ + context: "explore::data-job-details.spec::before()", + action: "continue", + }); + }, + ), + ); }); after(() => { - DataJobExploreDetailsPage.deleteShortLivedTestJobsNoDeploy(); + DataJobExploreDetailsPage.deleteShortLivedTestJobsNoDeploy(); - DataJobExploreDetailsPage.saveHarIfSupported(); + DataJobExploreDetailsPage.saveHarIfSupported(); }); beforeEach(() => { - cy.restoreLocalStorage('data-job-explore-details'); + cy.restoreLocalStorage("data-job-explore-details"); - DataJobExploreDetailsPage.wireUserSession(); - DataJobExploreDetailsPage.initInterceptors(); + DataJobExploreDetailsPage.wireUserSession(); + DataJobExploreDetailsPage.initInterceptors(); }); - describe('smoke', { tags: ['@smoke'] }, () => { - it('should load and show job details', () => { - dataJobsExplorePage = DataJobsExplorePage.navigateWithSideMenu(); - - // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page - dataJobsExplorePage.filterByJobName(testJobsFixture[0].job_name.substring(0, 20)); - - dataJobsExplorePage.openJobDetails(testJobsFixture[0].team, testJobsFixture[0].job_name); - - dataJobExploreDetailsPage = DataJobExploreDetailsPage.getPage(); - - dataJobExploreDetailsPage.getDetailsTab().scrollIntoView().should('be.visible'); - - dataJobExploreDetailsPage.getPageTitle().scrollIntoView().should('be.visible').should('contains.text', testJobsFixture[0].job_name); - - dataJobExploreDetailsPage.getStatusField().scrollIntoView().should('be.visible').should('have.text', 'Not Deployed'); - - dataJobExploreDetailsPage.getDescriptionField().scrollIntoView().should('be.visible').should('contain.text', testJobsFixture[0].description); - - dataJobExploreDetailsPage.getTeamField().scrollIntoView().should('be.visible').should('have.text', testJobsFixture[0].team); - - dataJobExploreDetailsPage.getScheduleField().scrollIntoView().should('be.visible').should('contains.text', 'At 12:00 AM, on day 01 of the month, and on Friday'); - - dataJobExploreDetailsPage.getOnDeployedField().scrollIntoView().should('be.visible').should('contains.text', testJobsFixture[0].config.contacts.notified_on_job_deploy); - - dataJobExploreDetailsPage.getOnPlatformErrorField().scrollIntoView().should('be.visible').should('contains.text', testJobsFixture[0].config.contacts.notified_on_job_failure_platform_error); - - dataJobExploreDetailsPage.getOnUserErrorField().scrollIntoView().should('be.visible').should('contains.text', testJobsFixture[0].config.contacts.notified_on_job_failure_user_error); - - dataJobExploreDetailsPage.getOnSuccessField().scrollIntoView().should('be.visible').should('contains.text', testJobsFixture[0].config.contacts.notified_on_job_success); - }); - - it('should verify Details tab is visible and active', () => { - dataJobsExplorePage = DataJobsExplorePage.navigateTo(); - - // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page - dataJobsExplorePage.filterByJobName(testJobsFixture[0].job_name.substring(0, 20)); - - dataJobsExplorePage.openJobDetails(testJobsFixture[0].team, testJobsFixture[0].job_name); - - const dataJobExploreDetailsPage = DataJobExploreDetailsPage.getPage(); - - dataJobExploreDetailsPage.getPageTitle().scrollIntoView().should('be.visible').should('contains.text', testJobsFixture[0].job_name); - - dataJobExploreDetailsPage.getDetailsTab().scrollIntoView().should('be.visible').should('have.class', 'active'); - }); + describe("smoke", { tags: ["@smoke"] }, () => { + it("should load and show job details", () => { + dataJobsExplorePage = DataJobsExplorePage.navigateWithSideMenu(); + + // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page + dataJobsExplorePage.filterByJobName( + testJobsFixture[0].job_name.substring(0, 20), + ); + + dataJobsExplorePage.openJobDetails( + testJobsFixture[0].team, + testJobsFixture[0].job_name, + ); + + dataJobExploreDetailsPage = DataJobExploreDetailsPage.getPage(); + + dataJobExploreDetailsPage + .getDetailsTab() + .scrollIntoView() + .should("be.visible"); + + dataJobExploreDetailsPage + .getPageTitle() + .scrollIntoView() + .should("be.visible") + .should("contains.text", testJobsFixture[0].job_name); + + dataJobExploreDetailsPage + .getStatusField() + .scrollIntoView() + .should("be.visible") + .should("have.text", "Not Deployed"); + + dataJobExploreDetailsPage + .getDescriptionField() + .scrollIntoView() + .should("be.visible") + .should("contain.text", testJobsFixture[0].description); + + dataJobExploreDetailsPage + .getTeamField() + .scrollIntoView() + .should("be.visible") + .should("have.text", testJobsFixture[0].team); + + dataJobExploreDetailsPage + .getScheduleField() + .scrollIntoView() + .should("be.visible") + .should( + "contains.text", + "At 12:00 AM, on day 01 of the month, and on Friday", + ); + + dataJobExploreDetailsPage + .getOnDeployedField() + .scrollIntoView() + .should("be.visible") + .should( + "contains.text", + testJobsFixture[0].config.contacts.notified_on_job_deploy, + ); + + dataJobExploreDetailsPage + .getOnPlatformErrorField() + .scrollIntoView() + .should("be.visible") + .should( + "contains.text", + testJobsFixture[0].config.contacts + .notified_on_job_failure_platform_error, + ); + + dataJobExploreDetailsPage + .getOnUserErrorField() + .scrollIntoView() + .should("be.visible") + .should( + "contains.text", + testJobsFixture[0].config.contacts + .notified_on_job_failure_user_error, + ); + + dataJobExploreDetailsPage + .getOnSuccessField() + .scrollIntoView() + .should("be.visible") + .should( + "contains.text", + testJobsFixture[0].config.contacts.notified_on_job_success, + ); + }); + + it("should verify Details tab is visible and active", () => { + dataJobsExplorePage = DataJobsExplorePage.navigateTo(); + + // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page + dataJobsExplorePage.filterByJobName( + testJobsFixture[0].job_name.substring(0, 20), + ); + + dataJobsExplorePage.openJobDetails( + testJobsFixture[0].team, + testJobsFixture[0].job_name, + ); + + const dataJobExploreDetailsPage = DataJobExploreDetailsPage.getPage(); + + dataJobExploreDetailsPage + .getPageTitle() + .scrollIntoView() + .should("be.visible") + .should("contains.text", testJobsFixture[0].job_name); + + dataJobExploreDetailsPage + .getDetailsTab() + .scrollIntoView() + .should("be.visible") + .should("have.class", "active"); + }); }); - describe('extended', () => { - it('should verify Action buttons are not displayed', () => { - dataJobsExplorePage = DataJobsExplorePage.navigateTo(); + describe("extended", () => { + it("should verify Action buttons are not displayed", () => { + dataJobsExplorePage = DataJobsExplorePage.navigateTo(); - // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page - dataJobsExplorePage.filterByJobName(testJobsFixture[0].job_name.substring(0, 20)); + // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page + dataJobsExplorePage.filterByJobName( + testJobsFixture[0].job_name.substring(0, 20), + ); - dataJobsExplorePage.openJobDetails(testJobsFixture[0].team, testJobsFixture[0].job_name); + dataJobsExplorePage.openJobDetails( + testJobsFixture[0].team, + testJobsFixture[0].job_name, + ); - const dataJobExploreDetailsPage = DataJobExploreDetailsPage.getPage(); + const dataJobExploreDetailsPage = DataJobExploreDetailsPage.getPage(); - dataJobExploreDetailsPage.getPageTitle().scrollIntoView().should('be.visible').should('contains.text', testJobsFixture[0].job_name); + dataJobExploreDetailsPage + .getPageTitle() + .scrollIntoView() + .should("be.visible") + .should("contains.text", testJobsFixture[0].job_name); - dataJobExploreDetailsPage.getExecuteNowButton().should('not.exist'); + dataJobExploreDetailsPage.getExecuteNowButton().should("not.exist"); - dataJobExploreDetailsPage.getActionDropdownBtn().should('not.exist'); - }); + dataJobExploreDetailsPage.getActionDropdownBtn().should("not.exist"); + }); }); -}); + }, +); diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/explore/data-jobs/executions/data-job-executions.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/explore/data-jobs/executions/data-job-executions.spec.js index 1e3e3b0cd9..296712c474 100644 --- a/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/explore/data-jobs/executions/data-job-executions.spec.js +++ b/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/explore/data-jobs/executions/data-job-executions.spec.js @@ -5,93 +5,119 @@ /// -import { DataJobDetailsBasePO } from '../../../../../support/pages/base/data-pipelines/data-job-details-base.po'; +import { DataJobDetailsBasePO } from "../../../../../support/pages/base/data-pipelines/data-job-details-base.po"; -import { DataJobsExplorePage } from '../../../../../support/pages/explore/data-jobs/data-jobs.po'; -import { DataJobExploreExecutionsPage } from '../../../../../support/pages/explore/data-jobs/executions/data-job-executions.po'; +import { DataJobsExplorePage } from "../../../../../support/pages/explore/data-jobs/data-jobs.po"; +import { DataJobExploreExecutionsPage } from "../../../../../support/pages/explore/data-jobs/executions/data-job-executions.po"; -describe('Data Job Explore Executions Page', { tags: ['@dataPipelines', '@exploreDataJobExecutions', '@explore'] }, () => { +describe( + "Data Job Explore Executions Page", + { tags: ["@dataPipelines", "@exploreDataJobExecutions", "@explore"] }, + () => { /** * @type {Array<{job_name:string; description:string; team:string; config:{db_default_type:string; contacts:{}; schedule:{schedule_cron:string}; generate_keytab:boolean; enable_execution_notifications:boolean}}>} */ let testJobsFixture; before(() => { - return DataJobExploreExecutionsPage.recordHarIfSupported() - .then(() => cy.clearLocalStorageSnapshot('data-job-explore-executions')) - .then(() => DataJobExploreExecutionsPage.login()) - .then(() => cy.saveLocalStorage('data-job-explore-executions')) - .then(() => DataJobExploreExecutionsPage.deleteShortLivedTestJobsNoDeploy(true)) - .then(() => DataJobExploreExecutionsPage.createShortLivedTestJobsNoDeploy()) - .then(() => - DataJobExploreExecutionsPage.loadShortLivedTestJobsFixtureNoDeploy().then((fixtures) => { - testJobsFixture = [fixtures[0], fixtures[1]]; - - return cy.wrap({ - context: 'explore::data-job-executions.spec::before()', - action: 'continue' - }); - }) - ); + return DataJobExploreExecutionsPage.recordHarIfSupported() + .then(() => cy.clearLocalStorageSnapshot("data-job-explore-executions")) + .then(() => DataJobExploreExecutionsPage.login()) + .then(() => cy.saveLocalStorage("data-job-explore-executions")) + .then(() => + DataJobExploreExecutionsPage.deleteShortLivedTestJobsNoDeploy(true), + ) + .then(() => + DataJobExploreExecutionsPage.createShortLivedTestJobsNoDeploy(), + ) + .then(() => + DataJobExploreExecutionsPage.loadShortLivedTestJobsFixtureNoDeploy().then( + (fixtures) => { + testJobsFixture = [fixtures[0], fixtures[1]]; + + return cy.wrap({ + context: "explore::data-job-executions.spec::before()", + action: "continue", + }); + }, + ), + ); }); after(() => { - DataJobExploreExecutionsPage.deleteShortLivedTestJobsNoDeploy(); + DataJobExploreExecutionsPage.deleteShortLivedTestJobsNoDeploy(); - DataJobExploreExecutionsPage.saveHarIfSupported(); + DataJobExploreExecutionsPage.saveHarIfSupported(); }); beforeEach(() => { - cy.restoreLocalStorage('data-job-explore-executions'); + cy.restoreLocalStorage("data-job-explore-executions"); - DataJobExploreExecutionsPage.wireUserSession(); - DataJobExploreExecutionsPage.initInterceptors(); + DataJobExploreExecutionsPage.wireUserSession(); + DataJobExploreExecutionsPage.initInterceptors(); }); - describe('smoke', { tags: ['@smoke'] }, () => { - it(`should open Details and verify Executions tab is not displayed`, () => { - cy.log('Fixture for name: ' + testJobsFixture[0].job_name); + describe("smoke", { tags: ["@smoke"] }, () => { + it(`should open Details and verify Executions tab is not displayed`, () => { + cy.log("Fixture for name: " + testJobsFixture[0].job_name); - /** - * @type {DataJobsExplorePage} - */ - const dataJobsExplorePage = DataJobsExplorePage.navigateWithSideMenu(); + /** + * @type {DataJobsExplorePage} + */ + const dataJobsExplorePage = DataJobsExplorePage.navigateWithSideMenu(); - // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page - dataJobsExplorePage.filterByJobName(testJobsFixture[0].job_name.substring(0, 20)); + // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page + dataJobsExplorePage.filterByJobName( + testJobsFixture[0].job_name.substring(0, 20), + ); - dataJobsExplorePage.openJobDetails(testJobsFixture[0].team, testJobsFixture[0].job_name); + dataJobsExplorePage.openJobDetails( + testJobsFixture[0].team, + testJobsFixture[0].job_name, + ); - const dataJobDetailsBasePage = DataJobDetailsBasePO.getPage(); + const dataJobDetailsBasePage = DataJobDetailsBasePO.getPage(); - dataJobDetailsBasePage.getPageTitle().scrollIntoView().should('be.visible').should('contains.text', testJobsFixture[0].job_name); + dataJobDetailsBasePage + .getPageTitle() + .scrollIntoView() + .should("be.visible") + .should("contains.text", testJobsFixture[0].job_name); - dataJobDetailsBasePage.getDetailsTab().should('have.class', 'active'); + dataJobDetailsBasePage.getDetailsTab().should("have.class", "active"); - dataJobDetailsBasePage.getExecutionsTab().should('not.exist'); - }); + dataJobDetailsBasePage.getExecutionsTab().should("not.exist"); + }); }); - describe('extended', () => { - it('should verify on URL navigate to Executions will redirect to Details', () => { - /** - * @type {DataJobExploreExecutionsPage} - */ - const dataJobBasePage = DataJobExploreExecutionsPage.navigateTo(testJobsFixture[0].team, testJobsFixture[0].job_name); - - dataJobBasePage.getPageTitle().scrollIntoView().should('be.visible').should('contains.text', testJobsFixture[0].job_name); - - dataJobBasePage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/explore/data-jobs/${testJobsFixture[0].team}/${testJobsFixture[0].job_name}/details`, - queryParams: {} - }); - - dataJobBasePage.getDetailsTab().should('have.class', 'active'); - }); + describe("extended", () => { + it("should verify on URL navigate to Executions will redirect to Details", () => { + /** + * @type {DataJobExploreExecutionsPage} + */ + const dataJobBasePage = DataJobExploreExecutionsPage.navigateTo( + testJobsFixture[0].team, + testJobsFixture[0].job_name, + ); + + dataJobBasePage + .getPageTitle() + .scrollIntoView() + .should("be.visible") + .should("contains.text", testJobsFixture[0].job_name); + + dataJobBasePage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/explore/data-jobs/${testJobsFixture[0].team}/${testJobsFixture[0].job_name}/details`, + queryParams: {}, + }); + + dataJobBasePage.getDetailsTab().should("have.class", "active"); + }); }); -}); + }, +); diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/get-started/get-started-page-data-jobs-health-overview.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/get-started/get-started-page-data-jobs-health-overview.spec.js index 2d5fd19926..b4bca65971 100644 --- a/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/get-started/get-started-page-data-jobs-health-overview.spec.js +++ b/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/get-started/get-started-page-data-jobs-health-overview.spec.js @@ -5,13 +5,16 @@ /// -import { TEAM_VDK_DATA_JOB_FAILING } from '../../../support/helpers/constants.support'; +import { TEAM_VDK_DATA_JOB_FAILING } from "../../../support/helpers/constants.support"; -import { GetStartedDataJobsHealthOverviewWidgetPO } from '../../../support/pages/get-started/get-started-page-data-jobs-health-overview.po'; -import { DataJobManageDetailsPage } from '../../../support/pages/manage/data-jobs/details/data-job-details.po'; -import { DataJobManageExecutionsPage } from '../../../support/pages/manage/data-jobs/executions/data-job-executions.po'; +import { GetStartedDataJobsHealthOverviewWidgetPO } from "../../../support/pages/get-started/get-started-page-data-jobs-health-overview.po"; +import { DataJobManageDetailsPage } from "../../../support/pages/manage/data-jobs/details/data-job-details.po"; +import { DataJobManageExecutionsPage } from "../../../support/pages/manage/data-jobs/executions/data-job-executions.po"; -describe('Get Started Page: Data Jobs Health Overview Widget', { tags: ['@dataPipelines', '@healthOverviewWidget', '@getStarted'] }, () => { +describe( + "Get Started Page: Data Jobs Health Overview Widget", + { tags: ["@dataPipelines", "@healthOverviewWidget", "@getStarted"] }, + () => { /** * @type {{job_name:string; description:string; team:string; config:{db_default_type:string; contacts:{}; schedule:{schedule_cron:string}; generate_keytab:boolean; enable_execution_notifications:boolean}}} */ @@ -22,101 +25,167 @@ describe('Get Started Page: Data Jobs Health Overview Widget', { tags: ['@dataPi let getStartedPage; before(() => { - return GetStartedDataJobsHealthOverviewWidgetPO.recordHarIfSupported() - .then(() => cy.clearLocalStorageSnapshot('get-started-page-data-jobs-health')) - .then(() => GetStartedDataJobsHealthOverviewWidgetPO.login()) - .then(() => cy.saveLocalStorage('get-started-page-data-jobs-health')) - .then(() => GetStartedDataJobsHealthOverviewWidgetPO.createLongLivedJobs('failing')) - .then(() => GetStartedDataJobsHealthOverviewWidgetPO.provideExecutionsForLongLivedJobs({ job: 'failing' })) - .then(() => - GetStartedDataJobsHealthOverviewWidgetPO.loadLongLivedFailingJobFixture().then((loadedTestJob) => { - longLivedFailingJobFixture = loadedTestJob; - - return cy.wrap({ - context: 'get-started::1::get-started-page-data-jobs-health-overview.spec::before()', - action: 'continue' - }); - }) - ) - .then(() => { - return cy.wrap({ - context: 'get-started::2::get-started-page-data-jobs-health-overview.spec::before()', - action: 'continue' - }); - }); + return GetStartedDataJobsHealthOverviewWidgetPO.recordHarIfSupported() + .then(() => + cy.clearLocalStorageSnapshot("get-started-page-data-jobs-health"), + ) + .then(() => GetStartedDataJobsHealthOverviewWidgetPO.login()) + .then(() => cy.saveLocalStorage("get-started-page-data-jobs-health")) + .then(() => + GetStartedDataJobsHealthOverviewWidgetPO.createLongLivedJobs( + "failing", + ), + ) + .then(() => + GetStartedDataJobsHealthOverviewWidgetPO.provideExecutionsForLongLivedJobs( + { job: "failing" }, + ), + ) + .then(() => + GetStartedDataJobsHealthOverviewWidgetPO.loadLongLivedFailingJobFixture().then( + (loadedTestJob) => { + longLivedFailingJobFixture = loadedTestJob; + + return cy.wrap({ + context: + "get-started::1::get-started-page-data-jobs-health-overview.spec::before()", + action: "continue", + }); + }, + ), + ) + .then(() => { + return cy.wrap({ + context: + "get-started::2::get-started-page-data-jobs-health-overview.spec::before()", + action: "continue", + }); + }); }); after(() => { - return GetStartedDataJobsHealthOverviewWidgetPO.saveHarIfSupported().then(() => - cy.wrap({ - context: 'get-started::get-started-page-data-jobs-health-overview.spec::after()', - action: 'continue' - }) - ); + return GetStartedDataJobsHealthOverviewWidgetPO.saveHarIfSupported().then( + () => + cy.wrap({ + context: + "get-started::get-started-page-data-jobs-health-overview.spec::after()", + action: "continue", + }), + ); }); beforeEach(() => { - cy.restoreLocalStorage('get-started-page-data-jobs-health'); + cy.restoreLocalStorage("get-started-page-data-jobs-health"); - GetStartedDataJobsHealthOverviewWidgetPO.wireUserSession(); - GetStartedDataJobsHealthOverviewWidgetPO.initInterceptors(); + GetStartedDataJobsHealthOverviewWidgetPO.wireUserSession(); + GetStartedDataJobsHealthOverviewWidgetPO.initInterceptors(); - getStartedPage = GetStartedDataJobsHealthOverviewWidgetPO.navigateTo(); + getStartedPage = GetStartedDataJobsHealthOverviewWidgetPO.navigateTo(); }); - describe('smoke', { tags: ['@smoke'] }, () => { - it('Validate Data Jobs Health Overview panel', () => { - getStartedPage.getPageTitle().should('contain.text', 'Get Started with Data Pipelines'); - - getStartedPage.getDataJobsHealthPanel().scrollIntoView(); - - getStartedPage.getNumberOfFailedExecutions().should('be.gt', 0); - getStartedPage - .getAllFailingJobs() - .then((elements) => elements.filter((_index, el) => el.innerText.includes(TEAM_VDK_DATA_JOB_FAILING))) - .should('have.length.gt', 0); - getStartedPage - .getAllMostRecentFailingJobs() - .then((elements) => elements.filter((_index, el) => el.innerText.includes(TEAM_VDK_DATA_JOB_FAILING))) - .should('have.length.gt', 0); - }); + describe("smoke", { tags: ["@smoke"] }, () => { + it("Validate Data Jobs Health Overview panel", () => { + getStartedPage + .getPageTitle() + .should("contain.text", "Get Started with Data Pipelines"); + + getStartedPage.getDataJobsHealthPanel().scrollIntoView(); + + getStartedPage.getNumberOfFailedExecutions().should("be.gt", 0); + getStartedPage + .getAllFailingJobs() + .then((elements) => + elements.filter((_index, el) => + el.innerText.includes(TEAM_VDK_DATA_JOB_FAILING), + ), + ) + .should("have.length.gt", 0); + getStartedPage + .getAllMostRecentFailingJobs() + .then((elements) => + elements.filter((_index, el) => + el.innerText.includes(TEAM_VDK_DATA_JOB_FAILING), + ), + ) + .should("have.length.gt", 0); + }); }); - describe('extended', () => { - it('Verify Widgets rendered correct data and failing jobs navigates correctly', () => { - getStartedPage.getDataJobsHealthPanel().scrollIntoView(); - - getStartedPage.getExecutionsSuccessPercentage().should('be.gte', 0).should('be.lte', 100); - getStartedPage.getNumberOfFailedExecutions().should('be.gte', 2); - getStartedPage.getExecutionsTotal().should('be.gte', 2); - - getStartedPage.getAllFailingJobs().should('have.length.gte', 1); + describe("extended", () => { + it("Verify Widgets rendered correct data and failing jobs navigates correctly", () => { + getStartedPage.getDataJobsHealthPanel().scrollIntoView(); - getStartedPage.getAllMostRecentFailingJobsLinks().should('have.length.gte', 1); + getStartedPage + .getExecutionsSuccessPercentage() + .should("be.gte", 0) + .should("be.lte", 100); + getStartedPage.getNumberOfFailedExecutions().should("be.gte", 2); + getStartedPage.getExecutionsTotal().should("be.gte", 2); - // navigate to failing job details - getStartedPage.navigateToFailingJobDetails(longLivedFailingJobFixture.job_name); + getStartedPage.getAllFailingJobs().should("have.length.gte", 1); - const dataJobManageDetailsPage = DataJobManageDetailsPage.getPage(); - dataJobManageDetailsPage.getPageTitle().should('contain.text', `Data Job: ${longLivedFailingJobFixture.job_name}`); - dataJobManageDetailsPage.getDetailsTab().should('be.visible').should('have.class', 'active'); - dataJobManageDetailsPage.getExecutionsTab().should('exist').should('not.have.class', 'active'); - dataJobManageDetailsPage.showMoreDescription().getDescriptionFull().should('contain.text', longLivedFailingJobFixture.description); - }); - - it('Verify most recent failing executions Widget navigates correctly', () => { - getStartedPage.getDataJobsHealthPanel().scrollIntoView(); + getStartedPage + .getAllMostRecentFailingJobsLinks() + .should("have.length.gte", 1); - getStartedPage.getAllMostRecentFailingJobsLinks().should('have.length.gte', 1); + // navigate to failing job details + getStartedPage.navigateToFailingJobDetails( + longLivedFailingJobFixture.job_name, + ); - // navigate to most recent failing job executions - getStartedPage.navigateToMostRecentFailingJobExecutions(longLivedFailingJobFixture.job_name); + const dataJobManageDetailsPage = DataJobManageDetailsPage.getPage(); + dataJobManageDetailsPage + .getPageTitle() + .should( + "contain.text", + `Data Job: ${longLivedFailingJobFixture.job_name}`, + ); + dataJobManageDetailsPage + .getDetailsTab() + .should("be.visible") + .should("have.class", "active"); + dataJobManageDetailsPage + .getExecutionsTab() + .should("exist") + .should("not.have.class", "active"); + dataJobManageDetailsPage + .showMoreDescription() + .getDescriptionFull() + .should("contain.text", longLivedFailingJobFixture.description); + }); + + it("Verify most recent failing executions Widget navigates correctly", () => { + getStartedPage.getDataJobsHealthPanel().scrollIntoView(); + + getStartedPage + .getAllMostRecentFailingJobsLinks() + .should("have.length.gte", 1); + + // navigate to most recent failing job executions + getStartedPage.navigateToMostRecentFailingJobExecutions( + longLivedFailingJobFixture.job_name, + ); - const dataJobManageExecutionsPage = DataJobManageExecutionsPage.getPage(); - dataJobManageExecutionsPage.getPageTitle().should('contain.text', `Data Job: ${longLivedFailingJobFixture.job_name}`); - dataJobManageExecutionsPage.getDetailsTab().should('be.visible').should('not.have.class', 'active'); - dataJobManageExecutionsPage.getExecutionsTab().should('be.visible').should('have.class', 'active'); - dataJobManageExecutionsPage.getDataGridRows().should('have.length.gte', 2); - }); + const dataJobManageExecutionsPage = + DataJobManageExecutionsPage.getPage(); + dataJobManageExecutionsPage + .getPageTitle() + .should( + "contain.text", + `Data Job: ${longLivedFailingJobFixture.job_name}`, + ); + dataJobManageExecutionsPage + .getDetailsTab() + .should("be.visible") + .should("not.have.class", "active"); + dataJobManageExecutionsPage + .getExecutionsTab() + .should("be.visible") + .should("have.class", "active"); + dataJobManageExecutionsPage + .getDataGridRows() + .should("have.length.gte", 2); + }); }); -}); + }, +); diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/get-started/get-started-page.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/get-started/get-started-page.spec.js index be191f2e14..62f5a1b8a3 100644 --- a/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/get-started/get-started-page.spec.js +++ b/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/get-started/get-started-page.spec.js @@ -5,46 +5,54 @@ /// -import { GetStartedPagePO } from '../../../support/pages/get-started/get-started-page.po'; +import { GetStartedPagePO } from "../../../support/pages/get-started/get-started-page.po"; -describe('Get Started Page', { tags: ['@dataPipelines', '@getStarted'] }, () => { +describe( + "Get Started Page", + { tags: ["@dataPipelines", "@getStarted"] }, + () => { /** * @type {GetStartedPagePO} */ let getStartedPage; before(() => { - return GetStartedPagePO.recordHarIfSupported() - .then(() => cy.clearLocalStorageSnapshot('get-started-page')) - .then(() => cy.saveLocalStorage('get-started-page')) - .then(() => { - return cy.wrap({ - context: 'get-started::1::get-started-page.spec::before()', - action: 'continue' - }); - }); + return GetStartedPagePO.recordHarIfSupported() + .then(() => cy.clearLocalStorageSnapshot("get-started-page")) + .then(() => cy.saveLocalStorage("get-started-page")) + .then(() => { + return cy.wrap({ + context: "get-started::1::get-started-page.spec::before()", + action: "continue", + }); + }); }); after(() => { - return GetStartedPagePO.saveHarIfSupported().then(() => - cy.wrap({ - context: 'get-started::get-started-page.spec::after()', - action: 'continue' - }) - ); + return GetStartedPagePO.saveHarIfSupported().then(() => + cy.wrap({ + context: "get-started::get-started-page.spec::after()", + action: "continue", + }), + ); }); beforeEach(() => { - cy.restoreLocalStorage('get-started-page'); + cy.restoreLocalStorage("get-started-page"); - GetStartedPagePO.wireUserSession(); - GetStartedPagePO.initInterceptors(); - getStartedPage = GetStartedPagePO.navigateTo(); + GetStartedPagePO.wireUserSession(); + GetStartedPagePO.initInterceptors(); + getStartedPage = GetStartedPagePO.navigateTo(); }); - describe('smoke', { tags: ['@smoke'] }, () => { - it('Main Title Component have text: Get Started with Data Pipelines', () => { - getStartedPage.getPageTitle().invoke('text').invoke('trim').should('eq', 'Get Started with Data Pipelines'); - }); + describe("smoke", { tags: ["@smoke"] }, () => { + it("Main Title Component have text: Get Started with Data Pipelines", () => { + getStartedPage + .getPageTitle() + .invoke("text") + .invoke("trim") + .should("eq", "Get Started with Data Pipelines"); + }); }); -}); + }, +); diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/manage/data-jobs/data-jobs.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/manage/data-jobs/data-jobs.spec.js index 61ebbeb02a..374515f4af 100644 --- a/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/manage/data-jobs/data-jobs.spec.js +++ b/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/manage/data-jobs/data-jobs.spec.js @@ -5,10 +5,13 @@ /// -import { DataJobsManagePage } from '../../../../support/pages/manage/data-jobs/data-jobs.po'; -import { DataJobManageDetailsPage } from '../../../../support/pages/manage/data-jobs/details/data-job-details.po'; +import { DataJobsManagePage } from "../../../../support/pages/manage/data-jobs/data-jobs.po"; +import { DataJobManageDetailsPage } from "../../../../support/pages/manage/data-jobs/details/data-job-details.po"; -describe('Data Jobs Manage Page', { tags: ['@dataPipelines', '@manageDataJobs', '@manage'] }, () => { +describe( + "Data Jobs Manage Page", + { tags: ["@dataPipelines", "@manageDataJobs", "@manage"] }, + () => { const descriptionWordsBeforeTruncate = 12; /** @@ -29,445 +32,628 @@ describe('Data Jobs Manage Page', { tags: ['@dataPipelines', '@manageDataJobs', let shortLivedTestJobWithDeployFixture; before(() => { - return DataJobsManagePage.recordHarIfSupported() - .then(() => cy.clearLocalStorageSnapshot('data-jobs-manage')) - .then(() => DataJobsManagePage.login()) - .then(() => cy.saveLocalStorage('data-jobs-manage')) - .then(() => DataJobsManagePage.deleteShortLivedTestJobsNoDeploy(true)) - .then(() => DataJobsManagePage.createLongLivedJobs('failing')) - .then(() => DataJobsManagePage.createShortLivedTestJobWithDeploy('v0')) - .then(() => - DataJobsManagePage.loadShortLivedTestJobFixtureWithDeploy('v0').then((loadedTestJob) => { - shortLivedTestJobWithDeployFixture = loadedTestJob; - - return cy.wrap({ - context: 'manage::1::data-jobs.int.spec::before()', - action: 'continue' - }); - }) - ) - .then(() => DataJobsManagePage.createShortLivedTestJobsNoDeploy()) - .then(() => - DataJobsManagePage.loadShortLivedTestJobsFixtureNoDeploy().then((fixtures) => { - testJobsFixture = [fixtures[0], fixtures[1]]; - additionalTestJobFixture = fixtures[2]; - - return cy.wrap({ - context: 'manage::2::data-jobs.int.spec::before()', - action: 'continue' - }); - }) - ); + return DataJobsManagePage.recordHarIfSupported() + .then(() => cy.clearLocalStorageSnapshot("data-jobs-manage")) + .then(() => DataJobsManagePage.login()) + .then(() => cy.saveLocalStorage("data-jobs-manage")) + .then(() => DataJobsManagePage.deleteShortLivedTestJobsNoDeploy(true)) + .then(() => DataJobsManagePage.createLongLivedJobs("failing")) + .then(() => DataJobsManagePage.createShortLivedTestJobWithDeploy("v0")) + .then(() => + DataJobsManagePage.loadShortLivedTestJobFixtureWithDeploy("v0").then( + (loadedTestJob) => { + shortLivedTestJobWithDeployFixture = loadedTestJob; + + return cy.wrap({ + context: "manage::1::data-jobs.int.spec::before()", + action: "continue", + }); + }, + ), + ) + .then(() => DataJobsManagePage.createShortLivedTestJobsNoDeploy()) + .then(() => + DataJobsManagePage.loadShortLivedTestJobsFixtureNoDeploy().then( + (fixtures) => { + testJobsFixture = [fixtures[0], fixtures[1]]; + additionalTestJobFixture = fixtures[2]; + + return cy.wrap({ + context: "manage::2::data-jobs.int.spec::before()", + action: "continue", + }); + }, + ), + ); }); after(() => { - DataJobsManagePage.deleteShortLivedTestJobWithDeploy('v0'); - DataJobsManagePage.deleteShortLivedTestJobsNoDeploy(); + DataJobsManagePage.deleteShortLivedTestJobWithDeploy("v0"); + DataJobsManagePage.deleteShortLivedTestJobsNoDeploy(); - DataJobsManagePage.saveHarIfSupported(); + DataJobsManagePage.saveHarIfSupported(); }); beforeEach(() => { - cy.restoreLocalStorage('data-jobs-manage'); + cy.restoreLocalStorage("data-jobs-manage"); - DataJobsManagePage.wireUserSession(); - DataJobsManagePage.initInterceptors(); + DataJobsManagePage.wireUserSession(); + DataJobsManagePage.initInterceptors(); }); - describe('smoke', { tags: ['@smoke'] }, () => { - it('page is loaded and grid contains test jobs', () => { - dataJobsManagePage = DataJobsManagePage.navigateWithSideMenu(); + describe("smoke", { tags: ["@smoke"] }, () => { + it("page is loaded and grid contains test jobs", () => { + dataJobsManagePage = DataJobsManagePage.navigateWithSideMenu(); - dataJobsManagePage.getPageTitle().scrollIntoView().should('be.visible').invoke('text').invoke('trim').should('eq', 'Manage Data Jobs'); + dataJobsManagePage + .getPageTitle() + .scrollIntoView() + .should("be.visible") + .invoke("text") + .invoke("trim") + .should("eq", "Manage Data Jobs"); - dataJobsManagePage.chooseQuickFilter(0); + dataJobsManagePage.chooseQuickFilter(0); - // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page - dataJobsManagePage.filterByJobName(testJobsFixture[0].job_name.substring(0, 20)); + // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page + dataJobsManagePage.filterByJobName( + testJobsFixture[0].job_name.substring(0, 20), + ); - dataJobsManagePage.getDataGrid().scrollIntoView().should('be.visible'); + dataJobsManagePage.getDataGrid().scrollIntoView().should("be.visible"); - testJobsFixture.forEach((testJob) => { - cy.log('Fixture for name: ' + testJob.job_name); + testJobsFixture.forEach((testJob) => { + cy.log("Fixture for name: " + testJob.job_name); - dataJobsManagePage.getDataGridCell(testJob.job_name).scrollIntoView().should('be.visible'); - }); + dataJobsManagePage + .getDataGridCell(testJob.job_name) + .scrollIntoView() + .should("be.visible"); }); + }); - it('grid filters by job name', () => { - dataJobsManagePage = DataJobsManagePage.navigateTo(); + it("grid filters by job name", () => { + dataJobsManagePage = DataJobsManagePage.navigateTo(); - dataJobsManagePage.chooseQuickFilter(0); + dataJobsManagePage.chooseQuickFilter(0); - // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page - dataJobsManagePage.filterByJobName(testJobsFixture[0].job_name); + // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page + dataJobsManagePage.filterByJobName(testJobsFixture[0].job_name); - dataJobsManagePage.getDataGridCell(testJobsFixture[0].job_name).scrollIntoView().should('be.visible'); + dataJobsManagePage + .getDataGridCell(testJobsFixture[0].job_name) + .scrollIntoView() + .should("be.visible"); - dataJobsManagePage.getDataGridCell(testJobsFixture[1].job_name).should('not.exist'); - }); + dataJobsManagePage + .getDataGridCell(testJobsFixture[1].job_name) + .should("not.exist"); + }); - it('grid searches by job name', () => { - dataJobsManagePage = DataJobsManagePage.navigateTo(); + it("grid searches by job name", () => { + dataJobsManagePage = DataJobsManagePage.navigateTo(); - dataJobsManagePage.chooseQuickFilter(0); + dataJobsManagePage.chooseQuickFilter(0); - dataJobsManagePage.searchByJobName(testJobsFixture[1].job_name); + dataJobsManagePage.searchByJobName(testJobsFixture[1].job_name); - dataJobsManagePage.getDataGridCell(testJobsFixture[0].job_name).should('not.exist'); + dataJobsManagePage + .getDataGridCell(testJobsFixture[0].job_name) + .should("not.exist"); - dataJobsManagePage.getDataGridCell(testJobsFixture[1].job_name).scrollIntoView().should('be.visible'); - }); + dataJobsManagePage + .getDataGridCell(testJobsFixture[1].job_name) + .scrollIntoView() + .should("be.visible"); + }); - it('disable/enable job', () => { - dataJobsManagePage = DataJobsManagePage.navigateTo(); + it("disable/enable job", () => { + dataJobsManagePage = DataJobsManagePage.navigateTo(); - dataJobsManagePage.chooseQuickFilter(0); + dataJobsManagePage.chooseQuickFilter(0); - const jobName = shortLivedTestJobWithDeployFixture.job_name; + const jobName = shortLivedTestJobWithDeployFixture.job_name; - // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page - dataJobsManagePage.filterByJobName(shortLivedTestJobWithDeployFixture.job_name.substring(0, 20)); + // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page + dataJobsManagePage.filterByJobName( + shortLivedTestJobWithDeployFixture.job_name.substring(0, 20), + ); - //Toggle job status twice, enable to disable and vice versa. - dataJobsManagePage.toggleJobStatus(shortLivedTestJobWithDeployFixture.job_name); - dataJobsManagePage.toggleJobStatus(shortLivedTestJobWithDeployFixture.job_name); - }); + //Toggle job status twice, enable to disable and vice versa. + dataJobsManagePage.toggleJobStatus( + shortLivedTestJobWithDeployFixture.job_name, + ); + dataJobsManagePage.toggleJobStatus( + shortLivedTestJobWithDeployFixture.job_name, + ); + }); }); - describe('extended', () => { - it('grid search parameter goes into URL', () => { - dataJobsManagePage = DataJobsManagePage.navigateTo(); - - dataJobsManagePage.chooseQuickFilter(0); - - // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page - dataJobsManagePage.filterByJobName(testJobsFixture[0].job_name.substring(0, 20)); - - // verify 2 test rows visible - dataJobsManagePage.getDataGridCell(testJobsFixture[0].job_name).scrollIntoView().should('be.visible'); - dataJobsManagePage.getDataGridCell(testJobsFixture[1].job_name).scrollIntoView().should('be.visible'); - - // do search - dataJobsManagePage.searchByJobName(testJobsFixture[0].job_name); - - // verify 1 test row visible - dataJobsManagePage.getDataGridCell(testJobsFixture[0].job_name).scrollIntoView().should('be.visible'); - dataJobsManagePage.getDataGridCell(testJobsFixture[1].job_name).should('not.exist'); - - // verify url contains search value - dataJobsManagePage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true - }) - .should('deep.equal', { - pathSegment: '/manage/data-jobs', - queryParams: { - search: testJobsFixture[0].job_name, - jobName: testJobsFixture[0].job_name.substring(0, 20), - deploymentStatus: 'all' - } - }); - - // clear search with clear() method - dataJobsManagePage.clearSearchField(); - - // verify 2 test rows visible - dataJobsManagePage.getDataGridCell(testJobsFixture[0].job_name).scrollIntoView().should('be.visible'); - dataJobsManagePage.getDataGridCell(testJobsFixture[1].job_name).scrollIntoView().should('be.visible'); - - // verify url does not contain search value - dataJobsManagePage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true - }) - .should('deep.equal', { - pathSegment: '/manage/data-jobs', - queryParams: { - jobName: testJobsFixture[0].job_name.substring(0, 20), - deploymentStatus: 'all' - } - }); - }); - - it('grid search perform search when URL contains search parameter', () => { - // navigate with search value in URL - dataJobsManagePage = DataJobsManagePage.navigateToDataJobUrl(`/manage/data-jobs?search=${testJobsFixture[1].job_name}`); - - dataJobsManagePage.waitForGridToLoad(null); - - dataJobsManagePage.chooseQuickFilter(0); - - // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page - dataJobsManagePage.filterByJobName(testJobsFixture[0].job_name.substring(0, 20)); - - // verify url contains search value - dataJobsManagePage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true - }) - .should('deep.equal', { - pathSegment: '/manage/data-jobs', - queryParams: { - search: testJobsFixture[1].job_name, - jobName: testJobsFixture[0].job_name.substring(0, 20), - deploymentStatus: 'all' - } - }); - - // verify 1 test row visible - dataJobsManagePage.getDataGridCell(testJobsFixture[0].job_name).should('not.exist'); - dataJobsManagePage.getDataGridCell(testJobsFixture[1].job_name).scrollIntoView().should('be.visible'); - - // clear search with button - dataJobsManagePage.clearSearchFieldWithButton(); - - // verify 2 test rows visible - dataJobsManagePage.getDataGridCell(testJobsFixture[0].job_name).scrollIntoView().should('be.visible'); - dataJobsManagePage.getDataGridCell(testJobsFixture[1].job_name).scrollIntoView().should('be.visible'); - - // verify url does not contain search value - dataJobsManagePage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true - }) - .should('deep.equal', { - pathSegment: '/manage/data-jobs', - queryParams: { - jobName: testJobsFixture[0].job_name.substring(0, 20), - deploymentStatus: 'all' - } - }); - }); - - it('refresh shows newly created job', () => { - dataJobsManagePage = DataJobsManagePage.navigateTo(); - - dataJobsManagePage.chooseQuickFilter(0); - - // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page - dataJobsManagePage.filterByJobName(testJobsFixture[0].job_name.substring(0, 20)); - - dataJobsManagePage.getDataGridCell(testJobsFixture[0].job_name).should('have.text', testJobsFixture[0].job_name); - - dataJobsManagePage.getDataGridCell(additionalTestJobFixture.job_name).should('not.exist'); - - DataJobsManagePage.createAdditionalShortLivedTestJobsNoDeploy(); - - dataJobsManagePage.refreshDataGrid(); - - dataJobsManagePage.getDataGridCell(additionalTestJobFixture.job_name).should('have.text', additionalTestJobFixture.job_name); - }); - - it('click on edit button opens new page with Job details', () => { - dataJobsManagePage = DataJobsManagePage.navigateWithSideMenu(); - - dataJobsManagePage.chooseQuickFilter(0); - - // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page - dataJobsManagePage.filterByJobName(testJobsFixture[0].job_name.substring(0, 20)); - - dataJobsManagePage.openJobDetails(testJobsFixture[0].team, testJobsFixture[0].job_name); - - const dataJobManageDetailsPage = DataJobManageDetailsPage.getPage(); - - dataJobManageDetailsPage.getPageTitle().scrollIntoView().should('be.visible').invoke('text').invoke('trim').should('eq', `Data Job: ${testJobsFixture[0].job_name}`); - - dataJobManageDetailsPage.getDescription().scrollIntoView().should('be.visible').should('contain.text', testJobsFixture[0].description.split(' ').slice(0, descriptionWordsBeforeTruncate).join(' ')); - - dataJobManageDetailsPage.getSchedule().scrollIntoView().should('be.visible'); - - dataJobManageDetailsPage.getDeploymentStatus('not-deployed').scrollIntoView().should('be.visible').should('have.text', 'Not Deployed'); - }); - - it('quick filters', () => { - // Disable data job before test start - DataJobsManagePage.changeLongLivedJobStatus('failing', true) - .then(() => DataJobsManagePage.changeShortLivedTestJobWithDeployStatus('v0', false)) - .then(() => { - dataJobsManagePage = DataJobsManagePage.navigateTo(); - - dataJobsManagePage.waitForClickThinkingTime(); - dataJobsManagePage.chooseQuickFilter(0); - - dataJobsManagePage.getDataGridStatusIcons().then(($icons) => { - for (const icon of Array.from($icons)) { - cy.wrap(icon).invoke('attr', 'data-cy').should('match', new RegExp('data-pipelines-job-(enabled|disabled|not-deployed)')); - } - }); - - dataJobsManagePage.waitForClickThinkingTime(); - dataJobsManagePage.chooseQuickFilter(1); - - dataJobsManagePage.getDataGridStatusIcons().then(($icons) => { - for (const icon of Array.from($icons)) { - cy.wrap(icon).should('have.attr', 'data-cy', 'data-pipelines-job-enabled'); - } - }); - - dataJobsManagePage.waitForClickThinkingTime(); - dataJobsManagePage.chooseQuickFilter(2); - - dataJobsManagePage.getDataGridStatusIcons().then(($icons) => { - for (const icon of Array.from($icons)) { - cy.wrap(icon).should('have.attr', 'data-cy', 'data-pipelines-job-disabled'); - } - }); - - dataJobsManagePage.waitForClickThinkingTime(); - dataJobsManagePage.chooseQuickFilter(3); - - dataJobsManagePage.getDataGridStatusIcons().then(($icons) => { - for (const icon of Array.from($icons)) { - cy.wrap(icon).should('have.attr', 'data-cy', 'data-pipelines-job-not-deployed'); - } - }); - - // Enable data job after job end - DataJobsManagePage.changeShortLivedTestJobWithDeployStatus('v0', true); - }); - }); - - it('filter description data jobs', () => { - dataJobsManagePage = DataJobsManagePage.navigateTo(); - - dataJobsManagePage.chooseQuickFilter(0); - - // show panel for show/hide columns - dataJobsManagePage.toggleColumnShowHidePanel(); - - // verify column is not checked in toggling menu - dataJobsManagePage.getDataGridColumnShowHideOption('Description').should('exist').should('not.be.checked'); - - // verify header cell for column is not rendered - dataJobsManagePage.getDataGridHeaderCell('Description').should('have.length', 0); - - // toggle column to render - dataJobsManagePage.checkColumnShowHideOption('Description'); - - // verify column is checked in toggling menu - dataJobsManagePage.getHeaderColumnDescriptionName().should('exist'); - - // filter by job description because - dataJobsManagePage.filterByJobDescription('Test description 1'); - - // verify url contains description value - dataJobsManagePage.getCurrentUrl().should('match', new RegExp(`\\/manage\\/data-jobs\\?description=Test%20description%201&deploymentStatus=all$`)); - - dataJobsManagePage.getDataGridCell(testJobsFixture[0].job_name).scrollIntoView().should('be.visible'); - - dataJobsManagePage.getDataGridCell(testJobsFixture[1].job_name).should('not.exist'); - }); - - it('perform filtering by description when URL contains description parameter', () => { - // navigate with search value in URL - dataJobsManagePage = DataJobsManagePage.navigateToDataJobUrl(`/manage/data-jobs?deploymentEnabled=enabled&description=Test%20description%201`); - - dataJobsManagePage.chooseQuickFilter(0); - dataJobsManagePage.waitForGridToLoad(null); - - // show panel for show/hide columns - dataJobsManagePage.toggleColumnShowHidePanel(); - - // toggle column to render - dataJobsManagePage.checkColumnShowHideOption('Description'); - - // verify url contains search value - dataJobsManagePage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true - }) - .should('deep.equal', { - pathSegment: '/manage/data-jobs', - queryParams: { - deploymentStatus: 'all', - description: 'Test%20description%201' - } - }); - - // verify 1 test row visible - dataJobsManagePage.getDataGridCell(testJobsFixture[0].job_name).scrollIntoView().should('be.visible'); - - dataJobsManagePage.getDataGridCell(testJobsFixture[1].job_name).should('not.exist'); - }); - - it('show/hide column when toggling from menu', () => { - dataJobsManagePage = DataJobsManagePage.navigateTo(); - - // show panel for show/hide columns - dataJobsManagePage.toggleColumnShowHidePanel(); - - // verify correct options are rendered - dataJobsManagePage.getDataGridColumnShowHideOptionsValues().should('have.length', 11).invoke('join', ',').should('eq', 'Description,Deployment Status,Python Version,Last Execution Duration,Success rate,Next run (UTC),Last Deployed (UTC),Last Deployed By,Notifications,Source,Logs'); - - // verify column is not checked in toggling menu - dataJobsManagePage.getDataGridColumnShowHideOption('Notifications').should('exist').should('not.be.checked'); - - // verify header cell for column is not rendered - dataJobsManagePage.getDataGridHeaderCell('Notifications').should('have.length', 0); - - // toggle column to render - dataJobsManagePage.checkColumnShowHideOption('Notifications'); - - // verify column is checked in toggling menu - dataJobsManagePage.getDataGridColumnShowHideOption('Notifications').should('exist').should('be.checked'); - - // verify header cell for column is rendered - dataJobsManagePage.getDataGridHeaderCell('Notifications').should('have.length', 1); - - // toggle column to hide - dataJobsManagePage.uncheckColumnShowHideOption('Notifications'); - - // verify column is not checked in toggling menu - dataJobsManagePage.getDataGridColumnShowHideOption('Notifications').should('exist').should('not.be.checked'); - - // verify header cell for column is not rendered - dataJobsManagePage.getDataGridHeaderCell('Notifications').should('have.length', 0); - - // hide panel for show/hide columns - dataJobsManagePage.toggleColumnShowHidePanel(); - }); - - it('execute now', () => { + describe("extended", () => { + it("grid search parameter goes into URL", () => { + dataJobsManagePage = DataJobsManagePage.navigateTo(); + + dataJobsManagePage.chooseQuickFilter(0); + + // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page + dataJobsManagePage.filterByJobName( + testJobsFixture[0].job_name.substring(0, 20), + ); + + // verify 2 test rows visible + dataJobsManagePage + .getDataGridCell(testJobsFixture[0].job_name) + .scrollIntoView() + .should("be.visible"); + dataJobsManagePage + .getDataGridCell(testJobsFixture[1].job_name) + .scrollIntoView() + .should("be.visible"); + + // do search + dataJobsManagePage.searchByJobName(testJobsFixture[0].job_name); + + // verify 1 test row visible + dataJobsManagePage + .getDataGridCell(testJobsFixture[0].job_name) + .scrollIntoView() + .should("be.visible"); + dataJobsManagePage + .getDataGridCell(testJobsFixture[1].job_name) + .should("not.exist"); + + // verify url contains search value + dataJobsManagePage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + }) + .should("deep.equal", { + pathSegment: "/manage/data-jobs", + queryParams: { + search: testJobsFixture[0].job_name, + jobName: testJobsFixture[0].job_name.substring(0, 20), + deploymentStatus: "all", + }, + }); + + // clear search with clear() method + dataJobsManagePage.clearSearchField(); + + // verify 2 test rows visible + dataJobsManagePage + .getDataGridCell(testJobsFixture[0].job_name) + .scrollIntoView() + .should("be.visible"); + dataJobsManagePage + .getDataGridCell(testJobsFixture[1].job_name) + .scrollIntoView() + .should("be.visible"); + + // verify url does not contain search value + dataJobsManagePage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + }) + .should("deep.equal", { + pathSegment: "/manage/data-jobs", + queryParams: { + jobName: testJobsFixture[0].job_name.substring(0, 20), + deploymentStatus: "all", + }, + }); + }); + + it("grid search perform search when URL contains search parameter", () => { + // navigate with search value in URL + dataJobsManagePage = DataJobsManagePage.navigateToDataJobUrl( + `/manage/data-jobs?search=${testJobsFixture[1].job_name}`, + ); + + dataJobsManagePage.waitForGridToLoad(null); + + dataJobsManagePage.chooseQuickFilter(0); + + // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page + dataJobsManagePage.filterByJobName( + testJobsFixture[0].job_name.substring(0, 20), + ); + + // verify url contains search value + dataJobsManagePage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + }) + .should("deep.equal", { + pathSegment: "/manage/data-jobs", + queryParams: { + search: testJobsFixture[1].job_name, + jobName: testJobsFixture[0].job_name.substring(0, 20), + deploymentStatus: "all", + }, + }); + + // verify 1 test row visible + dataJobsManagePage + .getDataGridCell(testJobsFixture[0].job_name) + .should("not.exist"); + dataJobsManagePage + .getDataGridCell(testJobsFixture[1].job_name) + .scrollIntoView() + .should("be.visible"); + + // clear search with button + dataJobsManagePage.clearSearchFieldWithButton(); + + // verify 2 test rows visible + dataJobsManagePage + .getDataGridCell(testJobsFixture[0].job_name) + .scrollIntoView() + .should("be.visible"); + dataJobsManagePage + .getDataGridCell(testJobsFixture[1].job_name) + .scrollIntoView() + .should("be.visible"); + + // verify url does not contain search value + dataJobsManagePage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + }) + .should("deep.equal", { + pathSegment: "/manage/data-jobs", + queryParams: { + jobName: testJobsFixture[0].job_name.substring(0, 20), + deploymentStatus: "all", + }, + }); + }); + + it("refresh shows newly created job", () => { + dataJobsManagePage = DataJobsManagePage.navigateTo(); + + dataJobsManagePage.chooseQuickFilter(0); + + // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page + dataJobsManagePage.filterByJobName( + testJobsFixture[0].job_name.substring(0, 20), + ); + + dataJobsManagePage + .getDataGridCell(testJobsFixture[0].job_name) + .should("have.text", testJobsFixture[0].job_name); + + dataJobsManagePage + .getDataGridCell(additionalTestJobFixture.job_name) + .should("not.exist"); + + DataJobsManagePage.createAdditionalShortLivedTestJobsNoDeploy(); + + dataJobsManagePage.refreshDataGrid(); + + dataJobsManagePage + .getDataGridCell(additionalTestJobFixture.job_name) + .should("have.text", additionalTestJobFixture.job_name); + }); + + it("click on edit button opens new page with Job details", () => { + dataJobsManagePage = DataJobsManagePage.navigateWithSideMenu(); + + dataJobsManagePage.chooseQuickFilter(0); + + // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page + dataJobsManagePage.filterByJobName( + testJobsFixture[0].job_name.substring(0, 20), + ); + + dataJobsManagePage.openJobDetails( + testJobsFixture[0].team, + testJobsFixture[0].job_name, + ); + + const dataJobManageDetailsPage = DataJobManageDetailsPage.getPage(); + + dataJobManageDetailsPage + .getPageTitle() + .scrollIntoView() + .should("be.visible") + .invoke("text") + .invoke("trim") + .should("eq", `Data Job: ${testJobsFixture[0].job_name}`); + + dataJobManageDetailsPage + .getDescription() + .scrollIntoView() + .should("be.visible") + .should( + "contain.text", + testJobsFixture[0].description + .split(" ") + .slice(0, descriptionWordsBeforeTruncate) + .join(" "), + ); + + dataJobManageDetailsPage + .getSchedule() + .scrollIntoView() + .should("be.visible"); + + dataJobManageDetailsPage + .getDeploymentStatus("not-deployed") + .scrollIntoView() + .should("be.visible") + .should("have.text", "Not Deployed"); + }); + + it("quick filters", () => { + // Disable data job before test start + DataJobsManagePage.changeLongLivedJobStatus("failing", true) + .then(() => + DataJobsManagePage.changeShortLivedTestJobWithDeployStatus( + "v0", + false, + ), + ) + .then(() => { dataJobsManagePage = DataJobsManagePage.navigateTo(); + dataJobsManagePage.waitForClickThinkingTime(); dataJobsManagePage.chooseQuickFilter(0); - // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page - dataJobsManagePage.filterByJobName(shortLivedTestJobWithDeployFixture.job_name.substring(0, 20)); - - DataJobsManagePage.waitForShortLivedTestJobWithDeployExecutionToComplete('v0'); - - dataJobsManagePage.executeDataJob(shortLivedTestJobWithDeployFixture.job_name); - - // TODO better handling toast message. If tests are executed immediately it will return - // error 409 conflict and it will say that the job is already executing - dataJobsManagePage - .getToastTitle(10000) // Wait up to 10 seconds for Toast to show. - .should('exist') - .contains(/Data job Queued for execution|Failed, Data job is already executing/); - }); - - it(`execute now is disabled when Job doesn't have deployment`, () => { - dataJobsManagePage = DataJobsManagePage.navigateTo(); - - const jobName = testJobsFixture[0].job_name; - - dataJobsManagePage.chooseQuickFilter(0); + dataJobsManagePage.getDataGridStatusIcons().then(($icons) => { + for (const icon of Array.from($icons)) { + cy.wrap(icon) + .invoke("attr", "data-cy") + .should( + "match", + new RegExp( + "data-pipelines-job-(enabled|disabled|not-deployed)", + ), + ); + } + }); - // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page - dataJobsManagePage.filterByJobName(jobName.substring(0, 20)); + dataJobsManagePage.waitForClickThinkingTime(); + dataJobsManagePage.chooseQuickFilter(1); + + dataJobsManagePage.getDataGridStatusIcons().then(($icons) => { + for (const icon of Array.from($icons)) { + cy.wrap(icon).should( + "have.attr", + "data-cy", + "data-pipelines-job-enabled", + ); + } + }); - dataJobsManagePage.selectRow(jobName); + dataJobsManagePage.waitForClickThinkingTime(); + dataJobsManagePage.chooseQuickFilter(2); + + dataJobsManagePage.getDataGridStatusIcons().then(($icons) => { + for (const icon of Array.from($icons)) { + cy.wrap(icon).should( + "have.attr", + "data-cy", + "data-pipelines-job-disabled", + ); + } + }); dataJobsManagePage.waitForClickThinkingTime(); + dataJobsManagePage.chooseQuickFilter(3); + + dataJobsManagePage.getDataGridStatusIcons().then(($icons) => { + for (const icon of Array.from($icons)) { + cy.wrap(icon).should( + "have.attr", + "data-cy", + "data-pipelines-job-not-deployed", + ); + } + }); - dataJobsManagePage.getExecuteNowGridButton().should('be.disabled'); - }); + // Enable data job after job end + DataJobsManagePage.changeShortLivedTestJobWithDeployStatus( + "v0", + true, + ); + }); + }); + + it("filter description data jobs", () => { + dataJobsManagePage = DataJobsManagePage.navigateTo(); + + dataJobsManagePage.chooseQuickFilter(0); + + // show panel for show/hide columns + dataJobsManagePage.toggleColumnShowHidePanel(); + + // verify column is not checked in toggling menu + dataJobsManagePage + .getDataGridColumnShowHideOption("Description") + .should("exist") + .should("not.be.checked"); + + // verify header cell for column is not rendered + dataJobsManagePage + .getDataGridHeaderCell("Description") + .should("have.length", 0); + + // toggle column to render + dataJobsManagePage.checkColumnShowHideOption("Description"); + + // verify column is checked in toggling menu + dataJobsManagePage.getHeaderColumnDescriptionName().should("exist"); + + // filter by job description because + dataJobsManagePage.filterByJobDescription("Test description 1"); + + // verify url contains description value + dataJobsManagePage + .getCurrentUrl() + .should( + "match", + new RegExp( + `\\/manage\\/data-jobs\\?description=Test%20description%201&deploymentStatus=all$`, + ), + ); + + dataJobsManagePage + .getDataGridCell(testJobsFixture[0].job_name) + .scrollIntoView() + .should("be.visible"); + + dataJobsManagePage + .getDataGridCell(testJobsFixture[1].job_name) + .should("not.exist"); + }); + + it("perform filtering by description when URL contains description parameter", () => { + // navigate with search value in URL + dataJobsManagePage = DataJobsManagePage.navigateToDataJobUrl( + `/manage/data-jobs?deploymentEnabled=enabled&description=Test%20description%201`, + ); + + dataJobsManagePage.chooseQuickFilter(0); + dataJobsManagePage.waitForGridToLoad(null); + + // show panel for show/hide columns + dataJobsManagePage.toggleColumnShowHidePanel(); + + // toggle column to render + dataJobsManagePage.checkColumnShowHideOption("Description"); + + // verify url contains search value + dataJobsManagePage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + }) + .should("deep.equal", { + pathSegment: "/manage/data-jobs", + queryParams: { + deploymentStatus: "all", + description: "Test%20description%201", + }, + }); + + // verify 1 test row visible + dataJobsManagePage + .getDataGridCell(testJobsFixture[0].job_name) + .scrollIntoView() + .should("be.visible"); + + dataJobsManagePage + .getDataGridCell(testJobsFixture[1].job_name) + .should("not.exist"); + }); + + it("show/hide column when toggling from menu", () => { + dataJobsManagePage = DataJobsManagePage.navigateTo(); + + // show panel for show/hide columns + dataJobsManagePage.toggleColumnShowHidePanel(); + + // verify correct options are rendered + dataJobsManagePage + .getDataGridColumnShowHideOptionsValues() + .should("have.length", 11) + .invoke("join", ",") + .should( + "eq", + "Description,Deployment Status,Python Version,Last Execution Duration,Success rate,Next run (UTC),Last Deployed (UTC),Last Deployed By,Notifications,Source,Logs", + ); + + // verify column is not checked in toggling menu + dataJobsManagePage + .getDataGridColumnShowHideOption("Notifications") + .should("exist") + .should("not.be.checked"); + + // verify header cell for column is not rendered + dataJobsManagePage + .getDataGridHeaderCell("Notifications") + .should("have.length", 0); + + // toggle column to render + dataJobsManagePage.checkColumnShowHideOption("Notifications"); + + // verify column is checked in toggling menu + dataJobsManagePage + .getDataGridColumnShowHideOption("Notifications") + .should("exist") + .should("be.checked"); + + // verify header cell for column is rendered + dataJobsManagePage + .getDataGridHeaderCell("Notifications") + .should("have.length", 1); + + // toggle column to hide + dataJobsManagePage.uncheckColumnShowHideOption("Notifications"); + + // verify column is not checked in toggling menu + dataJobsManagePage + .getDataGridColumnShowHideOption("Notifications") + .should("exist") + .should("not.be.checked"); + + // verify header cell for column is not rendered + dataJobsManagePage + .getDataGridHeaderCell("Notifications") + .should("have.length", 0); + + // hide panel for show/hide columns + dataJobsManagePage.toggleColumnShowHidePanel(); + }); + + it("execute now", () => { + dataJobsManagePage = DataJobsManagePage.navigateTo(); + + dataJobsManagePage.chooseQuickFilter(0); + + // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page + dataJobsManagePage.filterByJobName( + shortLivedTestJobWithDeployFixture.job_name.substring(0, 20), + ); + + DataJobsManagePage.waitForShortLivedTestJobWithDeployExecutionToComplete( + "v0", + ); + + dataJobsManagePage.executeDataJob( + shortLivedTestJobWithDeployFixture.job_name, + ); + + // TODO better handling toast message. If tests are executed immediately it will return + // error 409 conflict and it will say that the job is already executing + dataJobsManagePage + .getToastTitle(10000) // Wait up to 10 seconds for Toast to show. + .should("exist") + .contains( + /Data job Queued for execution|Failed, Data job is already executing/, + ); + }); + + it(`execute now is disabled when Job doesn't have deployment`, () => { + dataJobsManagePage = DataJobsManagePage.navigateTo(); + + const jobName = testJobsFixture[0].job_name; + + dataJobsManagePage.chooseQuickFilter(0); + + // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page + dataJobsManagePage.filterByJobName(jobName.substring(0, 20)); + + dataJobsManagePage.selectRow(jobName); + + dataJobsManagePage.waitForClickThinkingTime(); + + dataJobsManagePage.getExecuteNowGridButton().should("be.disabled"); + }); }); -}); + }, +); diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/manage/data-jobs/details/data-job-details.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/manage/data-jobs/details/data-job-details.spec.js index e7a46c66f5..5ce59528ea 100644 --- a/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/manage/data-jobs/details/data-job-details.spec.js +++ b/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/manage/data-jobs/details/data-job-details.spec.js @@ -5,12 +5,15 @@ /// -import { compareDatesASC } from '../../../../../plugins/helpers/job-helpers.plugins'; +import { compareDatesASC } from "../../../../../plugins/helpers/job-helpers.plugins"; -import { DataJobsManagePage } from '../../../../../support/pages/manage/data-jobs/data-jobs.po'; -import { DataJobManageDetailsPage } from '../../../../../support/pages/manage/data-jobs/details/data-job-details.po'; +import { DataJobsManagePage } from "../../../../../support/pages/manage/data-jobs/data-jobs.po"; +import { DataJobManageDetailsPage } from "../../../../../support/pages/manage/data-jobs/details/data-job-details.po"; -describe('Data Job Manage Details Page', { tags: ['@dataPipelines', '@manageDataJobDetails', '@manage'] }, () => { +describe( + "Data Job Manage Details Page", + { tags: ["@dataPipelines", "@manageDataJobDetails", "@manage"] }, + () => { const descriptionWordsBeforeTruncate = 12; /** @@ -35,202 +38,300 @@ describe('Data Job Manage Details Page', { tags: ['@dataPipelines', '@manageData let longLivedFailingJobFixture; before(() => { - return DataJobManageDetailsPage.recordHarIfSupported() - .then(() => cy.clearLocalStorageSnapshot('data-job-manage-details')) - .then(() => DataJobManageDetailsPage.login()) - .then(() => cy.saveLocalStorage('data-job-manage-details')) - .then(() => DataJobManageDetailsPage.deleteShortLivedTestJobsNoDeploy(true)) - .then(() => DataJobManageDetailsPage.createLongLivedJobs('failing')) - .then(() => - DataJobManageDetailsPage.provideExecutionsForLongLivedJobs({ - job: 'failing' - }) - ) - .then(() => - DataJobManageDetailsPage.loadLongLivedFailingJobFixture().then((loadedTestJob) => { - longLivedFailingJobFixture = loadedTestJob; - - return cy.wrap({ - context: 'manage::1::data-job-details.spec::before()', - action: 'continue' - }); - }) - ) - .then(() => DataJobManageDetailsPage.createShortLivedTestJobWithDeploy('v1')) - .then(() => - DataJobManageDetailsPage.loadShortLivedTestJobFixtureWithDeploy('v1').then((loadedTestJob) => { - shortLivedTestJobWithDeployFixture = loadedTestJob; - - return cy.wrap({ - context: 'manage::2::data-job-details.spec::before()', - action: 'continue' - }); - }) - ) - .then(() => DataJobManageDetailsPage.createShortLivedTestJobsNoDeploy()) - .then(() => - DataJobManageDetailsPage.loadShortLivedTestJobsFixtureNoDeploy().then((fixtures) => { - testJobsFixture = [fixtures[0], fixtures[1]]; - additionalTestJobFixture = fixtures[2]; - - return cy.wrap({ - context: 'manage::3::data-job-details.spec::before()', - action: 'continue' - }); - }) - ); + return DataJobManageDetailsPage.recordHarIfSupported() + .then(() => cy.clearLocalStorageSnapshot("data-job-manage-details")) + .then(() => DataJobManageDetailsPage.login()) + .then(() => cy.saveLocalStorage("data-job-manage-details")) + .then(() => + DataJobManageDetailsPage.deleteShortLivedTestJobsNoDeploy(true), + ) + .then(() => DataJobManageDetailsPage.createLongLivedJobs("failing")) + .then(() => + DataJobManageDetailsPage.provideExecutionsForLongLivedJobs({ + job: "failing", + }), + ) + .then(() => + DataJobManageDetailsPage.loadLongLivedFailingJobFixture().then( + (loadedTestJob) => { + longLivedFailingJobFixture = loadedTestJob; + + return cy.wrap({ + context: "manage::1::data-job-details.spec::before()", + action: "continue", + }); + }, + ), + ) + .then(() => + DataJobManageDetailsPage.createShortLivedTestJobWithDeploy("v1"), + ) + .then(() => + DataJobManageDetailsPage.loadShortLivedTestJobFixtureWithDeploy( + "v1", + ).then((loadedTestJob) => { + shortLivedTestJobWithDeployFixture = loadedTestJob; + + return cy.wrap({ + context: "manage::2::data-job-details.spec::before()", + action: "continue", + }); + }), + ) + .then(() => DataJobManageDetailsPage.createShortLivedTestJobsNoDeploy()) + .then(() => + DataJobManageDetailsPage.loadShortLivedTestJobsFixtureNoDeploy().then( + (fixtures) => { + testJobsFixture = [fixtures[0], fixtures[1]]; + additionalTestJobFixture = fixtures[2]; + + return cy.wrap({ + context: "manage::3::data-job-details.spec::before()", + action: "continue", + }); + }, + ), + ); }); after(() => { - DataJobManageDetailsPage.deleteShortLivedTestJobWithDeploy('v1'); - DataJobManageDetailsPage.deleteShortLivedTestJobsNoDeploy(); + DataJobManageDetailsPage.deleteShortLivedTestJobWithDeploy("v1"); + DataJobManageDetailsPage.deleteShortLivedTestJobsNoDeploy(); - DataJobManageDetailsPage.saveHarIfSupported(); + DataJobManageDetailsPage.saveHarIfSupported(); }); beforeEach(() => { - cy.restoreLocalStorage('data-job-manage-details'); + cy.restoreLocalStorage("data-job-manage-details"); - DataJobManageDetailsPage.wireUserSession(); - DataJobManageDetailsPage.initInterceptors(); + DataJobManageDetailsPage.wireUserSession(); + DataJobManageDetailsPage.initInterceptors(); }); - describe('smoke', { tags: ['@smoke'] }, () => { - it('should verify will open job details', () => { - const dataJobsManagePage = DataJobsManagePage.navigateWithSideMenu(); - - dataJobsManagePage.chooseQuickFilter(0); - - // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page - dataJobsManagePage.filterByJobName(shortLivedTestJobWithDeployFixture.job_name.substring(0, 20)); - - dataJobsManagePage.openJobDetails(shortLivedTestJobWithDeployFixture.team, shortLivedTestJobWithDeployFixture.job_name); - - dataJobManageDetailsPage = DataJobManageDetailsPage.getPage(); - - dataJobManageDetailsPage.getPageTitle().invoke('text').invoke('trim').should('eq', `Data Job: ${shortLivedTestJobWithDeployFixture.job_name}`); - }); - - it('disable/enable job', () => { - dataJobManageDetailsPage = DataJobManageDetailsPage.navigateTo(shortLivedTestJobWithDeployFixture.team, shortLivedTestJobWithDeployFixture.job_name); - - //Toggle job status twice, enable to disable and vice versa. - dataJobManageDetailsPage.toggleJobStatus(shortLivedTestJobWithDeployFixture.job_name); - dataJobManageDetailsPage.toggleJobStatus(shortLivedTestJobWithDeployFixture.job_name); - }); - - it('execute now', () => { - dataJobManageDetailsPage = DataJobManageDetailsPage.navigateTo(shortLivedTestJobWithDeployFixture.team, shortLivedTestJobWithDeployFixture.job_name); - - DataJobManageDetailsPage.waitForShortLivedTestJobWithDeployExecutionToComplete('v1'); - - dataJobManageDetailsPage.executeNow(); - - dataJobManageDetailsPage - .getToastTitle(10000) - .should('exist') - .contains(/Data job Queued for execution|Failed, Data job is already executing/); - }); - - it('delete job', () => { - DataJobsManagePage.createAdditionalShortLivedTestJobsNoDeploy(); - - dataJobManageDetailsPage = DataJobManageDetailsPage.navigateTo(additionalTestJobFixture.team, additionalTestJobFixture.job_name); - - dataJobManageDetailsPage.openActionDropdown(); - - dataJobManageDetailsPage.deleteJob(); - - dataJobManageDetailsPage - .getToastTitle(20000) // Wait up to 20 seconds for the job to be deleted. - .should('contain.text', 'Data job delete completed'); - - const dataJobsManagePage = DataJobsManagePage.getPage(); - - dataJobsManagePage.waitForGridDataLoad(); - - dataJobsManagePage.chooseQuickFilter(0); - - dataJobsManagePage - .getDataGridCell(additionalTestJobFixture.job_name, 10000) // Wait up to 10 seconds for the jobs list to show. - .should('not.exist'); - }); + describe("smoke", { tags: ["@smoke"] }, () => { + it("should verify will open job details", () => { + const dataJobsManagePage = DataJobsManagePage.navigateWithSideMenu(); + + dataJobsManagePage.chooseQuickFilter(0); + + // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page + dataJobsManagePage.filterByJobName( + shortLivedTestJobWithDeployFixture.job_name.substring(0, 20), + ); + + dataJobsManagePage.openJobDetails( + shortLivedTestJobWithDeployFixture.team, + shortLivedTestJobWithDeployFixture.job_name, + ); + + dataJobManageDetailsPage = DataJobManageDetailsPage.getPage(); + + dataJobManageDetailsPage + .getPageTitle() + .invoke("text") + .invoke("trim") + .should( + "eq", + `Data Job: ${shortLivedTestJobWithDeployFixture.job_name}`, + ); + }); + + it("disable/enable job", () => { + dataJobManageDetailsPage = DataJobManageDetailsPage.navigateTo( + shortLivedTestJobWithDeployFixture.team, + shortLivedTestJobWithDeployFixture.job_name, + ); + + //Toggle job status twice, enable to disable and vice versa. + dataJobManageDetailsPage.toggleJobStatus( + shortLivedTestJobWithDeployFixture.job_name, + ); + dataJobManageDetailsPage.toggleJobStatus( + shortLivedTestJobWithDeployFixture.job_name, + ); + }); + + it("execute now", () => { + dataJobManageDetailsPage = DataJobManageDetailsPage.navigateTo( + shortLivedTestJobWithDeployFixture.team, + shortLivedTestJobWithDeployFixture.job_name, + ); + + DataJobManageDetailsPage.waitForShortLivedTestJobWithDeployExecutionToComplete( + "v1", + ); + + dataJobManageDetailsPage.executeNow(); + + dataJobManageDetailsPage + .getToastTitle(10000) + .should("exist") + .contains( + /Data job Queued for execution|Failed, Data job is already executing/, + ); + }); + + it("delete job", () => { + DataJobsManagePage.createAdditionalShortLivedTestJobsNoDeploy(); + + dataJobManageDetailsPage = DataJobManageDetailsPage.navigateTo( + additionalTestJobFixture.team, + additionalTestJobFixture.job_name, + ); + + dataJobManageDetailsPage.openActionDropdown(); + + dataJobManageDetailsPage.deleteJob(); + + dataJobManageDetailsPage + .getToastTitle(20000) // Wait up to 20 seconds for the job to be deleted. + .should("contain.text", "Data job delete completed"); + + const dataJobsManagePage = DataJobsManagePage.getPage(); + + dataJobsManagePage.waitForGridDataLoad(); + + dataJobsManagePage.chooseQuickFilter(0); + + dataJobsManagePage + .getDataGridCell(additionalTestJobFixture.job_name, 10000) // Wait up to 10 seconds for the jobs list to show. + .should("not.exist"); + }); }); - describe('extended', () => { - it('edit job description', () => { - let newDescription = 'Test if changing the description is working'; - - const dataJobsManagePage = DataJobsManagePage.navigateWithSideMenu(); - - dataJobsManagePage.chooseQuickFilter(0); + describe("extended", () => { + it("edit job description", () => { + let newDescription = "Test if changing the description is working"; + + const dataJobsManagePage = DataJobsManagePage.navigateWithSideMenu(); + + dataJobsManagePage.chooseQuickFilter(0); + + // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page + dataJobsManagePage.filterByJobName( + testJobsFixture[0].job_name.substring(0, 20), + ); + + dataJobsManagePage.openJobDetails( + testJobsFixture[0].team, + testJobsFixture[0].job_name, + ); + + dataJobManageDetailsPage = DataJobManageDetailsPage.getPage(); + + dataJobManageDetailsPage.openDescription(); + + dataJobManageDetailsPage.enterDescriptionDetails(newDescription); + + dataJobManageDetailsPage.saveDescription(); + + dataJobManageDetailsPage + .getDescription() + .scrollIntoView() + .should("be.visible") + .should( + "contain.text", + newDescription + .split(" ") + .slice(0, descriptionWordsBeforeTruncate) + .join(" "), + ); + }); + + it("download job key", () => { + dataJobManageDetailsPage = DataJobManageDetailsPage.navigateTo( + shortLivedTestJobWithDeployFixture.team, + shortLivedTestJobWithDeployFixture.job_name, + ); + + dataJobManageDetailsPage.openActionDropdown(); + + dataJobManageDetailsPage.downloadJobKey(); + + dataJobManageDetailsPage + .readFile( + "downloadsFolder", + `${shortLivedTestJobWithDeployFixture.job_name}.keytab`, + ) + .should("exist"); + }); + + it("executions timeline", () => { + const jobName = longLivedFailingJobFixture.job_name; + const teamName = longLivedFailingJobFixture.team; + + dataJobManageDetailsPage = DataJobManageDetailsPage.navigateTo( + teamName, + jobName, + ); + + dataJobManageDetailsPage + .waitForGetExecutionsReqInterceptor() + .then((interception) => { + const executionsResponse = []; + const content = interception?.response?.body?.data?.content; + + if (content) { + executionsResponse.push(...content); + } + + const lastExecutions = executionsResponse + .sort((left, right) => compareDatesASC(left, right)) + .slice( + executionsResponse.length > 5 + ? executionsResponse.length - 5 + : 0, + ); + + const lastExecutionsSize = lastExecutions.length; + const lastExecution = lastExecutions[lastExecutionsSize - 1]; + const timelineSize = lastExecutionsSize + 1; // +1 next execution - // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page - dataJobsManagePage.filterByJobName(testJobsFixture[0].job_name.substring(0, 20)); - - dataJobsManagePage.openJobDetails(testJobsFixture[0].team, testJobsFixture[0].job_name); - - dataJobManageDetailsPage = DataJobManageDetailsPage.getPage(); - - dataJobManageDetailsPage.openDescription(); - - dataJobManageDetailsPage.enterDescriptionDetails(newDescription); - - dataJobManageDetailsPage.saveDescription(); - - dataJobManageDetailsPage.getDescription().scrollIntoView().should('be.visible').should('contain.text', newDescription.split(' ').slice(0, descriptionWordsBeforeTruncate).join(' ')); - }); - - it('download job key', () => { - dataJobManageDetailsPage = DataJobManageDetailsPage.navigateTo(shortLivedTestJobWithDeployFixture.team, shortLivedTestJobWithDeployFixture.job_name); - - dataJobManageDetailsPage.openActionDropdown(); - - dataJobManageDetailsPage.downloadJobKey(); - - dataJobManageDetailsPage.readFile('downloadsFolder', `${shortLivedTestJobWithDeployFixture.job_name}.keytab`).should('exist'); - }); - - it('executions timeline', () => { - const jobName = longLivedFailingJobFixture.job_name; - const teamName = longLivedFailingJobFixture.team; - - dataJobManageDetailsPage = DataJobManageDetailsPage.navigateTo(teamName, jobName); - - dataJobManageDetailsPage.waitForGetExecutionsReqInterceptor().then((interception) => { - const executionsResponse = []; - const content = interception?.response?.body?.data?.content; - - if (content) { - executionsResponse.push(...content); - } - - const lastExecutions = executionsResponse.sort((left, right) => compareDatesASC(left, right)).slice(executionsResponse.length > 5 ? executionsResponse.length - 5 : 0); - - const lastExecutionsSize = lastExecutions.length; - const lastExecution = lastExecutions[lastExecutionsSize - 1]; - const timelineSize = lastExecutionsSize + 1; // +1 next execution - - dataJobManageDetailsPage.getExecutionsSteps().should('have.length', timelineSize); - - for (const execution of lastExecutions) { - const executionTimelineSelector = `[data-cy=${execution.id}]`; - - const executionStartedTime = dataJobManageDetailsPage.formatDateTimeFromISOToExecutionsTimeline(execution.startTime); - dataJobManageDetailsPage.getExecutionStepStartedTile(executionTimelineSelector).invoke('trim').should('eq', `Started ${executionStartedTime}`); - - if (execution?.type?.toLowerCase() === 'manual') { - dataJobManageDetailsPage.getExecutionStepManualTriggerer(executionTimelineSelector).should('be.visible'); - } - - if (execution?.status?.toLowerCase() !== 'running' && execution?.status?.toLowerCase() !== 'submitted') { - dataJobManageDetailsPage.getExecutionStepStatusIcon(executionTimelineSelector, execution.status).should('exist'); - - const executionEndTime = dataJobManageDetailsPage.formatDateTimeFromISOToExecutionsTimeline(execution.endTime); - dataJobManageDetailsPage.getExecutionStepEndedTile(executionTimelineSelector).invoke('trim').should('eq', `Ended ${executionEndTime}`); - } - } - }); - }); + dataJobManageDetailsPage + .getExecutionsSteps() + .should("have.length", timelineSize); + + for (const execution of lastExecutions) { + const executionTimelineSelector = `[data-cy=${execution.id}]`; + + const executionStartedTime = + dataJobManageDetailsPage.formatDateTimeFromISOToExecutionsTimeline( + execution.startTime, + ); + dataJobManageDetailsPage + .getExecutionStepStartedTile(executionTimelineSelector) + .invoke("trim") + .should("eq", `Started ${executionStartedTime}`); + + if (execution?.type?.toLowerCase() === "manual") { + dataJobManageDetailsPage + .getExecutionStepManualTriggerer(executionTimelineSelector) + .should("be.visible"); + } + + if ( + execution?.status?.toLowerCase() !== "running" && + execution?.status?.toLowerCase() !== "submitted" + ) { + dataJobManageDetailsPage + .getExecutionStepStatusIcon( + executionTimelineSelector, + execution.status, + ) + .should("exist"); + + const executionEndTime = + dataJobManageDetailsPage.formatDateTimeFromISOToExecutionsTimeline( + execution.endTime, + ); + dataJobManageDetailsPage + .getExecutionStepEndedTile(executionTimelineSelector) + .invoke("trim") + .should("eq", `Ended ${executionEndTime}`); + } + } + }); + }); }); -}); + }, +); diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/manage/data-jobs/executions/data-job-executions.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/manage/data-jobs/executions/data-job-executions.spec.js index 9bc2f3ad3e..fe711df78a 100644 --- a/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/manage/data-jobs/executions/data-job-executions.spec.js +++ b/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/manage/data-jobs/executions/data-job-executions.spec.js @@ -5,10 +5,13 @@ /// -import { DataJobsManagePage } from '../../../../../support/pages/manage/data-jobs/data-jobs.po'; -import { DataJobManageExecutionsPage } from '../../../../../support/pages/manage/data-jobs/executions/data-job-executions.po'; +import { DataJobsManagePage } from "../../../../../support/pages/manage/data-jobs/data-jobs.po"; +import { DataJobManageExecutionsPage } from "../../../../../support/pages/manage/data-jobs/executions/data-job-executions.po"; -describe('Data Job Manage Executions Page', { tags: ['@dataPipelines', '@manageDataJobExecutions', '@manage'] }, () => { +describe( + "Data Job Manage Executions Page", + { tags: ["@dataPipelines", "@manageDataJobExecutions", "@manage"] }, + () => { /** * @type {{job_name:string; description:string; team:string; config:{db_default_type:string; contacts:{}; schedule:{schedule_cron:string}; generate_keytab:boolean; enable_execution_notifications:boolean}}} */ @@ -19,1664 +22,1985 @@ describe('Data Job Manage Executions Page', { tags: ['@dataPipelines', '@manageD let longLivedFailingJobFixture; before(() => { - return DataJobManageExecutionsPage.recordHarIfSupported() - .then(() => cy.clearLocalStorageSnapshot('data-job-manage-executions')) - .then(() => DataJobManageExecutionsPage.login()) - .then(() => cy.saveLocalStorage('data-job-manage-executions')) - .then(() => DataJobManageExecutionsPage.createLongLivedJobs('failing')) - .then(() => DataJobManageExecutionsPage.provideExecutionsForLongLivedJobs({ job: 'failing', executions: 3 })) - .then(() => - DataJobManageExecutionsPage.loadLongLivedFailingJobFixture().then((loadedTestJob) => { - longLivedFailingJobFixture = loadedTestJob; - - return cy.wrap({ - context: 'manage::1::data-job-executions.spec::before()', - action: 'continue' - }); - }) - ) - .then(() => DataJobManageExecutionsPage.createShortLivedTestJobWithDeploy('v2')) - .then(() => DataJobManageExecutionsPage.provideExecutionsForShortLivedTestJobWithDeploy('v2')) - .then(() => - DataJobManageExecutionsPage.loadShortLivedTestJobFixtureWithDeploy('v2').then((loadedTestJob) => { - shortLivedTestJobWithDeployFixture = loadedTestJob; - - return cy.wrap({ - context: 'manage::2::data-job-executions.spec::before()', - action: 'continue' - }); - }) - ); + return DataJobManageExecutionsPage.recordHarIfSupported() + .then(() => cy.clearLocalStorageSnapshot("data-job-manage-executions")) + .then(() => DataJobManageExecutionsPage.login()) + .then(() => cy.saveLocalStorage("data-job-manage-executions")) + .then(() => DataJobManageExecutionsPage.createLongLivedJobs("failing")) + .then(() => + DataJobManageExecutionsPage.provideExecutionsForLongLivedJobs({ + job: "failing", + executions: 3, + }), + ) + .then(() => + DataJobManageExecutionsPage.loadLongLivedFailingJobFixture().then( + (loadedTestJob) => { + longLivedFailingJobFixture = loadedTestJob; + + return cy.wrap({ + context: "manage::1::data-job-executions.spec::before()", + action: "continue", + }); + }, + ), + ) + .then(() => + DataJobManageExecutionsPage.createShortLivedTestJobWithDeploy("v2"), + ) + .then(() => + DataJobManageExecutionsPage.provideExecutionsForShortLivedTestJobWithDeploy( + "v2", + ), + ) + .then(() => + DataJobManageExecutionsPage.loadShortLivedTestJobFixtureWithDeploy( + "v2", + ).then((loadedTestJob) => { + shortLivedTestJobWithDeployFixture = loadedTestJob; + + return cy.wrap({ + context: "manage::2::data-job-executions.spec::before()", + action: "continue", + }); + }), + ); }); after(() => { - DataJobManageExecutionsPage.deleteShortLivedTestJobWithDeploy('v2'); + DataJobManageExecutionsPage.deleteShortLivedTestJobWithDeploy("v2"); - DataJobManageExecutionsPage.saveHarIfSupported(); + DataJobManageExecutionsPage.saveHarIfSupported(); }); beforeEach(() => { - cy.restoreLocalStorage('data-job-manage-executions'); + cy.restoreLocalStorage("data-job-manage-executions"); - DataJobManageExecutionsPage.wireUserSession(); - DataJobManageExecutionsPage.initInterceptors(); + DataJobManageExecutionsPage.wireUserSession(); + DataJobManageExecutionsPage.initInterceptors(); }); - describe('smoke', { tags: ['@smoke'] }, () => { - it(`should open Details and verify Executions tab is displayed and navigates`, () => { - cy.log('Fixture for name: ' + longLivedFailingJobFixture.job_name); + describe("smoke", { tags: ["@smoke"] }, () => { + it(`should open Details and verify Executions tab is displayed and navigates`, () => { + cy.log("Fixture for name: " + longLivedFailingJobFixture.job_name); - const dataJobsManagePage = DataJobsManagePage.navigateWithSideMenu(); + const dataJobsManagePage = DataJobsManagePage.navigateWithSideMenu(); - dataJobsManagePage.chooseQuickFilter(0); + dataJobsManagePage.chooseQuickFilter(0); - // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page - dataJobsManagePage.filterByJobName(longLivedFailingJobFixture.job_name.substring(0, 20)); + // filter by job name substring because there are a lot of jobs, and it could potentially be on second/third page + dataJobsManagePage.filterByJobName( + longLivedFailingJobFixture.job_name.substring(0, 20), + ); - dataJobsManagePage.openJobDetails(longLivedFailingJobFixture.team, longLivedFailingJobFixture.job_name); + dataJobsManagePage.openJobDetails( + longLivedFailingJobFixture.team, + longLivedFailingJobFixture.job_name, + ); - const dataJobManageExecutionsPage = DataJobManageExecutionsPage.getPage(); + const dataJobManageExecutionsPage = + DataJobManageExecutionsPage.getPage(); - dataJobManageExecutionsPage.getDetailsTab().should('exist').should('have.class', 'active'); + dataJobManageExecutionsPage + .getDetailsTab() + .should("exist") + .should("have.class", "active"); - dataJobManageExecutionsPage.getExecutionsTab().should('exist').should('not.have.class', 'active'); + dataJobManageExecutionsPage + .getExecutionsTab() + .should("exist") + .should("not.have.class", "active"); - dataJobManageExecutionsPage.openExecutionsTab(); + dataJobManageExecutionsPage.openExecutionsTab(); - const dataJobExecutionsPage = DataJobManageExecutionsPage.getPage(); + const dataJobExecutionsPage = DataJobManageExecutionsPage.getPage(); - dataJobExecutionsPage.getDetailsTab().should('exist').should('not.have.class', 'active'); + dataJobExecutionsPage + .getDetailsTab() + .should("exist") + .should("not.have.class", "active"); - dataJobExecutionsPage.getExecutionsTab().should('exist').should('have.class', 'active'); + dataJobExecutionsPage + .getExecutionsTab() + .should("exist") + .should("have.class", "active"); - dataJobExecutionsPage.getDataGrid().should('exist'); - }); + dataJobExecutionsPage.getDataGrid().should("exist"); + }); + + it("should verify elements are rendered in DOM", () => { + const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo( + longLivedFailingJobFixture.team, + longLivedFailingJobFixture.job_name, + ); + + dataJobExecutionsPage + .getPageTitle() + .scrollIntoView() + .should("be.visible") + .should("contains.text", longLivedFailingJobFixture.job_name); + + dataJobExecutionsPage + .getDetailsTab() + .should("exist") + .should("not.have.class", "active"); + + dataJobExecutionsPage + .getExecutionsTab() + .should("exist") + .should("have.class", "active"); + + dataJobExecutionsPage.getExecuteOrCancelButton().should("exist"); + + dataJobExecutionsPage.getActionDropdownBtn().should("exist"); + + dataJobExecutionsPage.openActionDropdown(); + + dataJobExecutionsPage.getDeleteJobBtn().should("exist"); - it('should verify elements are rendered in DOM', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo(longLivedFailingJobFixture.team, longLivedFailingJobFixture.job_name); + dataJobExecutionsPage.clickOnContentContainer(); - dataJobExecutionsPage.getPageTitle().scrollIntoView().should('be.visible').should('contains.text', longLivedFailingJobFixture.job_name); + dataJobExecutionsPage.waitForSmartDelay(); - dataJobExecutionsPage.getDetailsTab().should('exist').should('not.have.class', 'active'); + dataJobExecutionsPage.getTimePeriod().should("exist"); - dataJobExecutionsPage.getExecutionsTab().should('exist').should('have.class', 'active'); + dataJobExecutionsPage.getStatusChart().should("exist"); - dataJobExecutionsPage.getExecuteOrCancelButton().should('exist'); + dataJobExecutionsPage.getDurationChart().should("exist"); - dataJobExecutionsPage.getActionDropdownBtn().should('exist'); + dataJobExecutionsPage.getDataGrid().should("exist"); - dataJobExecutionsPage.openActionDropdown(); + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + }); - dataJobExecutionsPage.getDeleteJobBtn().should('exist'); + it("should verify start then cancel execution works", () => { + const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo( + shortLivedTestJobWithDeployFixture.team, + shortLivedTestJobWithDeployFixture.job_name, + ); - dataJobExecutionsPage.clickOnContentContainer(); + DataJobManageExecutionsPage.waitForDataJobToNotHaveRunningExecution(); - dataJobExecutionsPage.waitForSmartDelay(); + dataJobExecutionsPage + .getExecutionsTab() + .should("exist") + .should("have.class", "active"); - dataJobExecutionsPage.getTimePeriod().should('exist'); + // Execute data job and check if the execution status after that is Running or Submitted + dataJobExecutionsPage.executeNow(true); + dataJobExecutionsPage + .getExecutionStatus() + .first() + .contains(/Running|Submitted/); - dataJobExecutionsPage.getStatusChart().should('exist'); + // Cancel data job execution and check if the status after that is Cancelled + dataJobExecutionsPage.cancelExecution(true); + dataJobExecutionsPage + .getExecutionStatus() + .first() + .should("contains.text", "Canceled"); + }); + }); - dataJobExecutionsPage.getDurationChart().should('exist'); + describe("extended", () => { + it("should verify on URL navigate to Executions will open the page", () => { + const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo( + longLivedFailingJobFixture.team, + longLivedFailingJobFixture.job_name, + ); + + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + }, + }); + + dataJobExecutionsPage + .getDetailsTab() + .should("exist") + .should("not.have.class", "active"); + + dataJobExecutionsPage + .getExecutionsTab() + .should("exist") + .should("have.class", "active"); + + dataJobExecutionsPage.getDataGrid().should("exist"); + }); + + it("should verify time period is in correct format", () => { + const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo( + longLivedFailingJobFixture.team, + longLivedFailingJobFixture.job_name, + ); + + dataJobExecutionsPage + .getTimePeriod() + .invoke("text") + .invoke("trim") + .should( + "match", + new RegExp( + `^\\w+\\s\\d+,\\s\\d+,\\s\\d+:\\d+:\\d+\\s(AM|PM)\\sto\\s\\w+\\s\\d+,\\s\\d+,\\s\\d+:\\d+:\\d+\\s(AM|PM)$`, + ), + ); + }); + + it("should verify refresh button will show spinner and then load data", () => { + const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo( + longLivedFailingJobFixture.team, + longLivedFailingJobFixture.job_name, + ); + + // verify before + dataJobExecutionsPage.getDataGrid().should("exist"); + dataJobExecutionsPage.getExecLoadingSpinner().should("not.exist"); + dataJobExecutionsPage.getDataGridSpinner().should("not.exist"); + + // trigger refresh + dataJobExecutionsPage.waitForActionThinkingTime(); + dataJobExecutionsPage.refreshExecData(); + + // verify while refreshing + dataJobExecutionsPage.getDataGrid().should("exist"); + dataJobExecutionsPage.getExecLoadingSpinner().should("exist"); + dataJobExecutionsPage.getDataGridSpinner().should("exist"); + + // wait loading data to finish + dataJobExecutionsPage.waitForGridDataLoad(); + + // verify after refresh + dataJobExecutionsPage.getDataGrid().should("exist"); + dataJobExecutionsPage.getExecLoadingSpinner().should("not.exist"); + dataJobExecutionsPage.getDataGridSpinner().should("not.exist"); + }); + + describe("DataGrid Filters", () => { + it("should verify status filter options are rendered and behaves correctly", () => { + const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo( + longLivedFailingJobFixture.team, + longLivedFailingJobFixture.job_name, + ); + + // open status filter + dataJobExecutionsPage.openStatusFilter(); + + // verify exist + dataJobExecutionsPage.getDataGridPopupFilter().should("exist"); + dataJobExecutionsPage + .getDataGridExecStatusFilters() + .then((elements) => Array.from(elements).map((el) => el.innerText)) + .should("deep.equal", [ + "Success", + "Platform Error", + "User Error", + "Running", + "Submitted", + "Skipped", + "Canceled", + ]); + + // close status filter + dataJobExecutionsPage.closeFilter(); + + // verify doesn't exist + dataJobExecutionsPage.getDataGridPopupFilter().should("not.exist"); + + // verify current URL has appended default sort by startTime descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + }, + }); - dataJobExecutionsPage.getDataGrid().should('exist'); + // open status filter and select all available values and close the filter + dataJobExecutionsPage.openStatusFilter(); + dataJobExecutionsPage.filterByStatus("user_error"); + dataJobExecutionsPage.filterByStatus("platform_error"); + dataJobExecutionsPage.filterByStatus("succeeded"); + dataJobExecutionsPage.filterByStatus("running"); + dataJobExecutionsPage.filterByStatus("skipped"); + dataJobExecutionsPage.filterByStatus("submitted"); + dataJobExecutionsPage.filterByStatus("cancelled"); + dataJobExecutionsPage.closeFilter(); + + // verify current URL has appended all execution statuses and sort by status ascending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + filter: + '{"status":"user_error,platform_error,succeeded,running,skipped,submitted,cancelled"}', + }, + }); - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); + // open status filter and unselect statuses: platform_error, skipped, submitted, cancelled and close the filter + dataJobExecutionsPage.openStatusFilter(); + dataJobExecutionsPage.clearFilterByStatus("platform_error"); + dataJobExecutionsPage.clearFilterByStatus("skipped"); + dataJobExecutionsPage.clearFilterByStatus("submitted"); + dataJobExecutionsPage.clearFilterByStatus("cancelled"); + dataJobExecutionsPage.closeFilter(); + + // verify current URL has appended execution statuses user_error, succeeded, running and sort by status ascending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + filter: '{"status":"user_error,succeeded,running"}', + }, + }); + + // open status filter and unselect left statuses and close the filter + dataJobExecutionsPage.openStatusFilter(); + dataJobExecutionsPage.clearFilterByStatus("user_error"); + dataJobExecutionsPage.clearFilterByStatus("succeeded"); + dataJobExecutionsPage.clearFilterByStatus("running"); + dataJobExecutionsPage.closeFilter(); + + // verify current URL has appended only sort by status descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + }, + }); }); - it('should verify start then cancel execution works', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo(shortLivedTestJobWithDeployFixture.team, shortLivedTestJobWithDeployFixture.job_name); + it("should verify type filter options are rendered and behaves correctly", () => { + const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo( + longLivedFailingJobFixture.team, + longLivedFailingJobFixture.job_name, + ); + + // open type filter + dataJobExecutionsPage.openTypeFilter(); + + // verify exist + dataJobExecutionsPage.getDataGridPopupFilter().should("exist"); + dataJobExecutionsPage + .getDataGridExecTypeFilterLabel("manual") + .should("exist") + .should("have.text", "Manual"); + dataJobExecutionsPage + .getDataGridExecTypeFilterLabel("scheduled") + .should("exist") + .should("have.text", "Scheduled"); + + // close type filter + dataJobExecutionsPage.closeFilter(); + + // verify doesn't exist + dataJobExecutionsPage.getDataGridPopupFilter().should("not.exist"); + + // verify current URL has appended default sort by startTime descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + }, + }); - DataJobManageExecutionsPage.waitForDataJobToNotHaveRunningExecution(); + // open type filter and select manual execution trigger and close + dataJobExecutionsPage.openTypeFilter(); + dataJobExecutionsPage.filterByType("manual"); + dataJobExecutionsPage.closeFilter(); + + // verify cell elements + dataJobExecutionsPage + .getDataGridExecTypeContainers("scheduled") + .should("have.length", 0); + + // verify current URL has appended manual execution trigger and sort by type ascending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + filter: '{"type":"manual"}', + }, + }); + + // open type filter and select scheduled execution trigger and close + dataJobExecutionsPage.openTypeFilter(); + dataJobExecutionsPage.filterByType("scheduled"); + dataJobExecutionsPage.closeFilter(); + + // verify cell elements + dataJobExecutionsPage + .getDataGridExecTypeContainers("manual") + .should("have.length.gte", 0); + dataJobExecutionsPage + .getDataGridExecTypeContainers("scheduled") + .should("have.length.gte", 0); + + // verify current URL has appended manual and scheduled execution trigger and sort by type ascending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + filter: '{"type":"manual,scheduled"}', + }, + }); + + // open type filter and unselect scheduled and manual execution triggers and close filter + dataJobExecutionsPage.openTypeFilter(); + dataJobExecutionsPage.clearFilterByType("scheduled"); + dataJobExecutionsPage.clearFilterByType("manual"); + dataJobExecutionsPage.closeFilter(); + + // verify cell elements + dataJobExecutionsPage + .getDataGridExecTypeContainers("manual") + .should("have.length.gte", 0); + dataJobExecutionsPage + .getDataGridExecTypeContainers("scheduled") + .should("have.length.gte", 0); + + // verify current URL has appended only sort by type descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + }, + }); + }); - dataJobExecutionsPage.getExecutionsTab().should('exist').should('have.class', 'active'); + it("should verify duration filter render input and filters correctly", () => { + const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo( + longLivedFailingJobFixture.team, + longLivedFailingJobFixture.job_name, + ); + + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + // verify current URL has appended default sort by startTime descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + }, + }); - // Execute data job and check if the execution status after that is Running or Submitted - dataJobExecutionsPage.executeNow(true); - dataJobExecutionsPage - .getExecutionStatus() - .first() - .contains(/Running|Submitted/); + // open duration filter + dataJobExecutionsPage.openDurationFilter(); + + // verify exist fill with data na verify again + dataJobExecutionsPage.getDataGridPopupFilter().should("exist"); + dataJobExecutionsPage.typeToTextFilterInput("100s"); + dataJobExecutionsPage.getDataGridRows().should("have.length", 0); + + // verify current URL has appended default sort by startTime descending and new value for id xyxyxy + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + filter: '{"duration":"100s"}', + }, + }); - // Cancel data job execution and check if the status after that is Cancelled - dataJobExecutionsPage.cancelExecution(true); - dataJobExecutionsPage.getExecutionStatus().first().should('contains.text', 'Canceled'); + // clear filter and verify + dataJobExecutionsPage.clearTextFilterInput(); + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + // close id filter + dataJobExecutionsPage.closeFilter(); + + // verify doesn't exist + dataJobExecutionsPage.getDataGridPopupFilter().should("not.exist"); + + // verify current URL has appended default sort by startTime descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + }, + }); }); - }); - describe('extended', () => { - it('should verify on URL navigate to Executions will open the page', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo(longLivedFailingJobFixture.team, longLivedFailingJobFixture.job_name); + it("should verify execution start time filter render input and filters correctly", () => { + const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo( + longLivedFailingJobFixture.team, + longLivedFailingJobFixture.job_name, + ); + + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + // verify current URL has appended default sort by startTime descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + }, + }); + + // open exec start time filter + dataJobExecutionsPage.openExecStartFilter(); + + // verify exist fill with data na verify again + dataJobExecutionsPage.getDataGridPopupFilter().should("exist"); + dataJobExecutionsPage + .generateExecStartFilterValue() + .then((filterValue) => { + // type generated filter value + dataJobExecutionsPage.typeToTextFilterInput(filterValue); + + // verify only cells that match the value are rendered + dataJobExecutionsPage + .getDataGridExecStartCells() + .then(($cells) => { + const foundCells = Array.from($cells).map((cell) => + new RegExp(`${filterValue}$`).test( + `${cell.innerText?.trim()}`, + ), + ); + + return foundCells.length; + }) + .should("gt", 0); - dataJobExecutionsPage + // verify current URL has appended default sort by startTime descending and new value for startTime ${filterValue} + dataJobExecutionsPage .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}' - } + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + filter: `{"startTime":"${filterValue}"}`, + }, }); + }); - dataJobExecutionsPage.getDetailsTab().should('exist').should('not.have.class', 'active'); + // clear filter and verify + dataJobExecutionsPage.clearTextFilterInput(); + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + // close start time filter + dataJobExecutionsPage.closeFilter(); + + // verify doesn't exist + dataJobExecutionsPage.getDataGridPopupFilter().should("not.exist"); + + // verify current URL has appended default sort by startTime descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + }, + }); + }); - dataJobExecutionsPage.getExecutionsTab().should('exist').should('have.class', 'active'); + it("should verify execution end time filter render input and filters correctly", () => { + const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo( + longLivedFailingJobFixture.team, + longLivedFailingJobFixture.job_name, + ); + + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + // verify current URL has appended default sort by startTime descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + }, + }); - dataJobExecutionsPage.getDataGrid().should('exist'); - }); + // open exec end time filter + dataJobExecutionsPage.openExecEndFilter(); + + // verify exist fill with data na verify again + dataJobExecutionsPage.getDataGridPopupFilter().should("exist"); + dataJobExecutionsPage + .generateExecEndFilterValue() + .then((filterValue) => { + // type generated filter value + dataJobExecutionsPage.typeToTextFilterInput(filterValue); + + // verify only cells that match the value are rendered + dataJobExecutionsPage + .getDataGridExecEndCells() + .then(($cells) => { + const foundCells = Array.from($cells).map((cell) => + new RegExp(`${filterValue}$`).test( + `${cell.innerText?.trim()}`, + ), + ); + + return foundCells.length; + }) + .should("gt", 0); - it('should verify time period is in correct format', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo(longLivedFailingJobFixture.team, longLivedFailingJobFixture.job_name); + // verify current URL has appended default sort by startTime descending and new value for endTime ${filterValue} + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + filter: `{"endTime":"${filterValue}"}`, + }, + }); + }); - dataJobExecutionsPage.getTimePeriod().invoke('text').invoke('trim').should('match', new RegExp(`^\\w+\\s\\d+,\\s\\d+,\\s\\d+:\\d+:\\d+\\s(AM|PM)\\sto\\s\\w+\\s\\d+,\\s\\d+,\\s\\d+:\\d+:\\d+\\s(AM|PM)$`)); + // clear filter and verify + dataJobExecutionsPage.clearTextFilterInput(); + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + // close start time filter + dataJobExecutionsPage.closeFilter(); + + // verify doesn't exist + dataJobExecutionsPage.getDataGridPopupFilter().should("not.exist"); + + // verify current URL has appended default sort by startTime descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + }, + }); }); - it('should verify refresh button will show spinner and then load data', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo(longLivedFailingJobFixture.team, longLivedFailingJobFixture.job_name); + it("should verify execution id filter render input and filters correctly", () => { + const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo( + longLivedFailingJobFixture.team, + longLivedFailingJobFixture.job_name, + ); + + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + // verify current URL has appended default sort by startTime descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + }, + }); - // verify before - dataJobExecutionsPage.getDataGrid().should('exist'); - dataJobExecutionsPage.getExecLoadingSpinner().should('not.exist'); - dataJobExecutionsPage.getDataGridSpinner().should('not.exist'); + // open exec ID filter + dataJobExecutionsPage.openIDFilter(); + + // verify exist fill with data na verify again + dataJobExecutionsPage.getDataGridPopupFilter().should("exist"); + // type job name as filter value + dataJobExecutionsPage.typeToTextFilterInput( + longLivedFailingJobFixture.job_name, + ); + + // verify only cells that match the value are rendered + dataJobExecutionsPage + .getDataGridExecIDCells() + .then(($cells) => { + const foundCells = Array.from($cells).map((cell) => + new RegExp(`^${longLivedFailingJobFixture.job_name}-\d+$`).test( + `${cell.innerText?.trim()}`, + ), + ); + + return foundCells.length; + }) + .should("gt", 0); + + // verify current URL has appended default sort by startTime descending and new value for endTime ${filterValue} + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + filter: `{"id":"${longLivedFailingJobFixture.job_name}"}`, + }, + }); - // trigger refresh - dataJobExecutionsPage.waitForActionThinkingTime(); - dataJobExecutionsPage.refreshExecData(); + // clear filter and type random text then verify + dataJobExecutionsPage.clearTextFilterInput(); + dataJobExecutionsPage.typeToTextFilterInput("xyxyxy"); + dataJobExecutionsPage.getDataGridRows().should("have.length", 0); + + // verify current URL has appended default sort by startTime descending and new value for id xyxyxy + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + filter: '{"id":"xyxyxy"}', + }, + }); + + // clear filter and verify + dataJobExecutionsPage.clearTextFilterInput(); + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + // close start time filter + dataJobExecutionsPage.closeFilter(); + + // verify doesn't exist + dataJobExecutionsPage.getDataGridPopupFilter().should("not.exist"); + + // verify current URL has appended default sort by startTime descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + }, + }); + }); - // verify while refreshing - dataJobExecutionsPage.getDataGrid().should('exist'); - dataJobExecutionsPage.getExecLoadingSpinner().should('exist'); - dataJobExecutionsPage.getDataGridSpinner().should('exist'); + it("should verify version filter render input and filters correctly", () => { + const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo( + longLivedFailingJobFixture.team, + longLivedFailingJobFixture.job_name, + ); + + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + // verify current URL has appended default sort by startTime descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + }, + }); - // wait loading data to finish - dataJobExecutionsPage.waitForGridDataLoad(); + // open version filter + dataJobExecutionsPage.openVersionFilter(); + + // verify exist fill with data na verify again + dataJobExecutionsPage.getDataGridPopupFilter().should("exist"); + dataJobExecutionsPage.typeToTextFilterInput("xyxyxy"); + dataJobExecutionsPage.getDataGridRows().should("have.length", 0); + + // verify current URL has appended default sort by startTime descending and new value for jobVersion xyxyxy + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + filter: '{"jobVersion":"xyxyxy"}', + }, + }); - // verify after refresh - dataJobExecutionsPage.getDataGrid().should('exist'); - dataJobExecutionsPage.getExecLoadingSpinner().should('not.exist'); - dataJobExecutionsPage.getDataGridSpinner().should('not.exist'); + // clear filter and verify + dataJobExecutionsPage.clearTextFilterInput(); + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + // close version filter + dataJobExecutionsPage.closeFilter(); + + // verify doesn't exist + dataJobExecutionsPage.getDataGridPopupFilter().should("not.exist"); + + // verify current URL has appended default sort by startTime descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + }, + }); }); + }); + + describe("DataGrid Sort", () => { + it("should verify status sort behaves correctly", () => { + const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo( + longLivedFailingJobFixture.team, + longLivedFailingJobFixture.job_name, + ); + + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + dataJobExecutionsPage + .getDataGridExecStatusHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "none"); + + // verify current URL has appended default sort by startTime descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + }, + }); - describe('DataGrid Filters', () => { - it('should verify status filter options are rendered and behaves correctly', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo(longLivedFailingJobFixture.team, longLivedFailingJobFixture.job_name); - - // open status filter - dataJobExecutionsPage.openStatusFilter(); - - // verify exist - dataJobExecutionsPage.getDataGridPopupFilter().should('exist'); - dataJobExecutionsPage - .getDataGridExecStatusFilters() - .then((elements) => Array.from(elements).map((el) => el.innerText)) - .should('deep.equal', ['Success', 'Platform Error', 'User Error', 'Running', 'Submitted', 'Skipped', 'Canceled']); - - // close status filter - dataJobExecutionsPage.closeFilter(); - - // verify doesn't exist - dataJobExecutionsPage.getDataGridPopupFilter().should('not.exist'); - - // verify current URL has appended default sort by startTime descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}' - } - }); - - // open status filter and select all available values and close the filter - dataJobExecutionsPage.openStatusFilter(); - dataJobExecutionsPage.filterByStatus('user_error'); - dataJobExecutionsPage.filterByStatus('platform_error'); - dataJobExecutionsPage.filterByStatus('succeeded'); - dataJobExecutionsPage.filterByStatus('running'); - dataJobExecutionsPage.filterByStatus('skipped'); - dataJobExecutionsPage.filterByStatus('submitted'); - dataJobExecutionsPage.filterByStatus('cancelled'); - dataJobExecutionsPage.closeFilter(); - - // verify current URL has appended all execution statuses and sort by status ascending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}', - filter: '{"status":"user_error,platform_error,succeeded,running,skipped,submitted,cancelled"}' - } - }); - - // open status filter and unselect statuses: platform_error, skipped, submitted, cancelled and close the filter - dataJobExecutionsPage.openStatusFilter(); - dataJobExecutionsPage.clearFilterByStatus('platform_error'); - dataJobExecutionsPage.clearFilterByStatus('skipped'); - dataJobExecutionsPage.clearFilterByStatus('submitted'); - dataJobExecutionsPage.clearFilterByStatus('cancelled'); - dataJobExecutionsPage.closeFilter(); - - // verify current URL has appended execution statuses user_error, succeeded, running and sort by status ascending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}', - filter: '{"status":"user_error,succeeded,running"}' - } - }); - - // open status filter and unselect left statuses and close the filter - dataJobExecutionsPage.openStatusFilter(); - dataJobExecutionsPage.clearFilterByStatus('user_error'); - dataJobExecutionsPage.clearFilterByStatus('succeeded'); - dataJobExecutionsPage.clearFilterByStatus('running'); - dataJobExecutionsPage.closeFilter(); - - // verify current URL has appended only sort by status descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}' - } - }); + // sort by status ascending + dataJobExecutionsPage.sortByExecStatus(); + + // verify sort by status is ascending + dataJobExecutionsPage + .getDataGridExecStatusHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "ascending"); + + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + // verify current URL has appended sort by status ascending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"status":1}', + }, }); - it('should verify type filter options are rendered and behaves correctly', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo(longLivedFailingJobFixture.team, longLivedFailingJobFixture.job_name); - - // open type filter - dataJobExecutionsPage.openTypeFilter(); - - // verify exist - dataJobExecutionsPage.getDataGridPopupFilter().should('exist'); - dataJobExecutionsPage.getDataGridExecTypeFilterLabel('manual').should('exist').should('have.text', 'Manual'); - dataJobExecutionsPage.getDataGridExecTypeFilterLabel('scheduled').should('exist').should('have.text', 'Scheduled'); - - // close type filter - dataJobExecutionsPage.closeFilter(); - - // verify doesn't exist - dataJobExecutionsPage.getDataGridPopupFilter().should('not.exist'); - - // verify current URL has appended default sort by startTime descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}' - } - }); - - // open type filter and select manual execution trigger and close - dataJobExecutionsPage.openTypeFilter(); - dataJobExecutionsPage.filterByType('manual'); - dataJobExecutionsPage.closeFilter(); - - // verify cell elements - dataJobExecutionsPage.getDataGridExecTypeContainers('scheduled').should('have.length', 0); - - // verify current URL has appended manual execution trigger and sort by type ascending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}', - filter: '{"type":"manual"}' - } - }); - - // open type filter and select scheduled execution trigger and close - dataJobExecutionsPage.openTypeFilter(); - dataJobExecutionsPage.filterByType('scheduled'); - dataJobExecutionsPage.closeFilter(); - - // verify cell elements - dataJobExecutionsPage.getDataGridExecTypeContainers('manual').should('have.length.gte', 0); - dataJobExecutionsPage.getDataGridExecTypeContainers('scheduled').should('have.length.gte', 0); - - // verify current URL has appended manual and scheduled execution trigger and sort by type ascending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}', - filter: '{"type":"manual,scheduled"}' - } - }); - - // open type filter and unselect scheduled and manual execution triggers and close filter - dataJobExecutionsPage.openTypeFilter(); - dataJobExecutionsPage.clearFilterByType('scheduled'); - dataJobExecutionsPage.clearFilterByType('manual'); - dataJobExecutionsPage.closeFilter(); - - // verify cell elements - dataJobExecutionsPage.getDataGridExecTypeContainers('manual').should('have.length.gte', 0); - dataJobExecutionsPage.getDataGridExecTypeContainers('scheduled').should('have.length.gte', 0); - - // verify current URL has appended only sort by type descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}' - } - }); + // sort by status descending + dataJobExecutionsPage.sortByExecStatus(); + + // verify sort by status is descending + dataJobExecutionsPage + .getDataGridExecStatusHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "descending"); + + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + // verify current URL has appended sort by status descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"status":-1}', + }, }); + }); - it('should verify duration filter render input and filters correctly', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo(longLivedFailingJobFixture.team, longLivedFailingJobFixture.job_name); - - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - // verify current URL has appended default sort by startTime descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}' - } - }); - - // open duration filter - dataJobExecutionsPage.openDurationFilter(); - - // verify exist fill with data na verify again - dataJobExecutionsPage.getDataGridPopupFilter().should('exist'); - dataJobExecutionsPage.typeToTextFilterInput('100s'); - dataJobExecutionsPage.getDataGridRows().should('have.length', 0); - - // verify current URL has appended default sort by startTime descending and new value for id xyxyxy - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}', - filter: '{"duration":"100s"}' - } - }); - - // clear filter and verify - dataJobExecutionsPage.clearTextFilterInput(); - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - // close id filter - dataJobExecutionsPage.closeFilter(); - - // verify doesn't exist - dataJobExecutionsPage.getDataGridPopupFilter().should('not.exist'); - - // verify current URL has appended default sort by startTime descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}' - } - }); + it("should verify type sort behaves correctly", () => { + const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo( + longLivedFailingJobFixture.team, + longLivedFailingJobFixture.job_name, + ); + + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + dataJobExecutionsPage + .getDataGridExecTypeHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "none"); + + // verify current URL has appended default sort by startTime descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + }, }); - it('should verify execution start time filter render input and filters correctly', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo(longLivedFailingJobFixture.team, longLivedFailingJobFixture.job_name); - - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - // verify current URL has appended default sort by startTime descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}' - } - }); - - // open exec start time filter - dataJobExecutionsPage.openExecStartFilter(); - - // verify exist fill with data na verify again - dataJobExecutionsPage.getDataGridPopupFilter().should('exist'); - dataJobExecutionsPage.generateExecStartFilterValue().then((filterValue) => { - // type generated filter value - dataJobExecutionsPage.typeToTextFilterInput(filterValue); - - // verify only cells that match the value are rendered - dataJobExecutionsPage - .getDataGridExecStartCells() - .then(($cells) => { - const foundCells = Array.from($cells).map((cell) => new RegExp(`${filterValue}$`).test(`${cell.innerText?.trim()}`)); - - return foundCells.length; - }) - .should('gt', 0); - - // verify current URL has appended default sort by startTime descending and new value for startTime ${filterValue} - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}', - filter: `{"startTime":"${filterValue}"}` - } - }); - }); + // sort by type ascending + dataJobExecutionsPage.sortByExecType(); + + // verify sort is ascending + dataJobExecutionsPage + .getDataGridExecTypeHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "ascending"); + + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + // verify current URL has appended sort by type ascending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"type":1}', + }, + }); - // clear filter and verify - dataJobExecutionsPage.clearTextFilterInput(); - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - // close start time filter - dataJobExecutionsPage.closeFilter(); - - // verify doesn't exist - dataJobExecutionsPage.getDataGridPopupFilter().should('not.exist'); - - // verify current URL has appended default sort by startTime descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}' - } - }); + // sort by type descending + dataJobExecutionsPage.sortByExecType(); + + // verify sort is descending + dataJobExecutionsPage + .getDataGridExecTypeHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "descending"); + + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + // verify current URL has appended sort by type descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"type":-1}', + }, }); + }); - it('should verify execution end time filter render input and filters correctly', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo(longLivedFailingJobFixture.team, longLivedFailingJobFixture.job_name); - - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - // verify current URL has appended default sort by startTime descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}' - } - }); - - // open exec end time filter - dataJobExecutionsPage.openExecEndFilter(); - - // verify exist fill with data na verify again - dataJobExecutionsPage.getDataGridPopupFilter().should('exist'); - dataJobExecutionsPage.generateExecEndFilterValue().then((filterValue) => { - // type generated filter value - dataJobExecutionsPage.typeToTextFilterInput(filterValue); - - // verify only cells that match the value are rendered - dataJobExecutionsPage - .getDataGridExecEndCells() - .then(($cells) => { - const foundCells = Array.from($cells).map((cell) => new RegExp(`${filterValue}$`).test(`${cell.innerText?.trim()}`)); - - return foundCells.length; - }) - .should('gt', 0); - - // verify current URL has appended default sort by startTime descending and new value for endTime ${filterValue} - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}', - filter: `{"endTime":"${filterValue}"}` - } - }); + it("should verify duration sort works", () => { + const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo( + longLivedFailingJobFixture.team, + longLivedFailingJobFixture.job_name, + ); + + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + dataJobExecutionsPage + .getDataGridExecDurationHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "none"); + + // verify current URL has appended default sort by startTime descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + }, + }); + + // sort by duration ascending + dataJobExecutionsPage.sortByExecDuration(); + + dataJobExecutionsPage + .getDataGridExecDurationHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "ascending"); + + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + dataJobExecutionsPage + .getDataGridExecDurationCell(1) + .invoke("text") + .invoke("trim") + .then((elText1) => { + return dataJobExecutionsPage + .getDataGridExecDurationCell(2) + .invoke("text") + .invoke("trim") + .then((elText2) => { + return ( + dataJobExecutionsPage.convertStringContentToSeconds( + elText1, + ) - + dataJobExecutionsPage.convertStringContentToSeconds(elText2) + ); }); + }) + .should("be.lte", 0); + + // verify current URL has appended sort by duration ascending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"duration":1}', + }, + }); - // clear filter and verify - dataJobExecutionsPage.clearTextFilterInput(); - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - // close start time filter - dataJobExecutionsPage.closeFilter(); - - // verify doesn't exist - dataJobExecutionsPage.getDataGridPopupFilter().should('not.exist'); - - // verify current URL has appended default sort by startTime descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}' - } - }); + // sort by duration descending + dataJobExecutionsPage.sortByExecDuration(); + + dataJobExecutionsPage + .getDataGridExecDurationHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "descending"); + + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + dataJobExecutionsPage + .getDataGridExecDurationCell(1) + .invoke("text") + .invoke("trim") + .then((elText1) => { + return dataJobExecutionsPage + .getDataGridExecDurationCell(2) + .invoke("text") + .invoke("trim") + .then((elText2) => { + return ( + dataJobExecutionsPage.convertStringContentToSeconds( + elText1, + ) - + dataJobExecutionsPage.convertStringContentToSeconds(elText2) + ); + }); + }) + .should("be.gte", 0); + + // verify current URL has appended sort by duration descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"duration":-1}', + }, }); + }); - it('should verify execution id filter render input and filters correctly', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo(longLivedFailingJobFixture.team, longLivedFailingJobFixture.job_name); - - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - // verify current URL has appended default sort by startTime descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}' - } - }); - - // open exec ID filter - dataJobExecutionsPage.openIDFilter(); - - // verify exist fill with data na verify again - dataJobExecutionsPage.getDataGridPopupFilter().should('exist'); - // type job name as filter value - dataJobExecutionsPage.typeToTextFilterInput(longLivedFailingJobFixture.job_name); - - // verify only cells that match the value are rendered - dataJobExecutionsPage - .getDataGridExecIDCells() - .then(($cells) => { - const foundCells = Array.from($cells).map((cell) => new RegExp(`^${longLivedFailingJobFixture.job_name}-\d+$`).test(`${cell.innerText?.trim()}`)); - - return foundCells.length; - }) - .should('gt', 0); - - // verify current URL has appended default sort by startTime descending and new value for endTime ${filterValue} - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}', - filter: `{"id":"${longLivedFailingJobFixture.job_name}"}` - } - }); - - // clear filter and type random text then verify - dataJobExecutionsPage.clearTextFilterInput(); - dataJobExecutionsPage.typeToTextFilterInput('xyxyxy'); - dataJobExecutionsPage.getDataGridRows().should('have.length', 0); - - // verify current URL has appended default sort by startTime descending and new value for id xyxyxy - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}', - filter: '{"id":"xyxyxy"}' - } - }); - - // clear filter and verify - dataJobExecutionsPage.clearTextFilterInput(); - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - // close start time filter - dataJobExecutionsPage.closeFilter(); - - // verify doesn't exist - dataJobExecutionsPage.getDataGridPopupFilter().should('not.exist'); - - // verify current URL has appended default sort by startTime descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}' - } - }); + it("should verify execution start time sort works", () => { + const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo( + longLivedFailingJobFixture.team, + longLivedFailingJobFixture.job_name, + ); + + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + dataJobExecutionsPage + .getDataGridExecStartHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "descending"); + + dataJobExecutionsPage + .getDataGridExecStartCell(1) + .invoke("text") + .invoke("trim") + .then((elText1) => { + return dataJobExecutionsPage + .getDataGridExecStartCell(2) + .invoke("text") + .invoke("trim") + .then((elText2) => { + return new Date(elText1) - new Date(elText2); + }); + }) + .should("be.gte", 0); + + // verify current URL has appended default sort by startTime descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + }, }); - it('should verify version filter render input and filters correctly', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo(longLivedFailingJobFixture.team, longLivedFailingJobFixture.job_name); - - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - // verify current URL has appended default sort by startTime descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}' - } - }); - - // open version filter - dataJobExecutionsPage.openVersionFilter(); - - // verify exist fill with data na verify again - dataJobExecutionsPage.getDataGridPopupFilter().should('exist'); - dataJobExecutionsPage.typeToTextFilterInput('xyxyxy'); - dataJobExecutionsPage.getDataGridRows().should('have.length', 0); - - // verify current URL has appended default sort by startTime descending and new value for jobVersion xyxyxy - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}', - filter: '{"jobVersion":"xyxyxy"}' - } - }); - - // clear filter and verify - dataJobExecutionsPage.clearTextFilterInput(); - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - // close version filter - dataJobExecutionsPage.closeFilter(); - - // verify doesn't exist - dataJobExecutionsPage.getDataGridPopupFilter().should('not.exist'); - - // verify current URL has appended default sort by startTime descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}' - } - }); + // sort by exec start ascending + dataJobExecutionsPage.sortByExecStart(); + + dataJobExecutionsPage + .getDataGridExecStartHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "ascending"); + + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + dataJobExecutionsPage + .getDataGridExecStartCell(1) + .invoke("text") + .invoke("trim") + .then((elText1) => { + return dataJobExecutionsPage + .getDataGridExecStartCell(2) + .invoke("text") + .invoke("trim") + .then((elText2) => { + return new Date(elText1) - new Date(elText2); + }); + }) + .should("be.lte", 0); + + // verify current URL has appended sort by duration ascending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":1}', + }, }); }); - describe('DataGrid Sort', () => { - it('should verify status sort behaves correctly', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo(longLivedFailingJobFixture.team, longLivedFailingJobFixture.job_name); - - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - dataJobExecutionsPage.getDataGridExecStatusHeader().should('exist').invoke('attr', 'aria-sort').should('eq', 'none'); - - // verify current URL has appended default sort by startTime descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}' - } - }); - - // sort by status ascending - dataJobExecutionsPage.sortByExecStatus(); - - // verify sort by status is ascending - dataJobExecutionsPage.getDataGridExecStatusHeader().should('exist').invoke('attr', 'aria-sort').should('eq', 'ascending'); - - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - // verify current URL has appended sort by status ascending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"status":1}' - } - }); - - // sort by status descending - dataJobExecutionsPage.sortByExecStatus(); - - // verify sort by status is descending - dataJobExecutionsPage.getDataGridExecStatusHeader().should('exist').invoke('attr', 'aria-sort').should('eq', 'descending'); - - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - // verify current URL has appended sort by status descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"status":-1}' - } - }); + it("should verify execution end time sort works", () => { + const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo( + longLivedFailingJobFixture.team, + longLivedFailingJobFixture.job_name, + ); + + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + dataJobExecutionsPage + .getDataGridExecEndHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "none"); + + // verify current URL has appended default sort by startTime descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + }, }); - it('should verify type sort behaves correctly', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo(longLivedFailingJobFixture.team, longLivedFailingJobFixture.job_name); - - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - dataJobExecutionsPage.getDataGridExecTypeHeader().should('exist').invoke('attr', 'aria-sort').should('eq', 'none'); - - // verify current URL has appended default sort by startTime descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}' - } - }); - - // sort by type ascending - dataJobExecutionsPage.sortByExecType(); - - // verify sort is ascending - dataJobExecutionsPage.getDataGridExecTypeHeader().should('exist').invoke('attr', 'aria-sort').should('eq', 'ascending'); - - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - // verify current URL has appended sort by type ascending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"type":1}' - } - }); - - // sort by type descending - dataJobExecutionsPage.sortByExecType(); - - // verify sort is descending - dataJobExecutionsPage.getDataGridExecTypeHeader().should('exist').invoke('attr', 'aria-sort').should('eq', 'descending'); - - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - // verify current URL has appended sort by type descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"type":-1}' - } - }); + // sort by exec end ascending + dataJobExecutionsPage.sortByExecEnd(); + + dataJobExecutionsPage + .getDataGridExecEndHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "ascending"); + + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + dataJobExecutionsPage + .getDataGridExecEndCell(1) + .invoke("text") + .invoke("trim") + .then((elText1) => { + return dataJobExecutionsPage + .getDataGridExecEndCell(2) + .invoke("text") + .invoke("trim") + .then((elText2) => { + const d1 = elText1 ? new Date(elText1) : new Date(); + const d2 = elText2 ? new Date(elText2) : new Date(); + + return d1 - d2; + }); + }) + .should("be.lte", 0); + + // verify current URL has appended sort by endTime ascending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"endTime":1}', + }, }); - it('should verify duration sort works', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo(longLivedFailingJobFixture.team, longLivedFailingJobFixture.job_name); - - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - dataJobExecutionsPage.getDataGridExecDurationHeader().should('exist').invoke('attr', 'aria-sort').should('eq', 'none'); - - // verify current URL has appended default sort by startTime descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}' - } - }); - - // sort by duration ascending - dataJobExecutionsPage.sortByExecDuration(); - - dataJobExecutionsPage.getDataGridExecDurationHeader().should('exist').invoke('attr', 'aria-sort').should('eq', 'ascending'); - - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - dataJobExecutionsPage - .getDataGridExecDurationCell(1) - .invoke('text') - .invoke('trim') - .then((elText1) => { - return dataJobExecutionsPage - .getDataGridExecDurationCell(2) - .invoke('text') - .invoke('trim') - .then((elText2) => { - return dataJobExecutionsPage.convertStringContentToSeconds(elText1) - dataJobExecutionsPage.convertStringContentToSeconds(elText2); - }); - }) - .should('be.lte', 0); - - // verify current URL has appended sort by duration ascending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"duration":1}' - } - }); - - // sort by duration descending - dataJobExecutionsPage.sortByExecDuration(); - - dataJobExecutionsPage.getDataGridExecDurationHeader().should('exist').invoke('attr', 'aria-sort').should('eq', 'descending'); - - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - dataJobExecutionsPage - .getDataGridExecDurationCell(1) - .invoke('text') - .invoke('trim') - .then((elText1) => { - return dataJobExecutionsPage - .getDataGridExecDurationCell(2) - .invoke('text') - .invoke('trim') - .then((elText2) => { - return dataJobExecutionsPage.convertStringContentToSeconds(elText1) - dataJobExecutionsPage.convertStringContentToSeconds(elText2); - }); - }) - .should('be.gte', 0); - - // verify current URL has appended sort by duration descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"duration":-1}' - } - }); + // sort by exec end time descending + dataJobExecutionsPage.sortByExecEnd(); + + dataJobExecutionsPage + .getDataGridExecEndHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "descending"); + + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + dataJobExecutionsPage + .getDataGridExecEndCell(1) + .invoke("text") + .invoke("trim") + .then((elText1) => { + return dataJobExecutionsPage + .getDataGridExecEndCell(2) + .invoke("text") + .invoke("trim") + .then((elText2) => { + const d1 = elText1 ? new Date(elText1) : new Date(); + const d2 = elText2 ? new Date(elText2) : new Date(); + + return d1 - d2; + }); + }) + .should("be.gte", 0); + + // verify current URL has appended sort by endTime descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"endTime":-1}', + }, }); + }); - it('should verify execution start time sort works', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo(longLivedFailingJobFixture.team, longLivedFailingJobFixture.job_name); - - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - dataJobExecutionsPage.getDataGridExecStartHeader().should('exist').invoke('attr', 'aria-sort').should('eq', 'descending'); - - dataJobExecutionsPage - .getDataGridExecStartCell(1) - .invoke('text') - .invoke('trim') - .then((elText1) => { - return dataJobExecutionsPage - .getDataGridExecStartCell(2) - .invoke('text') - .invoke('trim') - .then((elText2) => { - return new Date(elText1) - new Date(elText2); - }); - }) - .should('be.gte', 0); - - // verify current URL has appended default sort by startTime descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}' - } - }); - - // sort by exec start ascending - dataJobExecutionsPage.sortByExecStart(); - - dataJobExecutionsPage.getDataGridExecStartHeader().should('exist').invoke('attr', 'aria-sort').should('eq', 'ascending'); - - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - dataJobExecutionsPage - .getDataGridExecStartCell(1) - .invoke('text') - .invoke('trim') - .then((elText1) => { - return dataJobExecutionsPage - .getDataGridExecStartCell(2) - .invoke('text') - .invoke('trim') - .then((elText2) => { - return new Date(elText1) - new Date(elText2); - }); - }) - .should('be.lte', 0); - - // verify current URL has appended sort by duration ascending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":1}' - } - }); + it("should verify execution ID sort works", () => { + const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo( + longLivedFailingJobFixture.team, + longLivedFailingJobFixture.job_name, + ); + + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + dataJobExecutionsPage + .getDataGridExecIDHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "none"); + + // verify current URL has appended default sort by startTime descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + }, }); - it('should verify execution end time sort works', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo(longLivedFailingJobFixture.team, longLivedFailingJobFixture.job_name); - - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - dataJobExecutionsPage.getDataGridExecEndHeader().should('exist').invoke('attr', 'aria-sort').should('eq', 'none'); - - // verify current URL has appended default sort by startTime descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}' - } - }); - - // sort by exec end ascending - dataJobExecutionsPage.sortByExecEnd(); - - dataJobExecutionsPage.getDataGridExecEndHeader().should('exist').invoke('attr', 'aria-sort').should('eq', 'ascending'); - - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - dataJobExecutionsPage - .getDataGridExecEndCell(1) - .invoke('text') - .invoke('trim') - .then((elText1) => { - return dataJobExecutionsPage - .getDataGridExecEndCell(2) - .invoke('text') - .invoke('trim') - .then((elText2) => { - const d1 = elText1 ? new Date(elText1) : new Date(); - const d2 = elText2 ? new Date(elText2) : new Date(); - - return d1 - d2; - }); - }) - .should('be.lte', 0); - - // verify current URL has appended sort by endTime ascending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"endTime":1}' - } - }); - - // sort by exec end time descending - dataJobExecutionsPage.sortByExecEnd(); - - dataJobExecutionsPage.getDataGridExecEndHeader().should('exist').invoke('attr', 'aria-sort').should('eq', 'descending'); - - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - dataJobExecutionsPage - .getDataGridExecEndCell(1) - .invoke('text') - .invoke('trim') - .then((elText1) => { - return dataJobExecutionsPage - .getDataGridExecEndCell(2) - .invoke('text') - .invoke('trim') - .then((elText2) => { - const d1 = elText1 ? new Date(elText1) : new Date(); - const d2 = elText2 ? new Date(elText2) : new Date(); - - return d1 - d2; - }); - }) - .should('be.gte', 0); - - // verify current URL has appended sort by endTime descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"endTime":-1}' - } - }); + // sort by ID ascending + dataJobExecutionsPage.sortByExecID(); + + dataJobExecutionsPage + .getDataGridExecIDHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "ascending"); + + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + dataJobExecutionsPage + .getDataGridExecIDCell(1) + .invoke("text") + .invoke("trim") + .then((elText1) => { + return dataJobExecutionsPage + .getDataGridExecIDCell(2) + .invoke("text") + .invoke("trim") + .then((elText2) => { + return elText2 > elText1; + }); + }) + .should("be.true"); + + // verify current URL has appended sort by id ascending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"id":1}', + }, }); - it('should verify execution ID sort works', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo(longLivedFailingJobFixture.team, longLivedFailingJobFixture.job_name); - - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - dataJobExecutionsPage.getDataGridExecIDHeader().should('exist').invoke('attr', 'aria-sort').should('eq', 'none'); - - // verify current URL has appended default sort by startTime descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}' - } - }); - - // sort by ID ascending - dataJobExecutionsPage.sortByExecID(); - - dataJobExecutionsPage.getDataGridExecIDHeader().should('exist').invoke('attr', 'aria-sort').should('eq', 'ascending'); - - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - dataJobExecutionsPage - .getDataGridExecIDCell(1) - .invoke('text') - .invoke('trim') - .then((elText1) => { - return dataJobExecutionsPage - .getDataGridExecIDCell(2) - .invoke('text') - .invoke('trim') - .then((elText2) => { - return elText2 > elText1; - }); - }) - .should('be.true'); - - // verify current URL has appended sort by id ascending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"id":1}' - } - }); - - // sort by ID descending - dataJobExecutionsPage.sortByExecID(); - - dataJobExecutionsPage.getDataGridExecIDHeader().should('exist').invoke('attr', 'aria-sort').should('eq', 'descending'); - - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - dataJobExecutionsPage - .getDataGridExecIDCell(1) - .invoke('text') - .invoke('trim') - .then((elText1) => { - return dataJobExecutionsPage - .getDataGridExecIDCell(2) - .invoke('text') - .invoke('trim') - .then((elText2) => { - return elText1 > elText2; - }); - }) - .should('be.true'); - - // verify current URL has appended sort by id descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"id":-1}' - } - }); + // sort by ID descending + dataJobExecutionsPage.sortByExecID(); + + dataJobExecutionsPage + .getDataGridExecIDHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "descending"); + + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + dataJobExecutionsPage + .getDataGridExecIDCell(1) + .invoke("text") + .invoke("trim") + .then((elText1) => { + return dataJobExecutionsPage + .getDataGridExecIDCell(2) + .invoke("text") + .invoke("trim") + .then((elText2) => { + return elText1 > elText2; + }); + }) + .should("be.true"); + + // verify current URL has appended sort by id descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"id":-1}', + }, }); + }); - it('should verify execution version sort works', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo(longLivedFailingJobFixture.team, longLivedFailingJobFixture.job_name); - - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - dataJobExecutionsPage.getDataGridExecVersionHeader().should('exist').invoke('attr', 'aria-sort').should('eq', 'none'); - - // verify current URL has appended default sort by startTime descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}' - } - }); - - // sort by version ascending - dataJobExecutionsPage.sortByExecVersion(); - - dataJobExecutionsPage.getDataGridExecVersionHeader().should('exist').invoke('attr', 'aria-sort').should('eq', 'ascending'); - - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - dataJobExecutionsPage - .getDataGridExecVersionCell(1) - .invoke('text') - .invoke('trim') - .then((elText1) => { - return dataJobExecutionsPage - .getDataGridExecVersionCell(2) - .invoke('text') - .invoke('trim') - .then((elText2) => { - return elText2 >= elText1; - }); - }) - .should('be.true'); - - // verify current URL has appended sort by job version ascending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"jobVersion":1}' - } - }); - - // sort by version descending - dataJobExecutionsPage.sortByExecVersion(); - - dataJobExecutionsPage.getDataGridExecVersionHeader().should('exist').invoke('attr', 'aria-sort').should('eq', 'descending'); - - dataJobExecutionsPage.getDataGridRows().should('have.length.gt', 0); - - dataJobExecutionsPage - .getDataGridExecVersionCell(1) - .invoke('text') - .invoke('trim') - .then((elText1) => { - return dataJobExecutionsPage - .getDataGridExecVersionCell(2) - .invoke('text') - .invoke('trim') - .then((elText2) => { - return elText1 >= elText2; - }); - }) - .should('be.true'); - - // verify current URL has appended sort by job version descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"jobVersion":-1}' - } - }); + it("should verify execution version sort works", () => { + const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo( + longLivedFailingJobFixture.team, + longLivedFailingJobFixture.job_name, + ); + + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + dataJobExecutionsPage + .getDataGridExecVersionHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "none"); + + // verify current URL has appended default sort by startTime descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + }, + }); + + // sort by version ascending + dataJobExecutionsPage.sortByExecVersion(); + + dataJobExecutionsPage + .getDataGridExecVersionHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "ascending"); + + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + dataJobExecutionsPage + .getDataGridExecVersionCell(1) + .invoke("text") + .invoke("trim") + .then((elText1) => { + return dataJobExecutionsPage + .getDataGridExecVersionCell(2) + .invoke("text") + .invoke("trim") + .then((elText2) => { + return elText2 >= elText1; + }); + }) + .should("be.true"); + + // verify current URL has appended sort by job version ascending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"jobVersion":1}', + }, + }); + + // sort by version descending + dataJobExecutionsPage.sortByExecVersion(); + + dataJobExecutionsPage + .getDataGridExecVersionHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "descending"); + + dataJobExecutionsPage.getDataGridRows().should("have.length.gt", 0); + + dataJobExecutionsPage + .getDataGridExecVersionCell(1) + .invoke("text") + .invoke("trim") + .then((elText1) => { + return dataJobExecutionsPage + .getDataGridExecVersionCell(2) + .invoke("text") + .invoke("trim") + .then((elText2) => { + return elText1 >= elText2; + }); + }) + .should("be.true"); + + // verify current URL has appended sort by job version descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"jobVersion":-1}', + }, }); }); + }); + + // !!! important tests order is very important, because generated url from 1st test is used in the second test + // the second test cannot be run without previously running the first test + describe("DataGrid Filters and Sort to URL", () => { + // value is assigned at the end of the 1st test and used in the 2nd test + let navigationUrlWithFiltersAndSort = ""; + + it("should verify multiple filters and sort are appended to URL", () => { + const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo( + longLivedFailingJobFixture.team, + longLivedFailingJobFixture.job_name, + ); + + // verify current URL has appended default sort by startTime descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + }, + }); - // !!! important tests order is very important, because generated url from 1st test is used in the second test - // the second test cannot be run without previously running the first test - describe('DataGrid Filters and Sort to URL', () => { - // value is assigned at the end of the 1st test and used in the 2nd test - let navigationUrlWithFiltersAndSort = ''; - - it('should verify multiple filters and sort are appended to URL', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateTo(longLivedFailingJobFixture.team, longLivedFailingJobFixture.job_name); - - // verify current URL has appended default sort by startTime descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}' - } - }); - - // open status filter and select user_error and close the filter - dataJobExecutionsPage.openStatusFilter(); - dataJobExecutionsPage.filterByStatus('user_error'); - dataJobExecutionsPage.filterByStatus('platform_error'); - dataJobExecutionsPage.closeFilter(); - - // verify current URL has appended filters execution status: user_error and platform_error, and sort by startTime descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}', - filter: '{"status":"user_error,platform_error"}' - } - }); - - // open type filter and select manual execution then verify, then select scheduled trigger and close - dataJobExecutionsPage.openTypeFilter(); - dataJobExecutionsPage.filterByType('manual'); - dataJobExecutionsPage.getDataGridExecTypeContainers('scheduled').should('have.length', 0); - dataJobExecutionsPage.filterByType('scheduled'); - dataJobExecutionsPage.closeFilter(); - - // verify current URL has appended filters execution status: user_error and platform_error, trigger type: manual and scheduled, and sort by startTime descending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"startTime":-1}', - filter: '{"status":"user_error,platform_error","type":"manual,scheduled"}' - } - }); - - // sort by exec ID ascending - dataJobExecutionsPage.sortByExecID(); - - // open exec ID filter - dataJobExecutionsPage.openIDFilter(); - // type job name as filter value - dataJobExecutionsPage.typeToTextFilterInput(longLivedFailingJobFixture.job_name); - // verify only cells that match the value are rendered - dataJobExecutionsPage - .getDataGridExecIDCells() - .then(($cells) => { - const foundCells = Array.from($cells).map((cell) => new RegExp(`^${longLivedFailingJobFixture.job_name}-\d+$`).test(`${cell.innerText?.trim()}`)); - - return foundCells.length; - }) - .should('gt', 0); - // verify current URL has appended filters execution status: user_error and platform_error, trigger type: manual and scheduled, id: long_lived_job_name and sort by id ascending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"id":1}', - filter: `{"status":"user_error,platform_error","type":"manual,scheduled","id":"${longLivedFailingJobFixture.job_name}"}` - } - }); - - // open exec start time filter and type generated filterValue and close - dataJobExecutionsPage.openExecStartFilter(); - dataJobExecutionsPage.generateExecStartFilterValue().then((filterValue) => { - // type generated filter value - dataJobExecutionsPage.typeToTextFilterInput(filterValue); - - // verify only cells that match the value are rendered - dataJobExecutionsPage - .getDataGridExecStartCells() - .then(($cells) => { - const foundCells = Array.from($cells).map((cell) => new RegExp(`${filterValue}$`).test(`${cell.innerText?.trim()}`)); - - return foundCells.length; - }) - .should('gt', 0); - - // verify current URL has appended filters execution status: user_error and platform_error, trigger type: manual and scheduled, id: long_lived_job_name, startTime: ${filterValue} and sort by id ascending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"id":1}', - filter: `{"status":"user_error,platform_error","type":"manual,scheduled","id":"${longLivedFailingJobFixture.job_name}","startTime":"${filterValue}"}` - } - }); + // open status filter and select user_error and close the filter + dataJobExecutionsPage.openStatusFilter(); + dataJobExecutionsPage.filterByStatus("user_error"); + dataJobExecutionsPage.filterByStatus("platform_error"); + dataJobExecutionsPage.closeFilter(); + + // verify current URL has appended filters execution status: user_error and platform_error, and sort by startTime descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + filter: '{"status":"user_error,platform_error"}', + }, + }); + + // open type filter and select manual execution then verify, then select scheduled trigger and close + dataJobExecutionsPage.openTypeFilter(); + dataJobExecutionsPage.filterByType("manual"); + dataJobExecutionsPage + .getDataGridExecTypeContainers("scheduled") + .should("have.length", 0); + dataJobExecutionsPage.filterByType("scheduled"); + dataJobExecutionsPage.closeFilter(); + + // verify current URL has appended filters execution status: user_error and platform_error, trigger type: manual and scheduled, and sort by startTime descending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"startTime":-1}', + filter: + '{"status":"user_error,platform_error","type":"manual,scheduled"}', + }, + }); + + // sort by exec ID ascending + dataJobExecutionsPage.sortByExecID(); + + // open exec ID filter + dataJobExecutionsPage.openIDFilter(); + // type job name as filter value + dataJobExecutionsPage.typeToTextFilterInput( + longLivedFailingJobFixture.job_name, + ); + // verify only cells that match the value are rendered + dataJobExecutionsPage + .getDataGridExecIDCells() + .then(($cells) => { + const foundCells = Array.from($cells).map((cell) => + new RegExp(`^${longLivedFailingJobFixture.job_name}-\d+$`).test( + `${cell.innerText?.trim()}`, + ), + ); + + return foundCells.length; + }) + .should("gt", 0); + // verify current URL has appended filters execution status: user_error and platform_error, trigger type: manual and scheduled, id: long_lived_job_name and sort by id ascending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"id":1}', + filter: `{"status":"user_error,platform_error","type":"manual,scheduled","id":"${longLivedFailingJobFixture.job_name}"}`, + }, + }); + + // open exec start time filter and type generated filterValue and close + dataJobExecutionsPage.openExecStartFilter(); + dataJobExecutionsPage + .generateExecStartFilterValue() + .then((filterValue) => { + // type generated filter value + dataJobExecutionsPage.typeToTextFilterInput(filterValue); + + // verify only cells that match the value are rendered + dataJobExecutionsPage + .getDataGridExecStartCells() + .then(($cells) => { + const foundCells = Array.from($cells).map((cell) => + new RegExp(`${filterValue}$`).test( + `${cell.innerText?.trim()}`, + ), + ); + + return foundCells.length; + }) + .should("gt", 0); + + // verify current URL has appended filters execution status: user_error and platform_error, trigger type: manual and scheduled, id: long_lived_job_name, startTime: ${filterValue} and sort by id ascending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"id":1}', + filter: `{"status":"user_error,platform_error","type":"manual,scheduled","id":"${longLivedFailingJobFixture.job_name}","startTime":"${filterValue}"}`, + }, }); - dataJobExecutionsPage.closeFilter(); - - // open exec end time filter and type generated filterValue and close - dataJobExecutionsPage.openExecEndFilter(); - dataJobExecutionsPage.generateExecEndFilterValue().then((filterValue) => { - // type generated filter value - dataJobExecutionsPage.typeToTextFilterInput(filterValue); - - // verify only cells that match the value are rendered - dataJobExecutionsPage - .getDataGridExecEndCells() - .then(($cells) => { - const foundCells = Array.from($cells).map((cell) => new RegExp(`${filterValue}$`).test(`${cell.innerText?.trim()}`)); - - return foundCells.length; - }) - .should('gt', 0); - - // verify current URL has appended filters execution status: user_error and platform_error, trigger type: manual and scheduled, id: long_lived_job_name, startTime: ${filterValue}, endTime: ${filterValue} and sort by id ascending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"id":1}', - filter: `{"status":"user_error,platform_error","type":"manual,scheduled","id":"${longLivedFailingJobFixture.job_name}","startTime":"${filterValue}","endTime":"${filterValue}"}` - } - }); + }); + dataJobExecutionsPage.closeFilter(); + + // open exec end time filter and type generated filterValue and close + dataJobExecutionsPage.openExecEndFilter(); + dataJobExecutionsPage + .generateExecEndFilterValue() + .then((filterValue) => { + // type generated filter value + dataJobExecutionsPage.typeToTextFilterInput(filterValue); + + // verify only cells that match the value are rendered + dataJobExecutionsPage + .getDataGridExecEndCells() + .then(($cells) => { + const foundCells = Array.from($cells).map((cell) => + new RegExp(`${filterValue}$`).test( + `${cell.innerText?.trim()}`, + ), + ); + + return foundCells.length; + }) + .should("gt", 0); + + // verify current URL has appended filters execution status: user_error and platform_error, trigger type: manual and scheduled, id: long_lived_job_name, startTime: ${filterValue}, endTime: ${filterValue} and sort by id ascending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"id":1}', + filter: `{"status":"user_error,platform_error","type":"manual,scheduled","id":"${longLivedFailingJobFixture.job_name}","startTime":"${filterValue}","endTime":"${filterValue}"}`, + }, }); - dataJobExecutionsPage.closeFilter(); - - // extract current url for next test - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .then((urlNormalized) => { - const pathSegment = urlNormalized.pathSegment; - const queryParamsSerialized = Object.entries(urlNormalized.queryParams) - .map((keyValuePair) => keyValuePair.join('=')) - .join('&'); - navigationUrlWithFiltersAndSort = `${pathSegment}?${queryParamsSerialized}`; - - cy.log(navigationUrlWithFiltersAndSort); - console.log(navigationUrlWithFiltersAndSort); - }); }); + dataJobExecutionsPage.closeFilter(); + + // extract current url for next test + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .then((urlNormalized) => { + const pathSegment = urlNormalized.pathSegment; + const queryParamsSerialized = Object.entries( + urlNormalized.queryParams, + ) + .map((keyValuePair) => keyValuePair.join("=")) + .join("&"); + navigationUrlWithFiltersAndSort = `${pathSegment}?${queryParamsSerialized}`; + + cy.log(navigationUrlWithFiltersAndSort); + console.log(navigationUrlWithFiltersAndSort); + }); + }); + + it("should verify URL navigation with filters and sort will prefill everything and filter accordingly", () => { + const dataJobExecutionsPage = + DataJobManageExecutionsPage.navigateToExecutionsWithUrl( + navigationUrlWithFiltersAndSort, + ); - it('should verify URL navigation with filters and sort will prefill everything and filter accordingly', () => { - const dataJobExecutionsPage = DataJobManageExecutionsPage.navigateToExecutionsWithUrl(navigationUrlWithFiltersAndSort); - - // open status filter, verify then close - dataJobExecutionsPage.openStatusFilter(); - dataJobExecutionsPage.getDataGridExecStatusFilterCheckboxesStatuses().should('deep.equal', [ - ['succeeded', false], - ['platform_error', true], - ['user_error', true], - ['running', false], - ['submitted', false], - ['skipped', false], - ['cancelled', false] - ]); - dataJobExecutionsPage.closeFilter(); - - // open type filter, verify then close - dataJobExecutionsPage.openTypeFilter(); - dataJobExecutionsPage.getDataGridExecTypeFilterCheckboxesStatuses().should('deep.equal', [ - ['manual', true], - ['scheduled', true] - ]); - dataJobExecutionsPage.getDataGridExecTypeContainers('manual').should('have.length.gte', 0); - dataJobExecutionsPage.getDataGridExecTypeContainers('scheduled').should('have.length.gte', 0); - dataJobExecutionsPage.closeFilter(); - - // verify sort by id ascending - dataJobExecutionsPage.getDataGridExecIDHeader().should('exist').invoke('attr', 'aria-sort').should('eq', 'ascending'); - dataJobExecutionsPage - .getDataGridExecIDCell(1) - .invoke('text') - .invoke('trim') - .then((elText1) => { - return dataJobExecutionsPage - .getDataGridExecIDCell(2) - .invoke('text') - .invoke('trim') - .then((elText2) => { - return elText2 > elText1; - }); - }) - .should('be.true'); - - // open id filter, verify then close - dataJobExecutionsPage.openIDFilter(); - dataJobExecutionsPage.getDataGridInputFilter().should('exist').should('have.value', longLivedFailingJobFixture.job_name); - // verify only cells that match the value are rendered - dataJobExecutionsPage - .getDataGridExecIDCells() - .then(($cells) => { - const foundCells = Array.from($cells).map((cell) => new RegExp(`^${longLivedFailingJobFixture.job_name}-\d+$`).test(`${cell.innerText?.trim()}`)); - - return foundCells.length; - }) - .should('gt', 0); - dataJobExecutionsPage.closeFilter(); - - // open exec start time filter, verify then close - dataJobExecutionsPage.openExecStartFilter(); - dataJobExecutionsPage.generateExecStartFilterValue().then((filterValue) => { - // verify generated value prefilled in input field - dataJobExecutionsPage.getDataGridInputFilter().should('exist').should('have.value', filterValue); - - // verify only cells that match the value are rendered - dataJobExecutionsPage - .getDataGridExecStartCells() - .then(($cells) => { - const foundCells = Array.from($cells).map((cell) => new RegExp(`${filterValue}$`).test(`${cell.innerText?.trim()}`)); - - return foundCells.length; - }) - .should('gt', 0); + // open status filter, verify then close + dataJobExecutionsPage.openStatusFilter(); + dataJobExecutionsPage + .getDataGridExecStatusFilterCheckboxesStatuses() + .should("deep.equal", [ + ["succeeded", false], + ["platform_error", true], + ["user_error", true], + ["running", false], + ["submitted", false], + ["skipped", false], + ["cancelled", false], + ]); + dataJobExecutionsPage.closeFilter(); + + // open type filter, verify then close + dataJobExecutionsPage.openTypeFilter(); + dataJobExecutionsPage + .getDataGridExecTypeFilterCheckboxesStatuses() + .should("deep.equal", [ + ["manual", true], + ["scheduled", true], + ]); + dataJobExecutionsPage + .getDataGridExecTypeContainers("manual") + .should("have.length.gte", 0); + dataJobExecutionsPage + .getDataGridExecTypeContainers("scheduled") + .should("have.length.gte", 0); + dataJobExecutionsPage.closeFilter(); + + // verify sort by id ascending + dataJobExecutionsPage + .getDataGridExecIDHeader() + .should("exist") + .invoke("attr", "aria-sort") + .should("eq", "ascending"); + dataJobExecutionsPage + .getDataGridExecIDCell(1) + .invoke("text") + .invoke("trim") + .then((elText1) => { + return dataJobExecutionsPage + .getDataGridExecIDCell(2) + .invoke("text") + .invoke("trim") + .then((elText2) => { + return elText2 > elText1; }); - dataJobExecutionsPage.closeFilter(); - - // open exec end time filter, verify then close - dataJobExecutionsPage.openExecEndFilter(); - dataJobExecutionsPage.generateExecEndFilterValue().then((filterValue) => { - // verify generated value prefilled in input field - dataJobExecutionsPage.getDataGridInputFilter().should('exist').should('have.value', filterValue); - - // verify only cells that match the value are rendered - dataJobExecutionsPage - .getDataGridExecEndCells() - .then(($cells) => { - const foundCells = Array.from($cells).map((cell) => new RegExp(`${filterValue}$`).test(`${cell.innerText?.trim()}`)); - - return foundCells.length; - }) - .should('gt', 0); - - // verify current URL has appended filters execution status: user_error and platform_error, trigger type: manual and scheduled, id: long_lived_job_name, startTime: ${filterValue}, endTime: ${filterValue} and sort by id ascending - dataJobExecutionsPage - .getCurrentUrlNormalized({ - includePathSegment: true, - includeQueryString: true, - decodeQueryString: true - }) - .should('deep.equal', { - pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, - queryParams: { - sort: '{"id":1}', - filter: `{"status":"user_error,platform_error","type":"manual,scheduled","startTime":"${filterValue}","endTime":"${filterValue}","id":"${longLivedFailingJobFixture.job_name}"}` - } - }); + }) + .should("be.true"); + + // open id filter, verify then close + dataJobExecutionsPage.openIDFilter(); + dataJobExecutionsPage + .getDataGridInputFilter() + .should("exist") + .should("have.value", longLivedFailingJobFixture.job_name); + // verify only cells that match the value are rendered + dataJobExecutionsPage + .getDataGridExecIDCells() + .then(($cells) => { + const foundCells = Array.from($cells).map((cell) => + new RegExp(`^${longLivedFailingJobFixture.job_name}-\d+$`).test( + `${cell.innerText?.trim()}`, + ), + ); + + return foundCells.length; + }) + .should("gt", 0); + dataJobExecutionsPage.closeFilter(); + + // open exec start time filter, verify then close + dataJobExecutionsPage.openExecStartFilter(); + dataJobExecutionsPage + .generateExecStartFilterValue() + .then((filterValue) => { + // verify generated value prefilled in input field + dataJobExecutionsPage + .getDataGridInputFilter() + .should("exist") + .should("have.value", filterValue); + + // verify only cells that match the value are rendered + dataJobExecutionsPage + .getDataGridExecStartCells() + .then(($cells) => { + const foundCells = Array.from($cells).map((cell) => + new RegExp(`${filterValue}$`).test( + `${cell.innerText?.trim()}`, + ), + ); + + return foundCells.length; + }) + .should("gt", 0); + }); + dataJobExecutionsPage.closeFilter(); + + // open exec end time filter, verify then close + dataJobExecutionsPage.openExecEndFilter(); + dataJobExecutionsPage + .generateExecEndFilterValue() + .then((filterValue) => { + // verify generated value prefilled in input field + dataJobExecutionsPage + .getDataGridInputFilter() + .should("exist") + .should("have.value", filterValue); + + // verify only cells that match the value are rendered + dataJobExecutionsPage + .getDataGridExecEndCells() + .then(($cells) => { + const foundCells = Array.from($cells).map((cell) => + new RegExp(`${filterValue}$`).test( + `${cell.innerText?.trim()}`, + ), + ); + + return foundCells.length; + }) + .should("gt", 0); + + // verify current URL has appended filters execution status: user_error and platform_error, trigger type: manual and scheduled, id: long_lived_job_name, startTime: ${filterValue}, endTime: ${filterValue} and sort by id ascending + dataJobExecutionsPage + .getCurrentUrlNormalized({ + includePathSegment: true, + includeQueryString: true, + decodeQueryString: true, + }) + .should("deep.equal", { + pathSegment: `/manage/data-jobs/${longLivedFailingJobFixture.team}/${longLivedFailingJobFixture.job_name}/executions`, + queryParams: { + sort: '{"id":1}', + filter: `{"status":"user_error,platform_error","type":"manual,scheduled","startTime":"${filterValue}","endTime":"${filterValue}","id":"${longLivedFailingJobFixture.job_name}"}`, + }, }); - dataJobExecutionsPage.closeFilter(); }); + dataJobExecutionsPage.closeFilter(); }); + }); }); -}); + }, +); diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/router/router.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/router/router.spec.js index 445f3e31d6..141735821d 100644 --- a/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/router/router.spec.js +++ b/projects/frontend/data-pipelines/gui/e2e/integration/frontend-tests/router/router.spec.js @@ -5,20 +5,22 @@ /// -import { BasePagePO } from '../../../support/pages/base/base-page.po'; +import { BasePagePO } from "../../../support/pages/base/base-page.po"; -describe('Routing for pages', () => { - describe('smoke', { tags: ['@smoke'] }, () => { - it('navigates to get-started page when explore page route is ignored', () => { - BasePagePO.executeCypressCommand('appConfigInterceptorDisableExploreRoute'); - // wait for login - BasePagePO.wireUserSession(); - BasePagePO.initInterceptors(); - BasePagePO.navigateTo(); - // go to explore page url - cy.visit('/explore/data-jobs'); - // should navigate to get-started instead - cy.location().should((l) => expect(l.pathname).to.equal('/get-started')); - }); +describe("Routing for pages", () => { + describe("smoke", { tags: ["@smoke"] }, () => { + it("navigates to get-started page when explore page route is ignored", () => { + BasePagePO.executeCypressCommand( + "appConfigInterceptorDisableExploreRoute", + ); + // wait for login + BasePagePO.wireUserSession(); + BasePagePO.initInterceptors(); + BasePagePO.navigateTo(); + // go to explore page url + cy.visit("/explore/data-jobs"); + // should navigate to get-started instead + cy.location().should((l) => expect(l.pathname).to.equal("/get-started")); }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/e2e/integration/quickstart-operability/quickstart.spec.js b/projects/frontend/data-pipelines/gui/e2e/integration/quickstart-operability/quickstart.spec.js index 17fa3e1247..5f70fef349 100644 --- a/projects/frontend/data-pipelines/gui/e2e/integration/quickstart-operability/quickstart.spec.js +++ b/projects/frontend/data-pipelines/gui/e2e/integration/quickstart-operability/quickstart.spec.js @@ -5,28 +5,42 @@ /// -import { GetStartedPagePO } from '../../support/pages/get-started/get-started-page.po'; -import { DataJobsManagePage } from '../../support/pages/manage/data-jobs/data-jobs.po'; -import { BasePagePO } from '../../support/pages/base/base-page.po'; +import { GetStartedPagePO } from "../../support/pages/get-started/get-started-page.po"; +import { DataJobsManagePage } from "../../support/pages/manage/data-jobs/data-jobs.po"; +import { BasePagePO } from "../../support/pages/base/base-page.po"; -describe('Check if quickstart-vdk frontend is operational', () => { - describe('smoke', { tags: ['@smoke'] }, () => { - it('navigates to root page and the page loads correctly', () => { - const getStartedPage = BasePagePO.navigateToNoBootstrap(); - getStartedPage.getPageTitle().invoke('text').invoke('trim').should('eq', 'Get Started with Data Pipelines'); - }); +describe("Check if quickstart-vdk frontend is operational", () => { + describe("smoke", { tags: ["@smoke"] }, () => { + it("navigates to root page and the page loads correctly", () => { + const getStartedPage = BasePagePO.navigateToNoBootstrap(); + getStartedPage + .getPageTitle() + .invoke("text") + .invoke("trim") + .should("eq", "Get Started with Data Pipelines"); + }); - it('navigates to get-started page and the page loads correctly', () => { - const getStartedPage = GetStartedPagePO.navigateToNoBootstrap(); - getStartedPage.getPageTitle().invoke('text').invoke('trim').should('eq', 'Get Started with Data Pipelines'); - }); + it("navigates to get-started page and the page loads correctly", () => { + const getStartedPage = GetStartedPagePO.navigateToNoBootstrap(); + getStartedPage + .getPageTitle() + .invoke("text") + .invoke("trim") + .should("eq", "Get Started with Data Pipelines"); + }); - it('navigates to manage page and the page loads correctly', () => { - const dataJobsManagePage = DataJobsManagePage.navigateToNoBootstrap(); + it("navigates to manage page and the page loads correctly", () => { + const dataJobsManagePage = DataJobsManagePage.navigateToNoBootstrap(); - dataJobsManagePage.getPageTitle().scrollIntoView().should('be.visible').invoke('text').invoke('trim').should('eq', 'Manage Data Jobs'); + dataJobsManagePage + .getPageTitle() + .scrollIntoView() + .should("be.visible") + .invoke("text") + .invoke("trim") + .should("eq", "Manage Data Jobs"); - dataJobsManagePage.getDataGrid().scrollIntoView().should('be.visible'); - }); + dataJobsManagePage.getDataGrid().scrollIntoView().should("be.visible"); }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/e2e/plugins/helpers/authentication-helpers.plugins.js b/projects/frontend/data-pipelines/gui/e2e/plugins/helpers/authentication-helpers.plugins.js index 791298fd5c..4938765cec 100644 --- a/projects/frontend/data-pipelines/gui/e2e/plugins/helpers/authentication-helpers.plugins.js +++ b/projects/frontend/data-pipelines/gui/e2e/plugins/helpers/authentication-helpers.plugins.js @@ -6,28 +6,28 @@ let ACCESS_TOKEN; const getAccessTokenSynchronous = () => { - return ACCESS_TOKEN; + return ACCESS_TOKEN; }; const setAccessTokenSynchronous = (token) => { - ACCESS_TOKEN = token; + ACCESS_TOKEN = token; - return ACCESS_TOKEN; + return ACCESS_TOKEN; }; const getAccessTokenAsynchronous = () => { - return Promise.resolve(ACCESS_TOKEN); + return Promise.resolve(ACCESS_TOKEN); }; const setAccessTokenAsynchronous = (token) => { - ACCESS_TOKEN = token; + ACCESS_TOKEN = token; - return Promise.resolve(ACCESS_TOKEN); + return Promise.resolve(ACCESS_TOKEN); }; module.exports = { - getAccessTokenSynchronous, - setAccessTokenSynchronous, - getAccessTokenAsynchronous, - setAccessTokenAsynchronous + getAccessTokenSynchronous, + setAccessTokenSynchronous, + getAccessTokenAsynchronous, + setAccessTokenAsynchronous, }; diff --git a/projects/frontend/data-pipelines/gui/e2e/plugins/helpers/http-helpers.plugins.js b/projects/frontend/data-pipelines/gui/e2e/plugins/helpers/http-helpers.plugins.js index d1b18d1835..b0c4c3905c 100644 --- a/projects/frontend/data-pipelines/gui/e2e/plugins/helpers/http-helpers.plugins.js +++ b/projects/frontend/data-pipelines/gui/e2e/plugins/helpers/http-helpers.plugins.js @@ -3,15 +3,17 @@ * SPDX-License-Identifier: Apache-2.0 */ -const { default: axios } = require('axios'); +const { default: axios } = require("axios"); -const { cloneDeep } = require('lodash'); +const { cloneDeep } = require("lodash"); -const { Logger } = require('./logger-helpers.plugins'); +const { Logger } = require("./logger-helpers.plugins"); -const { trimArraysToNElements } = require('./util-helpers.plugins'); +const { trimArraysToNElements } = require("./util-helpers.plugins"); -const { getAccessTokenSynchronous } = require('./authentication-helpers.plugins'); +const { + getAccessTokenSynchronous, +} = require("./authentication-helpers.plugins"); /** * ** Create Http Get request. @@ -22,30 +24,37 @@ const { getAccessTokenSynchronous } = require('./authentication-helpers.plugins' * @returns {Promise>} */ const httpGetReq = (url, headers = {}, auth = undefined) => { - const startTime = new Date(); - - Logger.debug(`HTTP Get request for Url =>`, url); - Logger.profiling(`Start time: ${startTime.toISOString()}`); - - return axios - .request({ - url, - method: 'get', - headers: { - authorization: `Bearer ${getAccessTokenSynchronous()}`, - ...headers - }, - validateStatus: () => true, - auth - }) - .then((response) => { - const endTime = new Date(); - - Logger.debug(`HTTP Get response from Url with Body`, url, _filterResponseDataForDebug(response)); - Logger.profiling(`End time: ${endTime.toISOString()};`, `Duration: ${(endTime - startTime) / 1000}s`); - - return _throttle(response); - }); + const startTime = new Date(); + + Logger.debug(`HTTP Get request for Url =>`, url); + Logger.profiling(`Start time: ${startTime.toISOString()}`); + + return axios + .request({ + url, + method: "get", + headers: { + authorization: `Bearer ${getAccessTokenSynchronous()}`, + ...headers, + }, + validateStatus: () => true, + auth, + }) + .then((response) => { + const endTime = new Date(); + + Logger.debug( + `HTTP Get response from Url with Body`, + url, + _filterResponseDataForDebug(response), + ); + Logger.profiling( + `End time: ${endTime.toISOString()};`, + `Duration: ${(endTime - startTime) / 1000}s`, + ); + + return _throttle(response); + }); }; /** @@ -57,30 +66,37 @@ const httpGetReq = (url, headers = {}, auth = undefined) => { * @returns {Promise>} */ const httpPostReq = (url, body, headers = {}) => { - const startTime = new Date(); - - Logger.debug(`HTTP Post request to Url with Body =>`, url, body); - Logger.profiling(`Start time: ${startTime.toISOString()}`); - - return axios - .request({ - url: url, - method: 'post', - headers: { - authorization: `Bearer ${getAccessTokenSynchronous()}`, - ...headers - }, - data: body, - validateStatus: () => true - }) - .then((response) => { - const endTime = new Date(); - - Logger.debug(`HTTP Post response from Url with Body`, url, _filterResponseDataForDebug(response)); - Logger.profiling(`End time: ${endTime.toISOString()};`, `Duration: ${(endTime - startTime) / 1000}s`); - - return _throttle(response); - }); + const startTime = new Date(); + + Logger.debug(`HTTP Post request to Url with Body =>`, url, body); + Logger.profiling(`Start time: ${startTime.toISOString()}`); + + return axios + .request({ + url: url, + method: "post", + headers: { + authorization: `Bearer ${getAccessTokenSynchronous()}`, + ...headers, + }, + data: body, + validateStatus: () => true, + }) + .then((response) => { + const endTime = new Date(); + + Logger.debug( + `HTTP Post response from Url with Body`, + url, + _filterResponseDataForDebug(response), + ); + Logger.profiling( + `End time: ${endTime.toISOString()};`, + `Duration: ${(endTime - startTime) / 1000}s`, + ); + + return _throttle(response); + }); }; /** @@ -92,30 +108,37 @@ const httpPostReq = (url, body, headers = {}) => { * @returns {Promise>} */ const httpPatchReq = (url, body, headers = {}) => { - const startTime = new Date(); - - Logger.debug(`HTTP Patch request to Url with Body =>`, url, body); - Logger.profiling(`Start time: ${startTime.toISOString()}`); - - return axios - .request({ - url: url, - method: 'patch', - headers: { - authorization: `Bearer ${getAccessTokenSynchronous()}`, - ...headers - }, - data: body, - validateStatus: () => true - }) - .then((response) => { - const endTime = new Date(); - - Logger.debug(`HTTP Patch response from Url with Body`, url, _filterResponseDataForDebug(response)); - Logger.profiling(`End time: ${endTime.toISOString()};`, `Duration: ${(endTime - startTime) / 1000}s`); - - return _throttle(response); - }); + const startTime = new Date(); + + Logger.debug(`HTTP Patch request to Url with Body =>`, url, body); + Logger.profiling(`Start time: ${startTime.toISOString()}`); + + return axios + .request({ + url: url, + method: "patch", + headers: { + authorization: `Bearer ${getAccessTokenSynchronous()}`, + ...headers, + }, + data: body, + validateStatus: () => true, + }) + .then((response) => { + const endTime = new Date(); + + Logger.debug( + `HTTP Patch response from Url with Body`, + url, + _filterResponseDataForDebug(response), + ); + Logger.profiling( + `End time: ${endTime.toISOString()};`, + `Duration: ${(endTime - startTime) / 1000}s`, + ); + + return _throttle(response); + }); }; /** @@ -127,30 +150,37 @@ const httpPatchReq = (url, body, headers = {}) => { * @returns {Promise>} */ const httpPutReq = (url, body, headers = {}) => { - const startTime = new Date(); - - Logger.debug(`HTTP Put request to Url with Body =>`, url, body); - Logger.profiling(`Start time: ${startTime.toISOString()}`); - - return axios - .request({ - url: url, - method: 'put', - headers: { - authorization: `Bearer ${getAccessTokenSynchronous()}`, - ...headers - }, - data: body, - validateStatus: () => true - }) - .then((response) => { - const endTime = new Date(); - - Logger.debug(`HTTP Put response from Url with Body`, url, _filterResponseDataForDebug(response)); - Logger.profiling(`End time: ${endTime.toISOString()};`, `Duration: ${(endTime - startTime) / 1000}s`); - - return _throttle(response); - }); + const startTime = new Date(); + + Logger.debug(`HTTP Put request to Url with Body =>`, url, body); + Logger.profiling(`Start time: ${startTime.toISOString()}`); + + return axios + .request({ + url: url, + method: "put", + headers: { + authorization: `Bearer ${getAccessTokenSynchronous()}`, + ...headers, + }, + data: body, + validateStatus: () => true, + }) + .then((response) => { + const endTime = new Date(); + + Logger.debug( + `HTTP Put response from Url with Body`, + url, + _filterResponseDataForDebug(response), + ); + Logger.profiling( + `End time: ${endTime.toISOString()};`, + `Duration: ${(endTime - startTime) / 1000}s`, + ); + + return _throttle(response); + }); }; /** @@ -161,29 +191,36 @@ const httpPutReq = (url, body, headers = {}) => { * @returns {Promise>} */ const httpDeleteReq = (url, headers = {}) => { - const startTime = new Date(); - - Logger.debug(`HTTP Delete request for Url =>`, url); - Logger.profiling(`Start time: ${startTime.toISOString()}`); - - return axios - .request({ - url: url, - method: 'delete', - headers: { - authorization: `Bearer ${getAccessTokenSynchronous()}`, - ...headers - }, - validateStatus: () => true - }) - .then((response) => { - const endTime = new Date(); - - Logger.debug(`HTTP Delete response from Url with Body`, url, _filterResponseDataForDebug(response)); - Logger.profiling(`End time: ${endTime.toISOString()};`, `Duration: ${(endTime - startTime) / 1000}s`); - - return _throttle(response); - }); + const startTime = new Date(); + + Logger.debug(`HTTP Delete request for Url =>`, url); + Logger.profiling(`Start time: ${startTime.toISOString()}`); + + return axios + .request({ + url: url, + method: "delete", + headers: { + authorization: `Bearer ${getAccessTokenSynchronous()}`, + ...headers, + }, + validateStatus: () => true, + }) + .then((response) => { + const endTime = new Date(); + + Logger.debug( + `HTTP Delete response from Url with Body`, + url, + _filterResponseDataForDebug(response), + ); + Logger.profiling( + `End time: ${endTime.toISOString()};`, + `Duration: ${(endTime - startTime) / 1000}s`, + ); + + return _throttle(response); + }); }; /** @@ -194,25 +231,25 @@ const httpDeleteReq = (url, headers = {}) => { * @private */ const _filterResponseDataForDebug = (response) => { - return { - status: response.status, - statusText: response.statusText, - headers: { - ...response.headers, - authorization: '... removed from logs ...' - }, - config: { - timeout: response.config.timeout, - headers: { - ...response.config.headers, - authorization: '... removed from logs ...' - }, - url: response.config.url, - method: response.config.method, - data: response.config.data - }, - data: trimArraysToNElements(cloneDeep(response.data), 5) - }; + return { + status: response.status, + statusText: response.statusText, + headers: { + ...response.headers, + authorization: "... removed from logs ...", + }, + config: { + timeout: response.config.timeout, + headers: { + ...response.config.headers, + authorization: "... removed from logs ...", + }, + url: response.config.url, + method: response.config.method, + data: response.config.data, + }, + data: trimArraysToNElements(cloneDeep(response.data), 5), + }; }; /** @@ -223,12 +260,12 @@ const _filterResponseDataForDebug = (response) => { * @private */ const _throttle = (response) => { - return new Promise((resolve) => { - resolve(response); // Comment this line and uncomment bellow code if you want to test throttling in plugins api execution - // setTimeout(() => { - // resolve(response); - // }, _randomNumberBetween(2, 10) * 1000); - }); + return new Promise((resolve) => { + resolve(response); // Comment this line and uncomment bellow code if you want to test throttling in plugins api execution + // setTimeout(() => { + // resolve(response); + // }, _randomNumberBetween(2, 10) * 1000); + }); }; /** @@ -240,16 +277,16 @@ const _throttle = (response) => { * @private */ const _randomNumberBetween = (minBoundary, maxBoundary) => { - const _min = Math.ceil(minBoundary); - const _max = Math.ceil(maxBoundary); + const _min = Math.ceil(minBoundary); + const _max = Math.ceil(maxBoundary); - return Math.floor(Math.random() * (_max - _min + 1) + _min); + return Math.floor(Math.random() * (_max - _min + 1) + _min); }; module.exports = { - httpGetReq, - httpPostReq, - httpPatchReq, - httpPutReq, - httpDeleteReq + httpGetReq, + httpPostReq, + httpPatchReq, + httpPutReq, + httpDeleteReq, }; diff --git a/projects/frontend/data-pipelines/gui/e2e/plugins/helpers/job-helpers.plugins.js b/projects/frontend/data-pipelines/gui/e2e/plugins/helpers/job-helpers.plugins.js index d9cd33e559..b68694f5ba 100644 --- a/projects/frontend/data-pipelines/gui/e2e/plugins/helpers/job-helpers.plugins.js +++ b/projects/frontend/data-pipelines/gui/e2e/plugins/helpers/job-helpers.plugins.js @@ -3,14 +3,19 @@ * SPDX-License-Identifier: Apache-2.0 */ -const fs = require('fs'); -const path = require('path'); +const fs = require("fs"); +const path = require("path"); -const { Logger } = require('./logger-helpers.plugins'); +const { Logger } = require("./logger-helpers.plugins"); -const { applyGlobalEnvSettings } = require('./util-helpers.plugins'); +const { applyGlobalEnvSettings } = require("./util-helpers.plugins"); -const { httpDeleteReq, httpGetReq, httpPostReq, httpPatchReq } = require('./http-helpers.plugins'); +const { + httpDeleteReq, + httpGetReq, + httpPostReq, + httpPatchReq, +} = require("./http-helpers.plugins"); /** * ** Create and Deploy Data jobs if they don't exist. @@ -29,144 +34,187 @@ const { httpDeleteReq, httpGetReq, httpPostReq, httpPatchReq } = require('./http * @returns {Promise} */ const createDeployJobs = (taskConfig, config) => { - const startTime = new Date(); - - Logger.info('Trying to load Data jobs fixtures and binaries.'); - Logger.profiling(`Start time: ${startTime.toISOString()}`); - - return ( - _loadFixturesValuesAndBinariesPaths(taskConfig.relativePathToFixtures) - .then((commands) => { - return Promise.all( - // Send multiple parallel stream for Data jobs resolution - commands.map((command, index) => { - Logger.debug(`Data job fixture =>`, command.jobFixture); - - return ( - Promise - // Pass command down the stream - .resolve({ ...command, index }) - // Send requests to get Data job - .then((prevCommand) => { - return _getDataJobDeployments(prevCommand.jobFixture, config).then((response) => { - return { - ...prevCommand, - response - }; - }); - }) - // Check what is the state of requested Job, if it's deployed, or exist but not deployed, or doesn't exist at all - .then((prevCommand) => { - const jobFixture = prevCommand.jobFixture; - const jobName = jobFixture.job_name; - const httpResponse = prevCommand.response; - - let nextAction = 'done'; - - if (httpResponse.status === 200 && httpResponse.data.length > 0) { - Logger.info(`Data job "${jobName}" is already existing, therefore skipping creation and deployment.`); - } else if (httpResponse.status === 200 && httpResponse.data.length === 0) { - Logger.info(`Data job "${jobName}" exists, but it is not deployed. Will start deploying...`); - nextAction = 'deploy'; - } else if (httpResponse.status === 404) { - Logger.info(`Data job "${jobName}" not found. Will start creating...`); - nextAction = 'create'; - } - - return { - ...prevCommand, - nextAction - }; - }) - // Send request to create Job if its doesn't exist, otherwise pass execution to the next step - .then((prevCommand) => { - const currentAction = prevCommand.nextAction; - const jobFixture = prevCommand.jobFixture; - const jobName = jobFixture.job_name; - - if (currentAction === 'create') { - return _createDataJob(jobFixture, config).then((response) => { - if (response.status === 201) { - return { - ...prevCommand, - nextAction: 'deploy' - }; - } else { - Logger.error(`Failed to create Data job "${jobName}"`); - - throw new Error(`Failed to create Data job "${jobName}"`); - } - }); - } - - return { - ...prevCommand - }; - }) - // Send request to deploy Job if it was created on previous step - .then((prevCommandOuter) => { - const currentAction = prevCommandOuter.nextAction; - const jobFixture = prevCommandOuter.jobFixture; - const pathToZipFile = prevCommandOuter.pathToZipFile; - const jobName = jobFixture.job_name; - - if (currentAction === 'deploy') { - if (!pathToZipFile) { - Logger.info(`Data job "${jobName}" doesn't have path to job zip file, therefore skipping deployment.`); - } else { - Logger.debug(`Loading Job Zip binary located on =>`, pathToZipFile); - - let jobZipFile; - - try { - jobZipFile = fs.readFileSync(pathToZipFile, { encoding: 'base64' }); - } catch (error) { - Logger.error(`Cannot read file located on =>`, pathToZipFile); - - throw error; - } - - return new Promise((resolve) => { - setTimeout(() => resolve(prevCommandOuter), prevCommandOuter.index * 2000 + 250); - }).then((prevCommandInner) => { - return _deployDataJob(jobFixture, jobZipFile, config).then((result) => { - return { - ...prevCommandInner, - ...result - }; - }); - }); - } - } - - return { - ...prevCommandOuter, - code: 0 - }; - }) - // Final step to validate if everything is OK - .then((prevCommand) => { - if (prevCommand.code === 0) { - return true; - } - - const jobFixture = prevCommand.jobFixture; - const jobName = jobFixture.job_name; - - Logger.error(`Failed to create/deploy Data job "${jobName}"`); - - throw new Error(`Failed to create/deploy Data job "${jobName}".`); - }) + const startTime = new Date(); + + Logger.info("Trying to load Data jobs fixtures and binaries."); + Logger.profiling(`Start time: ${startTime.toISOString()}`); + + return ( + _loadFixturesValuesAndBinariesPaths(taskConfig.relativePathToFixtures) + .then((commands) => { + return Promise.all( + // Send multiple parallel stream for Data jobs resolution + commands.map((command, index) => { + Logger.debug(`Data job fixture =>`, command.jobFixture); + + return ( + Promise + // Pass command down the stream + .resolve({ ...command, index }) + // Send requests to get Data job + .then((prevCommand) => { + return _getDataJobDeployments( + prevCommand.jobFixture, + config, + ).then((response) => { + return { + ...prevCommand, + response, + }; + }); + }) + // Check what is the state of requested Job, if it's deployed, or exist but not deployed, or doesn't exist at all + .then((prevCommand) => { + const jobFixture = prevCommand.jobFixture; + const jobName = jobFixture.job_name; + const httpResponse = prevCommand.response; + + let nextAction = "done"; + + if ( + httpResponse.status === 200 && + httpResponse.data.length > 0 + ) { + Logger.info( + `Data job "${jobName}" is already existing, therefore skipping creation and deployment.`, + ); + } else if ( + httpResponse.status === 200 && + httpResponse.data.length === 0 + ) { + Logger.info( + `Data job "${jobName}" exists, but it is not deployed. Will start deploying...`, + ); + nextAction = "deploy"; + } else if (httpResponse.status === 404) { + Logger.info( + `Data job "${jobName}" not found. Will start creating...`, + ); + nextAction = "create"; + } + + return { + ...prevCommand, + nextAction, + }; + }) + // Send request to create Job if its doesn't exist, otherwise pass execution to the next step + .then((prevCommand) => { + const currentAction = prevCommand.nextAction; + const jobFixture = prevCommand.jobFixture; + const jobName = jobFixture.job_name; + + if (currentAction === "create") { + return _createDataJob(jobFixture, config).then( + (response) => { + if (response.status === 201) { + return { + ...prevCommand, + nextAction: "deploy", + }; + } else { + Logger.error( + `Failed to create Data job "${jobName}"`, + ); + + throw new Error( + `Failed to create Data job "${jobName}"`, + ); + } + }, + ); + } + + return { + ...prevCommand, + }; + }) + // Send request to deploy Job if it was created on previous step + .then((prevCommandOuter) => { + const currentAction = prevCommandOuter.nextAction; + const jobFixture = prevCommandOuter.jobFixture; + const pathToZipFile = prevCommandOuter.pathToZipFile; + const jobName = jobFixture.job_name; + + if (currentAction === "deploy") { + if (!pathToZipFile) { + Logger.info( + `Data job "${jobName}" doesn't have path to job zip file, therefore skipping deployment.`, + ); + } else { + Logger.debug( + `Loading Job Zip binary located on =>`, + pathToZipFile, + ); + + let jobZipFile; + + try { + jobZipFile = fs.readFileSync(pathToZipFile, { + encoding: "base64", + }); + } catch (error) { + Logger.error( + `Cannot read file located on =>`, + pathToZipFile, ); - }) - ); - }) - // Deployment to its end for all Jobs - .finally(() => { - const endTime = new Date(); - Logger.profiling(`End time: ${endTime.toISOString()};`, `Duration: ${(endTime - startTime) / 1000}s`); - }) - ); + + throw error; + } + + return new Promise((resolve) => { + setTimeout( + () => resolve(prevCommandOuter), + prevCommandOuter.index * 2000 + 250, + ); + }).then((prevCommandInner) => { + return _deployDataJob( + jobFixture, + jobZipFile, + config, + ).then((result) => { + return { + ...prevCommandInner, + ...result, + }; + }); + }); + } + } + + return { + ...prevCommandOuter, + code: 0, + }; + }) + // Final step to validate if everything is OK + .then((prevCommand) => { + if (prevCommand.code === 0) { + return true; + } + + const jobFixture = prevCommand.jobFixture; + const jobName = jobFixture.job_name; + + Logger.error(`Failed to create/deploy Data job "${jobName}"`); + + throw new Error( + `Failed to create/deploy Data job "${jobName}".`, + ); + }) + ); + }), + ); + }) + // Deployment to its end for all Jobs + .finally(() => { + const endTime = new Date(); + Logger.profiling( + `End time: ${endTime.toISOString()};`, + `Duration: ${(endTime - startTime) / 1000}s`, + ); + }) + ); }; /** @@ -186,120 +234,158 @@ const createDeployJobs = (taskConfig, config) => { * @returns {Promise} */ const provideDataJobsExecutions = (taskConfig, config) => { - const startTime = new Date(); - const jobExecutionTimeout = 180000; // Wait up to 3 min per Job for execution to complete - - Logger.info(`Trying to provide executions for Data job fixtures`); - Logger.profiling(`Start time: ${startTime.toISOString()}`); - - return ( - _loadFixturesValuesAndBinariesPaths(taskConfig.relativePathToFixtures) - .then((commands) => { - // Send requests to get data for all the Jobs - return Promise.all( - commands.map((command, index) => { - Logger.debug(`Data job fixture =>`, command.jobFixture); - - const jobFixture = command.jobFixture; - const jobName = jobFixture.job_name; - const targetExecutions = taskConfig.relativePathToFixtures[index]?.executions ?? 2; - - Logger.info(`Trying to provide at least ${targetExecutions} executions for Data job ${jobName}`); - - // Pass the command down the stream with timeouts to avoid glitch on the server - return ( - new Promise((resolve) => { - setTimeout(() => resolve({ ...command }), index * 2150 + 350); - }) - // Get Data job executions - .then((prevCommandOuter) => { - return _getDataJobExecutionsArray(prevCommandOuter.jobFixture, config).then((executions) => { - Logger.info(`For Data job "${jobName}" found ${executions.length} executions, while target is ${targetExecutions}`); - - if (executions.length >= targetExecutions) { - Logger.info(`For Data job "${jobName}" skipping serial execution, because expected number found`); - - if (executions.length > targetExecutions) { - return { - ...prevCommandOuter, - executions, - code: 0 - }; - } - - // Wait to finish if there is already executing Data job and continue - return waitForDataJobExecutionToComplete(jobFixture, jobExecutionTimeout, config).then(() => { - return { - ...prevCommandOuter, - executions, - code: 0 - }; - }); - } - - // Wait to finish if there is already executing Data job and continue - return ( - waitForDataJobExecutionToComplete(jobFixture, jobExecutionTimeout, config) - .then(() => { - return { - ...prevCommandOuter, - executions, - code: 0 - }; - }) - // Get Data job last deployment - .then((prevCommandInner) => { - return _getJobLastDeployment(jobFixture, config).then((lastDeployment) => { - return { - ...prevCommandInner, - lastDeployment, - code: 0 - }; - }); - }) - // If last deployment found trigger execution for Data job - .then((prevCommandInner) => { - if (prevCommandInner.lastDeployment) { - return _triggerExecutionForJob(jobFixture, jobExecutionTimeout, prevCommandInner.lastDeployment, targetExecutions - prevCommandInner.executions.length, config).then((result) => { - return { - ...prevCommandInner, - ...result - }; - }); - } else { - Logger.error(`For Data job "${jobName}" last deployment was not found`); - } - - return { - ...prevCommandInner, - code: 1 - }; - }) - ); - }); - }) - // Final step to validate if everything is OK - .then((prevCommand) => { - if (prevCommand.code === 0) { - Logger.info(`Provided at least ${targetExecutions} executions for Data job fixtures`); - - return true; - } - - Logger.error(`Failed to provide at least ${targetExecutions} for Data job "${jobName}"`); - - throw new Error(`Failed to provide at least ${targetExecutions} for Data job "${jobName}"`); - }) - ); - }) - ); - }) - // Executions to its end for all Jobs - .finally(() => { - const endTime = new Date(); - Logger.profiling(`End time: ${endTime.toISOString()};`, `Duration: ${(endTime - startTime) / 1000}s`); - }) - ); + const startTime = new Date(); + const jobExecutionTimeout = 180000; // Wait up to 3 min per Job for execution to complete + + Logger.info(`Trying to provide executions for Data job fixtures`); + Logger.profiling(`Start time: ${startTime.toISOString()}`); + + return ( + _loadFixturesValuesAndBinariesPaths(taskConfig.relativePathToFixtures) + .then((commands) => { + // Send requests to get data for all the Jobs + return Promise.all( + commands.map((command, index) => { + Logger.debug(`Data job fixture =>`, command.jobFixture); + + const jobFixture = command.jobFixture; + const jobName = jobFixture.job_name; + const targetExecutions = + taskConfig.relativePathToFixtures[index]?.executions ?? 2; + + Logger.info( + `Trying to provide at least ${targetExecutions} executions for Data job ${jobName}`, + ); + + // Pass the command down the stream with timeouts to avoid glitch on the server + return ( + new Promise((resolve) => { + setTimeout(() => resolve({ ...command }), index * 2150 + 350); + }) + // Get Data job executions + .then((prevCommandOuter) => { + return _getDataJobExecutionsArray( + prevCommandOuter.jobFixture, + config, + ).then((executions) => { + Logger.info( + `For Data job "${jobName}" found ${executions.length} executions, while target is ${targetExecutions}`, + ); + + if (executions.length >= targetExecutions) { + Logger.info( + `For Data job "${jobName}" skipping serial execution, because expected number found`, + ); + + if (executions.length > targetExecutions) { + return { + ...prevCommandOuter, + executions, + code: 0, + }; + } + + // Wait to finish if there is already executing Data job and continue + return waitForDataJobExecutionToComplete( + jobFixture, + jobExecutionTimeout, + config, + ).then(() => { + return { + ...prevCommandOuter, + executions, + code: 0, + }; + }); + } + + // Wait to finish if there is already executing Data job and continue + return ( + waitForDataJobExecutionToComplete( + jobFixture, + jobExecutionTimeout, + config, + ) + .then(() => { + return { + ...prevCommandOuter, + executions, + code: 0, + }; + }) + // Get Data job last deployment + .then((prevCommandInner) => { + return _getJobLastDeployment(jobFixture, config).then( + (lastDeployment) => { + return { + ...prevCommandInner, + lastDeployment, + code: 0, + }; + }, + ); + }) + // If last deployment found trigger execution for Data job + .then((prevCommandInner) => { + if (prevCommandInner.lastDeployment) { + return _triggerExecutionForJob( + jobFixture, + jobExecutionTimeout, + prevCommandInner.lastDeployment, + targetExecutions - + prevCommandInner.executions.length, + config, + ).then((result) => { + return { + ...prevCommandInner, + ...result, + }; + }); + } else { + Logger.error( + `For Data job "${jobName}" last deployment was not found`, + ); + } + + return { + ...prevCommandInner, + code: 1, + }; + }) + ); + }); + }) + // Final step to validate if everything is OK + .then((prevCommand) => { + if (prevCommand.code === 0) { + Logger.info( + `Provided at least ${targetExecutions} executions for Data job fixtures`, + ); + + return true; + } + + Logger.error( + `Failed to provide at least ${targetExecutions} for Data job "${jobName}"`, + ); + + throw new Error( + `Failed to provide at least ${targetExecutions} for Data job "${jobName}"`, + ); + }) + ); + }), + ); + }) + // Executions to its end for all Jobs + .finally(() => { + const endTime = new Date(); + Logger.profiling( + `End time: ${endTime.toISOString()};`, + `Duration: ${(endTime - startTime) / 1000}s`, + ); + }) + ); }; /** @@ -319,49 +405,69 @@ const provideDataJobsExecutions = (taskConfig, config) => { * @returns {Promise} */ const changeJobsStatusesFixtures = (taskConfig, config) => { - const startTime = new Date(); - - Logger.info(`Trying to disable Data Jobs for provided Data Jobs fixtures`); - Logger.profiling(`Start time: ${startTime.toISOString()}`); - - return ( - _loadFixturesValuesAndBinariesPaths(taskConfig.relativePathToFixtures) - .then((commands) => { - const jobFixtures = commands.map((command) => applyGlobalEnvSettings(command.jobFixture)); - - return Promise.all( - jobFixtures.map((jobFixture) => { - _getJobLastDeployment(jobFixture, config).then((lastDeployment) => { - if (!lastDeployment || !lastDeployment.job_version) { - Logger.error(`Deployment doesn't exist for Data Job "${jobFixture?.job_name}", skipping status change`); - - return false; - } - - const deploymentHash = lastDeployment.job_version; - - return _updateDataJob(jobFixture.team, jobFixture.job_name, deploymentHash, { enabled: taskConfig.status }, config).then((updateResponse) => { - if (updateResponse.status >= 200 && updateResponse.status < 300) { - Logger.info(`Data Job "${jobFixture?.job_name}" status changed to "${taskConfig.status}"`); - - return true; - } + const startTime = new Date(); + + Logger.info(`Trying to disable Data Jobs for provided Data Jobs fixtures`); + Logger.profiling(`Start time: ${startTime.toISOString()}`); + + return ( + _loadFixturesValuesAndBinariesPaths(taskConfig.relativePathToFixtures) + .then((commands) => { + const jobFixtures = commands.map((command) => + applyGlobalEnvSettings(command.jobFixture), + ); + + return Promise.all( + jobFixtures.map((jobFixture) => { + _getJobLastDeployment(jobFixture, config).then((lastDeployment) => { + if (!lastDeployment || !lastDeployment.job_version) { + Logger.error( + `Deployment doesn't exist for Data Job "${jobFixture?.job_name}", skipping status change`, + ); - Logger.error(`Data Job "${jobFixture?.job_name}" failed status change to "${taskConfig.status}"`); + return false; + } + + const deploymentHash = lastDeployment.job_version; + + return _updateDataJob( + jobFixture.team, + jobFixture.job_name, + deploymentHash, + { enabled: taskConfig.status }, + config, + ).then((updateResponse) => { + if ( + updateResponse.status >= 200 && + updateResponse.status < 300 + ) { + Logger.info( + `Data Job "${jobFixture?.job_name}" status changed to "${taskConfig.status}"`, + ); + + return true; + } - return false; - }); - }); - }) + Logger.error( + `Data Job "${jobFixture?.job_name}" failed status change to "${taskConfig.status}"`, ); - }) - .then((responses) => responses.map((value) => !!value)) - // Status change to its end for all Jobs - .finally(() => { - const endTime = new Date(); - Logger.profiling(`End time: ${endTime.toISOString()};`, `Duration: ${(endTime - startTime) / 1000}s`); - }) - ); + + return false; + }); + }); + }), + ); + }) + .then((responses) => responses.map((value) => !!value)) + // Status change to its end for all Jobs + .finally(() => { + const endTime = new Date(); + Logger.profiling( + `End time: ${endTime.toISOString()};`, + `Duration: ${(endTime - startTime) / 1000}s`, + ); + }) + ); }; /** @@ -382,46 +488,51 @@ const changeJobsStatusesFixtures = (taskConfig, config) => { * @returns {Promise} */ const deleteJobsFixtures = (taskConfig, config) => { - const startTime = new Date(); - - Logger.info(`Trying to delete Data Jobs for provided Data Jobs fixtures`); - Logger.profiling(`Start time: ${startTime.toISOString()}`); - - return ( - _loadFixturesValuesAndBinariesPaths(taskConfig.relativePathToFixtures) - .then((commands) => { - const jobFixtures = commands.map((command) => command.jobFixture); - - // Send requests to delete data for fixtures - return deleteJobs(jobFixtures, config).then((states) => { - const successfulDeletion = []; - const unsuccessfulDeletion = []; - - states.forEach((isSuccessful, index) => { - if (isSuccessful) { - successfulDeletion.push(jobFixtures[index].job_name); - } else { - unsuccessfulDeletion.push(jobFixtures[index].job_name); - } - }); + const startTime = new Date(); + + Logger.info(`Trying to delete Data Jobs for provided Data Jobs fixtures`); + Logger.profiling(`Start time: ${startTime.toISOString()}`); + + return ( + _loadFixturesValuesAndBinariesPaths(taskConfig.relativePathToFixtures) + .then((commands) => { + const jobFixtures = commands.map((command) => command.jobFixture); + + // Send requests to delete data for fixtures + return deleteJobs(jobFixtures, config).then((states) => { + const successfulDeletion = []; + const unsuccessfulDeletion = []; + + states.forEach((isSuccessful, index) => { + if (isSuccessful) { + successfulDeletion.push(jobFixtures[index].job_name); + } else { + unsuccessfulDeletion.push(jobFixtures[index].job_name); + } + }); - if (successfulDeletion.length > 0) { - Logger.info(`Deleted Data Jobs: ${successfulDeletion.toString()}`); - } + if (successfulDeletion.length > 0) { + Logger.info(`Deleted Data Jobs: ${successfulDeletion.toString()}`); + } - if (!taskConfig.optional && unsuccessfulDeletion.length > 0) { - Logger.error(`Failed to delete Data Jobs: ${unsuccessfulDeletion.toString()}`); - } + if (!taskConfig.optional && unsuccessfulDeletion.length > 0) { + Logger.error( + `Failed to delete Data Jobs: ${unsuccessfulDeletion.toString()}`, + ); + } - return true; - }); - }) - // Executions to its end for all Jobs - .finally(() => { - const endTime = new Date(); - Logger.profiling(`End time: ${endTime.toISOString()};`, `Duration: ${(endTime - startTime) / 1000}s`); - }) - ); + return true; + }); + }) + // Executions to its end for all Jobs + .finally(() => { + const endTime = new Date(); + Logger.profiling( + `End time: ${endTime.toISOString()};`, + `Duration: ${(endTime - startTime) / 1000}s`, + ); + }) + ); }; /** @@ -432,39 +543,39 @@ const deleteJobsFixtures = (taskConfig, config) => { * @returns {Promise} */ const deleteJobs = (jobFixtures, config) => { - return Promise.all( - jobFixtures.map((injectedJobFixture) => { - const jobFixture = applyGlobalEnvSettings(injectedJobFixture); - const jobName = jobFixture.job_name; + return Promise.all( + jobFixtures.map((injectedJobFixture) => { + const jobFixture = applyGlobalEnvSettings(injectedJobFixture); + const jobName = jobFixture.job_name; - Logger.info(`Trying to delete Data job "${jobName}"`); + Logger.info(`Trying to delete Data job "${jobName}"`); - return _getDataJob(jobFixture, config).then((outerResponse) => { - if (outerResponse.status === 200) { - return _deleteDataJob(jobFixture, config).then((innerResponse) => { - if (innerResponse.status === 200) { - Logger.info(`Data job "${jobName}" deleted`); + return _getDataJob(jobFixture, config).then((outerResponse) => { + if (outerResponse.status === 200) { + return _deleteDataJob(jobFixture, config).then((innerResponse) => { + if (innerResponse.status === 200) { + Logger.info(`Data job "${jobName}" deleted`); - return true; - } + return true; + } - Logger.error(`Data job "${jobName}" delete failed`); + Logger.error(`Data job "${jobName}" delete failed`); - return false; - }); - } + return false; + }); + } - if (outerResponse.status === 404) { - Logger.info(`Data job "${jobName}" doesn't exist`); - } else { - Logger.info(`Data job "${jobName}" failed to get job details`); - Logger.error(`Data job "${jobName}" delete failed`); - } + if (outerResponse.status === 404) { + Logger.info(`Data job "${jobName}" doesn't exist`); + } else { + Logger.info(`Data job "${jobName}" failed to get job details`); + Logger.error(`Data job "${jobName}" delete failed`); + } - return false; - }); - }) - ).then((responses) => responses.map((value) => !!value)); + return false; + }); + }), + ).then((responses) => responses.map((value) => !!value)); }; /** @@ -475,55 +586,74 @@ const deleteJobs = (jobFixtures, config) => { * @param {Cypress.ResolvedConfigOptions} config * @returns {Promise<{code: number}>} */ -const waitForDataJobExecutionToComplete = (injectedJobFixture, jobExecutionTimeout, config) => { - const jobFixture = applyGlobalEnvSettings(injectedJobFixture); - const jobName = jobFixture.job_name; - const pollInterval = 10000; // retry every 10s - - return _getDataJobExecutions(jobFixture, config).then((response) => { - if (response.status !== 200) { - Logger.error(`Failed Data job "${jobName}" executions polling`); - - return { - code: 0 - }; - } +const waitForDataJobExecutionToComplete = ( + injectedJobFixture, + jobExecutionTimeout, + config, +) => { + const jobFixture = applyGlobalEnvSettings(injectedJobFixture); + const jobName = jobFixture.job_name; + const pollInterval = 10000; // retry every 10s + + return _getDataJobExecutions(jobFixture, config).then((response) => { + if (response.status !== 200) { + Logger.error(`Failed Data job "${jobName}" executions polling`); + + return { + code: 0, + }; + } - const jobExecutions = response.data.sort(compareDatesASC); + const jobExecutions = response.data.sort(compareDatesASC); - if (jobExecutions.length === 0) { - Logger.info(`There is no Data job "${jobName}" execution to wait`); + if (jobExecutions.length === 0) { + Logger.info(`There is no Data job "${jobName}" execution to wait`); - return { - code: 0 - }; - } + return { + code: 0, + }; + } - const lastExecution = jobExecutions[jobExecutions.length - 1]; - const lastExecutionStatus = lastExecution.status.toLowerCase(); + const lastExecution = jobExecutions[jobExecutions.length - 1]; + const lastExecutionStatus = lastExecution.status.toLowerCase(); - if (lastExecutionStatus !== 'running' && lastExecutionStatus !== 'submitted') { - Logger.info(`Data job "${jobName}" executed successfully, polling completed`); + if ( + lastExecutionStatus !== "running" && + lastExecutionStatus !== "submitted" + ) { + Logger.info( + `Data job "${jobName}" executed successfully, polling completed`, + ); - return { - code: 0 - }; - } + return { + code: 0, + }; + } - if (jobExecutionTimeout <= 0) { - Logger.error(`Data job "${jobName}" waiting time for execution exceeded, skipping and continue with next steps`); + if (jobExecutionTimeout <= 0) { + Logger.error( + `Data job "${jobName}" waiting time for execution exceeded, skipping and continue with next steps`, + ); - return { - code: 1 - }; - } + return { + code: 1, + }; + } - Logger.info(`Data job "${jobName}", still executing... retry after ${pollInterval / 1000} seconds`); + Logger.info( + `Data job "${jobName}", still executing... retry after ${pollInterval / 1000} seconds`, + ); - return new Promise((resolve) => { - setTimeout(() => resolve(), pollInterval); - }).then(() => waitForDataJobExecutionToComplete(jobFixture, jobExecutionTimeout - pollInterval, config)); - }); + return new Promise((resolve) => { + setTimeout(() => resolve(), pollInterval); + }).then(() => + waitForDataJobExecutionToComplete( + jobFixture, + jobExecutionTimeout - pollInterval, + config, + ), + ); + }); }; /** @@ -533,26 +663,35 @@ const waitForDataJobExecutionToComplete = (injectedJobFixture, jobExecutionTimeo * @return {Promise} */ const deleteDataJobsWithoutDeployment = (config) => { - const url = `${config.env['data_jobs_url']}/data-jobs/for-team/cy-e2e-vdk/jobs?operationName=jobsQuery&variables=%7B%22pageNumber%22:1,%22pageSize%22:100,%22filter%22:%5B%5D,%22search%22:%22%22%7D&query=query%20jobsQuery($filter:%20%5BPredicate%5D,%20$search:%20String,%20$pageNumber:%20Int,%20$pageSize:%20Int)%20%7B%0A%20%20jobs(%0A%20%20%20%20pageNumber:%20$pageNumber%0A%20%20%20%20pageSize:%20$pageSize%0A%20%20%20%20filter:%20$filter%0A%20%20%20%20search:%20$search%0A%20%20)%20%7B%0A%20%20%20%20content%20%7B%0A%20%20%20%20%20%20jobName%0A%20%20%20%20%20%20config%20%7B%0A%20%20%20%20%20%20%20%20team%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20deployments%20%7B%0A%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20enabled%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20totalPages%0A%20%20%20%20totalItems%0A%20%20%7D%0A%7D`; - - return httpGetReq(url).then((response) => { - const jobs = response.data.data.content; - const remappedJobs = jobs - .filter((job) => !job.deployments && job.jobName?.includes('cy-e2e-vdk')) - .map((job) => { - return { - job_name: job.jobName, - team: job.config?.team ?? 'cy-e2e-vdk' - }; - }); - - // log which Data Jobs should be deleted - remappedJobs.forEach((job, index) => { - Logger.debug('Deleting', index + 1, 'jobName:', job.jobName, 'team:', job?.config?.team, 'deployments:', job.deployments); - }); + const url = `${config.env["data_jobs_url"]}/data-jobs/for-team/cy-e2e-vdk/jobs?operationName=jobsQuery&variables=%7B%22pageNumber%22:1,%22pageSize%22:100,%22filter%22:%5B%5D,%22search%22:%22%22%7D&query=query%20jobsQuery($filter:%20%5BPredicate%5D,%20$search:%20String,%20$pageNumber:%20Int,%20$pageSize:%20Int)%20%7B%0A%20%20jobs(%0A%20%20%20%20pageNumber:%20$pageNumber%0A%20%20%20%20pageSize:%20$pageSize%0A%20%20%20%20filter:%20$filter%0A%20%20%20%20search:%20$search%0A%20%20)%20%7B%0A%20%20%20%20content%20%7B%0A%20%20%20%20%20%20jobName%0A%20%20%20%20%20%20config%20%7B%0A%20%20%20%20%20%20%20%20team%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20deployments%20%7B%0A%20%20%20%20%20%20%20%20id%0A%20%20%20%20%20%20%20%20enabled%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%20%20%20%20totalPages%0A%20%20%20%20totalItems%0A%20%20%7D%0A%7D`; - return _deleteDataJobsWithoutDeployment(remappedJobs, config); + return httpGetReq(url).then((response) => { + const jobs = response.data.data.content; + const remappedJobs = jobs + .filter((job) => !job.deployments && job.jobName?.includes("cy-e2e-vdk")) + .map((job) => { + return { + job_name: job.jobName, + team: job.config?.team ?? "cy-e2e-vdk", + }; + }); + + // log which Data Jobs should be deleted + remappedJobs.forEach((job, index) => { + Logger.debug( + "Deleting", + index + 1, + "jobName:", + job.jobName, + "team:", + job?.config?.team, + "deployments:", + job.deployments, + ); }); + + return _deleteDataJobsWithoutDeployment(remappedJobs, config); + }); }; /** @@ -564,10 +703,10 @@ const deleteDataJobsWithoutDeployment = (config) => { * @private */ const compareDatesASC = (left, right) => { - const leftStartTime = left.start_time ? left.start_time : 0; - const rightStartTime = right.start_time ? right.start_time : 0; + const leftStartTime = left.start_time ? left.start_time : 0; + const rightStartTime = right.start_time ? right.start_time : 0; - return new Date(leftStartTime).getTime() - new Date(rightStartTime).getTime(); + return new Date(leftStartTime).getTime() - new Date(rightStartTime).getTime(); }; /** @@ -582,32 +721,58 @@ const compareDatesASC = (left, right) => { * @returns {Promise<{code: number}>} * @private */ -const _triggerExecutionForJob = (jobFixture, jobExecutionTimeout, lastDeployment, neededExecutions, config, counterOfExecutions = 0) => { - const jobName = jobFixture.job_name; - - if (counterOfExecutions === 0) { - Logger.info(`Submitting ${neededExecutions} serial executions for Data job "${jobName}"`); - } else { - Logger.info(`Submitted ${counterOfExecutions} executions for Data job "${jobName}" and left ${neededExecutions - counterOfExecutions}`); - } +const _triggerExecutionForJob = ( + jobFixture, + jobExecutionTimeout, + lastDeployment, + neededExecutions, + config, + counterOfExecutions = 0, +) => { + const jobName = jobFixture.job_name; + + if (counterOfExecutions === 0) { + Logger.info( + `Submitting ${neededExecutions} serial executions for Data job "${jobName}"`, + ); + } else { + Logger.info( + `Submitted ${counterOfExecutions} executions for Data job "${jobName}" and left ${neededExecutions - counterOfExecutions}`, + ); + } - if (neededExecutions === counterOfExecutions) { - return Promise.resolve({ code: 0 }); - } + if (neededExecutions === counterOfExecutions) { + return Promise.resolve({ code: 0 }); + } - // Trigger job execution - return _executeJob(jobFixture, lastDeployment.id, config) - .then((result) => { - if (result.code === 0) { - return new Promise((resolve) => { - setTimeout(() => resolve({ code: 0 }), 5000); - }); - } - - return result; - }) - .then(() => waitForDataJobExecutionToComplete(jobFixture, jobExecutionTimeout, config)) - .then(() => _triggerExecutionForJob(jobFixture, jobExecutionTimeout, lastDeployment, neededExecutions, config, counterOfExecutions + 1)); + // Trigger job execution + return _executeJob(jobFixture, lastDeployment.id, config) + .then((result) => { + if (result.code === 0) { + return new Promise((resolve) => { + setTimeout(() => resolve({ code: 0 }), 5000); + }); + } + + return result; + }) + .then(() => + waitForDataJobExecutionToComplete( + jobFixture, + jobExecutionTimeout, + config, + ), + ) + .then(() => + _triggerExecutionForJob( + jobFixture, + jobExecutionTimeout, + lastDeployment, + neededExecutions, + config, + counterOfExecutions + 1, + ), + ); }; /** @@ -620,21 +785,21 @@ const _triggerExecutionForJob = (jobFixture, jobExecutionTimeout, lastDeployment * @private */ const _executeJob = (jobFixture, deploymentId, config) => { - const jobName = jobFixture.job_name; - const teamName = jobFixture.team; - const url = `${config.env['data_jobs_url']}/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments/${deploymentId}/executions`; + const jobName = jobFixture.job_name; + const teamName = jobFixture.team; + const url = `${config.env["data_jobs_url"]}/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments/${deploymentId}/executions`; - Logger.info(`Submitting Data job execution for "${jobName}"`); + Logger.info(`Submitting Data job execution for "${jobName}"`); - return httpPostReq(url, {}).then((response) => { - if (response.status >= 400) { - Logger.error(`Failed to execute Data job "${jobName}"`); - } + return httpPostReq(url, {}).then((response) => { + if (response.status >= 400) { + Logger.error(`Failed to execute Data job "${jobName}"`); + } - return { - code: 0 - }; - }); + return { + code: 0, + }; + }); }; /** @@ -646,17 +811,17 @@ const _executeJob = (jobFixture, deploymentId, config) => { * @private */ const _getDataJobExecutionsArray = (jobFixture, config) => { - const jobName = jobFixture.job_name; + const jobName = jobFixture.job_name; - return _getDataJobExecutions(jobFixture, config).then((response) => { - if (response.status !== 200) { - Logger.error(`Failed to get Data job "${jobName}" executions`); + return _getDataJobExecutions(jobFixture, config).then((response) => { + if (response.status !== 200) { + Logger.error(`Failed to get Data job "${jobName}" executions`); - return []; - } + return []; + } - return response.data && response.data.length ? response.data : []; - }); + return response.data && response.data.length ? response.data : []; + }); }; /** @@ -668,17 +833,19 @@ const _getDataJobExecutionsArray = (jobFixture, config) => { * @private */ const _getJobLastDeployment = (jobFixture, config) => { - const jobName = jobFixture.job_name; + const jobName = jobFixture.job_name; - return _getDataJobDeployments(jobFixture, config).then((response) => { - if (response.status !== 200) { - Logger.error(`Failed to get Data job "${jobName}" deployments`); + return _getDataJobDeployments(jobFixture, config).then((response) => { + if (response.status !== 200) { + Logger.error(`Failed to get Data job "${jobName}" deployments`); - return null; - } + return null; + } - return response.data && response.data.length ? response.data[response.data.length - 1] : null; - }); + return response.data && response.data.length + ? response.data[response.data.length - 1] + : null; + }); }; /** @@ -691,54 +858,72 @@ const _getJobLastDeployment = (jobFixture, config) => { * @private */ const _deployDataJob = (jobFixture, jobZipFile, config) => { - const jobName = jobFixture.job_name; - const teamName = jobFixture.team; - const waitForJobDeploymentTimeout = 420000; // Wait up to 7 min for deployment to complete. - - Logger.info(`Deploying Data job "${jobName}"`); - - // Upload Data Job resources - return _sendDataJobResources(teamName, jobName, jobZipFile, config).then((response1) => { - if (response1.status > 400) { - Logger.error(`Failed to send Data job "${jobName}" resources to server`); + const jobName = jobFixture.job_name; + const teamName = jobFixture.team; + const waitForJobDeploymentTimeout = 420000; // Wait up to 7 min for deployment to complete. - return { - code: 1 - }; - } - - /** - * @type {{version_sha: string}} - */ - let jsonResponse; + Logger.info(`Deploying Data job "${jobName}"`); - try { - jsonResponse = response1.data; - } catch (error) { - Logger.error(`Cannot parse response and read SHA for deployed Data jobs resources, response =>`, response1); + // Upload Data Job resources + return _sendDataJobResources(teamName, jobName, jobZipFile, config).then( + (response1) => { + if (response1.status > 400) { + Logger.error( + `Failed to send Data job "${jobName}" resources to server`, + ); - throw error; - } + return { + code: 1, + }; + } - // Deploy data job - return new Promise((resolve) => { - setTimeout(() => resolve(), 1000); - }) - .then(() => _deployDataJobSHAVersion(teamName, jobName, jsonResponse.version_sha, config)) - .then((response2) => { - if (response2.status === 202) { - Logger.info(`Data job "${jobName}" deployment in progress...`); - - return _waitForDataJobDeploymentToComplete(jobFixture, waitForJobDeploymentTimeout, config); - } + /** + * @type {{version_sha: string}} + */ + let jsonResponse; - Logger.error(`Data job "${jobName}" deployment failed`); + try { + jsonResponse = response1.data; + } catch (error) { + Logger.error( + `Cannot parse response and read SHA for deployed Data jobs resources, response =>`, + response1, + ); - return { - code: 0 - }; - }); - }); + throw error; + } + + // Deploy data job + return new Promise((resolve) => { + setTimeout(() => resolve(), 1000); + }) + .then(() => + _deployDataJobSHAVersion( + teamName, + jobName, + jsonResponse.version_sha, + config, + ), + ) + .then((response2) => { + if (response2.status === 202) { + Logger.info(`Data job "${jobName}" deployment in progress...`); + + return _waitForDataJobDeploymentToComplete( + jobFixture, + waitForJobDeploymentTimeout, + config, + ); + } + + Logger.error(`Data job "${jobName}" deployment failed`); + + return { + code: 0, + }; + }); + }, + ); }; /** @@ -751,32 +936,42 @@ const _deployDataJob = (jobFixture, jobZipFile, config) => { * @private */ const _waitForDataJobDeploymentToComplete = (jobFixture, timeout, config) => { - const jobName = jobFixture.job_name; - const waitInterval = 10000; // retry every 10s + const jobName = jobFixture.job_name; + const waitInterval = 10000; // retry every 10s - return _getDataJobDeployments(jobFixture, config).then((resp) => { - if (resp.status === 200 && resp.data.length > 0) { - Logger.info(`Data job "${jobName}" deployment finished`); + return _getDataJobDeployments(jobFixture, config).then((resp) => { + if (resp.status === 200 && resp.data.length > 0) { + Logger.info(`Data job "${jobName}" deployment finished`); - return { - code: 0 - }; - } + return { + code: 0, + }; + } - if (timeout <= 0) { - Logger.error(`Data job "${jobName}" waiting time to deploy exceeded, skipping and continue with next steps`); + if (timeout <= 0) { + Logger.error( + `Data job "${jobName}" waiting time to deploy exceeded, skipping and continue with next steps`, + ); - return { - code: 0 - }; - } + return { + code: 0, + }; + } - Logger.info(`Data job "${jobName}", still deploying... retry after ${waitInterval / 1000} seconds`); + Logger.info( + `Data job "${jobName}", still deploying... retry after ${waitInterval / 1000} seconds`, + ); - return new Promise((resolve) => { - setTimeout(() => resolve(), waitInterval); - }).then(() => _waitForDataJobDeploymentToComplete(jobFixture, timeout - waitInterval, config)); - }); + return new Promise((resolve) => { + setTimeout(() => resolve(), waitInterval); + }).then(() => + _waitForDataJobDeploymentToComplete( + jobFixture, + timeout - waitInterval, + config, + ), + ); + }); }; /** @@ -788,13 +983,13 @@ const _waitForDataJobDeploymentToComplete = (jobFixture, timeout, config) => { * @private */ const _createDataJob = (jobFixture, config) => { - const teamName = jobFixture.team; - const jobName = jobFixture.job_name; - const url = `${config.env['data_jobs_url']}/data-jobs/for-team/${teamName}/jobs`; + const teamName = jobFixture.team; + const jobName = jobFixture.job_name; + const url = `${config.env["data_jobs_url"]}/data-jobs/for-team/${teamName}/jobs`; - Logger.debug(`Creating Data job "${jobName}" for Team "${teamName}"`); + Logger.debug(`Creating Data job "${jobName}" for Team "${teamName}"`); - return httpPostReq(url, jobFixture); + return httpPostReq(url, jobFixture); }; /** @@ -808,12 +1003,18 @@ const _createDataJob = (jobFixture, config) => { * @returns {Promise>>} * @private */ -const _updateDataJob = (teamName, jobName, deploymentHash, jobFixture, config) => { - const url = `${config.env['data_jobs_url']}/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments/${deploymentHash}`; - - Logger.debug(`Updating Data job "${jobName}" for Team "${teamName}"`); - - return httpPatchReq(url, jobFixture); +const _updateDataJob = ( + teamName, + jobName, + deploymentHash, + jobFixture, + config, +) => { + const url = `${config.env["data_jobs_url"]}/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments/${deploymentHash}`; + + Logger.debug(`Updating Data job "${jobName}" for Team "${teamName}"`); + + return httpPatchReq(url, jobFixture); }; /** @@ -825,13 +1026,13 @@ const _updateDataJob = (teamName, jobName, deploymentHash, jobFixture, config) = * @private */ const _getDataJob = (jobFixture, config) => { - const teamName = jobFixture.team; - const jobName = jobFixture.job_name; - const url = `${config.env['data_jobs_url']}/data-jobs/for-team/${teamName}/jobs/${jobName}`; + const teamName = jobFixture.team; + const jobName = jobFixture.job_name; + const url = `${config.env["data_jobs_url"]}/data-jobs/for-team/${teamName}/jobs/${jobName}`; - Logger.debug(`Get Data job "${jobName}"`); + Logger.debug(`Get Data job "${jobName}"`); - return httpGetReq(url); + return httpGetReq(url); }; /** @@ -843,13 +1044,13 @@ const _getDataJob = (jobFixture, config) => { * @private */ const _deleteDataJob = (jobFixture, config) => { - const teamName = jobFixture.team; - const jobName = jobFixture.job_name; - const url = `${config.env['data_jobs_url']}/data-jobs/for-team/${teamName}/jobs/${jobName}`; + const teamName = jobFixture.team; + const jobName = jobFixture.job_name; + const url = `${config.env["data_jobs_url"]}/data-jobs/for-team/${teamName}/jobs/${jobName}`; - Logger.debug(`Delete Data job "${jobName}"`); + Logger.debug(`Delete Data job "${jobName}"`); - return httpDeleteReq(url); + return httpDeleteReq(url); }; /** @@ -861,13 +1062,13 @@ const _deleteDataJob = (jobFixture, config) => { * @private */ const _getDataJobExecutions = (jobFixture, config) => { - const jobName = jobFixture.job_name; - const teamName = jobFixture.team; - const url = `${config.env['data_jobs_url']}/data-jobs/for-team/${teamName}/jobs/${jobName}/executions`; + const jobName = jobFixture.job_name; + const teamName = jobFixture.team; + const url = `${config.env["data_jobs_url"]}/data-jobs/for-team/${teamName}/jobs/${jobName}/executions`; - Logger.debug(`Get Data job "${jobName}" executions`); + Logger.debug(`Get Data job "${jobName}" executions`); - return httpGetReq(url); + return httpGetReq(url); }; /** @@ -879,13 +1080,13 @@ const _getDataJobExecutions = (jobFixture, config) => { * @private */ const _getDataJobDeployments = (jobFixture, config) => { - const jobName = jobFixture.job_name; - const teamName = jobFixture.team; - const url = `${config.env['data_jobs_url']}/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments`; + const jobName = jobFixture.job_name; + const teamName = jobFixture.team; + const url = `${config.env["data_jobs_url"]}/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments`; - Logger.debug(`Get Data job "${jobName}" deployments`); + Logger.debug(`Get Data job "${jobName}" deployments`); - return httpGetReq(url); + return httpGetReq(url); }; /** @@ -899,20 +1100,23 @@ const _getDataJobDeployments = (jobFixture, config) => { * @private */ const _sendDataJobResources = (teamName, jobName, jobZipFile, config) => { - const url = `${config.env['data_jobs_url']}/data-jobs/for-team/${teamName}/jobs/${jobName}/sources`; - let buffer; - - try { - buffer = Buffer.from(jobZipFile, 'base64'); - } catch (error) { - Logger.error(`Cannot convert from base64 to Buffer Data job "${jobName}" zip file`, error); + const url = `${config.env["data_jobs_url"]}/data-jobs/for-team/${teamName}/jobs/${jobName}/sources`; + let buffer; + + try { + buffer = Buffer.from(jobZipFile, "base64"); + } catch (error) { + Logger.error( + `Cannot convert from base64 to Buffer Data job "${jobName}" zip file`, + error, + ); - throw error; - } + throw error; + } - Logger.debug(`Sending Data job resources to API, buffer =>`, buffer); + Logger.debug(`Sending Data job resources to API, buffer =>`, buffer); - return httpPostReq(url, buffer, { 'Content-Type': '' }); + return httpPostReq(url, buffer, { "Content-Type": "" }); }; /** @@ -926,15 +1130,15 @@ const _sendDataJobResources = (teamName, jobName, jobZipFile, config) => { * @private */ const _deployDataJobSHAVersion = (teamName, jobName, shaVersion, config) => { - const url = `${config.env['data_jobs_url']}/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments`; + const url = `${config.env["data_jobs_url"]}/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments`; - Logger.debug(`Deploying Data job SHA version =>`, shaVersion); + Logger.debug(`Deploying Data job SHA version =>`, shaVersion); - return httpPostReq(url, { - job_version: shaVersion, - mode: 'release', - enabled: true - }); + return httpPostReq(url, { + job_version: shaVersion, + mode: "release", + enabled: true, + }); }; /** @@ -945,45 +1149,53 @@ const _deployDataJobSHAVersion = (teamName, jobName, shaVersion, config) => { * @private */ const _loadFixturesValuesAndBinariesPaths = (pathToFixtures) => { - return Promise.resolve( - pathToFixtures.map((relativePathToFixture) => { - return { - pathToFixture: path.join(__dirname, `../../fixtures/${relativePathToFixture.pathToFixture.replace(/^\//, '')}`), - pathToZipFile: relativePathToFixture.pathToZipFile ? path.join(__dirname, `../../fixtures/${relativePathToFixture.pathToZipFile.replace(/^\//, '')}`) : null - }; - }) - ).then((pathToFixturesAndBinaries) => { - // Resolving files and parsing to JSON and passing down the stream - return pathToFixturesAndBinaries.map((data) => { - const pathToFixture = data.pathToFixture; - - Logger.debug(`Loading Data job fixture located on =>`, pathToFixture); - - let jobFile; - let jobFixture; - - try { - jobFile = fs.readFileSync(pathToFixture, { encoding: 'utf8' }); - } catch (error) { - Logger.error(`Cannot read file located on =>`, pathToFixture); - - throw error; - } + return Promise.resolve( + pathToFixtures.map((relativePathToFixture) => { + return { + pathToFixture: path.join( + __dirname, + `../../fixtures/${relativePathToFixture.pathToFixture.replace(/^\//, "")}`, + ), + pathToZipFile: relativePathToFixture.pathToZipFile + ? path.join( + __dirname, + `../../fixtures/${relativePathToFixture.pathToZipFile.replace(/^\//, "")}`, + ) + : null, + }; + }), + ).then((pathToFixturesAndBinaries) => { + // Resolving files and parsing to JSON and passing down the stream + return pathToFixturesAndBinaries.map((data) => { + const pathToFixture = data.pathToFixture; + + Logger.debug(`Loading Data job fixture located on =>`, pathToFixture); + + let jobFile; + let jobFixture; + + try { + jobFile = fs.readFileSync(pathToFixture, { encoding: "utf8" }); + } catch (error) { + Logger.error(`Cannot read file located on =>`, pathToFixture); - try { - jobFixture = applyGlobalEnvSettings(JSON.parse(jobFile)); + throw error; + } - return { - jobFixture, - pathToZipFile: data.pathToZipFile - }; - } catch (error) { - Logger.error(`Cannot parse read file located on =>`, pathToFixture); + try { + jobFixture = applyGlobalEnvSettings(JSON.parse(jobFile)); - throw error; - } - }); + return { + jobFixture, + pathToZipFile: data.pathToZipFile, + }; + } catch (error) { + Logger.error(`Cannot parse read file located on =>`, pathToFixture); + + throw error; + } }); + }); }; /** @@ -995,27 +1207,32 @@ const _loadFixturesValuesAndBinariesPaths = (pathToFixtures) => { * @return {Promise} * @private */ -const _deleteDataJobsWithoutDeployment = (jobFixtures, config, responses = []) => { - const chunk = jobFixtures.length > 10 ? jobFixtures.splice(0, 10) : jobFixtures; - - return deleteJobs(chunk, config).then((statuses) => { - responses.push(...statuses); - - if (jobFixtures.length > 0) { - return _deleteDataJobsWithoutDeployment(jobFixtures, config, responses); - } +const _deleteDataJobsWithoutDeployment = ( + jobFixtures, + config, + responses = [], +) => { + const chunk = + jobFixtures.length > 10 ? jobFixtures.splice(0, 10) : jobFixtures; + + return deleteJobs(chunk, config).then((statuses) => { + responses.push(...statuses); + + if (jobFixtures.length > 0) { + return _deleteDataJobsWithoutDeployment(jobFixtures, config, responses); + } - return responses; - }); + return responses; + }); }; module.exports = { - createDeployJobs, - deleteJobsFixtures, - deleteJobs, - provideDataJobsExecutions, - changeJobsStatusesFixtures, - waitForDataJobExecutionToComplete, - deleteDataJobsWithoutDeployment, - compareDatesASC + createDeployJobs, + deleteJobsFixtures, + deleteJobs, + provideDataJobsExecutions, + changeJobsStatusesFixtures, + waitForDataJobExecutionToComplete, + deleteDataJobsWithoutDeployment, + compareDatesASC, }; diff --git a/projects/frontend/data-pipelines/gui/e2e/plugins/helpers/logger-helpers.plugins.js b/projects/frontend/data-pipelines/gui/e2e/plugins/helpers/logger-helpers.plugins.js index 698d4acac8..23fa2dcc15 100644 --- a/projects/frontend/data-pipelines/gui/e2e/plugins/helpers/logger-helpers.plugins.js +++ b/projects/frontend/data-pipelines/gui/e2e/plugins/helpers/logger-helpers.plugins.js @@ -9,7 +9,7 @@ * @param args */ const consoleLog = (...args) => { - console.log('LOG --------->', ...args); + console.log("LOG --------->", ...args); }; /** @@ -18,7 +18,7 @@ const consoleLog = (...args) => { * @param args */ const consoleInfo = (...args) => { - console.log('INFO -------->', ...args); + console.log("INFO -------->", ...args); }; /** @@ -27,7 +27,7 @@ const consoleInfo = (...args) => { * @param args */ const consoleDebug = (...args) => { - console.log('DEBUG ------->', ...args); + console.log("DEBUG ------->", ...args); }; /** @@ -36,7 +36,7 @@ const consoleDebug = (...args) => { * @param args */ const consoleError = (...args) => { - console.log('ERROR ------->', ...args); + console.log("ERROR ------->", ...args); }; /** @@ -45,15 +45,15 @@ const consoleError = (...args) => { * @param args */ const consoleProfiling = (...args) => { - console.log('PROFILING ------->', ...args); + console.log("PROFILING ------->", ...args); }; module.exports = { - Logger: { - log: consoleLog, - info: consoleInfo, - debug: consoleDebug, - error: consoleError, - profiling: consoleProfiling - } + Logger: { + log: consoleLog, + info: consoleInfo, + debug: consoleDebug, + error: consoleError, + profiling: consoleProfiling, + }, }; diff --git a/projects/frontend/data-pipelines/gui/e2e/plugins/helpers/util-helpers.plugins.js b/projects/frontend/data-pipelines/gui/e2e/plugins/helpers/util-helpers.plugins.js index 4c4ab08d48..8ca5b1dd45 100644 --- a/projects/frontend/data-pipelines/gui/e2e/plugins/helpers/util-helpers.plugins.js +++ b/projects/frontend/data-pipelines/gui/e2e/plugins/helpers/util-helpers.plugins.js @@ -3,13 +3,13 @@ * SPDX-License-Identifier: Apache-2.0 */ -const { v4 } = require('uuid'); +const { v4 } = require("uuid"); -const { Logger } = require('./logger-helpers.plugins'); +const { Logger } = require("./logger-helpers.plugins"); const JWT_TOKEN_REGEX = new RegExp(`([^\.]+)\.([^\.]+)\.([^\.]*)`); -const DEFAULT_TEST_ENV_VAR = 'lib'; +const DEFAULT_TEST_ENV_VAR = "lib"; /** * ** Generate UUID. @@ -18,15 +18,15 @@ const DEFAULT_TEST_ENV_VAR = 'lib'; * @returns {Cypress.Chainable<{uuid: string}>|{uuid: string}} */ const generateUUID = (asynchronous = false) => { - const uuid = v4(); + const uuid = v4(); - Logger.info(`Generated uuid ${uuid}`); + Logger.info(`Generated uuid ${uuid}`); - if (asynchronous) { - return Promise.resolve({ uuid }); - } + if (asynchronous) { + return Promise.resolve({ uuid }); + } - return { uuid }; + return { uuid }; }; /** @@ -37,23 +37,23 @@ const generateUUID = (asynchronous = false) => { * @returns {{header:string; claims:{[key: string]: any;}; signature:string;}} The decoded token. */ const parseJWTToken = (token) => { - const parts = (token && token.match(JWT_TOKEN_REGEX)) || null; - if (!parts) { - throw new Error('Invalid JWT Format'); - } - - const rawHeader = parts[1]; - const rawBody = parts[2]; - const signature = parts[3]; - - const header = JSON.parse(_toUnicodeString(rawHeader)); - const claims = JSON.parse(_toUnicodeString(rawBody)); - - return { - header, - claims, - signature - }; + const parts = (token && token.match(JWT_TOKEN_REGEX)) || null; + if (!parts) { + throw new Error("Invalid JWT Format"); + } + + const rawHeader = parts[1]; + const rawBody = parts[2]; + const signature = parts[3]; + + const header = JSON.parse(_toUnicodeString(rawHeader)); + const claims = JSON.parse(_toUnicodeString(rawBody)); + + return { + header, + claims, + signature, + }; }; /** @@ -64,31 +64,41 @@ const parseJWTToken = (token) => { * @param {string} injectedTestUid * @returns {string|object|any} */ -const applyGlobalEnvSettings = (loadedElement, injectedTestEnvVar = null, injectedTestUid = null) => { - const TEST_ENV_VAR = injectedTestEnvVar ?? _loadTestEnvironmentVar(); - const TEST_UID = injectedTestUid ?? _loadTestUid(); - - if (typeof loadedElement === 'string') { - return loadedElement.replace('$env-placeholder$', `${TEST_ENV_VAR}-${TEST_UID}`); - } - - if (typeof loadedElement === 'object') { - Object.entries(loadedElement).forEach(([key, value]) => { - if (typeof value === 'string') { - if (value.includes('$env-placeholder$')) { - value = value.replace('$env-placeholder$', `${TEST_ENV_VAR}-${TEST_UID}`); - } +const applyGlobalEnvSettings = ( + loadedElement, + injectedTestEnvVar = null, + injectedTestUid = null, +) => { + const TEST_ENV_VAR = injectedTestEnvVar ?? _loadTestEnvironmentVar(); + const TEST_UID = injectedTestUid ?? _loadTestUid(); + + if (typeof loadedElement === "string") { + return loadedElement.replace( + "$env-placeholder$", + `${TEST_ENV_VAR}-${TEST_UID}`, + ); + } + + if (typeof loadedElement === "object") { + Object.entries(loadedElement).forEach(([key, value]) => { + if (typeof value === "string") { + if (value.includes("$env-placeholder$")) { + value = value.replace( + "$env-placeholder$", + `${TEST_ENV_VAR}-${TEST_UID}`, + ); + } - loadedElement[key] = value; - } + loadedElement[key] = value; + } - if (typeof value === 'object') { - loadedElement[key] = applyGlobalEnvSettings(value); - } - }); - } + if (typeof value === "object") { + loadedElement[key] = applyGlobalEnvSettings(value); + } + }); + } - return loadedElement; + return loadedElement; }; /** @@ -98,35 +108,42 @@ const applyGlobalEnvSettings = (loadedElement, injectedTestEnvVar = null, inject * @param {number} numberOfArrayElements */ const trimArraysToNElements = (object, numberOfArrayElements) => { - if (typeof object === 'undefined' || object === null || Number.isNaN(object)) { - return object; - } - - if (object instanceof Array) { - if (object.length > numberOfArrayElements) { - const chunk = object.slice(0, numberOfArrayElements); + if ( + typeof object === "undefined" || + object === null || + Number.isNaN(object) + ) { + return object; + } - return [...chunk, `... ${object.length - numberOfArrayElements} more elements in the Array ...`]; - } + if (object instanceof Array) { + if (object.length > numberOfArrayElements) { + const chunk = object.slice(0, numberOfArrayElements); - return object; + return [ + ...chunk, + `... ${object.length - numberOfArrayElements} more elements in the Array ...`, + ]; } - if (typeof object === 'object') { - Object.entries(object).forEach(([key, value]) => { - if (object instanceof Array) { - value = trimArraysToNElements(value, numberOfArrayElements); + return object; + } + + if (typeof object === "object") { + Object.entries(object).forEach(([key, value]) => { + if (object instanceof Array) { + value = trimArraysToNElements(value, numberOfArrayElements); - object[key] = value; - } + object[key] = value; + } - if (typeof value === 'object') { - object[key] = trimArraysToNElements(value, numberOfArrayElements); - } - }); - } + if (typeof value === "object") { + object[key] = trimArraysToNElements(value, numberOfArrayElements); + } + }); + } - return object; + return object; }; /** @@ -139,15 +156,17 @@ const trimArraysToNElements = (object, numberOfArrayElements) => { * @private */ const _toUnicodeString = (encoded) => { - // URL-save Base64 strings do not contain padding `=` characters, so add them. - const missingPadding = encoded.length % 4; - if (missingPadding !== 0) { - encoded += '='.repeat(4 - missingPadding); - } - - // Additional URL-safe character replacement - encoded = encoded.replace(/-/g, '+').replace(/_/g, '/'); - return decodeURIComponent(Array.prototype.map.call(atob(encoded), _escapeMultibyteCharacter).join('')); + // URL-save Base64 strings do not contain padding `=` characters, so add them. + const missingPadding = encoded.length % 4; + if (missingPadding !== 0) { + encoded += "=".repeat(4 - missingPadding); + } + + // Additional URL-safe character replacement + encoded = encoded.replace(/-/g, "+").replace(/_/g, "/"); + return decodeURIComponent( + Array.prototype.map.call(atob(encoded), _escapeMultibyteCharacter).join(""), + ); }; /** @@ -158,7 +177,7 @@ const _toUnicodeString = (encoded) => { * @private */ const _escapeMultibyteCharacter = (c) => { - return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2); + return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2); }; /** @@ -167,52 +186,68 @@ const _escapeMultibyteCharacter = (c) => { * @private */ const _loadTestEnvironmentVar = () => { - /** - * @type {string} - */ - let testEnv; - - if (typeof process !== 'undefined' && process.env?.CYPRESS_test_environment) { - testEnv = process.env.CYPRESS_test_environment; - } else if (typeof Cypress !== 'undefined' && Cypress.env && Cypress.env('test_environment')) { - testEnv = Cypress?.env('test_environment'); - } - - if (!testEnv) { - Logger.info(`test_environment is not set in system env variable or Cypress env variable.`); - Logger.debug(`Because test_environment is not explicitly set will use default: ${DEFAULT_TEST_ENV_VAR}`); - - testEnv = DEFAULT_TEST_ENV_VAR; - } - - return testEnv; + /** + * @type {string} + */ + let testEnv; + + if (typeof process !== "undefined" && process.env?.CYPRESS_test_environment) { + testEnv = process.env.CYPRESS_test_environment; + } else if ( + typeof Cypress !== "undefined" && + Cypress.env && + Cypress.env("test_environment") + ) { + testEnv = Cypress?.env("test_environment"); + } + + if (!testEnv) { + Logger.info( + `test_environment is not set in system env variable or Cypress env variable.`, + ); + Logger.debug( + `Because test_environment is not explicitly set will use default: ${DEFAULT_TEST_ENV_VAR}`, + ); + + testEnv = DEFAULT_TEST_ENV_VAR; + } + + return testEnv; }; const _loadTestUid = () => { - /** - * @type {string} - */ - let guid; - - if (typeof process !== 'undefined' && process.env?.CYPRESS_test_guid) { - guid = process.env.CYPRESS_test_guid; - } else if (typeof Cypress !== 'undefined' && Cypress.env && Cypress.env('test_guid')) { - guid = Cypress.env('test_guid'); - } - - if (!guid) { - guid = '1a4d2540515640d3'; - - Logger.info(`test_guid is not set in system env variable or Cypress env variable.`); - Logger.debug(`Because test_guid is not explicitly set will use default constant: ${guid}`); - } - - return guid; + /** + * @type {string} + */ + let guid; + + if (typeof process !== "undefined" && process.env?.CYPRESS_test_guid) { + guid = process.env.CYPRESS_test_guid; + } else if ( + typeof Cypress !== "undefined" && + Cypress.env && + Cypress.env("test_guid") + ) { + guid = Cypress.env("test_guid"); + } + + if (!guid) { + guid = "1a4d2540515640d3"; + + Logger.info( + `test_guid is not set in system env variable or Cypress env variable.`, + ); + Logger.debug( + `Because test_guid is not explicitly set will use default constant: ${guid}`, + ); + } + + return guid; }; module.exports = { - generateUUID, - applyGlobalEnvSettings, - parseJWTToken, - trimArraysToNElements + generateUUID, + applyGlobalEnvSettings, + parseJWTToken, + trimArraysToNElements, }; diff --git a/projects/frontend/data-pipelines/gui/e2e/plugins/index.js b/projects/frontend/data-pipelines/gui/e2e/plugins/index.js index 10827b4667..5d72508861 100644 --- a/projects/frontend/data-pipelines/gui/e2e/plugins/index.js +++ b/projects/frontend/data-pipelines/gui/e2e/plugins/index.js @@ -17,15 +17,30 @@ // This function is called when a project is opened or re-opened (e.g. due to // the project's config changing) -const path = require('path'); +const path = require("path"); -const { install, ensureBrowserFlags } = require('@neuralegion/cypress-har-generator'); +const { + install, + ensureBrowserFlags, +} = require("@neuralegion/cypress-har-generator"); -const { generateUUID } = require('./helpers/util-helpers.plugins'); +const { generateUUID } = require("./helpers/util-helpers.plugins"); -const { getAccessTokenAsynchronous, setAccessTokenAsynchronous, getAccessTokenSynchronous } = require('./helpers/authentication-helpers.plugins'); +const { + getAccessTokenAsynchronous, + setAccessTokenAsynchronous, + getAccessTokenSynchronous, +} = require("./helpers/authentication-helpers.plugins"); -const { createDeployJobs, provideDataJobsExecutions, waitForDataJobExecutionToComplete, deleteJobs, deleteJobsFixtures, changeJobsStatusesFixtures, deleteDataJobsWithoutDeployment } = require('./helpers/job-helpers.plugins'); +const { + createDeployJobs, + provideDataJobsExecutions, + waitForDataJobExecutionToComplete, + deleteJobs, + deleteJobsFixtures, + changeJobsStatusesFixtures, + deleteDataJobsWithoutDeployment, +} = require("./helpers/job-helpers.plugins"); /** * @type {Cypress.PluginConfig} @@ -33,148 +48,158 @@ const { createDeployJobs, provideDataJobsExecutions, waitForDataJobExecutionToCo // eslint-disable-next-line no-unused-vars // `cypressConfig` is the resolved Cypress config module.exports = (on, cypressConfig) => { - const TASKS = { - /** - * ** Delete Data Jobs without deployment with parallelism. - * - * @return {Promise} - */ - deleteDataJobsWithoutDeployment: () => { - return deleteDataJobsWithoutDeployment({ ...cypressConfig }); - }, - /** - * ** Create test Data Jobs if they don't exist. - * - * @param {{relativePathToFixtures: Array<{pathToFixture:string; pathToZipFile:string;}>}} taskConfig - configuration for task. - * relativePathToFixtures provides relative paths for fixtures files starting from directory fixtures - * e.g. { - * relativePathToFixtures: [ - * { - * pathToFixture: '/base/data-jobs/cy-e2e-vdk/cy-e2e-vdk-failing-v0.json', - * pathToZipFile: '/base/data-jobs/cy-e2e-vdk/cy-e2e-vdk-failing-v0.zip' - * } - * ] - * } - * @returns {Promise} - */ - createDeployJobs: (taskConfig) => { - return createDeployJobs(taskConfig, { ...cypressConfig }); - }, - /** - * ** Provide Data Jobs executions. - * - * @param {{relativePathToFixtures: Array<{pathToFixture:string; executions?: number;}>;}} taskConfig - configuration for task. - * relativePathToFixtures provides relative paths for fixtures files starting from directory fixtures - * e.g. { - * relativePathToFixtures: [ - * { - * pathToFixture: '/base/data-jobs/cy-e2e-vdk/cy-e2e-vdk-failing-v0.json', - * executions: 2 - * } - * ] - * } - * @returns {Promise} - */ - provideDataJobsExecutions: (taskConfig) => { - return provideDataJobsExecutions(taskConfig, { ...cypressConfig }); - }, - /** - * ** Wait for Data Jobs execution for complete. - * - * @param {{job_name:string; description:string; team:string; config:{db_default_type:string; contacts:{}; schedule:{schedule_cron:string}; generate_keytab:boolean; enable_execution_notifications:boolean}}} jobFixture - * @param {number} jobExecutionTimeout - job execution timeout - * @returns {Promise<{code: number}>} - */ - waitForDataJobExecutionToComplete: ({ jobFixture, jobExecutionTimeout = 180000 }) => { - return waitForDataJobExecutionToComplete(jobFixture, jobExecutionTimeout, { ...cypressConfig }); - }, - /** - * ** Change Data Jobs statuses for provided fixtures. - * - * @param {{relativePathToFixtures: Array<{pathToFixture:string;}>; status: boolean;}} taskConfig - configuration for task. - * relativePathToFixtures provides relative paths for fixtures files starting from directory fixtures - * e.g. { - * relativePathToFixtures: [ - * { - * pathToFixture: '/base/data-jobs/cy-e2e-vdk/cy-e2e-vdk-failing-v0.json' - * } - * ], - * status: boolean - * } - * @returns {Promise} - */ - changeJobsStatusesFixtures: (taskConfig) => { - return changeJobsStatusesFixtures(taskConfig, { ...cypressConfig }); - }, - /** - * ** Delete Jobs for provided fixtures paths. - * - * @param {{relativePathToFixtures: Array<{pathToFixture:string;}>; optional?: boolean;}} taskConfig - configuration for task. - * relativePathToFixtures provides relative paths for fixtures files starting from directory fixtures - * optional if set to true will instruct the plugin to not log console error, if deletion status is different from 2xx, (e.g. 404 or 500) - * e.g. { - * relativePathToFixtures: [ - * { - * pathToFixture: '/base/data-jobs/cy-e2e-vdk/cy-e2e-vdk-failing-v0.json' - * } - * ], - * optional: true - * } - * @returns {Promise} - */ - deleteJobsFixtures: (taskConfig) => { - return deleteJobsFixtures(taskConfig, { ...cypressConfig }); - }, - /** - * ** Delete Data jobs if they exist. - * - * @param {Array<{job_name:string; description:string; team:string; config:{db_default_type:string; contacts:{}; schedule:{schedule_cron:string}; generate_keytab:boolean; enable_execution_notifications:boolean}}>} jobFixtures - * @param {Cypress.ResolvedConfigOptions} config - * @returns {Promise} - */ - deleteJobs: ({ jobFixtures }) => { - return deleteJobs(jobFixtures, { ...cypressConfig }); - }, - /** - * ** Get JWT access token asynchronous. - */ - getAccessToken: getAccessTokenAsynchronous, - /** - * ** Set JWT access token asynchronous. - */ - setAccessToken: setAccessTokenAsynchronous, - /** - * ** Generate UUID. - * - * @returns {Cypress.Chainable<{uuid: string}>} - */ - generateUUID: () => { - return generateUUID(true); - } - }; + const TASKS = { + /** + * ** Delete Data Jobs without deployment with parallelism. + * + * @return {Promise} + */ + deleteDataJobsWithoutDeployment: () => { + return deleteDataJobsWithoutDeployment({ ...cypressConfig }); + }, + /** + * ** Create test Data Jobs if they don't exist. + * + * @param {{relativePathToFixtures: Array<{pathToFixture:string; pathToZipFile:string;}>}} taskConfig - configuration for task. + * relativePathToFixtures provides relative paths for fixtures files starting from directory fixtures + * e.g. { + * relativePathToFixtures: [ + * { + * pathToFixture: '/base/data-jobs/cy-e2e-vdk/cy-e2e-vdk-failing-v0.json', + * pathToZipFile: '/base/data-jobs/cy-e2e-vdk/cy-e2e-vdk-failing-v0.zip' + * } + * ] + * } + * @returns {Promise} + */ + createDeployJobs: (taskConfig) => { + return createDeployJobs(taskConfig, { ...cypressConfig }); + }, + /** + * ** Provide Data Jobs executions. + * + * @param {{relativePathToFixtures: Array<{pathToFixture:string; executions?: number;}>;}} taskConfig - configuration for task. + * relativePathToFixtures provides relative paths for fixtures files starting from directory fixtures + * e.g. { + * relativePathToFixtures: [ + * { + * pathToFixture: '/base/data-jobs/cy-e2e-vdk/cy-e2e-vdk-failing-v0.json', + * executions: 2 + * } + * ] + * } + * @returns {Promise} + */ + provideDataJobsExecutions: (taskConfig) => { + return provideDataJobsExecutions(taskConfig, { ...cypressConfig }); + }, + /** + * ** Wait for Data Jobs execution for complete. + * + * @param {{job_name:string; description:string; team:string; config:{db_default_type:string; contacts:{}; schedule:{schedule_cron:string}; generate_keytab:boolean; enable_execution_notifications:boolean}}} jobFixture + * @param {number} jobExecutionTimeout - job execution timeout + * @returns {Promise<{code: number}>} + */ + waitForDataJobExecutionToComplete: ({ + jobFixture, + jobExecutionTimeout = 180000, + }) => { + return waitForDataJobExecutionToComplete( + jobFixture, + jobExecutionTimeout, + { ...cypressConfig }, + ); + }, + /** + * ** Change Data Jobs statuses for provided fixtures. + * + * @param {{relativePathToFixtures: Array<{pathToFixture:string;}>; status: boolean;}} taskConfig - configuration for task. + * relativePathToFixtures provides relative paths for fixtures files starting from directory fixtures + * e.g. { + * relativePathToFixtures: [ + * { + * pathToFixture: '/base/data-jobs/cy-e2e-vdk/cy-e2e-vdk-failing-v0.json' + * } + * ], + * status: boolean + * } + * @returns {Promise} + */ + changeJobsStatusesFixtures: (taskConfig) => { + return changeJobsStatusesFixtures(taskConfig, { ...cypressConfig }); + }, + /** + * ** Delete Jobs for provided fixtures paths. + * + * @param {{relativePathToFixtures: Array<{pathToFixture:string;}>; optional?: boolean;}} taskConfig - configuration for task. + * relativePathToFixtures provides relative paths for fixtures files starting from directory fixtures + * optional if set to true will instruct the plugin to not log console error, if deletion status is different from 2xx, (e.g. 404 or 500) + * e.g. { + * relativePathToFixtures: [ + * { + * pathToFixture: '/base/data-jobs/cy-e2e-vdk/cy-e2e-vdk-failing-v0.json' + * } + * ], + * optional: true + * } + * @returns {Promise} + */ + deleteJobsFixtures: (taskConfig) => { + return deleteJobsFixtures(taskConfig, { ...cypressConfig }); + }, + /** + * ** Delete Data jobs if they exist. + * + * @param {Array<{job_name:string; description:string; team:string; config:{db_default_type:string; contacts:{}; schedule:{schedule_cron:string}; generate_keytab:boolean; enable_execution_notifications:boolean}}>} jobFixtures + * @param {Cypress.ResolvedConfigOptions} config + * @returns {Promise} + */ + deleteJobs: ({ jobFixtures }) => { + return deleteJobs(jobFixtures, { ...cypressConfig }); + }, + /** + * ** Get JWT access token asynchronous. + */ + getAccessToken: getAccessTokenAsynchronous, + /** + * ** Set JWT access token asynchronous. + */ + setAccessToken: setAccessTokenAsynchronous, + /** + * ** Generate UUID. + * + * @returns {Cypress.Chainable<{uuid: string}>} + */ + generateUUID: () => { + return generateUUID(true); + }, + }; - // `on` is used to hook into various events Cypress emits - on('task', TASKS); + // `on` is used to hook into various events Cypress emits + on("task", TASKS); - const options = { - outputRoot: cypressConfig.env.CYPRESS_TERMINAL_LOGS, - // Used to trim the base path of specs and reduce nesting in the - // generated output directory. - specRoot: path.relative(cypressConfig.fileServerFolder, cypressConfig.integrationFolder), - outputTarget: { - 'cypress-logs|json': 'json' - }, - printLogsToConsole: 'always', - printLogsToFile: 'always', - includeSuccessfulHookLogs: true, - logToFilesOnAfterRun: true - }; + const options = { + outputRoot: cypressConfig.env.CYPRESS_TERMINAL_LOGS, + // Used to trim the base path of specs and reduce nesting in the + // generated output directory. + specRoot: path.relative( + cypressConfig.fileServerFolder, + cypressConfig.integrationFolder, + ), + outputTarget: { + "cypress-logs|json": "json", + }, + printLogsToConsole: "always", + printLogsToFile: "always", + includeSuccessfulHookLogs: true, + logToFilesOnAfterRun: true, + }; - require('cypress-terminal-report/src/installLogsPrinter')(on, options); - install(on, cypressConfig); + require("cypress-terminal-report/src/installLogsPrinter")(on, options); + install(on, cypressConfig); - on('before:browser:launch', (browser = {}, launchOptions) => { - ensureBrowserFlags(browser, launchOptions); - return launchOptions; - }); + on("before:browser:launch", (browser = {}, launchOptions) => { + ensureBrowserFlags(browser, launchOptions); + return launchOptions; + }); }; diff --git a/projects/frontend/data-pipelines/gui/e2e/support/commands.js b/projects/frontend/data-pipelines/gui/e2e/support/commands.js index 6547a3ef71..07126ef6c8 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/commands.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/commands.js @@ -5,10 +5,15 @@ /// -import 'cypress-localstorage-commands'; +import "cypress-localstorage-commands"; -import { parseJWTToken } from '../plugins/helpers/util-helpers.plugins'; -import { BASIC_AUTH_CONFIG, CSP_ACCESS_TOKEN_KEY, CSP_EXPIRES_AT_KEY, CSP_ID_TOKEN_KEY } from './helpers/constants.support'; +import { parseJWTToken } from "../plugins/helpers/util-helpers.plugins"; +import { + BASIC_AUTH_CONFIG, + CSP_ACCESS_TOKEN_KEY, + CSP_EXPIRES_AT_KEY, + CSP_ID_TOKEN_KEY, +} from "./helpers/constants.support"; let jwtToken; let idToken; @@ -24,256 +29,283 @@ let expiresAt; // }); const _persistCspDataToStorage = (payload) => { - if (payload) { - idToken = payload.id_token; - accessToken = payload.access_token; - expiresAt = JSON.stringify(Date.now() + payload.expires_in * 1000); - } - - window.localStorage.setItem(CSP_ID_TOKEN_KEY, idToken); - window.localStorage.setItem(CSP_ACCESS_TOKEN_KEY, accessToken); - window.localStorage.setItem(CSP_EXPIRES_AT_KEY, expiresAt); - - // Set the CSP token in the session storage to enable the Integration testing against Management UI - sessionStorage.setItem(CSP_ID_TOKEN_KEY, idToken); - sessionStorage.setItem(CSP_ACCESS_TOKEN_KEY, accessToken); - sessionStorage.setItem(CSP_EXPIRES_AT_KEY, expiresAt); + if (payload) { + idToken = payload.id_token; + accessToken = payload.access_token; + expiresAt = JSON.stringify(Date.now() + payload.expires_in * 1000); + } + + window.localStorage.setItem(CSP_ID_TOKEN_KEY, idToken); + window.localStorage.setItem(CSP_ACCESS_TOKEN_KEY, accessToken); + window.localStorage.setItem(CSP_EXPIRES_AT_KEY, expiresAt); + + // Set the CSP token in the session storage to enable the Integration testing against Management UI + sessionStorage.setItem(CSP_ID_TOKEN_KEY, idToken); + sessionStorage.setItem(CSP_ACCESS_TOKEN_KEY, accessToken); + sessionStorage.setItem(CSP_EXPIRES_AT_KEY, expiresAt); }; -Cypress.Commands.add('login', () => { - cy.log('Requesting JWT Token with refresh token'); - - return cy +Cypress.Commands.add("login", () => { + cy.log("Requesting JWT Token with refresh token"); + + return cy + .request({ + followRedirect: false, + failOnStatusCode: false, + method: "POST", + // See project README.md how to set this login url + url: `${Cypress.env("csp_url")}/csp/gateway/am/api/auth/api-tokens/authorize`, + form: true, + headers: { + // CSP staging is using CloudFront CDN that does not permit bot requests unless the below user agent is set + "user-agent": "csp-automation-tests", + }, + body: { + // See project README.md how to set this token + api_token: Cypress.env("OAUTH2_API_TOKEN"), + }, + }) + .its("body") + .then(($body) => { + const decodedAccessToken = parseJWTToken($body.access_token); + + if (!decodedAccessToken.claims.ovl) { + return { + ...$body, + decoded_access_token: decodedAccessToken, + }; + } + + cy.log("Requesting claims expansion"); + + return cy .request({ - followRedirect: false, - failOnStatusCode: false, - method: 'POST', - // See project README.md how to set this login url - url: `${Cypress.env('csp_url')}/csp/gateway/am/api/auth/api-tokens/authorize`, - form: true, - headers: { - // CSP staging is using CloudFront CDN that does not permit bot requests unless the below user agent is set - 'user-agent': 'csp-automation-tests' - }, - body: { - // See project README.md how to set this token - api_token: Cypress.env('OAUTH2_API_TOKEN') - } - }) - .its('body') - .then(($body) => { - const decodedAccessToken = parseJWTToken($body.access_token); - - if (!decodedAccessToken.claims.ovl) { - return { - ...$body, - decoded_access_token: decodedAccessToken - }; - } - - cy.log('Requesting claims expansion'); - - return cy - .request({ - method: 'GET', - url: `${Cypress.env('csp_url')}/csp/gateway/am/api/auth/token/expand-overflow-claims`, - headers: { - Authorization: `Bearer ${$body.access_token}`, - // CSP staging is using CloudFront CDN that does not permit bot requests unless the below user agent is set - 'user-agent': 'csp-automation-tests' - } - }) - .its('body') - .then((claims) => { - return { - ...$body, - decoded_access_token: { - ...decodedAccessToken, - claims - } - }; - }); + method: "GET", + url: `${Cypress.env("csp_url")}/csp/gateway/am/api/auth/token/expand-overflow-claims`, + headers: { + Authorization: `Bearer ${$body.access_token}`, + // CSP staging is using CloudFront CDN that does not permit bot requests unless the below user agent is set + "user-agent": "csp-automation-tests", + }, }) - .then((body) => { - jwtToken = JSON.stringify(body); + .its("body") + .then((claims) => { + return { + ...$body, + decoded_access_token: { + ...decodedAccessToken, + claims, + }, + }; + }); + }) + .then((body) => { + jwtToken = JSON.stringify(body); - _persistCspDataToStorage(body); + _persistCspDataToStorage(body); - cy.task('setAccessToken', accessToken); + cy.task("setAccessToken", accessToken); - cy.log('Logged in successfully.'); + cy.log("Logged in successfully."); - return cy.wrap({ - context: 'commands::login()', - action: 'continue' - }); - }); + return cy.wrap({ + context: "commands::login()", + action: "continue", + }); + }); }); -Cypress.Commands.add('wireUserSession', () => { - if (jwtToken) { - _persistCspDataToStorage(); +Cypress.Commands.add("wireUserSession", () => { + if (jwtToken) { + _persistCspDataToStorage(); - return cy.wrap({ - context: 'commands::1::wireUserSession()', - action: 'continue' - }); - } + return cy.wrap({ + context: "commands::1::wireUserSession()", + action: "continue", + }); + } - return cy.login(); + return cy.login(); }); -Cypress.Commands.add('recordHarIfSupported', () => { - if (Cypress.browser.name === 'chrome') { - return cy.recordHar({ - excludePaths: [ - // exclude from dev build vendor, scripts and polyfills bundles - /(vendor|scripts|polyfills)\.js$/, - - // exclude from dev/prod clarity styles - /clr-ui\.min\.css$/, - - // exclude global and grafana styles - /(styles|grafana.light)(\..*)?\.css$/, - - // exclude woff2 fonts - /.*\.woff2/, - - // SuperCollider js - // exclude from prod build - // main bundle "main.xyz.js" - // scripts bundle "scripts.xyz.js" - // polyfills bundle "polyfills.xyz.js" - // runtime bundle "runtime.xyz.js" - // lazy loaded modules "199.xyz.js" - /(main|scripts|polyfills|runtime|\d+)(\..*)?\.js$/, - - // Grafana embedded panel js - // vendors app bundle "vendors-app.xyz.js" - // app bundle "app.xyz.js" - // moment-app bundle "moment-app.xyz.js" - // angular-app bundle "angular-app.xyz.js" - // influxdbPlugin bundle "influxdbPlugin.xyz.js" - // SoloPanelPage bundle "SoloPanelPage.xyz.js" - /(vendors-app|app|moment-app|angular-app|influxdbPlugin|SoloPanelPage)(\..*)?\.js$/ - ] - }); - } - - return cy.wrap({ - context: 'commands::recordHarIfSupported()', - action: 'continue' +Cypress.Commands.add("recordHarIfSupported", () => { + if (Cypress.browser.name === "chrome") { + return cy.recordHar({ + excludePaths: [ + // exclude from dev build vendor, scripts and polyfills bundles + /(vendor|scripts|polyfills)\.js$/, + + // exclude from dev/prod clarity styles + /clr-ui\.min\.css$/, + + // exclude global and grafana styles + /(styles|grafana.light)(\..*)?\.css$/, + + // exclude woff2 fonts + /.*\.woff2/, + + // SuperCollider js + // exclude from prod build + // main bundle "main.xyz.js" + // scripts bundle "scripts.xyz.js" + // polyfills bundle "polyfills.xyz.js" + // runtime bundle "runtime.xyz.js" + // lazy loaded modules "199.xyz.js" + /(main|scripts|polyfills|runtime|\d+)(\..*)?\.js$/, + + // Grafana embedded panel js + // vendors app bundle "vendors-app.xyz.js" + // app bundle "app.xyz.js" + // moment-app bundle "moment-app.xyz.js" + // angular-app bundle "angular-app.xyz.js" + // influxdbPlugin bundle "influxdbPlugin.xyz.js" + // SoloPanelPage bundle "SoloPanelPage.xyz.js" + /(vendors-app|app|moment-app|angular-app|influxdbPlugin|SoloPanelPage)(\..*)?\.js$/, + ], }); + } + + return cy.wrap({ + context: "commands::recordHarIfSupported()", + action: "continue", + }); }); -Cypress.Commands.add('saveHarIfSupported', () => { - if (Cypress.browser.name === 'chrome') { - return cy.saveHar(); - } +Cypress.Commands.add("saveHarIfSupported", () => { + if (Cypress.browser.name === "chrome") { + return cy.saveHar(); + } - return cy.wrap({ - context: 'commands::saveHarIfSupported()', - action: 'continue' - }); + return cy.wrap({ + context: "commands::saveHarIfSupported()", + action: "continue", + }); }); // CSP -Cypress.Commands.add('initCspLoggedUserProfileGetReqInterceptor', () => { - return cy.intercept('GET', '**/csp/gateway/am/api/auth/token-public-key?format=jwks').as('cspLoggedUserProfileGetReq'); +Cypress.Commands.add("initCspLoggedUserProfileGetReqInterceptor", () => { + return cy + .intercept("GET", "**/csp/gateway/am/api/auth/token-public-key?format=jwks") + .as("cspLoggedUserProfileGetReq"); }); -Cypress.Commands.add('waitForCspLoggedUserProfileGetReqInterceptor', () => { - return cy.wait('@cspLoggedUserProfileGetReq'); +Cypress.Commands.add("waitForCspLoggedUserProfileGetReqInterceptor", () => { + return cy.wait("@cspLoggedUserProfileGetReq"); }); // Data Pipelines -Cypress.Commands.add('initDataJobsApiGetReqInterceptor', () => { - return cy.intercept('GET', '**/data-jobs/for-team/**').as('dataJobsApiGetReq'); +Cypress.Commands.add("initDataJobsApiGetReqInterceptor", () => { + return cy + .intercept("GET", "**/data-jobs/for-team/**") + .as("dataJobsApiGetReq"); }); -Cypress.Commands.add('waitForDataJobsApiGetReqInterceptor', () => { - return cy.wait('@dataJobsApiGetReq'); +Cypress.Commands.add("waitForDataJobsApiGetReqInterceptor", () => { + return cy.wait("@dataJobsApiGetReq"); }); -Cypress.Commands.add('initDataJobsExecutionsGetReqInterceptor', () => { - return cy.intercept('GET', '**/data-jobs/for-team/**', (req) => { - if (req && req.query && req.query.query && req.query.operationName === 'jobsQuery' && req.query.query.includes('executions') && req.query.query.includes('DataJobExecutionFilter') && req.query.query.includes('DataJobExecutionOrder')) { - req.alias = 'dataJobsExecutionsGetReq'; - } +Cypress.Commands.add("initDataJobsExecutionsGetReqInterceptor", () => { + return cy.intercept("GET", "**/data-jobs/for-team/**", (req) => { + if ( + req && + req.query && + req.query.query && + req.query.operationName === "jobsQuery" && + req.query.query.includes("executions") && + req.query.query.includes("DataJobExecutionFilter") && + req.query.query.includes("DataJobExecutionOrder") + ) { + req.alias = "dataJobsExecutionsGetReq"; + } - return req; - }); + return req; + }); }); -Cypress.Commands.add('initDataJobsSingleExecutionGetReqInterceptor', () => { - return cy.intercept('GET', '**/data-jobs/for-team/**/executions/**').as('dataJobsSingleExecutionGetReq'); +Cypress.Commands.add("initDataJobsSingleExecutionGetReqInterceptor", () => { + return cy + .intercept("GET", "**/data-jobs/for-team/**/executions/**") + .as("dataJobsSingleExecutionGetReq"); }); -Cypress.Commands.add('initDataJobExecutionPostReqInterceptor', () => { - return cy.intercept('POST', '**/data-jobs/for-team/**/executions').as('dataJobExecutionPostReq'); +Cypress.Commands.add("initDataJobExecutionPostReqInterceptor", () => { + return cy + .intercept("POST", "**/data-jobs/for-team/**/executions") + .as("dataJobExecutionPostReq"); }); -Cypress.Commands.add('waitForDataJobExecutionPostReqInterceptor', () => { - return cy.wait('@dataJobExecutionPostReq'); +Cypress.Commands.add("waitForDataJobExecutionPostReqInterceptor", () => { + return cy.wait("@dataJobExecutionPostReq"); }); -Cypress.Commands.add('initDataJobExecutionDeleteReqInterceptor', () => { - return cy.intercept('DELETE', '**/data-jobs/for-team/**/executions/**').as('dataJobExecutionDeleteReq'); +Cypress.Commands.add("initDataJobExecutionDeleteReqInterceptor", () => { + return cy + .intercept("DELETE", "**/data-jobs/for-team/**/executions/**") + .as("dataJobExecutionDeleteReq"); }); -Cypress.Commands.add('waitForDataJobExecutionDeleteReqInterceptor', () => { - return cy.wait('@dataJobExecutionDeleteReq'); +Cypress.Commands.add("waitForDataJobExecutionDeleteReqInterceptor", () => { + return cy.wait("@dataJobExecutionDeleteReq"); }); -Cypress.Commands.add('initDataJobPutReqInterceptor', () => { - return cy.intercept('PUT', '**/data-jobs/for-team/*/jobs/*').as('dataJobPutReq'); +Cypress.Commands.add("initDataJobPutReqInterceptor", () => { + return cy + .intercept("PUT", "**/data-jobs/for-team/*/jobs/*") + .as("dataJobPutReq"); }); -Cypress.Commands.add('waitForDataJobPutReqInterceptor', () => { - return cy.wait('@dataJobPutReq'); +Cypress.Commands.add("waitForDataJobPutReqInterceptor", () => { + return cy.wait("@dataJobPutReq"); }); -Cypress.Commands.add('initDataJobDeleteReqInterceptor', () => { - return cy.intercept('DELETE', '**/data-jobs/for-team/**/jobs/**').as('dataJobDeleteReq'); +Cypress.Commands.add("initDataJobDeleteReqInterceptor", () => { + return cy + .intercept("DELETE", "**/data-jobs/for-team/**/jobs/**") + .as("dataJobDeleteReq"); }); -Cypress.Commands.add('waitForDataJobDeleteReqInterceptor', () => { - return cy.wait('@dataJobDeleteReq'); +Cypress.Commands.add("waitForDataJobDeleteReqInterceptor", () => { + return cy.wait("@dataJobDeleteReq"); }); -Cypress.Commands.add('initDataJobDeploymentPatchReqInterceptor', () => { - return cy.intercept('PATCH', '**/data-jobs/for-team/**/deployments/**').as('dataJobDeploymentPatchReq'); +Cypress.Commands.add("initDataJobDeploymentPatchReqInterceptor", () => { + return cy + .intercept("PATCH", "**/data-jobs/for-team/**/deployments/**") + .as("dataJobDeploymentPatchReq"); }); -Cypress.Commands.add('waitForDataJobDeploymentPatchReqInterceptor', () => { - return cy.wait('@dataJobDeploymentPatchReq'); +Cypress.Commands.add("waitForDataJobDeploymentPatchReqInterceptor", () => { + return cy.wait("@dataJobDeploymentPatchReq"); }); // Generics -Cypress.Commands.add('waitForInterceptorWithRetry', (aliasName, retries, config) => { +Cypress.Commands.add( + "waitForInterceptorWithRetry", + (aliasName, retries, config) => { return cy.wait(aliasName).then((interception) => { - if (config.predicate(interception)) { - if (typeof config.onfulfill === 'function') { - config.onfulfill(interception); - } - - return cy.wrap(interception); + if (config.predicate(interception)) { + if (typeof config.onfulfill === "function") { + config.onfulfill(interception); } - if (retries > 0) { - return cy.waitForInterceptorWithRetry(aliasName, retries - 1, config); - } + return cy.wrap(interception); + } + + if (retries > 0) { + return cy.waitForInterceptorWithRetry(aliasName, retries - 1, config); + } }); -}); + }, +); // App Config -Cypress.Commands.add('appConfigInterceptorDisableExploreRoute', () => { - cy.intercept('GET', '/assets/data/appConfig.json', { - auth: BASIC_AUTH_CONFIG, - ignoreRoutes: ['explore/data-jobs', 'explore/data-jobs/:team/:job'], - ignoreComponents: ['explorePage'] - }); +Cypress.Commands.add("appConfigInterceptorDisableExploreRoute", () => { + cy.intercept("GET", "/assets/data/appConfig.json", { + auth: BASIC_AUTH_CONFIG, + ignoreRoutes: ["explore/data-jobs", "explore/data-jobs/:team/:job"], + ignoreComponents: ["explorePage"], + }); }); diff --git a/projects/frontend/data-pipelines/gui/e2e/support/helpers/constants.support.js b/projects/frontend/data-pipelines/gui/e2e/support/helpers/constants.support.js index 35d800de4c..6a16db9a63 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/helpers/constants.support.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/helpers/constants.support.js @@ -9,31 +9,31 @@ * ** CSP Id token key. * @type {string} */ -const CSP_ID_TOKEN_KEY = 'id_token'; +const CSP_ID_TOKEN_KEY = "id_token"; /** * ** CSP Access token key. * @type {string} */ -const CSP_ACCESS_TOKEN_KEY = 'access_token'; +const CSP_ACCESS_TOKEN_KEY = "access_token"; /** * ** CSP Token expires at key. * @type {string} */ -const CSP_EXPIRES_AT_KEY = 'expires_at'; +const CSP_EXPIRES_AT_KEY = "expires_at"; /** * ** Long-lived Team that owns Data jobs for Data Pipelines feature. * @type {'cy-e2e-vdk'} */ -const TEAM_VDK = 'cy-e2e-vdk'; +const TEAM_VDK = "cy-e2e-vdk"; /** * ** Long-lived Data job name owned from {@link: TEAM_VDK} * @type {'cy-e2e-vdk-failing-v0'} */ -const TEAM_VDK_DATA_JOB_FAILING = 'cy-e2e-vdk-failing-v0'; +const TEAM_VDK_DATA_JOB_FAILING = "cy-e2e-vdk-failing-v0"; /** * ** Short-lived Test Data job name v0 owned from {@link: TEAM_VDK} created in tests and deleted after suite. @@ -42,7 +42,7 @@ const TEAM_VDK_DATA_JOB_FAILING = 'cy-e2e-vdk-failing-v0'; * * @type {'cy-e2e-vdk-test-v0'} */ -const TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V0 = 'cy-e2e-vdk-test-v0'; +const TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V0 = "cy-e2e-vdk-test-v0"; /** * ** Short-lived Test Data job name v1 owned from {@link: TEAM_VDK} created in tests and deleted after suite. @@ -51,7 +51,7 @@ const TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V0 = 'cy-e2e-vdk-test-v0'; * * @type {'cy-e2e-vdk-test-v1'} */ -const TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V1 = 'cy-e2e-vdk-test-v1'; +const TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V1 = "cy-e2e-vdk-test-v1"; /** * ** Short-lived Test Data job name v2 owned from {@link: TEAM_VDK} created in tests and deleted after suite. @@ -60,7 +60,7 @@ const TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V1 = 'cy-e2e-vdk-test-v1'; * * @type {'cy-e2e-vdk-test-v2'} */ -const TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V2 = 'cy-e2e-vdk-test-v2'; +const TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V2 = "cy-e2e-vdk-test-v2"; /** * ** Short-lived Test Data job name v10 owned from {@link: TEAM_VDK} created in tests and deleted after suite. @@ -69,7 +69,7 @@ const TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V2 = 'cy-e2e-vdk-test-v2'; * * @type {'cy-e2e-vdk-test-v10'} */ -const TEAM_VDK_DATA_JOB_TEST_V10 = 'cy-e2e-vdk-test-v10'; +const TEAM_VDK_DATA_JOB_TEST_V10 = "cy-e2e-vdk-test-v10"; /** * ** Short-lived Test Data job name v11 owned from {@link: TEAM_VDK} created in tests and deleted after suite. @@ -78,7 +78,7 @@ const TEAM_VDK_DATA_JOB_TEST_V10 = 'cy-e2e-vdk-test-v10'; * * @type {'cy-e2e-vdk-test-v11'} */ -const TEAM_VDK_DATA_JOB_TEST_V11 = 'cy-e2e-vdk-test-v11'; +const TEAM_VDK_DATA_JOB_TEST_V11 = "cy-e2e-vdk-test-v11"; /** * ** Short-lived Test Data job name v12 owned from {@link: TEAM_VDK} created in tests and deleted after suite. @@ -87,53 +87,58 @@ const TEAM_VDK_DATA_JOB_TEST_V11 = 'cy-e2e-vdk-test-v11'; * * @type {'cy-e2e-vdk-test-v12'} */ -const TEAM_VDK_DATA_JOB_TEST_V12 = 'cy-e2e-vdk-test-v12'; +const TEAM_VDK_DATA_JOB_TEST_V12 = "cy-e2e-vdk-test-v12"; const BASIC_AUTH_CONFIG = { - consoleCloudUrl: 'https://console-stg.cloud.vmware.com/', - orgLinkRoot: '/csp/gateway/am/api/orgs/', - authConfig: { - issuer: 'https://console-stg.cloud.vmware.com/csp/gateway/am/api/', - redirectUri: '$window.location.origin/', - skipIssuerCheck: true, - requestAccessToken: true, - oidc: true, - strictDiscoveryDocumentValidation: false, - clientId: '8qQgcmhhsXuhGJs58ZW1hQ86h3eZXTpBV6t', - responseType: 'code', - scope: 'openid ALL_PERMISSIONS customer_number group_names', - showDebugInformation: true, - silentRefreshRedirectUri: '$window.location.origin/silent-refresh.html', - useSilentRefresh: true, - silentRefreshTimeout: 5000, - timeoutFactor: 0.25, - sessionChecksEnabled: true, - clearHashAfterLogin: false, - logoutUrl: 'https://console-stg.cloud.vmware.com/csp/gateway/discovery?logout', - nonceStateSeparator: 'semicolon' - }, - resourceServer: { - allowedUrls: ['https://console-stg.cloud.vmware.com/', 'https://gaz-preview.csp-vidm-prod.com/', '/data-jobs'], - sendAccessToken: true - }, - refreshTokenConfig: { - start: 500, - remainingTime: 360, - checkInterval: 60 - } + consoleCloudUrl: "https://console-stg.cloud.vmware.com/", + orgLinkRoot: "/csp/gateway/am/api/orgs/", + authConfig: { + issuer: "https://console-stg.cloud.vmware.com/csp/gateway/am/api/", + redirectUri: "$window.location.origin/", + skipIssuerCheck: true, + requestAccessToken: true, + oidc: true, + strictDiscoveryDocumentValidation: false, + clientId: "8qQgcmhhsXuhGJs58ZW1hQ86h3eZXTpBV6t", + responseType: "code", + scope: "openid ALL_PERMISSIONS customer_number group_names", + showDebugInformation: true, + silentRefreshRedirectUri: "$window.location.origin/silent-refresh.html", + useSilentRefresh: true, + silentRefreshTimeout: 5000, + timeoutFactor: 0.25, + sessionChecksEnabled: true, + clearHashAfterLogin: false, + logoutUrl: + "https://console-stg.cloud.vmware.com/csp/gateway/discovery?logout", + nonceStateSeparator: "semicolon", + }, + resourceServer: { + allowedUrls: [ + "https://console-stg.cloud.vmware.com/", + "https://gaz-preview.csp-vidm-prod.com/", + "/data-jobs", + ], + sendAccessToken: true, + }, + refreshTokenConfig: { + start: 500, + remainingTime: 360, + checkInterval: 60, + }, }; module.exports = { - BASIC_AUTH_CONFIG, - CSP_ID_TOKEN_KEY, - CSP_ACCESS_TOKEN_KEY, - CSP_EXPIRES_AT_KEY, - TEAM_VDK, - TEAM_VDK_DATA_JOB_FAILING, - TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V0, - TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V1, - TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V2, - TEAM_VDK_DATA_JOB_TEST_V10, - TEAM_VDK_DATA_JOB_TEST_V11, - TEAM_VDK_DATA_JOB_TEST_V12 + BASIC_AUTH_CONFIG, + CSP_ID_TOKEN_KEY, + CSP_ACCESS_TOKEN_KEY, + CSP_EXPIRES_AT_KEY, + TEAM_VDK, + TEAM_VDK_DATA_JOB_FAILING, + TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V0, + TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V1, + TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V2, + TEAM_VDK_DATA_JOB_TEST_V10, + TEAM_VDK_DATA_JOB_TEST_V11, + TEAM_VDK_DATA_JOB_TEST_V12, }; diff --git a/projects/frontend/data-pipelines/gui/e2e/support/index.js b/projects/frontend/data-pipelines/gui/e2e/support/index.js index 98f58cbf51..f49fa2dd22 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/index.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/index.js @@ -19,33 +19,41 @@ // *********************************************************** // Import commands.js using ES2015 syntax: -import './commands'; +import "./commands"; -require('@neuralegion/cypress-har-generator/commands'); +require("@neuralegion/cypress-har-generator/commands"); -const CYPRESS_GREP = require('cypress-grep'); -const CYPRESS_TERMINAL = require('cypress-terminal-report/src/installLogsCollector'); +const CYPRESS_GREP = require("cypress-grep"); +const CYPRESS_TERMINAL = require("cypress-terminal-report/src/installLogsCollector"); CYPRESS_GREP(); -const CYPRESS_TERMINAL_ERROR_BLACKLIST = ['NG0100: ExpressionChangedAfterItHasBeenCheckedError', '"url": "https://console-stg.cloud.vmware.com/csp/gateway/slc/api/principal/org/service-families"', 'error loading jwks,']; +const CYPRESS_TERMINAL_ERROR_BLACKLIST = [ + "NG0100: ExpressionChangedAfterItHasBeenCheckedError", + '"url": "https://console-stg.cloud.vmware.com/csp/gateway/slc/api/principal/org/service-families"', + "error loading jwks,", +]; CYPRESS_TERMINAL({ - filterLog: ([logType, message, severity]) => { - if (logType !== 'cons:error') { - return true; - } - - return severity !== 'error' || !message || !CYPRESS_TERMINAL_ERROR_BLACKLIST.some((value) => message.includes(value)); + filterLog: ([logType, message, severity]) => { + if (logType !== "cons:error") { + return true; } + + return ( + severity !== "error" || + !message || + !CYPRESS_TERMINAL_ERROR_BLACKLIST.some((value) => message.includes(value)) + ); + }, }); Cypress.Server.defaults({ - delay: 500, - force404: false, - ignore: (xhr) => { - return true; - } + delay: 500, + force404: false, + ignore: (xhr) => { + return true; + }, }); // Alternatively you can use CommonJS syntax: diff --git a/projects/frontend/data-pipelines/gui/e2e/support/pages/base/base-page.po.js b/projects/frontend/data-pipelines/gui/e2e/support/pages/base/base-page.po.js index 4869b97cd3..a4f301a755 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/pages/base/base-page.po.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/pages/base/base-page.po.js @@ -5,660 +5,706 @@ /// -const path = require('path'); +const path = require("path"); /** * ** Base page superclass of all page objects classes. */ export class BasePagePO { - static WAIT_AFTER_API_MODIFY_CALL = 1000; // ms - static WAIT_SMART_DELAY = 250; // ms - static WAIT_CLICK_THINK_TIME = 500; // ms - static WAIT_VIEW_TO_RENDER_SHORT = 600; // ms - static WAIT_VIEW_TO_RENDER_BASE = 1000; // ms - static WAIT_MODAL_TO_RENDER_BASE = 500; //ms - static WAIT_ACTION_THINK_TIME = 750; // ms - static WAIT_INITIAL_PAGE_LOAD = 2 * 1000; // ms (2s) - static WAIT_BEFORE_SUITE_START = 1.5 * 1000; // ms (1.5s) - static WAIT_SHORT_TASK = 60 * 1000; // ms (1m) - static WAIT_MEDIUM_TASK = 3 * 60 * 1000; // ms (3m) - static WAIT_LONG_TASK = 5 * 60 * 1000; // ms (5m) - static WAIT_EXTRA_LONG_TASK = 10 * 60 * 1000; // ms (10m) - - // Generics - - /** - * ** Acquire JWT access token from CSP console API and return Chainable. - * - * @returns {Cypress.Chainable} - */ - static login() { - return this.executeCypressCommand('login'); - } - - /** - ** Wire user session when reattach auth cookies if exist otherwise request auth token and then set auth cookies. - * - * @returns {Cypress.Chainable} - */ - static wireUserSession() { - return this.executeCypressCommand('wireUserSession'); - } - - /** - * ** Returns instance of the page object. - */ - static getPage() { - return new BasePagePO(); - } - - /** - * ** Returns current browser Url. - * - * @param {number} timeout - * @returns {Cypress.Chainable} - */ - static getCurrentUrl(timeout) { - return cy.url({ - timeout: timeout ?? Cypress.config().defaultCommandTimeout - }); - } - - /** - * ** Init Http requests interceptors. - */ - static initInterceptors() { - // CSP - this.executeCypressCommand('initCspLoggedUserProfileGetReqInterceptor'); - // Data Pipelines - this.executeCypressCommand('initDataJobsApiGetReqInterceptor'); - } - - /** - * ** Navigate to some url. - * - * @param {string} url - * @returns {Cypress.Chainable} - */ - static navigateToUrl(url) { - return cy.visit(url); - } - - /** - * ** Navigate to page object page url. - */ - static navigateTo(..._args) { - this.navigateToUrl('/'); - - this.waitForApplicationBootstrap(); - - return this.getPage(); - } - - static navigateToNoBootstrap() { - this.navigateToUrl('/'); - this.waitForViewToRenderShort(); - return this.getPage(); - } - - /** - * ** Navigate to page with provided nav link id through side menu navigation and return instance of page object. - * - * @param {string|null} navLinkId - * @param {'openExplore'|'openManage'} sideNavCommand - * @param {{before: () => void; after: () => void;}} interceptors - */ - static navigateWithSideMenu(navLinkId = null, sideNavCommand = null, interceptors = null) { - cy.visit('/'); - - if (interceptors && typeof interceptors.before === 'function') { - interceptors.before(); - } else { - this.waitForApplicationBootstrap(); - } - - if (navLinkId) { - const basePagePO = this.getPage(); - - if (sideNavCommand === 'openExplore') { - basePagePO.openSideMenuNavExplore(); - } else if (sideNavCommand === 'openManage') { - basePagePO.openSideMenuNavManage(); - } - - basePagePO.navigateToPage(navLinkId); - } - - if (interceptors && typeof interceptors.after === 'function') { - interceptors.after(); + static WAIT_AFTER_API_MODIFY_CALL = 1000; // ms + static WAIT_SMART_DELAY = 250; // ms + static WAIT_CLICK_THINK_TIME = 500; // ms + static WAIT_VIEW_TO_RENDER_SHORT = 600; // ms + static WAIT_VIEW_TO_RENDER_BASE = 1000; // ms + static WAIT_MODAL_TO_RENDER_BASE = 500; //ms + static WAIT_ACTION_THINK_TIME = 750; // ms + static WAIT_INITIAL_PAGE_LOAD = 2 * 1000; // ms (2s) + static WAIT_BEFORE_SUITE_START = 1.5 * 1000; // ms (1.5s) + static WAIT_SHORT_TASK = 60 * 1000; // ms (1m) + static WAIT_MEDIUM_TASK = 3 * 60 * 1000; // ms (3m) + static WAIT_LONG_TASK = 5 * 60 * 1000; // ms (5m) + static WAIT_EXTRA_LONG_TASK = 10 * 60 * 1000; // ms (10m) + + // Generics + + /** + * ** Acquire JWT access token from CSP console API and return Chainable. + * + * @returns {Cypress.Chainable} + */ + static login() { + return this.executeCypressCommand("login"); + } + + /** + ** Wire user session when reattach auth cookies if exist otherwise request auth token and then set auth cookies. + * + * @returns {Cypress.Chainable} + */ + static wireUserSession() { + return this.executeCypressCommand("wireUserSession"); + } + + /** + * ** Returns instance of the page object. + */ + static getPage() { + return new BasePagePO(); + } + + /** + * ** Returns current browser Url. + * + * @param {number} timeout + * @returns {Cypress.Chainable} + */ + static getCurrentUrl(timeout) { + return cy.url({ + timeout: timeout ?? Cypress.config().defaultCommandTimeout, + }); + } + + /** + * ** Init Http requests interceptors. + */ + static initInterceptors() { + // CSP + this.executeCypressCommand("initCspLoggedUserProfileGetReqInterceptor"); + // Data Pipelines + this.executeCypressCommand("initDataJobsApiGetReqInterceptor"); + } + + /** + * ** Navigate to some url. + * + * @param {string} url + * @returns {Cypress.Chainable} + */ + static navigateToUrl(url) { + return cy.visit(url); + } + + /** + * ** Navigate to page object page url. + */ + static navigateTo(..._args) { + this.navigateToUrl("/"); + + this.waitForApplicationBootstrap(); + + return this.getPage(); + } + + static navigateToNoBootstrap() { + this.navigateToUrl("/"); + this.waitForViewToRenderShort(); + return this.getPage(); + } + + /** + * ** Navigate to page with provided nav link id through side menu navigation and return instance of page object. + * + * @param {string|null} navLinkId + * @param {'openExplore'|'openManage'} sideNavCommand + * @param {{before: () => void; after: () => void;}} interceptors + */ + static navigateWithSideMenu( + navLinkId = null, + sideNavCommand = null, + interceptors = null, + ) { + cy.visit("/"); + + if (interceptors && typeof interceptors.before === "function") { + interceptors.before(); + } else { + this.waitForApplicationBootstrap(); + } + + if (navLinkId) { + const basePagePO = this.getPage(); + + if (sideNavCommand === "openExplore") { + basePagePO.openSideMenuNavExplore(); + } else if (sideNavCommand === "openManage") { + basePagePO.openSideMenuNavManage(); + } + + basePagePO.navigateToPage(navLinkId); + } + + if (interceptors && typeof interceptors.after === "function") { + interceptors.after(); + } + + return this.getPage(); + } + + /** + * ** Execute Cypress command. + * + * @param {string} cypressCommand + * @param {number | null} numberOfExecution + * @param {number | null} additionalWait + * @returns {Cypress.Chainable<{context: string, action: string}>|Cypress.Chainable} + */ + static executeCypressCommand( + cypressCommand, + numberOfExecution = null, + additionalWait = null, + ) { + if (typeof numberOfExecution === "number") { + /** + * @type Cypress.Chainable + */ + let lastCommand; + + for (let i = 0; i < numberOfExecution; i++) { + lastCommand = cy[cypressCommand](); + } + + if (typeof additionalWait === "number") { + return cy.wait(additionalWait); + } + + if (lastCommand) { + return lastCommand; + } + + return cy.wrap({ + context: "BasePagePO::base-page.po::executeCypressCommand()", + action: "continue", + }); + } else { + return cy[cypressCommand]().then(($value) => { + if (typeof additionalWait === "number") { + return cy.wait(additionalWait); } - return this.getPage(); - } - - /** - * ** Execute Cypress command. - * - * @param {string} cypressCommand - * @param {number | null} numberOfExecution - * @param {number | null} additionalWait - * @returns {Cypress.Chainable<{context: string, action: string}>|Cypress.Chainable} - */ - static executeCypressCommand(cypressCommand, numberOfExecution = null, additionalWait = null) { - if (typeof numberOfExecution === 'number') { - /** - * @type Cypress.Chainable - */ - let lastCommand; - - for (let i = 0; i < numberOfExecution; i++) { - lastCommand = cy[cypressCommand](); - } - - if (typeof additionalWait === 'number') { - return cy.wait(additionalWait); + return $value; + }); + } + } + + /** + * ** Wait for CSP logged user Get req interceptor completion. + * + * @param {number} additionalWait + * @return {Cypress.Chainable} + */ + static waitForCspLoggedUserProfileGetReqInterceptor(additionalWait = 1000) { + return this.executeCypressCommand( + "waitForCspLoggedUserProfileGetReqInterceptor", + 1, + additionalWait, + ); + } + + /** + * ** Wait for Data Jobs req interceptor completion. + * + * @param {number} numberOfReqToWait + * @param {number} additionalWait + * @return {Cypress.Chainable} + */ + static waitForDataJobsApiGetReqInterceptor( + numberOfReqToWait = 1, + additionalWait = 1000, + ) { + return this.executeCypressCommand( + "waitForDataJobsApiGetReqInterceptor", + numberOfReqToWait, + additionalWait, + ); + } + + /** + * ** Wait for Application bootstrap. + * + * @return {Cypress.Chainable} + */ + static waitForApplicationBootstrap() { + return this.waitForCspLoggedUserProfileGetReqInterceptor(null) + .then(() => this.waitForViewToRenderShort()) + .then(() => this.getMainContainer().should("exist")); + } + + /** + * ** Wait for initial page load. + * + * @param {number} factor + * @return {Cypress.Chainable} + */ + static waitForInitialPageLoad(factor = 1) { + return cy.wait(factor * BasePagePO.WAIT_INITIAL_PAGE_LOAD); + } + + /** + * ** Wait for View to render. + * + * @param {number} factor + * @return {Cypress.Chainable} + */ + static waitForViewToRender(factor = 1) { + return cy.wait(factor * BasePagePO.WAIT_VIEW_TO_RENDER_BASE); + } + + /** + * ** Wait for View to render short. + * + * @param {number} factor + * @return {Cypress.Chainable} + */ + static waitForViewToRenderShort(factor = 1) { + return cy.wait(factor * BasePagePO.WAIT_VIEW_TO_RENDER_SHORT); + } + + /** + * ** Start HAR recording. + * + * @returns {Cypress.Chainable} + */ + static recordHarIfSupported() { + return this.executeCypressCommand("recordHarIfSupported"); + } + + /** + * ** Save recorded HAR. + * + * @returns {Cypress.Chainable} + */ + static saveHarIfSupported() { + return this.executeCypressCommand("saveHarIfSupported"); + } + + // Selectors + + /** + * ** Get main container. + * + * @returns {Cypress.Chainable>} + */ + static getMainContainer() { + return cy.get("[data-automation=vdk]", { + timeout: BasePagePO.WAIT_SHORT_TASK, + }); + } + + /** + * ** Wait for Data Jobs req interceptor completion. + * + * @param {number} numberOfReqToWait + * @return {Cypress.Chainable} + */ + waitForDataJobsApiGetReqInterceptor(numberOfReqToWait = 1) { + return BasePagePO.waitForDataJobsApiGetReqInterceptor(numberOfReqToWait); + } + + /** + * ** Wait smart delay. + * + * @param {number} factor + * @return {Cypress.Chainable} + */ + waitForSmartDelay(factor = 1) { + return cy.wait(factor * BasePagePO.WAIT_SMART_DELAY); // ms + } + + /** + * ** Wait Initial page load to finish. + * + * @param {number} factor + * @return {Cypress.Chainable} + */ + waitForInitialPageLoad(factor = 1) { + return BasePagePO.waitForInitialPageLoad(factor); // ms + } + + /** + * ** Wait for view to render + * + * @param {number} factor + * @return {Cypress.Chainable} + */ + waitForViewToRender(factor = 1) { + return cy.wait(factor * BasePagePO.WAIT_VIEW_TO_RENDER_BASE); // ms + } + + /** + * ** Wait for view to render + * + * @param {number} factor + * @return {Cypress.Chainable} + */ + waitForViewToRenderShort(factor = 1) { + return cy.wait(factor * BasePagePO.WAIT_VIEW_TO_RENDER_SHORT); // ms + } + + /** + * ** Wait for modal to render + * + * @param {number} factor + * @return {Cypress.Chainable} + */ + waitForModalToRender(factor = 1) { + return cy.wait(factor * BasePagePO.WAIT_MODAL_TO_RENDER_BASE); // ms + } + + /** + * ** Wait before click (something like thinking time in real env). + * + * @param {number} factor + * @return {Cypress.Chainable} + */ + waitForClickThinkingTime(factor = 1) { + return cy.wait(factor * BasePagePO.WAIT_CLICK_THINK_TIME); // ms + } + + /** + * ** Wait for generic action similar to click thinking time. + * + * @param {number} factor + * @return {Cypress.Chainable} + */ + waitForActionThinkingTime(factor = 1) { + return cy.wait(factor * BasePagePO.WAIT_ACTION_THINK_TIME); // ms + } + + /** + * ** Wait until Data grid is loaded. + * + * @param {string} contextSelector + * @param {number} timeout + * @returns {Cypress.Chainable} + */ + waitForGridToLoad(contextSelector, timeout = BasePagePO.WAIT_SHORT_TASK) { + return cy + .get(`${contextSelector} clr-datagrid[data-automation=clr-grid-loaded]`, { + timeout: this.resolveTimeout(timeout), + }) + .should("exist"); + } + + /** + * ** Returns current browser Url. + * + * @param {number} timeout + * @returns {Cypress.Chainable} + */ + getCurrentUrl(timeout) { + return BasePagePO.getCurrentUrl(timeout); + } + + /** + * ** Returns current browser Url normalized. + * + * @param {{includeUrl?: boolean; includeBaseUrl?: boolean; includePathSegment?: boolean; includeQueryString?: boolean; decodeQueryString?: boolean;}} extras + * @returns {Cypress.Chainable<{pathSegment: string; queryParams: {[key: string]: string}; baseUrl?: string; url?: string}>} + */ + getCurrentUrlNormalized(extras = { includeQueryString: true }) { + return this.getCurrentUrl().then((locationHref) => { + const fullUrlSplit = locationHref.split("?"); + const url = fullUrlSplit[0]; + const queryString = fullUrlSplit[1] ?? ""; + const pathSegment = url.replace(Cypress.config().baseUrl, ""); + + /** + * @type {{pathSegment: string; queryParams: {[key: string]: string}; baseUrl?: string; url?: string}} + */ + const normalizedData = {}; + + if (extras.includeBaseUrl) { + normalizedData.baseUrl = Cypress.config().baseUrl; + } + + if (extras.includeUrl) { + normalizedData.url = url; + } + + if (extras.includePathSegment) { + normalizedData.pathSegment = `/${pathSegment.replace(/^\/+/, "")}`; + } + + if (extras.includeQueryString) { + normalizedData.queryParams = queryString + .split("&") + .map((queryStringChunk) => { + if (queryStringChunk.length === 0) { + return {}; } - if (lastCommand) { - return lastCommand; - } - - return cy.wrap({ - context: 'BasePagePO::base-page.po::executeCypressCommand()', - action: 'continue' - }); - } else { - return cy[cypressCommand]().then(($value) => { - if (typeof additionalWait === 'number') { - return cy.wait(additionalWait); - } - - return $value; - }); - } - } - - /** - * ** Wait for CSP logged user Get req interceptor completion. - * - * @param {number} additionalWait - * @return {Cypress.Chainable} - */ - static waitForCspLoggedUserProfileGetReqInterceptor(additionalWait = 1000) { - return this.executeCypressCommand('waitForCspLoggedUserProfileGetReqInterceptor', 1, additionalWait); - } - - /** - * ** Wait for Data Jobs req interceptor completion. - * - * @param {number} numberOfReqToWait - * @param {number} additionalWait - * @return {Cypress.Chainable} - */ - static waitForDataJobsApiGetReqInterceptor(numberOfReqToWait = 1, additionalWait = 1000) { - return this.executeCypressCommand('waitForDataJobsApiGetReqInterceptor', numberOfReqToWait, additionalWait); - } - - /** - * ** Wait for Application bootstrap. - * - * @return {Cypress.Chainable} - */ - static waitForApplicationBootstrap() { - return this.waitForCspLoggedUserProfileGetReqInterceptor(null) - .then(() => this.waitForViewToRenderShort()) - .then(() => this.getMainContainer().should('exist')); - } - - /** - * ** Wait for initial page load. - * - * @param {number} factor - * @return {Cypress.Chainable} - */ - static waitForInitialPageLoad(factor = 1) { - return cy.wait(factor * BasePagePO.WAIT_INITIAL_PAGE_LOAD); - } - - /** - * ** Wait for View to render. - * - * @param {number} factor - * @return {Cypress.Chainable} - */ - static waitForViewToRender(factor = 1) { - return cy.wait(factor * BasePagePO.WAIT_VIEW_TO_RENDER_BASE); - } - - /** - * ** Wait for View to render short. - * - * @param {number} factor - * @return {Cypress.Chainable} - */ - static waitForViewToRenderShort(factor = 1) { - return cy.wait(factor * BasePagePO.WAIT_VIEW_TO_RENDER_SHORT); - } - - /** - * ** Start HAR recording. - * - * @returns {Cypress.Chainable} - */ - static recordHarIfSupported() { - return this.executeCypressCommand('recordHarIfSupported'); - } - - /** - * ** Save recorded HAR. - * - * @returns {Cypress.Chainable} - */ - static saveHarIfSupported() { - return this.executeCypressCommand('saveHarIfSupported'); - } - - // Selectors - - /** - * ** Get main container. - * - * @returns {Cypress.Chainable>} - */ - static getMainContainer() { - return cy.get('[data-automation=vdk]', { - timeout: BasePagePO.WAIT_SHORT_TASK - }); - } - - /** - * ** Wait for Data Jobs req interceptor completion. - * - * @param {number} numberOfReqToWait - * @return {Cypress.Chainable} - */ - waitForDataJobsApiGetReqInterceptor(numberOfReqToWait = 1) { - return BasePagePO.waitForDataJobsApiGetReqInterceptor(numberOfReqToWait); - } - - /** - * ** Wait smart delay. - * - * @param {number} factor - * @return {Cypress.Chainable} - */ - waitForSmartDelay(factor = 1) { - return cy.wait(factor * BasePagePO.WAIT_SMART_DELAY); // ms - } - - /** - * ** Wait Initial page load to finish. - * - * @param {number} factor - * @return {Cypress.Chainable} - */ - waitForInitialPageLoad(factor = 1) { - return BasePagePO.waitForInitialPageLoad(factor); // ms - } - - /** - * ** Wait for view to render - * - * @param {number} factor - * @return {Cypress.Chainable} - */ - waitForViewToRender(factor = 1) { - return cy.wait(factor * BasePagePO.WAIT_VIEW_TO_RENDER_BASE); // ms - } - - /** - * ** Wait for view to render - * - * @param {number} factor - * @return {Cypress.Chainable} - */ - waitForViewToRenderShort(factor = 1) { - return cy.wait(factor * BasePagePO.WAIT_VIEW_TO_RENDER_SHORT); // ms - } - - /** - * ** Wait for modal to render - * - * @param {number} factor - * @return {Cypress.Chainable} - */ - waitForModalToRender(factor = 1) { - return cy.wait(factor * BasePagePO.WAIT_MODAL_TO_RENDER_BASE); // ms - } - - /** - * ** Wait before click (something like thinking time in real env). - * - * @param {number} factor - * @return {Cypress.Chainable} - */ - waitForClickThinkingTime(factor = 1) { - return cy.wait(factor * BasePagePO.WAIT_CLICK_THINK_TIME); // ms - } - - /** - * ** Wait for generic action similar to click thinking time. - * - * @param {number} factor - * @return {Cypress.Chainable} - */ - waitForActionThinkingTime(factor = 1) { - return cy.wait(factor * BasePagePO.WAIT_ACTION_THINK_TIME); // ms - } - - /** - * ** Wait until Data grid is loaded. - * - * @param {string} contextSelector - * @param {number} timeout - * @returns {Cypress.Chainable} - */ - waitForGridToLoad(contextSelector, timeout = BasePagePO.WAIT_SHORT_TASK) { - return cy.get(`${contextSelector} clr-datagrid[data-automation=clr-grid-loaded]`, { timeout: this.resolveTimeout(timeout) }).should('exist'); - } - - /** - * ** Returns current browser Url. - * - * @param {number} timeout - * @returns {Cypress.Chainable} - */ - getCurrentUrl(timeout) { - return BasePagePO.getCurrentUrl(timeout); - } - - /** - * ** Returns current browser Url normalized. - * - * @param {{includeUrl?: boolean; includeBaseUrl?: boolean; includePathSegment?: boolean; includeQueryString?: boolean; decodeQueryString?: boolean;}} extras - * @returns {Cypress.Chainable<{pathSegment: string; queryParams: {[key: string]: string}; baseUrl?: string; url?: string}>} - */ - getCurrentUrlNormalized(extras = { includeQueryString: true }) { - return this.getCurrentUrl().then((locationHref) => { - const fullUrlSplit = locationHref.split('?'); - const url = fullUrlSplit[0]; - const queryString = fullUrlSplit[1] ?? ''; - const pathSegment = url.replace(Cypress.config().baseUrl, ''); - - /** - * @type {{pathSegment: string; queryParams: {[key: string]: string}; baseUrl?: string; url?: string}} - */ - const normalizedData = {}; - - if (extras.includeBaseUrl) { - normalizedData.baseUrl = Cypress.config().baseUrl; - } - - if (extras.includeUrl) { - normalizedData.url = url; - } - - if (extras.includePathSegment) { - normalizedData.pathSegment = `/${pathSegment.replace(/^\/+/, '')}`; - } - - if (extras.includeQueryString) { - normalizedData.queryParams = queryString - .split('&') - .map((queryStringChunk) => { - if (queryStringChunk.length === 0) { - return {}; - } - - const splitParam = queryStringChunk.split('='); - - return { - [splitParam[0]]: extras.decodeQueryString ? decodeURIComponent(splitParam[1]) : splitParam[1] - }; - }) - .reduce((accumulator, currentValue) => { - return { - ...accumulator, - ...currentValue - }; - }, {}); - } - - return cy.wrap(normalizedData); - }); - } - - // Selectors - - /** - * ** Get Page Title. - * - * @param {number | undefined | null} timeout - * @returns {Cypress.Chainable>} - */ - getPageTitle(timeout) { - return cy.get('[data-cy=data-pipelines-page-title]', { - timeout: this.resolveTimeout(timeout ?? 30000) - }); - } - - /** - * ** Get side menu nav group btn for Explore - * - * @returns {Cypress.Chainable>} - */ - getSideMenuExploreGroupBtn() { - return cy.get('[data-cy=data-pipelines-nav-group-explore] button').should('exist').contains('Explore'); - } - - /** - * ** Get side menu nav group btn for Manage - * - * @returns {Cypress.Chainable>} - */ - getSideMenuManageGroupBtn() { - return cy.get('[data-cy=data-pipelines-nav-group-manage] button').should('exist').contains('Manage'); - } - - /** - * ** Get side menu navigation link with given id. - * - * @param {string} navLinkId - * @returns {Cypress.Chainable>} - */ - getSideMenuNavLink(navLinkId) { - return cy.get(`#${navLinkId} > span`); - } - - /** - * ** Get toast element. - * - * @param {number | undefined | null} timeout - * @returns {Cypress.Chainable>} - */ - getToast(timeout) { - return cy.get('vdk-toast-container vdk-toast', { - timeout: this.resolveTimeout(timeout) - }); - } - - /** - * ** Get Toast title. - * - * @param {number | undefined | null} timeout - * @returns {Cypress.Chainable>} - */ - getToastTitle(timeout) { - return this.getToast(timeout).get('.toast-title'); - } - - /** - * ** Get Toast dismiss button. - * - * @param {number | undefined | null} timeout - * @returns {Cypress.Chainable>} - */ - getToastDismiss(timeout) { - return this.getToast(timeout).get('.dismiss-bg'); - } - - /** - * ** Get Modal dialog. - * - * @param {number | undefined | null} timeout - * @returns {Cypress.Chainable>} - */ - getModal(timeout) { - return cy.get('clr-modal .modal-dialog', { - timeout: this.resolveTimeout(timeout) - }); - } - - /** - * ** Get DataGrid. - * - * - Override to select desired DataGrid. - * - * @param {string|null} contextSelector - * @returns {Cypress.Chainable>} - */ - getGrid(contextSelector = null) { - if (contextSelector) { - return cy.get(`${contextSelector} clr-datagrid`); - } - - return cy.get('clr-datagrid'); - } - - /** - * ** Get Cell from DataGrid using the searchQuery. - * - * @param {string} searchQuery - * @returns {Cypress.Chainable>} - */ - getGridCell(searchQuery) { - return this.getGrid().contains('clr-dg-cell', searchQuery); - } - - /** - * ** Get Row from DataGrid using the searchQuery that identifies one of the Cells. - * - * @param {string} searchQuery - * @returns {Cypress.Chainable>} - */ - getGridRow(searchQuery) { - return this.getGridCell(searchQuery).parents('clr-dg-row'); - } - - /** - * ** Get all Rows from DatGrid. - * - * @returns {Cypress.Chainable>} - */ - getGridRows() { - return this.getGrid().find('clr-dg-row'); - } - - /** - * ** Get select button from Row that is identified by the searchQuery. - * - * @param {string} searchQuery - * @returns {Cypress.Chainable>} - */ - getGridRowSelectBtn(searchQuery) { - return this.getGridRow(searchQuery).find('.datagrid-select input'); - } - - // Actions - - /** - * ** Open Explore side menu nav group. - * - * @return {Cypress.Chainable} - */ - openSideMenuNavExplore() { - return this.getSideMenuExploreGroupBtn() - .should('exist') - .scrollIntoView() - .click({ force: true }) - .then(() => this.waitForViewToRenderShort()); - } - - /** - * ** Open Manage side menu nav group. - * - * @return {Cypress.Chainable} - */ - openSideMenuNavManage() { - return this.getSideMenuManageGroupBtn() - .should('exist') - .scrollIntoView() - .click({ force: true }) - .then(() => this.waitForViewToRenderShort()); - } - - /** - * ** Navigate to Manage page through link with provided id. - * - * @param {string} navLinkId - * @returns {Cypress.Chainable} - */ - navigateToPage(navLinkId) { - return this.getSideMenuNavLink(navLinkId).should('exist').click({ force: true }); - } - - /** - * ** Resolve timeout using provided value or fallback to default value. - * - * @param {number | undefined | null} timeout - * @returns {number} - */ - resolveTimeout(timeout) { - return timeout === undefined ? Cypress.config('defaultCommandTimeout') : timeout; - } - - /** - * ** Read file with provided name in provided directory. - * - * @param {string} folderName - * @param {string} fileName - * @returns {Cypress.Chainable} - */ - readFile(folderName, fileName) { - const downloadsFolder = Cypress.config(folderName); - - return cy.readFile(path.join(downloadsFolder, fileName)); - } - - /** - * ** Clear local storage key if provided, otherwise clear everything. - * - * @param {string | undefined | null} key - */ - clearLocalStorage(key) { - if (key) { - cy.clearLocalStorage(key); - - return; - } - - cy.clearLocalStorage(); - } - - selectGridRow(searchQuery) { - this.getGridRowSelectBtn(searchQuery).should('exist').scrollIntoView().check({ force: true }); - - this.waitForActionThinkingTime(); - } - - /** - * ** Wait until Data grid is loaded. - * - * @param {'explore'|'manage'} contextSelector - * @param {number} timeout - * @returns {Cypress.Chainable} - */ - _waitForGridToLoad(contextSelector, timeout = DataJobsBasePO.WAIT_SHORT_TASK) { - return cy.get(`[data-cy=${contextSelector}] clr-datagrid[data-automation=clr-grid-loaded]`, { timeout: this.resolveTimeout(timeout) }).should('exist'); - } + const splitParam = queryStringChunk.split("="); + + return { + [splitParam[0]]: extras.decodeQueryString + ? decodeURIComponent(splitParam[1]) + : splitParam[1], + }; + }) + .reduce((accumulator, currentValue) => { + return { + ...accumulator, + ...currentValue, + }; + }, {}); + } + + return cy.wrap(normalizedData); + }); + } + + // Selectors + + /** + * ** Get Page Title. + * + * @param {number | undefined | null} timeout + * @returns {Cypress.Chainable>} + */ + getPageTitle(timeout) { + return cy.get("[data-cy=data-pipelines-page-title]", { + timeout: this.resolveTimeout(timeout ?? 30000), + }); + } + + /** + * ** Get side menu nav group btn for Explore + * + * @returns {Cypress.Chainable>} + */ + getSideMenuExploreGroupBtn() { + return cy + .get("[data-cy=data-pipelines-nav-group-explore] button") + .should("exist") + .contains("Explore"); + } + + /** + * ** Get side menu nav group btn for Manage + * + * @returns {Cypress.Chainable>} + */ + getSideMenuManageGroupBtn() { + return cy + .get("[data-cy=data-pipelines-nav-group-manage] button") + .should("exist") + .contains("Manage"); + } + + /** + * ** Get side menu navigation link with given id. + * + * @param {string} navLinkId + * @returns {Cypress.Chainable>} + */ + getSideMenuNavLink(navLinkId) { + return cy.get(`#${navLinkId} > span`); + } + + /** + * ** Get toast element. + * + * @param {number | undefined | null} timeout + * @returns {Cypress.Chainable>} + */ + getToast(timeout) { + return cy.get("vdk-toast-container vdk-toast", { + timeout: this.resolveTimeout(timeout), + }); + } + + /** + * ** Get Toast title. + * + * @param {number | undefined | null} timeout + * @returns {Cypress.Chainable>} + */ + getToastTitle(timeout) { + return this.getToast(timeout).get(".toast-title"); + } + + /** + * ** Get Toast dismiss button. + * + * @param {number | undefined | null} timeout + * @returns {Cypress.Chainable>} + */ + getToastDismiss(timeout) { + return this.getToast(timeout).get(".dismiss-bg"); + } + + /** + * ** Get Modal dialog. + * + * @param {number | undefined | null} timeout + * @returns {Cypress.Chainable>} + */ + getModal(timeout) { + return cy.get("clr-modal .modal-dialog", { + timeout: this.resolveTimeout(timeout), + }); + } + + /** + * ** Get DataGrid. + * + * - Override to select desired DataGrid. + * + * @param {string|null} contextSelector + * @returns {Cypress.Chainable>} + */ + getGrid(contextSelector = null) { + if (contextSelector) { + return cy.get(`${contextSelector} clr-datagrid`); + } + + return cy.get("clr-datagrid"); + } + + /** + * ** Get Cell from DataGrid using the searchQuery. + * + * @param {string} searchQuery + * @returns {Cypress.Chainable>} + */ + getGridCell(searchQuery) { + return this.getGrid().contains("clr-dg-cell", searchQuery); + } + + /** + * ** Get Row from DataGrid using the searchQuery that identifies one of the Cells. + * + * @param {string} searchQuery + * @returns {Cypress.Chainable>} + */ + getGridRow(searchQuery) { + return this.getGridCell(searchQuery).parents("clr-dg-row"); + } + + /** + * ** Get all Rows from DatGrid. + * + * @returns {Cypress.Chainable>} + */ + getGridRows() { + return this.getGrid().find("clr-dg-row"); + } + + /** + * ** Get select button from Row that is identified by the searchQuery. + * + * @param {string} searchQuery + * @returns {Cypress.Chainable>} + */ + getGridRowSelectBtn(searchQuery) { + return this.getGridRow(searchQuery).find(".datagrid-select input"); + } + + // Actions + + /** + * ** Open Explore side menu nav group. + * + * @return {Cypress.Chainable} + */ + openSideMenuNavExplore() { + return this.getSideMenuExploreGroupBtn() + .should("exist") + .scrollIntoView() + .click({ force: true }) + .then(() => this.waitForViewToRenderShort()); + } + + /** + * ** Open Manage side menu nav group. + * + * @return {Cypress.Chainable} + */ + openSideMenuNavManage() { + return this.getSideMenuManageGroupBtn() + .should("exist") + .scrollIntoView() + .click({ force: true }) + .then(() => this.waitForViewToRenderShort()); + } + + /** + * ** Navigate to Manage page through link with provided id. + * + * @param {string} navLinkId + * @returns {Cypress.Chainable} + */ + navigateToPage(navLinkId) { + return this.getSideMenuNavLink(navLinkId) + .should("exist") + .click({ force: true }); + } + + /** + * ** Resolve timeout using provided value or fallback to default value. + * + * @param {number | undefined | null} timeout + * @returns {number} + */ + resolveTimeout(timeout) { + return timeout === undefined + ? Cypress.config("defaultCommandTimeout") + : timeout; + } + + /** + * ** Read file with provided name in provided directory. + * + * @param {string} folderName + * @param {string} fileName + * @returns {Cypress.Chainable} + */ + readFile(folderName, fileName) { + const downloadsFolder = Cypress.config(folderName); + + return cy.readFile(path.join(downloadsFolder, fileName)); + } + + /** + * ** Clear local storage key if provided, otherwise clear everything. + * + * @param {string | undefined | null} key + */ + clearLocalStorage(key) { + if (key) { + cy.clearLocalStorage(key); + + return; + } + + cy.clearLocalStorage(); + } + + selectGridRow(searchQuery) { + this.getGridRowSelectBtn(searchQuery) + .should("exist") + .scrollIntoView() + .check({ force: true }); + + this.waitForActionThinkingTime(); + } + + /** + * ** Wait until Data grid is loaded. + * + * @param {'explore'|'manage'} contextSelector + * @param {number} timeout + * @returns {Cypress.Chainable} + */ + _waitForGridToLoad( + contextSelector, + timeout = DataJobsBasePO.WAIT_SHORT_TASK, + ) { + return cy + .get( + `[data-cy=${contextSelector}] clr-datagrid[data-automation=clr-grid-loaded]`, + { timeout: this.resolveTimeout(timeout) }, + ) + .should("exist"); + } } diff --git a/projects/frontend/data-pipelines/gui/e2e/support/pages/base/data-pipelines/data-job-base.po.js b/projects/frontend/data-pipelines/gui/e2e/support/pages/base/data-pipelines/data-job-base.po.js index 7121cef42c..eb37ab4ac1 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/pages/base/data-pipelines/data-job-base.po.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/pages/base/data-pipelines/data-job-base.po.js @@ -5,401 +5,474 @@ /// -import { DataPipelinesBasePO } from './data-pipelines-base.po'; +import { DataPipelinesBasePO } from "./data-pipelines-base.po"; export class DataJobBasePO extends DataPipelinesBasePO { - /** - * ** Returns instance of the page object. - * - * @returns {DataJobBasePO} - */ - static getPage() { - return new DataJobBasePO(); - } - - /** - * ** Init Http requests interceptors. - */ - static initInterceptors() { - super.initInterceptors(); - - this.executeCypressCommand('initDataJobsSingleExecutionGetReqInterceptor'); - this.executeCypressCommand('initDataJobsExecutionsGetReqInterceptor'); - this.executeCypressCommand('initDataJobPutReqInterceptor'); - this.executeCypressCommand('initDataJobDeleteReqInterceptor'); - this.executeCypressCommand('initDataJobExecutionDeleteReqInterceptor'); - } - - /** - * ** Navigate to Data Job Url. - * - * @param {'explore'|'manage'} context - * @param {string} teamName - * @param {string} jobName - * @param {'details'|'executions'|'lineage'} subpage - */ - static navigateTo(context, teamName, jobName, subpage) { - const numberOfDataJobsApiGetReqInterceptorWaiting = subpage === 'details' ? 4 : 3; - - return this.navigateToDataJobUrl(`/${context}/data-jobs/${teamName}/${jobName}/${subpage}`, numberOfDataJobsApiGetReqInterceptorWaiting); - } - - /** - * ** Wait for Data Job put req. - * - * @return {Cypress.Chainable} - */ - static waitForDataJobPutReqInterceptor() { - return this.executeCypressCommand('waitForDataJobPutReqInterceptor', 1, 1000); - } - - /** - * ** Wait for Data Job delete req. - * - * @return {Cypress.Chainable} - */ - static waitForDataJobDeleteReqInterceptor() { - return this.executeCypressCommand('waitForDataJobDeleteReqInterceptor', 1, 1000); - } - - /** - * ** Wait for Data Job execution delete req. - * - * @return {Cypress.Chainable} - */ - static waitForDataJobExecutionDeleteReqInterceptor() { - return this.executeCypressCommand('waitForDataJobExecutionDeleteReqInterceptor', 1, 1000); - } - - /** - * ** Wait for Data Job executions get req. - * - * @return {Cypress.Chainable} - */ - static waitForGetExecutionsReqInterceptor() { - return cy.wait('@dataJobsExecutionsGetReq'); - } - - /** - * ** Wait for Data Job to not have running executions. - * - * @return {Cypress.Chainable} - */ - static waitForDataJobToNotHaveRunningExecution() { - cy.log('Looking if there is ongoing running execution'); - - let isRunningExecution = false; - - return cy.waitForInterceptorWithRetry('@dataJobsExecutionsGetReq', 5, { - predicate: (interception) => { - if (interception?.response?.statusCode !== 200) { - return false; - } - - const body = interception?.response?.body; - if (body && body.data && body.data.content) { - if (body.data.content.length === 0 || body.data.content[0].__typename !== 'DataJobExecution') { - return false; - } - - isRunningExecution = - body.data.content.findIndex((e) => { - if (!e || e.status === undefined) { - return false; - } - - return e.status?.toLowerCase() === 'running' || e.status?.toLowerCase() === 'submitted'; - }) !== -1; - - return true; - } + /** + * ** Returns instance of the page object. + * + * @returns {DataJobBasePO} + */ + static getPage() { + return new DataJobBasePO(); + } + + /** + * ** Init Http requests interceptors. + */ + static initInterceptors() { + super.initInterceptors(); + + this.executeCypressCommand("initDataJobsSingleExecutionGetReqInterceptor"); + this.executeCypressCommand("initDataJobsExecutionsGetReqInterceptor"); + this.executeCypressCommand("initDataJobPutReqInterceptor"); + this.executeCypressCommand("initDataJobDeleteReqInterceptor"); + this.executeCypressCommand("initDataJobExecutionDeleteReqInterceptor"); + } + + /** + * ** Navigate to Data Job Url. + * + * @param {'explore'|'manage'} context + * @param {string} teamName + * @param {string} jobName + * @param {'details'|'executions'|'lineage'} subpage + */ + static navigateTo(context, teamName, jobName, subpage) { + const numberOfDataJobsApiGetReqInterceptorWaiting = + subpage === "details" ? 4 : 3; + + return this.navigateToDataJobUrl( + `/${context}/data-jobs/${teamName}/${jobName}/${subpage}`, + numberOfDataJobsApiGetReqInterceptorWaiting, + ); + } + + /** + * ** Wait for Data Job put req. + * + * @return {Cypress.Chainable} + */ + static waitForDataJobPutReqInterceptor() { + return this.executeCypressCommand( + "waitForDataJobPutReqInterceptor", + 1, + 1000, + ); + } + + /** + * ** Wait for Data Job delete req. + * + * @return {Cypress.Chainable} + */ + static waitForDataJobDeleteReqInterceptor() { + return this.executeCypressCommand( + "waitForDataJobDeleteReqInterceptor", + 1, + 1000, + ); + } + + /** + * ** Wait for Data Job execution delete req. + * + * @return {Cypress.Chainable} + */ + static waitForDataJobExecutionDeleteReqInterceptor() { + return this.executeCypressCommand( + "waitForDataJobExecutionDeleteReqInterceptor", + 1, + 1000, + ); + } + + /** + * ** Wait for Data Job executions get req. + * + * @return {Cypress.Chainable} + */ + static waitForGetExecutionsReqInterceptor() { + return cy.wait("@dataJobsExecutionsGetReq"); + } + + /** + * ** Wait for Data Job to not have running executions. + * + * @return {Cypress.Chainable} + */ + static waitForDataJobToNotHaveRunningExecution() { + cy.log("Looking if there is ongoing running execution"); + + let isRunningExecution = false; + + return cy.waitForInterceptorWithRetry("@dataJobsExecutionsGetReq", 5, { + predicate: (interception) => { + if (interception?.response?.statusCode !== 200) { + return false; + } + const body = interception?.response?.body; + if (body && body.data && body.data.content) { + if ( + body.data.content.length === 0 || + body.data.content[0].__typename !== "DataJobExecution" + ) { + return false; + } + + isRunningExecution = + body.data.content.findIndex((e) => { + if (!e || e.status === undefined) { return false; - }, - onfulfill: () => { - cy.log('Waiting for already running execution to stop'); - - if (isRunningExecution) { - DataJobBasePO.waitForDataJobToFinishExecution(); - } - } - }); - } + } - /** - * ** Wait for Data Job to finish execution. - * - * @return {Cypress.Chainable} - */ - static waitForDataJobToFinishExecution() { - cy.log('Waiting execution to finish'); + return ( + e.status?.toLowerCase() === "running" || + e.status?.toLowerCase() === "submitted" + ); + }) !== -1; - return cy.waitForInterceptorWithRetry('@dataJobsSingleExecutionGetReq', 20, { - predicate: (interception) => { - const body = interception?.response?.body; - - return body?.status?.toLowerCase() !== 'running' && body?.status?.toLowerCase() !== 'submitted'; - } - }); - } - - /** - * ** Wait for Data Job execution to become canceled. - * - * @return {Cypress.Chainable} - */ - static waitForDataJobToCancelExecution() { - cy.log('Waiting to cancel execution'); - - return cy.waitForInterceptorWithRetry('@dataJobsSingleExecutionGetReq', 20, { - predicate: (interception) => { - return interception?.response?.body?.status?.toLowerCase() === 'cancelled'; - } - }); - } - - /** - * ** Wait for response where there would be execution record with status SUBMITTED or RUNNING. - * - * @return {Cypress.Chainable} - */ - static waitForDataJobStartExecute() { - cy.log('Waiting execution to start SUBMITTED|RUNNING'); - - return cy.waitForInterceptorWithRetry('@dataJobsExecutionsGetReq', 20, { - predicate: (interception) => { - if (interception?.response?.statusCode !== 200) { - return false; - } - - const body = interception?.response?.body; - if (body?.data?.content?.length === 0 || body?.data?.content[0]?.__typename !== 'DataJobExecution') { - return false; - } - - return ( - body?.data?.content?.findIndex((e) => { - if (!e || e.status === undefined) { - return false; - } - - return e.status?.toLowerCase() === 'running' || e.status?.toLowerCase() === 'submitted'; - }) !== -1 - ); - } - }); - } - - /** - * ** Wait for response where there would be execution record with status SUBMITTED or RUNNING. - * - * @return {Cypress.Chainable} - */ - static waitForPollingToShowRunningExecution() { - cy.log('Waiting for pooling execution with status RUNNING'); - - return cy.waitForInterceptorWithRetry('@dataJobsSingleExecutionGetReq', 10, { - predicate: (interception) => { - const body = interception?.response?.body; - const status = `${body?.status}`.toLowerCase(); - - if (status === 'running') { - return true; - } else { - if (status !== 'submitted') { - cy.log(`Execution status never changed to RUNNING, current is ${status.toUpperCase()}`); - - return true; - } - - return false; - } - } - }); - } - - /** - * ** Wait for Data Job put req. - * - * @return {Cypress.Chainable} - */ - waitForDataJobPutReqInterceptor() { - return DataJobBasePO.waitForDataJobPutReqInterceptor(); - } - - /** - * ** Wait for Data Job delete req. - * - * @return {Cypress.Chainable} - */ - waitForDataJobDeleteReqInterceptor() { - return DataJobBasePO.waitForDataJobDeleteReqInterceptor(); - } - - /** - * ** Wait for Data Job execution delete req. - * - * @return {Cypress.Chainable} - */ - waitForDataJobExecutionDeleteReqInterceptor() { - return DataJobBasePO.waitForDataJobExecutionDeleteReqInterceptor(); - } - - /** - * ** Wait for Data Job executions get req. - * - * @return {Cypress.Chainable} - */ - waitForGetExecutionsReqInterceptor() { - const waitChainable = DataJobBasePO.waitForGetExecutionsReqInterceptor(); - if (waitChainable) { - return waitChainable; + return true; } - return cy.wait(500).then(() => this.waitForGetExecutionsReqInterceptor()); - } - - /* Selectors */ - - getNavigateBackBtn() { - return cy.get('[data-cy=data-pipelines-job-navigate-back]'); - } + return false; + }, + onfulfill: () => { + cy.log("Waiting for already running execution to stop"); - getExecuteNowButton() { - return cy.get('[data-cy=data-pipelines-job-execute-btn]', { - timeout: DataJobBasePO.WAIT_SHORT_TASK - }); - } - - getCancelExecutionButton() { - return cy.get('[data-cy=data-pipelines-job-cancel-execution-btn]'); - } - - getExecuteOrCancelButton() { - return cy.get('[data-cy=data-pipelines-job-actions-container]').then(($container) => { - if ($container && $container.length > 0) { - const $btn = $container.find('[data-cy=data-pipelines-job-execute-btn]'); - - if ($btn && $btn.length > 0) { - return $btn; - } - } - - return $container.find('[data-cy=data-pipelines-job-cancel-execution-btn]'); - }); - } - - getConfirmDialogButton() { - return cy.get('[data-cy="confirmation-dialog-ok-btn"]'); - } - - getActionDropdownBtn() { - return cy.get('[data-cy=data-pipelines-job-action-dropdown-btn]'); - } - - getDownloadKeyBtn() { - return cy.get('[data-cy=data-pipelines-job-download-btn]'); - } - - getDeleteJobBtn() { - return cy.get('[data-cy=data-pipelines-job-delete-btn]'); - } - - getConfirmDeleteBtn() { - return cy.get('#removeBtn'); - } - - getDetailsTab() { - return cy.get('[data-cy=data-pipelines-job-details-tab]'); - } - - getExecutionsTab() { - return cy.get('[data-cy=data-pipelines-job-executions-tab]'); - } - - getExecutionStatus() { - return cy.get('[data-cy="data-pipelines-job-execution-status"]'); - } - - /* Actions */ - - executeNow(waitToStartExecution = false) { - this.getExecuteNowButton().should('exist').scrollIntoView().click({ force: true }); - - this.confirmInConfirmDialog(() => { - this.waitForDataJobExecutionPostReqInterceptor(); - }); - - if (waitToStartExecution) { - DataJobBasePO.waitForDataJobStartExecute(); - DataJobBasePO.waitForPollingToShowRunningExecution(); - this.waitForViewToRenderShort(); + if (isRunningExecution) { + DataJobBasePO.waitForDataJobToFinishExecution(); } - } - - cancelExecution(waitExecutionToStop = false) { - this.getCancelExecutionButton().should('exist').scrollIntoView().click({ force: true }); - - this.confirmInConfirmDialog(() => { - this.waitForDataJobExecutionDeleteReqInterceptor(); - }); - - if (waitExecutionToStop) { - DataJobBasePO.waitForDataJobToCancelExecution(); - this.waitForViewToRenderShort(); + }, + }); + } + + /** + * ** Wait for Data Job to finish execution. + * + * @return {Cypress.Chainable} + */ + static waitForDataJobToFinishExecution() { + cy.log("Waiting execution to finish"); + + return cy.waitForInterceptorWithRetry( + "@dataJobsSingleExecutionGetReq", + 20, + { + predicate: (interception) => { + const body = interception?.response?.body; + + return ( + body?.status?.toLowerCase() !== "running" && + body?.status?.toLowerCase() !== "submitted" + ); + }, + }, + ); + } + + /** + * ** Wait for Data Job execution to become canceled. + * + * @return {Cypress.Chainable} + */ + static waitForDataJobToCancelExecution() { + cy.log("Waiting to cancel execution"); + + return cy.waitForInterceptorWithRetry( + "@dataJobsSingleExecutionGetReq", + 20, + { + predicate: (interception) => { + return ( + interception?.response?.body?.status?.toLowerCase() === "cancelled" + ); + }, + }, + ); + } + + /** + * ** Wait for response where there would be execution record with status SUBMITTED or RUNNING. + * + * @return {Cypress.Chainable} + */ + static waitForDataJobStartExecute() { + cy.log("Waiting execution to start SUBMITTED|RUNNING"); + + return cy.waitForInterceptorWithRetry("@dataJobsExecutionsGetReq", 20, { + predicate: (interception) => { + if (interception?.response?.statusCode !== 200) { + return false; } - } - - openActionDropdown() { - this.getActionDropdownBtn().should('exist').scrollIntoView().should('be.visible').click({ force: true }); - this.waitForViewToRenderShort(); - } + const body = interception?.response?.body; + if ( + body?.data?.content?.length === 0 || + body?.data?.content[0]?.__typename !== "DataJobExecution" + ) { + return false; + } - downloadJobKey() { - this.getDownloadKeyBtn().should('exist').scrollIntoView().should('be.visible').click({ force: true }); + return ( + body?.data?.content?.findIndex((e) => { + if (!e || e.status === undefined) { + return false; + } - this.waitForDataJobsApiGetReqInterceptor(); - } + return ( + e.status?.toLowerCase() === "running" || + e.status?.toLowerCase() === "submitted" + ); + }) !== -1 + ); + }, + }); + } + + /** + * ** Wait for response where there would be execution record with status SUBMITTED or RUNNING. + * + * @return {Cypress.Chainable} + */ + static waitForPollingToShowRunningExecution() { + cy.log("Waiting for pooling execution with status RUNNING"); + + return cy.waitForInterceptorWithRetry( + "@dataJobsSingleExecutionGetReq", + 10, + { + predicate: (interception) => { + const body = interception?.response?.body; + const status = `${body?.status}`.toLowerCase(); + + if (status === "running") { + return true; + } else { + if (status !== "submitted") { + cy.log( + `Execution status never changed to RUNNING, current is ${status.toUpperCase()}`, + ); + + return true; + } - deleteJob() { - this.getDeleteJobBtn().scrollIntoView().should('be.visible').click({ force: true }); + return false; + } + }, + }, + ); + } + + /** + * ** Wait for Data Job put req. + * + * @return {Cypress.Chainable} + */ + waitForDataJobPutReqInterceptor() { + return DataJobBasePO.waitForDataJobPutReqInterceptor(); + } + + /** + * ** Wait for Data Job delete req. + * + * @return {Cypress.Chainable} + */ + waitForDataJobDeleteReqInterceptor() { + return DataJobBasePO.waitForDataJobDeleteReqInterceptor(); + } + + /** + * ** Wait for Data Job execution delete req. + * + * @return {Cypress.Chainable} + */ + waitForDataJobExecutionDeleteReqInterceptor() { + return DataJobBasePO.waitForDataJobExecutionDeleteReqInterceptor(); + } + + /** + * ** Wait for Data Job executions get req. + * + * @return {Cypress.Chainable} + */ + waitForGetExecutionsReqInterceptor() { + const waitChainable = DataJobBasePO.waitForGetExecutionsReqInterceptor(); + if (waitChainable) { + return waitChainable; + } + + return cy.wait(500).then(() => this.waitForGetExecutionsReqInterceptor()); + } + + /* Selectors */ + + getNavigateBackBtn() { + return cy.get("[data-cy=data-pipelines-job-navigate-back]"); + } + + getExecuteNowButton() { + return cy.get("[data-cy=data-pipelines-job-execute-btn]", { + timeout: DataJobBasePO.WAIT_SHORT_TASK, + }); + } + + getCancelExecutionButton() { + return cy.get("[data-cy=data-pipelines-job-cancel-execution-btn]"); + } + + getExecuteOrCancelButton() { + return cy + .get("[data-cy=data-pipelines-job-actions-container]") + .then(($container) => { + if ($container && $container.length > 0) { + const $btn = $container.find( + "[data-cy=data-pipelines-job-execute-btn]", + ); + + if ($btn && $btn.length > 0) { + return $btn; + } + } - this.waitForViewToRenderShort(); + return $container.find( + "[data-cy=data-pipelines-job-cancel-execution-btn]", + ); + }); + } - this.confirmDeleteJob(() => { - this.waitForDataJobDeleteReqInterceptor(); - }); - } + getConfirmDialogButton() { + return cy.get('[data-cy="confirmation-dialog-ok-btn"]'); + } + + getActionDropdownBtn() { + return cy.get("[data-cy=data-pipelines-job-action-dropdown-btn]"); + } + + getDownloadKeyBtn() { + return cy.get("[data-cy=data-pipelines-job-download-btn]"); + } + + getDeleteJobBtn() { + return cy.get("[data-cy=data-pipelines-job-delete-btn]"); + } + + getConfirmDeleteBtn() { + return cy.get("#removeBtn"); + } + + getDetailsTab() { + return cy.get("[data-cy=data-pipelines-job-details-tab]"); + } + + getExecutionsTab() { + return cy.get("[data-cy=data-pipelines-job-executions-tab]"); + } - /** - * ** Confirm Job deletion. - * - * @param {() => void} interceptor - */ - confirmDeleteJob(interceptor) { - this.getConfirmDeleteBtn().scrollIntoView().should('be.visible').click({ force: true }); + getExecutionStatus() { + return cy.get('[data-cy="data-pipelines-job-execution-status"]'); + } - if (interceptor) { - interceptor(); - } - } + /* Actions */ + + executeNow(waitToStartExecution = false) { + this.getExecuteNowButton() + .should("exist") + .scrollIntoView() + .click({ force: true }); + + this.confirmInConfirmDialog(() => { + this.waitForDataJobExecutionPostReqInterceptor(); + }); + + if (waitToStartExecution) { + DataJobBasePO.waitForDataJobStartExecute(); + DataJobBasePO.waitForPollingToShowRunningExecution(); + this.waitForViewToRenderShort(); + } + } + + cancelExecution(waitExecutionToStop = false) { + this.getCancelExecutionButton() + .should("exist") + .scrollIntoView() + .click({ force: true }); + + this.confirmInConfirmDialog(() => { + this.waitForDataJobExecutionDeleteReqInterceptor(); + }); + + if (waitExecutionToStop) { + DataJobBasePO.waitForDataJobToCancelExecution(); + this.waitForViewToRenderShort(); + } + } + + openActionDropdown() { + this.getActionDropdownBtn() + .should("exist") + .scrollIntoView() + .should("be.visible") + .click({ force: true }); + + this.waitForViewToRenderShort(); + } + + downloadJobKey() { + this.getDownloadKeyBtn() + .should("exist") + .scrollIntoView() + .should("be.visible") + .click({ force: true }); + + this.waitForDataJobsApiGetReqInterceptor(); + } + + deleteJob() { + this.getDeleteJobBtn() + .scrollIntoView() + .should("be.visible") + .click({ force: true }); + + this.waitForViewToRenderShort(); + + this.confirmDeleteJob(() => { + this.waitForDataJobDeleteReqInterceptor(); + }); + } - navigateBackToDataJobs() { - this.getNavigateBackBtn().should('be.visible').click({ force: true }); + /** + * ** Confirm Job deletion. + * + * @param {() => void} interceptor + */ + confirmDeleteJob(interceptor) { + this.getConfirmDeleteBtn() + .scrollIntoView() + .should("be.visible") + .click({ force: true }); - this.waitForGridDataLoad(); - } + if (interceptor) { + interceptor(); + } + } - openDetailsTab() { - this.getDetailsTab().should('exist').click({ force: true }); + navigateBackToDataJobs() { + this.getNavigateBackBtn().should("be.visible").click({ force: true }); - this.waitForDataJobsApiGetReqInterceptor(); - } + this.waitForGridDataLoad(); + } + + openDetailsTab() { + this.getDetailsTab().should("exist").click({ force: true }); + + this.waitForDataJobsApiGetReqInterceptor(); + } - openExecutionsTab() { - this.getExecutionsTab().should('exist').click({ force: true }); + openExecutionsTab() { + this.getExecutionsTab().should("exist").click({ force: true }); - this.waitForGridDataLoad(); - } + this.waitForGridDataLoad(); + } } diff --git a/projects/frontend/data-pipelines/gui/e2e/support/pages/base/data-pipelines/data-job-details-base.po.js b/projects/frontend/data-pipelines/gui/e2e/support/pages/base/data-pipelines/data-job-details-base.po.js index 407a856e35..ec24e0f909 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/pages/base/data-pipelines/data-job-details-base.po.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/pages/base/data-pipelines/data-job-details-base.po.js @@ -5,82 +5,82 @@ /// -import { DataJobBasePO } from './data-job-base.po'; +import { DataJobBasePO } from "./data-job-base.po"; export class DataJobDetailsBasePO extends DataJobBasePO { - /** - * ** Returns instance of the page object. - * - * @returns {DataJobDetailsBasePO} - */ - static getPage() { - return new DataJobDetailsBasePO(); - } - - /** - * ** Navigate to Data Job Url. - * - * @param {'explore'|'manage'} context - * @param {string} teamName - * @param {string} jobName - */ - static navigateTo(context, teamName, jobName) { - return super.navigateTo(context, teamName, jobName, 'details'); - } - - // Selectors - - getStatusField() { - return cy.get('[data-cy=data-pipelines-job-details-status]'); - } - - getDescriptionField() { - return cy.get('[data-cy=data-pipelines-job-details-description]'); - } - - getDescriptionFull() { - return cy.get('[data-cy=description-show-less]'); - } - - getShowDescriptionMoreBtn() { - return cy.get('[data-cy=description-show-more]'); - } - - getTeamField() { - return cy.get('[data-cy=data-pipelines-job-details-team]'); - } - - getScheduleField() { - return cy.get('[data-cy=data-pipelines-job-details-schedule]'); - } - - getSourceField() { - return cy.get('[data-cy=data-pipelines-job-details-source]'); - } - - getOnDeployedField() { - return cy.get('[data-cy=data-pipelines-job-details-on-deployed]'); - } - - getOnPlatformErrorField() { - return cy.get('[data-cy=data-pipelines-job-details-on-platform-error]'); - } - - getOnUserErrorField() { - return cy.get('[data-cy=data-pipelines-job-details-on-user-error]'); - } - - getOnSuccessField() { - return cy.get('[data-cy=data-pipelines-job-details-on-success]'); - } - - // Actions - - showMoreDescription() { - this.getShowDescriptionMoreBtn().should('exist').click({ force: true }); - - this.waitForViewToRenderShort(); - - return this; - } + /** + * ** Returns instance of the page object. + * + * @returns {DataJobDetailsBasePO} + */ + static getPage() { + return new DataJobDetailsBasePO(); + } + + /** + * ** Navigate to Data Job Url. + * + * @param {'explore'|'manage'} context + * @param {string} teamName + * @param {string} jobName + */ + static navigateTo(context, teamName, jobName) { + return super.navigateTo(context, teamName, jobName, "details"); + } + + // Selectors + + getStatusField() { + return cy.get("[data-cy=data-pipelines-job-details-status]"); + } + + getDescriptionField() { + return cy.get("[data-cy=data-pipelines-job-details-description]"); + } + + getDescriptionFull() { + return cy.get("[data-cy=description-show-less]"); + } + + getShowDescriptionMoreBtn() { + return cy.get("[data-cy=description-show-more]"); + } + + getTeamField() { + return cy.get("[data-cy=data-pipelines-job-details-team]"); + } + + getScheduleField() { + return cy.get("[data-cy=data-pipelines-job-details-schedule]"); + } + + getSourceField() { + return cy.get("[data-cy=data-pipelines-job-details-source]"); + } + + getOnDeployedField() { + return cy.get("[data-cy=data-pipelines-job-details-on-deployed]"); + } + + getOnPlatformErrorField() { + return cy.get("[data-cy=data-pipelines-job-details-on-platform-error]"); + } + + getOnUserErrorField() { + return cy.get("[data-cy=data-pipelines-job-details-on-user-error]"); + } + + getOnSuccessField() { + return cy.get("[data-cy=data-pipelines-job-details-on-success]"); + } + + // Actions + + showMoreDescription() { + this.getShowDescriptionMoreBtn().should("exist").click({ force: true }); + + this.waitForViewToRenderShort(); + + return this; + } } diff --git a/projects/frontend/data-pipelines/gui/e2e/support/pages/base/data-pipelines/data-jobs-base.po.js b/projects/frontend/data-pipelines/gui/e2e/support/pages/base/data-pipelines/data-jobs-base.po.js index d1e5e06f6b..2b2e1fa8de 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/pages/base/data-pipelines/data-jobs-base.po.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/pages/base/data-pipelines/data-jobs-base.po.js @@ -5,327 +5,366 @@ /// -import { DataPipelinesBasePO } from './data-pipelines-base.po'; +import { DataPipelinesBasePO } from "./data-pipelines-base.po"; export class DataJobsBasePO extends DataPipelinesBasePO { - /** - * ** Returns instance of the page object. - * - * @returns {DataJobsBasePO} - */ - static getPage() { - return new DataJobsBasePO(); - } - - /** - * ** Navigate to Data Job Url. - * - * @param {'explore'|'manage'} context - */ - static navigateTo(context) { - return this.navigateToDataJobUrl(`/${context}/data-jobs`); - } - - /** - * ** Navigate to Data Job Url. - * ** Do not wait for bootstrap and interceptors - * @param {'explore'|'manage'} context - */ - static navigateToNoBootstrap(context) { - return this.navigateToDataJobUrlNoBootstrap(`/${context}/data-jobs`); - } - // Selectors - - getDataGridRefreshButton() { - throw new Error('Method should be overridden by subclasses'); - } - - getDataGrid() { - return cy.get('clr-datagrid'); - } - - getDataGridSearchInput() { - return cy.get('[data-test-id=search-input]').first(); - } - - getDataGridClearSearchButton() { - return cy.get('[data-test-id="clear-search-btn"]').first(); - } - - getQuickFilters() { - return cy.get('[data-cy=data-pipelines-quick-filters] > span'); - } - - getHeaderColumnJobName() { - return cy.get('[data-cy=data-pipelines-jobs-name-column]'); - } - - getHeaderColumnTeamName() { - return cy.get('[data-cy=data-pipelines-jobs-team-column]'); - } - - getHeaderColumnDescriptionName() { - return cy.get('[data-cy=data-pipelines-jobs-description-column]'); - } - - getDataGridJobNameFilter() { - return this.getHeaderColumnJobName().should('exist').find('clr-dg-filter button'); - } - - getHeaderColumnJobNameSortBtn() { - return this.getHeaderColumnJobName().should('exist').find('.datagrid-column-title'); - } - - getDataGridJobTeamFilter() { - return this.getHeaderColumnTeamName().should('exist').find('clr-dg-filter button'); - } - - getHeaderColumnJobTeamSortBtn() { - return this.getHeaderColumnTeamName().should('exist').find('.datagrid-column-title'); - } - - getDataGridJobDescriptionFilter() { - return this.getHeaderColumnDescriptionName().should('exist').find('clr-dg-filter button'); - } - - getDataGridFilterInput() { - return cy.get('div.datagrid-filter input'); - } - - getDataGridHeaderCell(content) { - return this.getDataGrid() - .should('exist') - .find('clr-dg-column:not(.datagrid-hidden-column)') - .contains(new RegExp(`${content}`)); - } - - // Rows and Cells - - getDataGridRows() { - return this.getDataGrid().should('exist').find('clr-dg-row.datagrid-row'); - } - - getDataGridRowByIndex(rowIndex) { - return this.getDataGridRows() - .should('have.length.gte', rowIndex - 1) - .then((rows) => Array.from(rows)[rowIndex - 1]); - } - - getDataGridRowByName(jobName) { - return this.getDataGridCell(jobName).parents('clr-dg-row'); - } - - getDataGridCells(rowIndex) { - return this.getDataGridRowByIndex(rowIndex).should('exist').find('clr-dg-cell.datagrid-cell'); - } - - getDataGridCellByIndex(rowIndex, cellIndex) { - return this.getDataGridCells(rowIndex) - .should('have.length.gte', cellIndex - 1) - .then((cells) => Array.from(cells)[cellIndex - 1]); - } - - getDataGridCellByIdentifier(rowIndex, identifier) { - return this.getDataGridRowByIndex(rowIndex).should('exist').find(identifier); - } - - getDataGridCell(content, timeout) { - return cy.get('[id^="clr-dg-row"] > .datagrid-row-scrollable > .datagrid-scrolling-cells > .ng-star-inserted').contains(new RegExp(`^\\s*${content}\\s*$`), { - timeout: this.resolveTimeout(timeout) - }); - } - - getDataGridStatusCells() { - return this.getDataGrid().should('exist').find('[data-cy=data-pipelines-manage-grid-status-cell]'); - } - - getDataGridStatusIcons() { - return this.getDataGrid().should('exist').find('[data-cy=data-pipelines-manage-grid-status-cell] clr-icon[data-cy*=data-pipelines-job]'); - } - - getDataGridColumnToggle() { - return this.getDataGrid().should('exist').find('clr-dg-column-toggle button'); - } + /** + * ** Returns instance of the page object. + * + * @returns {DataJobsBasePO} + */ + static getPage() { + return new DataJobsBasePO(); + } + + /** + * ** Navigate to Data Job Url. + * + * @param {'explore'|'manage'} context + */ + static navigateTo(context) { + return this.navigateToDataJobUrl(`/${context}/data-jobs`); + } + + /** + * ** Navigate to Data Job Url. + * ** Do not wait for bootstrap and interceptors + * @param {'explore'|'manage'} context + */ + static navigateToNoBootstrap(context) { + return this.navigateToDataJobUrlNoBootstrap(`/${context}/data-jobs`); + } + // Selectors + + getDataGridRefreshButton() { + throw new Error("Method should be overridden by subclasses"); + } + + getDataGrid() { + return cy.get("clr-datagrid"); + } + + getDataGridSearchInput() { + return cy.get("[data-test-id=search-input]").first(); + } + + getDataGridClearSearchButton() { + return cy.get('[data-test-id="clear-search-btn"]').first(); + } + + getQuickFilters() { + return cy.get("[data-cy=data-pipelines-quick-filters] > span"); + } + + getHeaderColumnJobName() { + return cy.get("[data-cy=data-pipelines-jobs-name-column]"); + } + + getHeaderColumnTeamName() { + return cy.get("[data-cy=data-pipelines-jobs-team-column]"); + } + + getHeaderColumnDescriptionName() { + return cy.get("[data-cy=data-pipelines-jobs-description-column]"); + } + + getDataGridJobNameFilter() { + return this.getHeaderColumnJobName() + .should("exist") + .find("clr-dg-filter button"); + } + + getHeaderColumnJobNameSortBtn() { + return this.getHeaderColumnJobName() + .should("exist") + .find(".datagrid-column-title"); + } + + getDataGridJobTeamFilter() { + return this.getHeaderColumnTeamName() + .should("exist") + .find("clr-dg-filter button"); + } + + getHeaderColumnJobTeamSortBtn() { + return this.getHeaderColumnTeamName() + .should("exist") + .find(".datagrid-column-title"); + } + + getDataGridJobDescriptionFilter() { + return this.getHeaderColumnDescriptionName() + .should("exist") + .find("clr-dg-filter button"); + } + + getDataGridFilterInput() { + return cy.get("div.datagrid-filter input"); + } + + getDataGridHeaderCell(content) { + return this.getDataGrid() + .should("exist") + .find("clr-dg-column:not(.datagrid-hidden-column)") + .contains(new RegExp(`${content}`)); + } + + // Rows and Cells + + getDataGridRows() { + return this.getDataGrid().should("exist").find("clr-dg-row.datagrid-row"); + } + + getDataGridRowByIndex(rowIndex) { + return this.getDataGridRows() + .should("have.length.gte", rowIndex - 1) + .then((rows) => Array.from(rows)[rowIndex - 1]); + } + + getDataGridRowByName(jobName) { + return this.getDataGridCell(jobName).parents("clr-dg-row"); + } + + getDataGridCells(rowIndex) { + return this.getDataGridRowByIndex(rowIndex) + .should("exist") + .find("clr-dg-cell.datagrid-cell"); + } + + getDataGridCellByIndex(rowIndex, cellIndex) { + return this.getDataGridCells(rowIndex) + .should("have.length.gte", cellIndex - 1) + .then((cells) => Array.from(cells)[cellIndex - 1]); + } + + getDataGridCellByIdentifier(rowIndex, identifier) { + return this.getDataGridRowByIndex(rowIndex) + .should("exist") + .find(identifier); + } + + getDataGridCell(content, timeout) { + return cy + .get( + '[id^="clr-dg-row"] > .datagrid-row-scrollable > .datagrid-scrolling-cells > .ng-star-inserted', + ) + .contains(new RegExp(`^\\s*${content}\\s*$`), { + timeout: this.resolveTimeout(timeout), + }); + } + + getDataGridStatusCells() { + return this.getDataGrid() + .should("exist") + .find("[data-cy=data-pipelines-manage-grid-status-cell]"); + } + + getDataGridStatusIcons() { + return this.getDataGrid() + .should("exist") + .find( + "[data-cy=data-pipelines-manage-grid-status-cell] clr-icon[data-cy*=data-pipelines-job]", + ); + } + + getDataGridColumnToggle() { + return this.getDataGrid() + .should("exist") + .find("clr-dg-column-toggle button"); + } + + getDataGridNavigateBtn(team, job) { + throw new Error("Method should be overridden by subclasses"); + } + + getDataGridColumnShowHidePanel() { + return cy.get(".column-switch"); + } + + getDataGridColumnShowHideOptions() { + return this.getDataGridColumnShowHidePanel() + .should("exist") + .find("clr-checkbox-wrapper"); + } + + getDataGridColumnShowHideOptionsValues() { + return this.getDataGridColumnShowHidePanel() + .should("exist") + .find("clr-checkbox-wrapper") + .then((elements) => Array.from(elements).map((el) => el.innerText)); + } + + getDataGridColumnShowHideOption(option) { + return this.getDataGridColumnShowHideOptions() + .should("have.length.gt", 0) + .then((elements) => + Array.from(elements).find((el) => el.innerText === option), + ) + .find("input"); + } + + /** + * ** Get DataGrid page size selection. + * + * @returns {Cypress.Chainable>} + */ + getDataGridPageSizeSelect() { + return this.getDataGrid().find("clr-dg-page-size .clr-page-size-select"); + } + + getDataJobPage() { + return cy.get("[data-cy=data-pipelines-job-page]"); + } + + // Actions + + chooseQuickFilter(filterPosition) { + this.getQuickFilters() + .then((filters) => { + return filters && filters[filterPosition]; + }) + .should("exist") + .click({ force: true }); + + this.waitForGridDataLoad(); + } - getDataGridNavigateBtn(team, job) { - throw new Error('Method should be overridden by subclasses'); - } + refreshDataGrid() { + this.getDataGridRefreshButton().should("exist").click({ force: true }); - getDataGridColumnShowHidePanel() { - return cy.get('.column-switch'); - } + this.waitForGridDataLoad(); + } - getDataGridColumnShowHideOptions() { - return this.getDataGridColumnShowHidePanel().should('exist').find('clr-checkbox-wrapper'); - } + /** + * ** Search by job name. + * + * @param {string} jobName + */ + searchByJobName(jobName) { + this.getDataGridSearchInput().should("exist").type(jobName); - getDataGridColumnShowHideOptionsValues() { - return this.getDataGridColumnShowHidePanel() - .should('exist') - .find('clr-checkbox-wrapper') - .then((elements) => Array.from(elements).map((el) => el.innerText)); - } + this.waitForGridDataLoad(); + } - getDataGridColumnShowHideOption(option) { - return this.getDataGridColumnShowHideOptions() - .should('have.length.gt', 0) - .then((elements) => Array.from(elements).find((el) => el.innerText === option)) - .find('input'); - } + clearSearchField() { + this.getDataGridSearchInput().should("exist").clear(); - /** - * ** Get DataGrid page size selection. - * - * @returns {Cypress.Chainable>} - */ - getDataGridPageSizeSelect() { - return this.getDataGrid().find('clr-dg-page-size .clr-page-size-select'); - } + this.waitForGridDataLoad(); + } - getDataJobPage() { - return cy.get('[data-cy=data-pipelines-job-page]'); - } + clearSearchFieldWithButton() { + this.getDataGridClearSearchButton().should("exist").click({ force: true }); - // Actions + this.waitForGridDataLoad(); + } - chooseQuickFilter(filterPosition) { - this.getQuickFilters() - .then((filters) => { - return filters && filters[filterPosition]; - }) - .should('exist') - .click({ force: true }); + filterByJobName(jobName) { + this.getDataGridJobNameFilter().click({ force: true }); - this.waitForGridDataLoad(); - } + this.getDataGridFilterInput().should("be.visible").type(jobName); - refreshDataGrid() { - this.getDataGridRefreshButton().should('exist').click({ force: true }); + this.getContentContainer().should("be.visible").click({ force: true }); - this.waitForGridDataLoad(); - } + this.waitForGridDataLoad(); - /** - * ** Search by job name. - * - * @param {string} jobName - */ - searchByJobName(jobName) { - this.getDataGridSearchInput().should('exist').type(jobName); + this.waitForViewToRenderShort(); + } - this.waitForGridDataLoad(); - } + filterByJobDescription(description) { + this.getDataGridJobDescriptionFilter().click({ force: true }); - clearSearchField() { - this.getDataGridSearchInput().should('exist').clear(); + this.getDataGridFilterInput().should("be.visible").type(description); - this.waitForGridDataLoad(); - } + this.getContentContainer().should("be.visible").click({ force: true }); - clearSearchFieldWithButton() { - this.getDataGridClearSearchButton().should('exist').click({ force: true }); + this.waitForGridDataLoad(); - this.waitForGridDataLoad(); - } + this.waitForViewToRenderShort(); + } - filterByJobName(jobName) { - this.getDataGridJobNameFilter().click({ force: true }); + sortByJobName() { + this.getHeaderColumnJobNameSortBtn().should("exist").click({ force: true }); - this.getDataGridFilterInput().should('be.visible').type(jobName); + this.waitForGridDataLoad(); + } - this.getContentContainer().should('be.visible').click({ force: true }); + filterByJobTeamName(teamName) { + this.getDataGridJobTeamFilter().click({ force: true }); - this.waitForGridDataLoad(); + this.getDataGridFilterInput().should("be.visible").type(teamName); - this.waitForViewToRenderShort(); - } + this.getContentContainer().should("be.visible").click({ force: true }); - filterByJobDescription(description) { - this.getDataGridJobDescriptionFilter().click({ force: true }); + this.waitForGridDataLoad(); + } - this.getDataGridFilterInput().should('be.visible').type(description); + sortByJobTeamName() { + this.getHeaderColumnJobTeamSortBtn().should("exist").click({ force: true }); - this.getContentContainer().should('be.visible').click({ force: true }); + this.waitForGridDataLoad(); + } - this.waitForGridDataLoad(); + selectRow(jobName) { + this.getDataGridRowByName(jobName) + .find(".datagrid-select input") + .check({ force: true }); - this.waitForViewToRenderShort(); - } + this.waitForViewToRenderShort(); + } - sortByJobName() { - this.getHeaderColumnJobNameSortBtn().should('exist').click({ force: true }); + openJobDetails(teamName, jobName) { + this.getDataGridNavigateBtn(teamName, jobName) + .scrollIntoView() + .should("exist") + .click({ force: true }); - this.waitForGridDataLoad(); - } + this.waitForDataJobsApiGetReqInterceptor(4); - filterByJobTeamName(teamName) { - this.getDataGridJobTeamFilter().click({ force: true }); + this.waitForViewToRender(); - this.getDataGridFilterInput().should('be.visible').type(teamName); + this.getDataJobPage().should("be.visible"); + } - this.getContentContainer().should('be.visible').click({ force: true }); + toggleColumnShowHidePanel() { + this.getDataGridColumnToggle().should("exist").click({ force: true }); - this.waitForGridDataLoad(); - } + this.waitForClickThinkingTime(); + } - sortByJobTeamName() { - this.getHeaderColumnJobTeamSortBtn().should('exist').click({ force: true }); + checkColumnShowHideOption(option) { + this.getDataGridColumnShowHideOption(option) + .should("exist") + .check({ force: true }); - this.waitForGridDataLoad(); - } + this.waitForViewToRenderShort(); + } - selectRow(jobName) { - this.getDataGridRowByName(jobName).find('.datagrid-select input').check({ force: true }); + uncheckColumnShowHideOption(option) { + this.getDataGridColumnShowHideOption(option) + .should("exist") + .uncheck({ force: true }); - this.waitForViewToRenderShort(); - } + this.waitForViewToRenderShort(); + } - openJobDetails(teamName, jobName) { - this.getDataGridNavigateBtn(teamName, jobName).scrollIntoView().should('exist').click({ force: true }); + /** + * ** Change DataGrid page size + * + * - hint options in Clarity are generated with values e.g. + * - '0: 25' + * - '1: 50' + * - '2: 100' + * + * @param {string} size + */ + changePageSize(size) { + this.getDataGridPageSizeSelect() + .should("be.visible") + .then(($element) => { + return cy.wait(1000).then(() => $element); + }) + .select(size); - this.waitForDataJobsApiGetReqInterceptor(4); - - this.waitForViewToRender(); - - this.getDataJobPage().should('be.visible'); - } - - toggleColumnShowHidePanel() { - this.getDataGridColumnToggle().should('exist').click({ force: true }); - - this.waitForClickThinkingTime(); - } - - checkColumnShowHideOption(option) { - this.getDataGridColumnShowHideOption(option).should('exist').check({ force: true }); - - this.waitForViewToRenderShort(); - } - - uncheckColumnShowHideOption(option) { - this.getDataGridColumnShowHideOption(option).should('exist').uncheck({ force: true }); - - this.waitForViewToRenderShort(); - } - - /** - * ** Change DataGrid page size - * - * - hint options in Clarity are generated with values e.g. - * - '0: 25' - * - '1: 50' - * - '2: 100' - * - * @param {string} size - */ - changePageSize(size) { - this.getDataGridPageSizeSelect() - .should('be.visible') - .then(($element) => { - return cy.wait(1000).then(() => $element); - }) - .select(size); - - this.waitForGridDataLoad(); - } + this.waitForGridDataLoad(); + } } diff --git a/projects/frontend/data-pipelines/gui/e2e/support/pages/base/data-pipelines/data-pipelines-base.po.js b/projects/frontend/data-pipelines/gui/e2e/support/pages/base/data-pipelines/data-pipelines-base.po.js index f18bca99e6..f8bd06788a 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/pages/base/data-pipelines/data-pipelines-base.po.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/pages/base/data-pipelines/data-pipelines-base.po.js @@ -5,502 +5,543 @@ /// -import { TEAM_VDK, TEAM_VDK_DATA_JOB_FAILING, TEAM_VDK_DATA_JOB_TEST_V10, TEAM_VDK_DATA_JOB_TEST_V11, TEAM_VDK_DATA_JOB_TEST_V12, TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V0, TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V1, TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V2 } from '../../../helpers/constants.support'; +import { + TEAM_VDK, + TEAM_VDK_DATA_JOB_FAILING, + TEAM_VDK_DATA_JOB_TEST_V10, + TEAM_VDK_DATA_JOB_TEST_V11, + TEAM_VDK_DATA_JOB_TEST_V12, + TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V0, + TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V1, + TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V2, +} from "../../../helpers/constants.support"; -import { applyGlobalEnvSettings } from '../../../../plugins/helpers/util-helpers.plugins'; +import { applyGlobalEnvSettings } from "../../../../plugins/helpers/util-helpers.plugins"; -import { BasePagePO } from '../base-page.po'; +import { BasePagePO } from "../base-page.po"; export class DataPipelinesBasePO extends BasePagePO { - // Generics - - /** - * ** Returns instance of the page object. - * - * @returns {DataPipelinesBasePO} - */ - static getPage() { - return new DataPipelinesBasePO(); + // Generics + + /** + * ** Returns instance of the page object. + * + * @returns {DataPipelinesBasePO} + */ + static getPage() { + return new DataPipelinesBasePO(); + } + + /** + * ** Init Http requests interceptors. + */ + static initInterceptors() { + super.initInterceptors(); + + this.executeCypressCommand("initDataJobDeploymentPatchReqInterceptor"); + this.executeCypressCommand("initDataJobExecutionPostReqInterceptor"); + } + + /** + * ** Navigate to some url. + * + * @param {string} url + * @param {number} numberOfDataJobsApiGetReqInterceptorWaiting + */ + static navigateToDataJobUrl( + url, + numberOfDataJobsApiGetReqInterceptorWaiting = 1, + ) { + this.navigateToUrl(url); + + this.waitForApplicationBootstrap(); + this.waitForDataJobsApiGetReqInterceptor( + numberOfDataJobsApiGetReqInterceptorWaiting, + ); + + return this.getPage(); + } + + /** + * ** Navigate to some url without bootstrap. + * + * @param {string} url + */ + static navigateToDataJobUrlNoBootstrap(url) { + this.navigateToUrl(url); + return this.getPage(); + } + + /** + * ** Wait for Data Job post execution req. + * + * @return {Cypress.Chainable} + */ + static waitForDataJobExecutionPostReqInterceptor() { + return this.executeCypressCommand( + "waitForDataJobExecutionPostReqInterceptor", + ); + } + + /** + * ** Wait for Data Job patch deployment req. + * + * @return {Cypress.Chainable} + */ + static waitForDataJobDeploymentPatchReqInterceptor() { + return this.executeCypressCommand( + "waitForDataJobDeploymentPatchReqInterceptor", + ); + } + + // Plugins invoking + + /** + * ** Create long-lived Data Jobs. + * + * @param {'failing'} instruction + * @returns {Cypress.Chainable} + */ + static createLongLivedJobs(...instruction) { + const relativePathToFixtures = []; + if (instruction.includes("failing")) { + relativePathToFixtures.push({ + pathToFixture: `/base/data-jobs/${TEAM_VDK}/${TEAM_VDK_DATA_JOB_FAILING}.json`, + pathToZipFile: `/base/data-jobs/${TEAM_VDK}/${TEAM_VDK_DATA_JOB_FAILING}.zip`, + }); } - /** - * ** Init Http requests interceptors. - */ - static initInterceptors() { - super.initInterceptors(); - - this.executeCypressCommand('initDataJobDeploymentPatchReqInterceptor'); - this.executeCypressCommand('initDataJobExecutionPostReqInterceptor'); + return cy.task( + "createDeployJobs", + { + relativePathToFixtures, + }, + { timeout: this.WAIT_EXTRA_LONG_TASK }, + ); + } + + /** + * ** Create base short-lived test job with deployment. + * + * - They are created during tests execution and are deleted before and after test suits. + * - Executed in context of test environment. + * + * @param {'v0'|'v1'|'v2'} jobVersion + * @returns {Cypress.Chainable} + */ + static createShortLivedTestJobWithDeploy(...jobVersion) { + const relativePathToFixtures = []; + if (jobVersion.includes("v0")) { + relativePathToFixtures.push({ + pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V0}.json`, + pathToZipFile: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V0}.zip`, + }); } - /** - * ** Navigate to some url. - * - * @param {string} url - * @param {number} numberOfDataJobsApiGetReqInterceptorWaiting - */ - static navigateToDataJobUrl(url, numberOfDataJobsApiGetReqInterceptorWaiting = 1) { - this.navigateToUrl(url); - - this.waitForApplicationBootstrap(); - this.waitForDataJobsApiGetReqInterceptor(numberOfDataJobsApiGetReqInterceptorWaiting); - - return this.getPage(); + if (jobVersion.includes("v1")) { + relativePathToFixtures.push({ + pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V1}.json`, + pathToZipFile: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V1}.zip`, + }); } - /** - * ** Navigate to some url without bootstrap. - * - * @param {string} url - */ - static navigateToDataJobUrlNoBootstrap(url) { - this.navigateToUrl(url); - return this.getPage(); + if (jobVersion.includes("v2")) { + relativePathToFixtures.push({ + pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V2}.json`, + pathToZipFile: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V2}.zip`, + }); } - /** - * ** Wait for Data Job post execution req. - * - * @return {Cypress.Chainable} - */ - static waitForDataJobExecutionPostReqInterceptor() { - return this.executeCypressCommand('waitForDataJobExecutionPostReqInterceptor'); + return cy.task( + "createDeployJobs", + { + relativePathToFixtures, + }, + { timeout: this.WAIT_EXTRA_LONG_TASK }, + ); + } + + /** + * ** Provide executions for long-lived Data Jobs. + * + * @param {{job: 'failing'; executions?: number;}} instruction + * @returns {Cypress.Chainable} + */ + static provideExecutionsForLongLivedJobs(...instruction) { + const relativePathToFixtures = []; + const foundFailingIndex = instruction.findIndex((i) => i.job === "failing"); + if (foundFailingIndex !== -1) { + relativePathToFixtures.push({ + pathToFixture: `/base/data-jobs/${TEAM_VDK}/${TEAM_VDK_DATA_JOB_FAILING}.json`, + executions: instruction[foundFailingIndex]?.executions ?? 2, + }); } - /** - * ** Wait for Data Job patch deployment req. - * - * @return {Cypress.Chainable} - */ - static waitForDataJobDeploymentPatchReqInterceptor() { - return this.executeCypressCommand('waitForDataJobDeploymentPatchReqInterceptor'); + return cy.task( + "provideDataJobsExecutions", + { + relativePathToFixtures, + }, + { timeout: DataPipelinesBasePO.WAIT_EXTRA_LONG_TASK }, + ); + } + + /** + * ** Provide one execution for short-lived Data Job with deployment. + * + * @param {'v0'|'v1'|'v2'} jobVersion + * @returns {Cypress.Chainable} + */ + static provideExecutionsForShortLivedTestJobWithDeploy(...jobVersion) { + const relativePathToFixtures = []; + if (jobVersion.includes("v0")) { + relativePathToFixtures.push({ + pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V0}.json`, + executions: 1, + }); } - // Plugins invoking - - /** - * ** Create long-lived Data Jobs. - * - * @param {'failing'} instruction - * @returns {Cypress.Chainable} - */ - static createLongLivedJobs(...instruction) { - const relativePathToFixtures = []; - if (instruction.includes('failing')) { - relativePathToFixtures.push({ - pathToFixture: `/base/data-jobs/${TEAM_VDK}/${TEAM_VDK_DATA_JOB_FAILING}.json`, - pathToZipFile: `/base/data-jobs/${TEAM_VDK}/${TEAM_VDK_DATA_JOB_FAILING}.zip` - }); - } - - return cy.task( - 'createDeployJobs', - { - relativePathToFixtures - }, - { timeout: this.WAIT_EXTRA_LONG_TASK } - ); + if (jobVersion.includes("v1")) { + relativePathToFixtures.push({ + pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V1}.json`, + executions: 1, + }); } - /** - * ** Create base short-lived test job with deployment. - * - * - They are created during tests execution and are deleted before and after test suits. - * - Executed in context of test environment. - * - * @param {'v0'|'v1'|'v2'} jobVersion - * @returns {Cypress.Chainable} - */ - static createShortLivedTestJobWithDeploy(...jobVersion) { - const relativePathToFixtures = []; - if (jobVersion.includes('v0')) { - relativePathToFixtures.push({ - pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V0}.json`, - pathToZipFile: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V0}.zip` - }); - } - - if (jobVersion.includes('v1')) { - relativePathToFixtures.push({ - pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V1}.json`, - pathToZipFile: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V1}.zip` - }); - } - - if (jobVersion.includes('v2')) { - relativePathToFixtures.push({ - pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V2}.json`, - pathToZipFile: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V2}.zip` - }); - } - - return cy.task( - 'createDeployJobs', - { - relativePathToFixtures - }, - { timeout: this.WAIT_EXTRA_LONG_TASK } - ); + if (jobVersion.includes("v2")) { + relativePathToFixtures.push({ + pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V2}.json`, + executions: 1, + }); } - /** - * ** Provide executions for long-lived Data Jobs. - * - * @param {{job: 'failing'; executions?: number;}} instruction - * @returns {Cypress.Chainable} - */ - static provideExecutionsForLongLivedJobs(...instruction) { - const relativePathToFixtures = []; - const foundFailingIndex = instruction.findIndex((i) => i.job === 'failing'); - if (foundFailingIndex !== -1) { - relativePathToFixtures.push({ - pathToFixture: `/base/data-jobs/${TEAM_VDK}/${TEAM_VDK_DATA_JOB_FAILING}.json`, - executions: instruction[foundFailingIndex]?.executions ?? 2 - }); - } - - return cy.task( - 'provideDataJobsExecutions', - { - relativePathToFixtures - }, - { timeout: DataPipelinesBasePO.WAIT_EXTRA_LONG_TASK } - ); + return cy.task( + "provideDataJobsExecutions", + { + relativePathToFixtures, + }, + { timeout: DataPipelinesBasePO.WAIT_EXTRA_LONG_TASK }, + ); + } + + /** + * ** Change long-lived Data Job status. + * + * @param {'failing'} instruction + * @param {boolean} status + * @returns {Cypress.Chainable} + */ + static changeLongLivedJobStatus(instruction, status) { + let pathToFixture; + if (instruction === "failing") { + pathToFixture = `/base/data-jobs/${TEAM_VDK}/${TEAM_VDK_DATA_JOB_FAILING}.json`; } - /** - * ** Provide one execution for short-lived Data Job with deployment. - * - * @param {'v0'|'v1'|'v2'} jobVersion - * @returns {Cypress.Chainable} - */ - static provideExecutionsForShortLivedTestJobWithDeploy(...jobVersion) { - const relativePathToFixtures = []; - if (jobVersion.includes('v0')) { - relativePathToFixtures.push({ - pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V0}.json`, - executions: 1 - }); - } - - if (jobVersion.includes('v1')) { - relativePathToFixtures.push({ - pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V1}.json`, - executions: 1 - }); - } - - if (jobVersion.includes('v2')) { - relativePathToFixtures.push({ - pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V2}.json`, - executions: 1 - }); - } - - return cy.task( - 'provideDataJobsExecutions', - { - relativePathToFixtures - }, - { timeout: DataPipelinesBasePO.WAIT_EXTRA_LONG_TASK } - ); + return cy.task( + "changeJobsStatusesFixtures", + { + relativePathToFixtures: [ + { + pathToFixture, + }, + ], + status, + }, + { timeout: DataPipelinesBasePO.WAIT_LONG_TASK }, + ); + } + + /** + * ** Change short-lived Data Job with deployment status. + * + * @param {'v0'|'v1'|'v2'} jobVersion + * @param {boolean} status + * @returns {Cypress.Chainable} + */ + static changeShortLivedTestJobWithDeployStatus(jobVersion, status) { + let jobName; + + if (jobVersion === "v0") { + jobName = TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V0; + } else if (jobVersion === "v1") { + jobName = TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V1; + } else if (jobVersion === "v2") { + jobName = TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V2; } - /** - * ** Change long-lived Data Job status. - * - * @param {'failing'} instruction - * @param {boolean} status - * @returns {Cypress.Chainable} - */ - static changeLongLivedJobStatus(instruction, status) { - let pathToFixture; - if (instruction === 'failing') { - pathToFixture = `/base/data-jobs/${TEAM_VDK}/${TEAM_VDK_DATA_JOB_FAILING}.json`; - } - - return cy.task( - 'changeJobsStatusesFixtures', + return cy.task( + "changeJobsStatusesFixtures", + { + relativePathToFixtures: [ + { + pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${jobName}.json`, + }, + ], + status, + }, + { timeout: DataPipelinesBasePO.WAIT_LONG_TASK }, + ); + } + + /** + * ** Create base short-lived test jobs without deployments. + * + * - They won't be deployed + * - They are created during tests execution and are deleted before and after test suits. + * - Executed in context of test environment. + * + * @returns {Cypress.Chainable} + */ + static createShortLivedTestJobsNoDeploy() { + return cy.task( + "createDeployJobs", + { + relativePathToFixtures: [ + { + pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_V10}.json`, + }, + { + pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_V11}.json`, + }, + ], + }, + { timeout: DataPipelinesBasePO.WAIT_LONG_TASK }, + ); + } + + /** + * ** Create additional short-lived test job without deployment. + * + * - It won't be deployed + * - It's created during tests execution and is deleted before and after test suits. + * - Executed in context of test environment. + * + * @returns {Cypress.Chainable} + */ + static createAdditionalShortLivedTestJobsNoDeploy() { + return cy + .task( + "createDeployJobs", + { + relativePathToFixtures: [ { - relativePathToFixtures: [ - { - pathToFixture - } - ], - status + pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_V12}.json`, }, - { timeout: DataPipelinesBasePO.WAIT_LONG_TASK } - ); + ], + }, + { timeout: DataPipelinesBasePO.WAIT_LONG_TASK }, + ) + .then(() => cy.wait(DataPipelinesBasePO.WAIT_AFTER_API_MODIFY_CALL)); + } + + /** + * ** Wait for Test Data Job existing execution to complete. + * + * @param {'v0'|'v1'|'v2'} jobVersion + */ + static waitForShortLivedTestJobWithDeployExecutionToComplete(jobVersion) { + return this.loadShortLivedTestJobFixtureWithDeploy(jobVersion).then( + (jobFixture) => + cy.task( + "waitForDataJobExecutionToComplete", + { + jobFixture, + jobExecutionTimeout: 240000, + }, + { timeout: DataPipelinesBasePO.WAIT_LONG_TASK }, + ), + ); + } + + /** + * ** Delete short-lived test jobs. + * + * - They are created during tests execution and are deleted before and after test suits. + * - Executed in context of test environment. + * + * @param {boolean} isDeleteOptional + * @returns {Cypress.Chainable} + */ + static deleteShortLivedTestJobsNoDeploy(isDeleteOptional) { + return cy.task( + "deleteJobsFixtures", + { + relativePathToFixtures: [ + { + pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_V10}.json`, + }, + { + pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_V11}.json`, + }, + { + pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_V12}.json`, + }, + ], + optional: isDeleteOptional, + }, + { timeout: DataPipelinesBasePO.WAIT_LONG_TASK }, + ); + } + + /** + * ** Delete short-lived test job with deployment. + * + * - They are created during tests execution and are deleted before and after test suits. + * - Executed in context of test environment. + * + * @param {'v0'|'v1'|'v2'} jobVersion + * @returns {Cypress.Chainable} + */ + static deleteShortLivedTestJobWithDeploy(...jobVersion) { + const relativePathToFixtures = []; + if (jobVersion.includes("v0")) { + relativePathToFixtures.push({ + pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V0}.json`, + }); } - /** - * ** Change short-lived Data Job with deployment status. - * - * @param {'v0'|'v1'|'v2'} jobVersion - * @param {boolean} status - * @returns {Cypress.Chainable} - */ - static changeShortLivedTestJobWithDeployStatus(jobVersion, status) { - let jobName; - - if (jobVersion === 'v0') { - jobName = TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V0; - } else if (jobVersion === 'v1') { - jobName = TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V1; - } else if (jobVersion === 'v2') { - jobName = TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V2; - } - - return cy.task( - 'changeJobsStatusesFixtures', - { - relativePathToFixtures: [ - { - pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${jobName}.json` - } - ], - status - }, - { timeout: DataPipelinesBasePO.WAIT_LONG_TASK } - ); - } - - /** - * ** Create base short-lived test jobs without deployments. - * - * - They won't be deployed - * - They are created during tests execution and are deleted before and after test suits. - * - Executed in context of test environment. - * - * @returns {Cypress.Chainable} - */ - static createShortLivedTestJobsNoDeploy() { - return cy.task( - 'createDeployJobs', - { - relativePathToFixtures: [ - { - pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_V10}.json` - }, - { - pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_V11}.json` - } - ] - }, - { timeout: DataPipelinesBasePO.WAIT_LONG_TASK } - ); + if (jobVersion.includes("v1")) { + relativePathToFixtures.push({ + pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V1}.json`, + }); } - /** - * ** Create additional short-lived test job without deployment. - * - * - It won't be deployed - * - It's created during tests execution and is deleted before and after test suits. - * - Executed in context of test environment. - * - * @returns {Cypress.Chainable} - */ - static createAdditionalShortLivedTestJobsNoDeploy() { - return cy - .task( - 'createDeployJobs', - { - relativePathToFixtures: [ - { - pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_V12}.json` - } - ] - }, - { timeout: DataPipelinesBasePO.WAIT_LONG_TASK } - ) - .then(() => cy.wait(DataPipelinesBasePO.WAIT_AFTER_API_MODIFY_CALL)); + if (jobVersion.includes("v2")) { + relativePathToFixtures.push({ + pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V2}.json`, + }); } - /** - * ** Wait for Test Data Job existing execution to complete. - * - * @param {'v0'|'v1'|'v2'} jobVersion - */ - static waitForShortLivedTestJobWithDeployExecutionToComplete(jobVersion) { - return this.loadShortLivedTestJobFixtureWithDeploy(jobVersion).then((jobFixture) => - cy.task( - 'waitForDataJobExecutionToComplete', - { - jobFixture, - jobExecutionTimeout: 240000 - }, - { timeout: DataPipelinesBasePO.WAIT_LONG_TASK } - ) - ); + return cy.task( + "deleteJobsFixtures", + { + relativePathToFixtures, + }, + { timeout: DataPipelinesBasePO.WAIT_LONG_TASK }, + ); + } + + /** + * ** Load long-lived failing Data Job fixture. + * + * @returns {Cypress.Chainable<{job_name:string; description:string; team:string; config:{db_default_type:string; contacts:{}; schedule:{schedule_cron:string}; generate_keytab:boolean; enable_execution_notifications:boolean}}>} + */ + static loadLongLivedFailingJobFixture() { + return cy + .fixture(`/base/data-jobs/${TEAM_VDK}/${TEAM_VDK_DATA_JOB_FAILING}.json`) + .then((fixture) => applyGlobalEnvSettings(fixture)); + } + + /** + * ** Load short-lived test Data Job with deployment fixture. + * + * @param {'v0'|'v1'|'v2'} jobVersion + * @returns {Cypress.Chainable<{job_name:string; description:string; team:string; config:{db_default_type:string; contacts:{}; schedule:{schedule_cron:string}; generate_keytab:boolean; enable_execution_notifications:boolean}}>} + */ + static loadShortLivedTestJobFixtureWithDeploy(jobVersion) { + let jobName; + + if (jobVersion === "v0") { + jobName = TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V0; + } else if (jobVersion === "v1") { + jobName = TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V1; + } else if (jobVersion === "v2") { + jobName = TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V2; } - /** - * ** Delete short-lived test jobs. - * - * - They are created during tests execution and are deleted before and after test suits. - * - Executed in context of test environment. - * - * @param {boolean} isDeleteOptional - * @returns {Cypress.Chainable} - */ - static deleteShortLivedTestJobsNoDeploy(isDeleteOptional) { - return cy.task( - 'deleteJobsFixtures', - { - relativePathToFixtures: [ - { - pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_V10}.json` - }, - { - pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_V11}.json` - }, - { - pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_V12}.json` - } - ], - optional: isDeleteOptional - }, - { timeout: DataPipelinesBasePO.WAIT_LONG_TASK } - ); - } - - /** - * ** Delete short-lived test job with deployment. - * - * - They are created during tests execution and are deleted before and after test suits. - * - Executed in context of test environment. - * - * @param {'v0'|'v1'|'v2'} jobVersion - * @returns {Cypress.Chainable} - */ - static deleteShortLivedTestJobWithDeploy(...jobVersion) { - const relativePathToFixtures = []; - if (jobVersion.includes('v0')) { - relativePathToFixtures.push({ - pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V0}.json` - }); - } - - if (jobVersion.includes('v1')) { - relativePathToFixtures.push({ - pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V1}.json` - }); - } - - if (jobVersion.includes('v2')) { - relativePathToFixtures.push({ - pathToFixture: `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V2}.json` - }); - } - - return cy.task( - 'deleteJobsFixtures', - { - relativePathToFixtures - }, - { timeout: DataPipelinesBasePO.WAIT_LONG_TASK } - ); - } - - /** - * ** Load long-lived failing Data Job fixture. - * - * @returns {Cypress.Chainable<{job_name:string; description:string; team:string; config:{db_default_type:string; contacts:{}; schedule:{schedule_cron:string}; generate_keytab:boolean; enable_execution_notifications:boolean}}>} - */ - static loadLongLivedFailingJobFixture() { - return cy.fixture(`/base/data-jobs/${TEAM_VDK}/${TEAM_VDK_DATA_JOB_FAILING}.json`).then((fixture) => applyGlobalEnvSettings(fixture)); - } - - /** - * ** Load short-lived test Data Job with deployment fixture. - * - * @param {'v0'|'v1'|'v2'} jobVersion - * @returns {Cypress.Chainable<{job_name:string; description:string; team:string; config:{db_default_type:string; contacts:{}; schedule:{schedule_cron:string}; generate_keytab:boolean; enable_execution_notifications:boolean}}>} - */ - static loadShortLivedTestJobFixtureWithDeploy(jobVersion) { - let jobName; - - if (jobVersion === 'v0') { - jobName = TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V0; - } else if (jobVersion === 'v1') { - jobName = TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V1; - } else if (jobVersion === 'v2') { - jobName = TEAM_VDK_DATA_JOB_TEST_WITH_DEPLOY_V2; - } - - return cy.fixture(`/base/data-jobs/${TEAM_VDK}/short-lived/${jobName}.json`).then((fixture) => applyGlobalEnvSettings(fixture)); - } - - /** - * ** Load short-lived test Data Jobs fixture. - * - * @returns {Cypress.Chainable>} - */ - static loadShortLivedTestJobsFixtureNoDeploy() { - return cy.fixture(`/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_V10}.json`).then((fixture1) => { - return cy.fixture(`/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_V11}.json`).then((fixture2) => { - return cy.fixture(`/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_V12}.json`).then((fixture3) => { - return [applyGlobalEnvSettings(fixture1), applyGlobalEnvSettings(fixture2), applyGlobalEnvSettings(fixture3)]; - }); - }); - }); - } - - /** - * ** Wait for Data Job patch deployment req. - * - * @return {Cypress.Chainable} - */ - waitForDataJobDeploymentPatchReqInterceptor() { - return DataPipelinesBasePO.waitForDataJobDeploymentPatchReqInterceptor(); - } - - /** - * ** Wait for Data Job patch deployment req. - * - * @return {Cypress.Chainable} - */ - waitForDataJobExecutionPostReqInterceptor() { - return DataPipelinesBasePO.waitForDataJobExecutionPostReqInterceptor(); - } - - /** - * ** Wait API request to finish, then grid to load and finally additional short wait rows to be rendered. - * - * @return {Cypress.Chainable} - */ - waitForGridDataLoad() { - return this.waitForDataJobsApiGetReqInterceptor() - .then(() => this.waitForGridToLoad(null)) - .then(() => this.waitForViewToRenderShort()); - } - - /* Selectors */ - - getContentContainer() { - return cy.get('div.content-container'); + return cy + .fixture(`/base/data-jobs/${TEAM_VDK}/short-lived/${jobName}.json`) + .then((fixture) => applyGlobalEnvSettings(fixture)); + } + + /** + * ** Load short-lived test Data Jobs fixture. + * + * @returns {Cypress.Chainable>} + */ + static loadShortLivedTestJobsFixtureNoDeploy() { + return cy + .fixture( + `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_V10}.json`, + ) + .then((fixture1) => { + return cy + .fixture( + `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_V11}.json`, + ) + .then((fixture2) => { + return cy + .fixture( + `/base/data-jobs/${TEAM_VDK}/short-lived/${TEAM_VDK_DATA_JOB_TEST_V12}.json`, + ) + .then((fixture3) => { + return [ + applyGlobalEnvSettings(fixture1), + applyGlobalEnvSettings(fixture2), + applyGlobalEnvSettings(fixture3), + ]; + }); + }); + }); + } + + /** + * ** Wait for Data Job patch deployment req. + * + * @return {Cypress.Chainable} + */ + waitForDataJobDeploymentPatchReqInterceptor() { + return DataPipelinesBasePO.waitForDataJobDeploymentPatchReqInterceptor(); + } + + /** + * ** Wait for Data Job patch deployment req. + * + * @return {Cypress.Chainable} + */ + waitForDataJobExecutionPostReqInterceptor() { + return DataPipelinesBasePO.waitForDataJobExecutionPostReqInterceptor(); + } + + /** + * ** Wait API request to finish, then grid to load and finally additional short wait rows to be rendered. + * + * @return {Cypress.Chainable} + */ + waitForGridDataLoad() { + return this.waitForDataJobsApiGetReqInterceptor() + .then(() => this.waitForGridToLoad(null)) + .then(() => this.waitForViewToRenderShort()); + } + + /* Selectors */ + + getContentContainer() { + return cy.get("div.content-container"); + } + + /* Actions */ + + /** + ** Confirm action in dialog. + * + * @param {() => void} interceptor + */ + confirmInConfirmDialog(interceptor) { + cy.get("[data-cy=confirmation-dialog-ok-btn]") + .should("exist") + .click({ force: true }); + + if (interceptor) { + interceptor(); } - /* Actions */ + this.waitForViewToRenderShort(); + } - /** - ** Confirm action in dialog. - * - * @param {() => void} interceptor - */ - confirmInConfirmDialog(interceptor) { - cy.get('[data-cy=confirmation-dialog-ok-btn]').should('exist').click({ force: true }); + clickOnContentContainer() { + this.getContentContainer().should("exist").click({ force: true }); - if (interceptor) { - interceptor(); - } - - this.waitForViewToRenderShort(); - } - - clickOnContentContainer() { - this.getContentContainer().should('exist').click({ force: true }); - - this.waitForSmartDelay(); - } + this.waitForSmartDelay(); + } } diff --git a/projects/frontend/data-pipelines/gui/e2e/support/pages/explore/data-jobs/data-jobs.po.js b/projects/frontend/data-pipelines/gui/e2e/support/pages/explore/data-jobs/data-jobs.po.js index 6420b5f2ae..7cd8b32aef 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/pages/explore/data-jobs/data-jobs.po.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/pages/explore/data-jobs/data-jobs.po.js @@ -5,76 +5,82 @@ /// -import { DataJobsBasePO } from '../../base/data-pipelines/data-jobs-base.po'; +import { DataJobsBasePO } from "../../base/data-pipelines/data-jobs-base.po"; export class DataJobsExplorePage extends DataJobsBasePO { - /** - * ** Returns instance of the page object. - * - * @returns {DataJobsExplorePage} - */ - static getPage() { - return new DataJobsExplorePage(); - } - - /** - * @inheritDoc - * @return {DataJobsExplorePage} - */ - static navigateWithSideMenu() { - return super.navigateWithSideMenu('navLinkExploreDataJobs', 'openExplore', { - before: () => { - this.waitForApplicationBootstrap(); - this.waitForDataJobsApiGetReqInterceptor(3); - }, - after: () => { - this.waitForDataJobsApiGetReqInterceptor(); + /** + * ** Returns instance of the page object. + * + * @returns {DataJobsExplorePage} + */ + static getPage() { + return new DataJobsExplorePage(); + } - const page = this.getPage(); - page.waitForGridToLoad(null); - page.waitForViewToRenderShort(); - } - }); - } + /** + * @inheritDoc + * @return {DataJobsExplorePage} + */ + static navigateWithSideMenu() { + return super.navigateWithSideMenu("navLinkExploreDataJobs", "openExplore", { + before: () => { + this.waitForApplicationBootstrap(); + this.waitForDataJobsApiGetReqInterceptor(3); + }, + after: () => { + this.waitForDataJobsApiGetReqInterceptor(); - /** - * ** Navigate to Explore Data Jobs. - * - * @return {DataJobsExplorePage} - */ - static navigateTo() { - /** - * @type {DataJobsExplorePage} - */ - const page = super.navigateTo('explore'); + const page = this.getPage(); page.waitForGridToLoad(null); page.waitForViewToRenderShort(); + }, + }); + } - return page; - } - + /** + * ** Navigate to Explore Data Jobs. + * + * @return {DataJobsExplorePage} + */ + static navigateTo() { /** - * ** Wait until Data grid is loaded. - * - * @param {string} contextSelector - * @param {number} timeout - * @returns {Cypress.Chainable} + * @type {DataJobsExplorePage} */ - waitForGridToLoad(contextSelector, timeout = DataJobsBasePO.WAIT_SHORT_TASK) { - return this._waitForGridToLoad('data-pipelines-explore-data-jobs', timeout); - } + const page = super.navigateTo("explore"); + page.waitForGridToLoad(null); + page.waitForViewToRenderShort(); + + return page; + } + + /** + * ** Wait until Data grid is loaded. + * + * @param {string} contextSelector + * @param {number} timeout + * @returns {Cypress.Chainable} + */ + waitForGridToLoad(contextSelector, timeout = DataJobsBasePO.WAIT_SHORT_TASK) { + return this._waitForGridToLoad("data-pipelines-explore-data-jobs", timeout); + } - // Selectors + // Selectors - getDataGrid() { - return cy.get('[data-cy=data-pipelines-explore-grid]'); - } + getDataGrid() { + return cy.get("[data-cy=data-pipelines-explore-grid]"); + } - getDataGridNavigateBtn(team, job) { - return cy.get('[data-cy=data-pipelines-explore-grid-details-link][data-job-params="' + team + ';' + job + '"]'); - } + getDataGridNavigateBtn(team, job) { + return cy.get( + '[data-cy=data-pipelines-explore-grid-details-link][data-job-params="' + + team + + ";" + + job + + '"]', + ); + } - getDataGridRefreshButton() { - return cy.get('[data-cy=data-pipelines-explore-refresh-btn]'); - } + getDataGridRefreshButton() { + return cy.get("[data-cy=data-pipelines-explore-refresh-btn]"); + } } diff --git a/projects/frontend/data-pipelines/gui/e2e/support/pages/explore/data-jobs/details/data-job-details.po.js b/projects/frontend/data-pipelines/gui/e2e/support/pages/explore/data-jobs/details/data-job-details.po.js index 473ec16b82..b6e5c70024 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/pages/explore/data-jobs/details/data-job-details.po.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/pages/explore/data-jobs/details/data-job-details.po.js @@ -5,25 +5,25 @@ /// -import { DataJobDetailsBasePO } from '../../../base/data-pipelines/data-job-details-base.po'; +import { DataJobDetailsBasePO } from "../../../base/data-pipelines/data-job-details-base.po"; export class DataJobExploreDetailsPage extends DataJobDetailsBasePO { - /** - * ** Returns instance of the page object. - * - * @returns {DataJobExploreDetailsPage} - */ - static getPage() { - return new DataJobExploreDetailsPage(); - } + /** + * ** Returns instance of the page object. + * + * @returns {DataJobExploreDetailsPage} + */ + static getPage() { + return new DataJobExploreDetailsPage(); + } - /** - * @inheritDoc - * @param {string} teamName - * @param {string} jobName - * @return {DataJobExploreDetailsPage} - */ - static navigateTo(teamName, jobName) { - return super.navigateTo('explore', teamName, jobName); - } + /** + * @inheritDoc + * @param {string} teamName + * @param {string} jobName + * @return {DataJobExploreDetailsPage} + */ + static navigateTo(teamName, jobName) { + return super.navigateTo("explore", teamName, jobName); + } } diff --git a/projects/frontend/data-pipelines/gui/e2e/support/pages/explore/data-jobs/executions/data-job-executions.po.js b/projects/frontend/data-pipelines/gui/e2e/support/pages/explore/data-jobs/executions/data-job-executions.po.js index defb7c56f3..b2b1a20b01 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/pages/explore/data-jobs/executions/data-job-executions.po.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/pages/explore/data-jobs/executions/data-job-executions.po.js @@ -5,25 +5,25 @@ /// -import { DataJobBasePO } from '../../../base/data-pipelines/data-job-base.po'; +import { DataJobBasePO } from "../../../base/data-pipelines/data-job-base.po"; export class DataJobExploreExecutionsPage extends DataJobBasePO { - /** - * ** Returns instance of the page object. - * - * @returns {DataJobExploreExecutionsPage} - */ - static getPage() { - return new DataJobExploreExecutionsPage(); - } + /** + * ** Returns instance of the page object. + * + * @returns {DataJobExploreExecutionsPage} + */ + static getPage() { + return new DataJobExploreExecutionsPage(); + } - /** - * @inheritDoc - * @param {string} teamName - * @param {string} jobName - * @return {DataJobExploreExecutionsPage} - */ - static navigateTo(teamName, jobName) { - return super.navigateTo('explore', teamName, jobName, 'executions'); - } + /** + * @inheritDoc + * @param {string} teamName + * @param {string} jobName + * @return {DataJobExploreExecutionsPage} + */ + static navigateTo(teamName, jobName) { + return super.navigateTo("explore", teamName, jobName, "executions"); + } } diff --git a/projects/frontend/data-pipelines/gui/e2e/support/pages/get-started/get-started-page-data-jobs-health-overview.po.js b/projects/frontend/data-pipelines/gui/e2e/support/pages/get-started/get-started-page-data-jobs-health-overview.po.js index 35a4f7b7bd..c047ca9a69 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/pages/get-started/get-started-page-data-jobs-health-overview.po.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/pages/get-started/get-started-page-data-jobs-health-overview.po.js @@ -5,191 +5,209 @@ /// -import { DataPipelinesBasePO } from '../base/data-pipelines/data-pipelines-base.po'; +import { DataPipelinesBasePO } from "../base/data-pipelines/data-pipelines-base.po"; export class GetStartedDataJobsHealthOverviewWidgetPO extends DataPipelinesBasePO { - /** - * ** Returns instance of the page object. - * - * @returns {GetStartedDataJobsHealthOverviewWidgetPO} - */ - static getPage() { - return new GetStartedDataJobsHealthOverviewWidgetPO(); - } - - /** - * ** Navigate to home page through URL and return instance of page object. - * - * @type {GetStartedDataJobsHealthOverviewWidgetPO} - */ - static navigateTo() { - cy.visit('/get-started'); - - this.waitForApplicationBootstrap(); - this.waitForDataJobsApiGetReqInterceptor(3); - - this.waitForViewToRenderShort(); - - return this.getPage(); - } - - /** - * ** Get Data jobs health panel. - * - * @returns {Cypress.Chainable>} - */ - getDataJobsHealthPanel() { - return cy.get('[data-cy=dp-data-jobs-health-panel]'); - } - - /** - * ** Get Execution status gauge Widget. - * - * @returns {Cypress.Chainable>} - */ - getExecutionStatusGaugeWidget() { - return this.getDataJobsHealthPanel().should('exist').find('lib-widget-execution-status-gauge'); - } - - /** - * ** Get percentage of successful executions against total from Execution status gauge Widget. - * - * @returns {Cypress.Chainable} - */ - getExecutionsSuccessPercentage() { - return this.getExecutionStatusGaugeWidget() - .should('exist') - .find('[data-cy=dp-jobs-executions-status-gauge-widget-percentage]') - .invoke('text') - .invoke('trim') - .invoke('replace', /%/, '') - .then((value) => +value); - } - - /** - * ** Get number of failed executions from Execution status gauge Widget. - * - * @returns {Cypress.Chainable} - */ - getNumberOfFailedExecutions() { - return this.getExecutionStatusGaugeWidget() - .should('exist') - .find('.value-current') - .invoke('text') - .invoke('trim') - .invoke('replace', /\s\w+/, '') - .then((value) => +value); - } - - /** - * ** Get number of total executions from Execution status gauge Widget. - * - * @returns {Cypress.Chainable} - */ - getExecutionsTotal() { - return this.getExecutionStatusGaugeWidget() - .should('exist') - .find('[data-cy=dp-jobs-executions-status-gauge-widget-total]') - .invoke('text') - .invoke('trim') - .invoke('replace', /\s\w+/, '') - .then((value) => +value); - } - - /** - * ** Get Failing Data jobs Widget. - * - * @returns {Cypress.Chainable>} - */ - getFailingJobsWidget() { - return this.getDataJobsHealthPanel().should('exist').find('lib-data-jobs-failed-widget'); - } - - /** - * ** Get all Data jobs from Failing Data jobs Widget. - * - * @returns {Cypress.Chainable>} - */ - getAllFailingJobs() { - return this.getFailingJobsWidget().should('exist').find('clr-dg-row clr-dg-cell.job-name-column'); - } - - /** - * ** Get all Data jobs links from Failing Data jobs Widget. - * - * @returns {Cypress.Chainable>} - */ - getAllFailingJobsLinks() { - return this.getFailingJobsWidget().should('exist').find('[data-cy=dp-failed-data-jobs-widget-job-name-link]'); - } - - /** - * ** Get Most Recent Failing Data jobs Widget. - * - * @returns {Cypress.Chainable>} - */ - getMostRecentFailingJobsWidget() { - return this.getDataJobsHealthPanel().should('exist').find('lib-data-jobs-executions-widget'); - } - - /** - * ** Get all Data jobs from Most Recent Failing Data jobs Widget. - * - * @returns {Cypress.Chainable>} - */ - getAllMostRecentFailingJobs() { - return this.getMostRecentFailingJobsWidget().should('exist').find('clr-dg-row clr-dg-cell.job-name-column'); - } - - /** - * ** Get all executions from Most Recent Failing Data jobs executions Widget. - * - * @returns {Cypress.Chainable>} - */ - getAllMostRecentFailingJobsLinks() { - return this.getMostRecentFailingJobsWidget().should('exist').find('[data-cy=dp-failed-data-jobs-executions-widget-job-name-link]'); - } - - // Actions - - navigateToFailingJobDetails(jobName) { - this._navigateToDataJob(this.getAllFailingJobsLinks(), jobName, 4); - } - - navigateToMostRecentFailingJobExecutions(jobName) { - this._navigateToDataJob(this.getAllMostRecentFailingJobsLinks(), jobName, 3); - } - - /** - * ** Navigate to Data job - * - * @param {Cypress.Chainable>} chainable - * @param {string} jobName - * @param {number} numberOfReqToWait - * @private - */ - _navigateToDataJob(chainable, jobName, numberOfReqToWait = 3) { - chainable - .then((elements) => { - /** - * @type {HTMLElement} - */ - let foundElement; - elements.each((_index, el) => { - if (el.innerText.trim().includes(jobName)) { - foundElement = el; - - return false; - } - }); - - return foundElement; - }) - .should('exist') - .click({ force: true }); - - this.waitForDataJobsApiGetReqInterceptor(numberOfReqToWait); - - this.waitForViewToRender(); - } + /** + * ** Returns instance of the page object. + * + * @returns {GetStartedDataJobsHealthOverviewWidgetPO} + */ + static getPage() { + return new GetStartedDataJobsHealthOverviewWidgetPO(); + } + + /** + * ** Navigate to home page through URL and return instance of page object. + * + * @type {GetStartedDataJobsHealthOverviewWidgetPO} + */ + static navigateTo() { + cy.visit("/get-started"); + + this.waitForApplicationBootstrap(); + this.waitForDataJobsApiGetReqInterceptor(3); + + this.waitForViewToRenderShort(); + + return this.getPage(); + } + + /** + * ** Get Data jobs health panel. + * + * @returns {Cypress.Chainable>} + */ + getDataJobsHealthPanel() { + return cy.get("[data-cy=dp-data-jobs-health-panel]"); + } + + /** + * ** Get Execution status gauge Widget. + * + * @returns {Cypress.Chainable>} + */ + getExecutionStatusGaugeWidget() { + return this.getDataJobsHealthPanel() + .should("exist") + .find("lib-widget-execution-status-gauge"); + } + + /** + * ** Get percentage of successful executions against total from Execution status gauge Widget. + * + * @returns {Cypress.Chainable} + */ + getExecutionsSuccessPercentage() { + return this.getExecutionStatusGaugeWidget() + .should("exist") + .find("[data-cy=dp-jobs-executions-status-gauge-widget-percentage]") + .invoke("text") + .invoke("trim") + .invoke("replace", /%/, "") + .then((value) => +value); + } + + /** + * ** Get number of failed executions from Execution status gauge Widget. + * + * @returns {Cypress.Chainable} + */ + getNumberOfFailedExecutions() { + return this.getExecutionStatusGaugeWidget() + .should("exist") + .find(".value-current") + .invoke("text") + .invoke("trim") + .invoke("replace", /\s\w+/, "") + .then((value) => +value); + } + + /** + * ** Get number of total executions from Execution status gauge Widget. + * + * @returns {Cypress.Chainable} + */ + getExecutionsTotal() { + return this.getExecutionStatusGaugeWidget() + .should("exist") + .find("[data-cy=dp-jobs-executions-status-gauge-widget-total]") + .invoke("text") + .invoke("trim") + .invoke("replace", /\s\w+/, "") + .then((value) => +value); + } + + /** + * ** Get Failing Data jobs Widget. + * + * @returns {Cypress.Chainable>} + */ + getFailingJobsWidget() { + return this.getDataJobsHealthPanel() + .should("exist") + .find("lib-data-jobs-failed-widget"); + } + + /** + * ** Get all Data jobs from Failing Data jobs Widget. + * + * @returns {Cypress.Chainable>} + */ + getAllFailingJobs() { + return this.getFailingJobsWidget() + .should("exist") + .find("clr-dg-row clr-dg-cell.job-name-column"); + } + + /** + * ** Get all Data jobs links from Failing Data jobs Widget. + * + * @returns {Cypress.Chainable>} + */ + getAllFailingJobsLinks() { + return this.getFailingJobsWidget() + .should("exist") + .find("[data-cy=dp-failed-data-jobs-widget-job-name-link]"); + } + + /** + * ** Get Most Recent Failing Data jobs Widget. + * + * @returns {Cypress.Chainable>} + */ + getMostRecentFailingJobsWidget() { + return this.getDataJobsHealthPanel() + .should("exist") + .find("lib-data-jobs-executions-widget"); + } + + /** + * ** Get all Data jobs from Most Recent Failing Data jobs Widget. + * + * @returns {Cypress.Chainable>} + */ + getAllMostRecentFailingJobs() { + return this.getMostRecentFailingJobsWidget() + .should("exist") + .find("clr-dg-row clr-dg-cell.job-name-column"); + } + + /** + * ** Get all executions from Most Recent Failing Data jobs executions Widget. + * + * @returns {Cypress.Chainable>} + */ + getAllMostRecentFailingJobsLinks() { + return this.getMostRecentFailingJobsWidget() + .should("exist") + .find("[data-cy=dp-failed-data-jobs-executions-widget-job-name-link]"); + } + + // Actions + + navigateToFailingJobDetails(jobName) { + this._navigateToDataJob(this.getAllFailingJobsLinks(), jobName, 4); + } + + navigateToMostRecentFailingJobExecutions(jobName) { + this._navigateToDataJob( + this.getAllMostRecentFailingJobsLinks(), + jobName, + 3, + ); + } + + /** + * ** Navigate to Data job + * + * @param {Cypress.Chainable>} chainable + * @param {string} jobName + * @param {number} numberOfReqToWait + * @private + */ + _navigateToDataJob(chainable, jobName, numberOfReqToWait = 3) { + chainable + .then((elements) => { + /** + * @type {HTMLElement} + */ + let foundElement; + elements.each((_index, el) => { + if (el.innerText.trim().includes(jobName)) { + foundElement = el; + + return false; + } + }); + + return foundElement; + }) + .should("exist") + .click({ force: true }); + + this.waitForDataJobsApiGetReqInterceptor(numberOfReqToWait); + + this.waitForViewToRender(); + } } diff --git a/projects/frontend/data-pipelines/gui/e2e/support/pages/get-started/get-started-page.po.js b/projects/frontend/data-pipelines/gui/e2e/support/pages/get-started/get-started-page.po.js index 729a399ebd..75c38b9d6f 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/pages/get-started/get-started-page.po.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/pages/get-started/get-started-page.po.js @@ -5,42 +5,42 @@ /// -import { BasePagePO } from '../base/base-page.po'; +import { BasePagePO } from "../base/base-page.po"; export class GetStartedPagePO extends BasePagePO { - /** - * ** Returns instance of the page object. - * - * @returns {GetStartedPagePO} - */ - static getPage() { - return new GetStartedPagePO(); - } - - /** - * ** Navigate to home page through URL and return instance of page object. - * - * @type {GetStartedPagePO} - */ - static navigateTo() { - cy.visit('/get-started'); - - this.waitForApplicationBootstrap(); - this.waitForDataJobsApiGetReqInterceptor(3); - - this.waitForViewToRenderShort(); - - return this.getPage(); - } - - /** - * ** Navigate to home page through URL and return instance of page object. - * ** Do not wait for bootstrap and interceptors - * @type {GetStartedPagePO} - */ - static navigateToNoBootstrap() { - cy.visit('/get-started'); - this.waitForViewToRenderShort(); - return this.getPage(); - } + /** + * ** Returns instance of the page object. + * + * @returns {GetStartedPagePO} + */ + static getPage() { + return new GetStartedPagePO(); + } + + /** + * ** Navigate to home page through URL and return instance of page object. + * + * @type {GetStartedPagePO} + */ + static navigateTo() { + cy.visit("/get-started"); + + this.waitForApplicationBootstrap(); + this.waitForDataJobsApiGetReqInterceptor(3); + + this.waitForViewToRenderShort(); + + return this.getPage(); + } + + /** + * ** Navigate to home page through URL and return instance of page object. + * ** Do not wait for bootstrap and interceptors + * @type {GetStartedPagePO} + */ + static navigateToNoBootstrap() { + cy.visit("/get-started"); + this.waitForViewToRenderShort(); + return this.getPage(); + } } diff --git a/projects/frontend/data-pipelines/gui/e2e/support/pages/manage/data-jobs/data-jobs.po.js b/projects/frontend/data-pipelines/gui/e2e/support/pages/manage/data-jobs/data-jobs.po.js index ebbb755c83..af93aa68a5 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/pages/manage/data-jobs/data-jobs.po.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/pages/manage/data-jobs/data-jobs.po.js @@ -5,159 +5,170 @@ /// -import { DataJobsBasePO } from '../../base/data-pipelines/data-jobs-base.po'; +import { DataJobsBasePO } from "../../base/data-pipelines/data-jobs-base.po"; export class DataJobsManagePage extends DataJobsBasePO { - /** - * ** Returns instance of the page object. - * - * @returns {DataJobsManagePage} - */ - static getPage() { - return new DataJobsManagePage(); - } - - /** - * ** Navigate to page with provided nav link id through side menu navigation, choose Team, and return instance of page object. - * - * @return {DataJobsManagePage} - */ - static navigateWithSideMenu() { - return super.navigateWithSideMenu('navLinkManageDataJobs', 'openManage', { - before: () => { - this.waitForApplicationBootstrap(); - this.waitForDataJobsApiGetReqInterceptor(3); - }, - after: () => { - this.waitForDataJobsApiGetReqInterceptor(); - - const page = this.getPage(); - page.waitForGridToLoad(null); - page.waitForViewToRenderShort(); - } - }); - } - - /** - * ** Navigate to Manage Data Jobs. - * - * @return {DataJobsManagePage} - */ - static navigateTo() { - /** - * @type {DataJobsManagePage} - */ - const page = super.navigateTo('manage'); + /** + * ** Returns instance of the page object. + * + * @returns {DataJobsManagePage} + */ + static getPage() { + return new DataJobsManagePage(); + } + + /** + * ** Navigate to page with provided nav link id through side menu navigation, choose Team, and return instance of page object. + * + * @return {DataJobsManagePage} + */ + static navigateWithSideMenu() { + return super.navigateWithSideMenu("navLinkManageDataJobs", "openManage", { + before: () => { + this.waitForApplicationBootstrap(); + this.waitForDataJobsApiGetReqInterceptor(3); + }, + after: () => { + this.waitForDataJobsApiGetReqInterceptor(); + + const page = this.getPage(); page.waitForGridToLoad(null); page.waitForViewToRenderShort(); - - return page; - } - + }, + }); + } + + /** + * ** Navigate to Manage Data Jobs. + * + * @return {DataJobsManagePage} + */ + static navigateTo() { /** - * ** Navigate to home page through URL and return instance of page object. - * ** Do not wait for bootstrap and interceptors - * @type {GetStartedPagePO} + * @type {DataJobsManagePage} */ - static navigateToNoBootstrap() { - /** - * @type {DataJobsManagePage} - */ - const page = super.navigateToNoBootstrap('manage'); - page.waitForGridToLoad(null); - return page; - } - + const page = super.navigateTo("manage"); + page.waitForGridToLoad(null); + page.waitForViewToRenderShort(); + + return page; + } + + /** + * ** Navigate to home page through URL and return instance of page object. + * ** Do not wait for bootstrap and interceptors + * @type {GetStartedPagePO} + */ + static navigateToNoBootstrap() { /** - * ** Wait until Data grid is loaded. - * - * @param {string} contextSelector - * @param {number} timeout - * @returns {Cypress.Chainable} + * @type {DataJobsManagePage} */ - waitForGridToLoad(contextSelector, timeout = DataJobsBasePO.WAIT_SHORT_TASK) { - return this._waitForGridToLoad('data-pipelines-manage-data-jobs', timeout); - } - - getDataGrid() { - return cy.get('[data-cy=data-pipelines-manage-grid]'); - } - - getDataGridNavigateBtn(team, job) { - return cy.get('[data-cy=data-pipelines-manage-grid-details-link][data-job-params="' + team + ';' + job + '"]'); - } - - getDataGridRefreshButton() { - return cy.get('[data-cy=data-pipelines-manage-refresh-btn]'); - } - - getExecuteNowGridButton() { - return cy.get('[data-cy=data-pipelines-manage-grid-execute-btn]'); - } - - getJobStatus(jobName) { - return this.getDataGridRowByName(jobName).then(($row) => { - if ($row.find('[data-cy=data-pipelines-job-disabled]').length) { - return 'disable'; - } - - if ($row.find('[data-cy=data-pipelines-job-enabled]').length) { - return 'enable'; - } - - return 'not_deployed'; - }); - } - - // Actions - - executeDataJob(jobName) { - this.selectRow(jobName); - - this.waitForClickThinkingTime(); - - this.getExecuteNowGridButton().should('exist').click({ force: true }); - - this.waitForViewToRenderShort(); - - this.confirmInConfirmDialog(() => { - this.waitForDataJobExecutionPostReqInterceptor(); - }); - } - - changeStatus(newStatus) { - cy.get(`[data-cy=data-pipelines-job-${newStatus}-btn]`).should('exist').should('be.enabled').click({ force: true }); - } - - toggleJobStatus(jobName) { - this.selectRow(jobName); - - this.getJobStatus(jobName).then((currentStatus) => { - if (currentStatus === 'not_deployed') { - throw new Error('Data job is not Deployed.'); - } - - const newStatus = currentStatus === 'enable' ? 'disable' : 'enable'; - - cy.log(`Current status: ${currentStatus}, new status: ${newStatus}`); - - this.changeStatus(newStatus); - - this.confirmInConfirmDialog(() => { - this.waitForDataJobDeploymentPatchReqInterceptor(); - }); - - this.getToastTitle().should('exist').should('contain.text', 'Status update completed'); - - this.getToastDismiss().should('exist').click({ force: true }); - - this.waitForClickThinkingTime(); // Natural wait for User action + const page = super.navigateToNoBootstrap("manage"); + page.waitForGridToLoad(null); + return page; + } - this.refreshDataGrid(); + /** + * ** Wait until Data grid is loaded. + * + * @param {string} contextSelector + * @param {number} timeout + * @returns {Cypress.Chainable} + */ + waitForGridToLoad(contextSelector, timeout = DataJobsBasePO.WAIT_SHORT_TASK) { + return this._waitForGridToLoad("data-pipelines-manage-data-jobs", timeout); + } + + getDataGrid() { + return cy.get("[data-cy=data-pipelines-manage-grid]"); + } + + getDataGridNavigateBtn(team, job) { + return cy.get( + '[data-cy=data-pipelines-manage-grid-details-link][data-job-params="' + + team + + ";" + + job + + '"]', + ); + } + + getDataGridRefreshButton() { + return cy.get("[data-cy=data-pipelines-manage-refresh-btn]"); + } + + getExecuteNowGridButton() { + return cy.get("[data-cy=data-pipelines-manage-grid-execute-btn]"); + } + + getJobStatus(jobName) { + return this.getDataGridRowByName(jobName).then(($row) => { + if ($row.find("[data-cy=data-pipelines-job-disabled]").length) { + return "disable"; + } + + if ($row.find("[data-cy=data-pipelines-job-enabled]").length) { + return "enable"; + } + + return "not_deployed"; + }); + } + + // Actions + + executeDataJob(jobName) { + this.selectRow(jobName); + + this.waitForClickThinkingTime(); + + this.getExecuteNowGridButton().should("exist").click({ force: true }); + + this.waitForViewToRenderShort(); + + this.confirmInConfirmDialog(() => { + this.waitForDataJobExecutionPostReqInterceptor(); + }); + } + + changeStatus(newStatus) { + cy.get(`[data-cy=data-pipelines-job-${newStatus}-btn]`) + .should("exist") + .should("be.enabled") + .click({ force: true }); + } + + toggleJobStatus(jobName) { + this.selectRow(jobName); + + this.getJobStatus(jobName).then((currentStatus) => { + if (currentStatus === "not_deployed") { + throw new Error("Data job is not Deployed."); + } + + const newStatus = currentStatus === "enable" ? "disable" : "enable"; + + cy.log(`Current status: ${currentStatus}, new status: ${newStatus}`); + + this.changeStatus(newStatus); + + this.confirmInConfirmDialog(() => { + this.waitForDataJobDeploymentPatchReqInterceptor(); + }); + + this.getToastTitle() + .should("exist") + .should("contain.text", "Status update completed"); + + this.getToastDismiss().should("exist").click({ force: true }); + + this.waitForClickThinkingTime(); // Natural wait for User action + + this.refreshDataGrid(); - this.getJobStatus(jobName).then((changedStatus) => { - expect(changedStatus).to.equal(newStatus); - }); - }); - } + this.getJobStatus(jobName).then((changedStatus) => { + expect(changedStatus).to.equal(newStatus); + }); + }); + } } diff --git a/projects/frontend/data-pipelines/gui/e2e/support/pages/manage/data-jobs/details/data-job-details.po.js b/projects/frontend/data-pipelines/gui/e2e/support/pages/manage/data-jobs/details/data-job-details.po.js index 0ed68a2fc9..8fb42e0ae0 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/pages/manage/data-jobs/details/data-job-details.po.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/pages/manage/data-jobs/details/data-job-details.po.js @@ -5,257 +5,294 @@ /// -import { DataJobDetailsBasePO } from '../../../base/data-pipelines/data-job-details-base.po'; +import { DataJobDetailsBasePO } from "../../../base/data-pipelines/data-job-details-base.po"; export class DataJobManageDetailsPage extends DataJobDetailsBasePO { - /** - * ** Returns instance of the page object. - * - * @returns {DataJobManageDetailsPage} - */ - static getPage() { - return new DataJobManageDetailsPage(); + /** + * ** Returns instance of the page object. + * + * @returns {DataJobManageDetailsPage} + */ + static getPage() { + return new DataJobManageDetailsPage(); + } + + /** + * @inheritDoc + * @return {DataJobManageDetailsPage} + */ + static navigateTo(teamName, jobName) { + return super.navigateTo("manage", teamName, jobName); + } + + // Deployment methods + + // Acceptable values are "not-deployed", "enabled", "disabled" + getDeploymentStatus(status) { + return cy.get("[data-cy=data-pipelines-job-details-status-" + status + "]"); + } + + // Description methods + + getDescription() { + return cy.get( + "[data-cy=data-pipelines-data-job-details-description] .form-section-readonly", + ); + } + + getDescriptionEditButton() { + return cy.get( + "[data-cy=data-pipelines-data-job-details-description] .form-section-header > .btn", + ); + } + + getDescriptionEditTextarea() { + return cy.get( + "[data-cy=data-pipelines-data-job-details-description] textarea", + ); + } + + getDescriptionSaveButton() { + return cy.get( + "[data-cy=data-pipelines-data-job-details-description] button:contains(Save)", + ); + } + + openDescription() { + this.getDescriptionEditButton().click({ force: true }); + } + + enterDescriptionDetails(description) { + this.getDescriptionEditTextarea().clear().type(description); + } + + saveDescription() { + this.getDescriptionSaveButton().click({ force: true }); + + this.waitForDataJobPutReqInterceptor(); + } + + /** + * ** Format ISO DateTime to Data job executions timeline format. + * + * e.g. + * '2023-03-27T10:25:24.960717Z' -> 'Mar 27, 2023, 10:25 AM UTC' + * + * @param {string} isoDate + */ + formatDateTimeFromISOToExecutionsTimeline(isoDate) { + const dateTimeChunks = isoDate.replace(/(\..*)?Z$/, "").split("T"); + const dateChunk = dateTimeChunks[0]; + const timeChunk = dateTimeChunks[1]; + + return `${this._formatDateFromISOToExecutionsTimeline(dateChunk)}, ${this._formatTimeFromISOToExecutionsTimeline(timeChunk)} UTC`; + } + + // Schedule methods + + getSchedule() { + return cy.get( + "[data-cy=data-pipelines-data-job-details-schedule] .form-section-readonly", + ); + } + + // Disable/Enable methods + + getStatusEditButton() { + return cy.get( + "[data-cy=data-pipelines-data-job-details-status] .form-section-header > .btn", + ); + } + + getStatusSaveButton() { + return cy.get( + "[data-cy=data-pipelines-data-job-details-status] button:contains(Save)", + ); + } + + // Executions Timeline + + getExecutionsSteps() { + return cy.get(".clr-timeline-step"); + } + + getExecutionStepStartedTile(stepSelector) { + return cy + .get(stepSelector) + .should("exist") + .scrollIntoView() + .find("[data-cy=data-pipelines-executions-timeline-started]") + .invoke("attr", "title"); + } + + getExecutionStepEndedTile(stepSelector) { + return cy + .get(stepSelector) + .should("exist") + .find("[data-cy=data-pipelines-executions-timeline-ended]") + .invoke("attr", "title"); + } + + getExecutionStepManualTriggerer(stepSelector) { + return cy + .get(stepSelector) + .find("[data-cy=data-pipelines-executions-timeline-manual-start]"); + } + + getExecutionStepStatusIcon(stepSelector, status) { + const STATUS_ICON_MAP = {}; + STATUS_ICON_MAP["SUBMITTED"] = "hourglass"; + STATUS_ICON_MAP["RUNNING"] = "play"; + STATUS_ICON_MAP["SUCCEEDED"] = "success-standard"; + STATUS_ICON_MAP["CANCELLED"] = "times-circle"; + STATUS_ICON_MAP["SKIPPED"] = "circle-arrow"; + STATUS_ICON_MAP["USER_ERROR"] = "error-standard"; + STATUS_ICON_MAP["PLATFORM_ERROR"] = "error-standard"; + + if (status === "RUNNING") { + return cy.get(stepSelector).find(`clr-spinner[aria-label='In progress']`); } - /** - * @inheritDoc - * @return {DataJobManageDetailsPage} - */ - static navigateTo(teamName, jobName) { - return super.navigateTo('manage', teamName, jobName); - } - - // Deployment methods - - // Acceptable values are "not-deployed", "enabled", "disabled" - getDeploymentStatus(status) { - return cy.get('[data-cy=data-pipelines-job-details-status-' + status + ']'); - } - - // Description methods - - getDescription() { - return cy.get('[data-cy=data-pipelines-data-job-details-description] .form-section-readonly'); - } - - getDescriptionEditButton() { - return cy.get('[data-cy=data-pipelines-data-job-details-description] .form-section-header > .btn'); - } - - getDescriptionEditTextarea() { - return cy.get('[data-cy=data-pipelines-data-job-details-description] textarea'); - } - - getDescriptionSaveButton() { - return cy.get('[data-cy=data-pipelines-data-job-details-description] button:contains(Save)'); - } - - openDescription() { - this.getDescriptionEditButton().click({ force: true }); - } - - enterDescriptionDetails(description) { - this.getDescriptionEditTextarea().clear().type(description); - } - - saveDescription() { - this.getDescriptionSaveButton().click({ force: true }); - - this.waitForDataJobPutReqInterceptor(); - } + return cy.get(stepSelector).find(`[shape=${STATUS_ICON_MAP[status]}]`); + } - /** - * ** Format ISO DateTime to Data job executions timeline format. - * - * e.g. - * '2023-03-27T10:25:24.960717Z' -> 'Mar 27, 2023, 10:25 AM UTC' - * - * @param {string} isoDate - */ - formatDateTimeFromISOToExecutionsTimeline(isoDate) { - const dateTimeChunks = isoDate.replace(/(\..*)?Z$/, '').split('T'); - const dateChunk = dateTimeChunks[0]; - const timeChunk = dateTimeChunks[1]; - - return `${this._formatDateFromISOToExecutionsTimeline(dateChunk)}, ${this._formatTimeFromISOToExecutionsTimeline(timeChunk)} UTC`; - } + // Actions - // Schedule methods + changeStatus(currentStatus) { + const newStatus = + currentStatus.trim().toLowerCase() === "enabled" ? "disable" : "enable"; - getSchedule() { - return cy.get('[data-cy=data-pipelines-data-job-details-schedule] .form-section-readonly'); - } + return cy + .get(`[data-cy=data-pipelines-data-job-details-status-${newStatus}]`) + .should("exist") + .check({ force: true }); + } - // Disable/Enable methods + toggleJobStatus() { + cy.get("[data-cy=data-pipelines-job-details-status]") + .invoke("text") + .then((jobStatus) => { + this.getStatusEditButton().scrollIntoView().click({ force: true }); - getStatusEditButton() { - return cy.get('[data-cy=data-pipelines-data-job-details-status] .form-section-header > .btn'); - } - - getStatusSaveButton() { - return cy.get('[data-cy=data-pipelines-data-job-details-status] button:contains(Save)'); - } + this.changeStatus(jobStatus); - // Executions Timeline + this.waitForClickThinkingTime(); - getExecutionsSteps() { - return cy.get('.clr-timeline-step'); - } + this.getStatusSaveButton().scrollIntoView().click({ force: true }); - getExecutionStepStartedTile(stepSelector) { - return cy.get(stepSelector).should('exist').scrollIntoView().find('[data-cy=data-pipelines-executions-timeline-started]').invoke('attr', 'title'); - } + let newStatus = jobStatus === "Enabled" ? "Disabled" : "Enabled"; - getExecutionStepEndedTile(stepSelector) { - return cy.get(stepSelector).should('exist').find('[data-cy=data-pipelines-executions-timeline-ended]').invoke('attr', 'title'); - } + this.waitForDataJobDeploymentPatchReqInterceptor(); - getExecutionStepManualTriggerer(stepSelector) { - return cy.get(stepSelector).find('[data-cy=data-pipelines-executions-timeline-manual-start]'); - } + this.getToastTitle() + .should("exist") + .should("contain.text", "Status update completed"); - getExecutionStepStatusIcon(stepSelector, status) { - const STATUS_ICON_MAP = {}; - STATUS_ICON_MAP['SUBMITTED'] = 'hourglass'; - STATUS_ICON_MAP['RUNNING'] = 'play'; - STATUS_ICON_MAP['SUCCEEDED'] = 'success-standard'; - STATUS_ICON_MAP['CANCELLED'] = 'times-circle'; - STATUS_ICON_MAP['SKIPPED'] = 'circle-arrow'; - STATUS_ICON_MAP['USER_ERROR'] = 'error-standard'; - STATUS_ICON_MAP['PLATFORM_ERROR'] = 'error-standard'; - - if (status === 'RUNNING') { - return cy.get(stepSelector).find(`clr-spinner[aria-label='In progress']`); - } - - return cy.get(stepSelector).find(`[shape=${STATUS_ICON_MAP[status]}]`); - } + this.waitForActionThinkingTime(); // Natural wait for User action - // Actions + this.getToastDismiss().should("exist").click({ force: true }); - changeStatus(currentStatus) { - const newStatus = currentStatus.trim().toLowerCase() === 'enabled' ? 'disable' : 'enable'; + cy.get("[data-cy=data-pipelines-job-details-status]") + .scrollIntoView() + .should("have.text", newStatus); + }); + } - return cy.get(`[data-cy=data-pipelines-data-job-details-status-${newStatus}]`).should('exist').check({ force: true }); + /** + * ** Format Date chunk to Data job Executions timeline format. + * + * e.g. + * '2023-03-27' -> 'Mar 27, 2023' + * + * @param {string} dateChunk + * @return {string} + * @private + */ + _formatDateFromISOToExecutionsTimeline(dateChunk) { + if (!dateChunk) { + return ""; } - toggleJobStatus() { - cy.get('[data-cy=data-pipelines-job-details-status]') - .invoke('text') - .then((jobStatus) => { - this.getStatusEditButton().scrollIntoView().click({ force: true }); - - this.changeStatus(jobStatus); - - this.waitForClickThinkingTime(); - - this.getStatusSaveButton().scrollIntoView().click({ force: true }); - - let newStatus = jobStatus === 'Enabled' ? 'Disabled' : 'Enabled'; - - this.waitForDataJobDeploymentPatchReqInterceptor(); - - this.getToastTitle().should('exist').should('contain.text', 'Status update completed'); - - this.waitForActionThinkingTime(); // Natural wait for User action - - this.getToastDismiss().should('exist').click({ force: true }); - - cy.get('[data-cy=data-pipelines-job-details-status]').scrollIntoView().should('have.text', newStatus); - }); + const dateChunks = dateChunk.split("-"); + const year = dateChunks[0]; + const month = dateChunks[1]; + const day = parseInt(dateChunks[2], 10); + + const dayMonth = `${day}, ${year}`; + + let monthAbbreviation; + + switch (month) { + case "01": + monthAbbreviation = "Jan"; + break; + case "02": + monthAbbreviation = "Feb"; + break; + case "03": + monthAbbreviation = "Mar"; + break; + case "04": + monthAbbreviation = "Apr"; + break; + case "05": + monthAbbreviation = "May"; + break; + case "06": + monthAbbreviation = "Jun"; + break; + case "07": + monthAbbreviation = "Jul"; + break; + case "08": + monthAbbreviation = "Aug"; + break; + case "09": + monthAbbreviation = "Sep"; + break; + case "10": + monthAbbreviation = "Oct"; + break; + case "11": + monthAbbreviation = "Nov"; + break; + case "12": + monthAbbreviation = "Dec"; + break; + default: + monthAbbreviation = ""; } - /** - * ** Format Date chunk to Data job Executions timeline format. - * - * e.g. - * '2023-03-27' -> 'Mar 27, 2023' - * - * @param {string} dateChunk - * @return {string} - * @private - */ - _formatDateFromISOToExecutionsTimeline(dateChunk) { - if (!dateChunk) { - return ''; - } - - const dateChunks = dateChunk.split('-'); - const year = dateChunks[0]; - const month = dateChunks[1]; - const day = parseInt(dateChunks[2], 10); - - const dayMonth = `${day}, ${year}`; - - let monthAbbreviation; - - switch (month) { - case '01': - monthAbbreviation = 'Jan'; - break; - case '02': - monthAbbreviation = 'Feb'; - break; - case '03': - monthAbbreviation = 'Mar'; - break; - case '04': - monthAbbreviation = 'Apr'; - break; - case '05': - monthAbbreviation = 'May'; - break; - case '06': - monthAbbreviation = 'Jun'; - break; - case '07': - monthAbbreviation = 'Jul'; - break; - case '08': - monthAbbreviation = 'Aug'; - break; - case '09': - monthAbbreviation = 'Sep'; - break; - case '10': - monthAbbreviation = 'Oct'; - break; - case '11': - monthAbbreviation = 'Nov'; - break; - case '12': - monthAbbreviation = 'Dec'; - break; - default: - monthAbbreviation = ''; - } - - return `${monthAbbreviation} ${dayMonth}`; + return `${monthAbbreviation} ${dayMonth}`; + } + + /** + * ** Format Time chunk to Data job Executions timeline format. + * + * e.g. + * '10:25:24' -> '10:25 AM' + * + * @param {string} timeChunk + * @return {string} + * @private + */ + _formatTimeFromISOToExecutionsTimeline(timeChunk) { + if (!timeChunk) { + return ""; } - /** - * ** Format Time chunk to Data job Executions timeline format. - * - * e.g. - * '10:25:24' -> '10:25 AM' - * - * @param {string} timeChunk - * @return {string} - * @private - */ - _formatTimeFromISOToExecutionsTimeline(timeChunk) { - if (!timeChunk) { - return ''; - } - - const timeChunks = timeChunk.split(':'); - const hour = parseInt(timeChunks[0], 10); - const minute = parseInt(timeChunks[1], 10); - const beforeOrAfter = hour >= 12 ? 'PM' : 'AM'; - const hourNormalizedTo12Hours = hour > 12 ? hour % 12 : hour === 0 ? 12 : hour; - const hourNormalizedToString = hourNormalizedTo12Hours < 10 ? `0${hourNormalizedTo12Hours}` : `${hourNormalizedTo12Hours}`; - const minuteNormalizedToString = minute < 10 ? `0${minute}` : `${minute}`; - - return `${hourNormalizedToString}:${minuteNormalizedToString} ${beforeOrAfter}`; - } + const timeChunks = timeChunk.split(":"); + const hour = parseInt(timeChunks[0], 10); + const minute = parseInt(timeChunks[1], 10); + const beforeOrAfter = hour >= 12 ? "PM" : "AM"; + const hourNormalizedTo12Hours = + hour > 12 ? hour % 12 : hour === 0 ? 12 : hour; + const hourNormalizedToString = + hourNormalizedTo12Hours < 10 + ? `0${hourNormalizedTo12Hours}` + : `${hourNormalizedTo12Hours}`; + const minuteNormalizedToString = minute < 10 ? `0${minute}` : `${minute}`; + + return `${hourNormalizedToString}:${minuteNormalizedToString} ${beforeOrAfter}`; + } } diff --git a/projects/frontend/data-pipelines/gui/e2e/support/pages/manage/data-jobs/executions/data-job-executions.po.js b/projects/frontend/data-pipelines/gui/e2e/support/pages/manage/data-jobs/executions/data-job-executions.po.js index fdabfcc458..2f3d031760 100644 --- a/projects/frontend/data-pipelines/gui/e2e/support/pages/manage/data-jobs/executions/data-job-executions.po.js +++ b/projects/frontend/data-pipelines/gui/e2e/support/pages/manage/data-jobs/executions/data-job-executions.po.js @@ -5,658 +5,778 @@ /// -import { DataJobBasePO } from '../../../base/data-pipelines/data-job-base.po'; -import { DataJobsBasePO } from '../../../base/data-pipelines/data-jobs-base.po'; +import { DataJobBasePO } from "../../../base/data-pipelines/data-job-base.po"; +import { DataJobsBasePO } from "../../../base/data-pipelines/data-jobs-base.po"; export class DataJobManageExecutionsPage extends DataJobBasePO { + /** + * ** Returns instance of the page object. + * + * @returns {DataJobManageExecutionsPage} + */ + static getPage() { + return new DataJobManageExecutionsPage(); + } + + /** + * @inheritDoc + * @return {DataJobManageExecutionsPage} + */ + static navigateTo(teamName, jobName) { /** - * ** Returns instance of the page object. - * - * @returns {DataJobManageExecutionsPage} + * @type {DataJobManageExecutionsPage} */ - static getPage() { - return new DataJobManageExecutionsPage(); - } - - /** - * @inheritDoc - * @return {DataJobManageExecutionsPage} - */ - static navigateTo(teamName, jobName) { + const page = super.navigateTo("manage", teamName, jobName, "executions"); + page.waitForGridToLoad(null); + page.waitForViewToRenderShort(); + + return page; + } + + /** + * ** Navigate to Data Job executions page with provided URL. + * + * @param {string} url + * @return {DataJobManageExecutionsPage} + */ + static navigateToExecutionsWithUrl(url) { + const page = this.navigateToDataJobUrl(url, 3); + + page.waitForGridToLoad(null); + page.waitForViewToRenderShort(); + + return page; + } + + /* Utils */ + + /** + * ** Converts from view time to seconds. + * + * @example + * + * - val=1m 34s + * - val=45s + * + * @return {number} + */ + convertStringContentToSeconds(val) { + const params = val.trim().split(" "); + + if (params.length === 2) { + return ( + parseInt(params[0].trim().replace(/m$/, ""), 10) * 60 + + parseInt(params[1].trim().replace(/s$/, ""), 10) + ); + } else { + return parseInt(params[0].trim().replace(/s$/, ""), 10); + } + } + + /* Selectors */ + + /** + * ** Wait until Data grid is loaded. + * + * @param {string} contextSelector + * @param {number} timeout + * @returns {Cypress.Chainable} + */ + waitForGridToLoad(contextSelector, timeout = DataJobsBasePO.WAIT_SHORT_TASK) { + return this._waitForGridToLoad( + "data-pipelines-data-job-executions", + timeout, + ); + } + + // General + + getExecRefreshBtn() { + return cy.get("[data-cy=data-pipelines-job-executions-refresh-btn"); + } + + getExecLoadingSpinner() { + return cy.get("[data-cy=data-pipelines-job-executions-loading-spinner]"); + } + + // Charts + + getStatusChart() { + return cy.get("[data-cy=data-pipelines-job-executions-status-chart]"); + } + + getDurationChart() { + return cy.get("[data-cy=data-pipelines-job-executions-duration-chart]"); + } + + getTimePeriod() { + return cy.get("[data-cy=data-pipelines-job-executions-time-period]"); + } + + // DataGrid + + getDataGrid() { + return cy.get("[data-cy=data-pipelines-job-executions-datagrid]", { + timeout: DataJobManageExecutionsPage.WAIT_SHORT_TASK, + }); + } + + getDataGridPopupFilter() { + return cy.get(".datagrid-filter.clr-popover-content"); + } + + getDataGridInputFilter() { + return this.getDataGridPopupFilter().should("exist").find("input"); + } + + getDataGridPopupFilterCloseBtn() { + return this.getDataGridPopupFilter().should("exist").find(".close"); + } + + getDataGridSpinner() { + return this.getDataGrid().should("exist").find(".datagrid-spinner"); + } + + // Header + + // status + getDataGridExecStatusHeader() { + return this.getDataGrid() + .should("exist") + .find("[data-cy=data-pipelines-job-executions-status-header]"); + } + + getDataGridExecStatusFilterOpenerBtn() { + return this.getDataGridExecStatusHeader() + .should("exist") + .find(".datagrid-filter-toggle"); + } + + getDataGridExecStatusFilters() { + return this.getDataGridPopupFilter() + .should("exist") + .find("[data-cy=data-pipelines-job-executions-status-filters]"); + } + + getDataGridExecStatusSortBtn() { + return this.getDataGridExecStatusHeader() + .should("exist") + .find(".datagrid-column-title"); + } + + /** + * ** Get status filter label + * + * @param {'succeeded'|'platform_error'|'user_error'|'running'|'submitted'|'skipped'|'cancelled'} status + * @return {Cypress.Chainable>} + */ + getDataGridExecStatusFilterLabel(status) { + return cy.get(`[data-cy=dp-job-executions-status-filter-label-${status}]`); + } + + /** + * ** Get status filter checkbox + * + * @param {'succeeded'|'platform_error'|'user_error'|'running'|'submitted'|'skipped'|'cancelled'} status + * @return {Cypress.Chainable>} + */ + getDataGridExecStatusFilterCheckbox(status) { + return cy.get( + `[data-cy=dp-job-executions-status-filter-checkbox-${status}]`, + ); + } + + getDataGridExecStatusFilterCheckboxesStatuses() { + return cy + .get("[data-cy=dp-job-executions-status-filter-checkbox] input") + .then(($checkboxes) => { + return cy.wrap( + Array.from($checkboxes).map((checkbox) => { + const key = checkbox.getAttribute("data-cy").split("-").pop(); + const value = checkbox.checked; + + return [key, value]; + }), + ); + }); + } + + // type + getDataGridExecTypeHeader() { + return this.getDataGrid() + .should("exist") + .find("[data-cy=data-pipelines-job-executions-type-header]"); + } + + getDataGridExecTypeFilterOpenerBtn() { + return this.getDataGridExecTypeHeader() + .should("exist") + .find(".datagrid-filter-toggle"); + } + + getDataGridExecTypeSortBtn() { + return this.getDataGridExecTypeHeader() + .should("exist") + .find(".datagrid-column-title"); + } + + /** + * ** Get type filter label + * + * @param {'manual'|'scheduled'} type + * @return {Cypress.Chainable>} + */ + getDataGridExecTypeFilterLabel(type) { + return cy.get(`[data-cy=dp-job-executions-type-filter-label-${type}]`); + } + + /** + * ** Get type filter checkbox + * + * @param {'manual'|'scheduled'} type + * @return {Cypress.Chainable>} + */ + getDataGridExecTypeFilterCheckbox(type) { + return cy.get(`[data-cy=dp-job-executions-type-filter-checkbox-${type}]`); + } + + getDataGridExecTypeFilterCheckboxesStatuses() { + return cy + .get("[data-cy=dp-job-executions-type-filter-checkbox] input") + .then(($checkboxes) => { + return cy.wrap( + Array.from($checkboxes).map((checkbox) => { + const key = checkbox.getAttribute("data-cy").split("-").pop(); + const value = checkbox.checked; + + return [key, value]; + }), + ); + }); + } + + // duration + getDataGridExecDurationHeader() { + return this.getDataGrid() + .should("exist") + .find("[data-cy=data-pipelines-job-executions-duration-header]"); + } + + getDataGridExecDurationFilterOpenerBtn() { + return this.getDataGridExecDurationHeader() + .should("exist") + .find(".datagrid-filter-toggle"); + } + + getDataGridExecDurationSortBtn() { + return this.getDataGridExecDurationHeader() + .should("exist") + .find(".datagrid-column-title"); + } + + // exec start + getDataGridExecStartHeader() { + return this.getDataGrid() + .should("exist") + .find("[data-cy=data-pipelines-job-executions-start-header]"); + } + + getDataGridExecStartFilterOpenerBtn() { + return this.getDataGridExecStartHeader() + .should("exist") + .find(".datagrid-filter-toggle"); + } + + getDataGridExecStartSortBtn() { + return this.getDataGridExecStartHeader() + .should("exist") + .find(".datagrid-column-title"); + } + + // exec end + getDataGridExecEndHeader() { + return this.getDataGrid() + .should("exist") + .find("[data-cy=data-pipelines-job-executions-end-header]"); + } + + getDataGridExecEndFilterOpenerBtn() { + return this.getDataGridExecEndHeader() + .should("exist") + .find(".datagrid-filter-toggle"); + } + + getDataGridExecEndSortBtn() { + return this.getDataGridExecEndHeader() + .should("exist") + .find(".datagrid-column-title"); + } + + // id + getDataGridExecIDHeader() { + return this.getDataGrid() + .should("exist") + .find("[data-cy=data-pipelines-job-executions-id-header]"); + } + + getDataGridExecIDFilterOpenerBtn() { + return this.getDataGridExecIDHeader() + .should("exist") + .find(".datagrid-filter-toggle"); + } + + getDataGridExecIDSortBtn() { + return this.getDataGridExecIDHeader() + .should("exist") + .find(".datagrid-column-title"); + } + + // version + getDataGridExecVersionHeader() { + return this.getDataGrid() + .should("exist") + .find("[data-cy=data-pipelines-job-executions-version-header]"); + } + + getDataGridExecVersionFilterOpenerBtn() { + return this.getDataGridExecVersionHeader() + .should("exist") + .find(".datagrid-filter-toggle"); + } + + getDataGridExecVersionSortBtn() { + return this.getDataGridExecVersionHeader() + .should("exist") + .find(".datagrid-column-title"); + } + + // Rows and Cells + + getDataGridRows() { + return this.getDataGrid().should("exist").find("clr-dg-row.datagrid-row"); + } + + getDataGridRow(rowIndex) { + return this.getDataGridRows() + .should("have.length.gte", rowIndex - 1) + .then((rows) => Array.from(rows)[rowIndex - 1]); + } + + getDataGridCells(rowIndex) { + return this.getDataGridRow(rowIndex) + .should("exist") + .find("clr-dg-cell.datagrid-cell"); + } + + getDataGridCellByIndex(rowIndex, cellIndex) { + if (rowIndex) { + return this.getDataGridCells(rowIndex) + .should("have.length.gte", cellIndex - 1) + .then((cells) => Array.from(cells)[cellIndex - 1]); + } + + return this.getDataGridRows() + .should("have.length.gte", 0) + .then(($rows) => { + return $rows.reduce((accumulator, row) => { + const _cells = Array.from( + row.querySelectorAll("clr-dg-cell.datagrid-cell"), + ); + + if (_cells[cellIndex - 1]) { + accumulator.push(_cells[cellIndex - 1]); + } + + return accumulator; + }, []); + }); + } + + getDataGridCellByIdentifier(rowIndex, identifier) { + return this.getDataGridRow(rowIndex).should("exist").find(identifier); + } + + getDataGridCellsByIdentifier(identifier) { + return this.getDataGrid().should("exist").find(identifier); + } + + // type + getDataGridExecTypeCell(rowIndex) { + return this.getDataGridCellByIdentifier( + rowIndex, + "[data-cy=data-pipelines-job-executions-type-cell]", + ); + } + + /** + * ** Get containers in cells for given type. + * + * @param {'manual'|'scheduled'} type + * @return {Cypress.Chainable>} + */ + getDataGridExecTypeContainers(type) { + return this.getDataGrid() + .should("exist") + .then(($gridContainer) => { /** - * @type {DataJobManageExecutionsPage} + * @type {JQuery} */ - const page = super.navigateTo('manage', teamName, jobName, 'executions'); - page.waitForGridToLoad(null); - page.waitForViewToRenderShort(); - - return page; - } - - /** - * ** Navigate to Data Job executions page with provided URL. - * - * @param {string} url - * @return {DataJobManageExecutionsPage} - */ - static navigateToExecutionsWithUrl(url) { - const page = this.navigateToDataJobUrl(url, 3); - - page.waitForGridToLoad(null); - page.waitForViewToRenderShort(); - - return page; - } - - /* Utils */ - - /** - * ** Converts from view time to seconds. - * - * @example - * - * - val=1m 34s - * - val=45s - * - * @return {number} - */ - convertStringContentToSeconds(val) { - const params = val.trim().split(' '); - - if (params.length === 2) { - return parseInt(params[0].trim().replace(/m$/, ''), 10) * 60 + parseInt(params[1].trim().replace(/s$/, ''), 10); - } else { - return parseInt(params[0].trim().replace(/s$/, ''), 10); + const $containers = $gridContainer.find( + "[data-cy=data-pipelines-job-executions-type-container]", + ); + + return cy.wrap($containers.length === 0 ? [] : $containers); + }) + .then(($containers) => { + return cy.wrap( + Array.from($containers) + .map((container) => container.getAttribute("title").toLowerCase()) + .filter((title) => new RegExp(`^${type}`).test(title)), + ); + }); + } + + // getDataGridExecStatusFilterCheckboxesStatuses() { + // return cy.get('[data-cy=dp-job-executions-status-filter-checkbox] input') + // .then(($checkboxes) => { + // return cy.wrap(Array.from($checkboxes).map((checkbox) => { + // const key = checkbox.getAttribute('data-cy').split('-').pop(); + // const value = checkbox.checked; + // + // return [key, value]; + // })); + // }); + // } + + // duration + getDataGridExecDurationCell(rowIndex) { + return this.getDataGridCellByIdentifier( + rowIndex, + "[data-cy=data-pipelines-job-executions-duration-cell]", + ); + } + + // exec start + getDataGridExecStartCell(rowIndex) { + return this.getDataGridCellByIdentifier( + rowIndex, + "[data-cy=data-pipelines-job-executions-start-cell]", + ); + } + + getDataGridExecStartCells() { + return this.getDataGridCellsByIdentifier( + "[data-cy=data-pipelines-job-executions-start-cell]", + ); + } + + generateExecStartFilterValue() { + return this.getDataGridExecStartCells().then(($cells) => { + const pmCells = Array.from($cells).map((cell) => + /PM$/.test(`${cell.innerText?.trim()}`), + ); + if (pmCells.length >= 2) { + return cy.wrap("PM"); + } + + const amCells = Array.from($cells).map((cell) => + /AM$/.test(`${cell.innerText?.trim()}`), + ); + if (amCells.length >= 2) { + return cy.wrap("AM"); + } + + throw new Error("Unhandled use case in test scenarios"); + }); + } + + // exec end + getDataGridExecEndCell(rowIndex) { + return this.getDataGridCellByIdentifier( + rowIndex, + "[data-cy=data-pipelines-job-executions-end-cell]", + ); + } + + getDataGridExecEndCells() { + return this.getDataGridCellsByIdentifier( + "[data-cy=data-pipelines-job-executions-end-cell]", + ); + } + + generateExecEndFilterValue() { + return this.getDataGridExecEndCells().then(($cells) => { + const pmCells = Array.from($cells).map((cell) => + /PM$/.test(`${cell.innerText?.trim()}`), + ); + + if (pmCells.length > 0) { + return cy.wrap("PM"); + } + + return cy.wrap("AM"); + }); + } + + // id + getDataGridExecIDCell(rowIndex) { + return this.getDataGridCellByIdentifier( + rowIndex, + "[data-cy=data-pipelines-job-executions-id-cell]", + ); + } + + getDataGridExecIDCells() { + return this.getDataGridCellsByIdentifier( + "[data-cy=data-pipelines-job-executions-id-cell]", + ); + } + + // exec version + getDataGridExecVersionCell(rowIndex) { + return this.getDataGridCellByIdentifier( + rowIndex, + "[data-cy=data-pipelines-job-executions-job-version-cell]", + ); + } + + getDataGridExecVersionCells() { + return this.getDataGridCellsByIdentifier( + "[data-cy=data-pipelines-job-executions-job-version-cell]", + ); + } + + // Pagination + + getDataGridPagination() { + return this.getDataGrid() + .should("exist") + .find("[data-cy=data-pipelines-job-executions-datagrid-pagination]"); + } + + /* Actions */ + + // General + + refreshExecData() { + this.getExecRefreshBtn().should("exist").click({ force: true }); + } + + // DataGrid + + typeToTextFilterInput(value) { + this.getDataGridInputFilter().should("exist").type(value); + + this.waitForViewToRender(); + } + + clearTextFilterInput() { + this.getDataGridInputFilter().should("exist").clear({ force: true }); + + this.waitForViewToRender(); + } + + closeFilter() { + this.getDataGridPopupFilterCloseBtn() + .should("exist") + .click({ force: true }); + + this.waitForViewToRenderShort(); + } + + // Header + + // status + /** + * ** Open status filter. + */ + openStatusFilter() { + this.getDataGridExecStatusFilterOpenerBtn() + .should("exist") + .click({ force: true }); + + this.waitForViewToRenderShort(); + } + + /** + * ** Choose filter by some status. + * + * @param {'succeeded'|'platform_error'|'user_error'|'running'|'submitted'|'skipped'|'cancelled'} status + */ + filterByStatus(status) { + this.getDataGridExecStatusFilterCheckbox(status) + .should("exist") + .as("checkbox") + .invoke("is", ":checked") + .then((checked) => { + if (!checked) { + this.getDataGridExecStatusFilterLabel(status) + .should("exist") + .click({ force: true }); } - } - - /* Selectors */ - - /** - * ** Wait until Data grid is loaded. - * - * @param {string} contextSelector - * @param {number} timeout - * @returns {Cypress.Chainable} - */ - waitForGridToLoad(contextSelector, timeout = DataJobsBasePO.WAIT_SHORT_TASK) { - return this._waitForGridToLoad('data-pipelines-data-job-executions', timeout); - } - - // General - - getExecRefreshBtn() { - return cy.get('[data-cy=data-pipelines-job-executions-refresh-btn'); - } - - getExecLoadingSpinner() { - return cy.get('[data-cy=data-pipelines-job-executions-loading-spinner]'); - } - - // Charts - - getStatusChart() { - return cy.get('[data-cy=data-pipelines-job-executions-status-chart]'); - } - - getDurationChart() { - return cy.get('[data-cy=data-pipelines-job-executions-duration-chart]'); - } - - getTimePeriod() { - return cy.get('[data-cy=data-pipelines-job-executions-time-period]'); - } - - // DataGrid - - getDataGrid() { - return cy.get('[data-cy=data-pipelines-job-executions-datagrid]', { - timeout: DataJobManageExecutionsPage.WAIT_SHORT_TASK - }); - } - - getDataGridPopupFilter() { - return cy.get('.datagrid-filter.clr-popover-content'); - } - - getDataGridInputFilter() { - return this.getDataGridPopupFilter().should('exist').find('input'); - } - - getDataGridPopupFilterCloseBtn() { - return this.getDataGridPopupFilter().should('exist').find('.close'); - } - - getDataGridSpinner() { - return this.getDataGrid().should('exist').find('.datagrid-spinner'); - } - - // Header - - // status - getDataGridExecStatusHeader() { - return this.getDataGrid().should('exist').find('[data-cy=data-pipelines-job-executions-status-header]'); - } - - getDataGridExecStatusFilterOpenerBtn() { - return this.getDataGridExecStatusHeader().should('exist').find('.datagrid-filter-toggle'); - } - - getDataGridExecStatusFilters() { - return this.getDataGridPopupFilter().should('exist').find('[data-cy=data-pipelines-job-executions-status-filters]'); - } - - getDataGridExecStatusSortBtn() { - return this.getDataGridExecStatusHeader().should('exist').find('.datagrid-column-title'); - } - - /** - * ** Get status filter label - * - * @param {'succeeded'|'platform_error'|'user_error'|'running'|'submitted'|'skipped'|'cancelled'} status - * @return {Cypress.Chainable>} - */ - getDataGridExecStatusFilterLabel(status) { - return cy.get(`[data-cy=dp-job-executions-status-filter-label-${status}]`); - } - - /** - * ** Get status filter checkbox - * - * @param {'succeeded'|'platform_error'|'user_error'|'running'|'submitted'|'skipped'|'cancelled'} status - * @return {Cypress.Chainable>} - */ - getDataGridExecStatusFilterCheckbox(status) { - return cy.get(`[data-cy=dp-job-executions-status-filter-checkbox-${status}]`); - } - - getDataGridExecStatusFilterCheckboxesStatuses() { - return cy.get('[data-cy=dp-job-executions-status-filter-checkbox] input').then(($checkboxes) => { - return cy.wrap( - Array.from($checkboxes).map((checkbox) => { - const key = checkbox.getAttribute('data-cy').split('-').pop(); - const value = checkbox.checked; - - return [key, value]; - }) - ); - }); - } - - // type - getDataGridExecTypeHeader() { - return this.getDataGrid().should('exist').find('[data-cy=data-pipelines-job-executions-type-header]'); - } - - getDataGridExecTypeFilterOpenerBtn() { - return this.getDataGridExecTypeHeader().should('exist').find('.datagrid-filter-toggle'); - } - - getDataGridExecTypeSortBtn() { - return this.getDataGridExecTypeHeader().should('exist').find('.datagrid-column-title'); - } - - /** - * ** Get type filter label - * - * @param {'manual'|'scheduled'} type - * @return {Cypress.Chainable>} - */ - getDataGridExecTypeFilterLabel(type) { - return cy.get(`[data-cy=dp-job-executions-type-filter-label-${type}]`); - } - - /** - * ** Get type filter checkbox - * - * @param {'manual'|'scheduled'} type - * @return {Cypress.Chainable>} - */ - getDataGridExecTypeFilterCheckbox(type) { - return cy.get(`[data-cy=dp-job-executions-type-filter-checkbox-${type}]`); - } - - getDataGridExecTypeFilterCheckboxesStatuses() { - return cy.get('[data-cy=dp-job-executions-type-filter-checkbox] input').then(($checkboxes) => { - return cy.wrap( - Array.from($checkboxes).map((checkbox) => { - const key = checkbox.getAttribute('data-cy').split('-').pop(); - const value = checkbox.checked; - - return [key, value]; - }) - ); - }); - } - - // duration - getDataGridExecDurationHeader() { - return this.getDataGrid().should('exist').find('[data-cy=data-pipelines-job-executions-duration-header]'); - } - - getDataGridExecDurationFilterOpenerBtn() { - return this.getDataGridExecDurationHeader().should('exist').find('.datagrid-filter-toggle'); - } - - getDataGridExecDurationSortBtn() { - return this.getDataGridExecDurationHeader().should('exist').find('.datagrid-column-title'); - } - - // exec start - getDataGridExecStartHeader() { - return this.getDataGrid().should('exist').find('[data-cy=data-pipelines-job-executions-start-header]'); - } - - getDataGridExecStartFilterOpenerBtn() { - return this.getDataGridExecStartHeader().should('exist').find('.datagrid-filter-toggle'); - } - - getDataGridExecStartSortBtn() { - return this.getDataGridExecStartHeader().should('exist').find('.datagrid-column-title'); - } - - // exec end - getDataGridExecEndHeader() { - return this.getDataGrid().should('exist').find('[data-cy=data-pipelines-job-executions-end-header]'); - } - - getDataGridExecEndFilterOpenerBtn() { - return this.getDataGridExecEndHeader().should('exist').find('.datagrid-filter-toggle'); - } - - getDataGridExecEndSortBtn() { - return this.getDataGridExecEndHeader().should('exist').find('.datagrid-column-title'); - } - - // id - getDataGridExecIDHeader() { - return this.getDataGrid().should('exist').find('[data-cy=data-pipelines-job-executions-id-header]'); - } - - getDataGridExecIDFilterOpenerBtn() { - return this.getDataGridExecIDHeader().should('exist').find('.datagrid-filter-toggle'); - } - - getDataGridExecIDSortBtn() { - return this.getDataGridExecIDHeader().should('exist').find('.datagrid-column-title'); - } - - // version - getDataGridExecVersionHeader() { - return this.getDataGrid().should('exist').find('[data-cy=data-pipelines-job-executions-version-header]'); - } - - getDataGridExecVersionFilterOpenerBtn() { - return this.getDataGridExecVersionHeader().should('exist').find('.datagrid-filter-toggle'); - } - - getDataGridExecVersionSortBtn() { - return this.getDataGridExecVersionHeader().should('exist').find('.datagrid-column-title'); - } - - // Rows and Cells - - getDataGridRows() { - return this.getDataGrid().should('exist').find('clr-dg-row.datagrid-row'); - } - - getDataGridRow(rowIndex) { - return this.getDataGridRows() - .should('have.length.gte', rowIndex - 1) - .then((rows) => Array.from(rows)[rowIndex - 1]); - } - - getDataGridCells(rowIndex) { - return this.getDataGridRow(rowIndex).should('exist').find('clr-dg-cell.datagrid-cell'); - } - - getDataGridCellByIndex(rowIndex, cellIndex) { - if (rowIndex) { - return this.getDataGridCells(rowIndex) - .should('have.length.gte', cellIndex - 1) - .then((cells) => Array.from(cells)[cellIndex - 1]); + }); + + this.waitForViewToRender(); + } + + /** + * ** Clear filter by some status. + * + * @param {'succeeded'|'platform_error'|'user_error'|'running'|'submitted'|'skipped'|'cancelled'} status + */ + clearFilterByStatus(status) { + this.getDataGridExecStatusFilterCheckbox(status) + .should("exist") + .as("checkbox") + .invoke("is", ":checked") + .then((checked) => { + if (checked) { + this.getDataGridExecStatusFilterLabel(status) + .should("exist") + .click({ force: true }); } + }); + + this.waitForViewToRender(); + } + + sortByExecStatus() { + this.getDataGridExecStatusSortBtn().should("exist").click({ force: true }); + + this.waitForViewToRender(); + } + + // type + openTypeFilter() { + this.getDataGridExecTypeFilterOpenerBtn() + .should("exist") + .click({ force: true }); + + this.waitForViewToRenderShort(); + } + + /** + * ** Choose filter by some type. + * + * @param {'manual'|'scheduled'} type + */ + filterByType(type) { + this.getDataGridExecTypeFilterCheckbox(type) + .should("exist") + .as("checkbox") + .invoke("is", ":checked") + .then((checked) => { + if (!checked) { + this.getDataGridExecTypeFilterLabel(type).click({ + force: true, + }); + } + }); + + this.waitForViewToRender(); + } + + /** + * ** Clear filter by some type. + * + * @param {'manual'|'scheduled'} type + */ + clearFilterByType(type) { + this.getDataGridExecTypeFilterCheckbox(type) + .should("exist") + .as("checkbox") + .invoke("is", ":checked") + .then((checked) => { + if (checked) { + this.getDataGridExecTypeFilterLabel(type) + .should("exist") + .click({ force: true }); + } + }); - return this.getDataGridRows() - .should('have.length.gte', 0) - .then(($rows) => { - return $rows.reduce((accumulator, row) => { - const _cells = Array.from(row.querySelectorAll('clr-dg-cell.datagrid-cell')); - - if (_cells[cellIndex - 1]) { - accumulator.push(_cells[cellIndex - 1]); - } - - return accumulator; - }, []); - }); - } - - getDataGridCellByIdentifier(rowIndex, identifier) { - return this.getDataGridRow(rowIndex).should('exist').find(identifier); - } - - getDataGridCellsByIdentifier(identifier) { - return this.getDataGrid().should('exist').find(identifier); - } - - // type - getDataGridExecTypeCell(rowIndex) { - return this.getDataGridCellByIdentifier(rowIndex, '[data-cy=data-pipelines-job-executions-type-cell]'); - } - - /** - * ** Get containers in cells for given type. - * - * @param {'manual'|'scheduled'} type - * @return {Cypress.Chainable>} - */ - getDataGridExecTypeContainers(type) { - return this.getDataGrid() - .should('exist') - .then(($gridContainer) => { - /** - * @type {JQuery} - */ - const $containers = $gridContainer.find('[data-cy=data-pipelines-job-executions-type-container]'); - - return cy.wrap($containers.length === 0 ? [] : $containers); - }) - .then(($containers) => { - return cy.wrap( - Array.from($containers) - .map((container) => container.getAttribute('title').toLowerCase()) - .filter((title) => new RegExp(`^${type}`).test(title)) - ); - }); - } - - // getDataGridExecStatusFilterCheckboxesStatuses() { - // return cy.get('[data-cy=dp-job-executions-status-filter-checkbox] input') - // .then(($checkboxes) => { - // return cy.wrap(Array.from($checkboxes).map((checkbox) => { - // const key = checkbox.getAttribute('data-cy').split('-').pop(); - // const value = checkbox.checked; - // - // return [key, value]; - // })); - // }); - // } - - // duration - getDataGridExecDurationCell(rowIndex) { - return this.getDataGridCellByIdentifier(rowIndex, '[data-cy=data-pipelines-job-executions-duration-cell]'); - } - - // exec start - getDataGridExecStartCell(rowIndex) { - return this.getDataGridCellByIdentifier(rowIndex, '[data-cy=data-pipelines-job-executions-start-cell]'); - } - - getDataGridExecStartCells() { - return this.getDataGridCellsByIdentifier('[data-cy=data-pipelines-job-executions-start-cell]'); - } - - generateExecStartFilterValue() { - return this.getDataGridExecStartCells().then(($cells) => { - const pmCells = Array.from($cells).map((cell) => /PM$/.test(`${cell.innerText?.trim()}`)); - if (pmCells.length >= 2) { - return cy.wrap('PM'); - } - - const amCells = Array.from($cells).map((cell) => /AM$/.test(`${cell.innerText?.trim()}`)); - if (amCells.length >= 2) { - return cy.wrap('AM'); - } - - throw new Error('Unhandled use case in test scenarios'); - }); - } - - // exec end - getDataGridExecEndCell(rowIndex) { - return this.getDataGridCellByIdentifier(rowIndex, '[data-cy=data-pipelines-job-executions-end-cell]'); - } - - getDataGridExecEndCells() { - return this.getDataGridCellsByIdentifier('[data-cy=data-pipelines-job-executions-end-cell]'); - } - - generateExecEndFilterValue() { - return this.getDataGridExecEndCells().then(($cells) => { - const pmCells = Array.from($cells).map((cell) => /PM$/.test(`${cell.innerText?.trim()}`)); - - if (pmCells.length > 0) { - return cy.wrap('PM'); - } - - return cy.wrap('AM'); - }); - } - - // id - getDataGridExecIDCell(rowIndex) { - return this.getDataGridCellByIdentifier(rowIndex, '[data-cy=data-pipelines-job-executions-id-cell]'); - } - - getDataGridExecIDCells() { - return this.getDataGridCellsByIdentifier('[data-cy=data-pipelines-job-executions-id-cell]'); - } - - // exec version - getDataGridExecVersionCell(rowIndex) { - return this.getDataGridCellByIdentifier(rowIndex, '[data-cy=data-pipelines-job-executions-job-version-cell]'); - } - - getDataGridExecVersionCells() { - return this.getDataGridCellsByIdentifier('[data-cy=data-pipelines-job-executions-job-version-cell]'); - } - - // Pagination - - getDataGridPagination() { - return this.getDataGrid().should('exist').find('[data-cy=data-pipelines-job-executions-datagrid-pagination]'); - } - - /* Actions */ - - // General - - refreshExecData() { - this.getExecRefreshBtn().should('exist').click({ force: true }); - } - - // DataGrid - - typeToTextFilterInput(value) { - this.getDataGridInputFilter().should('exist').type(value); - - this.waitForViewToRender(); - } - - clearTextFilterInput() { - this.getDataGridInputFilter().should('exist').clear({ force: true }); - - this.waitForViewToRender(); - } - - closeFilter() { - this.getDataGridPopupFilterCloseBtn().should('exist').click({ force: true }); - - this.waitForViewToRenderShort(); - } - - // Header - - // status - /** - * ** Open status filter. - */ - openStatusFilter() { - this.getDataGridExecStatusFilterOpenerBtn().should('exist').click({ force: true }); - - this.waitForViewToRenderShort(); - } - - /** - * ** Choose filter by some status. - * - * @param {'succeeded'|'platform_error'|'user_error'|'running'|'submitted'|'skipped'|'cancelled'} status - */ - filterByStatus(status) { - this.getDataGridExecStatusFilterCheckbox(status) - .should('exist') - .as('checkbox') - .invoke('is', ':checked') - .then((checked) => { - if (!checked) { - this.getDataGridExecStatusFilterLabel(status).should('exist').click({ force: true }); - } - }); - - this.waitForViewToRender(); - } - - /** - * ** Clear filter by some status. - * - * @param {'succeeded'|'platform_error'|'user_error'|'running'|'submitted'|'skipped'|'cancelled'} status - */ - clearFilterByStatus(status) { - this.getDataGridExecStatusFilterCheckbox(status) - .should('exist') - .as('checkbox') - .invoke('is', ':checked') - .then((checked) => { - if (checked) { - this.getDataGridExecStatusFilterLabel(status).should('exist').click({ force: true }); - } - }); - - this.waitForViewToRender(); - } - - sortByExecStatus() { - this.getDataGridExecStatusSortBtn().should('exist').click({ force: true }); + this.waitForViewToRender(); + } - this.waitForViewToRender(); - } + sortByExecType() { + this.getDataGridExecTypeSortBtn().should("exist").click({ force: true }); - // type - openTypeFilter() { - this.getDataGridExecTypeFilterOpenerBtn().should('exist').click({ force: true }); + this.waitForViewToRender(); + } - this.waitForViewToRenderShort(); - } + // duration + openDurationFilter() { + this.getDataGridExecDurationFilterOpenerBtn() + .should("exist") + .click({ force: true }); - /** - * ** Choose filter by some type. - * - * @param {'manual'|'scheduled'} type - */ - filterByType(type) { - this.getDataGridExecTypeFilterCheckbox(type) - .should('exist') - .as('checkbox') - .invoke('is', ':checked') - .then((checked) => { - if (!checked) { - this.getDataGridExecTypeFilterLabel(type).click({ - force: true - }); - } - }); - - this.waitForViewToRender(); - } + this.waitForViewToRenderShort(); + } - /** - * ** Clear filter by some type. - * - * @param {'manual'|'scheduled'} type - */ - clearFilterByType(type) { - this.getDataGridExecTypeFilterCheckbox(type) - .should('exist') - .as('checkbox') - .invoke('is', ':checked') - .then((checked) => { - if (checked) { - this.getDataGridExecTypeFilterLabel(type).should('exist').click({ force: true }); - } - }); - - this.waitForViewToRender(); - } + sortByExecDuration() { + this.getDataGridExecDurationSortBtn() + .should("exist") + .click({ force: true }); - sortByExecType() { - this.getDataGridExecTypeSortBtn().should('exist').click({ force: true }); + this.waitForViewToRender(); + } - this.waitForViewToRender(); - } + // exec start + openExecStartFilter() { + this.getDataGridExecStartFilterOpenerBtn() + .should("exist") + .click({ force: true }); - // duration - openDurationFilter() { - this.getDataGridExecDurationFilterOpenerBtn().should('exist').click({ force: true }); + this.waitForViewToRenderShort(); + } - this.waitForViewToRenderShort(); - } + sortByExecStart() { + this.getDataGridExecStartSortBtn().should("exist").click({ force: true }); - sortByExecDuration() { - this.getDataGridExecDurationSortBtn().should('exist').click({ force: true }); + this.waitForViewToRender(); + } - this.waitForViewToRender(); - } + // exec end + openExecEndFilter() { + this.getDataGridExecEndFilterOpenerBtn() + .should("exist") + .click({ force: true }); - // exec start - openExecStartFilter() { - this.getDataGridExecStartFilterOpenerBtn().should('exist').click({ force: true }); + this.waitForViewToRenderShort(); + } - this.waitForViewToRenderShort(); - } + sortByExecEnd() { + this.getDataGridExecEndSortBtn().should("exist").click({ force: true }); - sortByExecStart() { - this.getDataGridExecStartSortBtn().should('exist').click({ force: true }); + this.waitForViewToRender(); + } - this.waitForViewToRender(); - } + // id + openIDFilter() { + this.getDataGridExecIDFilterOpenerBtn() + .should("exist") + .click({ force: true }); - // exec end - openExecEndFilter() { - this.getDataGridExecEndFilterOpenerBtn().should('exist').click({ force: true }); + this.waitForViewToRenderShort(); + } - this.waitForViewToRenderShort(); - } + sortByExecID() { + this.getDataGridExecIDSortBtn().should("exist").click({ force: true }); - sortByExecEnd() { - this.getDataGridExecEndSortBtn().should('exist').click({ force: true }); + this.waitForViewToRender(); + } - this.waitForViewToRender(); - } + // version + openVersionFilter() { + this.getDataGridExecVersionFilterOpenerBtn() + .should("exist") + .click({ force: true }); - // id - openIDFilter() { - this.getDataGridExecIDFilterOpenerBtn().should('exist').click({ force: true }); + this.waitForViewToRenderShort(); + } - this.waitForViewToRenderShort(); - } - - sortByExecID() { - this.getDataGridExecIDSortBtn().should('exist').click({ force: true }); + sortByExecVersion() { + this.getDataGridExecVersionSortBtn().should("exist").click({ force: true }); - this.waitForViewToRender(); - } - - // version - openVersionFilter() { - this.getDataGridExecVersionFilterOpenerBtn().should('exist').click({ force: true }); - - this.waitForViewToRenderShort(); - } - - sortByExecVersion() { - this.getDataGridExecVersionSortBtn().should('exist').click({ force: true }); - - this.waitForViewToRender(); - } + this.waitForViewToRender(); + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/karma.conf.js b/projects/frontend/data-pipelines/gui/projects/data-pipelines/karma.conf.js index 08e60c0f94..79730abe8a 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/karma.conf.js +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/karma.conf.js @@ -7,55 +7,68 @@ // https://karma-runner.github.io/1.0/config/configuration-file.html module.exports = function (config) { - config.set({ - basePath: '', - frameworks: ['jasmine', '@angular-devkit/build-angular'], - plugins: [require('karma-jasmine'), require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), require('karma-junit-reporter'), require('karma-coverage'), require('@angular-devkit/build-angular/plugins/karma')], - client: { - jasmine: { - // you can add configuration options for Jasmine here - // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html - // for example, you can disable the random execution with `random: false` - // or set a specific seed with `seed: 4321` - }, - clearContext: false // leave Jasmine Spec Runner output visible in browser + config.set({ + basePath: "", + frameworks: ["jasmine", "@angular-devkit/build-angular"], + plugins: [ + require("karma-jasmine"), + require("karma-chrome-launcher"), + require("karma-jasmine-html-reporter"), + require("karma-junit-reporter"), + require("karma-coverage"), + require("@angular-devkit/build-angular/plugins/karma"), + ], + client: { + jasmine: { + // you can add configuration options for Jasmine here + // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html + // for example, you can disable the random execution with `random: false` + // or set a specific seed with `seed: 4321` + }, + clearContext: false, // leave Jasmine Spec Runner output visible in browser + }, + jasmineHtmlReporter: { + suppressAll: true, // removes the duplicated traces + }, + coverageReporter: { + dir: require("path").join( + __dirname, + "../../reports/coverage/data-pipelines-lib", + ), + subdir: ".", + reporters: [ + //Code coverage - output in HTML file and Console(to be parsed in the CI/CD badge) + { type: "html" }, + { type: "text-summary" }, + { type: "lcovonly" }, + ], + check: { + global: { + lines: 80, }, - jasmineHtmlReporter: { - suppressAll: true // removes the duplicated traces - }, - coverageReporter: { - dir: require('path').join(__dirname, '../../reports/coverage/data-pipelines-lib'), - subdir: '.', - reporters: [ - //Code coverage - output in HTML file and Console(to be parsed in the CI/CD badge) - { type: 'html' }, - { type: 'text-summary' }, - { type: 'lcovonly' } - ], - check: { - global: { - lines: 80 - } - } - }, - reporters: ['progress', 'junit', 'coverage'], - junitReporter: { - outputDir: require('path').join(__dirname, '../../reports/test-results/data-pipelines-lib'), - outputFile: 'unit-tests.xml', - useBrowserName: false - }, - port: 9876, - colors: true, - logLevel: config.LOG_INFO, - autoWatch: true, - browsers: ['ChromeHeadless'], - customLaunchers: { - ChromeHeadless_No_Sandbox: { - base: 'ChromeHeadless', - flags: ['--no-sandbox'] - } - }, - singleRun: false, - restartOnFileChange: true - }); + }, + }, + reporters: ["progress", "junit", "coverage"], + junitReporter: { + outputDir: require("path").join( + __dirname, + "../../reports/test-results/data-pipelines-lib", + ), + outputFile: "unit-tests.xml", + useBrowserName: false, + }, + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: true, + browsers: ["ChromeHeadless"], + customLaunchers: { + ChromeHeadless_No_Sandbox: { + base: "ChromeHeadless", + flags: ["--no-sandbox"], + }, + }, + singleRun: false, + restartOnFileChange: true, + }); }; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/commons/filters-manager/filters-sort-manager.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/commons/filters-manager/filters-sort-manager.spec.ts index 6992df9056..92b1929911 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/commons/filters-manager/filters-sort-manager.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/commons/filters-manager/filters-sort-manager.spec.ts @@ -3,1836 +3,2221 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { fakeAsync, tick } from '@angular/core/testing'; - -import { CallFake, URLStateManager } from '@versatiledatakit/shared'; - -import { FILTER_KEY, FiltersSortManager, KeyValueTuple, SORT_KEY } from './filters-sort-manager'; - -const FILTER_CRITERIA_F1 = 'c1'; -const FILTER_CRITERIA_F2 = 'c2'; -const FILTER_CRITERIA_F3 = 'c3'; -const FILTER_CRITERIA_F4 = 'c4'; -const FILTER_CRITERIA_F5 = 'c5'; +import { fakeAsync, tick } from "@angular/core/testing"; + +import { CallFake, URLStateManager } from "@versatiledatakit/shared"; + +import { + FILTER_KEY, + FiltersSortManager, + KeyValueTuple, + SORT_KEY, +} from "./filters-sort-manager"; + +const FILTER_CRITERIA_F1 = "c1"; +const FILTER_CRITERIA_F2 = "c2"; +const FILTER_CRITERIA_F3 = "c3"; +const FILTER_CRITERIA_F4 = "c4"; +const FILTER_CRITERIA_F5 = "c5"; type FILTER_CRITERIA_UNION = - | typeof FILTER_CRITERIA_F1 - | typeof FILTER_CRITERIA_F2 - | typeof FILTER_CRITERIA_F3 - | typeof FILTER_CRITERIA_F4 - | typeof FILTER_CRITERIA_F5; - -const SORT_CRITERIA_S1 = 'c1'; -const SORT_CRITERIA_S2 = 'c2'; -const SORT_CRITERIA_S3 = 'c3'; -const SORT_CRITERIA_S4 = 'c4'; -type SORT_CRITERIA_UNION = typeof SORT_CRITERIA_S1 | typeof SORT_CRITERIA_S2 | typeof SORT_CRITERIA_S3 | typeof SORT_CRITERIA_S4; + | typeof FILTER_CRITERIA_F1 + | typeof FILTER_CRITERIA_F2 + | typeof FILTER_CRITERIA_F3 + | typeof FILTER_CRITERIA_F4 + | typeof FILTER_CRITERIA_F5; + +const SORT_CRITERIA_S1 = "c1"; +const SORT_CRITERIA_S2 = "c2"; +const SORT_CRITERIA_S3 = "c3"; +const SORT_CRITERIA_S4 = "c4"; +type SORT_CRITERIA_UNION = + | typeof SORT_CRITERIA_S1 + | typeof SORT_CRITERIA_S2 + | typeof SORT_CRITERIA_S3 + | typeof SORT_CRITERIA_S4; const KNOWN_FILTER_CRITERIA: FILTER_CRITERIA_UNION[] = [ - FILTER_CRITERIA_F1, - FILTER_CRITERIA_F2, - FILTER_CRITERIA_F3, - FILTER_CRITERIA_F4, - FILTER_CRITERIA_F5 + FILTER_CRITERIA_F1, + FILTER_CRITERIA_F2, + FILTER_CRITERIA_F3, + FILTER_CRITERIA_F4, + FILTER_CRITERIA_F5, ]; -const KNOWN_SORT_CRITERIA: SORT_CRITERIA_UNION[] = [SORT_CRITERIA_S1, SORT_CRITERIA_S2, SORT_CRITERIA_S3, SORT_CRITERIA_S4]; +const KNOWN_SORT_CRITERIA: SORT_CRITERIA_UNION[] = [ + SORT_CRITERIA_S1, + SORT_CRITERIA_S2, + SORT_CRITERIA_S3, + SORT_CRITERIA_S4, +]; class MutationObserver { - observer(_changes: Array>): void { - // No-op. - } + observer( + _changes: Array< + KeyValueTuple + >, + ): void { + // No-op. + } } -describe('FiltersSortManager', () => { - let urlStateManagerStub: jasmine.SpyObj; +describe("FiltersSortManager", () => { + let urlStateManagerStub: jasmine.SpyObj; + + beforeEach(() => { + urlStateManagerStub = jasmine.createSpyObj( + "urlStateManagerStub", + [ + "changeBaseUrl", + "locationToURL", + "replaceToUrl", + "navigateToUrl", + "setQueryParam", + ], + ); + }); + + it("should verify instance is created", () => { + // When + const instance = new FiltersSortManager< + FILTER_CRITERIA_UNION, + string, + SORT_CRITERIA_UNION, + string + >(urlStateManagerStub, KNOWN_FILTER_CRITERIA, KNOWN_SORT_CRITERIA); + + // Then + expect(instance).toBeDefined(); + }); + + describe("Properties::", () => { + let manager: FiltersSortManager< + FILTER_CRITERIA_UNION, + string, + SORT_CRITERIA_UNION, + string + >; beforeEach(() => { - urlStateManagerStub = jasmine.createSpyObj('urlStateManagerStub', [ - 'changeBaseUrl', - 'locationToURL', - 'replaceToUrl', - 'navigateToUrl', - 'setQueryParam' + manager = new FiltersSortManager( + urlStateManagerStub, + KNOWN_FILTER_CRITERIA, + KNOWN_SORT_CRITERIA, + ); + }); + + describe("|filterCriteria|", () => { + it("should verify default value is empty object", () => { + // Then + expect(manager.filterCriteria).toEqual( + {} as Record, + ); + }); + }); + + describe("|sortCriteria|", () => { + it("should verify default value is empty object", () => { + // Then + expect(manager.sortCriteria).toEqual( + {} as Record, + ); + }); + }); + }); + + describe("Methods::", () => { + let manager: FiltersSortManager< + FILTER_CRITERIA_UNION, + string, + SORT_CRITERIA_UNION, + string + >; + + beforeEach(() => { + manager = new FiltersSortManager( + urlStateManagerStub, + KNOWN_FILTER_CRITERIA, + KNOWN_SORT_CRITERIA, + ); + }); + + describe("|hasFilter|", () => { + it("should verify will return false when there is not such filter criteria", () => { + // Given + manager.filterCriteria[FILTER_CRITERIA_F1] = "f1v"; + manager.filterCriteria[FILTER_CRITERIA_F2] = "f2v"; + + // Then 1 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F1]: "f1v", + [FILTER_CRITERIA_F2]: "f2v", + } as Record); + + // When/Then 2 + expect(manager.hasFilter(FILTER_CRITERIA_F1)).toBeTrue(); + expect(manager.hasFilter(FILTER_CRITERIA_F2)).toBeTrue(); + expect(manager.hasFilter(FILTER_CRITERIA_F3)).toBeFalse(); + expect(manager.hasFilter(FILTER_CRITERIA_F4)).toBeFalse(); + expect(manager.hasFilter(FILTER_CRITERIA_F5)).toBeFalse(); + }); + + it(`should verify will return false when there is such filter criteria but it's value is Nil`, () => { + // Given + manager.filterCriteria[FILTER_CRITERIA_F1] = "f1v"; + manager.filterCriteria[FILTER_CRITERIA_F3] = null; + manager.filterCriteria[FILTER_CRITERIA_F5] = undefined; + + // Then 1 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F1]: "f1v", + [FILTER_CRITERIA_F3]: null, + [FILTER_CRITERIA_F5]: undefined, + } as Record); + + // When/Then 2 + expect(manager.hasFilter(FILTER_CRITERIA_F1)).toBeTrue(); + expect(manager.hasFilter(FILTER_CRITERIA_F2)).toBeFalse(); + expect(manager.hasFilter(FILTER_CRITERIA_F3)).toBeFalse(); + expect(manager.hasFilter(FILTER_CRITERIA_F4)).toBeFalse(); + expect(manager.hasFilter(FILTER_CRITERIA_F5)).toBeFalse(); + }); + + it(`should verify will return true when there is such filter criteria and it's value is not Nil`, () => { + // Given + manager.filterCriteria[FILTER_CRITERIA_F2] = "f2v"; + manager.filterCriteria[FILTER_CRITERIA_F3] = "f3v"; + + // Then 1 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F2]: "f2v", + [FILTER_CRITERIA_F3]: "f3v", + } as Record); + + // When/Then 2 + expect(manager.hasFilter(FILTER_CRITERIA_F1)).toBeFalse(); + expect(manager.hasFilter(FILTER_CRITERIA_F2)).toBeTrue(); + expect(manager.hasFilter(FILTER_CRITERIA_F3)).toBeTrue(); + expect(manager.hasFilter(FILTER_CRITERIA_F4)).toBeFalse(); + expect(manager.hasFilter(FILTER_CRITERIA_F5)).toBeFalse(); + }); + }); + + describe("|hasAnyFilter|", () => { + it("should verify will return false when there is no filter criteria set", () => { + // Then 1 + expect(manager.filterCriteria).toEqual( + {} as Record, + ); + + // Then 2 + expect(manager.hasAnyFilter()).toBeFalse(); + }); + + it(`should verify will return false when there are two filter criteria but their value is Nil`, () => { + // Given + manager.filterCriteria[FILTER_CRITERIA_F2] = null; + manager.filterCriteria[FILTER_CRITERIA_F4] = undefined; + + // Then 1 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F2]: null, + [FILTER_CRITERIA_F4]: undefined, + } as Record); + + // When/Then 2 + expect(manager.hasAnyFilter()).toBeFalse(); + }); + + it(`should verify will return true when there is at least one filter criteria which value is not Nil`, () => { + // Given + manager.filterCriteria[FILTER_CRITERIA_F1] = null; + manager.filterCriteria[FILTER_CRITERIA_F2] = undefined; + manager.filterCriteria[FILTER_CRITERIA_F4] = "f4v"; + manager.filterCriteria[FILTER_CRITERIA_F5] = "f5v"; + + // Then 1 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F1]: null, + [FILTER_CRITERIA_F2]: undefined, + [FILTER_CRITERIA_F4]: "f4v", + [FILTER_CRITERIA_F5]: "f5v", + } as Record); + + // When/Then 2 + expect(manager.hasAnyFilter()).toBeTrue(); + }); + }); + + describe("|setFilter|", () => { + it(`should verify won't set filter if it exist and new value is same like stored one`, () => { + // Given + const filterValue1 = "f1v"; + const mutationObserver = new MutationObserver(); + const observerSpy = spyOn( + mutationObserver, + "observer", + ).and.callThrough(); + + // prerequisites manager should have + manager.filterCriteria[FILTER_CRITERIA_F1] = filterValue1; + manager.registerMutationObserver(mutationObserver.observer); + + // Then 1 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F1]: filterValue1, + } as Record); + + // When + manager.setFilter(FILTER_CRITERIA_F1, filterValue1); + + // Then 2 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F1]: filterValue1, + } as Record); + expect(urlStateManagerStub.setQueryParam).not.toHaveBeenCalled(); + expect(observerSpy).not.toHaveBeenCalled(); + + expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); + expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); + expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); + }); + + it(`should verify will set filter if doesn't exist in manager, serialize to URLStateManager, update URL by default and notify mutation observers`, fakeAsync(() => { + // Given + const filterValue1 = "f1v"; + const filterValue2 = "f2v"; + + // prerequisites manager should have + manager.filterCriteria[FILTER_CRITERIA_F2] = filterValue2; + + // Then 1 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F2]: filterValue2, + } as Record); + + // When + manager.setFilter(FILTER_CRITERIA_F1, filterValue1); + + // wait virtually 1s because navigation is debounced for 300ms by default + tick(1000); + + // Then 2 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F1]: filterValue1, + [FILTER_CRITERIA_F2]: filterValue2, + } as Record); + expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith( + FILTER_KEY, + JSON.stringify({ + [FILTER_CRITERIA_F2]: filterValue2, + [FILTER_CRITERIA_F1]: filterValue1, + }), + ); + + expect(urlStateManagerStub.locationToURL).toHaveBeenCalledTimes(1); + expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); + expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); + })); + + it(`should verify will delete filter if exist in manager because provided value is Nil, serialize to URLStateManager, update URL by default and notify mutation observers`, fakeAsync(() => { + // Given + const filterValue3 = "f3v"; + const filterValue4 = "f4v"; + const mutationObserver = new MutationObserver(); + const observerSpy = spyOn( + mutationObserver, + "observer", + ).and.callThrough(); + + // prerequisites manager should have + manager.filterCriteria[FILTER_CRITERIA_F3] = filterValue3; + manager.filterCriteria[FILTER_CRITERIA_F4] = filterValue4; + manager.changeUpdateStrategy("replaceToURL"); + manager.registerMutationObserver(mutationObserver.observer); + + // Then 1 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F3]: filterValue3, + [FILTER_CRITERIA_F4]: filterValue4, + } as Record); + + // When + manager.setFilter(FILTER_CRITERIA_F3, null); + + // wait virtually 1s because navigation is debounced for 300ms by default + tick(1000); + + // Then 2 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F4]: filterValue4, + } as Record); + expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith( + FILTER_KEY, + JSON.stringify({ [FILTER_CRITERIA_F4]: filterValue4 }), + ); + expect(observerSpy).toHaveBeenCalledWith([ + [FILTER_CRITERIA_F3, null, "filter"], + ]); + + expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); + expect(urlStateManagerStub.replaceToUrl).toHaveBeenCalledTimes(1); + expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); + })); + + it(`should verify will delete filters multiple times and update URL by default only once`, fakeAsync(() => { + // Given + const filterValue3 = "f3v"; + const filterValue4 = "f4v"; + const mutationObserver = new MutationObserver(); + const observerSpy = spyOn( + mutationObserver, + "observer", + ).and.callThrough(); + + urlStateManagerStub.navigateToUrl.and.resolveTo(true); + + // prerequisites manager should have + manager.filterCriteria[FILTER_CRITERIA_F3] = filterValue3; + manager.filterCriteria[FILTER_CRITERIA_F4] = filterValue4; + manager.changeUpdateStrategy("navigateToUrl"); + manager.registerMutationObserver(mutationObserver.observer); + + // Then 1 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F3]: filterValue3, + [FILTER_CRITERIA_F4]: filterValue4, + } as Record); + + // When + manager.setFilter(FILTER_CRITERIA_F3, null); + manager.setFilter(FILTER_CRITERIA_F4, null); + + // wait virtually 1s because navigation is debounced for 300ms by default + tick(1000); + + // Then 2 + expect(manager.filterCriteria).toEqual( + {} as Record, + ); + expect(urlStateManagerStub.setQueryParam.calls.argsFor(0)).toEqual([ + FILTER_KEY, + JSON.stringify({ [FILTER_CRITERIA_F4]: filterValue4 }), + ]); + expect(urlStateManagerStub.setQueryParam.calls.argsFor(1)).toEqual([ + FILTER_KEY, + null, + ]); + expect(observerSpy.calls.argsFor(0)).toEqual([ + [[FILTER_CRITERIA_F3, null, "filter"]], ]); + expect(observerSpy.calls.argsFor(1)).toEqual([ + [[FILTER_CRITERIA_F4, null, "filter"]], + ]); + + expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); + expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); + expect(urlStateManagerStub.navigateToUrl).toHaveBeenCalledTimes(1); + })); + + it(`should verify won't update URL if updateBrowserUrl parameter is false`, fakeAsync(() => { + // Given + const filterValue4 = "f4v"; + const filterValue5 = "f5v"; + const mutationObserver1 = new MutationObserver(); + const mutationObserver2 = new MutationObserver(); + const observerError = new Error("observer throws error"); + const observerSpy1 = spyOn( + mutationObserver1, + "observer", + ).and.throwError(observerError); + const observerSpy2 = spyOn( + mutationObserver2, + "observer", + ).and.callThrough(); + const consoleErrorSpy = spyOn(console, "error").and.callFake(CallFake); + + // prerequisites manager should have + manager.filterCriteria[FILTER_CRITERIA_F4] = filterValue4; + manager.registerMutationObserver(mutationObserver1.observer); + manager.registerMutationObserver(mutationObserver2.observer); + + // Then 1 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F4]: filterValue4, + } as Record); + + // When + manager.setFilter(FILTER_CRITERIA_F5, filterValue5, false); + + // wait virtually 1s because navigation is debounced for 300ms by default + tick(1000); + + // Then 2 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F4]: filterValue4, + [FILTER_CRITERIA_F5]: filterValue5, + } as Record); + expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith( + FILTER_KEY, + JSON.stringify({ + [FILTER_CRITERIA_F4]: filterValue4, + [FILTER_CRITERIA_F5]: filterValue5, + }), + ); + expect(observerSpy1).toHaveBeenCalledWith([ + [FILTER_CRITERIA_F5, filterValue5, "filter"], + ]); + expect(observerSpy2).toHaveBeenCalledWith([ + [FILTER_CRITERIA_F5, filterValue5, "filter"], + ]); + + expect(consoleErrorSpy).toHaveBeenCalledWith( + "FiltersManager: Failed to notify mutation observers", + observerError, + ); + + expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); + expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); + expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); + })); + + it(`should verify will log error if update URL with navigateToUrl strategy fails`, fakeAsync(() => { + // Given + const filterValue3 = "f3v"; + const navigateToUrlError = new Error("urlUpdateManager throws error"); + const consoleErrorSpy = spyOn(console, "error").and.callFake(CallFake); + + urlStateManagerStub.navigateToUrl.and.rejectWith(navigateToUrlError); + + // prerequisites manager should have + manager.changeUpdateStrategy("navigateToUrl"); + + // Then 1 + expect(manager.filterCriteria).toEqual( + {} as Record, + ); + + // When + manager.setFilter(FILTER_CRITERIA_F3, filterValue3, true); + + // wait virtually 1s because navigation is debounced for 300ms by default + tick(1000); + + // Then 2 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F3]: filterValue3, + } as Record); + expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith( + FILTER_KEY, + JSON.stringify({ [FILTER_CRITERIA_F3]: filterValue3 }), + ); + + expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); + expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); + expect(urlStateManagerStub.navigateToUrl).toHaveBeenCalledTimes(1); + + expect(consoleErrorSpy).toHaveBeenCalledWith( + "FiltersManager: Failed to update Browser Url", + navigateToUrlError, + ); + })); }); - it('should verify instance is created', () => { + describe("|deleteFilter|", () => { + it(`should verify won't delete filter if it doesn't exist`, () => { + // Given + const filterValue4 = "f4v"; + const mutationObserver = new MutationObserver(); + const observerSpy = spyOn( + mutationObserver, + "observer", + ).and.callThrough(); + + // prerequisites manager should have + manager.filterCriteria[FILTER_CRITERIA_F4] = filterValue4; + manager.registerMutationObserver(mutationObserver.observer); + + // Then 1 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F4]: filterValue4, + } as Record); + // When - const instance = new FiltersSortManager( - urlStateManagerStub, - KNOWN_FILTER_CRITERIA, - KNOWN_SORT_CRITERIA + const returnedValue = manager.deleteFilter(FILTER_CRITERIA_F2); + + // Then 2 + expect(returnedValue).toBeFalse(); + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F4]: filterValue4, + } as Record); + + expect(urlStateManagerStub.setQueryParam).not.toHaveBeenCalled(); + expect(observerSpy).not.toHaveBeenCalled(); + + expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); + expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); + expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); + }); + + it(`should verify will delete filter if it exist in manager, serialize to URLStateManager, update URL by default and notify mutation observers`, fakeAsync(() => { + // Given + const filterValue1 = "f1v"; + const filterValue2 = "f2v"; + const mutationObserver = new MutationObserver(); + const observerSpy = spyOn( + mutationObserver, + "observer", + ).and.callThrough(); + + // prerequisites manager should have + manager.filterCriteria[FILTER_CRITERIA_F1] = filterValue1; + manager.filterCriteria[FILTER_CRITERIA_F2] = filterValue2; + manager.registerMutationObserver(mutationObserver.observer); + + // Then 1 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F1]: filterValue1, + [FILTER_CRITERIA_F2]: filterValue2, + } as Record); + + // When + const returnedValue = manager.deleteFilter(FILTER_CRITERIA_F1); + + // wait virtually 1s because navigation is debounced for 300ms by default + tick(1000); + + // Then 2 + expect(returnedValue).toBeTrue(); + + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F2]: filterValue2, + } as Record); + expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith( + FILTER_KEY, + JSON.stringify({ [FILTER_CRITERIA_F2]: filterValue2 }), ); + expect(observerSpy).toHaveBeenCalledWith([ + [FILTER_CRITERIA_F1, null, "filter"], + ]); - // Then - expect(instance).toBeDefined(); + expect(urlStateManagerStub.locationToURL).toHaveBeenCalledTimes(1); + expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); + expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); + })); + + it(`should verify will delete filters multiple times and update URL by default only once`, fakeAsync(() => { + // Given + const filterValue1 = "f1v"; + const filterValue2 = "f2v"; + const mutationObserver = new MutationObserver(); + const observerSpy = spyOn( + mutationObserver, + "observer", + ).and.callThrough(); + + urlStateManagerStub.navigateToUrl.and.resolveTo(true); + + // prerequisites manager should have + manager.filterCriteria[FILTER_CRITERIA_F1] = filterValue1; + manager.filterCriteria[FILTER_CRITERIA_F2] = filterValue2; + manager.changeUpdateStrategy("navigateToUrl"); + manager.registerMutationObserver(mutationObserver.observer); + + // Then 1 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F1]: filterValue1, + [FILTER_CRITERIA_F2]: filterValue2, + } as Record); + + // When + const returnedValue1 = manager.deleteFilter(FILTER_CRITERIA_F1); + const returnedValue2 = manager.deleteFilter(FILTER_CRITERIA_F2); + + // wait virtually 1s because navigation is debounced for 300ms by default + tick(1000); + + // Then 2 + expect(returnedValue1).toBeTrue(); + expect(returnedValue2).toBeTrue(); + + expect(manager.filterCriteria).toEqual( + {} as Record, + ); + expect(urlStateManagerStub.setQueryParam.calls.argsFor(0)).toEqual([ + FILTER_KEY, + JSON.stringify({ [FILTER_CRITERIA_F2]: filterValue2 }), + ]); + expect(urlStateManagerStub.setQueryParam.calls.argsFor(1)).toEqual([ + FILTER_KEY, + null, + ]); + expect(observerSpy.calls.argsFor(0)).toEqual([ + [[FILTER_CRITERIA_F1, null, "filter"]], + ]); + expect(observerSpy.calls.argsFor(1)).toEqual([ + [[FILTER_CRITERIA_F2, null, "filter"]], + ]); + + expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); + expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); + expect(urlStateManagerStub.navigateToUrl).toHaveBeenCalledTimes(1); + })); + + it(`should verify won't update URL if updateBrowserUrl parameter is false`, fakeAsync(() => { + // Given + const filterValue1 = "f1v"; + const filterValue2 = "f2v"; + const mutationObserver1 = new MutationObserver(); + const mutationObserver2 = new MutationObserver(); + const observerError = new Error("observer throws error"); + const observerSpy1 = spyOn( + mutationObserver1, + "observer", + ).and.throwError(observerError); + const observerSpy2 = spyOn( + mutationObserver2, + "observer", + ).and.callThrough(); + const consoleErrorSpy = spyOn(console, "error").and.callFake(CallFake); + + // prerequisites manager should have + manager.filterCriteria[FILTER_CRITERIA_F1] = filterValue1; + manager.filterCriteria[FILTER_CRITERIA_F2] = filterValue2; + manager.registerMutationObserver(mutationObserver1.observer); + manager.registerMutationObserver(mutationObserver2.observer); + + // Then 1 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F1]: filterValue1, + [FILTER_CRITERIA_F2]: filterValue2, + } as Record); + + // When + const returnedValue = manager.deleteFilter(FILTER_CRITERIA_F1, false); + + // wait virtually 1s because navigation is debounced for 300ms by default + tick(1000); + + // Then 2 + expect(returnedValue).toBeTrue(); + + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F2]: filterValue2, + } as Record); + expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith( + FILTER_KEY, + JSON.stringify({ [FILTER_CRITERIA_F2]: filterValue2 }), + ); + expect(observerSpy1).toHaveBeenCalledWith([ + [FILTER_CRITERIA_F1, null, "filter"], + ]); + expect(observerSpy2).toHaveBeenCalledWith([ + [FILTER_CRITERIA_F1, null, "filter"], + ]); + + expect(consoleErrorSpy).toHaveBeenCalledWith( + "FiltersManager: Failed to notify mutation observers", + observerError, + ); + + expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); + expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); + expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); + })); }); - describe('Properties::', () => { - let manager: FiltersSortManager; + describe("|clearFilters|", () => { + let observerError: Error; + let observerSpy1: jasmine.Spy; + let observerSpy2: jasmine.Spy; + let consoleErrorSpy: jasmine.Spy; + + beforeEach(() => { + const filterValue1 = "f1v"; + const filterValue2 = "f2v"; + + const mutationObserver1 = new MutationObserver(); + const mutationObserver2 = new MutationObserver(); + observerError = new Error("observer throws error"); + observerSpy1 = spyOn(mutationObserver1, "observer").and.throwError( + observerError, + ); + observerSpy2 = spyOn(mutationObserver2, "observer").and.callThrough(); + consoleErrorSpy = spyOn(console, "error").and.callFake(CallFake); + + // prerequisites manager should have + manager.filterCriteria[FILTER_CRITERIA_F1] = filterValue1; + manager.filterCriteria[FILTER_CRITERIA_F2] = filterValue2; + manager.filterCriteria[FILTER_CRITERIA_F3] = null; + manager.filterCriteria[FILTER_CRITERIA_F4] = undefined; + manager.registerMutationObserver(mutationObserver1.observer); + manager.registerMutationObserver(mutationObserver2.observer); + + // Then 1 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F1]: filterValue1, + [FILTER_CRITERIA_F2]: filterValue2, + [FILTER_CRITERIA_F3]: null, + [FILTER_CRITERIA_F4]: undefined, + } as Record); + }); + + it(`should verify will clear all existing filters, serialize to URLStateManager, update URL by default and notify mutation observers`, fakeAsync(() => { + // When + manager.clearFilters(); + manager.clearFilters(); - beforeEach(() => { - manager = new FiltersSortManager(urlStateManagerStub, KNOWN_FILTER_CRITERIA, KNOWN_SORT_CRITERIA); - }); + // wait virtually 1s because navigation is debounced for 300ms by default + tick(1000); - describe('|filterCriteria|', () => { - it('should verify default value is empty object', () => { - // Then - expect(manager.filterCriteria).toEqual({} as Record); - }); - }); + // Then + expect(manager.filterCriteria).toEqual( + {} as Record, + ); - describe('|sortCriteria|', () => { - it('should verify default value is empty object', () => { - // Then - expect(manager.sortCriteria).toEqual({} as Record); - }); - }); + expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith( + FILTER_KEY, + null, + ); + + expect(observerSpy1.calls.count()).toEqual(1); + expect(observerSpy1.calls.argsFor(0)).toEqual([ + [ + [FILTER_CRITERIA_F1, null, "filter"], + [FILTER_CRITERIA_F2, null, "filter"], + [FILTER_CRITERIA_F3, null, "filter"], + [FILTER_CRITERIA_F4, null, "filter"], + ], + ]); + + expect(observerSpy2.calls.count()).toEqual(1); + expect(observerSpy2.calls.argsFor(0)).toEqual([ + [ + [FILTER_CRITERIA_F1, null, "filter"], + [FILTER_CRITERIA_F2, null, "filter"], + [FILTER_CRITERIA_F3, null, "filter"], + [FILTER_CRITERIA_F4, null, "filter"], + ], + ]); + + expect(consoleErrorSpy).toHaveBeenCalledWith( + "FiltersManager: Failed to notify mutation observers", + observerError, + ); + + expect(urlStateManagerStub.locationToURL).toHaveBeenCalledTimes(1); + expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); + expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); + })); + + it(`should verify will clear all existing filters, serialize to URLStateManager, and won't update URL and would notify mutation observers`, fakeAsync(() => { + // When + manager.clearFilters(false); + manager.clearFilters(false); + + // wait virtually 1s because navigation is debounced for 300ms by default + tick(1000); + + // Then + expect(manager.filterCriteria).toEqual( + {} as Record, + ); + + expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith( + FILTER_KEY, + null, + ); + + expect(observerSpy1.calls.count()).toEqual(1); + expect(observerSpy1).toHaveBeenCalledWith([ + [FILTER_CRITERIA_F1, null, "filter"], + [FILTER_CRITERIA_F2, null, "filter"], + [FILTER_CRITERIA_F3, null, "filter"], + [FILTER_CRITERIA_F4, null, "filter"], + ]); + + expect(observerSpy2.calls.count()).toEqual(1); + expect(observerSpy2).toHaveBeenCalledWith([ + [FILTER_CRITERIA_F1, null, "filter"], + [FILTER_CRITERIA_F2, null, "filter"], + [FILTER_CRITERIA_F3, null, "filter"], + [FILTER_CRITERIA_F4, null, "filter"], + ]); + + expect(consoleErrorSpy).toHaveBeenCalledWith( + "FiltersManager: Failed to notify mutation observers", + observerError, + ); + + expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); + expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); + expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); + })); + + it(`should verify will clear all existing filters, serialize to URLStateManager, update URL by default and won't notify mutation observers`, fakeAsync(() => { + // Given + manager.changeUpdateStrategy("replaceToURL"); + + // When + manager.clearFilters(true, false); + manager.clearFilters(true); + + // wait virtually 1s because navigation is debounced for 300ms by default + tick(1000); + + // Then + expect(manager.filterCriteria).toEqual( + {} as Record, + ); + + expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith( + FILTER_KEY, + null, + ); + + expect(observerSpy1).not.toHaveBeenCalled(); + expect(observerSpy2).not.toHaveBeenCalled(); + + expect(consoleErrorSpy).not.toHaveBeenCalled(); + + expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); + expect(urlStateManagerStub.replaceToUrl).toHaveBeenCalled(); + expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); + })); }); - describe('Methods::', () => { - let manager: FiltersSortManager; + describe("|hasSort|", () => { + it("should verify will return false when there is not such sort criteria", () => { + // Given + manager.sortCriteria[SORT_CRITERIA_S1] = "s1v"; + manager.sortCriteria[SORT_CRITERIA_S2] = "s2v"; + + // Then 1 + expect(manager.sortCriteria).toEqual({ + [SORT_CRITERIA_S1]: "s1v", + [SORT_CRITERIA_S2]: "s2v", + } as Record); + + // When/Then 2 + expect(manager.hasSort(SORT_CRITERIA_S1)).toBeTrue(); + expect(manager.hasSort(SORT_CRITERIA_S2)).toBeTrue(); + expect(manager.hasSort(SORT_CRITERIA_S3)).toBeFalse(); + }); + + it(`should verify will return false when there is such sort criteria but it's value is Nil`, () => { + // Given + manager.sortCriteria[SORT_CRITERIA_S1] = "s1v"; + manager.sortCriteria[SORT_CRITERIA_S2] = null; + manager.sortCriteria[SORT_CRITERIA_S3] = undefined; + + // Then 1 + expect(manager.sortCriteria).toEqual({ + [SORT_CRITERIA_S1]: "s1v", + [SORT_CRITERIA_S2]: null, + [SORT_CRITERIA_S3]: undefined, + } as Record); + + // When/Then 2 + expect(manager.hasSort(SORT_CRITERIA_S1)).toBeTrue(); + expect(manager.hasSort(SORT_CRITERIA_S2)).toBeFalse(); + expect(manager.hasSort(SORT_CRITERIA_S3)).toBeFalse(); + }); + + it(`should verify will return true when there is such sort criteria and it's value is not Nil`, () => { + // Given + manager.sortCriteria[SORT_CRITERIA_S1] = "s1v"; + manager.sortCriteria[SORT_CRITERIA_S2] = "s2v"; + + // Then 1 + expect(manager.sortCriteria).toEqual({ + [SORT_CRITERIA_S1]: "s1v", + [SORT_CRITERIA_S2]: "s2v", + } as Record); + + // When/Then 2 + expect(manager.hasSort(SORT_CRITERIA_S1)).toBeTrue(); + expect(manager.hasSort(SORT_CRITERIA_S2)).toBeTrue(); + expect(manager.hasSort(SORT_CRITERIA_S3)).toBeFalse(); + }); + }); - beforeEach(() => { - manager = new FiltersSortManager(urlStateManagerStub, KNOWN_FILTER_CRITERIA, KNOWN_SORT_CRITERIA); - }); + describe("|hasAnySort|", () => { + it("should verify will return false when there is no sort criteria set", () => { + // Then 1 + expect(manager.sortCriteria).toEqual( + {} as Record, + ); - describe('|hasFilter|', () => { - it('should verify will return false when there is not such filter criteria', () => { - // Given - manager.filterCriteria[FILTER_CRITERIA_F1] = 'f1v'; - manager.filterCriteria[FILTER_CRITERIA_F2] = 'f2v'; - - // Then 1 - expect(manager.filterCriteria).toEqual({ - [FILTER_CRITERIA_F1]: 'f1v', - [FILTER_CRITERIA_F2]: 'f2v' - } as Record); - - // When/Then 2 - expect(manager.hasFilter(FILTER_CRITERIA_F1)).toBeTrue(); - expect(manager.hasFilter(FILTER_CRITERIA_F2)).toBeTrue(); - expect(manager.hasFilter(FILTER_CRITERIA_F3)).toBeFalse(); - expect(manager.hasFilter(FILTER_CRITERIA_F4)).toBeFalse(); - expect(manager.hasFilter(FILTER_CRITERIA_F5)).toBeFalse(); - }); - - it(`should verify will return false when there is such filter criteria but it's value is Nil`, () => { - // Given - manager.filterCriteria[FILTER_CRITERIA_F1] = 'f1v'; - manager.filterCriteria[FILTER_CRITERIA_F3] = null; - manager.filterCriteria[FILTER_CRITERIA_F5] = undefined; - - // Then 1 - expect(manager.filterCriteria).toEqual({ - [FILTER_CRITERIA_F1]: 'f1v', - [FILTER_CRITERIA_F3]: null, - [FILTER_CRITERIA_F5]: undefined - } as Record); - - // When/Then 2 - expect(manager.hasFilter(FILTER_CRITERIA_F1)).toBeTrue(); - expect(manager.hasFilter(FILTER_CRITERIA_F2)).toBeFalse(); - expect(manager.hasFilter(FILTER_CRITERIA_F3)).toBeFalse(); - expect(manager.hasFilter(FILTER_CRITERIA_F4)).toBeFalse(); - expect(manager.hasFilter(FILTER_CRITERIA_F5)).toBeFalse(); - }); - - it(`should verify will return true when there is such filter criteria and it's value is not Nil`, () => { - // Given - manager.filterCriteria[FILTER_CRITERIA_F2] = 'f2v'; - manager.filterCriteria[FILTER_CRITERIA_F3] = 'f3v'; - - // Then 1 - expect(manager.filterCriteria).toEqual({ - [FILTER_CRITERIA_F2]: 'f2v', - [FILTER_CRITERIA_F3]: 'f3v' - } as Record); - - // When/Then 2 - expect(manager.hasFilter(FILTER_CRITERIA_F1)).toBeFalse(); - expect(manager.hasFilter(FILTER_CRITERIA_F2)).toBeTrue(); - expect(manager.hasFilter(FILTER_CRITERIA_F3)).toBeTrue(); - expect(manager.hasFilter(FILTER_CRITERIA_F4)).toBeFalse(); - expect(manager.hasFilter(FILTER_CRITERIA_F5)).toBeFalse(); - }); - }); + // Then 2 + expect(manager.hasAnySort()).toBeFalse(); + }); + + it(`should verify will return false when there are two sort criteria but their value is Nil`, () => { + // Given + manager.sortCriteria[SORT_CRITERIA_S1] = null; + manager.sortCriteria[SORT_CRITERIA_S2] = undefined; + + // Then 1 + expect(manager.sortCriteria).toEqual({ + [SORT_CRITERIA_S1]: null, + [SORT_CRITERIA_S2]: undefined, + } as Record); + + // When/Then 2 + expect(manager.hasAnySort()).toBeFalse(); + }); + + it(`should verify will return true when there is at least one sort criteria which value is not Nil`, () => { + // Given + manager.sortCriteria[SORT_CRITERIA_S1] = null; + manager.sortCriteria[SORT_CRITERIA_S2] = undefined; + manager.sortCriteria[SORT_CRITERIA_S3] = "s3v"; + + // Then 1 + expect(manager.sortCriteria).toEqual({ + [SORT_CRITERIA_S1]: null, + [SORT_CRITERIA_S2]: undefined, + [SORT_CRITERIA_S3]: "s3v", + } as Record); + + // When/Then 2 + expect(manager.hasAnySort()).toBeTrue(); + }); + }); - describe('|hasAnyFilter|', () => { - it('should verify will return false when there is no filter criteria set', () => { - // Then 1 - expect(manager.filterCriteria).toEqual({} as Record); - - // Then 2 - expect(manager.hasAnyFilter()).toBeFalse(); - }); - - it(`should verify will return false when there are two filter criteria but their value is Nil`, () => { - // Given - manager.filterCriteria[FILTER_CRITERIA_F2] = null; - manager.filterCriteria[FILTER_CRITERIA_F4] = undefined; - - // Then 1 - expect(manager.filterCriteria).toEqual({ - [FILTER_CRITERIA_F2]: null, - [FILTER_CRITERIA_F4]: undefined - } as Record); - - // When/Then 2 - expect(manager.hasAnyFilter()).toBeFalse(); - }); - - it(`should verify will return true when there is at least one filter criteria which value is not Nil`, () => { - // Given - manager.filterCriteria[FILTER_CRITERIA_F1] = null; - manager.filterCriteria[FILTER_CRITERIA_F2] = undefined; - manager.filterCriteria[FILTER_CRITERIA_F4] = 'f4v'; - manager.filterCriteria[FILTER_CRITERIA_F5] = 'f5v'; - - // Then 1 - expect(manager.filterCriteria).toEqual({ - [FILTER_CRITERIA_F1]: null, - [FILTER_CRITERIA_F2]: undefined, - [FILTER_CRITERIA_F4]: 'f4v', - [FILTER_CRITERIA_F5]: 'f5v' - } as Record); - - // When/Then 2 - expect(manager.hasAnyFilter()).toBeTrue(); - }); - }); + describe("|setSort|", () => { + it(`should verify won't set sort if it exist and new value is same like stored one`, () => { + // Given + const sortValue1 = "s1v"; + const mutationObserver = new MutationObserver(); + const observerSpy = spyOn( + mutationObserver, + "observer", + ).and.callThrough(); + + // prerequisites manager should have + manager.sortCriteria[SORT_CRITERIA_S1] = sortValue1; + manager.registerMutationObserver(mutationObserver.observer); + + // Then 1 + expect(manager.sortCriteria).toEqual({ + [SORT_CRITERIA_S1]: sortValue1, + } as Record); - describe('|setFilter|', () => { - it(`should verify won't set filter if it exist and new value is same like stored one`, () => { - // Given - const filterValue1 = 'f1v'; - const mutationObserver = new MutationObserver(); - const observerSpy = spyOn(mutationObserver, 'observer').and.callThrough(); - - // prerequisites manager should have - manager.filterCriteria[FILTER_CRITERIA_F1] = filterValue1; - manager.registerMutationObserver(mutationObserver.observer); - - // Then 1 - expect(manager.filterCriteria).toEqual({ [FILTER_CRITERIA_F1]: filterValue1 } as Record); - - // When - manager.setFilter(FILTER_CRITERIA_F1, filterValue1); - - // Then 2 - expect(manager.filterCriteria).toEqual({ - [FILTER_CRITERIA_F1]: filterValue1 - } as Record); - expect(urlStateManagerStub.setQueryParam).not.toHaveBeenCalled(); - expect(observerSpy).not.toHaveBeenCalled(); - - expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); - expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); - expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); - }); - - it(`should verify will set filter if doesn't exist in manager, serialize to URLStateManager, update URL by default and notify mutation observers`, fakeAsync(() => { - // Given - const filterValue1 = 'f1v'; - const filterValue2 = 'f2v'; - - // prerequisites manager should have - manager.filterCriteria[FILTER_CRITERIA_F2] = filterValue2; - - // Then 1 - expect(manager.filterCriteria).toEqual({ [FILTER_CRITERIA_F2]: filterValue2 } as Record); - - // When - manager.setFilter(FILTER_CRITERIA_F1, filterValue1); - - // wait virtually 1s because navigation is debounced for 300ms by default - tick(1000); - - // Then 2 - expect(manager.filterCriteria).toEqual({ - [FILTER_CRITERIA_F1]: filterValue1, - [FILTER_CRITERIA_F2]: filterValue2 - } as Record); - expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith( - FILTER_KEY, - JSON.stringify({ [FILTER_CRITERIA_F2]: filterValue2, [FILTER_CRITERIA_F1]: filterValue1 }) - ); - - expect(urlStateManagerStub.locationToURL).toHaveBeenCalledTimes(1); - expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); - expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); - })); - - it(`should verify will delete filter if exist in manager because provided value is Nil, serialize to URLStateManager, update URL by default and notify mutation observers`, fakeAsync(() => { - // Given - const filterValue3 = 'f3v'; - const filterValue4 = 'f4v'; - const mutationObserver = new MutationObserver(); - const observerSpy = spyOn(mutationObserver, 'observer').and.callThrough(); - - // prerequisites manager should have - manager.filterCriteria[FILTER_CRITERIA_F3] = filterValue3; - manager.filterCriteria[FILTER_CRITERIA_F4] = filterValue4; - manager.changeUpdateStrategy('replaceToURL'); - manager.registerMutationObserver(mutationObserver.observer); - - // Then 1 - expect(manager.filterCriteria).toEqual({ - [FILTER_CRITERIA_F3]: filterValue3, - [FILTER_CRITERIA_F4]: filterValue4 - } as Record); - - // When - manager.setFilter(FILTER_CRITERIA_F3, null); - - // wait virtually 1s because navigation is debounced for 300ms by default - tick(1000); - - // Then 2 - expect(manager.filterCriteria).toEqual({ - [FILTER_CRITERIA_F4]: filterValue4 - } as Record); - expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith( - FILTER_KEY, - JSON.stringify({ [FILTER_CRITERIA_F4]: filterValue4 }) - ); - expect(observerSpy).toHaveBeenCalledWith([[FILTER_CRITERIA_F3, null, 'filter']]); - - expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); - expect(urlStateManagerStub.replaceToUrl).toHaveBeenCalledTimes(1); - expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); - })); - - it(`should verify will delete filters multiple times and update URL by default only once`, fakeAsync(() => { - // Given - const filterValue3 = 'f3v'; - const filterValue4 = 'f4v'; - const mutationObserver = new MutationObserver(); - const observerSpy = spyOn(mutationObserver, 'observer').and.callThrough(); - - urlStateManagerStub.navigateToUrl.and.resolveTo(true); - - // prerequisites manager should have - manager.filterCriteria[FILTER_CRITERIA_F3] = filterValue3; - manager.filterCriteria[FILTER_CRITERIA_F4] = filterValue4; - manager.changeUpdateStrategy('navigateToUrl'); - manager.registerMutationObserver(mutationObserver.observer); - - // Then 1 - expect(manager.filterCriteria).toEqual({ - [FILTER_CRITERIA_F3]: filterValue3, - [FILTER_CRITERIA_F4]: filterValue4 - } as Record); - - // When - manager.setFilter(FILTER_CRITERIA_F3, null); - manager.setFilter(FILTER_CRITERIA_F4, null); - - // wait virtually 1s because navigation is debounced for 300ms by default - tick(1000); - - // Then 2 - expect(manager.filterCriteria).toEqual({} as Record); - expect(urlStateManagerStub.setQueryParam.calls.argsFor(0)).toEqual([ - FILTER_KEY, - JSON.stringify({ [FILTER_CRITERIA_F4]: filterValue4 }) - ]); - expect(urlStateManagerStub.setQueryParam.calls.argsFor(1)).toEqual([FILTER_KEY, null]); - expect(observerSpy.calls.argsFor(0)).toEqual([[[FILTER_CRITERIA_F3, null, 'filter']]]); - expect(observerSpy.calls.argsFor(1)).toEqual([[[FILTER_CRITERIA_F4, null, 'filter']]]); - - expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); - expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); - expect(urlStateManagerStub.navigateToUrl).toHaveBeenCalledTimes(1); - })); - - it(`should verify won't update URL if updateBrowserUrl parameter is false`, fakeAsync(() => { - // Given - const filterValue4 = 'f4v'; - const filterValue5 = 'f5v'; - const mutationObserver1 = new MutationObserver(); - const mutationObserver2 = new MutationObserver(); - const observerError = new Error('observer throws error'); - const observerSpy1 = spyOn(mutationObserver1, 'observer').and.throwError(observerError); - const observerSpy2 = spyOn(mutationObserver2, 'observer').and.callThrough(); - const consoleErrorSpy = spyOn(console, 'error').and.callFake(CallFake); - - // prerequisites manager should have - manager.filterCriteria[FILTER_CRITERIA_F4] = filterValue4; - manager.registerMutationObserver(mutationObserver1.observer); - manager.registerMutationObserver(mutationObserver2.observer); - - // Then 1 - expect(manager.filterCriteria).toEqual({ [FILTER_CRITERIA_F4]: filterValue4 } as Record); - - // When - manager.setFilter(FILTER_CRITERIA_F5, filterValue5, false); - - // wait virtually 1s because navigation is debounced for 300ms by default - tick(1000); - - // Then 2 - expect(manager.filterCriteria).toEqual({ - [FILTER_CRITERIA_F4]: filterValue4, - [FILTER_CRITERIA_F5]: filterValue5 - } as Record); - expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith( - FILTER_KEY, - JSON.stringify({ [FILTER_CRITERIA_F4]: filterValue4, [FILTER_CRITERIA_F5]: filterValue5 }) - ); - expect(observerSpy1).toHaveBeenCalledWith([[FILTER_CRITERIA_F5, filterValue5, 'filter']]); - expect(observerSpy2).toHaveBeenCalledWith([[FILTER_CRITERIA_F5, filterValue5, 'filter']]); - - expect(consoleErrorSpy).toHaveBeenCalledWith('FiltersManager: Failed to notify mutation observers', observerError); - - expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); - expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); - expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); - })); - - it(`should verify will log error if update URL with navigateToUrl strategy fails`, fakeAsync(() => { - // Given - const filterValue3 = 'f3v'; - const navigateToUrlError = new Error('urlUpdateManager throws error'); - const consoleErrorSpy = spyOn(console, 'error').and.callFake(CallFake); - - urlStateManagerStub.navigateToUrl.and.rejectWith(navigateToUrlError); - - // prerequisites manager should have - manager.changeUpdateStrategy('navigateToUrl'); - - // Then 1 - expect(manager.filterCriteria).toEqual({} as Record); - - // When - manager.setFilter(FILTER_CRITERIA_F3, filterValue3, true); - - // wait virtually 1s because navigation is debounced for 300ms by default - tick(1000); - - // Then 2 - expect(manager.filterCriteria).toEqual({ [FILTER_CRITERIA_F3]: filterValue3 } as Record); - expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith( - FILTER_KEY, - JSON.stringify({ [FILTER_CRITERIA_F3]: filterValue3 }) - ); - - expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); - expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); - expect(urlStateManagerStub.navigateToUrl).toHaveBeenCalledTimes(1); - - expect(consoleErrorSpy).toHaveBeenCalledWith('FiltersManager: Failed to update Browser Url', navigateToUrlError); - })); - }); + // When + manager.setSort(SORT_CRITERIA_S1, sortValue1); - describe('|deleteFilter|', () => { - it(`should verify won't delete filter if it doesn't exist`, () => { - // Given - const filterValue4 = 'f4v'; - const mutationObserver = new MutationObserver(); - const observerSpy = spyOn(mutationObserver, 'observer').and.callThrough(); - - // prerequisites manager should have - manager.filterCriteria[FILTER_CRITERIA_F4] = filterValue4; - manager.registerMutationObserver(mutationObserver.observer); - - // Then 1 - expect(manager.filterCriteria).toEqual({ [FILTER_CRITERIA_F4]: filterValue4 } as Record); - - // When - const returnedValue = manager.deleteFilter(FILTER_CRITERIA_F2); - - // Then 2 - expect(returnedValue).toBeFalse(); - expect(manager.filterCriteria).toEqual({ - [FILTER_CRITERIA_F4]: filterValue4 - } as Record); - - expect(urlStateManagerStub.setQueryParam).not.toHaveBeenCalled(); - expect(observerSpy).not.toHaveBeenCalled(); - - expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); - expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); - expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); - }); - - it(`should verify will delete filter if it exist in manager, serialize to URLStateManager, update URL by default and notify mutation observers`, fakeAsync(() => { - // Given - const filterValue1 = 'f1v'; - const filterValue2 = 'f2v'; - const mutationObserver = new MutationObserver(); - const observerSpy = spyOn(mutationObserver, 'observer').and.callThrough(); - - // prerequisites manager should have - manager.filterCriteria[FILTER_CRITERIA_F1] = filterValue1; - manager.filterCriteria[FILTER_CRITERIA_F2] = filterValue2; - manager.registerMutationObserver(mutationObserver.observer); - - // Then 1 - expect(manager.filterCriteria).toEqual({ - [FILTER_CRITERIA_F1]: filterValue1, - [FILTER_CRITERIA_F2]: filterValue2 - } as Record); - - // When - const returnedValue = manager.deleteFilter(FILTER_CRITERIA_F1); - - // wait virtually 1s because navigation is debounced for 300ms by default - tick(1000); - - // Then 2 - expect(returnedValue).toBeTrue(); - - expect(manager.filterCriteria).toEqual({ [FILTER_CRITERIA_F2]: filterValue2 } as Record); - expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith( - FILTER_KEY, - JSON.stringify({ [FILTER_CRITERIA_F2]: filterValue2 }) - ); - expect(observerSpy).toHaveBeenCalledWith([[FILTER_CRITERIA_F1, null, 'filter']]); - - expect(urlStateManagerStub.locationToURL).toHaveBeenCalledTimes(1); - expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); - expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); - })); - - it(`should verify will delete filters multiple times and update URL by default only once`, fakeAsync(() => { - // Given - const filterValue1 = 'f1v'; - const filterValue2 = 'f2v'; - const mutationObserver = new MutationObserver(); - const observerSpy = spyOn(mutationObserver, 'observer').and.callThrough(); - - urlStateManagerStub.navigateToUrl.and.resolveTo(true); - - // prerequisites manager should have - manager.filterCriteria[FILTER_CRITERIA_F1] = filterValue1; - manager.filterCriteria[FILTER_CRITERIA_F2] = filterValue2; - manager.changeUpdateStrategy('navigateToUrl'); - manager.registerMutationObserver(mutationObserver.observer); - - // Then 1 - expect(manager.filterCriteria).toEqual({ - [FILTER_CRITERIA_F1]: filterValue1, - [FILTER_CRITERIA_F2]: filterValue2 - } as Record); - - // When - const returnedValue1 = manager.deleteFilter(FILTER_CRITERIA_F1); - const returnedValue2 = manager.deleteFilter(FILTER_CRITERIA_F2); - - // wait virtually 1s because navigation is debounced for 300ms by default - tick(1000); - - // Then 2 - expect(returnedValue1).toBeTrue(); - expect(returnedValue2).toBeTrue(); - - expect(manager.filterCriteria).toEqual({} as Record); - expect(urlStateManagerStub.setQueryParam.calls.argsFor(0)).toEqual([ - FILTER_KEY, - JSON.stringify({ [FILTER_CRITERIA_F2]: filterValue2 }) - ]); - expect(urlStateManagerStub.setQueryParam.calls.argsFor(1)).toEqual([FILTER_KEY, null]); - expect(observerSpy.calls.argsFor(0)).toEqual([[[FILTER_CRITERIA_F1, null, 'filter']]]); - expect(observerSpy.calls.argsFor(1)).toEqual([[[FILTER_CRITERIA_F2, null, 'filter']]]); - - expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); - expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); - expect(urlStateManagerStub.navigateToUrl).toHaveBeenCalledTimes(1); - })); - - it(`should verify won't update URL if updateBrowserUrl parameter is false`, fakeAsync(() => { - // Given - const filterValue1 = 'f1v'; - const filterValue2 = 'f2v'; - const mutationObserver1 = new MutationObserver(); - const mutationObserver2 = new MutationObserver(); - const observerError = new Error('observer throws error'); - const observerSpy1 = spyOn(mutationObserver1, 'observer').and.throwError(observerError); - const observerSpy2 = spyOn(mutationObserver2, 'observer').and.callThrough(); - const consoleErrorSpy = spyOn(console, 'error').and.callFake(CallFake); - - // prerequisites manager should have - manager.filterCriteria[FILTER_CRITERIA_F1] = filterValue1; - manager.filterCriteria[FILTER_CRITERIA_F2] = filterValue2; - manager.registerMutationObserver(mutationObserver1.observer); - manager.registerMutationObserver(mutationObserver2.observer); - - // Then 1 - expect(manager.filterCriteria).toEqual({ - [FILTER_CRITERIA_F1]: filterValue1, - [FILTER_CRITERIA_F2]: filterValue2 - } as Record); - - // When - const returnedValue = manager.deleteFilter(FILTER_CRITERIA_F1, false); - - // wait virtually 1s because navigation is debounced for 300ms by default - tick(1000); - - // Then 2 - expect(returnedValue).toBeTrue(); - - expect(manager.filterCriteria).toEqual({ [FILTER_CRITERIA_F2]: filterValue2 } as Record); - expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith( - FILTER_KEY, - JSON.stringify({ [FILTER_CRITERIA_F2]: filterValue2 }) - ); - expect(observerSpy1).toHaveBeenCalledWith([[FILTER_CRITERIA_F1, null, 'filter']]); - expect(observerSpy2).toHaveBeenCalledWith([[FILTER_CRITERIA_F1, null, 'filter']]); - - expect(consoleErrorSpy).toHaveBeenCalledWith('FiltersManager: Failed to notify mutation observers', observerError); - - expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); - expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); - expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); - })); - }); + // Then 2 + expect(manager.sortCriteria).toEqual({ + [SORT_CRITERIA_S1]: sortValue1, + } as Record); - describe('|clearFilters|', () => { - let observerError: Error; - let observerSpy1: jasmine.Spy; - let observerSpy2: jasmine.Spy; - let consoleErrorSpy: jasmine.Spy; - - beforeEach(() => { - const filterValue1 = 'f1v'; - const filterValue2 = 'f2v'; - - const mutationObserver1 = new MutationObserver(); - const mutationObserver2 = new MutationObserver(); - observerError = new Error('observer throws error'); - observerSpy1 = spyOn(mutationObserver1, 'observer').and.throwError(observerError); - observerSpy2 = spyOn(mutationObserver2, 'observer').and.callThrough(); - consoleErrorSpy = spyOn(console, 'error').and.callFake(CallFake); - - // prerequisites manager should have - manager.filterCriteria[FILTER_CRITERIA_F1] = filterValue1; - manager.filterCriteria[FILTER_CRITERIA_F2] = filterValue2; - manager.filterCriteria[FILTER_CRITERIA_F3] = null; - manager.filterCriteria[FILTER_CRITERIA_F4] = undefined; - manager.registerMutationObserver(mutationObserver1.observer); - manager.registerMutationObserver(mutationObserver2.observer); - - // Then 1 - expect(manager.filterCriteria).toEqual({ - [FILTER_CRITERIA_F1]: filterValue1, - [FILTER_CRITERIA_F2]: filterValue2, - [FILTER_CRITERIA_F3]: null, - [FILTER_CRITERIA_F4]: undefined - } as Record); - }); - - it(`should verify will clear all existing filters, serialize to URLStateManager, update URL by default and notify mutation observers`, fakeAsync(() => { - // When - manager.clearFilters(); - manager.clearFilters(); - - // wait virtually 1s because navigation is debounced for 300ms by default - tick(1000); - - // Then - expect(manager.filterCriteria).toEqual({} as Record); - - expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith(FILTER_KEY, null); - - expect(observerSpy1.calls.count()).toEqual(1); - expect(observerSpy1.calls.argsFor(0)).toEqual([ - [ - [FILTER_CRITERIA_F1, null, 'filter'], - [FILTER_CRITERIA_F2, null, 'filter'], - [FILTER_CRITERIA_F3, null, 'filter'], - [FILTER_CRITERIA_F4, null, 'filter'] - ] - ]); - - expect(observerSpy2.calls.count()).toEqual(1); - expect(observerSpy2.calls.argsFor(0)).toEqual([ - [ - [FILTER_CRITERIA_F1, null, 'filter'], - [FILTER_CRITERIA_F2, null, 'filter'], - [FILTER_CRITERIA_F3, null, 'filter'], - [FILTER_CRITERIA_F4, null, 'filter'] - ] - ]); - - expect(consoleErrorSpy).toHaveBeenCalledWith('FiltersManager: Failed to notify mutation observers', observerError); - - expect(urlStateManagerStub.locationToURL).toHaveBeenCalledTimes(1); - expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); - expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); - })); - - it(`should verify will clear all existing filters, serialize to URLStateManager, and won't update URL and would notify mutation observers`, fakeAsync(() => { - // When - manager.clearFilters(false); - manager.clearFilters(false); - - // wait virtually 1s because navigation is debounced for 300ms by default - tick(1000); - - // Then - expect(manager.filterCriteria).toEqual({} as Record); - - expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith(FILTER_KEY, null); - - expect(observerSpy1.calls.count()).toEqual(1); - expect(observerSpy1).toHaveBeenCalledWith([ - [FILTER_CRITERIA_F1, null, 'filter'], - [FILTER_CRITERIA_F2, null, 'filter'], - [FILTER_CRITERIA_F3, null, 'filter'], - [FILTER_CRITERIA_F4, null, 'filter'] - ]); - - expect(observerSpy2.calls.count()).toEqual(1); - expect(observerSpy2).toHaveBeenCalledWith([ - [FILTER_CRITERIA_F1, null, 'filter'], - [FILTER_CRITERIA_F2, null, 'filter'], - [FILTER_CRITERIA_F3, null, 'filter'], - [FILTER_CRITERIA_F4, null, 'filter'] - ]); - - expect(consoleErrorSpy).toHaveBeenCalledWith('FiltersManager: Failed to notify mutation observers', observerError); - - expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); - expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); - expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); - })); - - it(`should verify will clear all existing filters, serialize to URLStateManager, update URL by default and won't notify mutation observers`, fakeAsync(() => { - // Given - manager.changeUpdateStrategy('replaceToURL'); - - // When - manager.clearFilters(true, false); - manager.clearFilters(true); - - // wait virtually 1s because navigation is debounced for 300ms by default - tick(1000); - - // Then - expect(manager.filterCriteria).toEqual({} as Record); - - expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith(FILTER_KEY, null); - - expect(observerSpy1).not.toHaveBeenCalled(); - expect(observerSpy2).not.toHaveBeenCalled(); - - expect(consoleErrorSpy).not.toHaveBeenCalled(); - - expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); - expect(urlStateManagerStub.replaceToUrl).toHaveBeenCalled(); - expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); - })); - }); + expect(urlStateManagerStub.setQueryParam).not.toHaveBeenCalled(); - describe('|hasSort|', () => { - it('should verify will return false when there is not such sort criteria', () => { - // Given - manager.sortCriteria[SORT_CRITERIA_S1] = 's1v'; - manager.sortCriteria[SORT_CRITERIA_S2] = 's2v'; - - // Then 1 - expect(manager.sortCriteria).toEqual({ - [SORT_CRITERIA_S1]: 's1v', - [SORT_CRITERIA_S2]: 's2v' - } as Record); - - // When/Then 2 - expect(manager.hasSort(SORT_CRITERIA_S1)).toBeTrue(); - expect(manager.hasSort(SORT_CRITERIA_S2)).toBeTrue(); - expect(manager.hasSort(SORT_CRITERIA_S3)).toBeFalse(); - }); - - it(`should verify will return false when there is such sort criteria but it's value is Nil`, () => { - // Given - manager.sortCriteria[SORT_CRITERIA_S1] = 's1v'; - manager.sortCriteria[SORT_CRITERIA_S2] = null; - manager.sortCriteria[SORT_CRITERIA_S3] = undefined; - - // Then 1 - expect(manager.sortCriteria).toEqual({ - [SORT_CRITERIA_S1]: 's1v', - [SORT_CRITERIA_S2]: null, - [SORT_CRITERIA_S3]: undefined - } as Record); - - // When/Then 2 - expect(manager.hasSort(SORT_CRITERIA_S1)).toBeTrue(); - expect(manager.hasSort(SORT_CRITERIA_S2)).toBeFalse(); - expect(manager.hasSort(SORT_CRITERIA_S3)).toBeFalse(); - }); - - it(`should verify will return true when there is such sort criteria and it's value is not Nil`, () => { - // Given - manager.sortCriteria[SORT_CRITERIA_S1] = 's1v'; - manager.sortCriteria[SORT_CRITERIA_S2] = 's2v'; - - // Then 1 - expect(manager.sortCriteria).toEqual({ - [SORT_CRITERIA_S1]: 's1v', - [SORT_CRITERIA_S2]: 's2v' - } as Record); - - // When/Then 2 - expect(manager.hasSort(SORT_CRITERIA_S1)).toBeTrue(); - expect(manager.hasSort(SORT_CRITERIA_S2)).toBeTrue(); - expect(manager.hasSort(SORT_CRITERIA_S3)).toBeFalse(); - }); - }); + expect(observerSpy).not.toHaveBeenCalled(); - describe('|hasAnySort|', () => { - it('should verify will return false when there is no sort criteria set', () => { - // Then 1 - expect(manager.sortCriteria).toEqual({} as Record); - - // Then 2 - expect(manager.hasAnySort()).toBeFalse(); - }); - - it(`should verify will return false when there are two sort criteria but their value is Nil`, () => { - // Given - manager.sortCriteria[SORT_CRITERIA_S1] = null; - manager.sortCriteria[SORT_CRITERIA_S2] = undefined; - - // Then 1 - expect(manager.sortCriteria).toEqual({ - [SORT_CRITERIA_S1]: null, - [SORT_CRITERIA_S2]: undefined - } as Record); - - // When/Then 2 - expect(manager.hasAnySort()).toBeFalse(); - }); - - it(`should verify will return true when there is at least one sort criteria which value is not Nil`, () => { - // Given - manager.sortCriteria[SORT_CRITERIA_S1] = null; - manager.sortCriteria[SORT_CRITERIA_S2] = undefined; - manager.sortCriteria[SORT_CRITERIA_S3] = 's3v'; - - // Then 1 - expect(manager.sortCriteria).toEqual({ - [SORT_CRITERIA_S1]: null, - [SORT_CRITERIA_S2]: undefined, - [SORT_CRITERIA_S3]: 's3v' - } as Record); - - // When/Then 2 - expect(manager.hasAnySort()).toBeTrue(); - }); - }); + expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); + expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); + expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); + }); - describe('|setSort|', () => { - it(`should verify won't set sort if it exist and new value is same like stored one`, () => { - // Given - const sortValue1 = 's1v'; - const mutationObserver = new MutationObserver(); - const observerSpy = spyOn(mutationObserver, 'observer').and.callThrough(); - - // prerequisites manager should have - manager.sortCriteria[SORT_CRITERIA_S1] = sortValue1; - manager.registerMutationObserver(mutationObserver.observer); + it(`should verify will set sort if doesn't exist in manager, serialize to URLStateManager, update URL by default and notify mutation observers`, fakeAsync(() => { + // Given + const sortValue1 = "s1v"; + const sortValue2 = "s2v"; - // Then 1 - expect(manager.sortCriteria).toEqual({ [SORT_CRITERIA_S1]: sortValue1 } as Record); + // prerequisites manager should have + manager.sortCriteria[SORT_CRITERIA_S2] = sortValue2; - // When - manager.setSort(SORT_CRITERIA_S1, sortValue1); + // Then 1 + expect(manager.sortCriteria).toEqual({ + [SORT_CRITERIA_S2]: sortValue2, + } as Record); - // Then 2 - expect(manager.sortCriteria).toEqual({ [SORT_CRITERIA_S1]: sortValue1 } as Record); + // When + manager.setSort(SORT_CRITERIA_S1, sortValue1); + + // wait virtually 1s because navigation is debounced for 300ms by default + tick(1000); + + // Then 2 + expect(manager.sortCriteria).toEqual({ + [SORT_CRITERIA_S1]: sortValue1, + [SORT_CRITERIA_S2]: sortValue2, + } as Record); + + expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith( + SORT_KEY, + JSON.stringify({ + [SORT_CRITERIA_S2]: sortValue2, + [SORT_CRITERIA_S1]: sortValue1, + }), + ); - expect(urlStateManagerStub.setQueryParam).not.toHaveBeenCalled(); + expect(urlStateManagerStub.locationToURL).toHaveBeenCalledTimes(1); + expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); + expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); + })); + + it(`should verify will delete sort if exist in manager because provided value is Nil, serialize to URLStateManager, update URL by default and notify mutation observers`, fakeAsync(() => { + // Given + const sortValue1 = "s1v"; + const sortValue2 = "s2v"; + const mutationObserver = new MutationObserver(); + const observerSpy = spyOn( + mutationObserver, + "observer", + ).and.callThrough(); + + // prerequisites manager should have + manager.sortCriteria[SORT_CRITERIA_S1] = sortValue1; + manager.sortCriteria[SORT_CRITERIA_S2] = sortValue2; + manager.changeUpdateStrategy("replaceToURL"); + manager.registerMutationObserver(mutationObserver.observer); + + // Then 1 + expect(manager.sortCriteria).toEqual({ + [SORT_CRITERIA_S1]: sortValue1, + [SORT_CRITERIA_S2]: sortValue2, + } as Record); - expect(observerSpy).not.toHaveBeenCalled(); + // When + manager.setSort(SORT_CRITERIA_S1, null); - expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); - expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); - expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); - }); + // wait virtually 1s because navigation is debounced for 300ms by default + tick(1000); - it(`should verify will set sort if doesn't exist in manager, serialize to URLStateManager, update URL by default and notify mutation observers`, fakeAsync(() => { - // Given - const sortValue1 = 's1v'; - const sortValue2 = 's2v'; + // Then 2 + expect(manager.sortCriteria).toEqual({ + [SORT_CRITERIA_S2]: sortValue2, + } as Record); - // prerequisites manager should have - manager.sortCriteria[SORT_CRITERIA_S2] = sortValue2; + expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith( + SORT_KEY, + JSON.stringify({ [SORT_CRITERIA_S2]: sortValue2 }), + ); - // Then 1 - expect(manager.sortCriteria).toEqual({ [SORT_CRITERIA_S2]: sortValue2 } as Record); + expect(observerSpy).toHaveBeenCalledWith([ + [SORT_CRITERIA_S1, null, "sort"], + ]); - // When - manager.setSort(SORT_CRITERIA_S1, sortValue1); + expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); + expect(urlStateManagerStub.replaceToUrl).toHaveBeenCalledTimes(1); + expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); + })); - // wait virtually 1s because navigation is debounced for 300ms by default - tick(1000); + it(`should verify will delete sort multiple times and update URL by default only once`, fakeAsync(() => { + // Given + const sortValue1 = "s1v"; + const sortValue2 = "s2v"; + const mutationObserver = new MutationObserver(); + const observerSpy = spyOn( + mutationObserver, + "observer", + ).and.callThrough(); - // Then 2 - expect(manager.sortCriteria).toEqual({ - [SORT_CRITERIA_S1]: sortValue1, - [SORT_CRITERIA_S2]: sortValue2 - } as Record); - - expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith( - SORT_KEY, - JSON.stringify({ [SORT_CRITERIA_S2]: sortValue2, [SORT_CRITERIA_S1]: sortValue1 }) - ); + urlStateManagerStub.navigateToUrl.and.resolveTo(true); - expect(urlStateManagerStub.locationToURL).toHaveBeenCalledTimes(1); - expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); - expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); - })); + // prerequisites manager should have + manager.sortCriteria[SORT_CRITERIA_S1] = sortValue1; + manager.sortCriteria[SORT_CRITERIA_S2] = sortValue2; - it(`should verify will delete sort if exist in manager because provided value is Nil, serialize to URLStateManager, update URL by default and notify mutation observers`, fakeAsync(() => { - // Given - const sortValue1 = 's1v'; - const sortValue2 = 's2v'; - const mutationObserver = new MutationObserver(); - const observerSpy = spyOn(mutationObserver, 'observer').and.callThrough(); + manager.changeUpdateStrategy("navigateToUrl"); + manager.registerMutationObserver(mutationObserver.observer); - // prerequisites manager should have - manager.sortCriteria[SORT_CRITERIA_S1] = sortValue1; - manager.sortCriteria[SORT_CRITERIA_S2] = sortValue2; - manager.changeUpdateStrategy('replaceToURL'); - manager.registerMutationObserver(mutationObserver.observer); + // Then 1 + expect(manager.sortCriteria).toEqual({ + [SORT_CRITERIA_S1]: sortValue1, + [SORT_CRITERIA_S2]: sortValue2, + } as Record); - // Then 1 - expect(manager.sortCriteria).toEqual({ - [SORT_CRITERIA_S1]: sortValue1, - [SORT_CRITERIA_S2]: sortValue2 - } as Record); + // When + manager.setSort(SORT_CRITERIA_S1, null); + manager.setSort(SORT_CRITERIA_S2, null); - // When - manager.setSort(SORT_CRITERIA_S1, null); + // wait virtually 1s because navigation is debounced for 300ms by default + tick(1000); - // wait virtually 1s because navigation is debounced for 300ms by default - tick(1000); + // Then 2 + expect(manager.sortCriteria).toEqual( + {} as Record, + ); - // Then 2 - expect(manager.sortCriteria).toEqual({ [SORT_CRITERIA_S2]: sortValue2 } as Record); + expect(urlStateManagerStub.setQueryParam.calls.argsFor(0)).toEqual([ + SORT_KEY, + JSON.stringify({ [SORT_CRITERIA_S2]: sortValue2 }), + ]); + expect(urlStateManagerStub.setQueryParam.calls.argsFor(1)).toEqual([ + SORT_KEY, + null, + ]); - expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith( - SORT_KEY, - JSON.stringify({ [SORT_CRITERIA_S2]: sortValue2 }) - ); + expect(observerSpy.calls.argsFor(0)).toEqual([ + [[SORT_CRITERIA_S1, null, "sort"]], + ]); + expect(observerSpy.calls.argsFor(1)).toEqual([ + [[SORT_CRITERIA_S2, null, "sort"]], + ]); - expect(observerSpy).toHaveBeenCalledWith([[SORT_CRITERIA_S1, null, 'sort']]); + expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); + expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); + expect(urlStateManagerStub.navigateToUrl).toHaveBeenCalledTimes(1); + })); - expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); - expect(urlStateManagerStub.replaceToUrl).toHaveBeenCalledTimes(1); - expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); - })); + it(`should verify won't update URL if updateBrowserUrl parameter is false`, fakeAsync(() => { + // Given + const sortValue1 = "s1v"; + const sortValue2 = "s2v"; - it(`should verify will delete sort multiple times and update URL by default only once`, fakeAsync(() => { - // Given - const sortValue1 = 's1v'; - const sortValue2 = 's2v'; - const mutationObserver = new MutationObserver(); - const observerSpy = spyOn(mutationObserver, 'observer').and.callThrough(); + const mutationObserver1 = new MutationObserver(); + const mutationObserver2 = new MutationObserver(); - urlStateManagerStub.navigateToUrl.and.resolveTo(true); + const observerError = new Error("observer throws error"); + const observerSpy1 = spyOn( + mutationObserver1, + "observer", + ).and.throwError(observerError); + const observerSpy2 = spyOn( + mutationObserver2, + "observer", + ).and.callThrough(); - // prerequisites manager should have - manager.sortCriteria[SORT_CRITERIA_S1] = sortValue1; - manager.sortCriteria[SORT_CRITERIA_S2] = sortValue2; + const consoleErrorSpy = spyOn(console, "error").and.callFake(CallFake); - manager.changeUpdateStrategy('navigateToUrl'); - manager.registerMutationObserver(mutationObserver.observer); + // prerequisites manager should have + manager.sortCriteria[SORT_CRITERIA_S1] = sortValue1; - // Then 1 - expect(manager.sortCriteria).toEqual({ - [SORT_CRITERIA_S1]: sortValue1, - [SORT_CRITERIA_S2]: sortValue2 - } as Record); + manager.registerMutationObserver(mutationObserver1.observer); + manager.registerMutationObserver(mutationObserver2.observer); - // When - manager.setSort(SORT_CRITERIA_S1, null); - manager.setSort(SORT_CRITERIA_S2, null); + // Then 1 + expect(manager.sortCriteria).toEqual({ + [SORT_CRITERIA_S1]: sortValue1, + } as Record); - // wait virtually 1s because navigation is debounced for 300ms by default - tick(1000); + // When + manager.setSort(SORT_CRITERIA_S2, sortValue2, false); + + // wait virtually 1s because navigation is debounced for 300ms by default + tick(1000); + + // Then 2 + expect(manager.sortCriteria).toEqual({ + [SORT_CRITERIA_S1]: sortValue1, + [SORT_CRITERIA_S2]: sortValue2, + } as Record); + + expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith( + SORT_KEY, + JSON.stringify({ + [SORT_CRITERIA_S1]: sortValue1, + [SORT_CRITERIA_S2]: sortValue2, + }), + ); - // Then 2 - expect(manager.sortCriteria).toEqual({} as Record); + expect(observerSpy1).toHaveBeenCalledWith([ + [SORT_CRITERIA_S2, sortValue2, "sort"], + ]); + expect(observerSpy2).toHaveBeenCalledWith([ + [SORT_CRITERIA_S2, sortValue2, "sort"], + ]); - expect(urlStateManagerStub.setQueryParam.calls.argsFor(0)).toEqual([ - SORT_KEY, - JSON.stringify({ [SORT_CRITERIA_S2]: sortValue2 }) - ]); - expect(urlStateManagerStub.setQueryParam.calls.argsFor(1)).toEqual([SORT_KEY, null]); + expect(consoleErrorSpy).toHaveBeenCalledWith( + "FiltersManager: Failed to notify mutation observers", + observerError, + ); - expect(observerSpy.calls.argsFor(0)).toEqual([[[SORT_CRITERIA_S1, null, 'sort']]]); - expect(observerSpy.calls.argsFor(1)).toEqual([[[SORT_CRITERIA_S2, null, 'sort']]]); + expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); + expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); + expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); + })); - expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); - expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); - expect(urlStateManagerStub.navigateToUrl).toHaveBeenCalledTimes(1); - })); + it(`should verify will log error if update URL with navigateToUrl strategy fails`, fakeAsync(() => { + // Given + const sortValue1 = "s1v"; + const navigateToUrlError = new Error("urlUpdateManager throws error"); + const consoleErrorSpy = spyOn(console, "error").and.callFake(CallFake); - it(`should verify won't update URL if updateBrowserUrl parameter is false`, fakeAsync(() => { - // Given - const sortValue1 = 's1v'; - const sortValue2 = 's2v'; + urlStateManagerStub.navigateToUrl.and.rejectWith(navigateToUrlError); - const mutationObserver1 = new MutationObserver(); - const mutationObserver2 = new MutationObserver(); + // prerequisites manager should have + manager.changeUpdateStrategy("navigateToUrl"); - const observerError = new Error('observer throws error'); - const observerSpy1 = spyOn(mutationObserver1, 'observer').and.throwError(observerError); - const observerSpy2 = spyOn(mutationObserver2, 'observer').and.callThrough(); + // Then 1 + expect(manager.sortCriteria).toEqual( + {} as Record, + ); - const consoleErrorSpy = spyOn(console, 'error').and.callFake(CallFake); + // When + manager.setSort(SORT_CRITERIA_S1, sortValue1, true); - // prerequisites manager should have - manager.sortCriteria[SORT_CRITERIA_S1] = sortValue1; + // wait virtually 1s because navigation is debounced for 300ms by default + tick(1000); - manager.registerMutationObserver(mutationObserver1.observer); - manager.registerMutationObserver(mutationObserver2.observer); + // Then 2 + expect(manager.sortCriteria).toEqual({ + [SORT_CRITERIA_S1]: sortValue1, + } as Record); - // Then 1 - expect(manager.sortCriteria).toEqual({ [SORT_CRITERIA_S1]: sortValue1 } as Record); + expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith( + SORT_KEY, + JSON.stringify({ [SORT_CRITERIA_S1]: sortValue1 }), + ); - // When - manager.setSort(SORT_CRITERIA_S2, sortValue2, false); + expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); + expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); + expect(urlStateManagerStub.navigateToUrl).toHaveBeenCalledTimes(1); - // wait virtually 1s because navigation is debounced for 300ms by default - tick(1000); + expect(consoleErrorSpy).toHaveBeenCalledWith( + "FiltersManager: Failed to update Browser Url", + navigateToUrlError, + ); + })); + }); - // Then 2 - expect(manager.sortCriteria).toEqual({ - [SORT_CRITERIA_S1]: sortValue1, - [SORT_CRITERIA_S2]: sortValue2 - } as Record); + describe("|clearSort|", () => { + let observerError: Error; + let observerSpy1: jasmine.Spy; + let observerSpy2: jasmine.Spy; + let consoleErrorSpy: jasmine.Spy; - expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith( - SORT_KEY, - JSON.stringify({ [SORT_CRITERIA_S1]: sortValue1, [SORT_CRITERIA_S2]: sortValue2 }) - ); + beforeEach(() => { + const sortValue1 = "s1v"; - expect(observerSpy1).toHaveBeenCalledWith([[SORT_CRITERIA_S2, sortValue2, 'sort']]); - expect(observerSpy2).toHaveBeenCalledWith([[SORT_CRITERIA_S2, sortValue2, 'sort']]); + const mutationObserver1 = new MutationObserver(); + const mutationObserver2 = new MutationObserver(); + observerError = new Error("observer throws error"); + observerSpy1 = spyOn(mutationObserver1, "observer").and.throwError( + observerError, + ); + observerSpy2 = spyOn(mutationObserver2, "observer").and.callThrough(); + consoleErrorSpy = spyOn(console, "error").and.callFake(CallFake); + + // prerequisites manager should have + manager.sortCriteria[SORT_CRITERIA_S1] = sortValue1; + manager.sortCriteria[SORT_CRITERIA_S2] = null; + manager.sortCriteria[SORT_CRITERIA_S3] = undefined; + + manager.registerMutationObserver(mutationObserver1.observer); + manager.registerMutationObserver(mutationObserver2.observer); + + // Then 1 + expect(manager.sortCriteria).toEqual({ + [SORT_CRITERIA_S1]: sortValue1, + [SORT_CRITERIA_S2]: null, + [SORT_CRITERIA_S3]: undefined, + } as Record); + }); + + it(`should verify will clear all existing sort, serialize to URLStateManager, update URL by default and notify mutation observers`, fakeAsync(() => { + // When + manager.clearSort(); + manager.clearSort(); - expect(consoleErrorSpy).toHaveBeenCalledWith('FiltersManager: Failed to notify mutation observers', observerError); + // wait virtually 1s because navigation is debounced for 300ms by default + tick(1000); - expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); - expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); - expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); - })); + // Then + expect(manager.sortCriteria).toEqual( + {} as Record, + ); - it(`should verify will log error if update URL with navigateToUrl strategy fails`, fakeAsync(() => { - // Given - const sortValue1 = 's1v'; - const navigateToUrlError = new Error('urlUpdateManager throws error'); - const consoleErrorSpy = spyOn(console, 'error').and.callFake(CallFake); + expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith( + SORT_KEY, + null, + ); - urlStateManagerStub.navigateToUrl.and.rejectWith(navigateToUrlError); + expect(observerSpy1.calls.count()).toEqual(1); + expect(observerSpy1.calls.argsFor(0)).toEqual([ + [ + [SORT_CRITERIA_S1, null, "sort"], + [SORT_CRITERIA_S2, null, "sort"], + [SORT_CRITERIA_S3, null, "sort"], + ], + ]); - // prerequisites manager should have - manager.changeUpdateStrategy('navigateToUrl'); + expect(observerSpy2.calls.count()).toEqual(1); + expect(observerSpy2.calls.argsFor(0)).toEqual([ + [ + [SORT_CRITERIA_S1, null, "sort"], + [SORT_CRITERIA_S2, null, "sort"], + [SORT_CRITERIA_S3, null, "sort"], + ], + ]); - // Then 1 - expect(manager.sortCriteria).toEqual({} as Record); + expect(consoleErrorSpy).toHaveBeenCalledWith( + "FiltersManager: Failed to notify mutation observers", + observerError, + ); - // When - manager.setSort(SORT_CRITERIA_S1, sortValue1, true); + expect(urlStateManagerStub.locationToURL).toHaveBeenCalledTimes(1); + expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); + expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); + })); - // wait virtually 1s because navigation is debounced for 300ms by default - tick(1000); + it(`should verify will clear all existing sort, serialize to URLStateManager, and won't update URL and would notify mutation observers`, fakeAsync(() => { + // When + manager.clearSort(false); + manager.clearSort(false); - // Then 2 - expect(manager.sortCriteria).toEqual({ [SORT_CRITERIA_S1]: sortValue1 } as Record); + // wait virtually 1s because navigation is debounced for 300ms by default + tick(1000); - expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith( - SORT_KEY, - JSON.stringify({ [SORT_CRITERIA_S1]: sortValue1 }) - ); + // Then + expect(manager.sortCriteria).toEqual( + {} as Record, + ); - expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); - expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); - expect(urlStateManagerStub.navigateToUrl).toHaveBeenCalledTimes(1); + expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith( + SORT_KEY, + null, + ); - expect(consoleErrorSpy).toHaveBeenCalledWith('FiltersManager: Failed to update Browser Url', navigateToUrlError); - })); - }); + expect(observerSpy1.calls.count()).toEqual(1); + expect(observerSpy1).toHaveBeenCalledWith([ + [SORT_CRITERIA_S1, null, "sort"], + [SORT_CRITERIA_S2, null, "sort"], + [SORT_CRITERIA_S3, null, "sort"], + ]); - describe('|clearSort|', () => { - let observerError: Error; - let observerSpy1: jasmine.Spy; - let observerSpy2: jasmine.Spy; - let consoleErrorSpy: jasmine.Spy; - - beforeEach(() => { - const sortValue1 = 's1v'; - - const mutationObserver1 = new MutationObserver(); - const mutationObserver2 = new MutationObserver(); - observerError = new Error('observer throws error'); - observerSpy1 = spyOn(mutationObserver1, 'observer').and.throwError(observerError); - observerSpy2 = spyOn(mutationObserver2, 'observer').and.callThrough(); - consoleErrorSpy = spyOn(console, 'error').and.callFake(CallFake); - - // prerequisites manager should have - manager.sortCriteria[SORT_CRITERIA_S1] = sortValue1; - manager.sortCriteria[SORT_CRITERIA_S2] = null; - manager.sortCriteria[SORT_CRITERIA_S3] = undefined; - - manager.registerMutationObserver(mutationObserver1.observer); - manager.registerMutationObserver(mutationObserver2.observer); - - // Then 1 - expect(manager.sortCriteria).toEqual({ - [SORT_CRITERIA_S1]: sortValue1, - [SORT_CRITERIA_S2]: null, - [SORT_CRITERIA_S3]: undefined - } as Record); - }); - - it(`should verify will clear all existing sort, serialize to URLStateManager, update URL by default and notify mutation observers`, fakeAsync(() => { - // When - manager.clearSort(); - manager.clearSort(); - - // wait virtually 1s because navigation is debounced for 300ms by default - tick(1000); - - // Then - expect(manager.sortCriteria).toEqual({} as Record); - - expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith(SORT_KEY, null); - - expect(observerSpy1.calls.count()).toEqual(1); - expect(observerSpy1.calls.argsFor(0)).toEqual([ - [ - [SORT_CRITERIA_S1, null, 'sort'], - [SORT_CRITERIA_S2, null, 'sort'], - [SORT_CRITERIA_S3, null, 'sort'] - ] - ]); - - expect(observerSpy2.calls.count()).toEqual(1); - expect(observerSpy2.calls.argsFor(0)).toEqual([ - [ - [SORT_CRITERIA_S1, null, 'sort'], - [SORT_CRITERIA_S2, null, 'sort'], - [SORT_CRITERIA_S3, null, 'sort'] - ] - ]); - - expect(consoleErrorSpy).toHaveBeenCalledWith('FiltersManager: Failed to notify mutation observers', observerError); - - expect(urlStateManagerStub.locationToURL).toHaveBeenCalledTimes(1); - expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); - expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); - })); - - it(`should verify will clear all existing sort, serialize to URLStateManager, and won't update URL and would notify mutation observers`, fakeAsync(() => { - // When - manager.clearSort(false); - manager.clearSort(false); - - // wait virtually 1s because navigation is debounced for 300ms by default - tick(1000); - - // Then - expect(manager.sortCriteria).toEqual({} as Record); - - expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith(SORT_KEY, null); - - expect(observerSpy1.calls.count()).toEqual(1); - expect(observerSpy1).toHaveBeenCalledWith([ - [SORT_CRITERIA_S1, null, 'sort'], - [SORT_CRITERIA_S2, null, 'sort'], - [SORT_CRITERIA_S3, null, 'sort'] - ]); - - expect(observerSpy2.calls.count()).toEqual(1); - expect(observerSpy2).toHaveBeenCalledWith([ - [SORT_CRITERIA_S1, null, 'sort'], - [SORT_CRITERIA_S2, null, 'sort'], - [SORT_CRITERIA_S3, null, 'sort'] - ]); - - expect(consoleErrorSpy).toHaveBeenCalledWith('FiltersManager: Failed to notify mutation observers', observerError); - - expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); - expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); - expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); - })); - - it(`should verify will clear all existing sort, serialize to URLStateManager, update URL by default and won't notify mutation observers`, fakeAsync(() => { - // Given - manager.changeUpdateStrategy('replaceToURL'); - - // When - manager.clearSort(true, false); - manager.clearSort(true); - - // wait virtually 1s because navigation is debounced for 300ms by default - tick(1000); - - // Then - expect(manager.sortCriteria).toEqual({} as Record); - - expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith(SORT_KEY, null); - - expect(observerSpy1).not.toHaveBeenCalled(); - expect(observerSpy2).not.toHaveBeenCalled(); - - expect(consoleErrorSpy).not.toHaveBeenCalled(); - - expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); - expect(urlStateManagerStub.replaceToUrl).toHaveBeenCalled(); - expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); - })); - }); + expect(observerSpy2.calls.count()).toEqual(1); + expect(observerSpy2).toHaveBeenCalledWith([ + [SORT_CRITERIA_S1, null, "sort"], + [SORT_CRITERIA_S2, null, "sort"], + [SORT_CRITERIA_S3, null, "sort"], + ]); + + expect(consoleErrorSpy).toHaveBeenCalledWith( + "FiltersManager: Failed to notify mutation observers", + observerError, + ); + + expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); + expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); + expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); + })); + + it(`should verify will clear all existing sort, serialize to URLStateManager, update URL by default and won't notify mutation observers`, fakeAsync(() => { + // Given + manager.changeUpdateStrategy("replaceToURL"); - describe('|clear|', () => { - it('should verify will invoke correct methods with correct parameters', () => { - // Given - const clearFiltersSpy = spyOn(manager, 'clearFilters').and.callFake(CallFake); - const clearSortSpy = spyOn(manager, 'clearSort').and.callFake(CallFake); + // When + manager.clearSort(true, false); + manager.clearSort(true); - // When 1 - manager.clear(); + // wait virtually 1s because navigation is debounced for 300ms by default + tick(1000); - // When 2 - manager.clear(true, true); + // Then + expect(manager.sortCriteria).toEqual( + {} as Record, + ); - // When 3 - manager.clear(false, false); + expect(urlStateManagerStub.setQueryParam).toHaveBeenCalledWith( + SORT_KEY, + null, + ); - // Then - expect(clearFiltersSpy.calls.argsFor(0)).toEqual([true, true]); - expect(clearSortSpy.calls.argsFor(0)).toEqual([true, true]); + expect(observerSpy1).not.toHaveBeenCalled(); + expect(observerSpy2).not.toHaveBeenCalled(); - expect(clearFiltersSpy.calls.argsFor(1)).toEqual([true, true]); - expect(clearSortSpy.calls.argsFor(1)).toEqual([true, true]); + expect(consoleErrorSpy).not.toHaveBeenCalled(); - expect(clearFiltersSpy.calls.argsFor(2)).toEqual([false, false]); - expect(clearSortSpy.calls.argsFor(2)).toEqual([false, false]); - }); - }); + expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); + expect(urlStateManagerStub.replaceToUrl).toHaveBeenCalled(); + expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); + })); + }); + + describe("|clear|", () => { + it("should verify will invoke correct methods with correct parameters", () => { + // Given + const clearFiltersSpy = spyOn(manager, "clearFilters").and.callFake( + CallFake, + ); + const clearSortSpy = spyOn(manager, "clearSort").and.callFake(CallFake); + + // When 1 + manager.clear(); + + // When 2 + manager.clear(true, true); + + // When 3 + manager.clear(false, false); + + // Then + expect(clearFiltersSpy.calls.argsFor(0)).toEqual([true, true]); + expect(clearSortSpy.calls.argsFor(0)).toEqual([true, true]); + + expect(clearFiltersSpy.calls.argsFor(1)).toEqual([true, true]); + expect(clearSortSpy.calls.argsFor(1)).toEqual([true, true]); + + expect(clearFiltersSpy.calls.argsFor(2)).toEqual([false, false]); + expect(clearSortSpy.calls.argsFor(2)).toEqual([false, false]); + }); + }); + + describe("|bulkUpdate|", () => { + it(`should verify if value is Nil won't execute anything`, fakeAsync(() => { + // Given + const filterValue1 = "f1v"; + const filterValue2 = "f2v"; + const sortValue1 = "s1v"; + const sortValue2 = "s2v"; + const mutationObserver = new MutationObserver(); + const observerSpy = spyOn( + mutationObserver, + "observer", + ).and.callThrough(); + + // prerequisites manager should have + manager.filterCriteria[FILTER_CRITERIA_F1] = filterValue1; + manager.filterCriteria[FILTER_CRITERIA_F2] = filterValue2; + + manager.sortCriteria[SORT_CRITERIA_S1] = sortValue1; + manager.sortCriteria[SORT_CRITERIA_S2] = sortValue2; + + manager.registerMutationObserver(mutationObserver.observer); + + // Then 1 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F1]: filterValue1, + [FILTER_CRITERIA_F2]: filterValue2, + } as Record); + expect(manager.sortCriteria).toEqual({ + [SORT_CRITERIA_S1]: sortValue1, + [SORT_CRITERIA_S2]: sortValue2, + } as Record); + + // When + manager.bulkUpdate(null); + + tick(1000); + + // Then 2 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F1]: filterValue1, + [FILTER_CRITERIA_F2]: filterValue2, + } as Record); + expect(manager.sortCriteria).toEqual({ + [SORT_CRITERIA_S1]: sortValue1, + [SORT_CRITERIA_S2]: sortValue2, + } as Record); + + expect(urlStateManagerStub.setQueryParam).not.toHaveBeenCalled(); + + expect(observerSpy).not.toHaveBeenCalled(); + + expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); + expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); + expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); + })); + + it(`should verify will update values from Array of key-value (criteria-value) tuples, filter and sort`, fakeAsync(() => { + // Given + const filterValue1 = "f1v,f11v"; + const filterValue3 = "f3v"; + const filterValue4 = "f4v,f44v,f444v"; + const sortValue1 = "s1v"; + const sortValue2 = "-1"; + const sortValue3 = "s3v"; + const sortValue4 = "s4v"; + + const observerError = new Error("observer throws error"); + + const mutationObserver1 = new MutationObserver(); + const observerSpy1 = spyOn( + mutationObserver1, + "observer", + ).and.callThrough(); + const mutationObserver2 = new MutationObserver(); + const observerSpy2 = spyOn( + mutationObserver2, + "observer", + ).and.callThrough(); + const mutationObserver3 = new MutationObserver(); + const observerSpy3 = spyOn( + mutationObserver3, + "observer", + ).and.throwError(observerError); + + const consoleErrorSpy = spyOn(console, "error").and.callFake(CallFake); + + // prerequisites manager should have + manager.filterCriteria[FILTER_CRITERIA_F1] = filterValue1; + manager.filterCriteria[FILTER_CRITERIA_F3] = filterValue3; + manager.sortCriteria[SORT_CRITERIA_S2] = sortValue2; + manager.sortCriteria[SORT_CRITERIA_S3] = sortValue3; + manager.sortCriteria[SORT_CRITERIA_S4] = sortValue4; + + manager.registerMutationObserver(mutationObserver1.observer); + manager.registerMutationObserver(mutationObserver2.observer); + manager.registerMutationObserver(mutationObserver3.observer); + + manager.deleteMutationObserver(mutationObserver2.observer); + + // Then 1 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F1]: filterValue1, + [FILTER_CRITERIA_F3]: filterValue3, + } as Record); + expect(manager.sortCriteria).toEqual({ + [SORT_CRITERIA_S2]: sortValue2, + [SORT_CRITERIA_S3]: sortValue3, + [SORT_CRITERIA_S4]: sortValue4, + } as Record); + + // When + manager.bulkUpdate([ + [SORT_CRITERIA_S1, sortValue1, "sort"], + [FILTER_CRITERIA_F1, null, "filter"], + [FILTER_CRITERIA_F3, filterValue3, "filter"], + [SORT_CRITERIA_S3, null, "sort"], + [FILTER_CRITERIA_F2, null, "filter"], + ["someSort", "-1", "sort"] as unknown as KeyValueTuple< + SORT_CRITERIA_UNION, + string + >, + [FILTER_CRITERIA_F4, filterValue4, "filter"], + ["someFilter", "testValue", "filter"] as unknown as KeyValueTuple< + FILTER_CRITERIA_UNION, + string + >, + [SORT_CRITERIA_S2, sortValue2, "sort"], + [SORT_CRITERIA_S4, "", "sort"], + ]); + + tick(1000); + + // Then 2 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F3]: filterValue3, + [FILTER_CRITERIA_F4]: filterValue4, + } as Record); + + expect(manager.sortCriteria).toEqual({ + [SORT_CRITERIA_S2]: parseInt(sortValue2, 10) as unknown, + [SORT_CRITERIA_S1]: sortValue1, + } as Record); + + expect(urlStateManagerStub.setQueryParam.calls.argsFor(0)).toEqual([ + FILTER_KEY, + JSON.stringify({ + [FILTER_CRITERIA_F3]: filterValue3, + [FILTER_CRITERIA_F4]: filterValue4, + }), + ]); + + expect(urlStateManagerStub.setQueryParam.calls.argsFor(1)).toEqual([ + SORT_KEY, + JSON.stringify({ + [SORT_CRITERIA_S2]: parseInt(sortValue2, 10), + [SORT_CRITERIA_S1]: sortValue1, + }), + ]); + + expect(observerSpy1).toHaveBeenCalledTimes(1); + expect(observerSpy1).toHaveBeenCalledWith([ + [FILTER_CRITERIA_F1, null, "filter"], + [FILTER_CRITERIA_F4, filterValue4, "filter"], + [SORT_CRITERIA_S1, sortValue1, "sort"], + [ + SORT_CRITERIA_S2, + parseInt(sortValue2, 10) as unknown as string, + "sort", + ], + [SORT_CRITERIA_S3, null, "sort"], + [SORT_CRITERIA_S4, null, "sort"], + ]); + + expect(observerSpy2).not.toHaveBeenCalled(); + + expect(observerSpy3).toHaveBeenCalledTimes(1); + expect(observerSpy3).toHaveBeenCalledWith([ + [FILTER_CRITERIA_F1, null, "filter"], + [FILTER_CRITERIA_F4, filterValue4, "filter"], + [SORT_CRITERIA_S1, sortValue1, "sort"], + [ + SORT_CRITERIA_S2, + parseInt(sortValue2, 10) as unknown as string, + "sort", + ], + [SORT_CRITERIA_S3, null, "sort"], + [SORT_CRITERIA_S4, null, "sort"], + ]); + + expect(consoleErrorSpy).toHaveBeenCalledWith( + `FiltersManager: Failed to notify mutation observers`, + observerError, + ); + + expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); + expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); + expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); + })); + + it(`should verify will update values from Array of key-value (criteria-value) tuples, filter and sort and clear previous values`, fakeAsync(() => { + // Given + const filterValue1 = "f1v,f11v"; + const filterValue3 = "f3v"; + const filterValue4 = "f4v,f44v,f444v"; + const sortValue1 = "s1v"; + const sortValue2 = "-1"; + const sortValue3 = "s3v"; + const sortValue4 = "s4v"; + + const observerError = new Error("observer throws error"); + + const mutationObserver1 = new MutationObserver(); + const observerSpy1 = spyOn( + mutationObserver1, + "observer", + ).and.callThrough(); + const mutationObserver2 = new MutationObserver(); + const observerSpy2 = spyOn( + mutationObserver2, + "observer", + ).and.callThrough(); + const mutationObserver3 = new MutationObserver(); + const observerSpy3 = spyOn( + mutationObserver3, + "observer", + ).and.throwError(observerError); + + const consoleErrorSpy = spyOn(console, "error").and.callFake(CallFake); + + // prerequisites manager should have + manager.filterCriteria[FILTER_CRITERIA_F1] = filterValue1; + manager.filterCriteria[FILTER_CRITERIA_F3] = filterValue3; + manager.sortCriteria[SORT_CRITERIA_S2] = sortValue2; + manager.sortCriteria[SORT_CRITERIA_S3] = sortValue3; + manager.sortCriteria[SORT_CRITERIA_S4] = sortValue4; + + manager.registerMutationObserver(mutationObserver1.observer); + manager.registerMutationObserver(mutationObserver2.observer); + manager.registerMutationObserver(mutationObserver3.observer); + + manager.deleteMutationObserver(mutationObserver2.observer); + + // Then 1 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F1]: filterValue1, + [FILTER_CRITERIA_F3]: filterValue3, + } as Record); + expect(manager.sortCriteria).toEqual({ + [SORT_CRITERIA_S2]: sortValue2, + [SORT_CRITERIA_S3]: sortValue3, + [SORT_CRITERIA_S4]: sortValue4, + } as Record); + + // When + manager.bulkUpdate( + [ + [SORT_CRITERIA_S1, sortValue1, "sort"], + [FILTER_CRITERIA_F3, filterValue3, "filter"], + [FILTER_CRITERIA_F2, null, "filter"], + ["someSort", "-1", "sort"] as unknown as KeyValueTuple< + SORT_CRITERIA_UNION, + string + >, + [FILTER_CRITERIA_F4, filterValue4, "filter"], + ["someFilter", "testValue", "filter"] as unknown as KeyValueTuple< + FILTER_CRITERIA_UNION, + string + >, + [SORT_CRITERIA_S2, sortValue2, "sort"], + [SORT_CRITERIA_S4, "", "sort"], + ], + true, + ); + + tick(1000); + + // Then 2 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F3]: filterValue3, + [FILTER_CRITERIA_F4]: filterValue4, + } as Record); + + expect(manager.sortCriteria).toEqual({ + [SORT_CRITERIA_S2]: parseInt(sortValue2, 10) as unknown, + [SORT_CRITERIA_S1]: sortValue1, + } as Record); + + expect(urlStateManagerStub.setQueryParam.calls.argsFor(0)).toEqual([ + FILTER_KEY, + JSON.stringify({ + [FILTER_CRITERIA_F3]: filterValue3, + [FILTER_CRITERIA_F4]: filterValue4, + }), + ]); + + expect(urlStateManagerStub.setQueryParam.calls.argsFor(1)).toEqual([ + SORT_KEY, + JSON.stringify({ + [SORT_CRITERIA_S2]: parseInt(sortValue2, 10), + [SORT_CRITERIA_S1]: sortValue1, + }), + ]); + + expect(observerSpy1).toHaveBeenCalledTimes(1); + expect(observerSpy1).toHaveBeenCalledWith([ + [FILTER_CRITERIA_F1, null, "filter"], + [FILTER_CRITERIA_F4, filterValue4, "filter"], + [SORT_CRITERIA_S1, sortValue1, "sort"], + [ + SORT_CRITERIA_S2, + parseInt(sortValue2, 10) as unknown as string, + "sort", + ], + [SORT_CRITERIA_S3, null, "sort"], + [SORT_CRITERIA_S4, null, "sort"], + ]); + + expect(observerSpy2).not.toHaveBeenCalled(); + + expect(observerSpy3).toHaveBeenCalledTimes(1); + expect(observerSpy3).toHaveBeenCalledWith([ + [FILTER_CRITERIA_F1, null, "filter"], + [FILTER_CRITERIA_F4, filterValue4, "filter"], + [SORT_CRITERIA_S1, sortValue1, "sort"], + [ + SORT_CRITERIA_S2, + parseInt(sortValue2, 10) as unknown as string, + "sort", + ], + [SORT_CRITERIA_S3, null, "sort"], + [SORT_CRITERIA_S4, null, "sort"], + ]); + + expect(consoleErrorSpy).toHaveBeenCalledWith( + `FiltersManager: Failed to notify mutation observers`, + observerError, + ); - describe('|bulkUpdate|', () => { - it(`should verify if value is Nil won't execute anything`, fakeAsync(() => { - // Given - const filterValue1 = 'f1v'; - const filterValue2 = 'f2v'; - const sortValue1 = 's1v'; - const sortValue2 = 's2v'; - const mutationObserver = new MutationObserver(); - const observerSpy = spyOn(mutationObserver, 'observer').and.callThrough(); - - // prerequisites manager should have - manager.filterCriteria[FILTER_CRITERIA_F1] = filterValue1; - manager.filterCriteria[FILTER_CRITERIA_F2] = filterValue2; - - manager.sortCriteria[SORT_CRITERIA_S1] = sortValue1; - manager.sortCriteria[SORT_CRITERIA_S2] = sortValue2; - - manager.registerMutationObserver(mutationObserver.observer); - - // Then 1 - expect(manager.filterCriteria).toEqual({ - [FILTER_CRITERIA_F1]: filterValue1, - [FILTER_CRITERIA_F2]: filterValue2 - } as Record); - expect(manager.sortCriteria).toEqual({ - [SORT_CRITERIA_S1]: sortValue1, - [SORT_CRITERIA_S2]: sortValue2 - } as Record); - - // When - manager.bulkUpdate(null); - - tick(1000); - - // Then 2 - expect(manager.filterCriteria).toEqual({ - [FILTER_CRITERIA_F1]: filterValue1, - [FILTER_CRITERIA_F2]: filterValue2 - } as Record); - expect(manager.sortCriteria).toEqual({ - [SORT_CRITERIA_S1]: sortValue1, - [SORT_CRITERIA_S2]: sortValue2 - } as Record); - - expect(urlStateManagerStub.setQueryParam).not.toHaveBeenCalled(); - - expect(observerSpy).not.toHaveBeenCalled(); - - expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); - expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); - expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); - })); - - it(`should verify will update values from Array of key-value (criteria-value) tuples, filter and sort`, fakeAsync(() => { - // Given - const filterValue1 = 'f1v,f11v'; - const filterValue3 = 'f3v'; - const filterValue4 = 'f4v,f44v,f444v'; - const sortValue1 = 's1v'; - const sortValue2 = '-1'; - const sortValue3 = 's3v'; - const sortValue4 = 's4v'; - - const observerError = new Error('observer throws error'); - - const mutationObserver1 = new MutationObserver(); - const observerSpy1 = spyOn(mutationObserver1, 'observer').and.callThrough(); - const mutationObserver2 = new MutationObserver(); - const observerSpy2 = spyOn(mutationObserver2, 'observer').and.callThrough(); - const mutationObserver3 = new MutationObserver(); - const observerSpy3 = spyOn(mutationObserver3, 'observer').and.throwError(observerError); - - const consoleErrorSpy = spyOn(console, 'error').and.callFake(CallFake); - - // prerequisites manager should have - manager.filterCriteria[FILTER_CRITERIA_F1] = filterValue1; - manager.filterCriteria[FILTER_CRITERIA_F3] = filterValue3; - manager.sortCriteria[SORT_CRITERIA_S2] = sortValue2; - manager.sortCriteria[SORT_CRITERIA_S3] = sortValue3; - manager.sortCriteria[SORT_CRITERIA_S4] = sortValue4; - - manager.registerMutationObserver(mutationObserver1.observer); - manager.registerMutationObserver(mutationObserver2.observer); - manager.registerMutationObserver(mutationObserver3.observer); - - manager.deleteMutationObserver(mutationObserver2.observer); - - // Then 1 - expect(manager.filterCriteria).toEqual({ - [FILTER_CRITERIA_F1]: filterValue1, - [FILTER_CRITERIA_F3]: filterValue3 - } as Record); - expect(manager.sortCriteria).toEqual({ - [SORT_CRITERIA_S2]: sortValue2, - [SORT_CRITERIA_S3]: sortValue3, - [SORT_CRITERIA_S4]: sortValue4 - } as Record); - - // When - manager.bulkUpdate([ - [SORT_CRITERIA_S1, sortValue1, 'sort'], - [FILTER_CRITERIA_F1, null, 'filter'], - [FILTER_CRITERIA_F3, filterValue3, 'filter'], - [SORT_CRITERIA_S3, null, 'sort'], - [FILTER_CRITERIA_F2, null, 'filter'], - ['someSort', '-1', 'sort'] as unknown as KeyValueTuple, - [FILTER_CRITERIA_F4, filterValue4, 'filter'], - ['someFilter', 'testValue', 'filter'] as unknown as KeyValueTuple, - [SORT_CRITERIA_S2, sortValue2, 'sort'], - [SORT_CRITERIA_S4, '', 'sort'] - ]); - - tick(1000); - - // Then 2 - expect(manager.filterCriteria).toEqual({ - [FILTER_CRITERIA_F3]: filterValue3, - [FILTER_CRITERIA_F4]: filterValue4 - } as Record); - - expect(manager.sortCriteria).toEqual({ - [SORT_CRITERIA_S2]: parseInt(sortValue2, 10) as unknown, - [SORT_CRITERIA_S1]: sortValue1 - } as Record); - - expect(urlStateManagerStub.setQueryParam.calls.argsFor(0)).toEqual([ - FILTER_KEY, - JSON.stringify({ [FILTER_CRITERIA_F3]: filterValue3, [FILTER_CRITERIA_F4]: filterValue4 }) - ]); - - expect(urlStateManagerStub.setQueryParam.calls.argsFor(1)).toEqual([ - SORT_KEY, - JSON.stringify({ [SORT_CRITERIA_S2]: parseInt(sortValue2, 10), [SORT_CRITERIA_S1]: sortValue1 }) - ]); - - expect(observerSpy1).toHaveBeenCalledTimes(1); - expect(observerSpy1).toHaveBeenCalledWith([ - [FILTER_CRITERIA_F1, null, 'filter'], - [FILTER_CRITERIA_F4, filterValue4, 'filter'], - [SORT_CRITERIA_S1, sortValue1, 'sort'], - [SORT_CRITERIA_S2, parseInt(sortValue2, 10) as unknown as string, 'sort'], - [SORT_CRITERIA_S3, null, 'sort'], - [SORT_CRITERIA_S4, null, 'sort'] - ]); - - expect(observerSpy2).not.toHaveBeenCalled(); - - expect(observerSpy3).toHaveBeenCalledTimes(1); - expect(observerSpy3).toHaveBeenCalledWith([ - [FILTER_CRITERIA_F1, null, 'filter'], - [FILTER_CRITERIA_F4, filterValue4, 'filter'], - [SORT_CRITERIA_S1, sortValue1, 'sort'], - [SORT_CRITERIA_S2, parseInt(sortValue2, 10) as unknown as string, 'sort'], - [SORT_CRITERIA_S3, null, 'sort'], - [SORT_CRITERIA_S4, null, 'sort'] - ]); - - expect(consoleErrorSpy).toHaveBeenCalledWith(`FiltersManager: Failed to notify mutation observers`, observerError); - - expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); - expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); - expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); - })); - - it(`should verify will update values from Array of key-value (criteria-value) tuples, filter and sort and clear previous values`, fakeAsync(() => { - // Given - const filterValue1 = 'f1v,f11v'; - const filterValue3 = 'f3v'; - const filterValue4 = 'f4v,f44v,f444v'; - const sortValue1 = 's1v'; - const sortValue2 = '-1'; - const sortValue3 = 's3v'; - const sortValue4 = 's4v'; - - const observerError = new Error('observer throws error'); - - const mutationObserver1 = new MutationObserver(); - const observerSpy1 = spyOn(mutationObserver1, 'observer').and.callThrough(); - const mutationObserver2 = new MutationObserver(); - const observerSpy2 = spyOn(mutationObserver2, 'observer').and.callThrough(); - const mutationObserver3 = new MutationObserver(); - const observerSpy3 = spyOn(mutationObserver3, 'observer').and.throwError(observerError); - - const consoleErrorSpy = spyOn(console, 'error').and.callFake(CallFake); - - // prerequisites manager should have - manager.filterCriteria[FILTER_CRITERIA_F1] = filterValue1; - manager.filterCriteria[FILTER_CRITERIA_F3] = filterValue3; - manager.sortCriteria[SORT_CRITERIA_S2] = sortValue2; - manager.sortCriteria[SORT_CRITERIA_S3] = sortValue3; - manager.sortCriteria[SORT_CRITERIA_S4] = sortValue4; - - manager.registerMutationObserver(mutationObserver1.observer); - manager.registerMutationObserver(mutationObserver2.observer); - manager.registerMutationObserver(mutationObserver3.observer); - - manager.deleteMutationObserver(mutationObserver2.observer); - - // Then 1 - expect(manager.filterCriteria).toEqual({ - [FILTER_CRITERIA_F1]: filterValue1, - [FILTER_CRITERIA_F3]: filterValue3 - } as Record); - expect(manager.sortCriteria).toEqual({ - [SORT_CRITERIA_S2]: sortValue2, - [SORT_CRITERIA_S3]: sortValue3, - [SORT_CRITERIA_S4]: sortValue4 - } as Record); - - // When - manager.bulkUpdate( - [ - [SORT_CRITERIA_S1, sortValue1, 'sort'], - [FILTER_CRITERIA_F3, filterValue3, 'filter'], - [FILTER_CRITERIA_F2, null, 'filter'], - ['someSort', '-1', 'sort'] as unknown as KeyValueTuple, - [FILTER_CRITERIA_F4, filterValue4, 'filter'], - ['someFilter', 'testValue', 'filter'] as unknown as KeyValueTuple, - [SORT_CRITERIA_S2, sortValue2, 'sort'], - [SORT_CRITERIA_S4, '', 'sort'] - ], - true - ); - - tick(1000); - - // Then 2 - expect(manager.filterCriteria).toEqual({ - [FILTER_CRITERIA_F3]: filterValue3, - [FILTER_CRITERIA_F4]: filterValue4 - } as Record); - - expect(manager.sortCriteria).toEqual({ - [SORT_CRITERIA_S2]: parseInt(sortValue2, 10) as unknown, - [SORT_CRITERIA_S1]: sortValue1 - } as Record); - - expect(urlStateManagerStub.setQueryParam.calls.argsFor(0)).toEqual([ - FILTER_KEY, - JSON.stringify({ [FILTER_CRITERIA_F3]: filterValue3, [FILTER_CRITERIA_F4]: filterValue4 }) - ]); - - expect(urlStateManagerStub.setQueryParam.calls.argsFor(1)).toEqual([ - SORT_KEY, - JSON.stringify({ [SORT_CRITERIA_S2]: parseInt(sortValue2, 10), [SORT_CRITERIA_S1]: sortValue1 }) - ]); - - expect(observerSpy1).toHaveBeenCalledTimes(1); - expect(observerSpy1).toHaveBeenCalledWith([ - [FILTER_CRITERIA_F1, null, 'filter'], - [FILTER_CRITERIA_F4, filterValue4, 'filter'], - [SORT_CRITERIA_S1, sortValue1, 'sort'], - [SORT_CRITERIA_S2, parseInt(sortValue2, 10) as unknown as string, 'sort'], - [SORT_CRITERIA_S3, null, 'sort'], - [SORT_CRITERIA_S4, null, 'sort'] - ]); - - expect(observerSpy2).not.toHaveBeenCalled(); - - expect(observerSpy3).toHaveBeenCalledTimes(1); - expect(observerSpy3).toHaveBeenCalledWith([ - [FILTER_CRITERIA_F1, null, 'filter'], - [FILTER_CRITERIA_F4, filterValue4, 'filter'], - [SORT_CRITERIA_S1, sortValue1, 'sort'], - [SORT_CRITERIA_S2, parseInt(sortValue2, 10) as unknown as string, 'sort'], - [SORT_CRITERIA_S3, null, 'sort'], - [SORT_CRITERIA_S4, null, 'sort'] - ]); - - expect(consoleErrorSpy).toHaveBeenCalledWith(`FiltersManager: Failed to notify mutation observers`, observerError); - - expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); - expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); - expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); - })); - - it(`should verify will update values from object of key-value (criteria-value) properties, filter and sort`, fakeAsync(() => { - // Given - const filterValue1 = 'f1v,f11v'; - const filterValue3 = 'f3v'; - const sortValue1 = 's1v'; - const sortValue2 = '-1'; - const sortValue3 = 's3v'; - const sortValue4 = 's4v'; - - const observerError = new Error('observer throws error'); - - const mutationObserver1 = new MutationObserver(); - const observerSpy1 = spyOn(mutationObserver1, 'observer').and.throwError(observerError); - const mutationObserver2 = new MutationObserver(); - const observerSpy2 = spyOn(mutationObserver2, 'observer').and.callThrough(); - const mutationObserver3 = new MutationObserver(); - const observerSpy3 = spyOn(mutationObserver3, 'observer').and.callThrough(); - - const consoleErrorSpy = spyOn(console, 'error').and.callFake(CallFake); - - // prerequisites manager should have - manager.filterCriteria[FILTER_CRITERIA_F1] = filterValue1; - manager.filterCriteria[FILTER_CRITERIA_F3] = filterValue3; - manager.sortCriteria[SORT_CRITERIA_S2] = sortValue2; - manager.sortCriteria[SORT_CRITERIA_S3] = sortValue3; - manager.sortCriteria[SORT_CRITERIA_S4] = sortValue4; - - manager.registerMutationObserver(mutationObserver1.observer); - manager.registerMutationObserver(mutationObserver2.observer); - manager.registerMutationObserver(mutationObserver3.observer); - - manager.deleteMutationObserver(mutationObserver2.observer); - - // Then 1 - expect(manager.filterCriteria).toEqual({ - [FILTER_CRITERIA_F1]: filterValue1, - [FILTER_CRITERIA_F3]: filterValue3 - } as Record); - expect(manager.sortCriteria).toEqual({ - [SORT_CRITERIA_S2]: sortValue2, - [SORT_CRITERIA_S3]: sortValue3, - [SORT_CRITERIA_S4]: sortValue4 - } as Record); - - // When - manager.bulkUpdate({ - [FILTER_KEY]: JSON.stringify({ - [FILTER_CRITERIA_F3]: `${filterValue3}10`, - [FILTER_CRITERIA_F4]: undefined, - someFilter: 'testValue' - }), - [SORT_KEY]: JSON.stringify({ - [SORT_CRITERIA_S1]: sortValue1, - someSort: -1, - [SORT_CRITERIA_S2]: sortValue2, - [SORT_CRITERIA_S4]: undefined - }) - }); - - tick(1000); - - // Then 2 - expect(manager.filterCriteria).toEqual({ - [FILTER_CRITERIA_F1]: filterValue1, - [FILTER_CRITERIA_F3]: `${filterValue3}10` - } as Record); - - expect(manager.sortCriteria).toEqual({ - [SORT_CRITERIA_S2]: parseInt(sortValue2, 10) as unknown, - [SORT_CRITERIA_S3]: sortValue3, - [SORT_CRITERIA_S4]: sortValue4, - [SORT_CRITERIA_S1]: sortValue1 - } as Record); - - expect(urlStateManagerStub.setQueryParam.calls.argsFor(0)).toEqual([ - FILTER_KEY, - JSON.stringify({ - [FILTER_CRITERIA_F1]: filterValue1, - [FILTER_CRITERIA_F3]: `${filterValue3}10` - }) - ]); - - expect(urlStateManagerStub.setQueryParam.calls.argsFor(1)).toEqual([ - SORT_KEY, - JSON.stringify({ - [SORT_CRITERIA_S2]: parseInt(sortValue2, 10), - [SORT_CRITERIA_S3]: sortValue3, - [SORT_CRITERIA_S4]: sortValue4, - [SORT_CRITERIA_S1]: sortValue1 - }) - ]); - - expect(observerSpy1).toHaveBeenCalledTimes(2); - expect(observerSpy1.calls.argsFor(0)).toEqual([[[FILTER_CRITERIA_F3, `${filterValue3}10`, 'filter']]]); - expect(observerSpy1.calls.argsFor(1)).toEqual([ - [ - [SORT_CRITERIA_S1, sortValue1, 'sort'], - [SORT_CRITERIA_S2, parseInt(sortValue2, 10) as unknown as string, 'sort'] - ] - ]); - - expect(observerSpy2).not.toHaveBeenCalled(); - - expect(observerSpy3).toHaveBeenCalledTimes(2); - expect(observerSpy3.calls.argsFor(0)).toEqual([[[FILTER_CRITERIA_F3, `${filterValue3}10`, 'filter']]]); - expect(observerSpy3.calls.argsFor(1)).toEqual([ - [ - [SORT_CRITERIA_S1, sortValue1, 'sort'], - [SORT_CRITERIA_S2, parseInt(sortValue2, 10) as unknown as string, 'sort'] - ] - ]); - - expect(consoleErrorSpy).toHaveBeenCalledWith(`FiltersManager: Failed to notify mutation observers`, observerError); - - expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); - expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); - expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); - })); - - it(`should verify will update values from object of key-value (criteria-value) properties, filter and sort and clear previous values`, fakeAsync(() => { - // Given - const filterValue1 = 'f1v,f11v'; - const filterValue3 = 'f3v'; - const filterValue4 = 'f4v,f44v,f444v'; - const sortValue1 = 's1v'; - const sortValue2 = '-1'; - const sortValue3 = 's3v'; - const sortValue4 = 's4v'; - - const observerError = new Error('observer throws error'); - - const mutationObserver1 = new MutationObserver(); - const observerSpy1 = spyOn(mutationObserver1, 'observer').and.throwError(observerError); - const mutationObserver2 = new MutationObserver(); - const observerSpy2 = spyOn(mutationObserver2, 'observer').and.callThrough(); - const mutationObserver3 = new MutationObserver(); - const observerSpy3 = spyOn(mutationObserver3, 'observer').and.callThrough(); - - const consoleErrorSpy = spyOn(console, 'error').and.callFake(CallFake); - - // prerequisites manager should have - manager.filterCriteria[FILTER_CRITERIA_F1] = filterValue1; - manager.filterCriteria[FILTER_CRITERIA_F3] = filterValue3; - manager.sortCriteria[SORT_CRITERIA_S2] = sortValue2; - manager.sortCriteria[SORT_CRITERIA_S3] = sortValue3; - manager.sortCriteria[SORT_CRITERIA_S4] = sortValue4; - - manager.registerMutationObserver(mutationObserver1.observer); - manager.registerMutationObserver(mutationObserver2.observer); - manager.registerMutationObserver(mutationObserver3.observer); - - manager.deleteMutationObserver(mutationObserver2.observer); - - // Then 1 - expect(manager.filterCriteria).toEqual({ - [FILTER_CRITERIA_F1]: filterValue1, - [FILTER_CRITERIA_F3]: filterValue3 - } as Record); - expect(manager.sortCriteria).toEqual({ - [SORT_CRITERIA_S2]: sortValue2, - [SORT_CRITERIA_S3]: sortValue3, - [SORT_CRITERIA_S4]: sortValue4 - } as Record); - - // When - manager.bulkUpdate( - { - [FILTER_KEY]: JSON.stringify({ - [FILTER_CRITERIA_F3]: `${filterValue3}10`, - [FILTER_CRITERIA_F4]: filterValue4, - someFilter: 'testValue' - }), - [SORT_KEY]: JSON.stringify({ - [SORT_CRITERIA_S1]: sortValue1, - someSort: -1, - [SORT_CRITERIA_S2]: sortValue2, - [SORT_CRITERIA_S4]: undefined - }) - }, - true - ); - - tick(1000); - - // Then 2 - expect(manager.filterCriteria).toEqual({ - [FILTER_CRITERIA_F3]: `${filterValue3}10`, - [FILTER_CRITERIA_F4]: filterValue4 - } as Record); - - expect(manager.sortCriteria).toEqual({ - [SORT_CRITERIA_S2]: parseInt(sortValue2, 10) as unknown, - [SORT_CRITERIA_S1]: sortValue1 - } as Record); - - expect(urlStateManagerStub.setQueryParam.calls.argsFor(0)).toEqual([ - FILTER_KEY, - JSON.stringify({ [FILTER_CRITERIA_F3]: `${filterValue3}10`, [FILTER_CRITERIA_F4]: filterValue4 }) - ]); - - expect(urlStateManagerStub.setQueryParam.calls.argsFor(1)).toEqual([ - SORT_KEY, - JSON.stringify({ [SORT_CRITERIA_S2]: parseInt(sortValue2, 10), [SORT_CRITERIA_S1]: sortValue1 }) - ]); - - expect(observerSpy1).toHaveBeenCalledTimes(2); - expect(observerSpy1.calls.argsFor(0)).toEqual([ - [ - [FILTER_CRITERIA_F1, null, 'filter'], - [FILTER_CRITERIA_F3, `${filterValue3}10`, 'filter'], - [FILTER_CRITERIA_F4, filterValue4, 'filter'] - ] - ]); - expect(observerSpy1.calls.argsFor(1)).toEqual([ - [ - [SORT_CRITERIA_S1, sortValue1, 'sort'], - [SORT_CRITERIA_S2, parseInt(sortValue2, 10) as unknown as string, 'sort'], - [SORT_CRITERIA_S3, null, 'sort'], - [SORT_CRITERIA_S4, null, 'sort'] - ] - ]); - - expect(observerSpy2).not.toHaveBeenCalled(); - - expect(observerSpy3).toHaveBeenCalledTimes(2); - expect(observerSpy3.calls.argsFor(0)).toEqual([ - [ - [FILTER_CRITERIA_F1, null, 'filter'], - [FILTER_CRITERIA_F3, `${filterValue3}10`, 'filter'], - [FILTER_CRITERIA_F4, filterValue4, 'filter'] - ] - ]); - expect(observerSpy3.calls.argsFor(1)).toEqual([ - [ - [SORT_CRITERIA_S1, sortValue1, 'sort'], - [SORT_CRITERIA_S2, parseInt(sortValue2, 10) as unknown as string, 'sort'], - [SORT_CRITERIA_S3, null, 'sort'], - [SORT_CRITERIA_S4, null, 'sort'] - ] - ]); - - expect(consoleErrorSpy).toHaveBeenCalledWith(`FiltersManager: Failed to notify mutation observers`, observerError); - - expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); - expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); - expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); - })); - - it(`should verify will update values from object of key-value (criteria-value) properties, filter and sort are missing and clear previous values`, fakeAsync(() => { - // Given - const filterValue1 = 'f1v,f11v'; - const filterValue3 = 'f3v'; - const sortValue2 = '-1'; - const sortValue3 = 's3v'; - const sortValue4 = 's4v'; - - const observerError = new Error('observer throws error'); - - const mutationObserver1 = new MutationObserver(); - const observerSpy1 = spyOn(mutationObserver1, 'observer').and.throwError(observerError); - const mutationObserver2 = new MutationObserver(); - const observerSpy2 = spyOn(mutationObserver2, 'observer').and.callThrough(); - const mutationObserver3 = new MutationObserver(); - const observerSpy3 = spyOn(mutationObserver3, 'observer').and.callThrough(); - - const consoleErrorSpy = spyOn(console, 'error').and.callFake(CallFake); - - // prerequisites manager should have - manager.filterCriteria[FILTER_CRITERIA_F1] = filterValue1; - manager.filterCriteria[FILTER_CRITERIA_F3] = filterValue3; - manager.sortCriteria[SORT_CRITERIA_S2] = sortValue2; - manager.sortCriteria[SORT_CRITERIA_S3] = sortValue3; - manager.sortCriteria[SORT_CRITERIA_S4] = sortValue4; - - manager.registerMutationObserver(mutationObserver1.observer); - manager.registerMutationObserver(mutationObserver2.observer); - manager.registerMutationObserver(mutationObserver3.observer); - - manager.deleteMutationObserver(mutationObserver2.observer); - - // Then 1 - expect(manager.filterCriteria).toEqual({ - [FILTER_CRITERIA_F1]: filterValue1, - [FILTER_CRITERIA_F3]: filterValue3 - } as Record); - expect(manager.sortCriteria).toEqual({ - [SORT_CRITERIA_S2]: sortValue2, - [SORT_CRITERIA_S3]: sortValue3, - [SORT_CRITERIA_S4]: sortValue4 - } as Record); - - // When - manager.bulkUpdate({} as Record, true); - - tick(1000); - - // Then 2 - expect(manager.filterCriteria).toEqual({} as Record); - - expect(manager.sortCriteria).toEqual({} as Record); - - expect(urlStateManagerStub.setQueryParam.calls.argsFor(0)).toEqual([FILTER_KEY, null]); - expect(urlStateManagerStub.setQueryParam.calls.argsFor(1)).toEqual([SORT_KEY, null]); - - expect(observerSpy1).toHaveBeenCalledTimes(2); - expect(observerSpy1.calls.argsFor(0)).toEqual([ - [ - [FILTER_CRITERIA_F1, null, 'filter'], - [FILTER_CRITERIA_F3, null, 'filter'] - ] - ]); - expect(observerSpy1.calls.argsFor(1)).toEqual([ - [ - [SORT_CRITERIA_S2, null, 'sort'], - [SORT_CRITERIA_S3, null, 'sort'], - [SORT_CRITERIA_S4, null, 'sort'] - ] - ]); - - expect(observerSpy2).not.toHaveBeenCalled(); - - expect(observerSpy3).toHaveBeenCalledTimes(2); - expect(observerSpy3.calls.argsFor(0)).toEqual([ - [ - [FILTER_CRITERIA_F1, null, 'filter'], - [FILTER_CRITERIA_F3, null, 'filter'] - ] - ]); - expect(observerSpy3.calls.argsFor(1)).toEqual([ - [ - [SORT_CRITERIA_S2, null, 'sort'], - [SORT_CRITERIA_S3, null, 'sort'], - [SORT_CRITERIA_S4, null, 'sort'] - ] - ]); - - expect(consoleErrorSpy).toHaveBeenCalledWith(`FiltersManager: Failed to notify mutation observers`, observerError); - - expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); - expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); - expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); - })); + expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); + expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); + expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); + })); + + it(`should verify will update values from object of key-value (criteria-value) properties, filter and sort`, fakeAsync(() => { + // Given + const filterValue1 = "f1v,f11v"; + const filterValue3 = "f3v"; + const sortValue1 = "s1v"; + const sortValue2 = "-1"; + const sortValue3 = "s3v"; + const sortValue4 = "s4v"; + + const observerError = new Error("observer throws error"); + + const mutationObserver1 = new MutationObserver(); + const observerSpy1 = spyOn( + mutationObserver1, + "observer", + ).and.throwError(observerError); + const mutationObserver2 = new MutationObserver(); + const observerSpy2 = spyOn( + mutationObserver2, + "observer", + ).and.callThrough(); + const mutationObserver3 = new MutationObserver(); + const observerSpy3 = spyOn( + mutationObserver3, + "observer", + ).and.callThrough(); + + const consoleErrorSpy = spyOn(console, "error").and.callFake(CallFake); + + // prerequisites manager should have + manager.filterCriteria[FILTER_CRITERIA_F1] = filterValue1; + manager.filterCriteria[FILTER_CRITERIA_F3] = filterValue3; + manager.sortCriteria[SORT_CRITERIA_S2] = sortValue2; + manager.sortCriteria[SORT_CRITERIA_S3] = sortValue3; + manager.sortCriteria[SORT_CRITERIA_S4] = sortValue4; + + manager.registerMutationObserver(mutationObserver1.observer); + manager.registerMutationObserver(mutationObserver2.observer); + manager.registerMutationObserver(mutationObserver3.observer); + + manager.deleteMutationObserver(mutationObserver2.observer); + + // Then 1 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F1]: filterValue1, + [FILTER_CRITERIA_F3]: filterValue3, + } as Record); + expect(manager.sortCriteria).toEqual({ + [SORT_CRITERIA_S2]: sortValue2, + [SORT_CRITERIA_S3]: sortValue3, + [SORT_CRITERIA_S4]: sortValue4, + } as Record); + + // When + manager.bulkUpdate({ + [FILTER_KEY]: JSON.stringify({ + [FILTER_CRITERIA_F3]: `${filterValue3}10`, + [FILTER_CRITERIA_F4]: undefined, + someFilter: "testValue", + }), + [SORT_KEY]: JSON.stringify({ + [SORT_CRITERIA_S1]: sortValue1, + someSort: -1, + [SORT_CRITERIA_S2]: sortValue2, + [SORT_CRITERIA_S4]: undefined, + }), }); + + tick(1000); + + // Then 2 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F1]: filterValue1, + [FILTER_CRITERIA_F3]: `${filterValue3}10`, + } as Record); + + expect(manager.sortCriteria).toEqual({ + [SORT_CRITERIA_S2]: parseInt(sortValue2, 10) as unknown, + [SORT_CRITERIA_S3]: sortValue3, + [SORT_CRITERIA_S4]: sortValue4, + [SORT_CRITERIA_S1]: sortValue1, + } as Record); + + expect(urlStateManagerStub.setQueryParam.calls.argsFor(0)).toEqual([ + FILTER_KEY, + JSON.stringify({ + [FILTER_CRITERIA_F1]: filterValue1, + [FILTER_CRITERIA_F3]: `${filterValue3}10`, + }), + ]); + + expect(urlStateManagerStub.setQueryParam.calls.argsFor(1)).toEqual([ + SORT_KEY, + JSON.stringify({ + [SORT_CRITERIA_S2]: parseInt(sortValue2, 10), + [SORT_CRITERIA_S3]: sortValue3, + [SORT_CRITERIA_S4]: sortValue4, + [SORT_CRITERIA_S1]: sortValue1, + }), + ]); + + expect(observerSpy1).toHaveBeenCalledTimes(2); + expect(observerSpy1.calls.argsFor(0)).toEqual([ + [[FILTER_CRITERIA_F3, `${filterValue3}10`, "filter"]], + ]); + expect(observerSpy1.calls.argsFor(1)).toEqual([ + [ + [SORT_CRITERIA_S1, sortValue1, "sort"], + [ + SORT_CRITERIA_S2, + parseInt(sortValue2, 10) as unknown as string, + "sort", + ], + ], + ]); + + expect(observerSpy2).not.toHaveBeenCalled(); + + expect(observerSpy3).toHaveBeenCalledTimes(2); + expect(observerSpy3.calls.argsFor(0)).toEqual([ + [[FILTER_CRITERIA_F3, `${filterValue3}10`, "filter"]], + ]); + expect(observerSpy3.calls.argsFor(1)).toEqual([ + [ + [SORT_CRITERIA_S1, sortValue1, "sort"], + [ + SORT_CRITERIA_S2, + parseInt(sortValue2, 10) as unknown as string, + "sort", + ], + ], + ]); + + expect(consoleErrorSpy).toHaveBeenCalledWith( + `FiltersManager: Failed to notify mutation observers`, + observerError, + ); + + expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); + expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); + expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); + })); + + it(`should verify will update values from object of key-value (criteria-value) properties, filter and sort and clear previous values`, fakeAsync(() => { + // Given + const filterValue1 = "f1v,f11v"; + const filterValue3 = "f3v"; + const filterValue4 = "f4v,f44v,f444v"; + const sortValue1 = "s1v"; + const sortValue2 = "-1"; + const sortValue3 = "s3v"; + const sortValue4 = "s4v"; + + const observerError = new Error("observer throws error"); + + const mutationObserver1 = new MutationObserver(); + const observerSpy1 = spyOn( + mutationObserver1, + "observer", + ).and.throwError(observerError); + const mutationObserver2 = new MutationObserver(); + const observerSpy2 = spyOn( + mutationObserver2, + "observer", + ).and.callThrough(); + const mutationObserver3 = new MutationObserver(); + const observerSpy3 = spyOn( + mutationObserver3, + "observer", + ).and.callThrough(); + + const consoleErrorSpy = spyOn(console, "error").and.callFake(CallFake); + + // prerequisites manager should have + manager.filterCriteria[FILTER_CRITERIA_F1] = filterValue1; + manager.filterCriteria[FILTER_CRITERIA_F3] = filterValue3; + manager.sortCriteria[SORT_CRITERIA_S2] = sortValue2; + manager.sortCriteria[SORT_CRITERIA_S3] = sortValue3; + manager.sortCriteria[SORT_CRITERIA_S4] = sortValue4; + + manager.registerMutationObserver(mutationObserver1.observer); + manager.registerMutationObserver(mutationObserver2.observer); + manager.registerMutationObserver(mutationObserver3.observer); + + manager.deleteMutationObserver(mutationObserver2.observer); + + // Then 1 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F1]: filterValue1, + [FILTER_CRITERIA_F3]: filterValue3, + } as Record); + expect(manager.sortCriteria).toEqual({ + [SORT_CRITERIA_S2]: sortValue2, + [SORT_CRITERIA_S3]: sortValue3, + [SORT_CRITERIA_S4]: sortValue4, + } as Record); + + // When + manager.bulkUpdate( + { + [FILTER_KEY]: JSON.stringify({ + [FILTER_CRITERIA_F3]: `${filterValue3}10`, + [FILTER_CRITERIA_F4]: filterValue4, + someFilter: "testValue", + }), + [SORT_KEY]: JSON.stringify({ + [SORT_CRITERIA_S1]: sortValue1, + someSort: -1, + [SORT_CRITERIA_S2]: sortValue2, + [SORT_CRITERIA_S4]: undefined, + }), + }, + true, + ); + + tick(1000); + + // Then 2 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F3]: `${filterValue3}10`, + [FILTER_CRITERIA_F4]: filterValue4, + } as Record); + + expect(manager.sortCriteria).toEqual({ + [SORT_CRITERIA_S2]: parseInt(sortValue2, 10) as unknown, + [SORT_CRITERIA_S1]: sortValue1, + } as Record); + + expect(urlStateManagerStub.setQueryParam.calls.argsFor(0)).toEqual([ + FILTER_KEY, + JSON.stringify({ + [FILTER_CRITERIA_F3]: `${filterValue3}10`, + [FILTER_CRITERIA_F4]: filterValue4, + }), + ]); + + expect(urlStateManagerStub.setQueryParam.calls.argsFor(1)).toEqual([ + SORT_KEY, + JSON.stringify({ + [SORT_CRITERIA_S2]: parseInt(sortValue2, 10), + [SORT_CRITERIA_S1]: sortValue1, + }), + ]); + + expect(observerSpy1).toHaveBeenCalledTimes(2); + expect(observerSpy1.calls.argsFor(0)).toEqual([ + [ + [FILTER_CRITERIA_F1, null, "filter"], + [FILTER_CRITERIA_F3, `${filterValue3}10`, "filter"], + [FILTER_CRITERIA_F4, filterValue4, "filter"], + ], + ]); + expect(observerSpy1.calls.argsFor(1)).toEqual([ + [ + [SORT_CRITERIA_S1, sortValue1, "sort"], + [ + SORT_CRITERIA_S2, + parseInt(sortValue2, 10) as unknown as string, + "sort", + ], + [SORT_CRITERIA_S3, null, "sort"], + [SORT_CRITERIA_S4, null, "sort"], + ], + ]); + + expect(observerSpy2).not.toHaveBeenCalled(); + + expect(observerSpy3).toHaveBeenCalledTimes(2); + expect(observerSpy3.calls.argsFor(0)).toEqual([ + [ + [FILTER_CRITERIA_F1, null, "filter"], + [FILTER_CRITERIA_F3, `${filterValue3}10`, "filter"], + [FILTER_CRITERIA_F4, filterValue4, "filter"], + ], + ]); + expect(observerSpy3.calls.argsFor(1)).toEqual([ + [ + [SORT_CRITERIA_S1, sortValue1, "sort"], + [ + SORT_CRITERIA_S2, + parseInt(sortValue2, 10) as unknown as string, + "sort", + ], + [SORT_CRITERIA_S3, null, "sort"], + [SORT_CRITERIA_S4, null, "sort"], + ], + ]); + + expect(consoleErrorSpy).toHaveBeenCalledWith( + `FiltersManager: Failed to notify mutation observers`, + observerError, + ); + + expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); + expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); + expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); + })); + + it(`should verify will update values from object of key-value (criteria-value) properties, filter and sort are missing and clear previous values`, fakeAsync(() => { + // Given + const filterValue1 = "f1v,f11v"; + const filterValue3 = "f3v"; + const sortValue2 = "-1"; + const sortValue3 = "s3v"; + const sortValue4 = "s4v"; + + const observerError = new Error("observer throws error"); + + const mutationObserver1 = new MutationObserver(); + const observerSpy1 = spyOn( + mutationObserver1, + "observer", + ).and.throwError(observerError); + const mutationObserver2 = new MutationObserver(); + const observerSpy2 = spyOn( + mutationObserver2, + "observer", + ).and.callThrough(); + const mutationObserver3 = new MutationObserver(); + const observerSpy3 = spyOn( + mutationObserver3, + "observer", + ).and.callThrough(); + + const consoleErrorSpy = spyOn(console, "error").and.callFake(CallFake); + + // prerequisites manager should have + manager.filterCriteria[FILTER_CRITERIA_F1] = filterValue1; + manager.filterCriteria[FILTER_CRITERIA_F3] = filterValue3; + manager.sortCriteria[SORT_CRITERIA_S2] = sortValue2; + manager.sortCriteria[SORT_CRITERIA_S3] = sortValue3; + manager.sortCriteria[SORT_CRITERIA_S4] = sortValue4; + + manager.registerMutationObserver(mutationObserver1.observer); + manager.registerMutationObserver(mutationObserver2.observer); + manager.registerMutationObserver(mutationObserver3.observer); + + manager.deleteMutationObserver(mutationObserver2.observer); + + // Then 1 + expect(manager.filterCriteria).toEqual({ + [FILTER_CRITERIA_F1]: filterValue1, + [FILTER_CRITERIA_F3]: filterValue3, + } as Record); + expect(manager.sortCriteria).toEqual({ + [SORT_CRITERIA_S2]: sortValue2, + [SORT_CRITERIA_S3]: sortValue3, + [SORT_CRITERIA_S4]: sortValue4, + } as Record); + + // When + manager.bulkUpdate( + {} as Record, + true, + ); + + tick(1000); + + // Then 2 + expect(manager.filterCriteria).toEqual( + {} as Record, + ); + + expect(manager.sortCriteria).toEqual( + {} as Record, + ); + + expect(urlStateManagerStub.setQueryParam.calls.argsFor(0)).toEqual([ + FILTER_KEY, + null, + ]); + expect(urlStateManagerStub.setQueryParam.calls.argsFor(1)).toEqual([ + SORT_KEY, + null, + ]); + + expect(observerSpy1).toHaveBeenCalledTimes(2); + expect(observerSpy1.calls.argsFor(0)).toEqual([ + [ + [FILTER_CRITERIA_F1, null, "filter"], + [FILTER_CRITERIA_F3, null, "filter"], + ], + ]); + expect(observerSpy1.calls.argsFor(1)).toEqual([ + [ + [SORT_CRITERIA_S2, null, "sort"], + [SORT_CRITERIA_S3, null, "sort"], + [SORT_CRITERIA_S4, null, "sort"], + ], + ]); + + expect(observerSpy2).not.toHaveBeenCalled(); + + expect(observerSpy3).toHaveBeenCalledTimes(2); + expect(observerSpy3.calls.argsFor(0)).toEqual([ + [ + [FILTER_CRITERIA_F1, null, "filter"], + [FILTER_CRITERIA_F3, null, "filter"], + ], + ]); + expect(observerSpy3.calls.argsFor(1)).toEqual([ + [ + [SORT_CRITERIA_S2, null, "sort"], + [SORT_CRITERIA_S3, null, "sort"], + [SORT_CRITERIA_S4, null, "sort"], + ], + ]); + + expect(consoleErrorSpy).toHaveBeenCalledWith( + `FiltersManager: Failed to notify mutation observers`, + observerError, + ); + + expect(urlStateManagerStub.locationToURL).not.toHaveBeenCalled(); + expect(urlStateManagerStub.replaceToUrl).not.toHaveBeenCalled(); + expect(urlStateManagerStub.navigateToUrl).not.toHaveBeenCalled(); + })); }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/commons/filters-manager/filters-sort-manager.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/commons/filters-manager/filters-sort-manager.ts index cc46f1d8dc..f126993c74 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/commons/filters-manager/filters-sort-manager.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/commons/filters-manager/filters-sort-manager.ts @@ -3,10 +3,10 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { CollectionsUtil, URLStateManager } from '@versatiledatakit/shared'; +import { CollectionsUtil, URLStateManager } from "@versatiledatakit/shared"; -export const SORT_KEY = 'sort'; -export const FILTER_KEY = 'filter'; +export const SORT_KEY = "sort"; +export const FILTER_KEY = "filter"; /** * ** Generic key-value (criteria-value) tuple in context of Filters and Sort @@ -14,21 +14,20 @@ export const FILTER_KEY = 'filter'; * * - 3rd value is very useful if filter and sort criteria overlaps by their names. */ -export type KeyValueTuple = [ - key: K, - value: V, - type?: typeof FILTER_KEY | typeof SORT_KEY -]; +export type KeyValueTuple< + K extends string | number, + V extends string | number, +> = [key: K, value: V, type?: typeof FILTER_KEY | typeof SORT_KEY]; /** * ** Mutation observer that could be registered in {@link FiltersSortManager} * * - Executed whenever mutation is registered in {@link FiltersSortManager} according its algorithm. */ export type FilterSortMutationObserver< - FC extends string, - FV extends string | number, - SC extends string = string, - SV extends string | number = string | number + FC extends string, + FV extends string | number, + SC extends string = string, + SV extends string | number = string | number, > = (changes: KeyValueTuple[]) => void; /** @@ -37,562 +36,655 @@ export type FilterSortMutationObserver< * - Leverages {@link URLStateManager} functionalities for Browser URL manipulation. */ export class FiltersSortManager< - FC extends string, - FV extends string | number, - SC extends string = string, - SV extends string | number = string | number + FC extends string, + FV extends string | number, + SC extends string = string, + SV extends string | number = string | number, > { - /** - * ** Filter criteria and value storage. - */ - readonly filterCriteria: Record = {} as Record; - /** - * ** Sort criteria and value storage. - */ - readonly sortCriteria: Record = {} as Record; - - /** - * ** Update strategy used in {@link URLStateManager}. - * @private - */ - private _updateStrategy: 'navigateToUrl' | 'locationToURL' | 'replaceToURL' = 'locationToURL'; - /** - * ** Debouncing used whenever Browser URL should be updated. - * @private - */ - private _debouncingTime = 300; // value is in milliseconds - /** - * ** Reference to scheduled timeout in conjunction with {@link _debouncingTime} - * @private - */ - private _updateTimeoutRef: number; - - /** - * ** Mutation observers storage. - * @private - */ - private readonly _mutationObservers: Set> = new Set< - FilterSortMutationObserver - >(); - - /** - * ** Constructor. - */ - constructor( - private readonly urlStateManager: URLStateManager, - private readonly knownFilterCriteria: FC[], - private readonly knownSortCriteria: SC[] - ) {} - - /** - * ** Returns true if requested criteria is found and its value is defined in Manager filter storage {@link filterCriteria}. - */ - hasFilter(criteria: FC): boolean { - return this.filterCriteria.hasOwnProperty(criteria) && CollectionsUtil.isDefined(this.filterCriteria[criteria]); + /** + * ** Filter criteria and value storage. + */ + readonly filterCriteria: Record = {} as Record; + /** + * ** Sort criteria and value storage. + */ + readonly sortCriteria: Record = {} as Record; + + /** + * ** Update strategy used in {@link URLStateManager}. + * @private + */ + private _updateStrategy: "navigateToUrl" | "locationToURL" | "replaceToURL" = + "locationToURL"; + /** + * ** Debouncing used whenever Browser URL should be updated. + * @private + */ + private _debouncingTime = 300; // value is in milliseconds + /** + * ** Reference to scheduled timeout in conjunction with {@link _debouncingTime} + * @private + */ + private _updateTimeoutRef: number; + + /** + * ** Mutation observers storage. + * @private + */ + private readonly _mutationObservers: Set< + FilterSortMutationObserver + > = new Set>(); + + /** + * ** Constructor. + */ + constructor( + private readonly urlStateManager: URLStateManager, + private readonly knownFilterCriteria: FC[], + private readonly knownSortCriteria: SC[], + ) {} + + /** + * ** Returns true if requested criteria is found and its value is defined in Manager filter storage {@link filterCriteria}. + */ + hasFilter(criteria: FC): boolean { + return ( + this.filterCriteria.hasOwnProperty(criteria) && + CollectionsUtil.isDefined(this.filterCriteria[criteria]) + ); + } + + /** + * ** Returns true if there is at least one filter with defined value in Manager filter storage {@link filterCriteria}. + */ + hasAnyFilter(): boolean { + return ( + CollectionsUtil.objectPairs(this.filterCriteria).filter(([_key, value]) => + CollectionsUtil.isDefined(value), + ).length > 0 + ); + } + + /** + * ** Set filter criteria in Manager filter storage {@link filterCriteria}. + * + * - on every filter set, Browser URL is updated with debouncing by default, and mutation observers are notified. + * - optionally: Browser URL update could be skipped if 3rd parameter is provided with false value. + */ + setFilter( + criteria: FC, + value: string | number, + updateBrowserUrl = true, + ): void { + if (this.filterCriteria[criteria] === value) { + return; } - /** - * ** Returns true if there is at least one filter with defined value in Manager filter storage {@link filterCriteria}. - */ - hasAnyFilter(): boolean { - return CollectionsUtil.objectPairs(this.filterCriteria).filter(([_key, value]) => CollectionsUtil.isDefined(value)).length > 0; + if (CollectionsUtil.isDefined(value)) { + this.filterCriteria[criteria] = `${value}` as FV; + } else { + delete this.filterCriteria[criteria]; } - /** - * ** Set filter criteria in Manager filter storage {@link filterCriteria}. - * - * - on every filter set, Browser URL is updated with debouncing by default, and mutation observers are notified. - * - optionally: Browser URL update could be skipped if 3rd parameter is provided with false value. - */ - setFilter(criteria: FC, value: string | number, updateBrowserUrl = true): void { - if (this.filterCriteria[criteria] === value) { - return; - } - - if (CollectionsUtil.isDefined(value)) { - this.filterCriteria[criteria] = `${value}` as FV; - } else { - delete this.filterCriteria[criteria]; - } - - this._serializeFilters(); + this._serializeFilters(); - if (updateBrowserUrl) { - this.updateBrowserUrl(); - } - - this._notifyMutationObservers([[criteria, value as FV, 'filter']]); + if (updateBrowserUrl) { + this.updateBrowserUrl(); } - /** - * ** Delete filter criteria from Manager filter storage {@link filterCriteria}. - * - * - on every delete filter, Browser URL is updated with debouncing by default, and mutation observers are notified. - * - optionally: Browser URL update could be skipped if 2nd parameter is provided with false value. - */ - deleteFilter(criteria: FC, updateBrowserUrl = true): boolean { - if (!this.hasFilter(criteria)) { - return false; - } + this._notifyMutationObservers([[criteria, value as FV, "filter"]]); + } + + /** + * ** Delete filter criteria from Manager filter storage {@link filterCriteria}. + * + * - on every delete filter, Browser URL is updated with debouncing by default, and mutation observers are notified. + * - optionally: Browser URL update could be skipped if 2nd parameter is provided with false value. + */ + deleteFilter(criteria: FC, updateBrowserUrl = true): boolean { + if (!this.hasFilter(criteria)) { + return false; + } - delete this.filterCriteria[criteria]; + delete this.filterCriteria[criteria]; - this._serializeFilters(); + this._serializeFilters(); - if (updateBrowserUrl) { - this.updateBrowserUrl(); - } + if (updateBrowserUrl) { + this.updateBrowserUrl(); + } - this._notifyMutationObservers([[criteria, null, 'filter']]); + this._notifyMutationObservers([[criteria, null, "filter"]]); - return true; - } + return true; + } - /** - * ** Clear all filters criteria from Manager filter storage {@link filterCriteria}. - * - * - on every clear filters, Browser URL is updated with debouncing by default, and mutation observers are notified. - * - optionally: Browser URL update could be skipped if 1st parameter is provided with false value. - * - optionally: Mutation observers notification could be skipped if 2nd parameter is provided with false value. - */ - clearFilters(updateBrowserUrl = true, notifyMutationObservers = true): void { - const filterPairs = CollectionsUtil.objectPairs(this.filterCriteria); - const mutatedFilterPairs: KeyValueTuple[] = filterPairs.map(([key]) => [key, null, 'filter'] as KeyValueTuple); - - filterPairs.forEach(([key]) => { - delete this.filterCriteria[key]; - }); + /** + * ** Clear all filters criteria from Manager filter storage {@link filterCriteria}. + * + * - on every clear filters, Browser URL is updated with debouncing by default, and mutation observers are notified. + * - optionally: Browser URL update could be skipped if 1st parameter is provided with false value. + * - optionally: Mutation observers notification could be skipped if 2nd parameter is provided with false value. + */ + clearFilters(updateBrowserUrl = true, notifyMutationObservers = true): void { + const filterPairs = CollectionsUtil.objectPairs(this.filterCriteria); + const mutatedFilterPairs: KeyValueTuple[] = filterPairs.map( + ([key]) => [key, null, "filter"] as KeyValueTuple, + ); - this._serializeFilters(); + filterPairs.forEach(([key]) => { + delete this.filterCriteria[key]; + }); - if (updateBrowserUrl) { - this.updateBrowserUrl(); - } + this._serializeFilters(); - if (notifyMutationObservers) { - this._notifyMutationObservers(mutatedFilterPairs); - } + if (updateBrowserUrl) { + this.updateBrowserUrl(); } - /** - * ** Returns true if requested criteria is found and its value is defined in Manager sort storage {@link sortCriteria}. - */ - hasSort(criteria: SC): boolean { - return this.sortCriteria.hasOwnProperty(criteria) && CollectionsUtil.isDefined(this.sortCriteria[criteria]); + if (notifyMutationObservers) { + this._notifyMutationObservers(mutatedFilterPairs); } - - /** - * ** Returns true if there is at least one sort with defined value in Manager sort storage {@link sortCriteria}. - */ - hasAnySort(): boolean { - return CollectionsUtil.objectPairs(this.sortCriteria).filter(([_key, value]) => CollectionsUtil.isDefined(value)).length > 0; + } + + /** + * ** Returns true if requested criteria is found and its value is defined in Manager sort storage {@link sortCriteria}. + */ + hasSort(criteria: SC): boolean { + return ( + this.sortCriteria.hasOwnProperty(criteria) && + CollectionsUtil.isDefined(this.sortCriteria[criteria]) + ); + } + + /** + * ** Returns true if there is at least one sort with defined value in Manager sort storage {@link sortCriteria}. + */ + hasAnySort(): boolean { + return ( + CollectionsUtil.objectPairs(this.sortCriteria).filter(([_key, value]) => + CollectionsUtil.isDefined(value), + ).length > 0 + ); + } + + /** + * ** Set sort criteria in Manager sort storage {@link sortCriteria}. + * + * - on every sort set, Browser URL is updated with debouncing by default, and mutation observers are notified. + * - optionally: Browser URL update could be skipped if 3rd parameter is provided with false value. + */ + setSort(criteria: SC, direction: SV, updateBrowserUrl = true): void { + if (this.sortCriteria[criteria] === direction) { + return; } - /** - * ** Set sort criteria in Manager sort storage {@link sortCriteria}. - * - * - on every sort set, Browser URL is updated with debouncing by default, and mutation observers are notified. - * - optionally: Browser URL update could be skipped if 3rd parameter is provided with false value. - */ - setSort(criteria: SC, direction: SV, updateBrowserUrl = true): void { - if (this.sortCriteria[criteria] === direction) { - return; - } - - if (CollectionsUtil.isDefined(direction)) { - this.sortCriteria[criteria] = direction; - } else { - delete this.sortCriteria[criteria]; - } - - this._serializeSort(); + if (CollectionsUtil.isDefined(direction)) { + this.sortCriteria[criteria] = direction; + } else { + delete this.sortCriteria[criteria]; + } - if (updateBrowserUrl) { - this.updateBrowserUrl(); - } + this._serializeSort(); - this._notifyMutationObservers([[criteria, direction, 'sort']]); + if (updateBrowserUrl) { + this.updateBrowserUrl(); } - /** - * ** Clear all sort criteria from Manager sort storage {@link sortCriteria}. - * - * - on every clear sort, Browser URL is updated with debouncing by default, and mutation observers are notified. - * - optionally: Browser URL update could be skipped if 1st parameter is provided with false value. - * - optionally: Mutation observers notification could be skipped if 2nd parameter is provided with false value. - */ - clearSort(updateBrowserUrl = true, notifyMutationObservers = true): void { - const mutatedSortPairs: KeyValueTuple[] = []; + this._notifyMutationObservers([[criteria, direction, "sort"]]); + } - CollectionsUtil.objectPairs(this.sortCriteria).forEach(([key]) => { - mutatedSortPairs.push([key, null, 'sort']); + /** + * ** Clear all sort criteria from Manager sort storage {@link sortCriteria}. + * + * - on every clear sort, Browser URL is updated with debouncing by default, and mutation observers are notified. + * - optionally: Browser URL update could be skipped if 1st parameter is provided with false value. + * - optionally: Mutation observers notification could be skipped if 2nd parameter is provided with false value. + */ + clearSort(updateBrowserUrl = true, notifyMutationObservers = true): void { + const mutatedSortPairs: KeyValueTuple[] = []; - delete this.sortCriteria[key]; - }); + CollectionsUtil.objectPairs(this.sortCriteria).forEach(([key]) => { + mutatedSortPairs.push([key, null, "sort"]); - this._serializeSort(); + delete this.sortCriteria[key]; + }); - if (updateBrowserUrl) { - this.updateBrowserUrl(); - } + this._serializeSort(); - if (notifyMutationObservers) { - this._notifyMutationObservers(mutatedSortPairs); - } + if (updateBrowserUrl) { + this.updateBrowserUrl(); } - /** - * ** Clear all filter and sort criteria from Manager storage {@link filterCriteria} {@link sortCriteria}. - * - * - on every clear, Browser URL is updated with debouncing by default, and mutation observers are notified. - * - optionally: Browser URL update could be skipped if 1st parameter is provided with false value. - * - optionally: Mutation observers notification could be skipped if 2nd parameter is provided with false value. - */ - clear(updateBrowserUrl = true, notifyMutationObservers = true): void { - this.clearFilters(updateBrowserUrl, notifyMutationObservers); - this.clearSort(updateBrowserUrl, notifyMutationObservers); + if (notifyMutationObservers) { + this._notifyMutationObservers(mutatedSortPairs); + } + } + + /** + * ** Clear all filter and sort criteria from Manager storage {@link filterCriteria} {@link sortCriteria}. + * + * - on every clear, Browser URL is updated with debouncing by default, and mutation observers are notified. + * - optionally: Browser URL update could be skipped if 1st parameter is provided with false value. + * - optionally: Mutation observers notification could be skipped if 2nd parameter is provided with false value. + */ + clear(updateBrowserUrl = true, notifyMutationObservers = true): void { + this.clearFilters(updateBrowserUrl, notifyMutationObservers); + this.clearSort(updateBrowserUrl, notifyMutationObservers); + } + + /** + * ** Bulk update Manager storages for filter and sort criteria using key-value (criteria-value) tuples + * with optional 3rd value that clarify the criteria type (either filter or sort). + */ + bulkUpdate( + filterSortPairs: KeyValueTuple[], + clearPreviousValues?: boolean, + ); + /** + * ** Bulk update Manager storages for filter and sort criteria leveraging provided nested object criteria-value. + */ + bulkUpdate( + filterValues: Record, + clearPreviousValues?: boolean, + ): void; + /** + * @inheritDoc + */ + bulkUpdate( + updates: + | Record + | KeyValueTuple[], + clearPreviousValues = false, + ): void { + // Nil (null or undefined) skipped execution + if (CollectionsUtil.isNil(updates)) { + return; } - /** - * ** Bulk update Manager storages for filter and sort criteria using key-value (criteria-value) tuples - * with optional 3rd value that clarify the criteria type (either filter or sort). - */ - bulkUpdate(filterSortPairs: KeyValueTuple[], clearPreviousValues?: boolean); - /** - * ** Bulk update Manager storages for filter and sort criteria leveraging provided nested object criteria-value. - */ - bulkUpdate(filterValues: Record, clearPreviousValues?: boolean): void; - /** - * @inheritDoc - */ - bulkUpdate( - updates: Record | KeyValueTuple[], - clearPreviousValues = false - ): void { - // Nil (null or undefined) skipped execution - if (CollectionsUtil.isNil(updates)) { - return; - } - - // Array means key-value tuples provided - if (CollectionsUtil.isArray(updates)) { - const mutatedFilterPairs: KeyValueTuple[] = this._persistBulkFilters( - updates as KeyValueTuple[], - clearPreviousValues - ); - this._serializeFilters(); - - const mutatedSortPairs: KeyValueTuple[] = this._persistBulkSort( - updates as KeyValueTuple[], - clearPreviousValues - ); - this._serializeSort(); - - this._notifyMutationObservers([...mutatedFilterPairs, ...mutatedSortPairs]); - - return; - } - - // otherwise presume it's and object with filter - if ((updates as object).hasOwnProperty(FILTER_KEY) && CollectionsUtil.isStringWithContent(updates[FILTER_KEY])) { - const deserializedFilterCriteria = this._deserializeFilters(updates[FILTER_KEY]); - const normalizedFilterCriteria: KeyValueTuple[] = CollectionsUtil.objectPairs(deserializedFilterCriteria).map( - (filterPairs) => [filterPairs[0], filterPairs[1], 'filter'] as unknown as KeyValueTuple - ); - - const mutatedFilterPairs: KeyValueTuple[] = this._persistBulkFilters(normalizedFilterCriteria, clearPreviousValues); - this._serializeFilters(); - - this._notifyMutationObservers(mutatedFilterPairs); - } else if (clearPreviousValues) { - this.clearFilters(false); - } - - // otherwise presume it's and object with sort - if ((updates as object).hasOwnProperty(SORT_KEY) && CollectionsUtil.isStringWithContent(updates[SORT_KEY])) { - const deserializedSortCriteria = this._deserializeSort(updates[SORT_KEY]); - const normalizedSortCriteria: KeyValueTuple[] = CollectionsUtil.objectPairs(deserializedSortCriteria).map( - (sortPairs) => [sortPairs[0], sortPairs[1], 'sort'] as unknown as KeyValueTuple - ); - - const mutatedSortPairs: KeyValueTuple[] = this._persistBulkSort(normalizedSortCriteria, clearPreviousValues); - this._serializeSort(); - - this._notifyMutationObservers(mutatedSortPairs); - } else if (clearPreviousValues) { - this.clearSort(false); - } + // Array means key-value tuples provided + if (CollectionsUtil.isArray(updates)) { + const mutatedFilterPairs: KeyValueTuple[] = + this._persistBulkFilters( + updates as KeyValueTuple[], + clearPreviousValues, + ); + this._serializeFilters(); + + const mutatedSortPairs: KeyValueTuple[] = this._persistBulkSort( + updates as KeyValueTuple[], + clearPreviousValues, + ); + this._serializeSort(); + + this._notifyMutationObservers([ + ...mutatedFilterPairs, + ...mutatedSortPairs, + ]); + + return; } - /** - * ** Update Browser URL either with predefined strategy or with one time update strategy provided as parameter. - * - * - Updates are debounced by default. - * - optionally: debounce could be skipped and Browser URL would be updated immediately if 2nd parameter is provided with false value. - */ - updateBrowserUrl(updateStrategy?: 'navigateToUrl' | 'locationToURL' | 'replaceToURL', skipDebouncing = false): void { - const strategy = CollectionsUtil.isStringWithContent(updateStrategy) ? updateStrategy : this._updateStrategy; + // otherwise presume it's and object with filter + if ( + (updates as object).hasOwnProperty(FILTER_KEY) && + CollectionsUtil.isStringWithContent(updates[FILTER_KEY]) + ) { + const deserializedFilterCriteria = this._deserializeFilters( + updates[FILTER_KEY], + ); + const normalizedFilterCriteria: KeyValueTuple[] = + CollectionsUtil.objectPairs(deserializedFilterCriteria).map( + (filterPairs) => + [ + filterPairs[0], + filterPairs[1], + "filter", + ] as unknown as KeyValueTuple, + ); + + const mutatedFilterPairs: KeyValueTuple[] = + this._persistBulkFilters(normalizedFilterCriteria, clearPreviousValues); + this._serializeFilters(); + + this._notifyMutationObservers(mutatedFilterPairs); + } else if (clearPreviousValues) { + this.clearFilters(false); + } - this.cancelScheduledBrowserUrlUpdate(); + // otherwise presume it's and object with sort + if ( + (updates as object).hasOwnProperty(SORT_KEY) && + CollectionsUtil.isStringWithContent(updates[SORT_KEY]) + ) { + const deserializedSortCriteria = this._deserializeSort(updates[SORT_KEY]); + const normalizedSortCriteria: KeyValueTuple[] = + CollectionsUtil.objectPairs(deserializedSortCriteria).map( + (sortPairs) => + [sortPairs[0], sortPairs[1], "sort"] as unknown as KeyValueTuple< + SC, + SV + >, + ); + + const mutatedSortPairs: KeyValueTuple[] = this._persistBulkSort( + normalizedSortCriteria, + clearPreviousValues, + ); + this._serializeSort(); + + this._notifyMutationObservers(mutatedSortPairs); + } else if (clearPreviousValues) { + this.clearSort(false); + } + } + + /** + * ** Update Browser URL either with predefined strategy or with one time update strategy provided as parameter. + * + * - Updates are debounced by default. + * - optionally: debounce could be skipped and Browser URL would be updated immediately if 2nd parameter is provided with false value. + */ + updateBrowserUrl( + updateStrategy?: "navigateToUrl" | "locationToURL" | "replaceToURL", + skipDebouncing = false, + ): void { + const strategy = CollectionsUtil.isStringWithContent(updateStrategy) + ? updateStrategy + : this._updateStrategy; + + this.cancelScheduledBrowserUrlUpdate(); + + if (skipDebouncing) { + this._doUpdateBrowserUrl(strategy); + + return; + } - if (skipDebouncing) { - this._doUpdateBrowserUrl(strategy); + // debouncing for update URL, to avoid multiple updates when there are multiple serial near close update events + this._updateTimeoutRef = setTimeout(() => { + this._doUpdateBrowserUrl(strategy); - return; - } + this._updateTimeoutRef = null; + }, this._debouncingTime); + } - // debouncing for update URL, to avoid multiple updates when there are multiple serial near close update events - this._updateTimeoutRef = setTimeout(() => { - this._doUpdateBrowserUrl(strategy); + /** + * ** Cancel scheduled (debounced) Browser URL update. + * + * - if canceled it won't update until next change occurs or {@link updateBrowserUrl} method is invoked on demand. + */ + cancelScheduledBrowserUrlUpdate(): void { + if (CollectionsUtil.isNumber(this._updateTimeoutRef)) { + clearTimeout(this._updateTimeoutRef); - this._updateTimeoutRef = null; - }, this._debouncingTime); + this._updateTimeoutRef = null; } - - /** - * ** Cancel scheduled (debounced) Browser URL update. - * - * - if canceled it won't update until next change occurs or {@link updateBrowserUrl} method is invoked on demand. - */ - cancelScheduledBrowserUrlUpdate(): void { - if (CollectionsUtil.isNumber(this._updateTimeoutRef)) { - clearTimeout(this._updateTimeoutRef); - - this._updateTimeoutRef = null; - } + } + + /** + * ** Change Manager Base url. + * + * - it will update {@link URLStateManager} base url. + */ + changeBaseUrl(baseUrl: string): void { + this.urlStateManager.changeBaseUrl(baseUrl); + } + + /** + * ** Change Manager default update strategy. + */ + changeUpdateStrategy( + strategy: "navigateToUrl" | "locationToURL" | "replaceToURL", + ): void { + this._updateStrategy = strategy; + } + + /** + * ** Change Manager default debouncing time. + */ + changeDebouncingTime(debouncingTime: number): void { + if ( + !CollectionsUtil.isNumber(debouncingTime) || + CollectionsUtil.isNaN(debouncingTime) + ) { + return; } - /** - * ** Change Manager Base url. - * - * - it will update {@link URLStateManager} base url. - */ - changeBaseUrl(baseUrl: string): void { - this.urlStateManager.changeBaseUrl(baseUrl); + this._debouncingTime = debouncingTime; + } + + /** + * ** Register mutation observer, that will be invoked whenever mutation occurs in manager, either filter or sort mutation. + */ + registerMutationObserver( + callback: FilterSortMutationObserver, + ): void { + if (this._mutationObservers.has(callback)) { + return; } - /** - * ** Change Manager default update strategy. - */ - changeUpdateStrategy(strategy: 'navigateToUrl' | 'locationToURL' | 'replaceToURL'): void { - this._updateStrategy = strategy; + this._mutationObservers.add(callback); + } + + /** + * ** Delete mutation observer. + */ + deleteMutationObserver( + callback: FilterSortMutationObserver, + ): boolean { + if (!this._mutationObservers.has(callback)) { + return false; } - /** - * ** Change Manager default debouncing time. - */ - changeDebouncingTime(debouncingTime: number): void { - if (!CollectionsUtil.isNumber(debouncingTime) || CollectionsUtil.isNaN(debouncingTime)) { - return; - } + this._mutationObservers.delete(callback); - this._debouncingTime = debouncingTime; - } + return true; + } - /** - * ** Register mutation observer, that will be invoked whenever mutation occurs in manager, either filter or sort mutation. - */ - registerMutationObserver(callback: FilterSortMutationObserver): void { - if (this._mutationObservers.has(callback)) { - return; - } + /** + * ** Persist filter tuple pairs of key-value in filter storage {@link filterCriteria}. + * @private + */ + private _persistBulkFilters( + filterPairs: KeyValueTuple[], + clearPreviousValues: boolean, + ): KeyValueTuple[] { + const mutatedFilterPairs: KeyValueTuple[] = []; - this._mutationObservers.add(callback); - } + for (const knownCriteria of this.knownFilterCriteria) { + const foundFilterPairs = filterPairs.filter( + ([criteria, _value, type]) => + criteria === knownCriteria && type === "filter", + ); - /** - * ** Delete mutation observer. - */ - deleteMutationObserver(callback: FilterSortMutationObserver): boolean { - if (!this._mutationObservers.has(callback)) { - return false; - } + if (foundFilterPairs.length > 0) { + const value = foundFilterPairs.pop()[1]; - this._mutationObservers.delete(callback); + if (CollectionsUtil.isDefined(value)) { + if (this.filterCriteria[knownCriteria] !== value) { + this.filterCriteria[knownCriteria] = value; - return true; - } + mutatedFilterPairs.push([knownCriteria, value, "filter"]); + } + } else if (this.hasFilter(knownCriteria)) { + delete this.filterCriteria[knownCriteria]; - /** - * ** Persist filter tuple pairs of key-value in filter storage {@link filterCriteria}. - * @private - */ - private _persistBulkFilters(filterPairs: KeyValueTuple[], clearPreviousValues: boolean): KeyValueTuple[] { - const mutatedFilterPairs: KeyValueTuple[] = []; + mutatedFilterPairs.push([knownCriteria, null, "filter"]); + } + } else if (clearPreviousValues) { + if (this.hasFilter(knownCriteria)) { + delete this.filterCriteria[knownCriteria]; - for (const knownCriteria of this.knownFilterCriteria) { - const foundFilterPairs = filterPairs.filter(([criteria, _value, type]) => criteria === knownCriteria && type === 'filter'); + mutatedFilterPairs.push([knownCriteria, null, "filter"]); + } + } + } - if (foundFilterPairs.length > 0) { - const value = foundFilterPairs.pop()[1]; + return mutatedFilterPairs; + } - if (CollectionsUtil.isDefined(value)) { - if (this.filterCriteria[knownCriteria] !== value) { - this.filterCriteria[knownCriteria] = value; + /** + * ** Persist sort tuple pairs of key-value in sort storage {@link sortCriteria}. + * @private + */ + private _persistBulkSort( + sortPairs: KeyValueTuple[], + clearPreviousValues: boolean, + ): KeyValueTuple[] { + const mutatedSortPairs: KeyValueTuple[] = []; - mutatedFilterPairs.push([knownCriteria, value, 'filter']); - } - } else if (this.hasFilter(knownCriteria)) { - delete this.filterCriteria[knownCriteria]; + for (const knownCriteria of this.knownSortCriteria) { + const foundSortPairs = sortPairs.filter( + ([criteria, _direction, type]) => + criteria === knownCriteria && type === "sort", + ); - mutatedFilterPairs.push([knownCriteria, null, 'filter']); - } - } else if (clearPreviousValues) { - if (this.hasFilter(knownCriteria)) { - delete this.filterCriteria[knownCriteria]; + if (foundSortPairs.length > 0) { + const value = foundSortPairs.pop()[1]; - mutatedFilterPairs.push([knownCriteria, null, 'filter']); - } + if (CollectionsUtil.isDefined(value)) { + let normalizedValue: SV; + + if (CollectionsUtil.isString(value)) { + if (/^(-)?\d+$/.test(value)) { + normalizedValue = parseInt(value, 10) as SV; + } else if (CollectionsUtil.isStringWithContent(value)) { + normalizedValue = value; + } else { + normalizedValue = null; } - } + } else { + normalizedValue = value; + } - return mutatedFilterPairs; - } + if (CollectionsUtil.isDefined(normalizedValue)) { + if (this.sortCriteria[knownCriteria] !== normalizedValue) { + this.sortCriteria[knownCriteria] = normalizedValue; - /** - * ** Persist sort tuple pairs of key-value in sort storage {@link sortCriteria}. - * @private - */ - private _persistBulkSort(sortPairs: KeyValueTuple[], clearPreviousValues: boolean): KeyValueTuple[] { - const mutatedSortPairs: KeyValueTuple[] = []; - - for (const knownCriteria of this.knownSortCriteria) { - const foundSortPairs = sortPairs.filter(([criteria, _direction, type]) => criteria === knownCriteria && type === 'sort'); - - if (foundSortPairs.length > 0) { - const value = foundSortPairs.pop()[1]; - - if (CollectionsUtil.isDefined(value)) { - let normalizedValue: SV; - - if (CollectionsUtil.isString(value)) { - if (/^(-)?\d+$/.test(value)) { - normalizedValue = parseInt(value, 10) as SV; - } else if (CollectionsUtil.isStringWithContent(value)) { - normalizedValue = value; - } else { - normalizedValue = null; - } - } else { - normalizedValue = value; - } - - if (CollectionsUtil.isDefined(normalizedValue)) { - if (this.sortCriteria[knownCriteria] !== normalizedValue) { - this.sortCriteria[knownCriteria] = normalizedValue; - - mutatedSortPairs.push([knownCriteria, normalizedValue, 'sort']); - } - } else if (this.hasSort(knownCriteria)) { - delete this.sortCriteria[knownCriteria]; - - mutatedSortPairs.push([knownCriteria, null, 'sort']); - } - } else if (this.hasSort(knownCriteria)) { - delete this.sortCriteria[knownCriteria]; - - mutatedSortPairs.push([knownCriteria, null, 'sort']); - } - } else if (clearPreviousValues) { - if (this.hasSort(knownCriteria)) { - delete this.sortCriteria[knownCriteria]; - - mutatedSortPairs.push([knownCriteria, null, 'sort']); - } + mutatedSortPairs.push([knownCriteria, normalizedValue, "sort"]); } - } - - return mutatedSortPairs; - } + } else if (this.hasSort(knownCriteria)) { + delete this.sortCriteria[knownCriteria]; - /** - * ** Serialize filters for query params. - * @private - */ - private _serializeFilters(): void { - const filterPairs = CollectionsUtil.objectPairs(this.filterCriteria); - const normalizedFilterPairs: string = filterPairs.length > 0 ? JSON.stringify(this.filterCriteria) : null; - - this._updateUrlStateManager([FILTER_KEY, normalizedFilterPairs]); - } + mutatedSortPairs.push([knownCriteria, null, "sort"]); + } + } else if (this.hasSort(knownCriteria)) { + delete this.sortCriteria[knownCriteria]; - private _deserializeFilters(value: string): Record { - try { - return JSON.parse(value) as Record; - } catch (error) { - console.error(`FiltersManager: Failed to parse Filters`, error); + mutatedSortPairs.push([knownCriteria, null, "sort"]); + } + } else if (clearPreviousValues) { + if (this.hasSort(knownCriteria)) { + delete this.sortCriteria[knownCriteria]; - return {} as Record; + mutatedSortPairs.push([knownCriteria, null, "sort"]); } + } } - /** - * ** Serialize sort for query params. - * @private - */ - private _serializeSort(): void { - const sortPairs = CollectionsUtil.objectPairs(this.sortCriteria); - const normalizedSortPairs: string = sortPairs.length > 0 ? JSON.stringify(this.sortCriteria) : null; + return mutatedSortPairs; + } - this._updateUrlStateManager([SORT_KEY, normalizedSortPairs]); - } + /** + * ** Serialize filters for query params. + * @private + */ + private _serializeFilters(): void { + const filterPairs = CollectionsUtil.objectPairs(this.filterCriteria); + const normalizedFilterPairs: string = + filterPairs.length > 0 ? JSON.stringify(this.filterCriteria) : null; - private _deserializeSort(value: string): Record { - try { - return JSON.parse(value) as Record; - } catch (error) { - console.error(`FiltersManager: Failed to parse Sort`, error); + this._updateUrlStateManager([FILTER_KEY, normalizedFilterPairs]); + } - return {} as Record; - } - } + private _deserializeFilters(value: string): Record { + try { + return JSON.parse(value) as Record; + } catch (error) { + console.error(`FiltersManager: Failed to parse Filters`, error); - /** - * ** Actual update for Browser URL through {@link URLStateManager}. - * @private - */ - private _doUpdateBrowserUrl(strategy: 'navigateToUrl' | 'locationToURL' | 'replaceToURL'): void { - if (strategy === 'locationToURL') { - this.urlStateManager.locationToURL(); - } else if (strategy === 'replaceToURL') { - this.urlStateManager.replaceToUrl(); - } else { - this.urlStateManager - .navigateToUrl() - .then(() => { - // No-op. - }) - .catch((error) => { - console.error(`FiltersManager: Failed to update Browser Url`, error); - }); - } + return {} as Record; } - - /** - * ** Update {@link URLStateManager} query params using provided key-value tuples. - * @private - */ - private _updateUrlStateManager(...updatePairs: KeyValueTuple[]): void { - for (const [criteria, value] of updatePairs) { - this.urlStateManager.setQueryParam(criteria, value); - } + } + + /** + * ** Serialize sort for query params. + * @private + */ + private _serializeSort(): void { + const sortPairs = CollectionsUtil.objectPairs(this.sortCriteria); + const normalizedSortPairs: string = + sortPairs.length > 0 ? JSON.stringify(this.sortCriteria) : null; + + this._updateUrlStateManager([SORT_KEY, normalizedSortPairs]); + } + + private _deserializeSort(value: string): Record { + try { + return JSON.parse(value) as Record; + } catch (error) { + console.error(`FiltersManager: Failed to parse Sort`, error); + + return {} as Record; } - - /** - * ** Notify mutation observers providing Array of tuples for mutated key-value. - * @private - */ - private _notifyMutationObservers(changes: KeyValueTuple[]): void { - if (changes.length === 0) { - return; - } - - this._mutationObservers.forEach((observer) => { - try { - observer(changes); - } catch (error) { - console.error(`FiltersManager: Failed to notify mutation observers`, error); - } + } + + /** + * ** Actual update for Browser URL through {@link URLStateManager}. + * @private + */ + private _doUpdateBrowserUrl( + strategy: "navigateToUrl" | "locationToURL" | "replaceToURL", + ): void { + if (strategy === "locationToURL") { + this.urlStateManager.locationToURL(); + } else if (strategy === "replaceToURL") { + this.urlStateManager.replaceToUrl(); + } else { + this.urlStateManager + .navigateToUrl() + .then(() => { + // No-op. + }) + .catch((error) => { + console.error(`FiltersManager: Failed to update Browser Url`, error); }); } + } + + /** + * ** Update {@link URLStateManager} query params using provided key-value tuples. + * @private + */ + private _updateUrlStateManager( + ...updatePairs: KeyValueTuple[] + ): void { + for (const [criteria, value] of updatePairs) { + this.urlStateManager.setQueryParam(criteria, value); + } + } + + /** + * ** Notify mutation observers providing Array of tuples for mutated key-value. + * @private + */ + private _notifyMutationObservers( + changes: KeyValueTuple[], + ): void { + if (changes.length === 0) { + return; + } + + this._mutationObservers.forEach((observer) => { + try { + observer(changes); + } catch (error) { + console.error( + `FiltersManager: Failed to notify mutation observers`, + error, + ); + } + }); + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/commons/filters-manager/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/commons/filters-manager/index.ts index c6d1381800..d7725218b9 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/commons/filters-manager/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/commons/filters-manager/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './filters-sort-manager'; +export * from "./filters-sort-manager"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/commons/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/commons/index.ts index 7d85451e59..cd63e4da35 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/commons/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/commons/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './filters-manager'; +export * from "./filters-manager"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/base-grid/_data-jobs-base-grid.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/base-grid/_data-jobs-base-grid.component.scss index db7d65e58c..02b6e64f61 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/base-grid/_data-jobs-base-grid.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/base-grid/_data-jobs-base-grid.component.scss @@ -4,116 +4,116 @@ */ :host { - .label-link { - cursor: pointer; + .label-link { + cursor: pointer; + } + + ::ng-deep { + lib-grid-action { + display: flex; + flex-direction: column; + + lib-quick-filters { + clr-icon { + margin-left: -5px; + margin-right: 3px; + margin-top: 1px; + + &.status-icon-enabled { + color: #5aa220; + } + + &.status-icon-disabled { + color: var(--clr-color-neutral-600); + } + } + } } - ::ng-deep { - lib-grid-action { - display: flex; - flex-direction: column; - - lib-quick-filters { - clr-icon { - margin-left: -5px; - margin-right: 3px; - margin-top: 1px; - - &.status-icon-enabled { - color: #5aa220; - } - - &.status-icon-disabled { - color: var(--clr-color-neutral-600); - } - } - } + clr-datagrid { + height: 100%; + + .datagrid-column, + .datagrid-cell { + &.column__min-width--xs { + min-width: 3.25rem; } - clr-datagrid { - height: 100%; + &.column__min-width--s { + min-width: 4.25rem; + } - .datagrid-column, - .datagrid-cell { - &.column__min-width--xs { - min-width: 3.25rem; - } - - &.column__min-width--s { - min-width: 4.25rem; - } - - &.column__min-width--m { - min-width: 4.8rem; - } - - &.column__min-width--l { - min-width: 5.5rem; - } - - &.column__min-width--xl { - min-width: 6.5rem; - } - - &.column__max-width--xs { - max-width: 5rem; - } - - &.column__max-width--s { - max-width: 6rem; - } - - &.column__max-width--m { - max-width: 7rem; - } - - &.column__max-width--l { - max-width: 8.5rem; - } - - &.column__max-width--xl { - max-width: 10rem; - } - - &.jobs-list__column-opener { - min-width: 75px; - width: 75px; - } - } - - .datagrid-outer-wrapper { - .datagrid-inner-wrapper { - .datagrid { - flex-basis: 0; - margin-top: 0; - } - - .datagrid-spinner { - top: 0; - height: 100%; - } - } - } + &.column__min-width--m { + min-width: 4.8rem; } - } - .grid-container { - height: 100%; - display: flex; - flex-direction: column; + &.column__min-width--l { + min-width: 5.5rem; + } - .container { + &.column__min-width--xl { + min-width: 6.5rem; + } + + &.column__max-width--xs { + max-width: 5rem; + } + + &.column__max-width--s { + max-width: 6rem; + } + + &.column__max-width--m { + max-width: 7rem; + } + + &.column__max-width--l { + max-width: 8.5rem; + } + + &.column__max-width--xl { + max-width: 10rem; + } + + &.jobs-list__column-opener { + min-width: 75px; + width: 75px; + } + } + + .datagrid-outer-wrapper { + .datagrid-inner-wrapper { + .datagrid { + flex-basis: 0; + margin-top: 0; + } + + .datagrid-spinner { + top: 0; height: 100%; + } } + } } + } - .grid-container-compact { - height: auto; - display: flex; - flex-direction: column; + .grid-container { + height: 100%; + display: flex; + flex-direction: column; - .container-compact { - height: 50vh; - } + .container { + height: 100%; + } + } + + .grid-container-compact { + height: auto; + display: flex; + flex-direction: column; + + .container-compact { + height: 50vh; } + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/base-grid/data-jobs-base-grid.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/base-grid/data-jobs-base-grid.component.ts index 7f12cbcec9..15a3e31774 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/base-grid/data-jobs-base-grid.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/base-grid/data-jobs-base-grid.component.ts @@ -5,927 +5,1100 @@ /* eslint-disable @typescript-eslint/naming-convention,@angular-eslint/directive-class-suffix */ -import { Directive, ElementRef, Input, OnInit } from '@angular/core'; -import { Location } from '@angular/common'; -import { ActivatedRoute, Router } from '@angular/router'; +import { Directive, ElementRef, Input, OnInit } from "@angular/core"; +import { Location } from "@angular/common"; +import { ActivatedRoute, Router } from "@angular/router"; -import { Subject } from 'rxjs'; -import { debounceTime, distinctUntilChanged, take } from 'rxjs/operators'; +import { Subject } from "rxjs"; +import { debounceTime, distinctUntilChanged, take } from "rxjs/operators"; -import { ClrDatagridSortOrder, ClrDatagridStateInterface } from '@clr/angular'; +import { ClrDatagridSortOrder, ClrDatagridStateInterface } from "@clr/angular"; import { - ApiPredicate, - ASC, - CollectionsUtil, - ComponentModel, - ComponentService, - DESC, - ErrorHandlerService, - ErrorRecord, - NavigationService, - OnTaurusModelChange, - OnTaurusModelError, - OnTaurusModelInit, - OnTaurusModelInitialLoad, - OnTaurusModelLoad, - RouterService, - RouterState, - RouteState, - TaurusBaseComponent, - URLStateManager -} from '@versatiledatakit/shared'; - -import { ErrorUtil } from '../../shared/utils'; - -import { QuickFilters } from '../../shared/components'; + ApiPredicate, + ASC, + CollectionsUtil, + ComponentModel, + ComponentService, + DESC, + ErrorHandlerService, + ErrorRecord, + NavigationService, + OnTaurusModelChange, + OnTaurusModelError, + OnTaurusModelInit, + OnTaurusModelInitialLoad, + OnTaurusModelLoad, + RouterService, + RouterState, + RouteState, + TaurusBaseComponent, + URLStateManager, +} from "@versatiledatakit/shared"; + +import { ErrorUtil } from "../../shared/utils"; + +import { QuickFilters } from "../../shared/components"; import { - DataJob, - DataJobExecutionStatus, - DataJobStatus, - DataPipelinesConfig, - DataPipelinesRestoreUI, - DisplayMode, - GridFilters, - JOBS_DATA_KEY -} from '../../model'; + DataJob, + DataJobExecutionStatus, + DataJobStatus, + DataPipelinesConfig, + DataPipelinesRestoreUI, + DisplayMode, + GridFilters, + JOBS_DATA_KEY, +} from "../../model"; -import { TASK_LOAD_JOBS_STATE } from '../../state/tasks'; +import { TASK_LOAD_JOBS_STATE } from "../../state/tasks"; -import { LOAD_JOBS_ERROR_CODES } from '../../state/error-codes'; +import { LOAD_JOBS_ERROR_CODES } from "../../state/error-codes"; -import { DataJobsApiService, DataJobsService } from '../../services'; +import { DataJobsApiService, DataJobsService } from "../../services"; -export const QUERY_PARAM_SEARCH = 'search'; +export const QUERY_PARAM_SEARCH = "search"; export type ClrGridUIState = { - totalItems: number; - lastPage: number; - pageSize: number; - filter: GridFilters; - sort: { [key: string]: ClrDatagridSortOrder }; - search: string; + totalItems: number; + lastPage: number; + pageSize: number; + filter: GridFilters; + sort: { [key: string]: ClrDatagridSortOrder }; + search: string; }; export type UIElementOffset = { x: number; y: number }; export type DataJobsLocalStorageUserConfig = { - hiddenColumns: { [columnName: string]: boolean }; + hiddenColumns: { [columnName: string]: boolean }; }; @Directive() export abstract class DataJobsBaseGridComponent - extends TaurusBaseComponent - implements OnInit, OnTaurusModelInit, OnTaurusModelInitialLoad, OnTaurusModelLoad, OnTaurusModelChange, OnTaurusModelError + extends TaurusBaseComponent + implements + OnInit, + OnTaurusModelInit, + OnTaurusModelInitialLoad, + OnTaurusModelLoad, + OnTaurusModelChange, + OnTaurusModelError { - /** - * @inheritDoc - */ - static override readonly CLASS_NAME: string = 'DataJobsBaseGridComponent'; - - /** - * @inheritDoc - */ - static override readonly PUBLIC_NAME: string = 'DataJobs-BaseGrid-Component'; - - static readonly UI_KEY_PAGE_OFFSET = 'pageOffset'; - static readonly UI_KEY_GRID_OFFSET = 'gridOffset'; - static readonly UI_KEY_GRID_UI_STATE = 'gridUIState'; - - static readonly CONTENT_AREA_SELECTOR = '.content-area'; - static readonly DATA_GRID_SELECTOR = '.datagrid'; - - /** - * ** Update strategy that will be used to update Browser URL. - * - * - 'updateLocation' will update softly update the URL using Location service, and it's default one - * - 'updateRouter' will trigger Angular router resolve mechanism with all guards and resolvers through Router service - */ - @Input() urlUpdateStrategy: 'updateLocation' | 'updateRouter' = 'updateLocation'; - - /** - * ** Query param key for search value. - */ - @Input() searchParam: string = QUERY_PARAM_SEARCH; - /** - * ** Position for search query param. - */ - @Input() searchParamPosition = 0; - - /** - * ** Base position index for Data Jobs filters query param. - * - * - Every filter has its own defined +x from the base. - */ - @Input() filtersQueryParamPositionBase = 0; - - /** - * ** URLStateManager external dependency injection to act in synchronous way external pages and the Data Jobs. - */ - @Input() set urlStateManager(value: URLStateManager) { - if (value) { - this._urlStateManager = value; - this._isUrlStateManagerExternalDependency = true; - } + /** + * @inheritDoc + */ + static override readonly CLASS_NAME: string = "DataJobsBaseGridComponent"; + + /** + * @inheritDoc + */ + static override readonly PUBLIC_NAME: string = "DataJobs-BaseGrid-Component"; + + static readonly UI_KEY_PAGE_OFFSET = "pageOffset"; + static readonly UI_KEY_GRID_OFFSET = "gridOffset"; + static readonly UI_KEY_GRID_UI_STATE = "gridUIState"; + + static readonly CONTENT_AREA_SELECTOR = ".content-area"; + static readonly DATA_GRID_SELECTOR = ".datagrid"; + + /** + * ** Update strategy that will be used to update Browser URL. + * + * - 'updateLocation' will update softly update the URL using Location service, and it's default one + * - 'updateRouter' will trigger Angular router resolve mechanism with all guards and resolvers through Router service + */ + @Input() urlUpdateStrategy: "updateLocation" | "updateRouter" = + "updateLocation"; + + /** + * ** Query param key for search value. + */ + @Input() searchParam: string = QUERY_PARAM_SEARCH; + /** + * ** Position for search query param. + */ + @Input() searchParamPosition = 0; + + /** + * ** Base position index for Data Jobs filters query param. + * + * - Every filter has its own defined +x from the base. + */ + @Input() filtersQueryParamPositionBase = 0; + + /** + * ** URLStateManager external dependency injection to act in synchronous way external pages and the Data Jobs. + */ + @Input() set urlStateManager(value: URLStateManager) { + if (value) { + this._urlStateManager = value; + this._isUrlStateManagerExternalDependency = true; + } + } + + get urlStateManager(): URLStateManager { + return this._urlStateManager; + } + + teamNameFilter: string; + displayMode = DisplayMode.STANDARD; + + filterByTeamName = false; + + selectedJob: DataJob; + gridState: ClrDatagridStateInterface; + loading = false; + + dataJobs: DataJob[] = []; + totalJobs = 0; + loadDataDebouncer = new Subject<"normal" | "forced">(); + + deploymentStatuses = [ + DataJobStatus.ENABLED, + DataJobStatus.DISABLED, + DataJobStatus.NOT_DEPLOYED, + ]; + executionStatuses = [ + DataJobExecutionStatus.SUCCEEDED, + DataJobExecutionStatus.PLATFORM_ERROR, + DataJobExecutionStatus.USER_ERROR, + DataJobExecutionStatus.SKIPPED, + DataJobExecutionStatus.CANCELLED, + ]; + + clrGridCurrentPage = 1; + clrGridUIState: ClrGridUIState; + clrGridDefaultFilter: ClrGridUIState["filter"]; + clrGridDefaultSort: ClrGridUIState["sort"]; + + quickFilters: QuickFilters; + + dataJobStatus = DataJobStatus; + + initializingComponent = true; + + /** + * ** Array of error code patterns that component should listen for in errors store. + */ + listenForErrorPatterns: string[] = [ + LOAD_JOBS_ERROR_CODES[TASK_LOAD_JOBS_STATE].All, + ]; + + /** + * ** Flag that indicates actionable elements should be disabled. + */ + disableActionableElements = false; + + protected restoreUIStateInProgress = false; + protected navigationInProgress = false; + protected _urlStateManager: URLStateManager; + + private _isUrlStateManagerExternalDependency = false; + + protected constructor( + componentService: ComponentService, + navigationService: NavigationService, + activatedRoute: ActivatedRoute, + protected readonly routerService: RouterService, + protected readonly dataJobsService: DataJobsService, + protected readonly dataJobsApiService: DataJobsApiService, + protected readonly errorHandlerService: ErrorHandlerService, + protected readonly location: Location, + protected readonly router: Router, + protected readonly elementRef: ElementRef, + protected readonly document: Document, + protected dataPipelinesModuleConfig: DataPipelinesConfig, + protected readonly localStorageConfigKey: string, + public localStorageUserConfig: DataJobsLocalStorageUserConfig, + className: string = null, + ) { + super( + componentService, + navigationService, + activatedRoute, + className ?? DataJobsBaseGridComponent.CLASS_NAME, + ); + + this._urlStateManager = new URLStateManager( + router.url.split("?")[0], + location, + ); + } + + /** + * ** NgFor elements tracking function. + */ + trackByFn(index: number, dataJob: DataJob): string { + return `${index}|${dataJob?.config?.team}|${dataJob?.jobName}`; + } + + resolveLogsUrl(job: DataJob): string { + if ( + CollectionsUtil.isNil(job) || + CollectionsUtil.isArrayEmpty(job.deployments) + ) { + return null; } - get urlStateManager(): URLStateManager { - return this._urlStateManager; + if (CollectionsUtil.isArrayEmpty(job.deployments[0].executions)) { + return null; } - teamNameFilter: string; - displayMode = DisplayMode.STANDARD; + return job.deployments[0].executions[0].logsUrl; + } - filterByTeamName = false; + showOrHideColumnChange(columnName: string, hidden: boolean): void { + this.localStorageUserConfig.hiddenColumns[columnName] = hidden; + localStorage.setItem( + this.localStorageConfigKey, + JSON.stringify(this.localStorageUserConfig), + ); + } - selectedJob: DataJob; - gridState: ClrDatagridStateInterface; - loading = false; + getJobStatus(job: DataJob): DataJobExecutionStatus { + if (job.deployments && job.deployments[0]?.lastExecutionStatus) { + return job.deployments[0]?.lastExecutionStatus; + } - dataJobs: DataJob[] = []; - totalJobs = 0; - loadDataDebouncer = new Subject<'normal' | 'forced'>(); + return null; + } - deploymentStatuses = [DataJobStatus.ENABLED, DataJobStatus.DISABLED, DataJobStatus.NOT_DEPLOYED]; - executionStatuses = [ - DataJobExecutionStatus.SUCCEEDED, - DataJobExecutionStatus.PLATFORM_ERROR, - DataJobExecutionStatus.USER_ERROR, - DataJobExecutionStatus.SKIPPED, - DataJobExecutionStatus.CANCELLED - ]; + getJobSuccessRateTitle(job: DataJob): string { + if (job.deployments) { + return `${job.deployments[0]?.successfulExecutions} successful / ${ + job.deployments[0]?.failedExecutions + + job.deployments[0]?.successfulExecutions + } total`; + } - clrGridCurrentPage = 1; - clrGridUIState: ClrGridUIState; - clrGridDefaultFilter: ClrGridUIState['filter']; - clrGridDefaultSort: ClrGridUIState['sort']; - - quickFilters: QuickFilters; - - dataJobStatus = DataJobStatus; - - initializingComponent = true; - - /** - * ** Array of error code patterns that component should listen for in errors store. - */ - listenForErrorPatterns: string[] = [LOAD_JOBS_ERROR_CODES[TASK_LOAD_JOBS_STATE].All]; - - /** - * ** Flag that indicates actionable elements should be disabled. - */ - disableActionableElements = false; - - protected restoreUIStateInProgress = false; - protected navigationInProgress = false; - protected _urlStateManager: URLStateManager; - - private _isUrlStateManagerExternalDependency = false; - - protected constructor( - componentService: ComponentService, - navigationService: NavigationService, - activatedRoute: ActivatedRoute, - protected readonly routerService: RouterService, - protected readonly dataJobsService: DataJobsService, - protected readonly dataJobsApiService: DataJobsApiService, - protected readonly errorHandlerService: ErrorHandlerService, - protected readonly location: Location, - protected readonly router: Router, - protected readonly elementRef: ElementRef, - protected readonly document: Document, - protected dataPipelinesModuleConfig: DataPipelinesConfig, - protected readonly localStorageConfigKey: string, - public localStorageUserConfig: DataJobsLocalStorageUserConfig, - className: string = null - ) { - super(componentService, navigationService, activatedRoute, className ?? DataJobsBaseGridComponent.CLASS_NAME); + return null; + } - this._urlStateManager = new URLStateManager(router.url.split('?')[0], location); - } + /** + * ** Callback (listener) for User search. + */ + search(value: string) { + this.clrGridUIState.search = value; - /** - * ** NgFor elements tracking function. - */ - trackByFn(index: number, dataJob: DataJob): string { - return `${index}|${dataJob?.config?.team}|${dataJob?.jobName}`; - } + this._updateUrlStateManager(); - resolveLogsUrl(job: DataJob): string { - if (CollectionsUtil.isNil(job) || CollectionsUtil.isArrayEmpty(job.deployments)) { - return null; - } + this.refresh(); + } - if (CollectionsUtil.isArrayEmpty(job.deployments[0].executions)) { - return null; - } + refresh(): void { + this.loadDataWithState(null); + } - return job.deployments[0].executions[0].logsUrl; + /** + * ** Main callback (listener) for ClrGrid state mutation, like filters, sort. + */ + loadDataWithState(state: ClrDatagridStateInterface): void { + if (state != null) { + this.gridState = state; } - showOrHideColumnChange(columnName: string, hidden: boolean): void { - this.localStorageUserConfig.hiddenColumns[columnName] = hidden; - localStorage.setItem(this.localStorageConfigKey, JSON.stringify(this.localStorageUserConfig)); + if (!this.model || this.restoreUIStateInProgress) { + return; } - getJobStatus(job: DataJob): DataJobExecutionStatus { - if (job.deployments && job.deployments[0]?.lastExecutionStatus) { - return job.deployments[0]?.lastExecutionStatus; - } + if (this.filterByTeamName && !this.teamNameFilter) { + // While the teamNameFilter is empty, no refresh requests will be executed. + console.warn( + "Refresh operation will be skipped. teamNameFilter is empty.", + ); - return null; + return; } - getJobSuccessRateTitle(job: DataJob): string { - if (job.deployments) { - return `${job.deployments[0]?.successfulExecutions} successful / ${ - job.deployments[0]?.failedExecutions + job.deployments[0]?.successfulExecutions - } total`; - } + this.loadDataDebouncer.next("normal"); + } - return null; - } + isStandardDisplayMode() { + return this.displayMode === DisplayMode.STANDARD; + } - /** - * ** Callback (listener) for User search. - */ - search(value: string) { - this.clrGridUIState.search = value; + selectionChanged(dataJob: DataJob) { + this.selectedJob = dataJob; + } - this._updateUrlStateManager(); + /** + * ** Navigate to Data Job details page, while at first save Ui State of the Page. + */ + navigateToJobDetails(job?: DataJob) { + if (job) { + this.saveUIState(); + this.selectionChanged(job); - this.refresh(); - } + this.dataJobsService.notifyForTeamImplicitly(job.config?.team); + + this.navigationInProgress = true; - refresh(): void { - this.loadDataWithState(null); + this.navigateTo({ + "$.team": job.config?.team, + "$.job": job.jobName, + }).finally(() => { + this.navigationInProgress = false; + }); } + } + + /** + * @inheritDoc + */ + onModelInit(): void { + let initializationFinished = false; + let previousState: RouteState; + + this.subscriptions.push( + this.routerService + .get() + .pipe( + distinctUntilChanged( + (a, b) => + (a.state.absoluteConfigPath !== b.state.absoluteConfigPath || + a.state.absoluteRoutePath === b.state.absoluteRoutePath) && + this._areQueryParamsPristine(b.state), + ), + ) + .subscribe((routerState) => { + if (initializationFinished) { + // check if route state comes from Browser popped state (Browser stack) + if ( + (!previousState || + previousState.absoluteRoutePath === + routerState.state.absoluteRoutePath) && + !this._areQueryParamsPristine(routerState.state) + ) { + this._extractQueryParams(routerState.state); + this._updateUrlStateManager(); + + // set query params mutation to false, because it's Browser popped state + // no need to update the Browser URL, just URLStateManager need to be updated + this.urlStateManager.isQueryParamsStateMutated = false; + } else { + this._updateUrlStateManager(routerState.state); + } - /** - * ** Main callback (listener) for ClrGrid state mutation, like filters, sort. - */ - loadDataWithState(state: ClrDatagridStateInterface): void { - if (state != null) { - this.gridState = state; - } + previousState = routerState.state; - if (!this.model || this.restoreUIStateInProgress) { return; - } + } - if (this.filterByTeamName && !this.teamNameFilter) { - // While the teamNameFilter is empty, no refresh requests will be executed. - console.warn('Refresh operation will be skipped. teamNameFilter is empty.'); + initializationFinished = true; + previousState = routerState.state; - return; - } + this._initUrlStateManager(routerState.state); + this._extractQueryParams(routerState.state); - this.loadDataDebouncer.next('normal'); - } + if (this._doesRestoreUIStateExist()) { + if (this._shouldRestoreUIState(routerState)) { + this.restoreUIStateInProgress = true; - isStandardDisplayMode() { - return this.displayMode === DisplayMode.STANDARD; - } - - selectionChanged(dataJob: DataJob) { - this.selectedJob = dataJob; - } + const clrGridUIState = this.model.getUiState( + DataJobsBaseGridComponent.UI_KEY_GRID_UI_STATE, + ); + if (clrGridUIState) { + this.clrGridUIState = clrGridUIState; + } - /** - * ** Navigate to Data Job details page, while at first save Ui State of the Page. - */ - navigateToJobDetails(job?: DataJob) { - if (job) { - this.saveUIState(); - this.selectionChanged(job); + this.loadDataDebouncer.next("forced"); - this.dataJobsService.notifyForTeamImplicitly(job.config?.team); + return; + } else { + this._clearUiPageState(); + } + } + + if (this.gridState) { + this.refresh(); + } + }), + ); + } + + /** + * @inheritDoc + */ + onModelInitialLoad(): void { + this.routerService + .get() + .pipe(take(1)) + .subscribe((routerState) => { + if (this._shouldRestoreUIState(routerState)) { + this.restoreUIState(); + + this.restoreUIStateInProgress = false; + } + }); + } - this.navigationInProgress = true; + /** + * @inheritDoc + */ + onModelLoad(): void { + this.loading = false; - this.navigateTo({ - '$.team': job.config?.team, - '$.job': job.jobName - }).finally(() => { - this.navigationInProgress = false; - }); - } + if (this.initializingComponent) { + this.initializingComponent = false; } + } + + /** + * @inheritDoc + */ + onModelChange(model: ComponentModel): void { + this._extractData(model); + } + + /** + * @inheritDoc + */ + onModelError( + model: ComponentModel, + _task: string, + newErrorRecords: ErrorRecord[], + ): void { + this._extractData(model); + + newErrorRecords.forEach((errorRecord) => { + const error = ErrorUtil.extractError(errorRecord.error); + + this.errorHandlerService.processError(error); + }); + } + + /** + * @inheritDoc + */ + override ngOnInit(): void { + this._initializeClrGridUIState(); + + // attach listener to ErrorStore and listen for Errors change + this.errors.onChange((store) => { + // if there is record for listened error code patterns disable actionable elements + this.disableActionableElements = store.hasCodePattern( + ...this.listenForErrorPatterns, + ); + }); + + this.subscriptions.push( + this.loadDataDebouncer.pipe(debounceTime(300)).subscribe((handling) => { + if (this.isLoadDataAllowed() || handling === "forced") { + this._doLoadData(); + + this._initializeQuickFilters(); + this._updateUrlStateManager(); + + if (this.restoreUIStateInProgress) { + this._doUrlUpdate("replaceLocation"); + } + } - /** - * @inheritDoc - */ - onModelInit(): void { - let initializationFinished = false; - let previousState: RouteState; - - this.subscriptions.push( - this.routerService - .get() - .pipe( - distinctUntilChanged( - (a, b) => - (a.state.absoluteConfigPath !== b.state.absoluteConfigPath || - a.state.absoluteRoutePath === b.state.absoluteRoutePath) && - this._areQueryParamsPristine(b.state) - ) - ) - .subscribe((routerState) => { - if (initializationFinished) { - // check if route state comes from Browser popped state (Browser stack) - if ( - (!previousState || previousState.absoluteRoutePath === routerState.state.absoluteRoutePath) && - !this._areQueryParamsPristine(routerState.state) - ) { - this._extractQueryParams(routerState.state); - this._updateUrlStateManager(); - - // set query params mutation to false, because it's Browser popped state - // no need to update the Browser URL, just URLStateManager need to be updated - this.urlStateManager.isQueryParamsStateMutated = false; - } else { - this._updateUrlStateManager(routerState.state); - } - - previousState = routerState.state; - - return; - } - - initializationFinished = true; - previousState = routerState.state; - - this._initUrlStateManager(routerState.state); - this._extractQueryParams(routerState.state); - - if (this._doesRestoreUIStateExist()) { - if (this._shouldRestoreUIState(routerState)) { - this.restoreUIStateInProgress = true; - - const clrGridUIState = this.model.getUiState(DataJobsBaseGridComponent.UI_KEY_GRID_UI_STATE); - if (clrGridUIState) { - this.clrGridUIState = clrGridUIState; - } - - this.loadDataDebouncer.next('forced'); - - return; - } else { - this._clearUiPageState(); - } - } - - if (this.gridState) { - this.refresh(); - } - }) + if (this.isUrlUpdateAllowed() || handling === "forced") { + this._doUrlUpdate(); + } + }), + ); + + super.ngOnInit(); + + this.loading = true; + + try { + this._loadLocalStorageUserConfig(); + } catch (e1) { + console.error( + "Failed to read config from localStorage", + e1, + "Will attempt to re-create it.", + ); + try { + localStorage.removeItem(this.localStorageConfigKey); + this._loadLocalStorageUserConfig(); + } catch (e2) { + console.error( + "Was unable to re-initialize localStorage user config", + e2, ); + } } + } - /** - * @inheritDoc - */ - onModelInitialLoad(): void { - this.routerService - .get() - .pipe(take(1)) - .subscribe((routerState) => { - if (this._shouldRestoreUIState(routerState)) { - this.restoreUIState(); + protected isLoadDataAllowed(): boolean { + if (!this.gridState) { + //While the gridState is empty, no refresh requests will be executed. + console.log( + "Load data will be skipped. gridState is empty. operation not allowed.", + ); - this.restoreUIStateInProgress = false; - } - }); + return false; } - /** - * @inheritDoc - */ - onModelLoad(): void { - this.loading = false; - - if (this.initializingComponent) { - this.initializingComponent = false; - } + return !this.navigationInProgress; + } + + protected isUrlUpdateAllowed(): boolean { + return ( + !this.navigationInProgress && + this.urlStateManager.isQueryParamsStateMutated + ); + } + + protected saveUIState() { + const dataGrid = this.elementRef.nativeElement.querySelector( + DataJobsBaseGridComponent.DATA_GRID_SELECTOR, + ); + if (dataGrid) { + this.model.withUiState(DataJobsBaseGridComponent.UI_KEY_GRID_OFFSET, { + x: dataGrid.scrollLeft, + y: dataGrid.scrollTop, + }); } - /** - * @inheritDoc - */ - onModelChange(model: ComponentModel): void { - this._extractData(model); + const contentArea = this.document.querySelector( + DataJobsBaseGridComponent.CONTENT_AREA_SELECTOR, + ); + if (contentArea) { + this.model.withUiState(DataJobsBaseGridComponent.UI_KEY_PAGE_OFFSET, { + x: contentArea.scrollLeft, + y: contentArea.scrollTop, + }); } - /** - * @inheritDoc - */ - onModelError(model: ComponentModel, _task: string, newErrorRecords: ErrorRecord[]): void { - this._extractData(model); + const clrGridUIStateDeepCloned = CollectionsUtil.cloneDeep( + this.clrGridUIState, + ); + clrGridUIStateDeepCloned.pageSize = + this.model.getComponentState()?.page?.size; + clrGridUIStateDeepCloned.lastPage = this.clrGridCurrentPage; - newErrorRecords.forEach((errorRecord) => { - const error = ErrorUtil.extractError(errorRecord.error); + this.model.withUiState( + DataJobsBaseGridComponent.UI_KEY_GRID_UI_STATE, + clrGridUIStateDeepCloned, + ); - this.errorHandlerService.processError(error); - }); - } + this.componentService.update(this.model.getComponentState()); + } - /** - * @inheritDoc - */ - override ngOnInit(): void { - this._initializeClrGridUIState(); - - // attach listener to ErrorStore and listen for Errors change - this.errors.onChange((store) => { - // if there is record for listened error code patterns disable actionable elements - this.disableActionableElements = store.hasCodePattern(...this.listenForErrorPatterns); - }); - - this.subscriptions.push( - this.loadDataDebouncer.pipe(debounceTime(300)).subscribe((handling) => { - if (this.isLoadDataAllowed() || handling === 'forced') { - this._doLoadData(); - - this._initializeQuickFilters(); - this._updateUrlStateManager(); - - if (this.restoreUIStateInProgress) { - this._doUrlUpdate('replaceLocation'); - } - } - - if (this.isUrlUpdateAllowed() || handling === 'forced') { - this._doUrlUpdate(); - } - }) - ); - - super.ngOnInit(); - - this.loading = true; - - try { - this._loadLocalStorageUserConfig(); - } catch (e1) { - console.error('Failed to read config from localStorage', e1, 'Will attempt to re-create it.'); - try { - localStorage.removeItem(this.localStorageConfigKey); - this._loadLocalStorageUserConfig(); - } catch (e2) { - console.error('Was unable to re-initialize localStorage user config', e2); - } - } + protected restoreUIState() { + if (!this._doesRestoreUIStateExist()) { + return; } - protected isLoadDataAllowed(): boolean { - if (!this.gridState) { - //While the gridState is empty, no refresh requests will be executed. - console.log('Load data will be skipped. gridState is empty. operation not allowed.'); - - return false; - } - - return !this.navigationInProgress; + setTimeout(() => { + const gridOffset = this.model.getUiState( + DataJobsBaseGridComponent.UI_KEY_GRID_OFFSET, + ); + const dataGrid = this.elementRef.nativeElement.querySelector( + DataJobsBaseGridComponent.DATA_GRID_SELECTOR, + ); + if (dataGrid) { + dataGrid.scrollTo(gridOffset.x, gridOffset.y); + } + + const pageOffset = this.model.getUiState( + DataJobsBaseGridComponent.UI_KEY_PAGE_OFFSET, + ); + const contentArea = this.document.querySelector( + DataJobsBaseGridComponent.CONTENT_AREA_SELECTOR, + ); + if (contentArea) { + contentArea.scrollTo(pageOffset.x, pageOffset.y); + } + + this._clearUiPageState(); + }, 25); + } + + private _shouldRestoreUIState(routerState: RouterState): boolean { + const restoreUiWhen = + routerState.state.getData("restoreUiWhen"); + if (CollectionsUtil.isNil(restoreUiWhen)) { + return true; } - protected isUrlUpdateAllowed(): boolean { - return !this.navigationInProgress && this.urlStateManager.isQueryParamsStateMutated; + if (!CollectionsUtil.isString(restoreUiWhen.previousConfigPathLike)) { + return true; } - protected saveUIState() { - const dataGrid = this.elementRef.nativeElement.querySelector(DataJobsBaseGridComponent.DATA_GRID_SELECTOR); - if (dataGrid) { - this.model.withUiState(DataJobsBaseGridComponent.UI_KEY_GRID_OFFSET, { - x: dataGrid.scrollLeft, - y: dataGrid.scrollTop - }); - } - - const contentArea = this.document.querySelector(DataJobsBaseGridComponent.CONTENT_AREA_SELECTOR); - if (contentArea) { - this.model.withUiState(DataJobsBaseGridComponent.UI_KEY_PAGE_OFFSET, { - x: contentArea.scrollLeft, - y: contentArea.scrollTop - }); - } - - const clrGridUIStateDeepCloned = CollectionsUtil.cloneDeep(this.clrGridUIState); - clrGridUIStateDeepCloned.pageSize = this.model.getComponentState()?.page?.size; - clrGridUIStateDeepCloned.lastPage = this.clrGridCurrentPage; - - this.model.withUiState(DataJobsBaseGridComponent.UI_KEY_GRID_UI_STATE, clrGridUIStateDeepCloned); - - this.componentService.update(this.model.getComponentState()); + return routerState + .getPrevious() + .state.absoluteConfigPath.includes(restoreUiWhen.previousConfigPathLike); + } + + private _doesRestoreUIStateExist(): boolean { + return ( + CollectionsUtil.isDefined(this.model) && + CollectionsUtil.isDefined( + this.model.getUiState( + DataJobsBaseGridComponent.UI_KEY_GRID_UI_STATE, + ), + ) + ); + } + + private _clearUiPageState() { + this.model + .getComponentState() + .uiState.delete(DataJobsBaseGridComponent.UI_KEY_GRID_OFFSET); + this.model + .getComponentState() + .uiState.delete(DataJobsBaseGridComponent.UI_KEY_PAGE_OFFSET); + this.model + .getComponentState() + .uiState.delete(DataJobsBaseGridComponent.UI_KEY_GRID_UI_STATE); + + this.componentService.update(this.model.getComponentState()); + } + + private _doLoadData(): void { + this.selectedJob = null; + this.loading = true; + + if (this._doesRestoreUIStateExist()) { + this.clrGridCurrentPage = this.clrGridUIState.lastPage; + } else { + this.model + .withFilter(this._buildRefreshFilters()) + .withSearch(this.clrGridUIState.search) + .withPage(this.gridState?.page?.current, this.gridState?.page?.size); } - protected restoreUIState() { - if (!this._doesRestoreUIStateExist()) { - return; - } + this.dataJobsService.loadJobs(this.model); + } - setTimeout(() => { - const gridOffset = this.model.getUiState(DataJobsBaseGridComponent.UI_KEY_GRID_OFFSET); - const dataGrid = this.elementRef.nativeElement.querySelector(DataJobsBaseGridComponent.DATA_GRID_SELECTOR); - if (dataGrid) { - dataGrid.scrollTo(gridOffset.x, gridOffset.y); - } + private _extractData(model: ComponentModel): void { + const componentState = model.getComponentState(); + const dataJobsData: { content?: DataJob[]; totalItems?: number } = + componentState.data.get(JOBS_DATA_KEY) ?? {}; - const pageOffset = this.model.getUiState(DataJobsBaseGridComponent.UI_KEY_PAGE_OFFSET); - const contentArea = this.document.querySelector(DataJobsBaseGridComponent.CONTENT_AREA_SELECTOR); - if (contentArea) { - contentArea.scrollTo(pageOffset.x, pageOffset.y); - } + this.dataJobs = CollectionsUtil.isArray(dataJobsData?.content) + ? [...dataJobsData?.content] + : []; - this._clearUiPageState(); - }, 25); - } + this.clrGridUIState.totalItems = dataJobsData?.totalItems ?? 0; + } - private _shouldRestoreUIState(routerState: RouterState): boolean { - const restoreUiWhen = routerState.state.getData('restoreUiWhen'); - if (CollectionsUtil.isNil(restoreUiWhen)) { - return true; - } + private _initUrlStateManager(routeState: RouteState): void { + if (!this._isUrlStateManagerExternalDependency) { + this._urlStateManager = new URLStateManager( + routeState.absoluteRoutePath, + this.location, + ); + } + } - if (!CollectionsUtil.isString(restoreUiWhen.previousConfigPathLike)) { - return true; - } + private _extractQueryParams(routeState: RouteState): void { + if (!routeState.queryParams) { + this.clrGridUIState.search = ""; + this.clrGridUIState.filter = {}; - return routerState.getPrevious().state.absoluteConfigPath.includes(restoreUiWhen.previousConfigPathLike); + return; } - private _doesRestoreUIStateExist(): boolean { - return ( - CollectionsUtil.isDefined(this.model) && - CollectionsUtil.isDefined(this.model.getUiState(DataJobsBaseGridComponent.UI_KEY_GRID_UI_STATE)) + if (!this.initializingComponent) { + this.clrGridUIState.filter.jobName = routeState.getQueryParam("jobName"); + this.clrGridUIState.filter.teamName = + routeState.getQueryParam("teamName"); + this.clrGridUIState.filter.description = + routeState.getQueryParam("description"); + this.clrGridUIState.filter.deploymentStatus = + this._decodeFilterFromQueryParam( + "deploymentStatus", + routeState.getQueryParam("deploymentStatus"), ); + this.clrGridUIState.filter.deploymentLastExecutionStatus = + this._decodeFilterFromQueryParam( + "deploymentLastExecutionStatus", + routeState.getQueryParam("deploymentLastExecutionStatus"), + ); + } else { + this._checkMutatedFilterAndUpdate(routeState, "jobName", false); + this._checkMutatedFilterAndUpdate(routeState, "teamName", false); + this._checkMutatedFilterAndUpdate(routeState, "description", false); + + this._checkMutatedFilterAndUpdate(routeState, "deploymentStatus", true); + this._checkMutatedFilterAndUpdate( + routeState, + "deploymentLastExecutionStatus", + true, + ); } - private _clearUiPageState() { - this.model.getComponentState().uiState.delete(DataJobsBaseGridComponent.UI_KEY_GRID_OFFSET); - this.model.getComponentState().uiState.delete(DataJobsBaseGridComponent.UI_KEY_PAGE_OFFSET); - this.model.getComponentState().uiState.delete(DataJobsBaseGridComponent.UI_KEY_GRID_UI_STATE); - - this.componentService.update(this.model.getComponentState()); + // search has different handling so because of that is last handled + const searchQueryString = routeState.getQueryParam(this.searchParam); + const normalizedSearchQueryString = searchQueryString + ? searchQueryString + : ""; + if (this.clrGridUIState.search !== normalizedSearchQueryString) { + this.search(normalizedSearchQueryString); } + } - private _doLoadData(): void { - this.selectedJob = null; - this.loading = true; - - if (this._doesRestoreUIStateExist()) { - this.clrGridCurrentPage = this.clrGridUIState.lastPage; - } else { - this.model - .withFilter(this._buildRefreshFilters()) - .withSearch(this.clrGridUIState.search) - .withPage(this.gridState?.page?.current, this.gridState?.page?.size); - } - - this.dataJobsService.loadJobs(this.model); + private _updateUrlStateManager(routeState?: RouteState): void { + if (CollectionsUtil.isDefined(routeState)) { + this.urlStateManager.baseURL = routeState.absoluteRoutePath; } - private _extractData(model: ComponentModel): void { - const componentState = model.getComponentState(); - const dataJobsData: { content?: DataJob[]; totalItems?: number } = componentState.data.get(JOBS_DATA_KEY) ?? {}; - - this.dataJobs = CollectionsUtil.isArray(dataJobsData?.content) ? [...dataJobsData?.content] : []; - - this.clrGridUIState.totalItems = dataJobsData?.totalItems ?? 0; + this.urlStateManager.setQueryParam( + "jobName", + this.clrGridUIState.filter.jobName, + this.filtersQueryParamPositionBase + 1, + ); + this.urlStateManager.setQueryParam( + "teamName", + this.clrGridUIState.filter.teamName, + this.filtersQueryParamPositionBase + 2, + ); + this.urlStateManager.setQueryParam( + "description", + this.clrGridUIState.filter.description, + this.filtersQueryParamPositionBase + 3, + ); + this.urlStateManager.setQueryParam( + "deploymentStatus", + this._encodeFilterForQueryParam( + "deploymentStatus", + this.clrGridUIState.filter.deploymentStatus, + ), + this.filtersQueryParamPositionBase + 4, + ); + this.urlStateManager.setQueryParam( + "deploymentLastExecutionStatus", + this._encodeFilterForQueryParam( + "deploymentLastExecutionStatus", + this.clrGridUIState.filter.deploymentLastExecutionStatus, + ), + this.filtersQueryParamPositionBase + 5, + ); + + // search has different handling so because of that is last handled + this.urlStateManager.setQueryParam( + this.searchParam, + this.clrGridUIState.search, + this.searchParamPosition, + ); + } + + private _areQueryParamsPristine(routeState: RouteState): boolean { + if ( + this.clrGridUIState.search !== routeState.getQueryParam(this.searchParam) + ) { + return false; } - private _initUrlStateManager(routeState: RouteState): void { - if (!this._isUrlStateManagerExternalDependency) { - this._urlStateManager = new URLStateManager(routeState.absoluteRoutePath, this.location); - } + if ( + this.clrGridUIState.filter.jobName !== routeState.getQueryParam("jobName") + ) { + return false; } - private _extractQueryParams(routeState: RouteState): void { - if (!routeState.queryParams) { - this.clrGridUIState.search = ''; - this.clrGridUIState.filter = {}; - - return; - } - - if (!this.initializingComponent) { - this.clrGridUIState.filter.jobName = routeState.getQueryParam('jobName'); - this.clrGridUIState.filter.teamName = routeState.getQueryParam('teamName'); - this.clrGridUIState.filter.description = routeState.getQueryParam('description'); - this.clrGridUIState.filter.deploymentStatus = this._decodeFilterFromQueryParam( - 'deploymentStatus', - routeState.getQueryParam('deploymentStatus') - ); - this.clrGridUIState.filter.deploymentLastExecutionStatus = this._decodeFilterFromQueryParam( - 'deploymentLastExecutionStatus', - routeState.getQueryParam('deploymentLastExecutionStatus') - ); - } else { - this._checkMutatedFilterAndUpdate(routeState, 'jobName', false); - this._checkMutatedFilterAndUpdate(routeState, 'teamName', false); - this._checkMutatedFilterAndUpdate(routeState, 'description', false); - - this._checkMutatedFilterAndUpdate(routeState, 'deploymentStatus', true); - this._checkMutatedFilterAndUpdate(routeState, 'deploymentLastExecutionStatus', true); - } - - // search has different handling so because of that is last handled - const searchQueryString = routeState.getQueryParam(this.searchParam); - const normalizedSearchQueryString = searchQueryString ? searchQueryString : ''; - if (this.clrGridUIState.search !== normalizedSearchQueryString) { - this.search(normalizedSearchQueryString); - } + if ( + this.clrGridUIState.filter.teamName !== + routeState.getQueryParam("teamName") + ) { + return false; } - private _updateUrlStateManager(routeState?: RouteState): void { - if (CollectionsUtil.isDefined(routeState)) { - this.urlStateManager.baseURL = routeState.absoluteRoutePath; - } - - this.urlStateManager.setQueryParam('jobName', this.clrGridUIState.filter.jobName, this.filtersQueryParamPositionBase + 1); - this.urlStateManager.setQueryParam('teamName', this.clrGridUIState.filter.teamName, this.filtersQueryParamPositionBase + 2); - this.urlStateManager.setQueryParam('description', this.clrGridUIState.filter.description, this.filtersQueryParamPositionBase + 3); - this.urlStateManager.setQueryParam( - 'deploymentStatus', - this._encodeFilterForQueryParam('deploymentStatus', this.clrGridUIState.filter.deploymentStatus), - this.filtersQueryParamPositionBase + 4 - ); - this.urlStateManager.setQueryParam( - 'deploymentLastExecutionStatus', - this._encodeFilterForQueryParam('deploymentLastExecutionStatus', this.clrGridUIState.filter.deploymentLastExecutionStatus), - this.filtersQueryParamPositionBase + 5 - ); - - // search has different handling so because of that is last handled - this.urlStateManager.setQueryParam(this.searchParam, this.clrGridUIState.search, this.searchParamPosition); + if ( + this.clrGridUIState.filter.description !== + routeState.getQueryParam("description") + ) { + return false; } - private _areQueryParamsPristine(routeState: RouteState): boolean { - if (this.clrGridUIState.search !== routeState.getQueryParam(this.searchParam)) { - return false; - } - - if (this.clrGridUIState.filter.jobName !== routeState.getQueryParam('jobName')) { - return false; - } - - if (this.clrGridUIState.filter.teamName !== routeState.getQueryParam('teamName')) { - return false; - } - - if (this.clrGridUIState.filter.description !== routeState.getQueryParam('description')) { - return false; - } - - if ( - this.clrGridUIState.filter.deploymentStatus !== - this._decodeFilterFromQueryParam('deploymentStatus', routeState.getQueryParam('deploymentStatus')) - ) { - return false; - } + if ( + this.clrGridUIState.filter.deploymentStatus !== + this._decodeFilterFromQueryParam( + "deploymentStatus", + routeState.getQueryParam("deploymentStatus"), + ) + ) { + return false; + } - return ( - this.clrGridUIState.filter.deploymentLastExecutionStatus === - this._decodeFilterFromQueryParam('deploymentLastExecutionStatus', routeState.getQueryParam('deploymentLastExecutionStatus')) + return ( + this.clrGridUIState.filter.deploymentLastExecutionStatus === + this._decodeFilterFromQueryParam( + "deploymentLastExecutionStatus", + routeState.getQueryParam("deploymentLastExecutionStatus"), + ) + ); + } + + private _checkMutatedFilterAndUpdate( + routeState: RouteState, + key: keyof GridFilters, + decode: boolean, + ): void { + if (!decode) { + if ( + CollectionsUtil.isDefined(routeState.getQueryParam(key)) && + this.clrGridUIState.filter[key] !== routeState.getQueryParam(key) + ) { + this.clrGridUIState.filter[key] = routeState.getQueryParam(key); + } + } else { + if ( + CollectionsUtil.isDefined( + routeState.getQueryParam(key) && + this.clrGridUIState.filter[key] !== + this._decodeFilterFromQueryParam( + key, + routeState.getQueryParam(key), + ), + ) + ) { + this.clrGridUIState.filter[key] = this._decodeFilterFromQueryParam( + key, + routeState.getQueryParam(key), ); + } } - - private _checkMutatedFilterAndUpdate(routeState: RouteState, key: keyof GridFilters, decode: boolean): void { - if (!decode) { - if ( - CollectionsUtil.isDefined(routeState.getQueryParam(key)) && - this.clrGridUIState.filter[key] !== routeState.getQueryParam(key) - ) { - this.clrGridUIState.filter[key] = routeState.getQueryParam(key); - } - } else { - if ( - CollectionsUtil.isDefined( - routeState.getQueryParam(key) && - this.clrGridUIState.filter[key] !== this._decodeFilterFromQueryParam(key, routeState.getQueryParam(key)) - ) - ) { - this.clrGridUIState.filter[key] = this._decodeFilterFromQueryParam(key, routeState.getQueryParam(key)); - } - } + } + + private _doUrlUpdate( + strategy: "updateLocation" | "updateRouter" | "replaceLocation" = this + .urlUpdateStrategy, + ): void { + if (strategy === "updateLocation") { + this.urlStateManager.locationToURL(); + } else if (strategy === "updateRouter") { + // eslint-disable-next-line @typescript-eslint/no-floating-promises + this.urlStateManager.navigateToUrl().then(); + } else { + this.urlStateManager.replaceToUrl(); } - - private _doUrlUpdate(strategy: 'updateLocation' | 'updateRouter' | 'replaceLocation' = this.urlUpdateStrategy): void { - if (strategy === 'updateLocation') { - this.urlStateManager.locationToURL(); - } else if (strategy === 'updateRouter') { - // eslint-disable-next-line @typescript-eslint/no-floating-promises - this.urlStateManager.navigateToUrl().then(); - } else { - this.urlStateManager.replaceToUrl(); - } + } + + private _loadLocalStorageUserConfig() { + const userConfig = localStorage.getItem(this.localStorageConfigKey); + if (userConfig) { + let newColumnProvided = false; + const parsedUserConfig: DataJobsLocalStorageUserConfig = + JSON.parse(userConfig); + + CollectionsUtil.iterateObject( + this.localStorageUserConfig.hiddenColumns, + (value, key) => { + if (!parsedUserConfig.hiddenColumns.hasOwnProperty(key)) { + newColumnProvided = true; + parsedUserConfig.hiddenColumns[key] = value; + } + }, + ); + + if (newColumnProvided) { + localStorage.setItem( + this.localStorageConfigKey, + JSON.stringify(parsedUserConfig), + ); + } + + this.localStorageUserConfig = parsedUserConfig; + } else { + localStorage.setItem( + this.localStorageConfigKey, + JSON.stringify(this.localStorageUserConfig), + ); + } + } + + /** + * ** Builds refresh filters. + * + * - Convert filters from an array to map, because that's what backend-calling service is expecting + */ + private _buildRefreshFilters(): ApiPredicate[] { + const filters: ApiPredicate[] = []; + + if (this.teamNameFilter) { + filters.push({ + property: "config.team", + pattern: this.teamNameFilter, + sort: null, + }); } - private _loadLocalStorageUserConfig() { - const userConfig = localStorage.getItem(this.localStorageConfigKey); - if (userConfig) { - let newColumnProvided = false; - const parsedUserConfig: DataJobsLocalStorageUserConfig = JSON.parse(userConfig); + if (this.gridState?.filters) { + for (const _filter of this.gridState.filters) { + const { property, value } = _filter as { + property: string; + value: string; + }; - CollectionsUtil.iterateObject(this.localStorageUserConfig.hiddenColumns, (value, key) => { - if (!parsedUserConfig.hiddenColumns.hasOwnProperty(key)) { - newColumnProvided = true; - parsedUserConfig.hiddenColumns[key] = value; - } - }); + filters.push({ + property, + pattern: this._createApiFilterPattern(property, value), + sort: null, + }); + } + } - if (newColumnProvided) { - localStorage.setItem(this.localStorageConfigKey, JSON.stringify(parsedUserConfig)); - } + if (this.gridState?.sort) { + const direction = this.gridState.sort.reverse ? DESC : ASC; - this.localStorageUserConfig = parsedUserConfig; - } else { - localStorage.setItem(this.localStorageConfigKey, JSON.stringify(this.localStorageUserConfig)); - } + filters.push({ + property: this.gridState.sort.by as string, + pattern: null, + sort: direction, + }); } - /** - * ** Builds refresh filters. - * - * - Convert filters from an array to map, because that's what backend-calling service is expecting - */ - private _buildRefreshFilters(): ApiPredicate[] { - const filters: ApiPredicate[] = []; - - if (this.teamNameFilter) { - filters.push({ - property: 'config.team', - pattern: this.teamNameFilter, - sort: null - }); + return filters; + } + + private _encodeFilterForQueryParam( + propertyName: keyof GridFilters, + value: string, + ): string { + switch (propertyName) { + case "deploymentStatus": + if (CollectionsUtil.isNil(value)) { + return "all"; } - if (this.gridState?.filters) { - for (const _filter of this.gridState.filters) { - const { property, value } = _filter as { - property: string; - value: string; - }; - - filters.push({ - property, - pattern: this._createApiFilterPattern(property, value), - sort: null - }); - } + return `${value}`.replace(" ", "_").toLowerCase(); + case "deploymentLastExecutionStatus": + if (CollectionsUtil.isNil(value)) { + return undefined; } - if (this.gridState?.sort) { - const direction = this.gridState.sort.reverse ? DESC : ASC; - - filters.push({ - property: this.gridState.sort.by as string, - pattern: null, - sort: direction - }); - } - - return filters; + return `${value}`.toLowerCase(); + default: + return `${value}`.toLowerCase(); } - - private _encodeFilterForQueryParam(propertyName: keyof GridFilters, value: string): string { - switch (propertyName) { - case 'deploymentStatus': - if (CollectionsUtil.isNil(value)) { - return 'all'; - } - - return `${value}`.replace(' ', '_').toLowerCase(); - case 'deploymentLastExecutionStatus': - if (CollectionsUtil.isNil(value)) { - return undefined; - } - - return `${value}`.toLowerCase(); - default: - return `${value}`.toLowerCase(); + } + + private _decodeFilterFromQueryParam( + propertyName: keyof GridFilters, + value: string, + ): string { + switch (propertyName) { + case "deploymentStatus": + switch (value) { + case "enabled": + return DataJobStatus.ENABLED; + case "disabled": + return DataJobStatus.DISABLED; + case "not_deployed": + return DataJobStatus.NOT_DEPLOYED; + default: + return undefined; } - } - - private _decodeFilterFromQueryParam(propertyName: keyof GridFilters, value: string): string { - switch (propertyName) { - case 'deploymentStatus': - switch (value) { - case 'enabled': - return DataJobStatus.ENABLED; - case 'disabled': - return DataJobStatus.DISABLED; - case 'not_deployed': - return DataJobStatus.NOT_DEPLOYED; - default: - return undefined; - } - case 'deploymentLastExecutionStatus': - if (CollectionsUtil.isNil(value)) { - return undefined; - } - - const normalizedExecStatus: DataJobExecutionStatus = `${value}`.toUpperCase() as DataJobExecutionStatus; - - return this.executionStatuses.includes(normalizedExecStatus) ? normalizedExecStatus : undefined; - default: - return `${value}`.toLowerCase(); + case "deploymentLastExecutionStatus": + if (CollectionsUtil.isNil(value)) { + return undefined; } - } - private _createApiFilterPattern(propertyName: string, value: string) { - // TODO: Remove this, once the Backend support % filterting for all the properties - // TODO: Once jobName get the same handling as config.team, add case proper case - switch (propertyName) { - case 'config.team': - return `%${value}%`; - case 'deployments.enabled': - return `${value}`.toLowerCase().replace(' ', '_'); - case 'deployments.lastExecutionStatus': - return `${value}`.toLowerCase(); - case 'jobName': - return `*${value}*`; - default: - return `${value}`; - } - } + const normalizedExecStatus: DataJobExecutionStatus = + `${value}`.toUpperCase() as DataJobExecutionStatus; - private _initializeQuickFilters(): void { - const activateFilter = (status: DataJobStatus) => () => { - this.clrGridUIState.filter.deploymentStatus = status; - }; + return this.executionStatuses.includes(normalizedExecStatus) + ? normalizedExecStatus + : undefined; + default: + return `${value}`.toLowerCase(); + } + } + + private _createApiFilterPattern(propertyName: string, value: string) { + // TODO: Remove this, once the Backend support % filterting for all the properties + // TODO: Once jobName get the same handling as config.team, add case proper case + switch (propertyName) { + case "config.team": + return `%${value}%`; + case "deployments.enabled": + return `${value}`.toLowerCase().replace(" ", "_"); + case "deployments.lastExecutionStatus": + return `${value}`.toLowerCase(); + case "jobName": + return `*${value}*`; + default: + return `${value}`; + } + } - const deactivateFilter = () => { - delete this.clrGridUIState.filter.deploymentStatus; - }; + private _initializeQuickFilters(): void { + const activateFilter = (status: DataJobStatus) => () => { + this.clrGridUIState.filter.deploymentStatus = status; + }; - const isActiveQuickFilter = (status: DataJobStatus | 'all'): boolean => { - if (status === 'all') { - return CollectionsUtil.isNil(this.clrGridUIState.filter.deploymentStatus); - } + const deactivateFilter = () => { + delete this.clrGridUIState.filter.deploymentStatus; + }; - return this.clrGridUIState.filter.deploymentStatus === status; - }; + const isActiveQuickFilter = (status: DataJobStatus | "all"): boolean => { + if (status === "all") { + return CollectionsUtil.isNil( + this.clrGridUIState.filter.deploymentStatus, + ); + } + + return this.clrGridUIState.filter.deploymentStatus === status; + }; + + const filters: QuickFilters = [ + { + label: "All", + suppressCancel: true, + active: isActiveQuickFilter("all"), + onActivate: deactivateFilter, + }, + { + label: "Enabled", + active: isActiveQuickFilter(DataJobStatus.ENABLED), + onActivate: activateFilter(DataJobStatus.ENABLED), + onDeactivate: deactivateFilter, + icon: { + title: "Enabled - This job is deployed and executed by schedule", + class: "is-solid status-icon-enabled", + shape: "check-circle", + size: 20, + }, + }, + { + label: "Disabled", + active: isActiveQuickFilter(DataJobStatus.DISABLED), + onActivate: activateFilter(DataJobStatus.DISABLED), + onDeactivate: deactivateFilter, + icon: { + title: + "Disabled - This job is deployed but not executing by schedule", + class: "is-solid status-icon-disabled", + shape: "times-circle", + size: 15, + }, + }, + { + label: "Not Deployed", + active: isActiveQuickFilter(DataJobStatus.NOT_DEPLOYED), + onActivate: activateFilter(DataJobStatus.NOT_DEPLOYED), + onDeactivate: deactivateFilter, + icon: { + title: "Not Deployed - This job is created but still not deployed", + shape: "circle", + size: 15, + }, + }, + ]; - const filters: QuickFilters = [ - { - label: 'All', - suppressCancel: true, - active: isActiveQuickFilter('all'), - onActivate: deactivateFilter - }, - { - label: 'Enabled', - active: isActiveQuickFilter(DataJobStatus.ENABLED), - onActivate: activateFilter(DataJobStatus.ENABLED), - onDeactivate: deactivateFilter, - icon: { - title: 'Enabled - This job is deployed and executed by schedule', - class: 'is-solid status-icon-enabled', - shape: 'check-circle', - size: 20 - } - }, - { - label: 'Disabled', - active: isActiveQuickFilter(DataJobStatus.DISABLED), - onActivate: activateFilter(DataJobStatus.DISABLED), - onDeactivate: deactivateFilter, - icon: { - title: 'Disabled - This job is deployed but not executing by schedule', - class: 'is-solid status-icon-disabled', - shape: 'times-circle', - size: 15 - } - }, - { - label: 'Not Deployed', - active: isActiveQuickFilter(DataJobStatus.NOT_DEPLOYED), - onActivate: activateFilter(DataJobStatus.NOT_DEPLOYED), - onDeactivate: deactivateFilter, - icon: { - title: 'Not Deployed - This job is created but still not deployed', - shape: 'circle', - size: 15 - } - } - ]; - - this.quickFilters = filters; - } - - private _initializeClrGridUIState(): void { - this.clrGridUIState = { - totalItems: 0, - lastPage: 1, - pageSize: 25, - filter: { - ...(this.clrGridDefaultFilter ?? {}) - }, - sort: { - ...(this.clrGridDefaultSort ?? {}) - }, - search: '' - }; - } + this.quickFilters = filters; + } + + private _initializeClrGridUIState(): void { + this.clrGridUIState = { + totalItems: 0, + lastPage: 1, + pageSize: 25, + filter: { + ...(this.clrGridDefaultFilter ?? {}), + }, + sort: { + ...(this.clrGridDefaultSort ?? {}), + }, + search: "", + }; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.html index 6c09d4b00f..01c163096d 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.html @@ -6,230 +6,216 @@
-
-
-
+
+
+

+ + + + Data Job: {{ jobName }} +

+
+ +
+

+ -

- - - - Data Job: {{ jobName }} -

-

- -
-

- - - - Data Job: {{ jobName }} -

-
- + + + Data Job: {{ jobName }} +
+ +
-
- - +
+ + - - + + - - + + - - - -
+ + + +
- + - + - -
+ +
- + Executions + + + -
- -
+
+ +
diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.scss index 5a01a6aea8..0ee558e508 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.scss @@ -4,115 +4,115 @@ */ @mixin fill-parent-content() { - display: flex; - flex-direction: column; - flex: 1 1 auto; + display: flex; + flex-direction: column; + flex: 1 1 auto; } hr { - border: 0; - height: 1px; - background: #8f9ba3; + border: 0; + height: 1px; + background: #8f9ba3; } .label-link { - cursor: pointer; + cursor: pointer; } .label-link-suppress-decoration { - &:hover { - text-decoration: none; - } + &:hover { + text-decoration: none; + } } .status-icon-enabled { - color: hsl(93, 67%, 38%); + color: hsl(93, 67%, 38%); } .clr-col-6 { - border-right: 1px solid #999999; + border-right: 1px solid #999999; } .loading-spinner { - margin-left: 45%; - margin-top: 100px; + margin-left: 45%; + margin-top: 100px; } :host { - @include fill-parent-content(); - height: 100%; + @include fill-parent-content(); + height: 100%; } .data-pipelines-job__page { - @include fill-parent-content(); - - .data-pipelines-job__actions { - display: inline-flex; - margin-top: 0.8rem; + @include fill-parent-content(); - .data-pipelines-job__actions-right { - margin-left: auto; + .data-pipelines-job__actions { + display: inline-flex; + margin-top: 0.8rem; - clr-dropdown { - margin-top: var(--clr-btn-vertical-margin, 0.3rem); - margin-bottom: var(--clr-btn-vertical-margin, 0.3rem); - margin-left: 0; - } + .data-pipelines-job__actions-right { + margin-left: auto; - .data-pipelines-job__action-dropdown-trigger { - padding-right: 1.5rem; + clr-dropdown { + margin-top: var(--clr-btn-vertical-margin, 0.3rem); + margin-bottom: var(--clr-btn-vertical-margin, 0.3rem); + margin-left: 0; + } - clr-icon { - transform: translateY(-50%) rotate(180deg); - top: 0.85rem; - } - } - } + .data-pipelines-job__action-dropdown-trigger { + padding-right: 1.5rem; - &.data-pipelines-job__actions--margin-0 { - margin: 0; + clr-icon { + transform: translateY(-50%) rotate(180deg); + top: 0.85rem; } + } + } - .data-pipelines-job__navigate-back { - margin-right: 10px; - margin-top: -1px; + &.data-pipelines-job__actions--margin-0 { + margin: 0; + } - .redo-icon { - color: var(--clr-link-color, #0072a3); - height: 25px; - width: 25px; - } - } + .data-pipelines-job__navigate-back { + margin-right: 10px; + margin-top: -1px; - .data-pipelines-job__info { - display: inline-flex; + .redo-icon { + color: var(--clr-link-color, #0072a3); + height: 25px; + width: 25px; + } + } - span { - margin-right: 0.5rem; - } - } + .data-pipelines-job__info { + display: inline-flex; - .page-title { - span { - font-size: x-large; - } - } + span { + margin-right: 0.5rem; + } } - .data-pipelines-job__tabs-navigation { - margin-top: 7px; + .page-title { + span { + font-size: x-large; + } + } + } - .job-details__promotion-icon { - margin-top: -0.75rem; - margin-left: 0.25rem; - } + .data-pipelines-job__tabs-navigation { + margin-top: 7px; - .beta-icon { - vertical-align: baseline; - } + .job-details__promotion-icon { + margin-top: -0.75rem; + margin-left: 0.25rem; } - .data-pipelines-job__router-outlet-container { - @include fill-parent-content(); + .beta-icon { + vertical-align: baseline; } + } + + .data-pipelines-job__router-outlet-container { + @include fill-parent-content(); + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.spec.ts index 89f5a223c7..f1dfae27fe 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.spec.ts @@ -3,291 +3,323 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { RouterTestingModule } from '@angular/router/testing'; +import { NO_ERRORS_SCHEMA } from "@angular/core"; +import { ActivatedRoute } from "@angular/router"; +import { ComponentFixture, TestBed } from "@angular/core/testing"; +import { RouterTestingModule } from "@angular/router/testing"; -import { BehaviorSubject, of, Subject } from 'rxjs'; +import { BehaviorSubject, of, Subject } from "rxjs"; import { - ComponentModel, - ComponentService, - ComponentStateImpl, - createRouteSnapshot, - ErrorHandlerService, - NavigationService, - RouterService, - RouterState, - RouteState, - ToastService -} from '@versatiledatakit/shared'; + ComponentModel, + ComponentService, + ComponentStateImpl, + createRouteSnapshot, + ErrorHandlerService, + NavigationService, + RouterService, + RouterState, + RouteState, + ToastService, +} from "@versatiledatakit/shared"; import { - DATA_PIPELINES_CONFIGS, - DataJobDeploymentDetails, - DataJobDeploymentStatus, - DataJobDetails, - DataJobExecution, - DataJobExecutionStatus, - DataJobExecutionType -} from '../../model'; - -import { DataJobsApiService, DataJobsService } from '../../services'; - -import { DataJobPageComponent } from './data-job-page.component'; - -describe('DataJobsDetailsComponent', () => { - let componentServiceStub: jasmine.SpyObj; - let navigationServiceStub: jasmine.SpyObj; - let routerServiceStub: jasmine.SpyObj; - let toastServiceStub: jasmine.SpyObj; - let dataJobsApiServiceStub: jasmine.SpyObj; - let dataJobsServiceStub: jasmine.SpyObj; - let errorHandlerServiceStub: jasmine.SpyObj; - - let componentModelStub: ComponentModel; - let component: DataJobPageComponent; - let fixture: ComponentFixture; - - const TEST_JOB_EXECUTION = { - id: 'id002', - jobName: 'job002', - status: DataJobExecutionStatus.SUBMITTED, - startTime: new Date().toISOString(), - startedBy: 'aUserov', - endTime: new Date().toISOString(), - type: DataJobExecutionType.MANUAL, - opId: 'op002', - message: 'message001', - deployment: { - id: 'id002', - enabled: true, - jobVersion: '002', - mode: 'test_mode', - vdkVersion: '002', - resources: { - memoryLimit: 1000, - memoryRequest: 1000, - cpuLimit: 0.5, - cpuRequest: 0.5 - }, - executions: [], - deployedDate: '2020-11-11T10:10:10Z', - deployedBy: 'pmitev', - status: DataJobDeploymentStatus.SUCCESS - } - } as DataJobExecution; - - const TEST_JOB_DEPLOYMENT = { - id: 'id002', - enabled: true, - /* eslint-disable-next-line @typescript-eslint/naming-convention */ - job_version: '002', - mode: 'test_mode', - /* eslint-disable-next-line @typescript-eslint/naming-convention */ - vdk_version: '002', - python_version: '3.9-secure', - endTime: new Date(), - opId: 'op002', - message: 'message002', - /* eslint-disable @typescript-eslint/naming-convention */ - deployed_date: '2020-11-11T10:10:10Z', - deployed_by: 'pmitev', - resources: { - memory_limit: 1000, - memory_request: 1000, - cpu_limit: 0.5, - cpu_request: 0.5 - } - /* eslint-enable @typescript-eslint/naming-convention */ - } as DataJobDeploymentDetails; - - beforeEach(() => { - componentServiceStub = jasmine.createSpyObj('componentService', ['init', 'getModel', 'idle']); - navigationServiceStub = jasmine.createSpyObj('navigationService', ['navigate', 'navigateTo', 'navigateBack']); - routerServiceStub = jasmine.createSpyObj('routerService', ['getState']); - toastServiceStub = jasmine.createSpyObj('toastService', ['show']); - dataJobsApiServiceStub = jasmine.createSpyObj('dataJobsApiService', [ - 'getJobDetails', - 'getJobExecutions', - 'getJobDeployments', - 'removeJob', - 'downloadFile', - 'executeDataJob', - 'getJob' - ]); - dataJobsServiceStub = jasmine.createSpyObj('dataJobsService', [ - 'loadJobs', - 'notifyForRunningJobExecutionId', - 'notifyForJobExecutions', - 'notifyForTeamImplicitly', - 'getNotifiedForRunningJobExecutionId', - 'getNotifiedForJobExecutions', - 'getNotifiedForTeamImplicitly' - ]); - errorHandlerServiceStub = jasmine.createSpyObj('errorHandlerService', ['processError', 'handleError']); - - const activatedRouteStub = () => ({ - snapshot: createRouteSnapshot({ - data: { - activateSubpageNavigation: true - } - }) - }); - - dataJobsApiServiceStub.executeDataJob.and.returnValue(new Subject()); - dataJobsApiServiceStub.getJob.and.returnValue(new Subject()); - dataJobsApiServiceStub.getJobDetails.and.returnValue(new Subject()); - dataJobsApiServiceStub.getJobExecutions.and.returnValue(of({ content: [TEST_JOB_EXECUTION], totalItems: 1, totalPages: 1 })); - dataJobsApiServiceStub.getJobDeployments.and.returnValue(of([TEST_JOB_DEPLOYMENT])); - dataJobsApiServiceStub.removeJob.and.returnValue(new Subject()); - dataJobsApiServiceStub.downloadFile.and.returnValue(new Subject()); - - dataJobsServiceStub.getNotifiedForRunningJobExecutionId.and.returnValue(new Subject()); - dataJobsServiceStub.getNotifiedForJobExecutions.and.returnValue(new Subject()); - dataJobsServiceStub.getNotifiedForTeamImplicitly.and.returnValue(new BehaviorSubject('taurus')); - - TestBed.configureTestingModule({ - imports: [RouterTestingModule.withRoutes([])], - schemas: [NO_ERRORS_SCHEMA], - declarations: [DataJobPageComponent], - providers: [ - { provide: ComponentService, useValue: componentServiceStub }, - { provide: NavigationService, useValue: navigationServiceStub }, - { provide: RouterService, useValue: routerServiceStub }, - { provide: ActivatedRoute, useFactory: activatedRouteStub }, - { provide: ToastService, useValue: toastServiceStub }, - { - provide: DataJobsApiService, - useValue: dataJobsApiServiceStub - }, - { provide: DataJobsService, useValue: dataJobsServiceStub }, - { - provide: ErrorHandlerService, - useValue: errorHandlerServiceStub - }, - { - provide: DATA_PIPELINES_CONFIGS, - useFactory: () => ({ - defaultOwnerTeamName: 'all', - manageConfig: { - allowKeyTabDownloads: true, - allowExecuteNow: true - } - }) - } - ] - }); - - componentModelStub = ComponentModel.of(ComponentStateImpl.of({}), RouterState.of(RouteState.empty(), 1)); - componentServiceStub.init.and.returnValue(of(componentModelStub)); - componentServiceStub.getModel.and.returnValue(of(componentModelStub)); - routerServiceStub.getState.and.returnValue(of(RouteState.empty())); - - fixture = TestBed.createComponent(DataJobPageComponent); - component = fixture.componentInstance; - component.model = componentModelStub; + DATA_PIPELINES_CONFIGS, + DataJobDeploymentDetails, + DataJobDeploymentStatus, + DataJobDetails, + DataJobExecution, + DataJobExecutionStatus, + DataJobExecutionType, +} from "../../model"; + +import { DataJobsApiService, DataJobsService } from "../../services"; + +import { DataJobPageComponent } from "./data-job-page.component"; + +describe("DataJobsDetailsComponent", () => { + let componentServiceStub: jasmine.SpyObj; + let navigationServiceStub: jasmine.SpyObj; + let routerServiceStub: jasmine.SpyObj; + let toastServiceStub: jasmine.SpyObj; + let dataJobsApiServiceStub: jasmine.SpyObj; + let dataJobsServiceStub: jasmine.SpyObj; + let errorHandlerServiceStub: jasmine.SpyObj; + + let componentModelStub: ComponentModel; + let component: DataJobPageComponent; + let fixture: ComponentFixture; + + const TEST_JOB_EXECUTION = { + id: "id002", + jobName: "job002", + status: DataJobExecutionStatus.SUBMITTED, + startTime: new Date().toISOString(), + startedBy: "aUserov", + endTime: new Date().toISOString(), + type: DataJobExecutionType.MANUAL, + opId: "op002", + message: "message001", + deployment: { + id: "id002", + enabled: true, + jobVersion: "002", + mode: "test_mode", + vdkVersion: "002", + resources: { + memoryLimit: 1000, + memoryRequest: 1000, + cpuLimit: 0.5, + cpuRequest: 0.5, + }, + executions: [], + deployedDate: "2020-11-11T10:10:10Z", + deployedBy: "pmitev", + status: DataJobDeploymentStatus.SUCCESS, + }, + } as DataJobExecution; + + const TEST_JOB_DEPLOYMENT = { + id: "id002", + enabled: true, + /* eslint-disable-next-line @typescript-eslint/naming-convention */ + job_version: "002", + mode: "test_mode", + /* eslint-disable-next-line @typescript-eslint/naming-convention */ + vdk_version: "002", + python_version: "3.9-secure", + endTime: new Date(), + opId: "op002", + message: "message002", + /* eslint-disable @typescript-eslint/naming-convention */ + deployed_date: "2020-11-11T10:10:10Z", + deployed_by: "pmitev", + resources: { + memory_limit: 1000, + memory_request: 1000, + cpu_limit: 0.5, + cpu_request: 0.5, + }, + /* eslint-enable @typescript-eslint/naming-convention */ + } as DataJobDeploymentDetails; + + beforeEach(() => { + componentServiceStub = jasmine.createSpyObj( + "componentService", + ["init", "getModel", "idle"], + ); + navigationServiceStub = jasmine.createSpyObj( + "navigationService", + ["navigate", "navigateTo", "navigateBack"], + ); + routerServiceStub = jasmine.createSpyObj("routerService", [ + "getState", + ]); + toastServiceStub = jasmine.createSpyObj("toastService", [ + "show", + ]); + dataJobsApiServiceStub = jasmine.createSpyObj( + "dataJobsApiService", + [ + "getJobDetails", + "getJobExecutions", + "getJobDeployments", + "removeJob", + "downloadFile", + "executeDataJob", + "getJob", + ], + ); + dataJobsServiceStub = jasmine.createSpyObj( + "dataJobsService", + [ + "loadJobs", + "notifyForRunningJobExecutionId", + "notifyForJobExecutions", + "notifyForTeamImplicitly", + "getNotifiedForRunningJobExecutionId", + "getNotifiedForJobExecutions", + "getNotifiedForTeamImplicitly", + ], + ); + errorHandlerServiceStub = jasmine.createSpyObj( + "errorHandlerService", + ["processError", "handleError"], + ); + + const activatedRouteStub = () => ({ + snapshot: createRouteSnapshot({ + data: { + activateSubpageNavigation: true, + }, + }), }); - it('can load instance', () => { - expect(component).toBeTruthy(); + dataJobsApiServiceStub.executeDataJob.and.returnValue(new Subject()); + dataJobsApiServiceStub.getJob.and.returnValue(new Subject()); + dataJobsApiServiceStub.getJobDetails.and.returnValue(new Subject()); + dataJobsApiServiceStub.getJobExecutions.and.returnValue( + of({ content: [TEST_JOB_EXECUTION], totalItems: 1, totalPages: 1 }), + ); + dataJobsApiServiceStub.getJobDeployments.and.returnValue( + of([TEST_JOB_DEPLOYMENT]), + ); + dataJobsApiServiceStub.removeJob.and.returnValue(new Subject()); + dataJobsApiServiceStub.downloadFile.and.returnValue(new Subject()); + + dataJobsServiceStub.getNotifiedForRunningJobExecutionId.and.returnValue( + new Subject(), + ); + dataJobsServiceStub.getNotifiedForJobExecutions.and.returnValue( + new Subject(), + ); + dataJobsServiceStub.getNotifiedForTeamImplicitly.and.returnValue( + new BehaviorSubject("taurus"), + ); + + TestBed.configureTestingModule({ + imports: [RouterTestingModule.withRoutes([])], + schemas: [NO_ERRORS_SCHEMA], + declarations: [DataJobPageComponent], + providers: [ + { provide: ComponentService, useValue: componentServiceStub }, + { provide: NavigationService, useValue: navigationServiceStub }, + { provide: RouterService, useValue: routerServiceStub }, + { provide: ActivatedRoute, useFactory: activatedRouteStub }, + { provide: ToastService, useValue: toastServiceStub }, + { + provide: DataJobsApiService, + useValue: dataJobsApiServiceStub, + }, + { provide: DataJobsService, useValue: dataJobsServiceStub }, + { + provide: ErrorHandlerService, + useValue: errorHandlerServiceStub, + }, + { + provide: DATA_PIPELINES_CONFIGS, + useFactory: () => ({ + defaultOwnerTeamName: "all", + manageConfig: { + allowKeyTabDownloads: true, + allowExecuteNow: true, + }, + }), + }, + ], }); - describe('ngOnInit', () => { - it('makes expected calls', () => { - // When - component.ngOnInit(); - - // Then - expect(componentServiceStub.init).toHaveBeenCalled(); - expect(componentServiceStub.getModel).toHaveBeenCalled(); - expect(routerServiceStub.getState).toHaveBeenCalled(); - }); + componentModelStub = ComponentModel.of( + ComponentStateImpl.of({}), + RouterState.of(RouteState.empty(), 1), + ); + componentServiceStub.init.and.returnValue(of(componentModelStub)); + componentServiceStub.getModel.and.returnValue(of(componentModelStub)); + routerServiceStub.getState.and.returnValue(of(RouteState.empty())); + + fixture = TestBed.createComponent(DataJobPageComponent); + component = fixture.componentInstance; + component.model = componentModelStub; + }); + + it("can load instance", () => { + expect(component).toBeTruthy(); + }); + + describe("ngOnInit", () => { + it("makes expected calls", () => { + // When + component.ngOnInit(); + + // Then + expect(componentServiceStub.init).toHaveBeenCalled(); + expect(componentServiceStub.getModel).toHaveBeenCalled(); + expect(routerServiceStub.getState).toHaveBeenCalled(); }); + }); - describe('allowJobExecuteNow', () => { - it('returns true in case of dataPipelinesModuleConfig.manageConfig.allowExecuteNow', () => { - expect(component.isExecuteJobAllowed).toBeFalse(); - }); + describe("allowJobExecuteNow", () => { + it("returns true in case of dataPipelinesModuleConfig.manageConfig.allowExecuteNow", () => { + expect(component.isExecuteJobAllowed).toBeFalse(); }); - - describe('confirmExecuteJob', () => { - it('makes expected calls', () => { - // When - // @ts-ignore - spyOn(component, '_submitOperationStarted').and.callThrough(); - // @ts-ignore - spyOn(component, '_extractJobDeployment').and.returnValue({ - id: '10' - } as DataJobDetails); - - // When - component.confirmExecuteJob(); - - // Then - expect(dataJobsApiServiceStub.executeDataJob).toHaveBeenCalled(); - // @ts-ignore - expect(component._submitOperationStarted).toHaveBeenCalled(); - }); + }); + + describe("confirmExecuteJob", () => { + it("makes expected calls", () => { + // When + // @ts-ignore + spyOn(component, "_submitOperationStarted").and.callThrough(); + // @ts-ignore + spyOn(component, "_extractJobDeployment").and.returnValue({ + id: "10", + } as DataJobDetails); + + // When + component.confirmExecuteJob(); + + // Then + expect(dataJobsApiServiceStub.executeDataJob).toHaveBeenCalled(); + // @ts-ignore + expect(component._submitOperationStarted).toHaveBeenCalled(); }); - - describe('executeJob', () => { - it('sets executeNowOptions', () => { - // When - component.executeJob(); - - // Then - expect(component.executeNowOptions.message).toBeDefined(); - expect(component.executeNowOptions.infoText).toBeDefined(); - expect(component.executeNowOptions.opened).toBeTrue(); - expect(component.executeNowOptions.title).toBeDefined(); - }); + }); + + describe("executeJob", () => { + it("sets executeNowOptions", () => { + // When + component.executeJob(); + + // Then + expect(component.executeNowOptions.message).toBeDefined(); + expect(component.executeNowOptions.infoText).toBeDefined(); + expect(component.executeNowOptions.opened).toBeTrue(); + expect(component.executeNowOptions.title).toBeDefined(); }); + }); - describe('downloadKey', () => { - it('makes expected calls', () => { - // Given - // @ts-ignore - spyOn(component, '_submitOperationStarted').and.callThrough(); + describe("downloadKey", () => { + it("makes expected calls", () => { + // Given + // @ts-ignore + spyOn(component, "_submitOperationStarted").and.callThrough(); - // When - component.downloadJobKey(); + // When + component.downloadJobKey(); - // Then - // @ts-ignore - expect(component._submitOperationStarted).toHaveBeenCalled(); - expect(dataJobsApiServiceStub.downloadFile).toHaveBeenCalled(); - }); + // Then + // @ts-ignore + expect(component._submitOperationStarted).toHaveBeenCalled(); + expect(dataJobsApiServiceStub.downloadFile).toHaveBeenCalled(); }); + }); - describe('confirmRemoveJob', () => { - it('makes expected calls', () => { - // Given - // @ts-ignore - spyOn(component, '_submitOperationStarted').and.callThrough(); + describe("confirmRemoveJob", () => { + it("makes expected calls", () => { + // Given + // @ts-ignore + spyOn(component, "_submitOperationStarted").and.callThrough(); - // When - component.confirmRemoveJob(); + // When + component.confirmRemoveJob(); - // Then - // @ts-ignore - expect(component._submitOperationStarted).toHaveBeenCalled(); - expect(dataJobsApiServiceStub.removeJob).toHaveBeenCalled(); - }); + // Then + // @ts-ignore + expect(component._submitOperationStarted).toHaveBeenCalled(); + expect(dataJobsApiServiceStub.removeJob).toHaveBeenCalled(); }); - - describe('removeJob', () => { - it('sets deleteOptions', () => { - // When - component.removeJob(); - - // Then - expect(component.deleteOptions.message).toBeDefined(); - expect(component.deleteOptions.infoText).toBeDefined(); - expect(component.deleteOptions.showOkBtn).toBeTrue(); - expect(component.deleteOptions.cancelBtn).toBeDefined(); - expect(component.deleteOptions.opened).toBeTrue(); - }); + }); + + describe("removeJob", () => { + it("sets deleteOptions", () => { + // When + component.removeJob(); + + // Then + expect(component.deleteOptions.message).toBeDefined(); + expect(component.deleteOptions.infoText).toBeDefined(); + expect(component.deleteOptions.showOkBtn).toBeTrue(); + expect(component.deleteOptions.cancelBtn).toBeDefined(); + expect(component.deleteOptions.opened).toBeTrue(); }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.ts index 35f4e13d9b..417e85dd7a 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/data-job-page.component.ts @@ -5,641 +5,748 @@ /* eslint-disable @typescript-eslint/member-ordering */ -import { Component, Inject, OnInit } from '@angular/core'; -import { ActivatedRoute, Params } from '@angular/router'; -import { HttpErrorResponse } from '@angular/common/http'; +import { Component, Inject, OnInit } from "@angular/core"; +import { ActivatedRoute, Params } from "@angular/router"; +import { HttpErrorResponse } from "@angular/common/http"; -import { concatMap, interval, of, Subject, timer } from 'rxjs'; -import { catchError, filter, finalize, map, switchMap, take, takeUntil, takeWhile, tap } from 'rxjs/operators'; +import { concatMap, interval, of, Subject, timer } from "rxjs"; +import { + catchError, + filter, + finalize, + map, + switchMap, + take, + takeUntil, + takeWhile, + tap, +} from "rxjs/operators"; -import { ClrLoadingState } from '@clr/angular'; +import { ClrLoadingState } from "@clr/angular"; -import * as fileSaver from 'file-saver'; +import * as fileSaver from "file-saver"; import { - ASC, - CollectionsUtil, - ComponentModel, - ComponentService, - ErrorHandlerService, - ErrorRecord, - NavigationService, - OnTaurusModelError, - OnTaurusModelInit, - RouterService, - RouteState, - TaurusBaseComponent, - ToastService, - VmwToastType -} from '@versatiledatakit/shared'; - -import { DataJobUtil, ErrorUtil } from '../../shared/utils'; -import { ExtractJobStatusPipe } from '../../shared/pipes'; -import { ConfirmationModalOptions, DeleteModalOptions, ModalOptions } from '../../shared/model'; + ASC, + CollectionsUtil, + ComponentModel, + ComponentService, + ErrorHandlerService, + ErrorRecord, + NavigationService, + OnTaurusModelError, + OnTaurusModelInit, + RouterService, + RouteState, + TaurusBaseComponent, + ToastService, + VmwToastType, +} from "@versatiledatakit/shared"; + +import { DataJobUtil, ErrorUtil } from "../../shared/utils"; +import { ExtractJobStatusPipe } from "../../shared/pipes"; +import { + ConfirmationModalOptions, + DeleteModalOptions, + ModalOptions, +} from "../../shared/model"; import { - DATA_PIPELINES_CONFIGS, - DataJobDeployment, - DataJobExecution, - DataJobExecutionDetails, - DataJobExecutions, - DataJobExecutionsPage, - DataJobStatus, - DataPipelinesConfig, - ToastDefinitions -} from '../../model'; - -import { DataJobsApiService, DataJobsService } from '../../services'; + DATA_PIPELINES_CONFIGS, + DataJobDeployment, + DataJobExecution, + DataJobExecutionDetails, + DataJobExecutions, + DataJobExecutionsPage, + DataJobStatus, + DataPipelinesConfig, + ToastDefinitions, +} from "../../model"; + +import { DataJobsApiService, DataJobsService } from "../../services"; enum TypeButtonState { - /* eslint-disable-next-line @typescript-eslint/naming-convention */ - DOWNLOAD, - /* eslint-disable-next-line @typescript-eslint/naming-convention */ - EXECUTE, - /* eslint-disable-next-line @typescript-eslint/naming-convention */ - DELETE, - /* eslint-disabe-next-line @typescript-eslint/naming-convention */ - STOP + /* eslint-disable-next-line @typescript-eslint/naming-convention */ + DOWNLOAD, + /* eslint-disable-next-line @typescript-eslint/naming-convention */ + EXECUTE, + /* eslint-disable-next-line @typescript-eslint/naming-convention */ + DELETE, + /* eslint-disabe-next-line @typescript-eslint/naming-convention */ + STOP, } @Component({ - selector: 'lib-data-job-page', - templateUrl: './data-job-page.component.html', - styleUrls: ['./data-job-page.component.scss'] + selector: "lib-data-job-page", + templateUrl: "./data-job-page.component.html", + styleUrls: ["./data-job-page.component.scss"], }) -export class DataJobPageComponent extends TaurusBaseComponent implements OnInit, OnTaurusModelInit, OnTaurusModelError { - readonly uuid = 'DataJobPageComponent'; - - teamName = ''; - jobName = ''; - isDataJobRunning = false; - cancelDataJobDisabled = false; - - queryParams: Params = {}; - - isSubpageNavigation = false; - - isJobAvailable = false; - isJobEditable = false; - - isExecuteJobAllowed = false; - isDownloadJobKeyAllowed = false; - - areJobExecutionsLoaded = false; - - loadingInProgress = false; - - jobExecutions: DataJobExecutions = []; - jobDeployments: DataJobDeployment[] = []; - - deleteButtonsState = ClrLoadingState.DEFAULT; - executeButtonsState = ClrLoadingState.DEFAULT; - downloadButtonsState = ClrLoadingState.DEFAULT; - stopButtonsState = ClrLoadingState.DEFAULT; - - deleteOptions: ModalOptions; - executeNowOptions: ModalOptions; - cancelNowOptions: ModalOptions; - - private _nonExistingJobMsgShowed = false; - - constructor( - componentService: ComponentService, - navigationService: NavigationService, - activatedRoute: ActivatedRoute, - private readonly routerService: RouterService, - private readonly dataJobsService: DataJobsService, - private readonly dataJobsApiService: DataJobsApiService, - private readonly toastService: ToastService, - private readonly errorHandlerService: ErrorHandlerService, - @Inject(DATA_PIPELINES_CONFIGS) - public readonly dataPipelinesModuleConfig: DataPipelinesConfig - ) { - super(componentService, navigationService, activatedRoute); - - this.isSubpageNavigation = !!activatedRoute.snapshot.data['activateSubpageNavigation']; +export class DataJobPageComponent + extends TaurusBaseComponent + implements OnInit, OnTaurusModelInit, OnTaurusModelError +{ + readonly uuid = "DataJobPageComponent"; + + teamName = ""; + jobName = ""; + isDataJobRunning = false; + cancelDataJobDisabled = false; + + queryParams: Params = {}; + + isSubpageNavigation = false; + + isJobAvailable = false; + isJobEditable = false; + + isExecuteJobAllowed = false; + isDownloadJobKeyAllowed = false; + + areJobExecutionsLoaded = false; + + loadingInProgress = false; + + jobExecutions: DataJobExecutions = []; + jobDeployments: DataJobDeployment[] = []; + + deleteButtonsState = ClrLoadingState.DEFAULT; + executeButtonsState = ClrLoadingState.DEFAULT; + downloadButtonsState = ClrLoadingState.DEFAULT; + stopButtonsState = ClrLoadingState.DEFAULT; + + deleteOptions: ModalOptions; + executeNowOptions: ModalOptions; + cancelNowOptions: ModalOptions; + + private _nonExistingJobMsgShowed = false; + + constructor( + componentService: ComponentService, + navigationService: NavigationService, + activatedRoute: ActivatedRoute, + private readonly routerService: RouterService, + private readonly dataJobsService: DataJobsService, + private readonly dataJobsApiService: DataJobsApiService, + private readonly toastService: ToastService, + private readonly errorHandlerService: ErrorHandlerService, + @Inject(DATA_PIPELINES_CONFIGS) + public readonly dataPipelinesModuleConfig: DataPipelinesConfig, + ) { + super(componentService, navigationService, activatedRoute); + + this.isSubpageNavigation = + !!activatedRoute.snapshot.data["activateSubpageNavigation"]; + + this.deleteOptions = new DeleteModalOptions(); + this.executeNowOptions = new ConfirmationModalOptions(); + this.cancelNowOptions = new ConfirmationModalOptions(); + } + + /** + * ** Navigate back leveraging provided router config. + */ + doNavigateBack($event?: MouseEvent): void { + $event?.preventDefault(); + + // eslint-disable-next-line @typescript-eslint/no-floating-promises + this.navigateBack({ "$.team": this.teamName }).then(); + } + + /** + * ** Returns if execution is in progress. + */ + isExecutionInProgress(): boolean { + return DataJobUtil.isJobRunning(this.jobExecutions); + } + + /** + * ** Show confirmation dialog for Job execution. + */ + executeJob() { + this.executeNowOptions.title = `Execute ${this.jobName} now?`; + this.executeNowOptions.message = `Job ${this.jobName} will be queued for execution.`; + this.executeNowOptions.infoText = `Confirming will result in immediate data job execution.`; + this.executeNowOptions.opened = true; + } + + /** + * ** On User confirm continue with Job execution. + */ + confirmExecuteJob() { + this._submitOperationStarted(TypeButtonState.EXECUTE); + + this.subscriptions.push( + this.dataJobsApiService + .executeDataJob( + this.teamName, + this.jobName, + this._extractJobDeployment()?.id, + ) + .pipe( + finalize(() => { + this._submitOperationEnded(); + }), + ) + .subscribe({ + next: () => { + this.toastService.show( + ToastDefinitions.successfullyRanJob(this.jobName), + ); - this.deleteOptions = new DeleteModalOptions(); - this.executeNowOptions = new ConfirmationModalOptions(); - this.cancelNowOptions = new ConfirmationModalOptions(); - } + let previousReqFinished = true; - /** - * ** Navigate back leveraging provided router config. - */ - doNavigateBack($event?: MouseEvent): void { - $event?.preventDefault(); + this.areJobExecutionsLoaded = false; - // eslint-disable-next-line @typescript-eslint/no-floating-promises - this.navigateBack({ '$.team': this.teamName }).then(); - } - - /** - * ** Returns if execution is in progress. - */ - isExecutionInProgress(): boolean { - return DataJobUtil.isJobRunning(this.jobExecutions); - } + this.subscriptions.push( + interval(1250) // Send polling request on every 1.25s until execution is accepted from backend + .pipe( + // eslint-disable-next-line rxjs/no-unsafe-takeuntil + takeUntil(timer(30000)), // Timer limit when polling to stop = 30s + filter(() => previousReqFinished), + tap(() => (previousReqFinished = false)), + switchMap(() => + this.dataJobsApiService + .getJobExecutions( + this.teamName, + this.jobName, + true, + null, + { + property: "startTime", + direction: ASC, + }, + ) + .pipe( + catchError((error: unknown) => { + this.errorHandlerService.processError( + ErrorUtil.extractError(error as Error), + ); + + return of([]); + }), + finalize(() => { + previousReqFinished = true; + }), + ), + ), + map((executions: DataJobExecutionsPage) => + executions.content ? [...executions.content] : [], + ), + takeWhile((executions) => { + if ( + CollectionsUtil.isArrayEmpty(executions) || + executions.length <= this.jobExecutions.length + ) { + return true; + } - /** - * ** Show confirmation dialog for Job execution. - */ - executeJob() { - this.executeNowOptions.title = `Execute ${this.jobName} now?`; - this.executeNowOptions.message = `Job ${this.jobName} will be queued for execution.`; - this.executeNowOptions.infoText = `Confirming will result in immediate data job execution.`; - this.executeNowOptions.opened = true; - } + this.jobExecutions = executions; - /** - * ** On User confirm continue with Job execution. - */ - confirmExecuteJob() { - this._submitOperationStarted(TypeButtonState.EXECUTE); + this.areJobExecutionsLoaded = true; - this.subscriptions.push( - this.dataJobsApiService - .executeDataJob(this.teamName, this.jobName, this._extractJobDeployment()?.id) - .pipe( - finalize(() => { - this._submitOperationEnded(); - }) - ) - .subscribe({ - next: () => { - this.toastService.show(ToastDefinitions.successfullyRanJob(this.jobName)); - - let previousReqFinished = true; - - this.areJobExecutionsLoaded = false; - - this.subscriptions.push( - interval(1250) // Send polling request on every 1.25s until execution is accepted from backend - .pipe( - // eslint-disable-next-line rxjs/no-unsafe-takeuntil - takeUntil(timer(30000)), // Timer limit when polling to stop = 30s - filter(() => previousReqFinished), - tap(() => (previousReqFinished = false)), - switchMap(() => - this.dataJobsApiService - .getJobExecutions(this.teamName, this.jobName, true, null, { - property: 'startTime', - direction: ASC - }) - .pipe( - catchError((error: unknown) => { - this.errorHandlerService.processError(ErrorUtil.extractError(error as Error)); - - return of([]); - }), - finalize(() => { - previousReqFinished = true; - }) - ) - ), - map((executions: DataJobExecutionsPage) => (executions.content ? [...executions.content] : [])), - takeWhile((executions) => { - if (CollectionsUtil.isArrayEmpty(executions) || executions.length <= this.jobExecutions.length) { - return true; - } - - this.jobExecutions = executions; - - this.areJobExecutionsLoaded = true; - - const lastExecution = executions[executions.length - 1]; - if (!DataJobUtil.isJobRunningPredicate(lastExecution)) { - return true; - } - - this.dataJobsService.notifyForJobExecutions(executions); - this.dataJobsService.notifyForRunningJobExecutionId(lastExecution.id); - - return false; // Stop polling if above condition is met. - }) - ) - .subscribe() // eslint-disable-line rxjs/no-nested-subscribe - ); - }, - error: (error: unknown) => { - this.errorHandlerService.processError(ErrorUtil.extractError(error as Error), { - title: - (error as HttpErrorResponse)?.status === 409 - ? 'Failed, Data job is already executing' - : 'Failed to queue Data job for execution' - }); + const lastExecution = executions[executions.length - 1]; + if (!DataJobUtil.isJobRunningPredicate(lastExecution)) { + return true; } - }) - ); - } - /** - * ** Download Job key. - */ - downloadJobKey() { - this._submitOperationStarted(TypeButtonState.DOWNLOAD); - - this.dataJobsApiService - .downloadFile(this.teamName, this.jobName) - .pipe( - finalize(() => { - this._submitOperationEnded(); - }) - ) - .subscribe({ - next: (response: Blob) => { - const blob: Blob = new Blob([response], { - type: 'application/octet-stream' - }); - // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access - fileSaver.saveAs(blob, `${this.jobName}.keytab`); - - this.toastService.show({ - type: VmwToastType.INFO, - title: `Download completed`, - description: `Data job keytab "${this.jobName}.keytab" successfully downloaded` - }); - }, - error: (error: unknown) => { - const errorDescription = - (error as HttpErrorResponse)?.status === 404 - ? `Download failed. Keytab file doesn't exist for this job.` - : `Download failed. Keytab file failed to download.`; - - this.errorHandlerService.processError(ErrorUtil.extractError(error as Error), { - description: errorDescription - }); - } - }); - } + this.dataJobsService.notifyForJobExecutions(executions); + this.dataJobsService.notifyForRunningJobExecutionId( + lastExecution.id, + ); - /** - * ** Show confirmation dialog for Job Remove (Delete). - */ - removeJob() { - this.deleteOptions.message = `Job ${this.jobName} will be deleted. + return false; // Stop polling if above condition is met. + }), + ) + .subscribe(), // eslint-disable-line rxjs/no-nested-subscribe + ); + }, + error: (error: unknown) => { + this.errorHandlerService.processError( + ErrorUtil.extractError(error as Error), + { + title: + (error as HttpErrorResponse)?.status === 409 + ? "Failed, Data job is already executing" + : "Failed to queue Data job for execution", + }, + ); + }, + }), + ); + } + + /** + * ** Download Job key. + */ + downloadJobKey() { + this._submitOperationStarted(TypeButtonState.DOWNLOAD); + + this.dataJobsApiService + .downloadFile(this.teamName, this.jobName) + .pipe( + finalize(() => { + this._submitOperationEnded(); + }), + ) + .subscribe({ + next: (response: Blob) => { + const blob: Blob = new Blob([response], { + type: "application/octet-stream", + }); + // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access + fileSaver.saveAs(blob, `${this.jobName}.keytab`); + + this.toastService.show({ + type: VmwToastType.INFO, + title: `Download completed`, + description: `Data job keytab "${this.jobName}.keytab" successfully downloaded`, + }); + }, + error: (error: unknown) => { + const errorDescription = + (error as HttpErrorResponse)?.status === 404 + ? `Download failed. Keytab file doesn't exist for this job.` + : `Download failed. Keytab file failed to download.`; + + this.errorHandlerService.processError( + ErrorUtil.extractError(error as Error), + { + description: errorDescription, + }, + ); + }, + }); + } + + /** + * ** Show confirmation dialog for Job Remove (Delete). + */ + removeJob() { + this.deleteOptions.message = `Job ${this.jobName} will be deleted. Currently executing Data Jobs will be left to finish but the credentials will be revoked.`; - this.deleteOptions.infoText = `Deleting this job means that it will be permanently removed from the system + this.deleteOptions.infoText = `Deleting this job means that it will be permanently removed from the system including all its state (properties), source code and any deployments.`; - this.deleteOptions.showOkBtn = true; - this.deleteOptions.cancelBtn = 'Cancel'; - this.deleteOptions.opened = true; - } - - /** - * ** On User confirm continue with Job Remove (Delete). - */ - confirmRemoveJob() { - this._submitOperationStarted(TypeButtonState.DELETE); - - this.dataJobsApiService - .removeJob(this.teamName, this.jobName) - .pipe( - finalize(() => { - this._submitOperationEnded(); - }) - ) - .subscribe({ - next: () => { - this.toastService.show({ - type: VmwToastType.INFO, - title: `Data job delete completed`, - description: `Data job "${this.jobName}" successfully deleted` - }); - - this.doNavigateBack(); - }, - error: (error: unknown) => { - this.errorHandlerService.processError(ErrorUtil.extractError(error as Error), { - title: `Data job delete failed` - }); - } - }); - } - - confirmCancelDataJob() { - this._submitOperationStarted(TypeButtonState.STOP); - this.dataJobsApiService - .cancelDataJobExecution(this.teamName, this.jobName, this.lastExecution()?.id) - .pipe( - finalize(() => { - this._submitOperationEnded(); - }) - ) - .subscribe({ - next: () => { - this.cancelDataJobDisabled = true; - this.toastService.show({ - type: VmwToastType.INFO, - title: `Data job execution cancellation completed`, - description: `Data job "${this.jobName}" successfully canceled` - }); - }, - error: (error: unknown) => { - this.errorHandlerService.processError(ErrorUtil.extractError(error as Error), { - title: `Data job cancellation failed` - }); - } - }); - } - - /** - * ** Show confirmation dialog for Job execution cancellation. - */ - cancelExecution() { - this.cancelNowOptions.title = `Cancel ${this.lastExecution()?.id} now?`; - this.cancelNowOptions.message = `Execution ${this.lastExecution()?.id} will be canceled.`; - this.cancelNowOptions.infoText = `Confirming will result in immediate data job execution cancellation.`; - this.cancelNowOptions.opened = true; - } - - lastExecution(): DataJobExecution { - return this.jobExecutions[this.jobExecutions.length - 1]; - } - - isJobWithRunningStatus(): boolean { - return this.lastExecution().status === 'RUNNING'; - } - - /** - * @inheritDoc - */ - onModelInit(): void { - this.routerService - .getState() - .pipe(take(1)) - .subscribe((state) => this._initialize(state)); - } - - /** - * @inheritDoc - */ - onModelError(model: ComponentModel, _task: string, newErrorRecords: ErrorRecord[]) { - newErrorRecords.forEach((errorRecord) => { - const error = ErrorUtil.extractError(errorRecord.error); - - this.errorHandlerService.processError(error); - }); - } - - private _initialize(state: RouteState): void { - const teamParamKey = state.getData('teamParamKey'); - this.teamName = state.getParam(teamParamKey); - - if (CollectionsUtil.isNil(teamParamKey) || CollectionsUtil.isNil(this.teamName)) { - this._subscribeForImplicitTeam(); - } - - const jobParamKey = state.getData('jobParamKey'); - this.jobName = state.getParam(jobParamKey); - - this.isJobEditable = !!state.getData('editable'); - - this.queryParams = state.queryParams; - - this.isDownloadJobKeyAllowed = this.dataPipelinesModuleConfig.manageConfig?.allowKeyTabDownloads && this.isJobEditable; - - this._subscribeForTeamChange(state); - this._subscribeForExecutionsChange(); - this._subscribeForExecutionIdChange(); - this._loadJobDetails(); - this._loadJobExecutions(); + this.deleteOptions.showOkBtn = true; + this.deleteOptions.cancelBtn = "Cancel"; + this.deleteOptions.opened = true; + } + + /** + * ** On User confirm continue with Job Remove (Delete). + */ + confirmRemoveJob() { + this._submitOperationStarted(TypeButtonState.DELETE); + + this.dataJobsApiService + .removeJob(this.teamName, this.jobName) + .pipe( + finalize(() => { + this._submitOperationEnded(); + }), + ) + .subscribe({ + next: () => { + this.toastService.show({ + type: VmwToastType.INFO, + title: `Data job delete completed`, + description: `Data job "${this.jobName}" successfully deleted`, + }); + + this.doNavigateBack(); + }, + error: (error: unknown) => { + this.errorHandlerService.processError( + ErrorUtil.extractError(error as Error), + { + title: `Data job delete failed`, + }, + ); + }, + }); + } + + confirmCancelDataJob() { + this._submitOperationStarted(TypeButtonState.STOP); + this.dataJobsApiService + .cancelDataJobExecution( + this.teamName, + this.jobName, + this.lastExecution()?.id, + ) + .pipe( + finalize(() => { + this._submitOperationEnded(); + }), + ) + .subscribe({ + next: () => { + this.cancelDataJobDisabled = true; + this.toastService.show({ + type: VmwToastType.INFO, + title: `Data job execution cancellation completed`, + description: `Data job "${this.jobName}" successfully canceled`, + }); + }, + error: (error: unknown) => { + this.errorHandlerService.processError( + ErrorUtil.extractError(error as Error), + { + title: `Data job cancellation failed`, + }, + ); + }, + }); + } + + /** + * ** Show confirmation dialog for Job execution cancellation. + */ + cancelExecution() { + this.cancelNowOptions.title = `Cancel ${this.lastExecution()?.id} now?`; + this.cancelNowOptions.message = `Execution ${this.lastExecution()?.id} will be canceled.`; + this.cancelNowOptions.infoText = `Confirming will result in immediate data job execution cancellation.`; + this.cancelNowOptions.opened = true; + } + + lastExecution(): DataJobExecution { + return this.jobExecutions[this.jobExecutions.length - 1]; + } + + isJobWithRunningStatus(): boolean { + return this.lastExecution().status === "RUNNING"; + } + + /** + * @inheritDoc + */ + onModelInit(): void { + this.routerService + .getState() + .pipe(take(1)) + .subscribe((state) => this._initialize(state)); + } + + /** + * @inheritDoc + */ + onModelError( + model: ComponentModel, + _task: string, + newErrorRecords: ErrorRecord[], + ) { + newErrorRecords.forEach((errorRecord) => { + const error = ErrorUtil.extractError(errorRecord.error); + + this.errorHandlerService.processError(error); + }); + } + + private _initialize(state: RouteState): void { + const teamParamKey = state.getData("teamParamKey"); + this.teamName = state.getParam(teamParamKey); + + if ( + CollectionsUtil.isNil(teamParamKey) || + CollectionsUtil.isNil(this.teamName) + ) { + this._subscribeForImplicitTeam(); } - private _subscribeForImplicitTeam(): void { - this.dataJobsService - .getNotifiedForTeamImplicitly() - .pipe(take(1)) - .subscribe((teamName) => (this.teamName = teamName)); - } + const jobParamKey = state.getData("jobParamKey"); + this.jobName = state.getParam(jobParamKey); - private _subscribeForTeamChange(state: RouteState): void { - const shouldActivateListener = !!state.getData('activateListenerForTeamChange'); + this.isJobEditable = !!state.getData("editable"); - if (shouldActivateListener && this.dataPipelinesModuleConfig?.manageConfig?.selectedTeamNameObservable) { - this.subscriptions.push( - this.dataPipelinesModuleConfig.manageConfig.selectedTeamNameObservable.subscribe((newTeam) => { - if (this.teamName !== newTeam) { - this.teamName = newTeam; + this.queryParams = state.queryParams; - this.doNavigateBack(); - } - }) - ); - } - } + this.isDownloadJobKeyAllowed = + this.dataPipelinesModuleConfig.manageConfig?.allowKeyTabDownloads && + this.isJobEditable; - private _subscribeForExecutionsChange(): void { - this.subscriptions.push( - this.dataJobsService.getNotifiedForJobExecutions().subscribe((executions) => { - this.jobExecutions = [...executions]; - }) - ); - } + this._subscribeForTeamChange(state); + this._subscribeForExecutionsChange(); + this._subscribeForExecutionIdChange(); + this._loadJobDetails(); + this._loadJobExecutions(); + } - private _subscribeForExecutionIdChange(): void { - const scheduleLastExecutionPolling = new Subject(); + private _subscribeForImplicitTeam(): void { + this.dataJobsService + .getNotifiedForTeamImplicitly() + .pipe(take(1)) + .subscribe((teamName) => (this.teamName = teamName)); + } - this.subscriptions.push( - scheduleLastExecutionPolling - .pipe( - switchMap((id) => - interval(5000).pipe( - switchMap(() => - this.dataJobsApiService.getJobExecution(this.teamName, this.jobName, id).pipe( - map((execution) => { - return { - execution, - error: null as Error - }; - }), - catchError((error: unknown) => { - this.errorHandlerService.processError(ErrorUtil.extractError(error as Error)); - - return of({ - execution: null as DataJobExecutionDetails, - error: error as Error - }); - }) - ) - ), - tap((data) => this._replaceRunningExecutionAndNotify(data.execution)), - takeWhile((data) => { - if (data.error instanceof HttpErrorResponse) { - if (data.error.status === 404 || data.error.status >= 500) { - this.isDataJobRunning = false; - - return false; - } - } - - const isRunning = - CollectionsUtil.isNil(data.execution) || DataJobUtil.isJobRunningPredicate(data.execution); - - if (!isRunning) { - this.isDataJobRunning = false; - } - return isRunning; - }) - ) - ) - ) - .subscribe() - ); + private _subscribeForTeamChange(state: RouteState): void { + const shouldActivateListener = !!state.getData( + "activateListenerForTeamChange", + ); - this.subscriptions.push( - this.dataJobsService - .getNotifiedForRunningJobExecutionId() - .pipe( - concatMap((executionId: string) => - this.dataJobsApiService.getJobExecution(this.teamName, this.jobName, executionId).pipe( - map((executionDetails) => [executionId, executionDetails]), - catchError((error: unknown) => { - this.errorHandlerService.processError(ErrorUtil.extractError(error as Error)); - - return of([executionId]); - }) - ) - ) - ) - .subscribe(([executionId, executionDetails]: [string, DataJobExecutionDetails]) => { - this.isDataJobRunning = true; - this.cancelDataJobDisabled = false; - this._replaceRunningExecutionAndNotify(executionDetails); - scheduleLastExecutionPolling.next(executionId); - }) - ); + if ( + shouldActivateListener && + this.dataPipelinesModuleConfig?.manageConfig?.selectedTeamNameObservable + ) { + this.subscriptions.push( + this.dataPipelinesModuleConfig.manageConfig.selectedTeamNameObservable.subscribe( + (newTeam) => { + if (this.teamName !== newTeam) { + this.teamName = newTeam; + + this.doNavigateBack(); + } + }, + ), + ); } - - private _loadJobDetails(): void { - this.subscriptions.push( - this.dataJobsApiService.getJobDetails(this.teamName, this.jobName).subscribe({ - error: (error: unknown) => { - if (error instanceof HttpErrorResponse) { - if (error.status === 404) { - this._showMessageJobNotExist(); - this.doNavigateBack(); - } - - console.error('Error loading jobDetails', error); - } + } + + private _subscribeForExecutionsChange(): void { + this.subscriptions.push( + this.dataJobsService + .getNotifiedForJobExecutions() + .subscribe((executions) => { + this.jobExecutions = [...executions]; + }), + ); + } + + private _subscribeForExecutionIdChange(): void { + const scheduleLastExecutionPolling = new Subject(); + + this.subscriptions.push( + scheduleLastExecutionPolling + .pipe( + switchMap((id) => + interval(5000).pipe( + switchMap(() => + this.dataJobsApiService + .getJobExecution(this.teamName, this.jobName, id) + .pipe( + map((execution) => { + return { + execution, + error: null as Error, + }; + }), + catchError((error: unknown) => { + this.errorHandlerService.processError( + ErrorUtil.extractError(error as Error), + ); + + return of({ + execution: null as DataJobExecutionDetails, + error: error as Error, + }); + }), + ), + ), + tap((data) => + this._replaceRunningExecutionAndNotify(data.execution), + ), + takeWhile((data) => { + if (data.error instanceof HttpErrorResponse) { + if (data.error.status === 404 || data.error.status >= 500) { + this.isDataJobRunning = false; + + return false; + } } - }) - ); - this.subscriptions.push( - this.dataJobsApiService.getJob(this.teamName, this.jobName).subscribe({ - next: (job) => { - if (CollectionsUtil.isDefined(job)) { - this.isJobAvailable = true; - - this.jobDeployments = job.deployments; - this.isExecuteJobAllowed = ExtractJobStatusPipe.transform(this.jobDeployments) !== DataJobStatus.NOT_DEPLOYED; - - return; - } - this._showMessageJobNotExist(); - this.doNavigateBack(); - }, - error: (error: unknown) => { - this.errorHandlerService.processError(ErrorUtil.extractError(error as Error), { - title: `Loading Data job "${this.jobName}" failed` - }); - } - }) - ); - } + const isRunning = + CollectionsUtil.isNil(data.execution) || + DataJobUtil.isJobRunningPredicate(data.execution); - private _loadJobExecutions(): void { - this.subscriptions.push( + if (!isRunning) { + this.isDataJobRunning = false; + } + return isRunning; + }), + ), + ), + ) + .subscribe(), + ); + + this.subscriptions.push( + this.dataJobsService + .getNotifiedForRunningJobExecutionId() + .pipe( + concatMap((executionId: string) => this.dataJobsApiService - .getJobExecutions(this.teamName, this.jobName, true, null, { - property: 'startTime', - direction: ASC - }) - .subscribe({ - next: (value) => { - if (value?.content) { - this.dataJobsService.notifyForJobExecutions([...value.content]); - - // eslint-disable-next-line @typescript-eslint/unbound-method - const runningExecution = value.content.find(DataJobUtil.isJobRunningPredicate); - if (runningExecution) { - this.dataJobsService.notifyForRunningJobExecutionId(runningExecution.id); - } - } - - this.areJobExecutionsLoaded = true; - }, - error: (error: unknown) => { - this.errorHandlerService.processError(ErrorUtil.extractError(error as Error)); - } - }) - ); - } + .getJobExecution(this.teamName, this.jobName, executionId) + .pipe( + map((executionDetails) => [executionId, executionDetails]), + catchError((error: unknown) => { + this.errorHandlerService.processError( + ErrorUtil.extractError(error as Error), + ); + + return of([executionId]); + }), + ), + ), + ) + .subscribe( + ([executionId, executionDetails]: [ + string, + DataJobExecutionDetails, + ]) => { + this.isDataJobRunning = true; + this.cancelDataJobDisabled = false; + this._replaceRunningExecutionAndNotify(executionDetails); + scheduleLastExecutionPolling.next(executionId); + }, + ), + ); + } + + private _loadJobDetails(): void { + this.subscriptions.push( + this.dataJobsApiService + .getJobDetails(this.teamName, this.jobName) + .subscribe({ + error: (error: unknown) => { + if (error instanceof HttpErrorResponse) { + if (error.status === 404) { + this._showMessageJobNotExist(); + this.doNavigateBack(); + } + + console.error("Error loading jobDetails", error); + } + }, + }), + ); + this.subscriptions.push( + this.dataJobsApiService.getJob(this.teamName, this.jobName).subscribe({ + next: (job) => { + if (CollectionsUtil.isDefined(job)) { + this.isJobAvailable = true; + + this.jobDeployments = job.deployments; + this.isExecuteJobAllowed = + ExtractJobStatusPipe.transform(this.jobDeployments) !== + DataJobStatus.NOT_DEPLOYED; - private _replaceRunningExecutionAndNotify(executionDetails: DataJobExecutionDetails): void { - if (CollectionsUtil.isNil(executionDetails)) { return; - } - - const convertedExecution = DataJobUtil.convertFromExecutionDetailsToExecutionState(executionDetails); - const foundIndex = this.jobExecutions.findIndex((ex) => ex.id === convertedExecution.id); + } + + this._showMessageJobNotExist(); + this.doNavigateBack(); + }, + error: (error: unknown) => { + this.errorHandlerService.processError( + ErrorUtil.extractError(error as Error), + { + title: `Loading Data job "${this.jobName}" failed`, + }, + ); + }, + }), + ); + } + + private _loadJobExecutions(): void { + this.subscriptions.push( + this.dataJobsApiService + .getJobExecutions(this.teamName, this.jobName, true, null, { + property: "startTime", + direction: ASC, + }) + .subscribe({ + next: (value) => { + if (value?.content) { + this.dataJobsService.notifyForJobExecutions([...value.content]); + + // eslint-disable-next-line @typescript-eslint/unbound-method + const runningExecution = value.content.find( + DataJobUtil.isJobRunningPredicate, + ); + if (runningExecution) { + this.dataJobsService.notifyForRunningJobExecutionId( + runningExecution.id, + ); + } + } + + this.areJobExecutionsLoaded = true; + }, + error: (error: unknown) => { + this.errorHandlerService.processError( + ErrorUtil.extractError(error as Error), + ); + }, + }), + ); + } + + private _replaceRunningExecutionAndNotify( + executionDetails: DataJobExecutionDetails, + ): void { + if (CollectionsUtil.isNil(executionDetails)) { + return; + } - if (foundIndex !== -1) { - this.jobExecutions.splice(foundIndex, 1, convertedExecution); - } else { - this.jobExecutions.push(convertedExecution); - } + const convertedExecution = + DataJobUtil.convertFromExecutionDetailsToExecutionState(executionDetails); + const foundIndex = this.jobExecutions.findIndex( + (ex) => ex.id === convertedExecution.id, + ); - this.dataJobsService.notifyForJobExecutions(this.jobExecutions); + if (foundIndex !== -1) { + this.jobExecutions.splice(foundIndex, 1, convertedExecution); + } else { + this.jobExecutions.push(convertedExecution); } - private _submitOperationStarted(type: TypeButtonState): void { - switch (type) { - case TypeButtonState.DELETE: - this.deleteButtonsState = ClrLoadingState.LOADING; - break; - case TypeButtonState.DOWNLOAD: - this.downloadButtonsState = ClrLoadingState.LOADING; - break; - case TypeButtonState.EXECUTE: - this.executeButtonsState = ClrLoadingState.LOADING; - break; - case TypeButtonState.STOP: - this.stopButtonsState = ClrLoadingState.LOADING; - break; - } - - this.loadingInProgress = true; + this.dataJobsService.notifyForJobExecutions(this.jobExecutions); + } + + private _submitOperationStarted(type: TypeButtonState): void { + switch (type) { + case TypeButtonState.DELETE: + this.deleteButtonsState = ClrLoadingState.LOADING; + break; + case TypeButtonState.DOWNLOAD: + this.downloadButtonsState = ClrLoadingState.LOADING; + break; + case TypeButtonState.EXECUTE: + this.executeButtonsState = ClrLoadingState.LOADING; + break; + case TypeButtonState.STOP: + this.stopButtonsState = ClrLoadingState.LOADING; + break; } - private _submitOperationEnded(): void { - this.deleteButtonsState = ClrLoadingState.DEFAULT; - this.downloadButtonsState = ClrLoadingState.DEFAULT; - this.executeButtonsState = ClrLoadingState.DEFAULT; - this.stopButtonsState = ClrLoadingState.DEFAULT; + this.loadingInProgress = true; + } - this.loadingInProgress = false; - } + private _submitOperationEnded(): void { + this.deleteButtonsState = ClrLoadingState.DEFAULT; + this.downloadButtonsState = ClrLoadingState.DEFAULT; + this.executeButtonsState = ClrLoadingState.DEFAULT; + this.stopButtonsState = ClrLoadingState.DEFAULT; - private _extractJobDeployment(): DataJobDeployment { - if (!this.jobDeployments) { - return null; - } + this.loadingInProgress = false; + } - return this.jobDeployments[this.jobDeployments.length - 1]; + private _extractJobDeployment(): DataJobDeployment { + if (!this.jobDeployments) { + return null; } - private _showMessageJobNotExist(): void { - if (!this._nonExistingJobMsgShowed) { - this._nonExistingJobMsgShowed = true; + return this.jobDeployments[this.jobDeployments.length - 1]; + } + + private _showMessageJobNotExist(): void { + if (!this._nonExistingJobMsgShowed) { + this._nonExistingJobMsgShowed = true; - this.toastService.show({ - type: VmwToastType.FAILURE, - title: `Job "${this.jobName}" doesn't exist`, - description: `Data Job "${this.jobName}" for Team "${this.teamName}" doesn't exist, will load Data Jobs list` - }); - } + this.toastService.show({ + type: VmwToastType.FAILURE, + title: `Job "${this.jobName}" doesn't exist`, + description: `Data Job "${this.jobName}" for Team "${this.teamName}" doesn't exist, will load Data Jobs list`, + }); } + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/index.ts index fd57fbf3b9..f391e03dd9 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-job-page.component'; +export * from "./data-job-page.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.html index 6020009156..a10891dda4 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.html @@ -6,877 +6,735 @@
-
- -
-
-
- -
- Status -
+
+ +
+
+ + +
Status
-
- -
+
+ +
-
- - - - - - - - - - - -
- +
+ + + + + + + + + + + +
+ - -
- Description -
+ +
Description
-
- {{ description.value }}
- - +
+ {{ description.value }}
+ + - {{ description.value | words : - descriptionWordsBeforeTruncate }} - - -
+ {{ + description.value | words: descriptionWordsBeforeTruncate + }} + + +
-
- - - - -
- +
+ + + + +
+ - -
- Python version -
+ +
+ Python version +
-
- {{ jobPythonVersion.value }} -
- +
+ {{ jobPythonVersion.value }} +
+ - -
- Owner team -
-
- - {{ team.value }} - -
- + +
Owner team
+
+ + {{ + team.value + }} + +
+ - -
- Schedule (in UTC) -
-
- {{ jobDetails?.config?.schedule?.schedule_cron | - formatSchedule : "Not scheduled" }} + +
+ Schedule (in UTC) +
+
+ {{ + jobDetails?.config?.schedule?.schedule_cron + | formatSchedule: "Not scheduled" + }} - - - Cron expression
- {{ jobDetails?.config?.schedule - ?.schedule_cron }} -
-
- Next 5 executions -
    -
  1. - {{ jobDetails?.config?.schedule - ?.schedule_cron | parseNextRun : - times | date : "MMM d, y, hh:mm - a" : "UTC" }} UTC -
    2. -
-
{{ cronError }} - - -
+ + + Cron expression
+ {{ jobDetails?.config?.schedule?.schedule_cron }} +
+
+ Next 5 executions +
    +
  1. + {{ + jobDetails?.config?.schedule?.schedule_cron + | parseNextRun: times + | date + : "MMM d, y, hh:mm + a" + : "UTC" + }} + UTC +
    2. +
+
{{ cronError }} + + +
-
- - - - -
- +
+ + + + +
+ - -
- Change history -
-
- - {{ changeHistoryConfig.urlTemplate }} - -
- + +
+ Change history +
+
+ + {{ changeHistoryConfig.urlTemplate }} + +
+ - -
- Source location -
-
-
-
- The data job is not deployed -
- -
-
- - -
-
-
+
+ Source location +
+
+
+
+ The data job is not deployed +
+
+ - -
- Notifications - - - Notifications are used to inform the - users about a specific activity. To - configure notifications, edit data job's - config.ini file and redeploy the data - job. - - -
- -
-
- On Job Deployed -
-
- -
-
- {{ contacts - }} -
-
- -
- - - -
    -
  • - {{ contacts - }} -
    • -
- - -
- - Not configured - -
-
-
-
- -
-
- -
-
- {{ contacts - }} -
-
- -
- - - -
    -
  • - {{ contacts - }} -
    • -
- - -
- - Not configured - -
-
-
-
- -
-
- -
-
- {{ contacts - }} -
-
- -
- - - -
    -
  • - {{ contacts - }} -
    • -
- - -
- - Not configured - -
-
-
-
- -
-
- -
-
- {{ contacts - }} -
-
- -
- - - -
    -
  • - {{ contacts - }} -
    • -
- - -
- - Not configured - -
-
-
-
- -
- - - - - - - - - - - - - - - - - -
- - + {{ jobState?.config?.sourceUrl }} + +
-
+
+ + +
+
+
+ +
+ Notifications + + + Notifications are used to inform the users about a specific + activity. To configure notifications, edit data job's + config.ini file and redeploy the data job. + + +
-
-
-
- Last 5 Executions - -
+
+
+ On Job Deployed +
+ +
+
+ {{ contacts }} +
+
+ +
+ + + +
    +
  • + {{ contacts }} +
    • +
+ + +
+ + Not configured + +
+
+
+
+ +
+
-
- - We couldn't find any executions, but you can always - schedule one! - + +
+
+ {{ contacts }} +
+
+ +
+ + + +
    +
  • + {{ contacts }} +
    • +
+ + +
+ + Not configured +
- + +
+
+ +
+
+ {{ contacts }} +
+
+ +
+ class="data-pipelines-job__contacts-list-signpost-container" + > + + + +
    +
  • + {{ contacts }} +
    • +
+ + +
+ + Not configured + +
+
-
-
Loading executions...
+
+ +
+
+ +
+
+ {{ contacts }} +
+
+ +
+ + + +
    +
  • + {{ contacts }} +
    • +
+ + +
+ + Not configured + +
+
-
- +
- - + + + + + + + + + + + + + + + + + +
+ + +
+
+ +
+
+
+ Last 5 Executions +
+ + + +
+
+ + We couldn't find any executions, but you can always schedule one! + +
+ +
+
+
Loading executions...
+
+
+ + + + + + +
diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.scss index 4f622bee31..e5ae886ef8 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.scss @@ -4,144 +4,144 @@ */ @mixin fill-parent-content() { - display: flex; - flex-direction: column; - flex: 1 1 auto; + display: flex; + flex-direction: column; + flex: 1 1 auto; } hr { - border: 0; - height: 1px; - background: #8f9ba3; + border: 0; + height: 1px; + background: #8f9ba3; } .label-link { - cursor: pointer; + cursor: pointer; } .label-link-suppress-decoration { - &:hover { - text-decoration: none; - } + &:hover { + text-decoration: none; + } } ::ng-deep .edit-column-modal { - .modal-header { - padding: 0 0 0 0 !important; - } + .modal-header { + padding: 0 0 0 0 !important; + } } ::ng-deep .clr-timeline-horizontal { - padding-top: 0 !important; + padding-top: 0 !important; } .status-icon-enabled { - color: hsl(93, 67%, 38%); + color: hsl(93, 67%, 38%); } .clr-col-6 { - border-right: 1px solid #999999; + border-right: 1px solid #999999; } .placeholder-error-label { - color: gray; + color: gray; } .grid-column-details { - display: grid; - height: 100%; - grid-template: 'a a a b b b' auto 'c c c c c c' auto 'd d d d d d' auto 'f f f f f f' auto/ 1fr 1fr 1fr 1fr 1fr 1fr; + display: grid; + height: 100%; + grid-template: "a a a b b b" auto "c c c c c c" auto "d d d d d d" auto "f f f f f f" auto/ 1fr 1fr 1fr 1fr 1fr 1fr; - .grid-area-a { - grid-area: a; - } + .grid-area-a { + grid-area: a; + } - .grid-area-b { - grid-area: b; - } + .grid-area-b { + grid-area: b; + } - .grid-area-c { - grid-area: c; - } + .grid-area-c { + grid-area: c; + } - .grid-area-d { - grid-area: d; - } + .grid-area-d { + grid-area: d; + } - .grid-area-e { - grid-area: e; - } + .grid-area-e { + grid-area: e; + } - .grid-area-f { - grid-area: f; - } + .grid-area-f { + grid-area: f; + } } -.clr-timeline-step clr-icon[shape='success-standard'] { - color: var(--clr-timeline-success-step-color, #5eb715); +.clr-timeline-step clr-icon[shape="success-standard"] { + color: var(--clr-timeline-success-step-color, #5eb715); } -.clr-timeline-step clr-icon[shape='error-standard'] { - color: var(--clr-timeline-error-step-color, #c21d00); +.clr-timeline-step clr-icon[shape="error-standard"] { + color: var(--clr-timeline-error-step-color, #c21d00); } .clr-timeline-step clr-icon { - height: 1.8rem; - width: 1.8rem; - min-height: 1.8rem; - min-width: 1.8rem; + height: 1.8rem; + width: 1.8rem; + min-height: 1.8rem; + min-width: 1.8rem; } .btn-show-more { - padding: 0 !important; + padding: 0 !important; } :host { - @include fill-parent-content(); + @include fill-parent-content(); } .data-pipelines-job__details-page { - @include fill-parent-content(); + @include fill-parent-content(); - .data-pipelines-job__details-body { - @include fill-parent-content(); + .data-pipelines-job__details-body { + @include fill-parent-content(); - margin-bottom: 1rem; + margin-bottom: 1rem; - .form-section-readonly { - word-break: break-word; - } + .form-section-readonly { + word-break: break-word; + } - .data-pipelines-job__section--border-none { - border: none; - } + .data-pipelines-job__section--border-none { + border: none; + } - .data-pipelines-job__contacts-container { - display: flex; - align-items: center; + .data-pipelines-job__contacts-container { + display: flex; + align-items: center; - .data-pipelines-job__contacts-list-container { - display: inline-flex; - align-items: center; + .data-pipelines-job__contacts-list-container { + display: inline-flex; + align-items: center; - > div { - display: inline-flex; - margin-right: 0.3rem; + > div { + display: inline-flex; + margin-right: 0.3rem; - &:last-child { - margin-right: 0; - } - } - } + &:last-child { + margin-right: 0; + } + } + } - .data-pipelines-job__contacts-list-signpost-container { - display: inline-flex; - align-items: center; + .data-pipelines-job__contacts-list-signpost-container { + display: inline-flex; + align-items: center; - ul { - list-style-type: none; - } - } + ul { + list-style-type: none; } + } } + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.spec.ts index a4f1aab1db..5bb6bc35f0 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.spec.ts @@ -3,337 +3,397 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { FormBuilder } from '@angular/forms'; -import { ActivatedRoute } from '@angular/router'; -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { RouterTestingModule } from '@angular/router/testing'; +import { NO_ERRORS_SCHEMA } from "@angular/core"; +import { FormBuilder } from "@angular/forms"; +import { ActivatedRoute } from "@angular/router"; +import { ComponentFixture, TestBed } from "@angular/core/testing"; +import { RouterTestingModule } from "@angular/router/testing"; -import { BehaviorSubject, of, Subject } from 'rxjs'; +import { BehaviorSubject, of, Subject } from "rxjs"; import { - ComponentModel, - ComponentService, - ComponentStateImpl, - ErrorHandlerService, - FORM_STATE, - generateErrorCodes, - NavigationService, - RouterService, - RouterState, - RouteState, - ToastService, - UrlOpenerService, - VdkFormState -} from '@versatiledatakit/shared'; - -import { DataJobsApiService, DataJobsService } from '../../../../services'; - -import { ExtractContactsPipe, ExtractJobStatusPipe, FormatSchedulePipe } from '../../../../shared/pipes'; + ComponentModel, + ComponentService, + ComponentStateImpl, + ErrorHandlerService, + FORM_STATE, + generateErrorCodes, + NavigationService, + RouterService, + RouterState, + RouteState, + ToastService, + UrlOpenerService, + VdkFormState, +} from "@versatiledatakit/shared"; + +import { DataJobsApiService, DataJobsService } from "../../../../services"; import { - DATA_PIPELINES_CONFIGS, - DataJob, - DataJobDeploymentDetails, - DataJobDeploymentStatus, - DataJobDetails, - DataJobExecution, - DataJobExecutionsPage, - DataJobExecutionStatus, - DataJobExecutionType -} from '../../../../model'; + ExtractContactsPipe, + ExtractJobStatusPipe, + FormatSchedulePipe, +} from "../../../../shared/pipes"; -import { LOAD_JOB_ERROR_CODES } from '../../../../state/error-codes'; +import { + DATA_PIPELINES_CONFIGS, + DataJob, + DataJobDeploymentDetails, + DataJobDeploymentStatus, + DataJobDetails, + DataJobExecution, + DataJobExecutionsPage, + DataJobExecutionStatus, + DataJobExecutionType, +} from "../../../../model"; + +import { LOAD_JOB_ERROR_CODES } from "../../../../state/error-codes"; -import { TASK_LOAD_JOB_DETAILS, TASK_LOAD_JOB_STATE } from '../../../../state/tasks'; +import { + TASK_LOAD_JOB_DETAILS, + TASK_LOAD_JOB_STATE, +} from "../../../../state/tasks"; -import { DataJobDetailsPageComponent } from './data-job-details-page.component'; +import { DataJobDetailsPageComponent } from "./data-job-details-page.component"; const TEST_JOB_EXECUTION = { - id: 'id002', - jobName: 'job002', - status: DataJobExecutionStatus.SUBMITTED, - startTime: new Date().toISOString(), - startedBy: 'aUserov', - endTime: new Date().toISOString(), - type: DataJobExecutionType.MANUAL, - opId: 'op002', - message: 'message001', - deployment: { - id: 'id002', - enabled: true, - jobVersion: '002', - mode: 'test_mode', - vdkVersion: '002', - jobPythonVersion: '3.9-secure', - resources: { - memoryLimit: 1000, - memoryRequest: 1000, - cpuLimit: 0.5, - cpuRequest: 0.5 - }, - executions: [], - deployedDate: '2020-11-11T10:10:10Z', - deployedBy: 'pmitev', - status: DataJobDeploymentStatus.SUCCESS - } + id: "id002", + jobName: "job002", + status: DataJobExecutionStatus.SUBMITTED, + startTime: new Date().toISOString(), + startedBy: "aUserov", + endTime: new Date().toISOString(), + type: DataJobExecutionType.MANUAL, + opId: "op002", + message: "message001", + deployment: { + id: "id002", + enabled: true, + jobVersion: "002", + mode: "test_mode", + vdkVersion: "002", + jobPythonVersion: "3.9-secure", + resources: { + memoryLimit: 1000, + memoryRequest: 1000, + cpuLimit: 0.5, + cpuRequest: 0.5, + }, + executions: [], + deployedDate: "2020-11-11T10:10:10Z", + deployedBy: "pmitev", + status: DataJobDeploymentStatus.SUCCESS, + }, } as DataJobExecution; const TEST_JOB_DEPLOYMENT = { - id: 'id001', - enabled: true, - /* eslint-disable-next-line @typescript-eslint/naming-convention */ - job_version: '001', - mode: 'test_mode', - /* eslint-disable-next-line @typescript-eslint/naming-convention */ - vdk_version: '001', - python_version: '3.7-secure' + id: "id001", + enabled: true, + /* eslint-disable-next-line @typescript-eslint/naming-convention */ + job_version: "001", + mode: "test_mode", + /* eslint-disable-next-line @typescript-eslint/naming-convention */ + vdk_version: "001", + python_version: "3.7-secure", } as DataJobDeploymentDetails; const TEST_JOB_DETAILS = { - /* eslint-disable-next-line @typescript-eslint/naming-convention */ - job_name: 'job001', - team: 'taurus', - description: 'description' + /* eslint-disable-next-line @typescript-eslint/naming-convention */ + job_name: "job001", + team: "taurus", + description: "description", }; -describe('DataJobsDetailsModalComponent', () => { - let componentServiceStub: jasmine.SpyObj; - let navigationServiceStub: jasmine.SpyObj; - let activatedRouteStub: ActivatedRoute; - let routerServiceStub: jasmine.SpyObj; - let toastServiceStub: jasmine.SpyObj; - let dataJobsApiServiceStub: jasmine.SpyObj; - let dataJobsServiceStub: jasmine.SpyObj; - let errorHandlerServiceStub: jasmine.SpyObj; - let urlOpenerServiceStub: jasmine.SpyObj; - - let componentModelStub: ComponentModel; - let component: DataJobDetailsPageComponent; - let fixture: ComponentFixture; - - beforeEach(() => { - componentServiceStub = jasmine.createSpyObj('componentService', ['init', 'getModel', 'idle', 'update']); - navigationServiceStub = jasmine.createSpyObj('navigationService', ['navigateTo', 'navigateBack']); - activatedRouteStub = { snapshot: null } as any; - routerServiceStub = jasmine.createSpyObj('routerService', ['getState']); - toastServiceStub = jasmine.createSpyObj('toastService', ['show']); - dataJobsApiServiceStub = jasmine.createSpyObj('dataJobsApiService', [ - 'getJobDetails', - 'getJobExecutions', - 'getJobDeployments', - 'downloadFile', - 'updateDataJobStatus', - 'updateDataJob', - 'executeDataJob', - 'removeJob', - 'getJob' - ]); - dataJobsServiceStub = jasmine.createSpyObj('dataJobsService', [ - 'loadJobs', - 'loadJob', - 'notifyForRunningJobExecutionId', - 'notifyForJobExecutions', - 'notifyForTeamImplicitly', - 'getNotifiedForRunningJobExecutionId', - 'getNotifiedForJobExecutions', - 'getNotifiedForTeamImplicitly' - ]); - errorHandlerServiceStub = jasmine.createSpyObj('errorHandlerService', ['processError', 'handleError']); - urlOpenerServiceStub = jasmine.createSpyObj('urlOpenerServiceStub', ['open']); - - dataJobsApiServiceStub.getJobDetails.and.returnValue(new BehaviorSubject(TEST_JOB_DETAILS).asObservable()); - dataJobsApiServiceStub.getJobExecutions.and.returnValue( - new BehaviorSubject({ - content: [TEST_JOB_EXECUTION], - totalItems: 1, - totalPages: 1 - }).asObservable() - ); - dataJobsApiServiceStub.getJobDeployments.and.returnValue( - new BehaviorSubject([TEST_JOB_DEPLOYMENT]).asObservable() - ); - dataJobsApiServiceStub.downloadFile.and.returnValue(new BehaviorSubject({} as never).asObservable()); - dataJobsApiServiceStub.updateDataJobStatus.and.returnValue( - new BehaviorSubject<{ enabled: boolean }>({ - enabled: true - }).asObservable() - ); - dataJobsApiServiceStub.updateDataJob.and.returnValue(new BehaviorSubject({}).asObservable()); - dataJobsApiServiceStub.executeDataJob.and.returnValue(new BehaviorSubject(undefined).asObservable()); - dataJobsApiServiceStub.removeJob.and.returnValue(new BehaviorSubject(TEST_JOB_DETAILS).asObservable()); - dataJobsApiServiceStub.getJob.and.returnValue(of({ data: { content: [TEST_JOB_DETAILS] } } as DataJob)); - - dataJobsServiceStub.getNotifiedForJobExecutions.and.returnValue(new Subject()); - dataJobsServiceStub.getNotifiedForTeamImplicitly.and.returnValue(new BehaviorSubject(TEST_JOB_DETAILS.team)); - - componentModelStub = ComponentModel.of(ComponentStateImpl.of({}), RouterState.of(RouteState.empty(), 1)); - routerServiceStub.getState.and.returnValue(new Subject()); - componentServiceStub.init.and.returnValue(of(componentModelStub)); - componentServiceStub.getModel.and.returnValue(of(componentModelStub)); - - navigationServiceStub.navigateBack.and.returnValue(Promise.resolve(true)); - - generateErrorCodes(dataJobsApiServiceStub, ['getJob', 'getJobDetails']); - - LOAD_JOB_ERROR_CODES[TASK_LOAD_JOB_STATE] = dataJobsApiServiceStub.errorCodes.getJob; - LOAD_JOB_ERROR_CODES[TASK_LOAD_JOB_DETAILS] = dataJobsApiServiceStub.errorCodes.getJobDetails; - - TestBed.configureTestingModule({ - schemas: [NO_ERRORS_SCHEMA], - declarations: [DataJobDetailsPageComponent, FormatSchedulePipe, ExtractJobStatusPipe, ExtractContactsPipe], - imports: [RouterTestingModule], - providers: [ - FormBuilder, - { provide: RouterService, useValue: routerServiceStub }, - { provide: ComponentService, useValue: componentServiceStub }, - { provide: NavigationService, useValue: navigationServiceStub }, - { provide: ActivatedRoute, useValue: activatedRouteStub }, - { - provide: DataJobsApiService, - useValue: dataJobsApiServiceStub - }, - { provide: ToastService, useValue: toastServiceStub }, - { provide: DataJobsService, useValue: dataJobsServiceStub }, - { - provide: ErrorHandlerService, - useValue: errorHandlerServiceStub - }, - { provide: UrlOpenerService, useValue: urlOpenerServiceStub }, - { - provide: DATA_PIPELINES_CONFIGS, - useFactory: () => ({ - defaultOwnerTeamName: 'all', - manageConfig: { - allowKeyTabDownloads: true, - allowExecuteNow: true - } - }) - } - ] - }); - - fixture = TestBed.createComponent(DataJobDetailsPageComponent); - component = fixture.componentInstance; - component.jobDetails = TEST_JOB_DETAILS; - component.jobExecutions = [TEST_JOB_EXECUTION]; - component.model = componentModelStub; +describe("DataJobsDetailsModalComponent", () => { + let componentServiceStub: jasmine.SpyObj; + let navigationServiceStub: jasmine.SpyObj; + let activatedRouteStub: ActivatedRoute; + let routerServiceStub: jasmine.SpyObj; + let toastServiceStub: jasmine.SpyObj; + let dataJobsApiServiceStub: jasmine.SpyObj; + let dataJobsServiceStub: jasmine.SpyObj; + let errorHandlerServiceStub: jasmine.SpyObj; + let urlOpenerServiceStub: jasmine.SpyObj; + + let componentModelStub: ComponentModel; + let component: DataJobDetailsPageComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + componentServiceStub = jasmine.createSpyObj( + "componentService", + ["init", "getModel", "idle", "update"], + ); + navigationServiceStub = jasmine.createSpyObj( + "navigationService", + ["navigateTo", "navigateBack"], + ); + activatedRouteStub = { snapshot: null } as any; + routerServiceStub = jasmine.createSpyObj("routerService", [ + "getState", + ]); + toastServiceStub = jasmine.createSpyObj("toastService", [ + "show", + ]); + dataJobsApiServiceStub = jasmine.createSpyObj( + "dataJobsApiService", + [ + "getJobDetails", + "getJobExecutions", + "getJobDeployments", + "downloadFile", + "updateDataJobStatus", + "updateDataJob", + "executeDataJob", + "removeJob", + "getJob", + ], + ); + dataJobsServiceStub = jasmine.createSpyObj( + "dataJobsService", + [ + "loadJobs", + "loadJob", + "notifyForRunningJobExecutionId", + "notifyForJobExecutions", + "notifyForTeamImplicitly", + "getNotifiedForRunningJobExecutionId", + "getNotifiedForJobExecutions", + "getNotifiedForTeamImplicitly", + ], + ); + errorHandlerServiceStub = jasmine.createSpyObj( + "errorHandlerService", + ["processError", "handleError"], + ); + urlOpenerServiceStub = jasmine.createSpyObj( + "urlOpenerServiceStub", + ["open"], + ); + + dataJobsApiServiceStub.getJobDetails.and.returnValue( + new BehaviorSubject(TEST_JOB_DETAILS).asObservable(), + ); + dataJobsApiServiceStub.getJobExecutions.and.returnValue( + new BehaviorSubject({ + content: [TEST_JOB_EXECUTION], + totalItems: 1, + totalPages: 1, + }).asObservable(), + ); + dataJobsApiServiceStub.getJobDeployments.and.returnValue( + new BehaviorSubject([ + TEST_JOB_DEPLOYMENT, + ]).asObservable(), + ); + dataJobsApiServiceStub.downloadFile.and.returnValue( + new BehaviorSubject({} as never).asObservable(), + ); + dataJobsApiServiceStub.updateDataJobStatus.and.returnValue( + new BehaviorSubject<{ enabled: boolean }>({ + enabled: true, + }).asObservable(), + ); + dataJobsApiServiceStub.updateDataJob.and.returnValue( + new BehaviorSubject({}).asObservable(), + ); + dataJobsApiServiceStub.executeDataJob.and.returnValue( + new BehaviorSubject(undefined).asObservable(), + ); + dataJobsApiServiceStub.removeJob.and.returnValue( + new BehaviorSubject(TEST_JOB_DETAILS).asObservable(), + ); + dataJobsApiServiceStub.getJob.and.returnValue( + of({ data: { content: [TEST_JOB_DETAILS] } } as DataJob), + ); + + dataJobsServiceStub.getNotifiedForJobExecutions.and.returnValue( + new Subject(), + ); + dataJobsServiceStub.getNotifiedForTeamImplicitly.and.returnValue( + new BehaviorSubject(TEST_JOB_DETAILS.team), + ); + + componentModelStub = ComponentModel.of( + ComponentStateImpl.of({}), + RouterState.of(RouteState.empty(), 1), + ); + routerServiceStub.getState.and.returnValue(new Subject()); + componentServiceStub.init.and.returnValue(of(componentModelStub)); + componentServiceStub.getModel.and.returnValue(of(componentModelStub)); + + navigationServiceStub.navigateBack.and.returnValue(Promise.resolve(true)); + + generateErrorCodes(dataJobsApiServiceStub, [ + "getJob", + "getJobDetails", + ]); + + LOAD_JOB_ERROR_CODES[TASK_LOAD_JOB_STATE] = + dataJobsApiServiceStub.errorCodes.getJob; + LOAD_JOB_ERROR_CODES[TASK_LOAD_JOB_DETAILS] = + dataJobsApiServiceStub.errorCodes.getJobDetails; + + TestBed.configureTestingModule({ + schemas: [NO_ERRORS_SCHEMA], + declarations: [ + DataJobDetailsPageComponent, + FormatSchedulePipe, + ExtractJobStatusPipe, + ExtractContactsPipe, + ], + imports: [RouterTestingModule], + providers: [ + FormBuilder, + { provide: RouterService, useValue: routerServiceStub }, + { provide: ComponentService, useValue: componentServiceStub }, + { provide: NavigationService, useValue: navigationServiceStub }, + { provide: ActivatedRoute, useValue: activatedRouteStub }, + { + provide: DataJobsApiService, + useValue: dataJobsApiServiceStub, + }, + { provide: ToastService, useValue: toastServiceStub }, + { provide: DataJobsService, useValue: dataJobsServiceStub }, + { + provide: ErrorHandlerService, + useValue: errorHandlerServiceStub, + }, + { provide: UrlOpenerService, useValue: urlOpenerServiceStub }, + { + provide: DATA_PIPELINES_CONFIGS, + useFactory: () => ({ + defaultOwnerTeamName: "all", + manageConfig: { + allowKeyTabDownloads: true, + allowExecuteNow: true, + }, + }), + }, + ], }); - it('can load instance', () => { - expect(component).toBeTruthy(); - }); + fixture = TestBed.createComponent(DataJobDetailsPageComponent); + component = fixture.componentInstance; + component.jobDetails = TEST_JOB_DETAILS; + component.jobExecutions = [TEST_JOB_EXECUTION]; + component.model = componentModelStub; + }); - it(`readOnly has default value`, () => { - expect(component.isJobEditable).toBeFalse(); - }); + it("can load instance", () => { + expect(component).toBeTruthy(); + }); - it(`loadingExecutions has default value`, () => { - expect(component.loadingExecutions).toBeTrue(); - }); + it(`readOnly has default value`, () => { + expect(component.isJobEditable).toBeFalse(); + }); - it(`canEditSection has default value`, () => { - expect(component.canEditSection).toBeTrue(); - }); + it(`loadingExecutions has default value`, () => { + expect(component.loadingExecutions).toBeTrue(); + }); - it(`readOnly sets readFormState as formState`, () => { - component.isJobEditable = false; - component.ngOnInit(); + it(`canEditSection has default value`, () => { + expect(component.canEditSection).toBeTrue(); + }); - expect(component.formState).toEqual(component.readFormState); + it(`readOnly sets readFormState as formState`, () => { + component.isJobEditable = false; + component.ngOnInit(); + + expect(component.formState).toEqual(component.readFormState); + }); + + describe("isDescriptionSubmitEnabled", () => { + it("returns false", () => { + expect(component.isDescriptionSubmitEnabled()).toBeFalse(); }); + }); - describe('isDescriptionSubmitEnabled', () => { - it('returns false', () => { - expect(component.isDescriptionSubmitEnabled()).toBeFalse(); - }); + describe("isStatusSubmitEnabled", () => { + it("returns false", () => { + expect(component.isStatusSubmitEnabled()).toBeFalse(); }); + }); - describe('isStatusSubmitEnabled', () => { - it('returns false', () => { - expect(component.isStatusSubmitEnabled()).toBeFalse(); - }); + describe("_resetJobDetails", () => { + it("do not reset valid job", () => { + // @ts-ignore + component._resetJobDetails(); + expect(component.jobDetails).toEqual(TEST_JOB_DETAILS); }); - describe('_resetJobDetails', () => { - it('do not reset valid job', () => { - // @ts-ignore - component._resetJobDetails(); - expect(component.jobDetails).toEqual(TEST_JOB_DETAILS); - }); - - it('do reset invalid job', () => { - component.jobDetails = null; - // @ts-ignore - component._resetJobDetails(); - expect(component.jobDetails).toBeDefined(); - }); + it("do reset invalid job", () => { + component.jobDetails = null; + // @ts-ignore + component._resetJobDetails(); + expect(component.jobDetails).toBeDefined(); }); + }); - describe('sectionStateChange', () => { - it('makes expected calls for FORM_STATE.SUBMIT', () => { - const vMWFormStateStub = {} as VdkFormState; - vMWFormStateStub.state = FORM_STATE.SUBMIT; + describe("sectionStateChange", () => { + it("makes expected calls for FORM_STATE.SUBMIT", () => { + const vMWFormStateStub = {} as VdkFormState; + vMWFormStateStub.state = FORM_STATE.SUBMIT; - spyOn(component, 'submitForm').and.callThrough(); - component.sectionStateChange(vMWFormStateStub); - expect(component.submitForm).toHaveBeenCalled(); - }); + spyOn(component, "submitForm").and.callThrough(); + component.sectionStateChange(vMWFormStateStub); + expect(component.submitForm).toHaveBeenCalled(); }); - - describe('sectionStateChange', () => { - it('makes expected calls for FORM_STATE.CAN_EDIT', () => { - const vMWFormStateStub = {} as VdkFormState; - vMWFormStateStub.state = FORM_STATE.CAN_EDIT; - component.sectionStateChange(vMWFormStateStub); - expect(component.canEditSection).toBeTrue(); - }); + }); + + describe("sectionStateChange", () => { + it("makes expected calls for FORM_STATE.CAN_EDIT", () => { + const vMWFormStateStub = {} as VdkFormState; + vMWFormStateStub.state = FORM_STATE.CAN_EDIT; + component.sectionStateChange(vMWFormStateStub); + expect(component.canEditSection).toBeTrue(); }); + }); - describe('sectionStateChange', () => { - it('makes expected calls for FORM_STATE.EDIT', () => { - const vMWFormStateStub = {} as VdkFormState; - vMWFormStateStub.state = FORM_STATE.EDIT; + describe("sectionStateChange", () => { + it("makes expected calls for FORM_STATE.EDIT", () => { + const vMWFormStateStub = {} as VdkFormState; + vMWFormStateStub.state = FORM_STATE.EDIT; - component.sectionStateChange(vMWFormStateStub); - expect(component.canEditSection).toBeFalse(); - }); + component.sectionStateChange(vMWFormStateStub); + expect(component.canEditSection).toBeFalse(); }); + }); - describe('doSubmit', () => { - it('makes expected calls for emittingSection description', () => { - const vMWFormStateStub = {} as VdkFormState; - vMWFormStateStub.emittingSection = 'description'; + describe("doSubmit", () => { + it("makes expected calls for emittingSection description", () => { + const vMWFormStateStub = {} as VdkFormState; + vMWFormStateStub.emittingSection = "description"; - spyOn(component, 'isDescriptionSubmitEnabled').and.callThrough(); - component.submitForm(vMWFormStateStub); - expect(component.isDescriptionSubmitEnabled).toHaveBeenCalled(); - }); + spyOn(component, "isDescriptionSubmitEnabled").and.callThrough(); + component.submitForm(vMWFormStateStub); + expect(component.isDescriptionSubmitEnabled).toHaveBeenCalled(); + }); - it('makes expected calls for emittingSection status', () => { - const vMWFormStateStub = {} as VdkFormState; - vMWFormStateStub.emittingSection = 'status'; + it("makes expected calls for emittingSection status", () => { + const vMWFormStateStub = {} as VdkFormState; + vMWFormStateStub.emittingSection = "status"; - spyOn(component, 'isStatusSubmitEnabled').and.callThrough(); - component.submitForm(vMWFormStateStub); - expect(component.isStatusSubmitEnabled).toHaveBeenCalled(); - }); + spyOn(component, "isStatusSubmitEnabled").and.callThrough(); + component.submitForm(vMWFormStateStub); + expect(component.isStatusSubmitEnabled).toHaveBeenCalled(); }); + }); - describe('ngOnInit', () => { - it('makes expected calls', () => { - routerServiceStub.getState.and.returnValue(of(RouteState.empty())); - component.ngOnInit(); + describe("ngOnInit", () => { + it("makes expected calls", () => { + routerServiceStub.getState.and.returnValue(of(RouteState.empty())); + component.ngOnInit(); - expect(dataJobsServiceStub.loadJob).toHaveBeenCalled(); - }); + expect(dataJobsServiceStub.loadJob).toHaveBeenCalled(); }); + }); - describe('editOperationEnded', () => { - it('sets expected states', () => { - component.editOperationEnded(); - expect(component.formState.state).toEqual(FORM_STATE.CAN_EDIT); - expect(component.canEditSection).toBeTrue(); - }); + describe("editOperationEnded", () => { + it("sets expected states", () => { + component.editOperationEnded(); + expect(component.formState.state).toEqual(FORM_STATE.CAN_EDIT); + expect(component.canEditSection).toBeTrue(); }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.ts index 9fb21dfa13..9ab94ff623 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/data-job-details-page.component.ts @@ -3,584 +3,662 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Component, Inject, OnInit } from '@angular/core'; -import { FormBuilder, FormGroup } from '@angular/forms'; -import { ActivatedRoute, Router } from '@angular/router'; +import { Component, Inject, OnInit } from "@angular/core"; +import { FormBuilder, FormGroup } from "@angular/forms"; +import { ActivatedRoute, Router } from "@angular/router"; -import { take } from 'rxjs/operators'; +import { take } from "rxjs/operators"; import { - ASC, - CollectionsUtil, - ComponentModel, - ComponentService, - ErrorHandlerConfig, - ErrorHandlerService, - ErrorRecord, - FORM_STATE, - NavigationService, - OnTaurusModelChange, - OnTaurusModelError, - OnTaurusModelInit, - OnTaurusModelLoad, - RouterService, - RouteState, - TaurusBaseComponent, - ToastService, - UrlOpenerService, - VdkFormState, - VmwToastType -} from '@versatiledatakit/shared'; - -import { ConfirmationModalOptions, DeleteModalOptions, ModalOptions } from '../../../../shared/model'; -import { CronUtil, DataJobUtil, ErrorUtil, StringUtil } from '../../../../shared/utils'; -import { ExtractJobStatusPipe, ParseEpochPipe } from '../../../../shared/pipes'; + ASC, + CollectionsUtil, + ComponentModel, + ComponentService, + ErrorHandlerConfig, + ErrorHandlerService, + ErrorRecord, + FORM_STATE, + NavigationService, + OnTaurusModelChange, + OnTaurusModelError, + OnTaurusModelInit, + OnTaurusModelLoad, + RouterService, + RouteState, + TaurusBaseComponent, + ToastService, + UrlOpenerService, + VdkFormState, + VmwToastType, +} from "@versatiledatakit/shared"; import { - DATA_PIPELINES_CONFIGS, - DataJob, - DataJobDeployment, - DataJobDetails, - DataJobExecutionOrder, - DataJobExecutions, - DataJobStatus, - DataPipelinesConfig, - JOB_DEPLOYMENT_ID_REQ_PARAM, - JOB_DETAILS_DATA_KEY, - JOB_DETAILS_REQ_PARAM, - JOB_EXECUTIONS_DATA_KEY, - JOB_NAME_REQ_PARAM, - JOB_STATE_DATA_KEY, - JOB_STATE_REQ_PARAM, - JOB_STATUS_REQ_PARAM, - ORDER_REQ_PARAM, - TEAM_NAME_REQ_PARAM -} from '../../../../model'; + ConfirmationModalOptions, + DeleteModalOptions, + ModalOptions, +} from "../../../../shared/model"; +import { + CronUtil, + DataJobUtil, + ErrorUtil, + StringUtil, +} from "../../../../shared/utils"; +import { ExtractJobStatusPipe, ParseEpochPipe } from "../../../../shared/pipes"; import { - TASK_LOAD_JOB_DETAILS, - TASK_LOAD_JOB_EXECUTIONS, - TASK_LOAD_JOB_STATE, - TASK_UPDATE_JOB_DESCRIPTION, - TASK_UPDATE_JOB_STATUS -} from '../../../../state/tasks'; + DATA_PIPELINES_CONFIGS, + DataJob, + DataJobDeployment, + DataJobDetails, + DataJobExecutionOrder, + DataJobExecutions, + DataJobStatus, + DataPipelinesConfig, + JOB_DEPLOYMENT_ID_REQ_PARAM, + JOB_DETAILS_DATA_KEY, + JOB_DETAILS_REQ_PARAM, + JOB_EXECUTIONS_DATA_KEY, + JOB_NAME_REQ_PARAM, + JOB_STATE_DATA_KEY, + JOB_STATE_REQ_PARAM, + JOB_STATUS_REQ_PARAM, + ORDER_REQ_PARAM, + TEAM_NAME_REQ_PARAM, +} from "../../../../model"; -import { LOAD_JOB_ERROR_CODES } from '../../../../state/error-codes'; +import { + TASK_LOAD_JOB_DETAILS, + TASK_LOAD_JOB_EXECUTIONS, + TASK_LOAD_JOB_STATE, + TASK_UPDATE_JOB_DESCRIPTION, + TASK_UPDATE_JOB_STATUS, +} from "../../../../state/tasks"; -import { DataJobsApiService, DataJobsService } from '../../../../services'; +import { LOAD_JOB_ERROR_CODES } from "../../../../state/error-codes"; + +import { DataJobsApiService, DataJobsService } from "../../../../services"; @Component({ - selector: 'lib-data-job-details-page', - templateUrl: './data-job-details-page.component.html', - styleUrls: ['./data-job-details-page.component.scss'] + selector: "lib-data-job-details-page", + templateUrl: "./data-job-details-page.component.html", + styleUrls: ["./data-job-details-page.component.scss"], }) export class DataJobDetailsPageComponent - extends TaurusBaseComponent - implements OnInit, OnTaurusModelInit, OnTaurusModelLoad, OnTaurusModelChange, OnTaurusModelError + extends TaurusBaseComponent + implements + OnInit, + OnTaurusModelInit, + OnTaurusModelLoad, + OnTaurusModelChange, + OnTaurusModelError { - readonly uuid = 'DataJobDetailsPageComponent'; - - dataJobStatusEnum = DataJobStatus; - - jobName: string; - teamName: string; - jobState: DataJob; - jobDetails: DataJobDetails; - jobExecutions: DataJobExecutions = []; - - isJobEditable = false; - - /** - * ** Flag instruct whether template to show team section. - */ - shouldShowTeamsSection = false; - - /** - * ** Flag instruct whether template to show change history section. - */ - shouldShowChangeHistorySection = false; - - cronError: string = null; - - next: Date; - - loadingExecutions = true; - loadingInProgress = true; - allowExecutionsByDeployment = false; - - tmForm: FormGroup; - formState: VdkFormState; - readFormState: VdkFormState; - editableFormState: VdkFormState; - - canEditSection = true; - - collectorOptions: ModalOptions; - confirmationOptions: ModalOptions; - deleteOptions: ModalOptions; - executeNowOptions: ModalOptions; - - showFullDescription = false; - - descriptionWordsBeforeTruncate = 12; - - get name() { - return this.tmForm.get('name'); - } - - get team() { - return this.tmForm.get('team'); - } - - get status() { - return this.tmForm.get('status'); - } - - get description() { - return this.tmForm.get('description'); - } - - get jobPythonVersion() { - return this.tmForm.get('jobPythonVersion'); - } - - /** - * ** Array of error code patterns that component should listen for in errors store. - */ - listenForErrorPatterns: string[] = [LOAD_JOB_ERROR_CODES[TASK_LOAD_JOB_STATE].All, LOAD_JOB_ERROR_CODES[TASK_LOAD_JOB_DETAILS].All]; - - /** - * ** Flag that indicates there is jobs executions load error. - */ - isComponentInErrorState = false; - - /** - * ** Data Job Change history configuration. - */ - changeHistoryConfig: DataPipelinesConfig['changeHistory']; - - constructor( - componentService: ComponentService, - navigationService: NavigationService, - activatedRoute: ActivatedRoute, - private readonly router: Router, - private readonly routerService: RouterService, - private readonly dataJobsService: DataJobsService, - private readonly dataJobsApiService: DataJobsApiService, - private readonly formBuilder: FormBuilder, - private readonly toastService: ToastService, - private readonly errorHandlerService: ErrorHandlerService, - private readonly urlOpenerService: UrlOpenerService, - @Inject(DATA_PIPELINES_CONFIGS) - public readonly dataPipelinesModuleConfig: DataPipelinesConfig + readonly uuid = "DataJobDetailsPageComponent"; + + dataJobStatusEnum = DataJobStatus; + + jobName: string; + teamName: string; + jobState: DataJob; + jobDetails: DataJobDetails; + jobExecutions: DataJobExecutions = []; + + isJobEditable = false; + + /** + * ** Flag instruct whether template to show team section. + */ + shouldShowTeamsSection = false; + + /** + * ** Flag instruct whether template to show change history section. + */ + shouldShowChangeHistorySection = false; + + cronError: string = null; + + next: Date; + + loadingExecutions = true; + loadingInProgress = true; + allowExecutionsByDeployment = false; + + tmForm: FormGroup; + formState: VdkFormState; + readFormState: VdkFormState; + editableFormState: VdkFormState; + + canEditSection = true; + + collectorOptions: ModalOptions; + confirmationOptions: ModalOptions; + deleteOptions: ModalOptions; + executeNowOptions: ModalOptions; + + showFullDescription = false; + + descriptionWordsBeforeTruncate = 12; + + get name() { + return this.tmForm.get("name"); + } + + get team() { + return this.tmForm.get("team"); + } + + get status() { + return this.tmForm.get("status"); + } + + get description() { + return this.tmForm.get("description"); + } + + get jobPythonVersion() { + return this.tmForm.get("jobPythonVersion"); + } + + /** + * ** Array of error code patterns that component should listen for in errors store. + */ + listenForErrorPatterns: string[] = [ + LOAD_JOB_ERROR_CODES[TASK_LOAD_JOB_STATE].All, + LOAD_JOB_ERROR_CODES[TASK_LOAD_JOB_DETAILS].All, + ]; + + /** + * ** Flag that indicates there is jobs executions load error. + */ + isComponentInErrorState = false; + + /** + * ** Data Job Change history configuration. + */ + changeHistoryConfig: DataPipelinesConfig["changeHistory"]; + + constructor( + componentService: ComponentService, + navigationService: NavigationService, + activatedRoute: ActivatedRoute, + private readonly router: Router, + private readonly routerService: RouterService, + private readonly dataJobsService: DataJobsService, + private readonly dataJobsApiService: DataJobsApiService, + private readonly formBuilder: FormBuilder, + private readonly toastService: ToastService, + private readonly errorHandlerService: ErrorHandlerService, + private readonly urlOpenerService: UrlOpenerService, + @Inject(DATA_PIPELINES_CONFIGS) + public readonly dataPipelinesModuleConfig: DataPipelinesConfig, + ) { + super(componentService, navigationService, activatedRoute); + + this.formState = new VdkFormState(FORM_STATE.VIEW); + this.readFormState = new VdkFormState(FORM_STATE.VIEW); + this.editableFormState = new VdkFormState(FORM_STATE.CAN_EDIT); + + this.confirmationOptions = new ConfirmationModalOptions(); + this.deleteOptions = new DeleteModalOptions(); + this.executeNowOptions = new ConfirmationModalOptions(); + + this._initForm(); + } + + isDescriptionSubmitEnabled(): boolean { + return ( + this._isFormSubmitEnabled() && + this.description.value !== this.jobDetails.description + ); + } + + isStatusSubmitEnabled(): boolean { + return ( + this._isFormSubmitEnabled() && + this.status.value !== + ExtractJobStatusPipe.transform(this.jobState?.deployments) + ); + } + + isJobRunning(): boolean { + return DataJobUtil.isJobRunning(this.jobExecutions); + } + + showNoNotificationsLabel(notifications: string[]): boolean { + return !notifications || notifications.length < 1; + } + + sectionStateChange(sectionState: VdkFormState) { + if (sectionState.state === FORM_STATE.CAN_EDIT) { + switch (sectionState.emittingSection) { + case "status": + this.status.setValue( + ExtractJobStatusPipe.transform(this.jobState?.deployments), + ); + break; + case "description": + this.description.setValue(this.jobDetails.description); + break; + default: + break; + } + this.canEditSection = true; + } else if (sectionState.state === FORM_STATE.SUBMIT) { + this.submitForm(sectionState); + } else if (sectionState.state === FORM_STATE.EDIT) { + this.canEditSection = false; + } + } + + submitForm(event: VdkFormState) { + if ( + event.emittingSection === "description" && + this.isDescriptionSubmitEnabled() ) { - super(componentService, navigationService, activatedRoute); - - this.formState = new VdkFormState(FORM_STATE.VIEW); - this.readFormState = new VdkFormState(FORM_STATE.VIEW); - this.editableFormState = new VdkFormState(FORM_STATE.CAN_EDIT); - - this.confirmationOptions = new ConfirmationModalOptions(); - this.deleteOptions = new DeleteModalOptions(); - this.executeNowOptions = new ConfirmationModalOptions(); - - this._initForm(); - } - - isDescriptionSubmitEnabled(): boolean { - return this._isFormSubmitEnabled() && this.description.value !== this.jobDetails.description; - } - - isStatusSubmitEnabled(): boolean { - return this._isFormSubmitEnabled() && this.status.value !== ExtractJobStatusPipe.transform(this.jobState?.deployments); - } - - isJobRunning(): boolean { - return DataJobUtil.isJobRunning(this.jobExecutions); - } - - showNoNotificationsLabel(notifications: string[]): boolean { - return !notifications || notifications.length < 1; - } - - sectionStateChange(sectionState: VdkFormState) { - if (sectionState.state === FORM_STATE.CAN_EDIT) { - switch (sectionState.emittingSection) { - case 'status': - this.status.setValue(ExtractJobStatusPipe.transform(this.jobState?.deployments)); - break; - case 'description': - this.description.setValue(this.jobDetails.description); - break; - default: - break; - } - this.canEditSection = true; - } else if (sectionState.state === FORM_STATE.SUBMIT) { - this.submitForm(sectionState); - } else if (sectionState.state === FORM_STATE.EDIT) { - this.canEditSection = false; - } - } - - submitForm(event: VdkFormState) { - if (event.emittingSection === 'description' && this.isDescriptionSubmitEnabled()) { - this._doSubmitDescriptionUpdate(); - } - - if (event.emittingSection === 'status' && this.isStatusSubmitEnabled()) { - this._doSubmitStatusUpdate(); - } - } - - editOperationEnded() { - this.formState = new VdkFormState(FORM_STATE.CAN_EDIT); - this.canEditSection = true; - } - - loadJobExecutions() { - this.dataJobsService.loadJobExecutions(this.model); - } - - redirectToHealthStatus() { - // eslint-disable-next-line @typescript-eslint/no-floating-promises - this.router.navigateByUrl(StringUtil.stringFormat(this.dataPipelinesModuleConfig.healthStatusUrl, this.jobDetails.job_name)).then(); - } - - /** - * ** Intercepts click on change history link and show confirmation. - */ - navigateToJobChangeHistory($event: MouseEvent): void { - $event.preventDefault(); - $event.stopImmediatePropagation(); - - this.urlOpenerService - .open(this.changeHistoryConfig.urlTemplate, '_blank', { - title: this.changeHistoryConfig.confirmationTitle, - messageComponent: this.changeHistoryConfig.confirmationMessageComponent, - closable: true, - optionDoNotShowFutureConfirmation: true, - confirmBtnModel: { - text: 'Proceed', - iconShape: 'pop-out', - iconPosition: 'right' - } - }) - .then((_value) => { - // No-op. - }) - .catch((_reason) => { - // No-op. - }); - } - - /** - * @inheritDoc - */ - onModelInit(): void { - this.routerService - .getState() - .pipe(take(1)) - .subscribe((routeState) => this._initialize(routeState)); - } - - /** - * @inheritDoc - */ - onModelLoad(model: ComponentModel, task: string): void { - if (task === TASK_LOAD_JOB_EXECUTIONS) { - this.loadingExecutions = false; - } else if (task === TASK_LOAD_JOB_DETAILS) { - this.loadingInProgress = false; - } - } - - /** - * @inheritDoc - */ - onModelChange(model: ComponentModel, task: string): void { - if (task === TASK_LOAD_JOB_STATE) { - this.jobState = model.getComponentState().data.get(JOB_STATE_DATA_KEY); - this._initializeNextRunDate(); - this.allowExecutionsByDeployment = ExtractJobStatusPipe.transform(this.jobState?.deployments) !== DataJobStatus.NOT_DEPLOYED; - this.cronError = CronUtil.getNextExecutionErrors(this.jobState?.config?.schedule?.scheduleCron); - - return; - } - - if (task === TASK_LOAD_JOB_DETAILS) { - this.jobDetails = model.getComponentState().data.get(JOB_DETAILS_DATA_KEY); - this._updateForm(); - - return; - } - - if (task === TASK_LOAD_JOB_EXECUTIONS) { - const executions: DataJobExecutions = model.getComponentState().data.get(JOB_EXECUTIONS_DATA_KEY); - - if (executions) { - this.dataJobsService.notifyForJobExecutions([...executions]); - - // eslint-disable-next-line @typescript-eslint/unbound-method - const runningExecution = executions.find(DataJobUtil.isJobRunningPredicate); - if (runningExecution) { - this.dataJobsService.notifyForRunningJobExecutionId(runningExecution.id); - } - } - - return; - } - - if (task === TASK_UPDATE_JOB_DESCRIPTION) { - this.toastService.show({ - type: VmwToastType.INFO, - title: `Description update completed`, - description: `Data job "${this.jobName}" description successfully updated` - }); - - this.jobDetails = model.getComponentState().data.get(JOB_DETAILS_DATA_KEY); - - this.editOperationEnded(); - - return; - } - - if (task === TASK_UPDATE_JOB_STATUS) { - this.toastService.show({ - type: VmwToastType.INFO, - title: `Status update completed`, - description: - `Data job "${this.jobName}" successfully ` + `${!this._extractJobDeployment()?.enabled ? 'enabled' : 'disabled'}` - }); - - this.jobState = model.getComponentState().data.get(JOB_STATE_DATA_KEY); - - this.editOperationEnded(); - } - } - - /** - * @inheritDoc - */ - onModelError(model: ComponentModel, task: string, newErrorRecords: ErrorRecord[]): void { - newErrorRecords.forEach((errorRecord) => { - const error = ErrorUtil.extractError(errorRecord.error); - - let errorHandlerConfig: ErrorHandlerConfig; - - switch (task) { - case TASK_LOAD_JOB_DETAILS: - this._resetJobDetails(); - break; - case TASK_LOAD_JOB_EXECUTIONS: - // No-op. - break; - case TASK_LOAD_JOB_STATE: - // No-op. - break; - case TASK_UPDATE_JOB_DESCRIPTION: - errorHandlerConfig = { - title: 'Description update failed' - }; - this.editOperationEnded(); - break; - case TASK_UPDATE_JOB_STATUS: - errorHandlerConfig = { - title: 'Status update failed' - }; - this.editOperationEnded(); - break; - default: - // No-op. - } - - this.errorHandlerService.processError(error, errorHandlerConfig); - }); - } - - /** - * @inheritDoc - */ - override ngOnInit() { - // attach listener to ErrorStore and listen for Errors change - this.errors.onChange((store) => { - // if there is record for listened error code patterns set component in error state - this.isComponentInErrorState = store.hasCodePattern(...this.listenForErrorPatterns); - }); - - super.ngOnInit(); - - this._initializeNextRunDate(); - } - - private _initialize(state: RouteState): void { - const teamParamKey = state.getData('teamParamKey'); - this.teamName = state.getParam(teamParamKey); - - if (CollectionsUtil.isNil(teamParamKey) || CollectionsUtil.isNil(this.teamName)) { - this._subscribeForImplicitTeam(); - } - - const jobParamKey = state.getData('jobParamKey'); - this.jobName = state.getParam(jobParamKey); - - this.isJobEditable = !!state.getData('editable'); - - if (this.isJobEditable) { - this.formState = this.editableFormState; - } - - if (this.dataPipelinesModuleConfig) { - this._initializePageFeatureFlags(state); - this._initializeChangeHistoryConfig(); - } - - this._subscribeForExecutions(); - - this.dataJobsService.loadJob( - this.model - .withRequestParam(TEAM_NAME_REQ_PARAM, this.teamName) - .withRequestParam(JOB_NAME_REQ_PARAM, this.jobName) - .withRequestParam(ORDER_REQ_PARAM, { - property: 'startTime', - direction: ASC - } as DataJobExecutionOrder) - ); - } - - private _subscribeForImplicitTeam(): void { - this.dataJobsService - .getNotifiedForTeamImplicitly() - .pipe(take(1)) - .subscribe((teamName) => (this.teamName = teamName)); - } - - private _extractJobDeployment(): DataJobDeployment { - if (!this.jobState?.deployments) { - return null; - } - return this.jobState?.deployments[this.jobState?.deployments.length - 1]; - } - - private _isFormSubmitEnabled(): boolean { - return !this.tmForm?.pristine && this.tmForm?.valid; - } - - private _initForm(): void { - this.tmForm = this.formBuilder.group({ - name: '', - team: '', - status: '', - description: '', - jobPythonVersion: '' - }); - } - - private _updateForm(): void { - this.tmForm.setValue({ - name: this.jobDetails.job_name, - team: this.jobDetails.team, - status: ExtractJobStatusPipe.transform(this.jobState?.deployments), - description: this.jobDetails.description, - jobPythonVersion: - this.jobState?.deployments && this.jobState?.deployments[0] ? this.jobState?.deployments[0]?.jobPythonVersion : '' - }); - } - - private _doSubmitDescriptionUpdate(): void { - const jobDetailsUpdated: DataJobDetails = { - ...this.jobDetails, - description: this.description.value as string - }; - - this.dataJobsService.updateJob( - this.model - .withRequestParam(TEAM_NAME_REQ_PARAM, jobDetailsUpdated.team) - .withRequestParam(JOB_NAME_REQ_PARAM, jobDetailsUpdated.job_name) - .withRequestParam(JOB_DETAILS_REQ_PARAM, jobDetailsUpdated), - TASK_UPDATE_JOB_DESCRIPTION + this._doSubmitDescriptionUpdate(); + } + + if (event.emittingSection === "status" && this.isStatusSubmitEnabled()) { + this._doSubmitStatusUpdate(); + } + } + + editOperationEnded() { + this.formState = new VdkFormState(FORM_STATE.CAN_EDIT); + this.canEditSection = true; + } + + loadJobExecutions() { + this.dataJobsService.loadJobExecutions(this.model); + } + + redirectToHealthStatus() { + // eslint-disable-next-line @typescript-eslint/no-floating-promises + this.router + .navigateByUrl( + StringUtil.stringFormat( + this.dataPipelinesModuleConfig.healthStatusUrl, + this.jobDetails.job_name, + ), + ) + .then(); + } + + /** + * ** Intercepts click on change history link and show confirmation. + */ + navigateToJobChangeHistory($event: MouseEvent): void { + $event.preventDefault(); + $event.stopImmediatePropagation(); + + this.urlOpenerService + .open(this.changeHistoryConfig.urlTemplate, "_blank", { + title: this.changeHistoryConfig.confirmationTitle, + messageComponent: this.changeHistoryConfig.confirmationMessageComponent, + closable: true, + optionDoNotShowFutureConfirmation: true, + confirmBtnModel: { + text: "Proceed", + iconShape: "pop-out", + iconPosition: "right", + }, + }) + .then((_value) => { + // No-op. + }) + .catch((_reason) => { + // No-op. + }); + } + + /** + * @inheritDoc + */ + onModelInit(): void { + this.routerService + .getState() + .pipe(take(1)) + .subscribe((routeState) => this._initialize(routeState)); + } + + /** + * @inheritDoc + */ + onModelLoad(model: ComponentModel, task: string): void { + if (task === TASK_LOAD_JOB_EXECUTIONS) { + this.loadingExecutions = false; + } else if (task === TASK_LOAD_JOB_DETAILS) { + this.loadingInProgress = false; + } + } + + /** + * @inheritDoc + */ + onModelChange(model: ComponentModel, task: string): void { + if (task === TASK_LOAD_JOB_STATE) { + this.jobState = model.getComponentState().data.get(JOB_STATE_DATA_KEY); + this._initializeNextRunDate(); + this.allowExecutionsByDeployment = + ExtractJobStatusPipe.transform(this.jobState?.deployments) !== + DataJobStatus.NOT_DEPLOYED; + this.cronError = CronUtil.getNextExecutionErrors( + this.jobState?.config?.schedule?.scheduleCron, + ); + + return; + } + + if (task === TASK_LOAD_JOB_DETAILS) { + this.jobDetails = model + .getComponentState() + .data.get(JOB_DETAILS_DATA_KEY); + this._updateForm(); + + return; + } + + if (task === TASK_LOAD_JOB_EXECUTIONS) { + const executions: DataJobExecutions = model + .getComponentState() + .data.get(JOB_EXECUTIONS_DATA_KEY); + + if (executions) { + this.dataJobsService.notifyForJobExecutions([...executions]); + + // eslint-disable-next-line @typescript-eslint/unbound-method + const runningExecution = executions.find( + DataJobUtil.isJobRunningPredicate, ); - } - - private _doSubmitStatusUpdate(): void { - const jobDeployment = this._extractJobDeployment(); - - if (!jobDeployment) { - console.log('Status update will not be performed for job with no deployments.'); - - return; + if (runningExecution) { + this.dataJobsService.notifyForRunningJobExecutionId( + runningExecution.id, + ); } - - const jobState: DataJob = { - ...this.jobState, - deployments: [ - { - ...this.jobState.deployments[0], - enabled: this.status.value === DataJobStatus.ENABLED - }, - ...this.jobState.deployments.slice(1) - ] - }; - - this.dataJobsService.updateJob( - this.model - .withRequestParam(TEAM_NAME_REQ_PARAM, this.jobDetails.team) - .withRequestParam(JOB_NAME_REQ_PARAM, this.jobDetails.job_name) - .withRequestParam(JOB_DEPLOYMENT_ID_REQ_PARAM, jobDeployment.id) - .withRequestParam(JOB_STATUS_REQ_PARAM, this.status.value === DataJobStatus.ENABLED) - .withRequestParam(JOB_STATE_REQ_PARAM, jobState), - TASK_UPDATE_JOB_STATUS - ); - } - - private _initializeNextRunDate(): void { - this.next = ParseEpochPipe.transform(this.jobState?.config?.schedule?.nextRunEpochSeconds); - } - - private _initializePageFeatureFlags(state: RouteState): void { - if (state.getData<'explore' | 'manage'>('context') === 'explore') { - if (this.dataPipelinesModuleConfig.exploreConfig) { - this.shouldShowTeamsSection = this.dataPipelinesModuleConfig.exploreConfig.showTeamSectionInJobDetails; - this.shouldShowChangeHistorySection = this.dataPipelinesModuleConfig.exploreConfig.showChangeHistorySectionInJobDetails; - } - } else { - if (this.dataPipelinesModuleConfig.manageConfig) { - this.shouldShowTeamsSection = this.dataPipelinesModuleConfig.manageConfig.showTeamSectionInJobDetails; - this.shouldShowChangeHistorySection = this.dataPipelinesModuleConfig.manageConfig.showChangeHistorySectionInJobDetails; - } - } - } - - private _initializeChangeHistoryConfig(): void { - if ( - !this.shouldShowChangeHistorySection || - !this.dataPipelinesModuleConfig.changeHistory || - !this.dataPipelinesModuleConfig.changeHistory.urlTemplate || - !this.dataPipelinesModuleConfig.changeHistory.confirmationTitle - ) { - return; - } - - this.changeHistoryConfig = { - ...this.dataPipelinesModuleConfig.changeHistory, - urlTemplate: CollectionsUtil.interpolateString(this.dataPipelinesModuleConfig.changeHistory.urlTemplate, { - searchValue: '%data_job_name%', - replaceValue: this.jobName - }) - }; - } - - private _subscribeForExecutions(): void { - this.subscriptions.push( - this.dataJobsService.getNotifiedForJobExecutions().subscribe((executions) => { - this.jobExecutions = executions; - }) - ); - } - - private _resetJobDetails(): void { - if (!this.jobDetails) { - this.jobDetails = {}; - } - } + } + + return; + } + + if (task === TASK_UPDATE_JOB_DESCRIPTION) { + this.toastService.show({ + type: VmwToastType.INFO, + title: `Description update completed`, + description: `Data job "${this.jobName}" description successfully updated`, + }); + + this.jobDetails = model + .getComponentState() + .data.get(JOB_DETAILS_DATA_KEY); + + this.editOperationEnded(); + + return; + } + + if (task === TASK_UPDATE_JOB_STATUS) { + this.toastService.show({ + type: VmwToastType.INFO, + title: `Status update completed`, + description: + `Data job "${this.jobName}" successfully ` + + `${!this._extractJobDeployment()?.enabled ? "enabled" : "disabled"}`, + }); + + this.jobState = model.getComponentState().data.get(JOB_STATE_DATA_KEY); + + this.editOperationEnded(); + } + } + + /** + * @inheritDoc + */ + onModelError( + model: ComponentModel, + task: string, + newErrorRecords: ErrorRecord[], + ): void { + newErrorRecords.forEach((errorRecord) => { + const error = ErrorUtil.extractError(errorRecord.error); + + let errorHandlerConfig: ErrorHandlerConfig; + + switch (task) { + case TASK_LOAD_JOB_DETAILS: + this._resetJobDetails(); + break; + case TASK_LOAD_JOB_EXECUTIONS: + // No-op. + break; + case TASK_LOAD_JOB_STATE: + // No-op. + break; + case TASK_UPDATE_JOB_DESCRIPTION: + errorHandlerConfig = { + title: "Description update failed", + }; + this.editOperationEnded(); + break; + case TASK_UPDATE_JOB_STATUS: + errorHandlerConfig = { + title: "Status update failed", + }; + this.editOperationEnded(); + break; + default: + // No-op. + } + + this.errorHandlerService.processError(error, errorHandlerConfig); + }); + } + + /** + * @inheritDoc + */ + override ngOnInit() { + // attach listener to ErrorStore and listen for Errors change + this.errors.onChange((store) => { + // if there is record for listened error code patterns set component in error state + this.isComponentInErrorState = store.hasCodePattern( + ...this.listenForErrorPatterns, + ); + }); + + super.ngOnInit(); + + this._initializeNextRunDate(); + } + + private _initialize(state: RouteState): void { + const teamParamKey = state.getData("teamParamKey"); + this.teamName = state.getParam(teamParamKey); + + if ( + CollectionsUtil.isNil(teamParamKey) || + CollectionsUtil.isNil(this.teamName) + ) { + this._subscribeForImplicitTeam(); + } + + const jobParamKey = state.getData("jobParamKey"); + this.jobName = state.getParam(jobParamKey); + + this.isJobEditable = !!state.getData("editable"); + + if (this.isJobEditable) { + this.formState = this.editableFormState; + } + + if (this.dataPipelinesModuleConfig) { + this._initializePageFeatureFlags(state); + this._initializeChangeHistoryConfig(); + } + + this._subscribeForExecutions(); + + this.dataJobsService.loadJob( + this.model + .withRequestParam(TEAM_NAME_REQ_PARAM, this.teamName) + .withRequestParam(JOB_NAME_REQ_PARAM, this.jobName) + .withRequestParam(ORDER_REQ_PARAM, { + property: "startTime", + direction: ASC, + } as DataJobExecutionOrder), + ); + } + + private _subscribeForImplicitTeam(): void { + this.dataJobsService + .getNotifiedForTeamImplicitly() + .pipe(take(1)) + .subscribe((teamName) => (this.teamName = teamName)); + } + + private _extractJobDeployment(): DataJobDeployment { + if (!this.jobState?.deployments) { + return null; + } + return this.jobState?.deployments[this.jobState?.deployments.length - 1]; + } + + private _isFormSubmitEnabled(): boolean { + return !this.tmForm?.pristine && this.tmForm?.valid; + } + + private _initForm(): void { + this.tmForm = this.formBuilder.group({ + name: "", + team: "", + status: "", + description: "", + jobPythonVersion: "", + }); + } + + private _updateForm(): void { + this.tmForm.setValue({ + name: this.jobDetails.job_name, + team: this.jobDetails.team, + status: ExtractJobStatusPipe.transform(this.jobState?.deployments), + description: this.jobDetails.description, + jobPythonVersion: + this.jobState?.deployments && this.jobState?.deployments[0] + ? this.jobState?.deployments[0]?.jobPythonVersion + : "", + }); + } + + private _doSubmitDescriptionUpdate(): void { + const jobDetailsUpdated: DataJobDetails = { + ...this.jobDetails, + description: this.description.value as string, + }; + + this.dataJobsService.updateJob( + this.model + .withRequestParam(TEAM_NAME_REQ_PARAM, jobDetailsUpdated.team) + .withRequestParam(JOB_NAME_REQ_PARAM, jobDetailsUpdated.job_name) + .withRequestParam(JOB_DETAILS_REQ_PARAM, jobDetailsUpdated), + TASK_UPDATE_JOB_DESCRIPTION, + ); + } + + private _doSubmitStatusUpdate(): void { + const jobDeployment = this._extractJobDeployment(); + + if (!jobDeployment) { + console.log( + "Status update will not be performed for job with no deployments.", + ); + + return; + } + + const jobState: DataJob = { + ...this.jobState, + deployments: [ + { + ...this.jobState.deployments[0], + enabled: this.status.value === DataJobStatus.ENABLED, + }, + ...this.jobState.deployments.slice(1), + ], + }; + + this.dataJobsService.updateJob( + this.model + .withRequestParam(TEAM_NAME_REQ_PARAM, this.jobDetails.team) + .withRequestParam(JOB_NAME_REQ_PARAM, this.jobDetails.job_name) + .withRequestParam(JOB_DEPLOYMENT_ID_REQ_PARAM, jobDeployment.id) + .withRequestParam( + JOB_STATUS_REQ_PARAM, + this.status.value === DataJobStatus.ENABLED, + ) + .withRequestParam(JOB_STATE_REQ_PARAM, jobState), + TASK_UPDATE_JOB_STATUS, + ); + } + + private _initializeNextRunDate(): void { + this.next = ParseEpochPipe.transform( + this.jobState?.config?.schedule?.nextRunEpochSeconds, + ); + } + + private _initializePageFeatureFlags(state: RouteState): void { + if (state.getData<"explore" | "manage">("context") === "explore") { + if (this.dataPipelinesModuleConfig.exploreConfig) { + this.shouldShowTeamsSection = + this.dataPipelinesModuleConfig.exploreConfig.showTeamSectionInJobDetails; + this.shouldShowChangeHistorySection = + this.dataPipelinesModuleConfig.exploreConfig.showChangeHistorySectionInJobDetails; + } + } else { + if (this.dataPipelinesModuleConfig.manageConfig) { + this.shouldShowTeamsSection = + this.dataPipelinesModuleConfig.manageConfig.showTeamSectionInJobDetails; + this.shouldShowChangeHistorySection = + this.dataPipelinesModuleConfig.manageConfig.showChangeHistorySectionInJobDetails; + } + } + } + + private _initializeChangeHistoryConfig(): void { + if ( + !this.shouldShowChangeHistorySection || + !this.dataPipelinesModuleConfig.changeHistory || + !this.dataPipelinesModuleConfig.changeHistory.urlTemplate || + !this.dataPipelinesModuleConfig.changeHistory.confirmationTitle + ) { + return; + } + + this.changeHistoryConfig = { + ...this.dataPipelinesModuleConfig.changeHistory, + urlTemplate: CollectionsUtil.interpolateString( + this.dataPipelinesModuleConfig.changeHistory.urlTemplate, + { + searchValue: "%data_job_name%", + replaceValue: this.jobName, + }, + ), + }; + } + + private _subscribeForExecutions(): void { + this.subscriptions.push( + this.dataJobsService + .getNotifiedForJobExecutions() + .subscribe((executions) => { + this.jobExecutions = executions; + }), + ); + } + + private _resetJobDetails(): void { + if (!this.jobDetails) { + this.jobDetails = {}; + } + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/index.ts index 53e6f21f80..31c4d5a788 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-job-details-page.component'; +export * from "./data-job-details-page.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/public-api.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/public-api.ts index 27de297bf0..bdbc0b3e91 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/public-api.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/details/public-api.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './index'; +export * from "./index"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/data-job-deployment-details-modal.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/data-job-deployment-details-modal.component.html index c2e81dcd3f..b9d9f6e37d 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/data-job-deployment-details-modal.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/data-job-deployment-details-modal.component.html @@ -4,88 +4,93 @@ --> -

Deployment Details

-
-
-
-
Version
-

{{ dataJobDeployment.jobVersion }}

-
-
-
Deployed by
-

{{ dataJobDeployment.deployedBy }}

-
-
-
Deployed at (UTC)
-

- {{ dataJobDeployment.deployedDate | date : "MMM d, y, hh:mm - a" : "UTC" }} -

-
-
+

Deployment Details

+
+
+
+
Version
+

{{ dataJobDeployment.jobVersion }}

+
+
+
Deployed by
+

{{ dataJobDeployment.deployedBy }}

+
+
+
Deployed at (UTC)
+

+ {{ + dataJobDeployment.deployedDate + | date + : "MMM d, y, hh:mm + a" + : "UTC" + }} +

+
+
-
-
-
Schedule cron (UTC)
-

{{ dataJobDeployment.schedule.scheduleCron }}

-
-
-
VDK version
-

{{ dataJobDeployment.vdkVersion }}

-
-
-
Python Version
-

{{ dataJobDeployment.jobPythonVersion }}

-
-
+
+
+
Schedule cron (UTC)
+

{{ dataJobDeployment.schedule.scheduleCron }}

+
+
+
VDK version
+

{{ dataJobDeployment.vdkVersion }}

+
+
+
Python Version
+

{{ dataJobDeployment.jobPythonVersion }}

+
+
-

- Resources - - -

- Learn more about resources requests and limits - - - -

-

- Learn more about each resource - - - -

- - -

+

+ Resources + + +

+ Learn more about resources requests and limits + + + +

+

+ Learn more about each resource + + + +

+ + +

-
-
-
CPU Limit
-

{{ dataJobDeployment.resources.cpuLimit }}

-
-
-
CPU Request
-

{{ dataJobDeployment.resources.cpuRequest }}

-
-
-
-
-
Memory Limit
-

{{ dataJobDeployment.resources.memoryLimit }}

-
-
-
Memory Request
-

{{ dataJobDeployment.resources.memoryRequest }}

-
-
+
+
+
CPU Limit
+

{{ dataJobDeployment.resources.cpuLimit }}

+
+
+
CPU Request
+

{{ dataJobDeployment.resources.cpuRequest }}

+
+
+
+
+
Memory Limit
+

{{ dataJobDeployment.resources.memoryLimit }}

+
+
+
Memory Request
+

{{ dataJobDeployment.resources.memoryRequest }}

+
+
diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/data-job-deployment-details-modal.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/data-job-deployment-details-modal.component.scss index 30f1d85932..17ce3e8d62 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/data-job-deployment-details-modal.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/data-job-deployment-details-modal.component.scss @@ -4,11 +4,11 @@ */ div.clr-row div { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; - p, - h6 { - margin-top: 12px; - } + p, + h6 { + margin-top: 12px; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/data-job-deployment-details-modal.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/data-job-deployment-details-modal.component.ts index d300d6b18c..854b71ab4b 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/data-job-deployment-details-modal.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/data-job-deployment-details-modal.component.ts @@ -3,27 +3,27 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { DataJobDeployment } from '../../../../../model'; +import { Component, EventEmitter, Input, Output } from "@angular/core"; +import { DataJobDeployment } from "../../../../../model"; @Component({ - selector: 'lib-data-job-deployment-details-modal', - templateUrl: './data-job-deployment-details-modal.component.html', - styleUrls: ['./data-job-deployment-details-modal.component.scss'] + selector: "lib-data-job-deployment-details-modal", + templateUrl: "./data-job-deployment-details-modal.component.html", + styleUrls: ["./data-job-deployment-details-modal.component.scss"], }) export class DataJobDeploymentDetailsModalComponent { - @Output() openModalChange = new EventEmitter(); - @Input() dataJobDeployment: DataJobDeployment; + @Output() openModalChange = new EventEmitter(); + @Input() dataJobDeployment: DataJobDeployment; - private openModalValue: boolean; + private openModalValue: boolean; - @Input() - set openModal(value) { - this.openModalValue = value; - this.openModalChange.emit(this.openModalValue); - } + @Input() + set openModal(value) { + this.openModalValue = value; + this.openModalChange.emit(this.openModalValue); + } - get openModal() { - return this.openModalValue; - } + get openModal() { + return this.openModalValue; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/index.ts index eb70151927..af25d5069f 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-deployment-details-modal/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-job-deployment-details-modal.component'; +export * from "./data-job-deployment-details-modal.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status-filter/data-job-execution-status-filter.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status-filter/data-job-execution-status-filter.component.html index d8a7a48307..b36772aefb 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status-filter/data-job-execution-status-filter.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status-filter/data-job-execution-status-filter.component.html @@ -4,22 +4,26 @@ --> - - + + diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status-filter/data-job-execution-status-filter.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status-filter/data-job-execution-status-filter.component.ts index b0897a6faa..b561ef58a2 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status-filter/data-job-execution-status-filter.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status-filter/data-job-execution-status-filter.component.ts @@ -3,122 +3,131 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; +import { + Component, + EventEmitter, + Input, + OnChanges, + Output, + SimpleChanges, +} from "@angular/core"; -import { Observable, Subject } from 'rxjs'; +import { Observable, Subject } from "rxjs"; -import { ClrDatagridFilterInterface } from '@clr/angular'; +import { ClrDatagridFilterInterface } from "@clr/angular"; -import { CollectionsUtil } from '@versatiledatakit/shared'; +import { CollectionsUtil } from "@versatiledatakit/shared"; -import { DataJobExecutionStatus } from '../../../../../model'; +import { DataJobExecutionStatus } from "../../../../../model"; -import { GridDataJobExecution } from '../model'; +import { GridDataJobExecution } from "../model"; @Component({ - selector: 'lib-data-job-execution-status-filter', - templateUrl: './data-job-execution-status-filter.component.html' + selector: "lib-data-job-execution-status-filter", + templateUrl: "./data-job-execution-status-filter.component.html", }) -export class DataJobExecutionStatusFilterComponent implements OnChanges, ClrDatagridFilterInterface { - /** - * ** Path to value (property). - */ - @Input() property: string; - - /** - * ** Value bound to {@link property}. - */ - @Input() value: string; - - /** - * ** Event emitter that emits whenever {@link value} change. - */ - @Output() valueChange = new EventEmitter(); - - allStatuses = [ - DataJobExecutionStatus.SUCCEEDED, - DataJobExecutionStatus.PLATFORM_ERROR, - DataJobExecutionStatus.USER_ERROR, - DataJobExecutionStatus.RUNNING, - DataJobExecutionStatus.SUBMITTED, - DataJobExecutionStatus.SKIPPED, - DataJobExecutionStatus.CANCELLED - ]; - - selectedStatuses: string[] = []; - - // We do not want to expose the Subject itself, but the Observable which is read-only - get changes(): Observable { - return this._changesSubject.asObservable(); +export class DataJobExecutionStatusFilterComponent + implements OnChanges, ClrDatagridFilterInterface +{ + /** + * ** Path to value (property). + */ + @Input() property: string; + + /** + * ** Value bound to {@link property}. + */ + @Input() value: string; + + /** + * ** Event emitter that emits whenever {@link value} change. + */ + @Output() valueChange = new EventEmitter(); + + allStatuses = [ + DataJobExecutionStatus.SUCCEEDED, + DataJobExecutionStatus.PLATFORM_ERROR, + DataJobExecutionStatus.USER_ERROR, + DataJobExecutionStatus.RUNNING, + DataJobExecutionStatus.SUBMITTED, + DataJobExecutionStatus.SKIPPED, + DataJobExecutionStatus.CANCELLED, + ]; + + selectedStatuses: string[] = []; + + // We do not want to expose the Subject itself, but the Observable which is read-only + get changes(): Observable { + return this._changesSubject.asObservable(); + } + + private _changesSubject = new Subject(); + + isActive(): boolean { + return this.selectedStatuses.length > 0; + } + + accepts(item: GridDataJobExecution): boolean { + return this.selectedStatuses.indexOf(item.status) > -1; + } + + toggleCheckbox($event: Event) { + const checkbox = $event.target as HTMLInputElement; + + if (checkbox.checked) { + this.selectedStatuses.push(checkbox.value); + } else { + const statusToRemoveIndex = this.selectedStatuses.indexOf(checkbox.value); + if (statusToRemoveIndex > -1) { + this.selectedStatuses.splice(statusToRemoveIndex, 1); + } } - private _changesSubject = new Subject(); + this._updateValue(true); + } - isActive(): boolean { - return this.selectedStatuses.length > 0; + /** + * @inheritDoc + */ + ngOnChanges(changes: SimpleChanges): void { + if (changes["value"]) { + this._refreshValue(); } + } - accepts(item: GridDataJobExecution): boolean { - return this.selectedStatuses.indexOf(item.status) > -1; - } - - toggleCheckbox($event: Event) { - const checkbox = $event.target as HTMLInputElement; + private _refreshValue(): void { + const selectedTypes: string[] = []; - if (checkbox.checked) { - this.selectedStatuses.push(checkbox.value); - } else { - const statusToRemoveIndex = this.selectedStatuses.indexOf(checkbox.value); - if (statusToRemoveIndex > -1) { - this.selectedStatuses.splice(statusToRemoveIndex, 1); - } + if (CollectionsUtil.isStringWithContent(this.value)) { + const checkedValues = this._deserializeStatuses(); + for (const checkedValue of checkedValues) { + if (this.allStatuses.includes(checkedValue)) { + selectedTypes.push(checkedValue); } - - this._updateValue(true); + } } - /** - * @inheritDoc - */ - ngOnChanges(changes: SimpleChanges): void { - if (changes['value']) { - this._refreshValue(); - } - } + this.selectedStatuses = selectedTypes; - private _refreshValue(): void { - const selectedTypes: string[] = []; + this._updateValue(); + } - if (CollectionsUtil.isStringWithContent(this.value)) { - const checkedValues = this._deserializeStatuses(); - for (const checkedValue of checkedValues) { - if (this.allStatuses.includes(checkedValue)) { - selectedTypes.push(checkedValue); - } - } - } + private _updateValue(notifyChange = false): void { + const serializedValue = this._serializeStatuses(); - this.selectedStatuses = selectedTypes; + this.value = serializedValue; + this._changesSubject.next(serializedValue); - this._updateValue(); + if (notifyChange) { + this.valueChange.next(serializedValue); } + } - private _updateValue(notifyChange = false): void { - const serializedValue = this._serializeStatuses(); - - this.value = serializedValue; - this._changesSubject.next(serializedValue); + private _serializeStatuses(): string { + return this.selectedStatuses.join(",").toLowerCase(); + } - if (notifyChange) { - this.valueChange.next(serializedValue); - } - } - - private _serializeStatuses(): string { - return this.selectedStatuses.join(',').toLowerCase(); - } - - private _deserializeStatuses(): DataJobExecutionStatus[] { - return this.value.toUpperCase().split(',') as DataJobExecutionStatus[]; - } + private _deserializeStatuses(): DataJobExecutionStatus[] { + return this.value.toUpperCase().split(",") as DataJobExecutionStatus[]; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status-filter/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status-filter/index.ts index 410b6df2c4..d2d3bc7cee 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status-filter/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status-filter/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-job-execution-status-filter.component'; +export * from "./data-job-execution-status-filter.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/data-job-execution-status.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/data-job-execution-status.component.html index 751efb4031..3a595c6f03 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/data-job-execution-status.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/data-job-execution-status.component.html @@ -4,41 +4,45 @@ --> -
+ + {{ jobMessage }} + + +
+
+ {{ executionStatusProperties.text }} + +
-
- {{ executionStatusProperties.text }} - - -
+ details + +
diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/data-job-execution-status.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/data-job-execution-status.component.scss index 7f0b1219ba..c94653f59c 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/data-job-execution-status.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/data-job-execution-status.component.scss @@ -4,29 +4,29 @@ */ .job-execution-status__container { - display: flex; - align-items: baseline; - flex-direction: column; + display: flex; + align-items: baseline; + flex-direction: column; - .job-execution-status__text { - margin-left: 0.25rem; - } + .job-execution-status__text { + margin-left: 0.25rem; + } - .job-execution-status__btn { - padding: 0; - margin-left: 5px; - text-transform: lowercase; - font-size: 12px; - outline-color: transparent; - } + .job-execution-status__btn { + padding: 0; + margin-left: 5px; + text-transform: lowercase; + font-size: 12px; + outline-color: transparent; + } } :host { - display: block; - width: 100%; - height: 100%; + display: block; + width: 100%; + height: 100%; } .job-execution-signpost { - cursor: auto; + cursor: auto; } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/data-job-execution-status.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/data-job-execution-status.component.ts index 84b75d25f9..2f1bc60108 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/data-job-execution-status.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/data-job-execution-status.component.ts @@ -3,93 +3,101 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Component, Input } from '@angular/core'; +import { Component, Input } from "@angular/core"; -import { DataJobExecutionStatus } from '../../../../../model'; +import { DataJobExecutionStatus } from "../../../../../model"; type StatusPropertiesMapping = { - shape: string; - status: string; - direction: string; - text: string; + shape: string; + status: string; + direction: string; + text: string; }; @Component({ - selector: 'lib-data-job-execution-status', - templateUrl: './data-job-execution-status.component.html', - styleUrls: ['./data-job-execution-status.component.scss'] + selector: "lib-data-job-execution-status", + templateUrl: "./data-job-execution-status.component.html", + styleUrls: ["./data-job-execution-status.component.scss"], }) export class DataJobExecutionStatusComponent { - @Input() jobStatus: DataJobExecutionStatus; - @Input() jobMessage = ''; - @Input() showErrorMessage = false; - clrOpen = false; + @Input() jobStatus: DataJobExecutionStatus; + @Input() jobMessage = ""; + @Input() showErrorMessage = false; + clrOpen = false; - statusPropertiesMapping: { [key: string]: StatusPropertiesMapping } = { - [DataJobExecutionStatus.SUBMITTED]: { - shape: 'hourglass', - status: '', - direction: '', - text: 'Submitted' - }, - [DataJobExecutionStatus.RUNNING]: { - shape: 'play', - status: '', - direction: '', - text: 'Running' - }, - [DataJobExecutionStatus.SUCCEEDED]: { - shape: 'success-standard', - status: 'is-success', - direction: '', - text: 'Success' - }, - [DataJobExecutionStatus.CANCELLED]: { - shape: 'ban', - status: '', - direction: '', - text: 'Canceled' - }, - [DataJobExecutionStatus.SKIPPED]: { - shape: 'angle-double', - status: '', - direction: 'right', - text: 'Skipped' - }, - [DataJobExecutionStatus.USER_ERROR]: { - shape: 'error-standard', - status: 'is-danger', - direction: '', - text: 'User Error' - }, - [DataJobExecutionStatus.PLATFORM_ERROR]: { - shape: 'error-standard', - status: 'is-warning', - direction: '', - text: 'Platform Error' - }, - [DataJobExecutionStatus.FAILED]: { - shape: 'error-standard', - status: 'is-danger', - direction: '', - text: 'Error' - } - }; + statusPropertiesMapping: { [key: string]: StatusPropertiesMapping } = { + [DataJobExecutionStatus.SUBMITTED]: { + shape: "hourglass", + status: "", + direction: "", + text: "Submitted", + }, + [DataJobExecutionStatus.RUNNING]: { + shape: "play", + status: "", + direction: "", + text: "Running", + }, + [DataJobExecutionStatus.SUCCEEDED]: { + shape: "success-standard", + status: "is-success", + direction: "", + text: "Success", + }, + [DataJobExecutionStatus.CANCELLED]: { + shape: "ban", + status: "", + direction: "", + text: "Canceled", + }, + [DataJobExecutionStatus.SKIPPED]: { + shape: "angle-double", + status: "", + direction: "right", + text: "Skipped", + }, + [DataJobExecutionStatus.USER_ERROR]: { + shape: "error-standard", + status: "is-danger", + direction: "", + text: "User Error", + }, + [DataJobExecutionStatus.PLATFORM_ERROR]: { + shape: "error-standard", + status: "is-warning", + direction: "", + text: "Platform Error", + }, + [DataJobExecutionStatus.FAILED]: { + shape: "error-standard", + status: "is-danger", + direction: "", + text: "Error", + }, + }; - get executionStatusProperties(): StatusPropertiesMapping { - return this.statusPropertiesMapping[this.jobStatus] ?? ({} as StatusPropertiesMapping); - } + get executionStatusProperties(): StatusPropertiesMapping { + return ( + this.statusPropertiesMapping[this.jobStatus] ?? + ({} as StatusPropertiesMapping) + ); + } - isJobStatusSuitableForMessageTooltip(): boolean { - return ( - this.jobStatus === DataJobExecutionStatus.PLATFORM_ERROR || - this.jobStatus === DataJobExecutionStatus.USER_ERROR || - this.jobStatus === DataJobExecutionStatus.SKIPPED - ); - } + isJobStatusSuitableForMessageTooltip(): boolean { + return ( + this.jobStatus === DataJobExecutionStatus.PLATFORM_ERROR || + this.jobStatus === DataJobExecutionStatus.USER_ERROR || + this.jobStatus === DataJobExecutionStatus.SKIPPED + ); + } - isJobMessageDifferentFromStatus(): boolean { - const message = this.jobMessage?.toLowerCase(); - return message !== 'user error' && message !== 'platform error' && message !== 'skipped' && message !== ''; - } + isJobMessageDifferentFromStatus(): boolean { + const message = this.jobMessage?.toLowerCase(); + return ( + message !== "user error" && + message !== "platform error" && + message !== "skipped" && + message !== "" + ); + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/index.ts index 29df82188c..2d734a7caf 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-status/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-job-execution-status.component'; +export * from "./data-job-execution-status.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type-filter/data-job-execution-type-filter.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type-filter/data-job-execution-type-filter.component.html index 12b8297a82..273326d9d8 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type-filter/data-job-execution-type-filter.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type-filter/data-job-execution-type-filter.component.html @@ -4,20 +4,24 @@ --> - + - + diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type-filter/data-job-execution-type-filter.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type-filter/data-job-execution-type-filter.component.ts index 61e8321531..39b82c1f30 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type-filter/data-job-execution-type-filter.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type-filter/data-job-execution-type-filter.component.ts @@ -3,113 +3,122 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; +import { + Component, + EventEmitter, + Input, + OnChanges, + Output, + SimpleChanges, +} from "@angular/core"; -import { Observable, Subject } from 'rxjs'; +import { Observable, Subject } from "rxjs"; -import { ClrDatagridFilterInterface } from '@clr/angular'; +import { ClrDatagridFilterInterface } from "@clr/angular"; -import { CollectionsUtil } from '@versatiledatakit/shared'; +import { CollectionsUtil } from "@versatiledatakit/shared"; -import { DataJobExecutionType } from '../../../../../model'; +import { DataJobExecutionType } from "../../../../../model"; -import { GridDataJobExecution } from '../model/data-job-execution'; +import { GridDataJobExecution } from "../model/data-job-execution"; @Component({ - selector: 'lib-data-job-execution-type-filter', - templateUrl: './data-job-execution-type-filter.component.html' + selector: "lib-data-job-execution-type-filter", + templateUrl: "./data-job-execution-type-filter.component.html", }) -export class DataJobExecutionTypeFilterComponent implements OnChanges, ClrDatagridFilterInterface { - /** - * ** Path to value (property). - */ - @Input() property: string; - - /** - * ** Value bound to {@link property}. - */ - @Input() value: string; - - /** - * ** Event emitter that emits whenever {@link value} change. - */ - @Output() valueChange = new EventEmitter(); - - allTypes = [DataJobExecutionType.MANUAL, DataJobExecutionType.SCHEDULED]; - selectedTypes: string[] = []; - - // We do not want to expose the Subject itself, but the Observable which is read-only - get changes(): Observable { - return this._changesSubject.asObservable(); +export class DataJobExecutionTypeFilterComponent + implements OnChanges, ClrDatagridFilterInterface +{ + /** + * ** Path to value (property). + */ + @Input() property: string; + + /** + * ** Value bound to {@link property}. + */ + @Input() value: string; + + /** + * ** Event emitter that emits whenever {@link value} change. + */ + @Output() valueChange = new EventEmitter(); + + allTypes = [DataJobExecutionType.MANUAL, DataJobExecutionType.SCHEDULED]; + selectedTypes: string[] = []; + + // We do not want to expose the Subject itself, but the Observable which is read-only + get changes(): Observable { + return this._changesSubject.asObservable(); + } + + private _changesSubject = new Subject(); + + isActive(): boolean { + return this.selectedTypes.length > 0; + } + + accepts(item: GridDataJobExecution): boolean { + return this.selectedTypes.indexOf(item.type) > -1; + } + + toggleCheckbox(event: Event) { + const checkbox = event.target as HTMLInputElement; + + if (checkbox.checked) { + this.selectedTypes.push(checkbox.value); + } else { + const statusToRemoveIndex = this.selectedTypes.indexOf(checkbox.value); + if (statusToRemoveIndex > -1) { + this.selectedTypes.splice(statusToRemoveIndex, 1); + } } - private _changesSubject = new Subject(); + this._updateValue(true); + } - isActive(): boolean { - return this.selectedTypes.length > 0; + /** + * @inheritDoc + */ + ngOnChanges(changes: SimpleChanges): void { + if (changes["value"]) { + this._refreshValue(); } + } - accepts(item: GridDataJobExecution): boolean { - return this.selectedTypes.indexOf(item.type) > -1; - } - - toggleCheckbox(event: Event) { - const checkbox = event.target as HTMLInputElement; + private _refreshValue(): void { + const selectedTypes: string[] = []; - if (checkbox.checked) { - this.selectedTypes.push(checkbox.value); - } else { - const statusToRemoveIndex = this.selectedTypes.indexOf(checkbox.value); - if (statusToRemoveIndex > -1) { - this.selectedTypes.splice(statusToRemoveIndex, 1); - } + if (CollectionsUtil.isStringWithContent(this.value)) { + const checkedValues = this._deserializeTypes(); + for (const checkedValue of checkedValues) { + if (this.allTypes.includes(checkedValue)) { + selectedTypes.push(checkedValue); } - - this._updateValue(true); + } } - /** - * @inheritDoc - */ - ngOnChanges(changes: SimpleChanges): void { - if (changes['value']) { - this._refreshValue(); - } - } + this.selectedTypes = selectedTypes; - private _refreshValue(): void { - const selectedTypes: string[] = []; + this._updateValue(); + } - if (CollectionsUtil.isStringWithContent(this.value)) { - const checkedValues = this._deserializeTypes(); - for (const checkedValue of checkedValues) { - if (this.allTypes.includes(checkedValue)) { - selectedTypes.push(checkedValue); - } - } - } + private _updateValue(notifyChange = false): void { + const serializedValue = this._serializeTypes(); - this.selectedTypes = selectedTypes; + this.value = serializedValue; + this._changesSubject.next(serializedValue); - this._updateValue(); + if (notifyChange) { + this.valueChange.next(serializedValue); } + } - private _updateValue(notifyChange = false): void { - const serializedValue = this._serializeTypes(); - - this.value = serializedValue; - this._changesSubject.next(serializedValue); + private _serializeTypes(): string { + return this.selectedTypes.join(",").toLowerCase(); + } - if (notifyChange) { - this.valueChange.next(serializedValue); - } - } - - private _serializeTypes(): string { - return this.selectedTypes.join(',').toLowerCase(); - } - - private _deserializeTypes(): DataJobExecutionType[] { - return this.value.toUpperCase().split(',') as DataJobExecutionType[]; - } + private _deserializeTypes(): DataJobExecutionType[] { + return this.value.toUpperCase().split(",") as DataJobExecutionType[]; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type-filter/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type-filter/index.ts index 6d48e89a06..a2168b17aa 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type-filter/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type-filter/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-job-execution-type-filter.component'; +export * from "./data-job-execution-type-filter.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type/data-job-execution-type.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type/data-job-execution-type.component.html index c16e4efbd5..d05d6b3947 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type/data-job-execution-type.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type/data-job-execution-type.component.html @@ -4,15 +4,15 @@ --> - + diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type/data-job-execution-type.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type/data-job-execution-type.component.ts index 8e75d68ee0..02158ed24f 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type/data-job-execution-type.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type/data-job-execution-type.component.ts @@ -3,28 +3,28 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Component, Input } from '@angular/core'; +import { Component, Input } from "@angular/core"; -import { DataJobExecutionType } from '../../../../../model'; +import { DataJobExecutionType } from "../../../../../model"; -import { GridDataJobExecution } from '../model/data-job-execution'; +import { GridDataJobExecution } from "../model/data-job-execution"; @Component({ - selector: 'lib-data-job-execution-type', - templateUrl: './data-job-execution-type.component.html' + selector: "lib-data-job-execution-type", + templateUrl: "./data-job-execution-type.component.html", }) export class DataJobExecutionTypeComponent { - @Input() jobExecution: GridDataJobExecution; + @Input() jobExecution: GridDataJobExecution; - executionTypePropertiesMapping = { - [DataJobExecutionType.MANUAL]: { - shape: 'cursor-hand-open', - status: 'is-info' - }, - [DataJobExecutionType.SCHEDULED]: { shape: 'clock', status: '' } - }; + executionTypePropertiesMapping = { + [DataJobExecutionType.MANUAL]: { + shape: "cursor-hand-open", + status: "is-info", + }, + [DataJobExecutionType.SCHEDULED]: { shape: "clock", status: "" }, + }; - get executionTypeProperties() { - return this.executionTypePropertiesMapping[this.jobExecution.type]; - } + get executionTypeProperties() { + return this.executionTypePropertiesMapping[this.jobExecution.type]; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type/index.ts index 107d5d1540..0c26e44d20 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-execution-type/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-job-execution-type.component'; +export * from "./data-job-execution-type.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/date/execution-date.comparator.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/date/execution-date.comparator.spec.ts index 15dec71f89..06cf7ee5f2 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/date/execution-date.comparator.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/date/execution-date.comparator.spec.ts @@ -3,99 +3,117 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { DatePipe } from '@angular/common'; - -import { TestBed } from '@angular/core/testing'; - -import { DATA_PIPELINES_DATE_TIME_FORMAT } from '../../../../../../../model'; - -import { GridDataJobExecution } from '../../../model'; - -import { ExecutionDateComparator } from './execution-date.comparator'; - -describe('ExecutionDateComparator', () => { - let datePipe: DatePipe; - let dataJobExecutions: GridDataJobExecution[]; - - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [DatePipe] - }); - - datePipe = TestBed.inject(DatePipe); - - const aStartTime = new Date(); - const bStartTime = new Date(aStartTime.getTime() + 100); - const aEndTime = new Date(); - const bEndTime = new Date(aEndTime.getTime() + 110); - - dataJobExecutions = [ - { - id: 'aJob', - startTimeFormatted: datePipe.transform(aStartTime, DATA_PIPELINES_DATE_TIME_FORMAT), - startTime: aStartTime.toISOString(), - endTimeFormatted: datePipe.transform(aEndTime, DATA_PIPELINES_DATE_TIME_FORMAT), - endTime: aEndTime.toISOString(), - duration: '100', - jobVersion: '' - }, - { - id: 'bJob', - startTimeFormatted: datePipe.transform(bStartTime, DATA_PIPELINES_DATE_TIME_FORMAT), - startTime: bStartTime.toISOString(), - endTimeFormatted: datePipe.transform(bEndTime, DATA_PIPELINES_DATE_TIME_FORMAT), - endTime: bEndTime.toISOString(), - duration: '110', - jobVersion: '' - } - ]; - }); +import { DatePipe } from "@angular/common"; - describe('Properties::', () => { - describe('|property|', () => { - it('should verify value', () => { - // Given - const instance = new ExecutionDateComparator('endTime', 'ASC'); - - // Then - expect(instance.property).toEqual('endTime'); - }); - }); - - describe('|direction|', () => { - it('should verify value', () => { - // Given - const instance = new ExecutionDateComparator('startTime', 'ASC'); - - // Then - expect(instance.direction).toEqual('ASC'); - }); - }); - }); +import { TestBed } from "@angular/core/testing"; - describe('Methods::', () => { - describe('|compare|', () => { - it('should verify will return -100 because of ascending sort', () => { - // Given - const instance = new ExecutionDateComparator('startTime', 'ASC'); +import { DATA_PIPELINES_DATE_TIME_FORMAT } from "../../../../../../../model"; - // When - const res = instance.compare(dataJobExecutions[0], dataJobExecutions[1]); +import { GridDataJobExecution } from "../../../model"; - // Then - expect(res).toEqual(-100); - }); +import { ExecutionDateComparator } from "./execution-date.comparator"; - it('should verify will return 110 because of descending sort', () => { - // Given - const instance = new ExecutionDateComparator('endTime', 'DESC'); +describe("ExecutionDateComparator", () => { + let datePipe: DatePipe; + let dataJobExecutions: GridDataJobExecution[]; - // When - const res = instance.compare(dataJobExecutions[0], dataJobExecutions[1]); + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [DatePipe], + }); - // Then - expect(res).toEqual(110); - }); - }); + datePipe = TestBed.inject(DatePipe); + + const aStartTime = new Date(); + const bStartTime = new Date(aStartTime.getTime() + 100); + const aEndTime = new Date(); + const bEndTime = new Date(aEndTime.getTime() + 110); + + dataJobExecutions = [ + { + id: "aJob", + startTimeFormatted: datePipe.transform( + aStartTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + startTime: aStartTime.toISOString(), + endTimeFormatted: datePipe.transform( + aEndTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + endTime: aEndTime.toISOString(), + duration: "100", + jobVersion: "", + }, + { + id: "bJob", + startTimeFormatted: datePipe.transform( + bStartTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + startTime: bStartTime.toISOString(), + endTimeFormatted: datePipe.transform( + bEndTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + endTime: bEndTime.toISOString(), + duration: "110", + jobVersion: "", + }, + ]; + }); + + describe("Properties::", () => { + describe("|property|", () => { + it("should verify value", () => { + // Given + const instance = new ExecutionDateComparator("endTime", "ASC"); + + // Then + expect(instance.property).toEqual("endTime"); + }); + }); + + describe("|direction|", () => { + it("should verify value", () => { + // Given + const instance = new ExecutionDateComparator("startTime", "ASC"); + + // Then + expect(instance.direction).toEqual("ASC"); + }); + }); + }); + + describe("Methods::", () => { + describe("|compare|", () => { + it("should verify will return -100 because of ascending sort", () => { + // Given + const instance = new ExecutionDateComparator("startTime", "ASC"); + + // When + const res = instance.compare( + dataJobExecutions[0], + dataJobExecutions[1], + ); + + // Then + expect(res).toEqual(-100); + }); + + it("should verify will return 110 because of descending sort", () => { + // Given + const instance = new ExecutionDateComparator("endTime", "DESC"); + + // When + const res = instance.compare( + dataJobExecutions[0], + dataJobExecutions[1], + ); + + // Then + expect(res).toEqual(110); + }); }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/date/execution-date.comparator.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/date/execution-date.comparator.ts index f7de694b87..6e7bc4ae3e 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/date/execution-date.comparator.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/date/execution-date.comparator.ts @@ -3,41 +3,47 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { get } from 'lodash'; +import { get } from "lodash"; -import { Comparator } from '@versatiledatakit/shared'; +import { Comparator } from "@versatiledatakit/shared"; -import { GridDataJobExecution } from '../../../model/data-job-execution'; +import { GridDataJobExecution } from "../../../model/data-job-execution"; export class ExecutionDateComparator implements Comparator { - /** - * ** Property path to value from GridDataJobExecution object. - */ - public readonly property: keyof GridDataJobExecution; - - /** - * ** Sort direction. - */ - public readonly direction: 'ASC' | 'DESC'; - - /** - * ** Constructor. - */ - constructor(property: keyof GridDataJobExecution, direction: 'ASC' | 'DESC') { - this.property = property; - this.direction = direction; - } - - /** - * @inheritDoc - */ - compare(exec1: GridDataJobExecution, exec2: GridDataJobExecution): number { - const value1 = get(exec1, this.property) as string; - const value2 = get(exec2, this.property) as string; - - const date1 = value1 ? Date.parse(value1) : Date.now(); - const date2 = value2 ? Date.parse(value2) : Date.now(); - - return this.direction === 'ASC' ? date1 - date2 : date2 - date1; - } + /** + * ** Property path to value from GridDataJobExecution object. + */ + public readonly property: keyof GridDataJobExecution; + + /** + * ** Sort direction. + */ + public readonly direction: "ASC" | "DESC"; + + /** + * ** Constructor. + */ + constructor(property: keyof GridDataJobExecution, direction: "ASC" | "DESC") { + this.property = property; + this.direction = direction; + } + + /** + * @inheritDoc + */ + compare(exec1: GridDataJobExecution, exec2: GridDataJobExecution): number { + const value1 = get( + exec1, + this.property, + ) as string; + const value2 = get( + exec2, + this.property, + ) as string; + + const date1 = value1 ? Date.parse(value1) : Date.now(); + const date2 = value2 ? Date.parse(value2) : Date.now(); + + return this.direction === "ASC" ? date1 - date2 : date2 - date1; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/date/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/date/index.ts index 97e38c6d3a..4d230fac89 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/date/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/date/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './execution-date.comparator'; +export * from "./execution-date.comparator"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/default/execution-default.comparator.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/default/execution-default.comparator.spec.ts index a8b51425df..d31fc31532 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/default/execution-default.comparator.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/default/execution-default.comparator.spec.ts @@ -3,134 +3,164 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { DatePipe } from '@angular/common'; - -import { TestBed } from '@angular/core/testing'; - -import { DATA_PIPELINES_DATE_TIME_FORMAT } from '../../../../../../../model'; - -import { GridDataJobExecution } from '../../../model'; - -import { ExecutionDefaultComparator } from './execution-default.comparator'; - -describe('ExecutionDefaultComparator', () => { - let datePipe: DatePipe; - let dataJobExecutions: GridDataJobExecution[]; - - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [DatePipe] - }); - - datePipe = TestBed.inject(DatePipe); - - const aStartTime = new Date(); - const aEndTime = new Date(aStartTime.getTime() + 100); - const bStartTime = new Date(); - const bEndTime = new Date(bStartTime.getTime() + 110); - - dataJobExecutions = [ - { - id: 'aJob', - startTimeFormatted: datePipe.transform(aStartTime, DATA_PIPELINES_DATE_TIME_FORMAT), - startTime: aStartTime.toISOString(), - endTimeFormatted: datePipe.transform(aEndTime, DATA_PIPELINES_DATE_TIME_FORMAT), - endTime: aEndTime.toISOString(), - duration: '100', - jobVersion: 'version-10' - }, - { - id: 'bJob', - startTimeFormatted: datePipe.transform(bStartTime, DATA_PIPELINES_DATE_TIME_FORMAT), - startTime: bStartTime.toISOString(), - endTimeFormatted: datePipe.transform(bEndTime, DATA_PIPELINES_DATE_TIME_FORMAT), - endTime: bEndTime.toISOString(), - duration: '110', - jobVersion: 'version-11' - } - ]; - }); - - describe('Properties::', () => { - describe('|direction|', () => { - it('should verify value', () => { - // Given - const instance = new ExecutionDefaultComparator('jobVersion', 'ASC'); - - // Then - expect(instance.property).toEqual('jobVersion'); - expect(instance.direction).toEqual('ASC'); - }); - }); - }); - - describe('Methods::', () => { - describe('|compare|', () => { - it('should verify will return -1 because of ascending sort', () => { - // Given - const instance = new ExecutionDefaultComparator('jobVersion', 'ASC'); - - // When - const res = instance.compare(dataJobExecutions[0], dataJobExecutions[1]); - - // Then - expect(res).toEqual(-1); - }); - - it('should verify will return 1 because of ascending sort', () => { - // Given - const instance = new ExecutionDefaultComparator('endTime', 'ASC'); - - // When - const res = instance.compare(dataJobExecutions[1], dataJobExecutions[0]); +import { DatePipe } from "@angular/common"; - // Then - expect(res).toEqual(1); - }); +import { TestBed } from "@angular/core/testing"; - it('should verify will return 1 because of descending sort', () => { - // Given - const instance = new ExecutionDefaultComparator('jobVersion', 'DESC'); +import { DATA_PIPELINES_DATE_TIME_FORMAT } from "../../../../../../../model"; - // When - const res = instance.compare(dataJobExecutions[0], dataJobExecutions[1]); +import { GridDataJobExecution } from "../../../model"; - // Then - expect(res).toEqual(1); - }); +import { ExecutionDefaultComparator } from "./execution-default.comparator"; - it('should verify will return -1 because of descending sort', () => { - // Given - const instance = new ExecutionDefaultComparator('endTime', 'DESC'); +describe("ExecutionDefaultComparator", () => { + let datePipe: DatePipe; + let dataJobExecutions: GridDataJobExecution[]; - // When - const res = instance.compare(dataJobExecutions[1], dataJobExecutions[0]); - - // Then - expect(res).toEqual(-1); - }); - - it('should verify will return 0 because of ascending sort', () => { - // Given - const instance = new ExecutionDefaultComparator('startTime', 'ASC'); - - // When - const res = instance.compare(dataJobExecutions[0], dataJobExecutions[1]); - - // Then - expect(res).toEqual(-0); - }); - - it('should verify will return 0 because of descending sort', () => { - // Given - const instance = new ExecutionDefaultComparator('startTime', 'DESC'); - - // When - const res = instance.compare(dataJobExecutions[0], dataJobExecutions[1]); + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [DatePipe], + }); - // Then - expect(res).toEqual(0); - }); - }); + datePipe = TestBed.inject(DatePipe); + + const aStartTime = new Date(); + const aEndTime = new Date(aStartTime.getTime() + 100); + const bStartTime = new Date(); + const bEndTime = new Date(bStartTime.getTime() + 110); + + dataJobExecutions = [ + { + id: "aJob", + startTimeFormatted: datePipe.transform( + aStartTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + startTime: aStartTime.toISOString(), + endTimeFormatted: datePipe.transform( + aEndTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + endTime: aEndTime.toISOString(), + duration: "100", + jobVersion: "version-10", + }, + { + id: "bJob", + startTimeFormatted: datePipe.transform( + bStartTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + startTime: bStartTime.toISOString(), + endTimeFormatted: datePipe.transform( + bEndTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + endTime: bEndTime.toISOString(), + duration: "110", + jobVersion: "version-11", + }, + ]; + }); + + describe("Properties::", () => { + describe("|direction|", () => { + it("should verify value", () => { + // Given + const instance = new ExecutionDefaultComparator("jobVersion", "ASC"); + + // Then + expect(instance.property).toEqual("jobVersion"); + expect(instance.direction).toEqual("ASC"); + }); + }); + }); + + describe("Methods::", () => { + describe("|compare|", () => { + it("should verify will return -1 because of ascending sort", () => { + // Given + const instance = new ExecutionDefaultComparator("jobVersion", "ASC"); + + // When + const res = instance.compare( + dataJobExecutions[0], + dataJobExecutions[1], + ); + + // Then + expect(res).toEqual(-1); + }); + + it("should verify will return 1 because of ascending sort", () => { + // Given + const instance = new ExecutionDefaultComparator("endTime", "ASC"); + + // When + const res = instance.compare( + dataJobExecutions[1], + dataJobExecutions[0], + ); + + // Then + expect(res).toEqual(1); + }); + + it("should verify will return 1 because of descending sort", () => { + // Given + const instance = new ExecutionDefaultComparator("jobVersion", "DESC"); + + // When + const res = instance.compare( + dataJobExecutions[0], + dataJobExecutions[1], + ); + + // Then + expect(res).toEqual(1); + }); + + it("should verify will return -1 because of descending sort", () => { + // Given + const instance = new ExecutionDefaultComparator("endTime", "DESC"); + + // When + const res = instance.compare( + dataJobExecutions[1], + dataJobExecutions[0], + ); + + // Then + expect(res).toEqual(-1); + }); + + it("should verify will return 0 because of ascending sort", () => { + // Given + const instance = new ExecutionDefaultComparator("startTime", "ASC"); + + // When + const res = instance.compare( + dataJobExecutions[0], + dataJobExecutions[1], + ); + + // Then + expect(res).toEqual(-0); + }); + + it("should verify will return 0 because of descending sort", () => { + // Given + const instance = new ExecutionDefaultComparator("startTime", "DESC"); + + // When + const res = instance.compare( + dataJobExecutions[0], + dataJobExecutions[1], + ); + + // Then + expect(res).toEqual(0); + }); }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/default/execution-default.comparator.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/default/execution-default.comparator.ts index 15005aa9c0..cccc51b34a 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/default/execution-default.comparator.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/default/execution-default.comparator.ts @@ -3,42 +3,48 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { get } from 'lodash'; +import { get } from "lodash"; -import { Comparator } from '@versatiledatakit/shared'; +import { Comparator } from "@versatiledatakit/shared"; -import { GridDataJobExecution } from '../../../model/data-job-execution'; +import { GridDataJobExecution } from "../../../model/data-job-execution"; /** * ** Execution default comparator. */ export class ExecutionDefaultComparator implements Comparator { - /** - * ** Property path to value from GridDataJobExecution object. - */ - public readonly property: keyof GridDataJobExecution; - - /** - * ** Sort direction. - */ - public readonly direction: 'ASC' | 'DESC'; - - /** - * ** Constructor. - */ - constructor(property: keyof GridDataJobExecution, direction: 'ASC' | 'DESC') { - this.property = property; - this.direction = direction; - } - - /** - * @inheritDoc - */ - compare(exec1: GridDataJobExecution, exec2: GridDataJobExecution) { - const value1 = get(exec1, this.property); - const value2 = get(exec2, this.property); - const directionModifier = this.direction === 'DESC' ? 1 : -1; - - return (value1 > value2 ? -1 : value2 > value1 ? 1 : 0) * directionModifier; - } + /** + * ** Property path to value from GridDataJobExecution object. + */ + public readonly property: keyof GridDataJobExecution; + + /** + * ** Sort direction. + */ + public readonly direction: "ASC" | "DESC"; + + /** + * ** Constructor. + */ + constructor(property: keyof GridDataJobExecution, direction: "ASC" | "DESC") { + this.property = property; + this.direction = direction; + } + + /** + * @inheritDoc + */ + compare(exec1: GridDataJobExecution, exec2: GridDataJobExecution) { + const value1 = get( + exec1, + this.property, + ); + const value2 = get( + exec2, + this.property, + ); + const directionModifier = this.direction === "DESC" ? 1 : -1; + + return (value1 > value2 ? -1 : value2 > value1 ? 1 : 0) * directionModifier; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/default/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/default/index.ts index e0ce93af42..4ae298064a 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/default/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/default/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './execution-default.comparator'; +export * from "./execution-default.comparator"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/duration/execution-duration.comparator.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/duration/execution-duration.comparator.spec.ts index c47e0e4d30..2a5535f4c0 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/duration/execution-duration.comparator.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/duration/execution-duration.comparator.spec.ts @@ -3,89 +3,107 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { DatePipe } from '@angular/common'; - -import { TestBed } from '@angular/core/testing'; - -import { DATA_PIPELINES_DATE_TIME_FORMAT } from '../../../../../../../model'; - -import { GridDataJobExecution } from '../../../model'; - -import { ExecutionDurationComparator } from './execution-duration.comparator'; - -describe('ExecutionDurationComparator', () => { - let datePipe: DatePipe; - let dataJobExecutions: GridDataJobExecution[]; - - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [DatePipe] - }); - - datePipe = TestBed.inject(DatePipe); - - const aStartTime = new Date(); - const aEndTime = new Date(aStartTime.getTime() + 100); - const bStartTime = new Date(); - const bEndTime = new Date(bStartTime.getTime() + 110); - - dataJobExecutions = [ - { - id: 'aJob', - startTimeFormatted: datePipe.transform(aStartTime, DATA_PIPELINES_DATE_TIME_FORMAT), - startTime: aStartTime.toISOString(), - endTimeFormatted: datePipe.transform(aEndTime, DATA_PIPELINES_DATE_TIME_FORMAT), - endTime: aEndTime.toISOString(), - duration: '100', - jobVersion: '' - }, - { - id: 'bJob', - startTimeFormatted: datePipe.transform(bStartTime, DATA_PIPELINES_DATE_TIME_FORMAT), - startTime: bStartTime.toISOString(), - endTimeFormatted: datePipe.transform(bEndTime, DATA_PIPELINES_DATE_TIME_FORMAT), - endTime: bEndTime.toISOString(), - duration: '110', - jobVersion: '' - } - ]; - }); - - describe('Properties::', () => { - describe('|direction|', () => { - it('should verify value', () => { - // Given - const instance = new ExecutionDurationComparator('ASC'); +import { DatePipe } from "@angular/common"; - // Then - expect(instance.direction).toEqual('ASC'); - }); - }); - }); +import { TestBed } from "@angular/core/testing"; - describe('Methods::', () => { - describe('|compare|', () => { - it('should verify will return -10 because of ascending sort', () => { - // Given - const instance = new ExecutionDurationComparator('ASC'); +import { DATA_PIPELINES_DATE_TIME_FORMAT } from "../../../../../../../model"; - // When - const res = instance.compare(dataJobExecutions[0], dataJobExecutions[1]); +import { GridDataJobExecution } from "../../../model"; - // Then - expect(res).toEqual(-10); - }); +import { ExecutionDurationComparator } from "./execution-duration.comparator"; - it('should verify will return 10 because of descending sort', () => { - // Given - const instance = new ExecutionDurationComparator('DESC'); +describe("ExecutionDurationComparator", () => { + let datePipe: DatePipe; + let dataJobExecutions: GridDataJobExecution[]; - // When - const res = instance.compare(dataJobExecutions[0], dataJobExecutions[1]); + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [DatePipe], + }); - // Then - expect(res).toEqual(10); - }); - }); + datePipe = TestBed.inject(DatePipe); + + const aStartTime = new Date(); + const aEndTime = new Date(aStartTime.getTime() + 100); + const bStartTime = new Date(); + const bEndTime = new Date(bStartTime.getTime() + 110); + + dataJobExecutions = [ + { + id: "aJob", + startTimeFormatted: datePipe.transform( + aStartTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + startTime: aStartTime.toISOString(), + endTimeFormatted: datePipe.transform( + aEndTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + endTime: aEndTime.toISOString(), + duration: "100", + jobVersion: "", + }, + { + id: "bJob", + startTimeFormatted: datePipe.transform( + bStartTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + startTime: bStartTime.toISOString(), + endTimeFormatted: datePipe.transform( + bEndTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + endTime: bEndTime.toISOString(), + duration: "110", + jobVersion: "", + }, + ]; + }); + + describe("Properties::", () => { + describe("|direction|", () => { + it("should verify value", () => { + // Given + const instance = new ExecutionDurationComparator("ASC"); + + // Then + expect(instance.direction).toEqual("ASC"); + }); + }); + }); + + describe("Methods::", () => { + describe("|compare|", () => { + it("should verify will return -10 because of ascending sort", () => { + // Given + const instance = new ExecutionDurationComparator("ASC"); + + // When + const res = instance.compare( + dataJobExecutions[0], + dataJobExecutions[1], + ); + + // Then + expect(res).toEqual(-10); + }); + + it("should verify will return 10 because of descending sort", () => { + // Given + const instance = new ExecutionDurationComparator("DESC"); + + // When + const res = instance.compare( + dataJobExecutions[0], + dataJobExecutions[1], + ); + + // Then + expect(res).toEqual(10); + }); }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/duration/execution-duration.comparator.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/duration/execution-duration.comparator.ts index 39b925972f..15451c77ba 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/duration/execution-duration.comparator.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/duration/execution-duration.comparator.ts @@ -3,27 +3,29 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Comparator } from '@versatiledatakit/shared'; +import { Comparator } from "@versatiledatakit/shared"; -import { GridDataJobExecution } from '../../../model/data-job-execution'; +import { GridDataJobExecution } from "../../../model/data-job-execution"; export class ExecutionDurationComparator implements Comparator { - public readonly direction: 'ASC' | 'DESC'; + public readonly direction: "ASC" | "DESC"; - /** - * ** Constructor. - */ - constructor(direction: 'ASC' | 'DESC') { - this.direction = direction; - } + /** + * ** Constructor. + */ + constructor(direction: "ASC" | "DESC") { + this.direction = direction; + } - /** - * @inheritDoc - */ - compare(exec1: GridDataJobExecution, exec2: GridDataJobExecution): number { - const aDuration = Date.parse(exec1.endTime) - Date.parse(exec1.startTime); - const bDuration = Date.parse(exec2.endTime) - Date.parse(exec2.startTime); + /** + * @inheritDoc + */ + compare(exec1: GridDataJobExecution, exec2: GridDataJobExecution): number { + const aDuration = Date.parse(exec1.endTime) - Date.parse(exec1.startTime); + const bDuration = Date.parse(exec2.endTime) - Date.parse(exec2.startTime); - return this.direction === 'ASC' ? aDuration - bDuration : bDuration - aDuration; - } + return this.direction === "ASC" + ? aDuration - bDuration + : bDuration - aDuration; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/duration/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/duration/index.ts index 88ed18067a..2102a0a40f 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/duration/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/duration/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './execution-duration.comparator'; +export * from "./execution-duration.comparator"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/index.ts index 6cfbba3632..8ba9f08393 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/comparators/index.ts @@ -3,6 +3,6 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './default'; -export * from './date'; -export * from './duration'; +export * from "./default"; +export * from "./date"; +export * from "./duration"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/index.ts index 03cf6e95b7..45d42356d6 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/index.ts @@ -3,6 +3,6 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './status'; -export * from './string'; -export * from './type'; +export * from "./status"; +export * from "./string"; +export * from "./type"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/status/executions-status.criteria.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/status/executions-status.criteria.spec.ts index 79e132c1a3..0a2ee386a9 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/status/executions-status.criteria.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/status/executions-status.criteria.spec.ts @@ -3,153 +3,176 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { DatePipe } from '@angular/common'; - -import { TestBed } from '@angular/core/testing'; - -import { CallFake, CollectionsUtil } from '@versatiledatakit/shared'; - -import { DATA_PIPELINES_DATE_TIME_FORMAT, DataJobExecutionStatus } from '../../../../../../../model'; - -import { GridDataJobExecution } from '../../../model'; - -import { ExecutionsStatusCriteria } from './executions-status.criteria'; - -describe('ExecutionsStatusCriteria', () => { - let datePipe: DatePipe; - let dataJobExecutions: GridDataJobExecution[]; - - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [DatePipe] - }); - - datePipe = TestBed.inject(DatePipe); - - const aStartTime = new Date(); - const aEndTime = new Date(aStartTime.getTime() + 100); - const bStartTime = new Date(); - const bEndTime = new Date(bStartTime.getTime() + 110); - const cStartTime = new Date(); - const cEndTime = new Date(cStartTime.getTime() + 120); - - dataJobExecutions = [ - { - id: 'aJob', - startTimeFormatted: datePipe.transform(aStartTime, DATA_PIPELINES_DATE_TIME_FORMAT), - startTime: aStartTime.toISOString(), - endTimeFormatted: datePipe.transform(aEndTime, DATA_PIPELINES_DATE_TIME_FORMAT), - endTime: aEndTime.toISOString(), - duration: '100', - jobVersion: '', - status: DataJobExecutionStatus.SUCCEEDED - }, - { - id: 'bJob', - startTimeFormatted: datePipe.transform(bStartTime, DATA_PIPELINES_DATE_TIME_FORMAT), - startTime: bStartTime.toISOString(), - endTimeFormatted: datePipe.transform(bEndTime, DATA_PIPELINES_DATE_TIME_FORMAT), - endTime: bEndTime.toISOString(), - duration: '110', - jobVersion: '', - status: DataJobExecutionStatus.RUNNING - }, - { - id: 'cJob', - startTimeFormatted: datePipe.transform(cStartTime, DATA_PIPELINES_DATE_TIME_FORMAT), - startTime: cStartTime.toISOString(), - endTimeFormatted: datePipe.transform(cEndTime, DATA_PIPELINES_DATE_TIME_FORMAT), - endTime: cEndTime.toISOString(), - duration: '120', - jobVersion: '', - status: DataJobExecutionStatus.PLATFORM_ERROR - } - ]; - }); - - describe('Methods::', () => { - describe('|meetCriteria|', () => { - it('should verify will return Array with aJob and bJob', () => { - // Given - const instance = new ExecutionsStatusCriteria('succeeded,running'); - - // When - const res = instance.meetCriteria(dataJobExecutions); - - // Then - expect(res).toEqual([dataJobExecutions[0], dataJobExecutions[1]]); - }); - - it('should verify will return Array with cJob', () => { - // Given - const instance = new ExecutionsStatusCriteria('platform_error'); - - // When - const res = instance.meetCriteria(dataJobExecutions); - - // Then - expect(res).toEqual([dataJobExecutions[2]]); - }); - - it('should verify will return empty Array', () => { - // Given - const instance = new ExecutionsStatusCriteria('user_error'); +import { DatePipe } from "@angular/common"; - // When - const res = instance.meetCriteria(dataJobExecutions); +import { TestBed } from "@angular/core/testing"; - // Then - expect(res).toEqual([]); - }); +import { CallFake, CollectionsUtil } from "@versatiledatakit/shared"; - it('should verify will return Array with all Jobs when serialized status criteria is empty string', () => { - // Given - const instance = new ExecutionsStatusCriteria(''); +import { + DATA_PIPELINES_DATE_TIME_FORMAT, + DataJobExecutionStatus, +} from "../../../../../../../model"; - // When - const res = instance.meetCriteria(dataJobExecutions); +import { GridDataJobExecution } from "../../../model"; - // Then - expect(res).toEqual(dataJobExecutions); - }); +import { ExecutionsStatusCriteria } from "./executions-status.criteria"; - it('should verify will return Array with all Jobs when serialized status criteria is Nil', () => { - // Given - const instance = new ExecutionsStatusCriteria(null); +describe("ExecutionsStatusCriteria", () => { + let datePipe: DatePipe; + let dataJobExecutions: GridDataJobExecution[]; - // When - const res = instance.meetCriteria(dataJobExecutions); - - // Then - expect(res).toEqual(dataJobExecutions); - }); - - it('should verify will return empty Array when Executions are Nil', () => { - // Given - const instance = new ExecutionsStatusCriteria('running'); - - // When - const res = instance.meetCriteria(null); - - // Then - expect(res).toEqual([]); - }); - - it('should verify will return Array with all Jobs when serialized status deserialization fails', () => { - // Given - spyOn(CollectionsUtil, 'isStringWithContent').and.throwError(new Error('String validation fails')); - const consoleErrorSpy = spyOn(console, 'error').and.callFake(CallFake); - const instance = new ExecutionsStatusCriteria('running'); - - // When - const res = instance.meetCriteria(dataJobExecutions); + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [DatePipe], + }); - // Then - expect(res).toEqual(dataJobExecutions); - expect(consoleErrorSpy).toHaveBeenCalledWith( - `ExecutionsStatusCriteria: failed to deserialize Data Job Execution Statuses.` - ); - }); - }); + datePipe = TestBed.inject(DatePipe); + + const aStartTime = new Date(); + const aEndTime = new Date(aStartTime.getTime() + 100); + const bStartTime = new Date(); + const bEndTime = new Date(bStartTime.getTime() + 110); + const cStartTime = new Date(); + const cEndTime = new Date(cStartTime.getTime() + 120); + + dataJobExecutions = [ + { + id: "aJob", + startTimeFormatted: datePipe.transform( + aStartTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + startTime: aStartTime.toISOString(), + endTimeFormatted: datePipe.transform( + aEndTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + endTime: aEndTime.toISOString(), + duration: "100", + jobVersion: "", + status: DataJobExecutionStatus.SUCCEEDED, + }, + { + id: "bJob", + startTimeFormatted: datePipe.transform( + bStartTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + startTime: bStartTime.toISOString(), + endTimeFormatted: datePipe.transform( + bEndTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + endTime: bEndTime.toISOString(), + duration: "110", + jobVersion: "", + status: DataJobExecutionStatus.RUNNING, + }, + { + id: "cJob", + startTimeFormatted: datePipe.transform( + cStartTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + startTime: cStartTime.toISOString(), + endTimeFormatted: datePipe.transform( + cEndTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + endTime: cEndTime.toISOString(), + duration: "120", + jobVersion: "", + status: DataJobExecutionStatus.PLATFORM_ERROR, + }, + ]; + }); + + describe("Methods::", () => { + describe("|meetCriteria|", () => { + it("should verify will return Array with aJob and bJob", () => { + // Given + const instance = new ExecutionsStatusCriteria("succeeded,running"); + + // When + const res = instance.meetCriteria(dataJobExecutions); + + // Then + expect(res).toEqual([dataJobExecutions[0], dataJobExecutions[1]]); + }); + + it("should verify will return Array with cJob", () => { + // Given + const instance = new ExecutionsStatusCriteria("platform_error"); + + // When + const res = instance.meetCriteria(dataJobExecutions); + + // Then + expect(res).toEqual([dataJobExecutions[2]]); + }); + + it("should verify will return empty Array", () => { + // Given + const instance = new ExecutionsStatusCriteria("user_error"); + + // When + const res = instance.meetCriteria(dataJobExecutions); + + // Then + expect(res).toEqual([]); + }); + + it("should verify will return Array with all Jobs when serialized status criteria is empty string", () => { + // Given + const instance = new ExecutionsStatusCriteria(""); + + // When + const res = instance.meetCriteria(dataJobExecutions); + + // Then + expect(res).toEqual(dataJobExecutions); + }); + + it("should verify will return Array with all Jobs when serialized status criteria is Nil", () => { + // Given + const instance = new ExecutionsStatusCriteria(null); + + // When + const res = instance.meetCriteria(dataJobExecutions); + + // Then + expect(res).toEqual(dataJobExecutions); + }); + + it("should verify will return empty Array when Executions are Nil", () => { + // Given + const instance = new ExecutionsStatusCriteria("running"); + + // When + const res = instance.meetCriteria(null); + + // Then + expect(res).toEqual([]); + }); + + it("should verify will return Array with all Jobs when serialized status deserialization fails", () => { + // Given + spyOn(CollectionsUtil, "isStringWithContent").and.throwError( + new Error("String validation fails"), + ); + const consoleErrorSpy = spyOn(console, "error").and.callFake(CallFake); + const instance = new ExecutionsStatusCriteria("running"); + + // When + const res = instance.meetCriteria(dataJobExecutions); + + // Then + expect(res).toEqual(dataJobExecutions); + expect(consoleErrorSpy).toHaveBeenCalledWith( + `ExecutionsStatusCriteria: failed to deserialize Data Job Execution Statuses.`, + ); + }); }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/status/executions-status.criteria.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/status/executions-status.criteria.ts index b7aa928ed5..701c1c7c55 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/status/executions-status.criteria.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/status/executions-status.criteria.ts @@ -3,51 +3,62 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { CollectionsUtil, Criteria } from '@versatiledatakit/shared'; +import { CollectionsUtil, Criteria } from "@versatiledatakit/shared"; -import { DataJobExecutionStatus } from '../../../../../../../model'; +import { DataJobExecutionStatus } from "../../../../../../../model"; -import { GridDataJobExecution } from '../../../model'; +import { GridDataJobExecution } from "../../../model"; /** * ** Executions Status filter criteria. */ export class ExecutionsStatusCriteria implements Criteria { - private readonly _dataJobExecutionStatuses: DataJobExecutionStatus[]; + private readonly _dataJobExecutionStatuses: DataJobExecutionStatus[]; - /** - * ** Constructor. - */ - constructor(dataJobExecutionStatusesSerialized: string) { - this._dataJobExecutionStatuses = ExecutionsStatusCriteria._deserializeExecutionStatuses(dataJobExecutionStatusesSerialized); - } + /** + * ** Constructor. + */ + constructor(dataJobExecutionStatusesSerialized: string) { + this._dataJobExecutionStatuses = + ExecutionsStatusCriteria._deserializeExecutionStatuses( + dataJobExecutionStatusesSerialized, + ); + } - /** - * @inheritDoc - */ - meetCriteria(executions: GridDataJobExecution[]): GridDataJobExecution[] { - return [...(executions ?? [])].filter((execution) => { - const status = execution.status; + /** + * @inheritDoc + */ + meetCriteria(executions: GridDataJobExecution[]): GridDataJobExecution[] { + return [...(executions ?? [])].filter((execution) => { + const status = execution.status; - if (this._dataJobExecutionStatuses.length === 0) { - return true; - } + if (this._dataJobExecutionStatuses.length === 0) { + return true; + } - return this._dataJobExecutionStatuses.includes(status); - }); - } + return this._dataJobExecutionStatuses.includes(status); + }); + } - private static _deserializeExecutionStatuses(dataJobExecutionStatusesSerialized: string): DataJobExecutionStatus[] { - try { - if (!CollectionsUtil.isStringWithContent(dataJobExecutionStatusesSerialized)) { - return []; - } + private static _deserializeExecutionStatuses( + dataJobExecutionStatusesSerialized: string, + ): DataJobExecutionStatus[] { + try { + if ( + !CollectionsUtil.isStringWithContent(dataJobExecutionStatusesSerialized) + ) { + return []; + } - return dataJobExecutionStatusesSerialized.toUpperCase().split(',') as DataJobExecutionStatus[]; - } catch (e) { - console.error(`ExecutionsStatusCriteria: failed to deserialize Data Job Execution Statuses.`); + return dataJobExecutionStatusesSerialized + .toUpperCase() + .split(",") as DataJobExecutionStatus[]; + } catch (e) { + console.error( + `ExecutionsStatusCriteria: failed to deserialize Data Job Execution Statuses.`, + ); - return []; - } + return []; } + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/status/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/status/index.ts index fb7bb28a32..e58a0238cf 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/status/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/status/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './executions-status.criteria'; +export * from "./executions-status.criteria"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/string/executions-string.criteria.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/string/executions-string.criteria.spec.ts index 8d06749177..4e40c719b6 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/string/executions-string.criteria.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/string/executions-string.criteria.spec.ts @@ -3,141 +3,169 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { DatePipe } from '@angular/common'; - -import { TestBed } from '@angular/core/testing'; - -import { DATA_PIPELINES_DATE_TIME_FORMAT, DataJobExecutionStatus, DataJobExecutionType } from '../../../../../../../model'; - -import { GridDataJobExecution } from '../../../model'; - -import { ExecutionsStringCriteria } from './executions-string.criteria'; - -describe('ExecutionsStringCriteria', () => { - let datePipe: DatePipe; - let dataJobExecutions: GridDataJobExecution[]; - - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [DatePipe] - }); - - datePipe = TestBed.inject(DatePipe); - - const aStartTime = new Date(); - const aEndTime = new Date(aStartTime.getTime() + 100); - const bStartTime = new Date(); - const bEndTime = new Date(bStartTime.getTime() + 110); - const cStartTime = new Date(); - const cEndTime = new Date(cStartTime.getTime() + 120); - - dataJobExecutions = [ - { - id: 'aJob', - startTimeFormatted: datePipe.transform(aStartTime, DATA_PIPELINES_DATE_TIME_FORMAT), - startTime: aStartTime.toISOString(), - endTimeFormatted: datePipe.transform(aEndTime, DATA_PIPELINES_DATE_TIME_FORMAT), - endTime: aEndTime.toISOString(), - duration: '100', - jobVersion: 'aJob-10', - status: DataJobExecutionStatus.SUCCEEDED, - type: DataJobExecutionType.SCHEDULED, - opId: null - }, - { - id: 'bJob', - startTimeFormatted: datePipe.transform(bStartTime, DATA_PIPELINES_DATE_TIME_FORMAT), - startTime: bStartTime.toISOString(), - endTimeFormatted: datePipe.transform(bEndTime, DATA_PIPELINES_DATE_TIME_FORMAT), - endTime: bEndTime.toISOString(), - duration: '110', - jobVersion: 'bJob-11', - status: DataJobExecutionStatus.RUNNING, - type: DataJobExecutionType.SCHEDULED, - opId: null - }, - { - id: 'cJob', - startTimeFormatted: datePipe.transform(cStartTime, DATA_PIPELINES_DATE_TIME_FORMAT), - startTime: cStartTime.toISOString(), - endTimeFormatted: datePipe.transform(cEndTime, DATA_PIPELINES_DATE_TIME_FORMAT), - endTime: cEndTime.toISOString(), - duration: '120', - jobVersion: 'cJob-12', - status: DataJobExecutionStatus.PLATFORM_ERROR, - type: DataJobExecutionType.MANUAL, - opId: 'cJob_opId' - } - ]; - }); - - describe('Methods::', () => { - describe('|meetCriteria|', () => { - it('should verify will return Array with aJob, bJob and cJob because match is partial and case insensitive', () => { - // Given - const instance = new ExecutionsStringCriteria('jobVersion', 'job'); - - // When - const res = instance.meetCriteria(dataJobExecutions); - - // Then - expect(res).toEqual(dataJobExecutions); - }); - - it('should verify will return Array with cJob', () => { - // Given - const instance = new ExecutionsStringCriteria('endTime', dataJobExecutions[2].endTime); - - // When - const res = instance.meetCriteria(dataJobExecutions); - - // Then - expect(res).toEqual([dataJobExecutions[2]]); - }); +import { DatePipe } from "@angular/common"; - it('should verify will return empty Array', () => { - // Given - const instance = new ExecutionsStringCriteria('id', 'aJobExecuted'); +import { TestBed } from "@angular/core/testing"; - // When - const res = instance.meetCriteria(dataJobExecutions); +import { + DATA_PIPELINES_DATE_TIME_FORMAT, + DataJobExecutionStatus, + DataJobExecutionType, +} from "../../../../../../../model"; - // Then - expect(res).toEqual([]); - }); +import { GridDataJobExecution } from "../../../model"; - it('should verify will return only cJob because other opId are Nil', () => { - // Given - const instance = new ExecutionsStringCriteria('opId', 'opid'); +import { ExecutionsStringCriteria } from "./executions-string.criteria"; - // When - const res = instance.meetCriteria(dataJobExecutions); +describe("ExecutionsStringCriteria", () => { + let datePipe: DatePipe; + let dataJobExecutions: GridDataJobExecution[]; - // Then - expect(res).toEqual([dataJobExecutions[2]]); - }); - - it('should verify will return Array with all Jobs when search value (query) is Nil', () => { - // Given - const instance = new ExecutionsStringCriteria('id', null); - - // When - const res = instance.meetCriteria(dataJobExecutions); - - // Then - expect(res).toEqual(dataJobExecutions); - }); - - it('should verify will return empty Array when Executions are Nil', () => { - // Given - const instance = new ExecutionsStringCriteria('startTimeFormatted', dataJobExecutions[0].startTimeFormatted); - - // When - const res = instance.meetCriteria(null); + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [DatePipe], + }); - // Then - expect(res).toEqual([]); - }); - }); + datePipe = TestBed.inject(DatePipe); + + const aStartTime = new Date(); + const aEndTime = new Date(aStartTime.getTime() + 100); + const bStartTime = new Date(); + const bEndTime = new Date(bStartTime.getTime() + 110); + const cStartTime = new Date(); + const cEndTime = new Date(cStartTime.getTime() + 120); + + dataJobExecutions = [ + { + id: "aJob", + startTimeFormatted: datePipe.transform( + aStartTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + startTime: aStartTime.toISOString(), + endTimeFormatted: datePipe.transform( + aEndTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + endTime: aEndTime.toISOString(), + duration: "100", + jobVersion: "aJob-10", + status: DataJobExecutionStatus.SUCCEEDED, + type: DataJobExecutionType.SCHEDULED, + opId: null, + }, + { + id: "bJob", + startTimeFormatted: datePipe.transform( + bStartTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + startTime: bStartTime.toISOString(), + endTimeFormatted: datePipe.transform( + bEndTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + endTime: bEndTime.toISOString(), + duration: "110", + jobVersion: "bJob-11", + status: DataJobExecutionStatus.RUNNING, + type: DataJobExecutionType.SCHEDULED, + opId: null, + }, + { + id: "cJob", + startTimeFormatted: datePipe.transform( + cStartTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + startTime: cStartTime.toISOString(), + endTimeFormatted: datePipe.transform( + cEndTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + endTime: cEndTime.toISOString(), + duration: "120", + jobVersion: "cJob-12", + status: DataJobExecutionStatus.PLATFORM_ERROR, + type: DataJobExecutionType.MANUAL, + opId: "cJob_opId", + }, + ]; + }); + + describe("Methods::", () => { + describe("|meetCriteria|", () => { + it("should verify will return Array with aJob, bJob and cJob because match is partial and case insensitive", () => { + // Given + const instance = new ExecutionsStringCriteria("jobVersion", "job"); + + // When + const res = instance.meetCriteria(dataJobExecutions); + + // Then + expect(res).toEqual(dataJobExecutions); + }); + + it("should verify will return Array with cJob", () => { + // Given + const instance = new ExecutionsStringCriteria( + "endTime", + dataJobExecutions[2].endTime, + ); + + // When + const res = instance.meetCriteria(dataJobExecutions); + + // Then + expect(res).toEqual([dataJobExecutions[2]]); + }); + + it("should verify will return empty Array", () => { + // Given + const instance = new ExecutionsStringCriteria("id", "aJobExecuted"); + + // When + const res = instance.meetCriteria(dataJobExecutions); + + // Then + expect(res).toEqual([]); + }); + + it("should verify will return only cJob because other opId are Nil", () => { + // Given + const instance = new ExecutionsStringCriteria("opId", "opid"); + + // When + const res = instance.meetCriteria(dataJobExecutions); + + // Then + expect(res).toEqual([dataJobExecutions[2]]); + }); + + it("should verify will return Array with all Jobs when search value (query) is Nil", () => { + // Given + const instance = new ExecutionsStringCriteria("id", null); + + // When + const res = instance.meetCriteria(dataJobExecutions); + + // Then + expect(res).toEqual(dataJobExecutions); + }); + + it("should verify will return empty Array when Executions are Nil", () => { + // Given + const instance = new ExecutionsStringCriteria( + "startTimeFormatted", + dataJobExecutions[0].startTimeFormatted, + ); + + // When + const res = instance.meetCriteria(null); + + // Then + expect(res).toEqual([]); + }); }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/string/executions-string.criteria.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/string/executions-string.criteria.ts index a3b0175280..4c957cc632 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/string/executions-string.criteria.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/string/executions-string.criteria.ts @@ -3,46 +3,55 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { get } from 'lodash'; +import { get } from "lodash"; -import { CollectionsUtil, Criteria } from '@versatiledatakit/shared'; +import { CollectionsUtil, Criteria } from "@versatiledatakit/shared"; -import { GridDataJobExecution } from '../../../model'; +import { GridDataJobExecution } from "../../../model"; /** * ** Executions Generic string filter criteria. */ export class ExecutionsStringCriteria implements Criteria { - private readonly _property: keyof GridDataJobExecution; - private readonly _searchValue: GridDataJobExecution[Exclude]; - - /** - * ** Constructor. - */ - constructor( - property: keyof GridDataJobExecution, - searchValue: GridDataJobExecution[Exclude] - ) { - this._property = property; - this._searchValue = searchValue; - } - - /** - * @inheritDoc - */ - meetCriteria(executions: GridDataJobExecution[]): GridDataJobExecution[] { - return [...(executions ?? [])].filter((execution) => { - const value = get(execution, this._property); - - if (!CollectionsUtil.isString(this._searchValue)) { - return true; - } - - if (!CollectionsUtil.isString(value)) { - return false; - } - - return value.toLowerCase().includes(this._searchValue.toLowerCase()); - }); - } + private readonly _property: keyof GridDataJobExecution; + private readonly _searchValue: GridDataJobExecution[Exclude< + keyof GridDataJobExecution, + "deployment" + >]; + + /** + * ** Constructor. + */ + constructor( + property: keyof GridDataJobExecution, + searchValue: GridDataJobExecution[Exclude< + keyof GridDataJobExecution, + "deployment" + >], + ) { + this._property = property; + this._searchValue = searchValue; + } + + /** + * @inheritDoc + */ + meetCriteria(executions: GridDataJobExecution[]): GridDataJobExecution[] { + return [...(executions ?? [])].filter((execution) => { + const value = get( + execution, + this._property, + ); + + if (!CollectionsUtil.isString(this._searchValue)) { + return true; + } + + if (!CollectionsUtil.isString(value)) { + return false; + } + + return value.toLowerCase().includes(this._searchValue.toLowerCase()); + }); + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/string/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/string/index.ts index 51bfe65c6f..d032425afd 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/string/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/string/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './executions-string.criteria'; +export * from "./executions-string.criteria"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/type/executions-type.criteria.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/type/executions-type.criteria.spec.ts index 86b3a35c56..deebba0f96 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/type/executions-type.criteria.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/type/executions-type.criteria.spec.ts @@ -3,154 +3,180 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { DatePipe } from '@angular/common'; - -import { TestBed } from '@angular/core/testing'; - -import { CallFake, CollectionsUtil } from '@versatiledatakit/shared'; - -import { DATA_PIPELINES_DATE_TIME_FORMAT, DataJobExecutionStatus, DataJobExecutionType } from '../../../../../../../model'; - -import { GridDataJobExecution } from '../../../model'; - -import { ExecutionsTypeCriteria } from './executions-type.criteria'; - -describe('ExecutionsTypeCriteria', () => { - let datePipe: DatePipe; - let dataJobExecutions: GridDataJobExecution[]; - - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [DatePipe] - }); - - datePipe = TestBed.inject(DatePipe); - - const aStartTime = new Date(); - const aEndTime = new Date(aStartTime.getTime() + 100); - const bStartTime = new Date(); - const bEndTime = new Date(bStartTime.getTime() + 110); - const cStartTime = new Date(); - const cEndTime = new Date(cStartTime.getTime() + 120); - - dataJobExecutions = [ - { - id: 'aJob', - startTimeFormatted: datePipe.transform(aStartTime, DATA_PIPELINES_DATE_TIME_FORMAT), - startTime: aStartTime.toISOString(), - endTimeFormatted: datePipe.transform(aEndTime, DATA_PIPELINES_DATE_TIME_FORMAT), - endTime: aEndTime.toISOString(), - duration: '100', - jobVersion: '', - status: DataJobExecutionStatus.SUCCEEDED, - type: DataJobExecutionType.SCHEDULED - }, - { - id: 'bJob', - startTimeFormatted: datePipe.transform(bStartTime, DATA_PIPELINES_DATE_TIME_FORMAT), - startTime: bStartTime.toISOString(), - endTimeFormatted: datePipe.transform(bEndTime, DATA_PIPELINES_DATE_TIME_FORMAT), - endTime: bEndTime.toISOString(), - duration: '110', - jobVersion: '', - status: DataJobExecutionStatus.RUNNING, - type: DataJobExecutionType.SCHEDULED - }, - { - id: 'cJob', - startTimeFormatted: datePipe.transform(cStartTime, DATA_PIPELINES_DATE_TIME_FORMAT), - startTime: cStartTime.toISOString(), - endTimeFormatted: datePipe.transform(cEndTime, DATA_PIPELINES_DATE_TIME_FORMAT), - endTime: cEndTime.toISOString(), - duration: '120', - jobVersion: '', - status: DataJobExecutionStatus.PLATFORM_ERROR, - type: DataJobExecutionType.MANUAL - } - ]; - }); - - describe('Methods::', () => { - describe('|meetCriteria|', () => { - it('should verify will return Array with aJob and bJob', () => { - // Given - const instance = new ExecutionsTypeCriteria('scheduled'); - - // When - const res = instance.meetCriteria(dataJobExecutions); - - // Then - expect(res).toEqual([dataJobExecutions[0], dataJobExecutions[1]]); - }); - - it('should verify will return Array with cJob', () => { - // Given - const instance = new ExecutionsTypeCriteria('manual'); - - // When - const res = instance.meetCriteria(dataJobExecutions); - - // Then - expect(res).toEqual([dataJobExecutions[2]]); - }); - - it('should verify will return empty Array', () => { - // Given - const instance = new ExecutionsTypeCriteria('unknown_type'); +import { DatePipe } from "@angular/common"; - // When - const res = instance.meetCriteria(dataJobExecutions); +import { TestBed } from "@angular/core/testing"; - // Then - expect(res).toEqual([]); - }); +import { CallFake, CollectionsUtil } from "@versatiledatakit/shared"; - it('should verify will return Array with all Jobs when serialized status criteria is empty string', () => { - // Given - const instance = new ExecutionsTypeCriteria(''); +import { + DATA_PIPELINES_DATE_TIME_FORMAT, + DataJobExecutionStatus, + DataJobExecutionType, +} from "../../../../../../../model"; - // When - const res = instance.meetCriteria(dataJobExecutions); +import { GridDataJobExecution } from "../../../model"; - // Then - expect(res).toEqual(dataJobExecutions); - }); +import { ExecutionsTypeCriteria } from "./executions-type.criteria"; - it('should verify will return Array with all Jobs when serialized status criteria is Nil', () => { - // Given - const instance = new ExecutionsTypeCriteria(null); +describe("ExecutionsTypeCriteria", () => { + let datePipe: DatePipe; + let dataJobExecutions: GridDataJobExecution[]; - // When - const res = instance.meetCriteria(dataJobExecutions); - - // Then - expect(res).toEqual(dataJobExecutions); - }); - - it('should verify will return empty Array when Executions are Nil', () => { - // Given - const instance = new ExecutionsTypeCriteria('scheduled'); - - // When - const res = instance.meetCriteria(null); - - // Then - expect(res).toEqual([]); - }); - - it('should verify will return Array with all Jobs when serialized status deserialization fails', () => { - // Given - spyOn(CollectionsUtil, 'isStringWithContent').and.throwError(new Error('String validation fails')); - const consoleErrorSpy = spyOn(console, 'error').and.callFake(CallFake); - const instance = new ExecutionsTypeCriteria('scheduled'); - - // When - const res = instance.meetCriteria(dataJobExecutions); + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [DatePipe], + }); - // Then - expect(res).toEqual(dataJobExecutions); - expect(consoleErrorSpy).toHaveBeenCalledWith(`ExecutionsTypeCriteria: failed to deserialize Data Job Execution Types.`); - }); - }); + datePipe = TestBed.inject(DatePipe); + + const aStartTime = new Date(); + const aEndTime = new Date(aStartTime.getTime() + 100); + const bStartTime = new Date(); + const bEndTime = new Date(bStartTime.getTime() + 110); + const cStartTime = new Date(); + const cEndTime = new Date(cStartTime.getTime() + 120); + + dataJobExecutions = [ + { + id: "aJob", + startTimeFormatted: datePipe.transform( + aStartTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + startTime: aStartTime.toISOString(), + endTimeFormatted: datePipe.transform( + aEndTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + endTime: aEndTime.toISOString(), + duration: "100", + jobVersion: "", + status: DataJobExecutionStatus.SUCCEEDED, + type: DataJobExecutionType.SCHEDULED, + }, + { + id: "bJob", + startTimeFormatted: datePipe.transform( + bStartTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + startTime: bStartTime.toISOString(), + endTimeFormatted: datePipe.transform( + bEndTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + endTime: bEndTime.toISOString(), + duration: "110", + jobVersion: "", + status: DataJobExecutionStatus.RUNNING, + type: DataJobExecutionType.SCHEDULED, + }, + { + id: "cJob", + startTimeFormatted: datePipe.transform( + cStartTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + startTime: cStartTime.toISOString(), + endTimeFormatted: datePipe.transform( + cEndTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + endTime: cEndTime.toISOString(), + duration: "120", + jobVersion: "", + status: DataJobExecutionStatus.PLATFORM_ERROR, + type: DataJobExecutionType.MANUAL, + }, + ]; + }); + + describe("Methods::", () => { + describe("|meetCriteria|", () => { + it("should verify will return Array with aJob and bJob", () => { + // Given + const instance = new ExecutionsTypeCriteria("scheduled"); + + // When + const res = instance.meetCriteria(dataJobExecutions); + + // Then + expect(res).toEqual([dataJobExecutions[0], dataJobExecutions[1]]); + }); + + it("should verify will return Array with cJob", () => { + // Given + const instance = new ExecutionsTypeCriteria("manual"); + + // When + const res = instance.meetCriteria(dataJobExecutions); + + // Then + expect(res).toEqual([dataJobExecutions[2]]); + }); + + it("should verify will return empty Array", () => { + // Given + const instance = new ExecutionsTypeCriteria("unknown_type"); + + // When + const res = instance.meetCriteria(dataJobExecutions); + + // Then + expect(res).toEqual([]); + }); + + it("should verify will return Array with all Jobs when serialized status criteria is empty string", () => { + // Given + const instance = new ExecutionsTypeCriteria(""); + + // When + const res = instance.meetCriteria(dataJobExecutions); + + // Then + expect(res).toEqual(dataJobExecutions); + }); + + it("should verify will return Array with all Jobs when serialized status criteria is Nil", () => { + // Given + const instance = new ExecutionsTypeCriteria(null); + + // When + const res = instance.meetCriteria(dataJobExecutions); + + // Then + expect(res).toEqual(dataJobExecutions); + }); + + it("should verify will return empty Array when Executions are Nil", () => { + // Given + const instance = new ExecutionsTypeCriteria("scheduled"); + + // When + const res = instance.meetCriteria(null); + + // Then + expect(res).toEqual([]); + }); + + it("should verify will return Array with all Jobs when serialized status deserialization fails", () => { + // Given + spyOn(CollectionsUtil, "isStringWithContent").and.throwError( + new Error("String validation fails"), + ); + const consoleErrorSpy = spyOn(console, "error").and.callFake(CallFake); + const instance = new ExecutionsTypeCriteria("scheduled"); + + // When + const res = instance.meetCriteria(dataJobExecutions); + + // Then + expect(res).toEqual(dataJobExecutions); + expect(consoleErrorSpy).toHaveBeenCalledWith( + `ExecutionsTypeCriteria: failed to deserialize Data Job Execution Types.`, + ); + }); }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/type/executions-type.criteria.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/type/executions-type.criteria.ts index 6f694bc61f..289d133056 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/type/executions-type.criteria.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/type/executions-type.criteria.ts @@ -3,51 +3,62 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { CollectionsUtil, Criteria } from '@versatiledatakit/shared'; +import { CollectionsUtil, Criteria } from "@versatiledatakit/shared"; -import { DataJobExecutionType } from '../../../../../../../model'; +import { DataJobExecutionType } from "../../../../../../../model"; -import { GridDataJobExecution } from '../../../model'; +import { GridDataJobExecution } from "../../../model"; /** * ** Executions Type filter criteria. */ export class ExecutionsTypeCriteria implements Criteria { - private readonly _dataJobExecutionTypes: DataJobExecutionType[]; + private readonly _dataJobExecutionTypes: DataJobExecutionType[]; - /** - * ** Constructor. - */ - constructor(dataJobExecutionTypesSerialized: string) { - this._dataJobExecutionTypes = ExecutionsTypeCriteria._deserializeExecutionTypes(dataJobExecutionTypesSerialized); - } + /** + * ** Constructor. + */ + constructor(dataJobExecutionTypesSerialized: string) { + this._dataJobExecutionTypes = + ExecutionsTypeCriteria._deserializeExecutionTypes( + dataJobExecutionTypesSerialized, + ); + } - /** - * @inheritDoc - */ - meetCriteria(executions: GridDataJobExecution[]): GridDataJobExecution[] { - return [...(executions ?? [])].filter((execution) => { - const type = execution.type; + /** + * @inheritDoc + */ + meetCriteria(executions: GridDataJobExecution[]): GridDataJobExecution[] { + return [...(executions ?? [])].filter((execution) => { + const type = execution.type; - if (this._dataJobExecutionTypes.length === 0) { - return true; - } + if (this._dataJobExecutionTypes.length === 0) { + return true; + } - return this._dataJobExecutionTypes.includes(type); - }); - } + return this._dataJobExecutionTypes.includes(type); + }); + } - private static _deserializeExecutionTypes(dataJobExecutionTypesSerialized: string): DataJobExecutionType[] { - try { - if (!CollectionsUtil.isStringWithContent(dataJobExecutionTypesSerialized)) { - return []; - } + private static _deserializeExecutionTypes( + dataJobExecutionTypesSerialized: string, + ): DataJobExecutionType[] { + try { + if ( + !CollectionsUtil.isStringWithContent(dataJobExecutionTypesSerialized) + ) { + return []; + } - return dataJobExecutionTypesSerialized.toUpperCase().split(',') as DataJobExecutionType[]; - } catch (e) { - console.error(`ExecutionsTypeCriteria: failed to deserialize Data Job Execution Types.`); + return dataJobExecutionTypesSerialized + .toUpperCase() + .split(",") as DataJobExecutionType[]; + } catch (e) { + console.error( + `ExecutionsTypeCriteria: failed to deserialize Data Job Execution Types.`, + ); - return []; - } + return []; } + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/type/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/type/index.ts index 095962082a..bc35ac389e 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/type/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/criteria/type/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './executions-type.criteria'; +export * from "./executions-type.criteria"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/data-job-executions-grid.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/data-job-executions-grid.component.html index 2168cf7204..29be278431 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/data-job-executions-grid.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/data-job-executions-grid.component.html @@ -4,170 +4,170 @@ --> - We couldn't find any executions! + We couldn't find any executions! - Status - - - - - Type - - - - - Duration - - Start (UTC) - - End (UTC) - - ID - - Version - - Logs + Status + + + + + Type + + + + + Duration + + Start (UTC) + + End (UTC) + + ID + + Version + + Logs - + + + + + + + {{ + jobExecution.duration + }} + {{ + jobExecution.startTimeFormatted + }} + {{ + jobExecution.endTimeFormatted + }} + {{ + jobExecution.id + }} + {{ + jobExecution.jobVersion | slice: 0 : 8 + }} + - - - - - - - {{ jobExecution.duration }} - {{ jobExecution.startTimeFormatted }} - {{ jobExecution.endTimeFormatted }} - {{ jobExecution.id }} - {{ jobExecution.jobVersion | slice : 0 : 8 }} - - - - - - - - - + + + + + + + + - - - Executions per page - {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of {{ - pagination.totalItems }} executions - - + + + Executions per page + {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of + {{ pagination.totalItems }} executions + + diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/data-job-executions-grid.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/data-job-executions-grid.component.scss index afb3567e57..328cca9760 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/data-job-executions-grid.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/data-job-executions-grid.component.scss @@ -4,40 +4,40 @@ */ .execution-type-cell { - text-align: center; + text-align: center; } .grid-column__min-width--s { - min-width: 3.5rem; + min-width: 3.5rem; } .grid-column__max-width--s { - max-width: 4rem; + max-width: 4rem; } clr-datagrid { - &.data-pipelines-job-executions-datagrid { - clr-dg-row { - &.data-pipelines-job__execution--highlighted { - --execution-row-highlighted: var(--clr-datagrid-row-hover, #e8e8e8); - background-color: var(--execution-row-highlighted); + &.data-pipelines-job-executions-datagrid { + clr-dg-row { + &.data-pipelines-job__execution--highlighted { + --execution-row-highlighted: var(--clr-datagrid-row-hover, #e8e8e8); + background-color: var(--execution-row-highlighted); - ::ng-deep .datagrid-row-sticky { - background-color: var(--execution-row-highlighted); - } - } + ::ng-deep .datagrid-row-sticky { + background-color: var(--execution-row-highlighted); } + } } + } } ::ng-deep .fade-to-dark.dark { - clr-datagrid { - &.data-pipelines-job-executions-datagrid { - clr-dg-row { - &.data-pipelines-job__execution--highlighted { - --execution-row-highlighted: #28404d; - } - } + clr-datagrid { + &.data-pipelines-job-executions-datagrid { + clr-dg-row { + &.data-pipelines-job__execution--highlighted { + --execution-row-highlighted: #28404d; } + } } + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/data-job-executions-grid.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/data-job-executions-grid.component.ts index 9288f6b766..c74f7c8c73 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/data-job-executions-grid.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/data-job-executions-grid.component.ts @@ -4,458 +4,564 @@ */ import { - ChangeDetectionStrategy, - ChangeDetectorRef, - Component, - EventEmitter, - HostBinding, - Input, - OnChanges, - OnDestroy, - OnInit, - Output, - SimpleChanges -} from '@angular/core'; + ChangeDetectionStrategy, + ChangeDetectorRef, + Component, + EventEmitter, + HostBinding, + Input, + OnChanges, + OnDestroy, + OnInit, + Output, + SimpleChanges, +} from "@angular/core"; + +import { ClrDatagridSortOrder, ClrDatagridStateInterface } from "@clr/angular"; -import { ClrDatagridSortOrder, ClrDatagridStateInterface } from '@clr/angular'; +import { + AndCriteria, + CollectionsUtil, + Comparator, + Criteria, +} from "@versatiledatakit/shared"; -import { AndCriteria, CollectionsUtil, Comparator, Criteria } from '@versatiledatakit/shared'; +import { + FilterSortMutationObserver, + FiltersSortManager, +} from "../../../../../commons"; -import { FilterSortMutationObserver, FiltersSortManager } from '../../../../../commons'; +import { DataJobDeployment } from "../../../../../model"; -import { DataJobDeployment } from '../../../../../model'; +import { + ExecutionsFilterCriteria, + ExecutionsFilterPairs, + ExecutionsGridFilter, + ExecutionsSortCriteria, + ExecutionsSortPairs, + FILTER_DURATION_KEY, + FILTER_END_TIME_KEY, + FILTER_ID_KEY, + FILTER_START_TIME_KEY, + FILTER_STATUS_KEY, + FILTER_TYPE_KEY, + FILTER_VERSION_KEY, + GridDataJobExecution, + SORT_DURATION_KEY, + SORT_END_TIME_KEY, + SORT_ID_KEY, + SORT_START_TIME_KEY, + SORT_STATUS_KEY, + SORT_TYPE_KEY, + SORT_VERSION_KEY, +} from "../model"; import { - ExecutionsFilterCriteria, - ExecutionsFilterPairs, - ExecutionsGridFilter, - ExecutionsSortCriteria, - ExecutionsSortPairs, - FILTER_DURATION_KEY, - FILTER_END_TIME_KEY, - FILTER_ID_KEY, - FILTER_START_TIME_KEY, - FILTER_STATUS_KEY, - FILTER_TYPE_KEY, - FILTER_VERSION_KEY, - GridDataJobExecution, - SORT_DURATION_KEY, - SORT_END_TIME_KEY, - SORT_ID_KEY, - SORT_START_TIME_KEY, - SORT_STATUS_KEY, - SORT_TYPE_KEY, - SORT_VERSION_KEY -} from '../model'; - -import { ExecutionsStatusCriteria, ExecutionsStringCriteria, ExecutionsTypeCriteria } from './criteria'; -import { ExecutionDateComparator, ExecutionDefaultComparator, ExecutionDurationComparator } from './comparators'; + ExecutionsStatusCriteria, + ExecutionsStringCriteria, + ExecutionsTypeCriteria, +} from "./criteria"; +import { + ExecutionDateComparator, + ExecutionDefaultComparator, + ExecutionDurationComparator, +} from "./comparators"; /** * ** Supported filter criteria from Executions grid. */ -const GRID_SUPPORTED_EXECUTIONS_FILTER_KEY: Array = [ +const GRID_SUPPORTED_EXECUTIONS_FILTER_KEY: Array = + [ FILTER_STATUS_KEY, FILTER_TYPE_KEY, FILTER_DURATION_KEY, FILTER_START_TIME_KEY, FILTER_END_TIME_KEY, FILTER_ID_KEY, - FILTER_VERSION_KEY -]; + FILTER_VERSION_KEY, + ]; /** * ** Supported sort criteria from Executions grid. */ const GRID_SUPPORTED_EXECUTIONS_SORT_KEY: Array = [ - SORT_STATUS_KEY, - SORT_TYPE_KEY, - SORT_DURATION_KEY, - SORT_START_TIME_KEY, - SORT_END_TIME_KEY, - SORT_ID_KEY, - SORT_VERSION_KEY + SORT_STATUS_KEY, + SORT_TYPE_KEY, + SORT_DURATION_KEY, + SORT_START_TIME_KEY, + SORT_END_TIME_KEY, + SORT_ID_KEY, + SORT_VERSION_KEY, ]; -type GridExecutionFilterCriteria = Exclude; -type GridExecutionsFilterPairs = ExecutionsFilterPairs; +type GridExecutionFilterCriteria = Exclude< + ExecutionsFilterCriteria, + "timePeriod" +>; +type GridExecutionsFilterPairs = + ExecutionsFilterPairs; -type GridExecutionSortCriteria = Exclude; +type GridExecutionSortCriteria = Exclude; type GridExecutionsSortPairs = ExecutionsFilterPairs; type GridStateLocal = { - filter: GridExecutionsFilterPairs[]; - sort: ExecutionsSortPairs; + filter: GridExecutionsFilterPairs[]; + sort: ExecutionsSortPairs; }; export interface GridCriteriaAndComparator { - filter: Criteria; - sort: Comparator; + filter: Criteria; + sort: Comparator; } @Component({ - selector: 'lib-data-job-executions-grid', - templateUrl: './data-job-executions-grid.component.html', - styleUrls: ['./data-job-executions-grid.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush + selector: "lib-data-job-executions-grid", + templateUrl: "./data-job-executions-grid.component.html", + styleUrls: ["./data-job-executions-grid.component.scss"], + changeDetection: ChangeDetectionStrategy.OnPush, }) -export class DataJobExecutionsGridComponent implements OnChanges, OnInit, OnDestroy { - @Input() jobExecutions: GridDataJobExecution[]; - @Input() loading = false; - - /** - * ** Executions filters sort manager injected from parent. - */ - @Input() filtersSortManager: Readonly< - FiltersSortManager - >; - - /** - * ** If provided will try to highlight row where execution id will match. - */ - @Input() highlightedExecutionId: string; - - /** - * ** Event Emitter that emits events on every user action on grid filters or sort. - */ - @Output() gridCriteriaAndComparatorChanged: EventEmitter = new EventEmitter(); - - @HostBinding('attr.data-cy') public readonly attributeDataCy = 'data-pipelines-data-job-executions'; - - openDeploymentDetailsModal = false; - jobDeploymentModalData: DataJobDeployment; - - paginatedJobExecutions: GridDataJobExecution[] = []; - gridState: ClrDatagridStateInterface; - - paginationPageNumber: number; - paginationPageSize: number; - paginationTotalItems: number; - - isInitialCriteriasEmit = true; - - private _appliedGridState: GridStateLocal = { - filter: [], - sort: undefined - }; - private _previousAppliedGridState: GridStateLocal = { - filter: [], - sort: undefined - }; - - private _filterMutationObserver: FilterSortMutationObserver< - ExecutionsFilterCriteria, - string, - ExecutionsSortCriteria, - ClrDatagridSortOrder - >; - - /** - * ** Reference to scheduled timeout for emitting Grid Criteria and Comparator. - * @private - */ - private _gridCriteriaAndComparatorEmitterTimeoutRef: number; - - /** - * ** Constructor. - */ - constructor(private readonly changeDetectorRef: ChangeDetectorRef) {} - - /** - * ** NgFor elements tracking function. - */ - trackByFn(index: number, execution: GridDataJobExecution): string { - return `${index}|${execution?.id}`; +export class DataJobExecutionsGridComponent + implements OnChanges, OnInit, OnDestroy +{ + @Input() jobExecutions: GridDataJobExecution[]; + @Input() loading = false; + + /** + * ** Executions filters sort manager injected from parent. + */ + @Input() filtersSortManager: Readonly< + FiltersSortManager< + ExecutionsFilterCriteria, + string, + ExecutionsSortCriteria, + ClrDatagridSortOrder + > + >; + + /** + * ** If provided will try to highlight row where execution id will match. + */ + @Input() highlightedExecutionId: string; + + /** + * ** Event Emitter that emits events on every user action on grid filters or sort. + */ + @Output() + gridCriteriaAndComparatorChanged: EventEmitter = + new EventEmitter(); + + @HostBinding("attr.data-cy") public readonly attributeDataCy = + "data-pipelines-data-job-executions"; + + openDeploymentDetailsModal = false; + jobDeploymentModalData: DataJobDeployment; + + paginatedJobExecutions: GridDataJobExecution[] = []; + gridState: ClrDatagridStateInterface; + + paginationPageNumber: number; + paginationPageSize: number; + paginationTotalItems: number; + + isInitialCriteriasEmit = true; + + private _appliedGridState: GridStateLocal = { + filter: [], + sort: undefined, + }; + private _previousAppliedGridState: GridStateLocal = { + filter: [], + sort: undefined, + }; + + private _filterMutationObserver: FilterSortMutationObserver< + ExecutionsFilterCriteria, + string, + ExecutionsSortCriteria, + ClrDatagridSortOrder + >; + + /** + * ** Reference to scheduled timeout for emitting Grid Criteria and Comparator. + * @private + */ + private _gridCriteriaAndComparatorEmitterTimeoutRef: number; + + /** + * ** Constructor. + */ + constructor(private readonly changeDetectorRef: ChangeDetectorRef) {} + + /** + * ** NgFor elements tracking function. + */ + trackByFn(index: number, execution: GridDataJobExecution): string { + return `${index}|${execution?.id}`; + } + + showDeploymentDetails(jobExecution: GridDataJobExecution) { + this.openDeploymentDetailsModal = true; + this.jobDeploymentModalData = jobExecution.deployment; + + this.changeDetectorRef.detectChanges(); + } + + /** + * ** Main callback (listener) for ClrGrid state mutation, like filters, sort. + */ + gridRefresh(state: ClrDatagridStateInterface): void { + if (!state) { + return; } - showDeploymentDetails(jobExecution: GridDataJobExecution) { - this.openDeploymentDetailsModal = true; - this.jobDeploymentModalData = jobExecution.deployment; + let skipCriteriaAndComparatorEmitterDebouncing = false; + this.gridState = state; - this.changeDetectorRef.detectChanges(); + if (this.isInitialCriteriasEmit) { + this.isInitialCriteriasEmit = false; + skipCriteriaAndComparatorEmitterDebouncing = true; } - /** - * ** Main callback (listener) for ClrGrid state mutation, like filters, sort. - */ - gridRefresh(state: ClrDatagridStateInterface): void { - if (!state) { - return; - } - - let skipCriteriaAndComparatorEmitterDebouncing = false; - this.gridState = state; - - if (this.isInitialCriteriasEmit) { - this.isInitialCriteriasEmit = false; - skipCriteriaAndComparatorEmitterDebouncing = true; - } - - this._populateManagerFilters(state); - this._populateManagerSort(state); - this._evaluateGridStateMutation(skipCriteriaAndComparatorEmitterDebouncing); - - this._paginateExecutions(state); - - // update Browser URL once only, for every Grid event - this.filtersSortManager.updateBrowserUrl(); + this._populateManagerFilters(state); + this._populateManagerSort(state); + this._evaluateGridStateMutation(skipCriteriaAndComparatorEmitterDebouncing); + + this._paginateExecutions(state); + + // update Browser URL once only, for every Grid event + this.filtersSortManager.updateBrowserUrl(); + } + + /** + * @inheritDoc + */ + ngOnChanges(changes: SimpleChanges): void { + if ( + changes["jobExecutions"] && + !CollectionsUtil.isEqual( + changes["jobExecutions"].previousValue, + changes["jobExecutions"].currentValue, + ) + ) { + this.paginationTotalItems = this.jobExecutions.length; + this._paginateExecutions(this.gridState); } + } + + /** + * @inheritDoc + */ + ngOnInit(): void { + this._filterMutationObserver = (changes) => { + if ( + changes.some(([key]: GridExecutionsSortPairs) => + [ + ...GRID_SUPPORTED_EXECUTIONS_FILTER_KEY, + ...GRID_SUPPORTED_EXECUTIONS_SORT_KEY, + ].includes(key), + ) + ) { + this.changeDetectorRef.markForCheck(); + } + }; - /** - * @inheritDoc - */ - ngOnChanges(changes: SimpleChanges): void { - if ( - changes['jobExecutions'] && - !CollectionsUtil.isEqual(changes['jobExecutions'].previousValue, changes['jobExecutions'].currentValue) - ) { - this.paginationTotalItems = this.jobExecutions.length; - this._paginateExecutions(this.gridState); - } + // register callback that would listen for mutation of supported filter and sort criteria + this.filtersSortManager.registerMutationObserver( + this._filterMutationObserver, + ); + } + + /** + * @inheritDoc + */ + ngOnDestroy(): void { + if ( + CollectionsUtil.isNumber(this._gridCriteriaAndComparatorEmitterTimeoutRef) + ) { + clearTimeout(this._gridCriteriaAndComparatorEmitterTimeoutRef); } - /** - * @inheritDoc - */ - ngOnInit(): void { - this._filterMutationObserver = (changes) => { - if ( - changes.some(([key]: GridExecutionsSortPairs) => - [...GRID_SUPPORTED_EXECUTIONS_FILTER_KEY, ...GRID_SUPPORTED_EXECUTIONS_SORT_KEY].includes(key) - ) - ) { - this.changeDetectorRef.markForCheck(); - } - }; - - // register callback that would listen for mutation of supported filter and sort criteria - this.filtersSortManager.registerMutationObserver(this._filterMutationObserver); + this.filtersSortManager.deleteMutationObserver( + this._filterMutationObserver, + ); + } + + /** + * ** Extract filters from grid state. + * - use bulk operation to update manager + * @private + */ + private _populateManagerFilters(state: ClrDatagridStateInterface): void { + // on every grid emitted event save currently applied filters for comparison + this._previousAppliedGridState.filter = [...this._appliedGridState.filter]; + + // when grid has user applied filters + if (CollectionsUtil.isArray(state.filters)) { + if (state.filters.length > 0) { + const newFilterPairs: GridExecutionsFilterPairs[] = state.filters.map( + (filter: ExecutionsGridFilter) => + [filter.property, filter.value] as GridExecutionsFilterPairs, + ); + + // remove known filters if they are already set in the manager but are missing from grid state + const filtersForDeletion: GridExecutionsFilterPairs[] = + GRID_SUPPORTED_EXECUTIONS_FILTER_KEY.filter( + (supportedCriteria) => + this.filtersSortManager.hasFilter(supportedCriteria) && + newFilterPairs.findIndex( + ([criteria]) => supportedCriteria === criteria, + ) === -1, + ).map((supportedCriteria) => [supportedCriteria, null]); + + newFilterPairs.push(...filtersForDeletion); + + this.filtersSortManager.bulkUpdate( + newFilterPairs.map(([criteria, value]) => [ + criteria, + value, + "filter", + ]), + ); + + // set new filters to applied grid filters state + this._appliedGridState.filter = [...newFilterPairs]; + + return; + } + } else { + // clear applied grid filters state + this._appliedGridState.filter = []; } - /** - * @inheritDoc - */ - ngOnDestroy(): void { - if (CollectionsUtil.isNumber(this._gridCriteriaAndComparatorEmitterTimeoutRef)) { - clearTimeout(this._gridCriteriaAndComparatorEmitterTimeoutRef); - } - - this.filtersSortManager.deleteMutationObserver(this._filterMutationObserver); + // when grid doesn't have user applied filters but manager has from previous actions + if (this.filtersSortManager.hasAnyFilter()) { + // remove known filters if they are already set in the manager + const filtersForDeletion = GRID_SUPPORTED_EXECUTIONS_FILTER_KEY.filter( + (criteria) => this.filtersSortManager.hasFilter(criteria), + ).map((criteria) => [criteria, null] as GridExecutionsFilterPairs); + + if (filtersForDeletion.length > 0) { + this.filtersSortManager.bulkUpdate( + filtersForDeletion.map(([criteria, value]) => [ + criteria, + value, + "filter", + ]), + ); + } } - - /** - * ** Extract filters from grid state. - * - use bulk operation to update manager - * @private - */ - private _populateManagerFilters(state: ClrDatagridStateInterface): void { - // on every grid emitted event save currently applied filters for comparison - this._previousAppliedGridState.filter = [...this._appliedGridState.filter]; - - // when grid has user applied filters - if (CollectionsUtil.isArray(state.filters)) { - if (state.filters.length > 0) { - const newFilterPairs: GridExecutionsFilterPairs[] = state.filters.map( - (filter: ExecutionsGridFilter) => [filter.property, filter.value] as GridExecutionsFilterPairs - ); - - // remove known filters if they are already set in the manager but are missing from grid state - const filtersForDeletion: GridExecutionsFilterPairs[] = GRID_SUPPORTED_EXECUTIONS_FILTER_KEY.filter( - (supportedCriteria) => - this.filtersSortManager.hasFilter(supportedCriteria) && - newFilterPairs.findIndex(([criteria]) => supportedCriteria === criteria) === -1 - ).map((supportedCriteria) => [supportedCriteria, null]); - - newFilterPairs.push(...filtersForDeletion); - - this.filtersSortManager.bulkUpdate(newFilterPairs.map(([criteria, value]) => [criteria, value, 'filter'])); - - // set new filters to applied grid filters state - this._appliedGridState.filter = [...newFilterPairs]; - - return; - } - } else { - // clear applied grid filters state - this._appliedGridState.filter = []; - } - - // when grid doesn't have user applied filters but manager has from previous actions - if (this.filtersSortManager.hasAnyFilter()) { - // remove known filters if they are already set in the manager - const filtersForDeletion = GRID_SUPPORTED_EXECUTIONS_FILTER_KEY.filter((criteria) => - this.filtersSortManager.hasFilter(criteria) - ).map((criteria) => [criteria, null] as GridExecutionsFilterPairs); - - if (filtersForDeletion.length > 0) { - this.filtersSortManager.bulkUpdate(filtersForDeletion.map(([criteria, value]) => [criteria, value, 'filter'])); - } - } + } + + /** + * ** Extract sort criteria and direction from grid state and update the manager + * @private + */ + private _populateManagerSort(state: ClrDatagridStateInterface): void { + // on every grid emitted event save currently applied sort pair + this._previousAppliedGridState.sort = this._appliedGridState.sort; + + // when grid has user applied sort + if (CollectionsUtil.isDefined(state.sort)) { + const property: ExecutionsSortCriteria = + CollectionsUtil.isStringWithContent(state.sort.by) + ? (state.sort.by as ExecutionsSortCriteria) + : (state.sort.by as unknown as { property: ExecutionsSortCriteria }) + ?.property; + const direction = state.sort.reverse + ? ClrDatagridSortOrder.DESC + : ClrDatagridSortOrder.ASC; + const newSortPairs: ExecutionsSortPairs[] = [[property, direction]]; + + // always remove known previous stored sort criteria and direction + // manager supports multi sort, but grid support single sort only + // remove known sorts if they are already set in the manager but are missing from grid state + const sortsForDeletion: ExecutionsSortPairs[] = + GRID_SUPPORTED_EXECUTIONS_SORT_KEY.filter( + (supportedCriteria) => + this.filtersSortManager.hasSort(supportedCriteria) && + newSortPairs.findIndex( + ([criteria]) => supportedCriteria === criteria, + ) === -1, + ).map((supportedCriteria) => [supportedCriteria, null]); + + newSortPairs.push(...sortsForDeletion); + + this.filtersSortManager.bulkUpdate( + newSortPairs.map(([criteria, value]) => [criteria, value, "sort"]), + ); + + // set new sort to applied grid sort state + this._appliedGridState.sort = newSortPairs[0]; + + return; + } else { + // clear applied grid sort state + this._appliedGridState.sort = undefined; } - /** - * ** Extract sort criteria and direction from grid state and update the manager - * @private - */ - private _populateManagerSort(state: ClrDatagridStateInterface): void { - // on every grid emitted event save currently applied sort pair - this._previousAppliedGridState.sort = this._appliedGridState.sort; - - // when grid has user applied sort - if (CollectionsUtil.isDefined(state.sort)) { - const property: ExecutionsSortCriteria = CollectionsUtil.isStringWithContent(state.sort.by) - ? (state.sort.by as ExecutionsSortCriteria) - : (state.sort.by as unknown as { property: ExecutionsSortCriteria })?.property; - const direction = state.sort.reverse ? ClrDatagridSortOrder.DESC : ClrDatagridSortOrder.ASC; - const newSortPairs: ExecutionsSortPairs[] = [[property, direction]]; - - // always remove known previous stored sort criteria and direction - // manager supports multi sort, but grid support single sort only - // remove known sorts if they are already set in the manager but are missing from grid state - const sortsForDeletion: ExecutionsSortPairs[] = GRID_SUPPORTED_EXECUTIONS_SORT_KEY.filter( - (supportedCriteria) => - this.filtersSortManager.hasSort(supportedCriteria) && - newSortPairs.findIndex(([criteria]) => supportedCriteria === criteria) === -1 - ).map((supportedCriteria) => [supportedCriteria, null]); - - newSortPairs.push(...sortsForDeletion); - - this.filtersSortManager.bulkUpdate(newSortPairs.map(([criteria, value]) => [criteria, value, 'sort'])); - - // set new sort to applied grid sort state - this._appliedGridState.sort = newSortPairs[0]; - - return; - } else { - // clear applied grid sort state - this._appliedGridState.sort = undefined; - } - - // when grid doesn't have user applied sort but manager has from previous actions - if (this.filtersSortManager.hasAnySort()) { - // remove known sort if they are already set in the manager - const sortsForDeletion = GRID_SUPPORTED_EXECUTIONS_SORT_KEY.filter((criteria) => this.filtersSortManager.hasSort(criteria)).map( - (criteria) => [criteria, null] as ExecutionsSortPairs - ); - - if (sortsForDeletion.length > 0) { - this.filtersSortManager.bulkUpdate(sortsForDeletion.map(([criteria, value]) => [criteria, value, 'sort'])); - } - } + // when grid doesn't have user applied sort but manager has from previous actions + if (this.filtersSortManager.hasAnySort()) { + // remove known sort if they are already set in the manager + const sortsForDeletion = GRID_SUPPORTED_EXECUTIONS_SORT_KEY.filter( + (criteria) => this.filtersSortManager.hasSort(criteria), + ).map((criteria) => [criteria, null] as ExecutionsSortPairs); + + if (sortsForDeletion.length > 0) { + this.filtersSortManager.bulkUpdate( + sortsForDeletion.map(([criteria, value]) => [ + criteria, + value, + "sort", + ]), + ); + } } - - private _paginateExecutions(state: ClrDatagridStateInterface): void { - this.paginationPageNumber = state?.page?.current ?? 1; - this.paginationPageSize = state?.page?.size ?? 10; - - const pageSize = CollectionsUtil.isDefined(this.paginationPageSize) ? this.paginationPageSize : 10; - const pageNumber = CollectionsUtil.isDefined(this.paginationPageNumber) ? this.paginationPageNumber - 1 : 0; - const from = pageNumber * pageSize; - const to = (pageNumber + 1) * pageSize; - - this.paginatedJobExecutions = this.jobExecutions.slice(from, to); + } + + private _paginateExecutions(state: ClrDatagridStateInterface): void { + this.paginationPageNumber = state?.page?.current ?? 1; + this.paginationPageSize = state?.page?.size ?? 10; + + const pageSize = CollectionsUtil.isDefined(this.paginationPageSize) + ? this.paginationPageSize + : 10; + const pageNumber = CollectionsUtil.isDefined(this.paginationPageNumber) + ? this.paginationPageNumber - 1 + : 0; + const from = pageNumber * pageSize; + const to = (pageNumber + 1) * pageSize; + + this.paginatedJobExecutions = this.jobExecutions.slice(from, to); + } + + private _evaluateGridStateMutation(skipDebouncing = false): void { + if ( + this._previousAppliedGridState.filter.length !== + this._appliedGridState.filter.length || + this._previousAppliedGridState.sort !== this._appliedGridState.sort + ) { + this._emitGridCriteriaAndComparator(skipDebouncing); + + return; } - private _evaluateGridStateMutation(skipDebouncing = false): void { - if ( - this._previousAppliedGridState.filter.length !== this._appliedGridState.filter.length || - this._previousAppliedGridState.sort !== this._appliedGridState.sort - ) { - this._emitGridCriteriaAndComparator(skipDebouncing); - - return; - } - - if (this._previousAppliedGridState.filter.length === this._appliedGridState.filter.length) { - if (!CollectionsUtil.isEqual(this._previousAppliedGridState.filter, this._appliedGridState.filter)) { - this._emitGridCriteriaAndComparator(skipDebouncing); - - return; - } - } - - if (!CollectionsUtil.isEqual(this._previousAppliedGridState.sort, this._appliedGridState.sort)) { - this._emitGridCriteriaAndComparator(skipDebouncing); - - return; - } + if ( + this._previousAppliedGridState.filter.length === + this._appliedGridState.filter.length + ) { + if ( + !CollectionsUtil.isEqual( + this._previousAppliedGridState.filter, + this._appliedGridState.filter, + ) + ) { + this._emitGridCriteriaAndComparator(skipDebouncing); + + return; + } } - private _emitGridCriteriaAndComparator(skipDebouncing = false): void { - if (CollectionsUtil.isNumber(this._gridCriteriaAndComparatorEmitterTimeoutRef)) { - clearTimeout(this._gridCriteriaAndComparatorEmitterTimeoutRef); - - this._gridCriteriaAndComparatorEmitterTimeoutRef = null; - } - - if (skipDebouncing) { - this.gridCriteriaAndComparatorChanged.emit({ - filter: this._createFilterCriteria(), - sort: this._createSortComparator() - }); + if ( + !CollectionsUtil.isEqual( + this._previousAppliedGridState.sort, + this._appliedGridState.sort, + ) + ) { + this._emitGridCriteriaAndComparator(skipDebouncing); - return; - } + return; + } + } - this._gridCriteriaAndComparatorEmitterTimeoutRef = setTimeout(() => { - this.gridCriteriaAndComparatorChanged.emit({ - filter: this._createFilterCriteria(), - sort: this._createSortComparator() - }); + private _emitGridCriteriaAndComparator(skipDebouncing = false): void { + if ( + CollectionsUtil.isNumber(this._gridCriteriaAndComparatorEmitterTimeoutRef) + ) { + clearTimeout(this._gridCriteriaAndComparatorEmitterTimeoutRef); - this._gridCriteriaAndComparatorEmitterTimeoutRef = null; - }, 200); + this._gridCriteriaAndComparatorEmitterTimeoutRef = null; } - private _createFilterCriteria(): Criteria { - const criteria: Criteria[] = []; - - for (const filterPair of this._appliedGridState.filter) { - if (filterPair[0] === 'status') { - criteria.push(new ExecutionsStatusCriteria(filterPair[1])); + if (skipDebouncing) { + this.gridCriteriaAndComparatorChanged.emit({ + filter: this._createFilterCriteria(), + sort: this._createSortComparator(), + }); - continue; - } + return; + } - if (filterPair[0] === 'type') { - criteria.push(new ExecutionsTypeCriteria(filterPair[1])); + this._gridCriteriaAndComparatorEmitterTimeoutRef = setTimeout(() => { + this.gridCriteriaAndComparatorChanged.emit({ + filter: this._createFilterCriteria(), + sort: this._createSortComparator(), + }); - continue; - } + this._gridCriteriaAndComparatorEmitterTimeoutRef = null; + }, 200); + } - if (filterPair[0] === 'startTime') { - criteria.push(new ExecutionsStringCriteria('startTimeFormatted', filterPair[1])); + private _createFilterCriteria(): Criteria { + const criteria: Criteria[] = []; - continue; - } + for (const filterPair of this._appliedGridState.filter) { + if (filterPair[0] === "status") { + criteria.push(new ExecutionsStatusCriteria(filterPair[1])); - if (filterPair[0] === 'endTime') { - criteria.push(new ExecutionsStringCriteria('endTimeFormatted', filterPair[1])); + continue; + } - continue; - } + if (filterPair[0] === "type") { + criteria.push(new ExecutionsTypeCriteria(filterPair[1])); - criteria.push(new ExecutionsStringCriteria(filterPair[0], filterPair[1])); - } + continue; + } - return criteria.length > 0 ? new AndCriteria(...criteria) : null; - } + if (filterPair[0] === "startTime") { + criteria.push( + new ExecutionsStringCriteria("startTimeFormatted", filterPair[1]), + ); - private _createSortComparator(): Comparator { - if (CollectionsUtil.isDefined(this._appliedGridState.sort)) { - const [sortCriteria, sortValue] = this._appliedGridState.sort; + continue; + } - if (sortCriteria === 'duration') { - return new ExecutionDurationComparator(sortValue === ClrDatagridSortOrder.ASC ? 'ASC' : 'DESC'); - } + if (filterPair[0] === "endTime") { + criteria.push( + new ExecutionsStringCriteria("endTimeFormatted", filterPair[1]), + ); - if (sortCriteria === 'startTime' || sortCriteria === 'endTime') { - return new ExecutionDateComparator(sortCriteria, sortValue === ClrDatagridSortOrder.ASC ? 'ASC' : 'DESC'); - } + continue; + } - return new ExecutionDefaultComparator(sortCriteria, sortValue === ClrDatagridSortOrder.ASC ? 'ASC' : 'DESC'); - } + criteria.push(new ExecutionsStringCriteria(filterPair[0], filterPair[1])); + } - return null; + return criteria.length > 0 ? new AndCriteria(...criteria) : null; + } + + private _createSortComparator(): Comparator { + if (CollectionsUtil.isDefined(this._appliedGridState.sort)) { + const [sortCriteria, sortValue] = this._appliedGridState.sort; + + if (sortCriteria === "duration") { + return new ExecutionDurationComparator( + sortValue === ClrDatagridSortOrder.ASC ? "ASC" : "DESC", + ); + } + + if (sortCriteria === "startTime" || sortCriteria === "endTime") { + return new ExecutionDateComparator( + sortCriteria, + sortValue === ClrDatagridSortOrder.ASC ? "ASC" : "DESC", + ); + } + + return new ExecutionDefaultComparator( + sortCriteria, + sortValue === ClrDatagridSortOrder.ASC ? "ASC" : "DESC", + ); } + + return null; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/index.ts index 5d9800f779..0c5995f577 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-grid/index.ts @@ -3,5 +3,5 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-job-executions-grid.component'; -export * from './comparators/duration/execution-duration.comparator'; +export * from "./data-job-executions-grid.component"; +export * from "./comparators/duration/execution-duration.comparator"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/criteria/time-period/executions-time-period.criteria.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/criteria/time-period/executions-time-period.criteria.spec.ts index e39c464096..29672eeb1b 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/criteria/time-period/executions-time-period.criteria.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/criteria/time-period/executions-time-period.criteria.spec.ts @@ -3,144 +3,180 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { DatePipe } from '@angular/common'; - -import { TestBed } from '@angular/core/testing'; - -import { DATA_PIPELINES_DATE_TIME_FORMAT, DataJobExecutionStatus, DataJobExecutionType } from '../../../../../../../model'; - -import { GridDataJobExecution } from '../../../model'; - -import { ExecutionsTimePeriodCriteria } from './executions-time-period.criteria'; - -describe('ExecutionsTimePeriodCriteria', () => { - let datePipe: DatePipe; - let dataJobExecutions: GridDataJobExecution[]; - - let aStartTime: Date; - let bStartTime: Date; - let cStartTime: Date; - - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [DatePipe] - }); - - datePipe = TestBed.inject(DatePipe); - - const currentTime = new Date(); - - aStartTime = new Date(currentTime.getTime() + 10); - const aEndTime = new Date(aStartTime.getTime() + 110); - bStartTime = new Date(currentTime.getTime() + 20); - const bEndTime = new Date(bStartTime.getTime() + 120); - cStartTime = new Date(currentTime.getTime() + 30); - const cEndTime = new Date(cStartTime.getTime() + 130); - - dataJobExecutions = [ - { - id: 'aJob', - startTimeFormatted: datePipe.transform(aStartTime, DATA_PIPELINES_DATE_TIME_FORMAT), - startTime: aStartTime.toISOString(), - endTimeFormatted: datePipe.transform(aEndTime, DATA_PIPELINES_DATE_TIME_FORMAT), - endTime: aEndTime.toISOString(), - duration: '100', - jobVersion: '', - status: DataJobExecutionStatus.SUCCEEDED, - type: DataJobExecutionType.SCHEDULED - }, - { - id: 'bJob', - startTimeFormatted: datePipe.transform(bStartTime, DATA_PIPELINES_DATE_TIME_FORMAT), - startTime: bStartTime.toISOString(), - endTimeFormatted: datePipe.transform(bEndTime, DATA_PIPELINES_DATE_TIME_FORMAT), - endTime: bEndTime.toISOString(), - duration: '110', - jobVersion: '', - status: DataJobExecutionStatus.RUNNING, - type: DataJobExecutionType.SCHEDULED - }, - { - id: 'cJob', - startTimeFormatted: datePipe.transform(cStartTime, DATA_PIPELINES_DATE_TIME_FORMAT), - startTime: cStartTime.toISOString(), - endTimeFormatted: datePipe.transform(cEndTime, DATA_PIPELINES_DATE_TIME_FORMAT), - endTime: cEndTime.toISOString(), - duration: '120', - jobVersion: '', - status: DataJobExecutionStatus.PLATFORM_ERROR, - type: DataJobExecutionType.MANUAL - } - ]; - }); - - describe('Methods::', () => { - describe('|meetCriteria|', () => { - it('should verify will return Array with aJob and bJob', () => { - // Given - const instance = new ExecutionsTimePeriodCriteria(aStartTime, bStartTime); - - // When - const res = instance.meetCriteria(dataJobExecutions); - - // Then - expect(res).toEqual([dataJobExecutions[0], dataJobExecutions[1]]); - }); - - it('should verify will return Array with cJob', () => { - // Given - const instance = new ExecutionsTimePeriodCriteria(cStartTime, cStartTime); - - // When - const res = instance.meetCriteria(dataJobExecutions); +import { DatePipe } from "@angular/common"; - // Then - expect(res).toEqual([dataJobExecutions[2]]); - }); +import { TestBed } from "@angular/core/testing"; - it('should verify will return empty Array when startTime is Nil', () => { - // Given - const instance = new ExecutionsTimePeriodCriteria(aStartTime, cStartTime); +import { + DATA_PIPELINES_DATE_TIME_FORMAT, + DataJobExecutionStatus, + DataJobExecutionType, +} from "../../../../../../../model"; - // When - const res = instance.meetCriteria(dataJobExecutions.map((ex) => ({ ...ex, startTime: null }))); +import { GridDataJobExecution } from "../../../model"; - // Then - expect(res).toEqual([]); - }); +import { ExecutionsTimePeriodCriteria } from "./executions-time-period.criteria"; - it('should verify will return Array with all Jobs when from time is Nil', () => { - // Given - const instance = new ExecutionsTimePeriodCriteria(null, cStartTime); +describe("ExecutionsTimePeriodCriteria", () => { + let datePipe: DatePipe; + let dataJobExecutions: GridDataJobExecution[]; - // When - const res = instance.meetCriteria(dataJobExecutions); + let aStartTime: Date; + let bStartTime: Date; + let cStartTime: Date; - // Then - expect(res).toEqual(dataJobExecutions); - }); - - it('should verify will return Array with all Jobs when to time is Nil', () => { - // Given - const instance = new ExecutionsTimePeriodCriteria(aStartTime, null); - - // When - const res = instance.meetCriteria(dataJobExecutions); - - // Then - expect(res).toEqual(dataJobExecutions); - }); - - it('should verify will return empty Array when Executions are Nil', () => { - // Given - const instance = new ExecutionsTimePeriodCriteria(aStartTime, cStartTime); - - // When - const res = instance.meetCriteria(null); + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [DatePipe], + }); - // Then - expect(res).toEqual([]); - }); - }); + datePipe = TestBed.inject(DatePipe); + + const currentTime = new Date(); + + aStartTime = new Date(currentTime.getTime() + 10); + const aEndTime = new Date(aStartTime.getTime() + 110); + bStartTime = new Date(currentTime.getTime() + 20); + const bEndTime = new Date(bStartTime.getTime() + 120); + cStartTime = new Date(currentTime.getTime() + 30); + const cEndTime = new Date(cStartTime.getTime() + 130); + + dataJobExecutions = [ + { + id: "aJob", + startTimeFormatted: datePipe.transform( + aStartTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + startTime: aStartTime.toISOString(), + endTimeFormatted: datePipe.transform( + aEndTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + endTime: aEndTime.toISOString(), + duration: "100", + jobVersion: "", + status: DataJobExecutionStatus.SUCCEEDED, + type: DataJobExecutionType.SCHEDULED, + }, + { + id: "bJob", + startTimeFormatted: datePipe.transform( + bStartTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + startTime: bStartTime.toISOString(), + endTimeFormatted: datePipe.transform( + bEndTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + endTime: bEndTime.toISOString(), + duration: "110", + jobVersion: "", + status: DataJobExecutionStatus.RUNNING, + type: DataJobExecutionType.SCHEDULED, + }, + { + id: "cJob", + startTimeFormatted: datePipe.transform( + cStartTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + startTime: cStartTime.toISOString(), + endTimeFormatted: datePipe.transform( + cEndTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + ), + endTime: cEndTime.toISOString(), + duration: "120", + jobVersion: "", + status: DataJobExecutionStatus.PLATFORM_ERROR, + type: DataJobExecutionType.MANUAL, + }, + ]; + }); + + describe("Methods::", () => { + describe("|meetCriteria|", () => { + it("should verify will return Array with aJob and bJob", () => { + // Given + const instance = new ExecutionsTimePeriodCriteria( + aStartTime, + bStartTime, + ); + + // When + const res = instance.meetCriteria(dataJobExecutions); + + // Then + expect(res).toEqual([dataJobExecutions[0], dataJobExecutions[1]]); + }); + + it("should verify will return Array with cJob", () => { + // Given + const instance = new ExecutionsTimePeriodCriteria( + cStartTime, + cStartTime, + ); + + // When + const res = instance.meetCriteria(dataJobExecutions); + + // Then + expect(res).toEqual([dataJobExecutions[2]]); + }); + + it("should verify will return empty Array when startTime is Nil", () => { + // Given + const instance = new ExecutionsTimePeriodCriteria( + aStartTime, + cStartTime, + ); + + // When + const res = instance.meetCriteria( + dataJobExecutions.map((ex) => ({ ...ex, startTime: null })), + ); + + // Then + expect(res).toEqual([]); + }); + + it("should verify will return Array with all Jobs when from time is Nil", () => { + // Given + const instance = new ExecutionsTimePeriodCriteria(null, cStartTime); + + // When + const res = instance.meetCriteria(dataJobExecutions); + + // Then + expect(res).toEqual(dataJobExecutions); + }); + + it("should verify will return Array with all Jobs when to time is Nil", () => { + // Given + const instance = new ExecutionsTimePeriodCriteria(aStartTime, null); + + // When + const res = instance.meetCriteria(dataJobExecutions); + + // Then + expect(res).toEqual(dataJobExecutions); + }); + + it("should verify will return empty Array when Executions are Nil", () => { + // Given + const instance = new ExecutionsTimePeriodCriteria( + aStartTime, + cStartTime, + ); + + // When + const res = instance.meetCriteria(null); + + // Then + expect(res).toEqual([]); + }); }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/criteria/time-period/executions-time-period.criteria.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/criteria/time-period/executions-time-period.criteria.ts index 1ba07087d6..f9ed63fa97 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/criteria/time-period/executions-time-period.criteria.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/criteria/time-period/executions-time-period.criteria.ts @@ -3,41 +3,47 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { CollectionsUtil, Criteria } from '@versatiledatakit/shared'; +import { CollectionsUtil, Criteria } from "@versatiledatakit/shared"; -import { GridDataJobExecution } from '../../../model'; +import { GridDataJobExecution } from "../../../model"; /** * ** Executions Time Period filter criteria. */ export class ExecutionsTimePeriodCriteria implements Criteria { - private readonly _fromDateTime: Date; - private readonly _toDateTime: Date; - - /** - * ** Constructor. - */ - constructor(fromDateTime: Date, toDateTime: Date) { - this._fromDateTime = fromDateTime; - this._toDateTime = toDateTime; - } - - /** - * @inheritDoc - */ - meetCriteria(executions: GridDataJobExecution[]): GridDataJobExecution[] { - return [...(executions ?? [])].filter((execution) => { - if (CollectionsUtil.isNil(this._fromDateTime) || CollectionsUtil.isNil(this._toDateTime)) { - return true; - } - - if (!CollectionsUtil.isString(execution.startTime)) { - return false; - } - - const startTime = new Date(execution.startTime).getTime(); - - return this._fromDateTime.getTime() <= startTime && startTime <= this._toDateTime.getTime(); - }); - } + private readonly _fromDateTime: Date; + private readonly _toDateTime: Date; + + /** + * ** Constructor. + */ + constructor(fromDateTime: Date, toDateTime: Date) { + this._fromDateTime = fromDateTime; + this._toDateTime = toDateTime; + } + + /** + * @inheritDoc + */ + meetCriteria(executions: GridDataJobExecution[]): GridDataJobExecution[] { + return [...(executions ?? [])].filter((execution) => { + if ( + CollectionsUtil.isNil(this._fromDateTime) || + CollectionsUtil.isNil(this._toDateTime) + ) { + return true; + } + + if (!CollectionsUtil.isString(execution.startTime)) { + return false; + } + + const startTime = new Date(execution.startTime).getTime(); + + return ( + this._fromDateTime.getTime() <= startTime && + startTime <= this._toDateTime.getTime() + ); + }); + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/criteria/time-period/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/criteria/time-period/index.ts index 988b1da474..5e1f2d90fe 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/criteria/time-period/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/criteria/time-period/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './executions-time-period.criteria'; +export * from "./executions-time-period.criteria"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/data-job-executions-page.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/data-job-executions-page.component.html index dc538ab13e..6400066f93 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/data-job-executions-page.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/data-job-executions-page.component.html @@ -4,9 +4,9 @@ --> -
-
- - -
-
- -
+
+
+ +
+
- -
-
- - -
-
- - -
-
-
-
- - -
-
- + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ -

No executions found.

+

No executions found.

 - - + + - + diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/data-job-executions-page.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/data-job-executions-page.component.scss index 69c41ea9ef..e8b9d87f96 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/data-job-executions-page.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/data-job-executions-page.component.scss @@ -4,28 +4,28 @@ */ :host { - position: relative; - display: block; - width: 100%; - height: 100%; + position: relative; + display: block; + width: 100%; + height: 100%; - .time-filter__container { - display: flex; - align-items: center; - flex: 1; - justify-content: flex-end; - height: 2.5rem; - } + .time-filter__container { + display: flex; + align-items: center; + flex: 1; + justify-content: flex-end; + height: 2.5rem; + } - .execution-statuses-chart { - padding-right: 0 !important; - } + .execution-statuses-chart { + padding-right: 0 !important; + } - .job-executions__spinner { - left: 50%; - position: absolute; - top: 50%; - z-index: 1000; - transform: translate(-50%, -50%); - } + .job-executions__spinner { + left: 50%; + position: absolute; + top: 50%; + z-index: 1000; + transform: translate(-50%, -50%); + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/data-job-executions-page.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/data-job-executions-page.component.ts index afbb03d29a..60bb834af8 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/data-job-executions-page.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/data-job-executions-page.component.ts @@ -3,425 +3,491 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core'; -import { DatePipe, Location } from '@angular/common'; -import { ActivatedRoute, Router } from '@angular/router'; +import { ChangeDetectorRef, Component, OnDestroy, OnInit } from "@angular/core"; +import { DatePipe, Location } from "@angular/common"; +import { ActivatedRoute, Router } from "@angular/router"; -import { distinctUntilChanged, map } from 'rxjs/operators'; +import { distinctUntilChanged, map } from "rxjs/operators"; -import { ClrDatagridSortOrder } from '@clr/angular'; +import { ClrDatagridSortOrder } from "@clr/angular"; import { - ASC, - CollectionsUtil, - ComponentModel, - ComponentService, - Criteria, - ErrorHandlerService, - ErrorRecord, - NavigationService, - OnTaurusModelChange, - OnTaurusModelError, - OnTaurusModelInit, - OnTaurusModelLoad, - RouterService, - RouteState, - TaurusBaseComponent, - URLStateManager -} from '@versatiledatakit/shared'; - -import { DataJobUtil, ErrorUtil } from '../../../../../shared/utils'; - -import { FiltersSortManager } from '../../../../../commons'; + ASC, + CollectionsUtil, + ComponentModel, + ComponentService, + Criteria, + ErrorHandlerService, + ErrorRecord, + NavigationService, + OnTaurusModelChange, + OnTaurusModelError, + OnTaurusModelInit, + OnTaurusModelLoad, + RouterService, + RouteState, + TaurusBaseComponent, + URLStateManager, +} from "@versatiledatakit/shared"; + +import { DataJobUtil, ErrorUtil } from "../../../../../shared/utils"; + +import { FiltersSortManager } from "../../../../../commons"; import { - DataJobExecutionOrder, - DataJobExecutions, - DataPipelinesRouteData, - JOB_EXECUTIONS_DATA_KEY, - JOB_NAME_REQ_PARAM, - ORDER_REQ_PARAM, - TEAM_NAME_REQ_PARAM -} from '../../../../../model'; + DataJobExecutionOrder, + DataJobExecutions, + DataPipelinesRouteData, + JOB_EXECUTIONS_DATA_KEY, + JOB_NAME_REQ_PARAM, + ORDER_REQ_PARAM, + TEAM_NAME_REQ_PARAM, +} from "../../../../../model"; -import { TASK_LOAD_JOB_EXECUTIONS } from '../../../../../state/tasks'; +import { TASK_LOAD_JOB_EXECUTIONS } from "../../../../../state/tasks"; -import { LOAD_JOB_ERROR_CODES } from '../../../../../state/error-codes'; +import { LOAD_JOB_ERROR_CODES } from "../../../../../state/error-codes"; -import { DataJobsService } from '../../../../../services'; +import { DataJobsService } from "../../../../../services"; -import { DataJobExecutionToGridDataJobExecution, GridDataJobExecution } from '../model/data-job-execution'; +import { + DataJobExecutionToGridDataJobExecution, + GridDataJobExecution, +} from "../model/data-job-execution"; import { - ExecutionsFilterCriteria, - ExecutionsFilterSortObject, - ExecutionsSortCriteria, - SORT_START_TIME_KEY, - SUPPORTED_EXECUTIONS_FILTER_CRITERIA, - SUPPORTED_EXECUTIONS_SORT_CRITERIA -} from '../model/executions-filters.model'; + ExecutionsFilterCriteria, + ExecutionsFilterSortObject, + ExecutionsSortCriteria, + SORT_START_TIME_KEY, + SUPPORTED_EXECUTIONS_FILTER_CRITERIA, + SUPPORTED_EXECUTIONS_SORT_CRITERIA, +} from "../model/executions-filters.model"; -import { GridCriteriaAndComparator } from '../data-job-executions-grid'; +import { GridCriteriaAndComparator } from "../data-job-executions-grid"; -import { ExecutionsTimePeriodCriteria } from './criteria/time-period'; +import { ExecutionsTimePeriodCriteria } from "./criteria/time-period"; interface SelectedDateTimePeriod { - from: Date; - to: Date; + from: Date; + to: Date; } @Component({ - selector: 'lib-data-job-executions-page', - templateUrl: './data-job-executions-page.component.html', - styleUrls: ['./data-job-executions-page.component.scss'], - providers: [DatePipe] + selector: "lib-data-job-executions-page", + templateUrl: "./data-job-executions-page.component.html", + styleUrls: ["./data-job-executions-page.component.scss"], + providers: [DatePipe], }) export class DataJobExecutionsPageComponent - extends TaurusBaseComponent - implements OnTaurusModelInit, OnTaurusModelLoad, OnTaurusModelChange, OnTaurusModelError, OnInit, OnDestroy + extends TaurusBaseComponent + implements + OnTaurusModelInit, + OnTaurusModelLoad, + OnTaurusModelChange, + OnTaurusModelError, + OnInit, + OnDestroy { - readonly uuid = 'DataJobExecutionsPageComponent'; - - teamName: string; - jobName: string; - isJobEditable = false; - - jobExecutions: GridDataJobExecution[] = []; - filteredJobExecutions: GridDataJobExecution[] = []; - minJobExecutionTime: Date; - loading = true; - initialLoading = true; - - /** - * ** Selected DateTime period in time period filter. - */ - selectedPeriod: SelectedDateTimePeriod = { - from: null, - to: null - }; - - /** - * ** Indicates whether time filter is chosen, period is selected. - */ - isPeriodSelected = false; - - /** - * ** Zoomed DateTime period, in duration chart. - */ - zoomedPeriod: SelectedDateTimePeriod = { - from: null, - to: null - }; - - /** - * ** Focused (highlighted) execution id in duration chart. - */ - highlightedExecutionId: string; - - /** - * ** Grid Criteria and Comparator from Executions Data Grid. - */ - gridCriteriaAndComparator: GridCriteriaAndComparator; - - /** - * ** Array of error code patterns that component should listen for in errors store. - */ - listenForErrorPatterns: string[] = [LOAD_JOB_ERROR_CODES[TASK_LOAD_JOB_EXECUTIONS].All]; - - /** - * ** Flag that indicates there is jobs executions load error. - */ - isComponentInErrorState = false; - - /** - * ** Executions filters sort manager for this page, that is injected to its children. - * - * - Singleton for the page instance including its children. - */ - readonly filtersSortManager: Readonly< - FiltersSortManager - >; - - /** - * ** Url state manager in context of this page. - * - * - Singleton for the page instance including its children. - */ - private readonly urlStateManager: URLStateManager; - - /** - * ** Constructor. - */ - constructor( - componentService: ComponentService, - navigationService: NavigationService, - activatedRoute: ActivatedRoute, - private readonly routerService: RouterService, - private readonly dataJobsService: DataJobsService, - private readonly errorHandlerService: ErrorHandlerService, - private readonly changeDetectorRef: ChangeDetectorRef, - private readonly router: Router, - private readonly location: Location, - private readonly datePipe: DatePipe + readonly uuid = "DataJobExecutionsPageComponent"; + + teamName: string; + jobName: string; + isJobEditable = false; + + jobExecutions: GridDataJobExecution[] = []; + filteredJobExecutions: GridDataJobExecution[] = []; + minJobExecutionTime: Date; + loading = true; + initialLoading = true; + + /** + * ** Selected DateTime period in time period filter. + */ + selectedPeriod: SelectedDateTimePeriod = { + from: null, + to: null, + }; + + /** + * ** Indicates whether time filter is chosen, period is selected. + */ + isPeriodSelected = false; + + /** + * ** Zoomed DateTime period, in duration chart. + */ + zoomedPeriod: SelectedDateTimePeriod = { + from: null, + to: null, + }; + + /** + * ** Focused (highlighted) execution id in duration chart. + */ + highlightedExecutionId: string; + + /** + * ** Grid Criteria and Comparator from Executions Data Grid. + */ + gridCriteriaAndComparator: GridCriteriaAndComparator; + + /** + * ** Array of error code patterns that component should listen for in errors store. + */ + listenForErrorPatterns: string[] = [ + LOAD_JOB_ERROR_CODES[TASK_LOAD_JOB_EXECUTIONS].All, + ]; + + /** + * ** Flag that indicates there is jobs executions load error. + */ + isComponentInErrorState = false; + + /** + * ** Executions filters sort manager for this page, that is injected to its children. + * + * - Singleton for the page instance including its children. + */ + readonly filtersSortManager: Readonly< + FiltersSortManager< + ExecutionsFilterCriteria, + string, + ExecutionsSortCriteria, + ClrDatagridSortOrder + > + >; + + /** + * ** Url state manager in context of this page. + * + * - Singleton for the page instance including its children. + */ + private readonly urlStateManager: URLStateManager; + + /** + * ** Constructor. + */ + constructor( + componentService: ComponentService, + navigationService: NavigationService, + activatedRoute: ActivatedRoute, + private readonly routerService: RouterService, + private readonly dataJobsService: DataJobsService, + private readonly errorHandlerService: ErrorHandlerService, + private readonly changeDetectorRef: ChangeDetectorRef, + private readonly router: Router, + private readonly location: Location, + private readonly datePipe: DatePipe, + ) { + super(componentService, navigationService, activatedRoute); + + this.urlStateManager = new URLStateManager( + router.url.split("?")[0], + location, + ); + this.filtersSortManager = new FiltersSortManager( + this.urlStateManager, + SUPPORTED_EXECUTIONS_FILTER_CRITERIA, + SUPPORTED_EXECUTIONS_SORT_CRITERIA, + ); + } + + doNavigateBack(): void { + // eslint-disable-next-line @typescript-eslint/no-floating-promises + this.navigateBack({ "$.team": this.teamName }).then(); + } + + timeFilterChange(selectedPeriod: SelectedDateTimePeriod): void { + if ( + this.selectedPeriod.from === selectedPeriod.from && + this.selectedPeriod.to === selectedPeriod.to ) { - super(componentService, navigationService, activatedRoute); - - this.urlStateManager = new URLStateManager(router.url.split('?')[0], location); - this.filtersSortManager = new FiltersSortManager( - this.urlStateManager, - SUPPORTED_EXECUTIONS_FILTER_CRITERIA, - SUPPORTED_EXECUTIONS_SORT_CRITERIA - ); + return; } - doNavigateBack(): void { - // eslint-disable-next-line @typescript-eslint/no-floating-promises - this.navigateBack({ '$.team': this.teamName }).then(); - } - - timeFilterChange(selectedPeriod: SelectedDateTimePeriod): void { - if (this.selectedPeriod.from === selectedPeriod.from && this.selectedPeriod.to === selectedPeriod.to) { - return; - } + this.selectedPeriod = selectedPeriod; - this.selectedPeriod = selectedPeriod; + this.isPeriodSelected = + this.selectedPeriod.from !== null && this.selectedPeriod.to !== null; - this.isPeriodSelected = this.selectedPeriod.from !== null && this.selectedPeriod.to !== null; + this._filterExecutions(); + } - this._filterExecutions(); - } + /** + * ** Executed whenever focus on execution id in duration chart changes. + */ + durationChartExecutionIdFocusChange(executionId: string): void { + this.highlightedExecutionId = executionId; + } - /** - * ** Executed whenever focus on execution id in duration chart changes. - */ - durationChartExecutionIdFocusChange(executionId: string): void { - this.highlightedExecutionId = executionId; - } - - durationChartZoomPeriodChange(zoomedPeriod: SelectedDateTimePeriod): void { - if ( - this.selectedPeriod.from === zoomedPeriod.from && - this.selectedPeriod.to === zoomedPeriod.to && - this.zoomedPeriod.from === zoomedPeriod.from && - this.zoomedPeriod.to === zoomedPeriod.to - ) { - return; - } - - this.zoomedPeriod = zoomedPeriod; - } - - gridCriteriaAndComparatorChange($event: GridCriteriaAndComparator): void { - this.gridCriteriaAndComparator = $event; - - this._filterExecutions(); - } - - refresh(): void { - this.fetchDataJobExecutions(); - } - - fetchDataJobExecutions(): void { - this.loading = true; - - this.dataJobsService.loadJobExecutions( - this.model - .withRequestParam(TEAM_NAME_REQ_PARAM, this.teamName) - .withRequestParam(JOB_NAME_REQ_PARAM, this.jobName) - .withRequestParam(ORDER_REQ_PARAM, { - property: 'startTime', - direction: ASC - } as DataJobExecutionOrder) - ); - - this.changeDetectorRef.markForCheck(); + durationChartZoomPeriodChange(zoomedPeriod: SelectedDateTimePeriod): void { + if ( + this.selectedPeriod.from === zoomedPeriod.from && + this.selectedPeriod.to === zoomedPeriod.to && + this.zoomedPeriod.from === zoomedPeriod.from && + this.zoomedPeriod.to === zoomedPeriod.to + ) { + return; } - /** - * @inheritDoc - */ - onModelInit(): void { - let isInitialized = false; - - this.subscriptions.push( - this.routerService - .getState() - .pipe( - distinctUntilChanged((a, b) => { - return CollectionsUtil.isEqual(a.queryParams, b.queryParams); - }) - ) - .subscribe((state) => { - if (!isInitialized) { - isInitialized = true; - - this._initialize(state); - } else { - // pass query params for popped state and let manager extract known filters and sort - // action is needed for Browser backward/forward actions that trigger router navigation - // tested only for "locationToUrl" update strategy for URLStateManager - this.filtersSortManager.bulkUpdate(state.queryParams as ExecutionsFilterSortObject, true); - } - }) + this.zoomedPeriod = zoomedPeriod; + } + + gridCriteriaAndComparatorChange($event: GridCriteriaAndComparator): void { + this.gridCriteriaAndComparator = $event; + + this._filterExecutions(); + } + + refresh(): void { + this.fetchDataJobExecutions(); + } + + fetchDataJobExecutions(): void { + this.loading = true; + + this.dataJobsService.loadJobExecutions( + this.model + .withRequestParam(TEAM_NAME_REQ_PARAM, this.teamName) + .withRequestParam(JOB_NAME_REQ_PARAM, this.jobName) + .withRequestParam(ORDER_REQ_PARAM, { + property: "startTime", + direction: ASC, + } as DataJobExecutionOrder), + ); + + this.changeDetectorRef.markForCheck(); + } + + /** + * @inheritDoc + */ + onModelInit(): void { + let isInitialized = false; + + this.subscriptions.push( + this.routerService + .getState() + .pipe( + distinctUntilChanged((a, b) => { + return CollectionsUtil.isEqual(a.queryParams, b.queryParams); + }), + ) + .subscribe((state) => { + if (!isInitialized) { + isInitialized = true; + + this._initialize(state); + } else { + // pass query params for popped state and let manager extract known filters and sort + // action is needed for Browser backward/forward actions that trigger router navigation + // tested only for "locationToUrl" update strategy for URLStateManager + this.filtersSortManager.bulkUpdate( + state.queryParams as ExecutionsFilterSortObject, + true, + ); + } + }), + ); + } + + /** + * @inheritDoc + */ + onModelLoad(): void { + this.loading = false; + this.initialLoading = false; + } + + /** + * @inheritDoc + */ + onModelChange(model: ComponentModel, task: string): void { + if (task === TASK_LOAD_JOB_EXECUTIONS) { + const executions: DataJobExecutions = model + .getComponentState() + .data.get(JOB_EXECUTIONS_DATA_KEY); + if (executions) { + this.dataJobsService.notifyForJobExecutions([...executions]); + + // eslint-disable-next-line @typescript-eslint/unbound-method + const runningExecution = executions.find( + DataJobUtil.isJobRunningPredicate, ); - } - - /** - * @inheritDoc - */ - onModelLoad(): void { - this.loading = false; - this.initialLoading = false; - } - - /** - * @inheritDoc - */ - onModelChange(model: ComponentModel, task: string): void { - if (task === TASK_LOAD_JOB_EXECUTIONS) { - const executions: DataJobExecutions = model.getComponentState().data.get(JOB_EXECUTIONS_DATA_KEY); - if (executions) { - this.dataJobsService.notifyForJobExecutions([...executions]); - - // eslint-disable-next-line @typescript-eslint/unbound-method - const runningExecution = executions.find(DataJobUtil.isJobRunningPredicate); - if (runningExecution) { - this.dataJobsService.notifyForRunningJobExecutionId(runningExecution.id); - } - } + if (runningExecution) { + this.dataJobsService.notifyForRunningJobExecutionId( + runningExecution.id, + ); } + } } - - /** - * @inheritDoc - */ - onModelError(model: ComponentModel, _task: string, newErrorRecords: ErrorRecord[]): void { - newErrorRecords.forEach((errorRecord) => { - const error = ErrorUtil.extractError(errorRecord.error); - - this.errorHandlerService.processError(error); - }); - } - - /** - * @inheritDoc - */ - override ngOnInit(): void { - // attach listener to ErrorStore and listen for Errors change - this.errors.onChange((store) => { - // if there is record for listened error code patterns set component in error state - this.isComponentInErrorState = store.hasCodePattern(...this.listenForErrorPatterns); - }); - - super.ngOnInit(); - } - - /** - * @inheritDoc - */ - override ngOnDestroy(): void { - this.filtersSortManager.cancelScheduledBrowserUrlUpdate(); - - super.ngOnDestroy(); - } - - private _initialize(state: RouteState): void { - const teamParamKey = state.getData('teamParamKey'); - this.teamName = state.getParam(teamParamKey); - - const jobParamKey = state.getData('jobParamKey'); - this.jobName = state.getParam(jobParamKey); - - this.isJobEditable = !!state.getData('editable'); - - // filters/sort manager have to be initialized before sending HTTP request to load executions - this._initializeFiltersSortManager(state); - - this._subscribeForExecutions(); - - this.fetchDataJobExecutions(); + } + + /** + * @inheritDoc + */ + onModelError( + model: ComponentModel, + _task: string, + newErrorRecords: ErrorRecord[], + ): void { + newErrorRecords.forEach((errorRecord) => { + const error = ErrorUtil.extractError(errorRecord.error); + + this.errorHandlerService.processError(error); + }); + } + + /** + * @inheritDoc + */ + override ngOnInit(): void { + // attach listener to ErrorStore and listen for Errors change + this.errors.onChange((store) => { + // if there is record for listened error code patterns set component in error state + this.isComponentInErrorState = store.hasCodePattern( + ...this.listenForErrorPatterns, + ); + }); + + super.ngOnInit(); + } + + /** + * @inheritDoc + */ + override ngOnDestroy(): void { + this.filtersSortManager.cancelScheduledBrowserUrlUpdate(); + + super.ngOnDestroy(); + } + + private _initialize(state: RouteState): void { + const teamParamKey = + state.getData("teamParamKey"); + this.teamName = state.getParam(teamParamKey); + + const jobParamKey = + state.getData("jobParamKey"); + this.jobName = state.getParam(jobParamKey); + + this.isJobEditable = + !!state.getData("editable"); + + // filters/sort manager have to be initialized before sending HTTP request to load executions + this._initializeFiltersSortManager(state); + + this._subscribeForExecutions(); + + this.fetchDataJobExecutions(); + } + + private _initializeFiltersSortManager(state: RouteState): void { + // update manager configuration + this.filtersSortManager.changeBaseUrl(state.absoluteRoutePath); + this.filtersSortManager.changeUpdateStrategy("locationToURL"); + + // update stored filters and sort criteria from Browser URL query params + this.filtersSortManager.bulkUpdate( + state.queryParams as ExecutionsFilterSortObject, + ); + + // if there is no sort applied through Browser URL, apply default sorting by Start Time Descending + if (!this.filtersSortManager.hasAnySort()) { + this.filtersSortManager.setSort( + SORT_START_TIME_KEY, + ClrDatagridSortOrder.DESC, + ); } - private _initializeFiltersSortManager(state: RouteState): void { - // update manager configuration - this.filtersSortManager.changeBaseUrl(state.absoluteRoutePath); - this.filtersSortManager.changeUpdateStrategy('locationToURL'); - - // update stored filters and sort criteria from Browser URL query params - this.filtersSortManager.bulkUpdate(state.queryParams as ExecutionsFilterSortObject); - - // if there is no sort applied through Browser URL, apply default sorting by Start Time Descending - if (!this.filtersSortManager.hasAnySort()) { - this.filtersSortManager.setSort(SORT_START_TIME_KEY, ClrDatagridSortOrder.DESC); - } - - // update Browser URL with replace state, normalized to only manager known criteria - this.filtersSortManager.updateBrowserUrl('replaceToURL', true); + // update Browser URL with replace state, normalized to only manager known criteria + this.filtersSortManager.updateBrowserUrl("replaceToURL", true); + } + + private _subscribeForExecutions(): void { + this.subscriptions.push( + this.dataJobsService + .getNotifiedForJobExecutions() + .pipe( + map( + DataJobExecutionToGridDataJobExecution.convertToDataJobExecution( + this.datePipe, + ), + ), + ) + .subscribe({ + next: (values) => { + this.jobExecutions = values; + + this._filterExecutions(); + + if (this.jobExecutions.length > 0) { + const oldestExecutionStartTime = [...this.jobExecutions] + .sort((ex1, ex2) => (ex1.startTime < ex2.startTime ? 1 : -1)) + .pop().startTime; + const newMinJobExecutionsTime = new Date( + oldestExecutionStartTime, + ); + + if ( + CollectionsUtil.isNil(this.minJobExecutionTime) || + newMinJobExecutionsTime.getTime() - + this.minJobExecutionTime.getTime() !== + 0 + ) { + this.minJobExecutionTime = newMinJobExecutionsTime; + } + } else { + this.minJobExecutionTime = null; + } + }, + error: (error: unknown) => { + console.error(error); + }, + }), + ); + } + + private _filterExecutions(): void { + let timePeriodCriteria: Criteria; + let executionsFilteredAndSorted: GridDataJobExecution[]; + + if ( + CollectionsUtil.isDefined(this.selectedPeriod.from) && + CollectionsUtil.isDefined(this.selectedPeriod.to) + ) { + timePeriodCriteria = new ExecutionsTimePeriodCriteria( + this.selectedPeriod.from, + this.selectedPeriod.to, + ); + // execute filter by time period + executionsFilteredAndSorted = timePeriodCriteria.meetCriteria( + this.jobExecutions, + ); + } else { + executionsFilteredAndSorted = [...this.jobExecutions]; } - private _subscribeForExecutions(): void { - this.subscriptions.push( - this.dataJobsService - .getNotifiedForJobExecutions() - .pipe(map(DataJobExecutionToGridDataJobExecution.convertToDataJobExecution(this.datePipe))) - .subscribe({ - next: (values) => { - this.jobExecutions = values; - - this._filterExecutions(); - - if (this.jobExecutions.length > 0) { - const oldestExecutionStartTime = [...this.jobExecutions] - .sort((ex1, ex2) => (ex1.startTime < ex2.startTime ? 1 : -1)) - .pop().startTime; - const newMinJobExecutionsTime = new Date(oldestExecutionStartTime); - - if ( - CollectionsUtil.isNil(this.minJobExecutionTime) || - newMinJobExecutionsTime.getTime() - this.minJobExecutionTime.getTime() !== 0 - ) { - this.minJobExecutionTime = newMinJobExecutionsTime; - } - } else { - this.minJobExecutionTime = null; - } - }, - error: (error: unknown) => { - console.error(error); - } - }) + if (this.gridCriteriaAndComparator) { + if (this.gridCriteriaAndComparator.filter) { + executionsFilteredAndSorted = + this.gridCriteriaAndComparator.filter.meetCriteria( + executionsFilteredAndSorted, + ); + } + + if (this.gridCriteriaAndComparator.sort) { + executionsFilteredAndSorted = executionsFilteredAndSorted.sort( + this.gridCriteriaAndComparator.sort.compare.bind( + this.gridCriteriaAndComparator.sort, + ) as (a: GridDataJobExecution, b: GridDataJobExecution) => number, ); + } } - private _filterExecutions(): void { - let timePeriodCriteria: Criteria; - let executionsFilteredAndSorted: GridDataJobExecution[]; - - if (CollectionsUtil.isDefined(this.selectedPeriod.from) && CollectionsUtil.isDefined(this.selectedPeriod.to)) { - timePeriodCriteria = new ExecutionsTimePeriodCriteria(this.selectedPeriod.from, this.selectedPeriod.to); - // execute filter by time period - executionsFilteredAndSorted = timePeriodCriteria.meetCriteria(this.jobExecutions); - } else { - executionsFilteredAndSorted = [...this.jobExecutions]; - } - - if (this.gridCriteriaAndComparator) { - if (this.gridCriteriaAndComparator.filter) { - executionsFilteredAndSorted = this.gridCriteriaAndComparator.filter.meetCriteria(executionsFilteredAndSorted); - } - - if (this.gridCriteriaAndComparator.sort) { - executionsFilteredAndSorted = executionsFilteredAndSorted.sort( - this.gridCriteriaAndComparator.sort.compare.bind(this.gridCriteriaAndComparator.sort) as ( - a: GridDataJobExecution, - b: GridDataJobExecution - ) => number - ); - } - } + this.filteredJobExecutions = executionsFilteredAndSorted; - this.filteredJobExecutions = executionsFilteredAndSorted; - - this.minJobExecutionTime = new Date(this.minJobExecutionTime); - } + this.minJobExecutionTime = new Date(this.minJobExecutionTime); + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/index.ts index fd311d3bcb..88ec7d4b9d 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/data-job-executions-page/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-job-executions-page.component'; +export * from "./data-job-executions-page.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/execution-duration-chart.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/execution-duration-chart.component.html index 3b12f32fc4..e5390f8f58 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/execution-duration-chart.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/execution-duration-chart.component.html @@ -4,20 +4,20 @@ -->
-
- - - Click and drag to zoom -
+
+ + + Click and drag to zoom +
diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/execution-duration-chart.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/execution-duration-chart.component.scss index 5b8dbc8d7d..bd4ef47f43 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/execution-duration-chart.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/execution-duration-chart.component.scss @@ -4,19 +4,19 @@ */ div.duration-chart { - height: 200px; - position: relative; + height: 200px; + position: relative; - button.reset-zoom { - position: absolute; - top: -1rem; - left: 3rem; - } + button.reset-zoom { + position: absolute; + top: -1rem; + left: 3rem; + } - span.zoom-tooltip { - position: absolute; - top: -0.8rem; - opacity: 0.5; - left: 2.5rem; - } + span.zoom-tooltip { + position: absolute; + top: -0.8rem; + opacity: 0.5; + left: 2.5rem; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/execution-duration-chart.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/execution-duration-chart.component.ts index 79e14d7e51..b4433a8e06 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/execution-duration-chart.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/execution-duration-chart.component.ts @@ -3,434 +3,526 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { DatePipe } from '@angular/common'; -import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; - -import { ActiveElement, Chart, ChartData, registerables, ScatterDataPoint, TimeUnit } from 'chart.js'; -import ChartDataLabels from 'chartjs-plugin-datalabels'; -import zoomPlugin from 'chartjs-plugin-zoom'; -import 'chartjs-adapter-date-fns'; - -import { CollectionsUtil } from '@versatiledatakit/shared'; - -import { DateUtil } from '../../../../../shared/utils'; - -import { DATA_PIPELINES_DATE_TIME_FORMAT, DataJobExecutionStatus } from '../../../../../model'; - -import { DataJobExecutionToGridDataJobExecution, GridDataJobExecution } from '../model'; +import { DatePipe } from "@angular/common"; +import { + Component, + EventEmitter, + Input, + OnChanges, + OnInit, + Output, + SimpleChanges, +} from "@angular/core"; + +import { + ActiveElement, + Chart, + ChartData, + registerables, + ScatterDataPoint, + TimeUnit, +} from "chart.js"; +import ChartDataLabels from "chartjs-plugin-datalabels"; +import zoomPlugin from "chartjs-plugin-zoom"; +import "chartjs-adapter-date-fns"; + +import { CollectionsUtil } from "@versatiledatakit/shared"; + +import { DateUtil } from "../../../../../shared/utils"; + +import { + DATA_PIPELINES_DATE_TIME_FORMAT, + DataJobExecutionStatus, +} from "../../../../../model"; + +import { + DataJobExecutionToGridDataJobExecution, + GridDataJobExecution, +} from "../model"; type CustomChartData = Partial & { - startTime: number; - duration: number; - endTime: string; - status: DataJobExecutionStatus; - opId: string; - id: string; + startTime: number; + duration: number; + endTime: string; + status: DataJobExecutionStatus; + opId: string; + id: string; }; interface ZoomPeriod { - from: Date; - to: Date; + from: Date; + to: Date; } @Component({ - selector: 'lib-execution-duration-chart', - templateUrl: './execution-duration-chart.component.html', - styleUrls: ['./execution-duration-chart.component.scss'], - providers: [DatePipe] + selector: "lib-execution-duration-chart", + templateUrl: "./execution-duration-chart.component.html", + styleUrls: ["./execution-duration-chart.component.scss"], + providers: [DatePipe], }) export class ExecutionDurationChartComponent implements OnInit, OnChanges { - @Input() jobExecutions: GridDataJobExecution[] = []; - - /** - * ** Flag that indicates if duration chart is zoomed or not. - */ - @Input() chartZoomed = false; - - /** - * ** Emits event whenever focus on execution changes. - * - * - Value could be either executionId or null. - */ - @Output() executionIdFocused = new EventEmitter(); - - /** - * ** Event Emitter that emits events on every user zoom period change in duration chart or reset zoom. - */ - @Output() zoomPeriodChanged: EventEmitter = new EventEmitter(); - - /** - * ** Reference to Duration chart instance. - */ - chart: Chart<'line', CustomChartData[], number>; - - /** - * ** Currently focussed execution id, it could be either string if there is focussed execution or null if nothing is focussed. - * @private - */ - private _focusedExecutionId: CustomChartData['id']; - - /** - * ** Zoom selection reference with from and to values. - * @private - */ - private _zoomPeriod: ZoomPeriod = { - from: null, - to: null + @Input() jobExecutions: GridDataJobExecution[] = []; + + /** + * ** Flag that indicates if duration chart is zoomed or not. + */ + @Input() chartZoomed = false; + + /** + * ** Emits event whenever focus on execution changes. + * + * - Value could be either executionId or null. + */ + @Output() executionIdFocused = new EventEmitter(); + + /** + * ** Event Emitter that emits events on every user zoom period change in duration chart or reset zoom. + */ + @Output() zoomPeriodChanged: EventEmitter = + new EventEmitter(); + + /** + * ** Reference to Duration chart instance. + */ + chart: Chart<"line", CustomChartData[], number>; + + /** + * ** Currently focussed execution id, it could be either string if there is focussed execution or null if nothing is focussed. + * @private + */ + private _focusedExecutionId: CustomChartData["id"]; + + /** + * ** Zoom selection reference with from and to values. + * @private + */ + private _zoomPeriod: ZoomPeriod = { + from: null, + to: null, + }; + + constructor(private readonly datePipe: DatePipe) { + Chart.register(...registerables, ChartDataLabels, zoomPlugin); + } + + resetZoom() { + this._zoomPeriod = { + from: null, + to: null, }; - constructor(private readonly datePipe: DatePipe) { - Chart.register(...registerables, ChartDataLabels, zoomPlugin); - } - - resetZoom() { - this._zoomPeriod = { - from: null, - to: null - }; + this.zoomPeriodChanged.next(this._zoomPeriod); + } - this.zoomPeriodChanged.next(this._zoomPeriod); - } - - /** - * @inheritDoc - */ - ngOnChanges(changes: SimpleChanges): void { - if (!changes['jobExecutions'].firstChange) { - this._updateChart(); - } + /** + * @inheritDoc + */ + ngOnChanges(changes: SimpleChanges): void { + if (!changes["jobExecutions"].firstChange) { + this._updateChart(); } + } + + /** + * @inheritDoc + */ + ngOnInit(): void { + this._initChart(); + } + + private _initChart(): void { + const chartData: CustomChartData[] = this._getChartData(); + const unit: TimeUnit = this._getTimeScaleUnit(chartData); + const [min, max] = this._getMinMaxExecutionTupleAdjusted(chartData, unit); + + const data: ChartData<"line", CustomChartData[], number> = { + labels: this._getChartLabels(), + datasets: [ + { + data: chartData, + fill: false, + pointRadius: 3, + pointBorderColor: (context) => + DataJobExecutionToGridDataJobExecution.resolveColor( + (context.raw as { status: string })?.status, + ), + pointBackgroundColor: (context) => + DataJobExecutionToGridDataJobExecution.resolveColor( + (context.raw as { status: string })?.status, + ), + pointBorderWidth: 3, + parsing: { + xAxisKey: "startTime", + yAxisKey: "duration", + }, + }, + ], + }; - /** - * @inheritDoc - */ - ngOnInit(): void { - this._initChart(); - } + this.chart = new Chart<"line", CustomChartData[], number>("durationChart", { + type: "line", + data, + options: { + // callback listen for hover events in duration chart and process events + onHover: (event, activeElements) => { + this._emitFocussedExecutionId(activeElements); + }, + showLine: false, + scales: { + x: { + type: "time", + time: { + unit, + }, + min, + max, + }, + y: { + title: { + display: true, + text: `Duration ${this._getDurationUnit().name}`, + }, + }, + }, + maintainAspectRatio: false, + plugins: { + zoom: { + zoom: { + drag: { + enabled: true, + }, + mode: "x", + onZoomComplete: (context) => { + const from = new Date( + Math.floor(context.chart.scales["x"].min), + ); + const to = new Date(Math.ceil(context.chart.scales["x"].max)); - private _initChart(): void { - const chartData: CustomChartData[] = this._getChartData(); - const unit: TimeUnit = this._getTimeScaleUnit(chartData); - const [min, max] = this._getMinMaxExecutionTupleAdjusted(chartData, unit); - - const data: ChartData<'line', CustomChartData[], number> = { - labels: this._getChartLabels(), - datasets: [ - { - data: chartData, - fill: false, - pointRadius: 3, - pointBorderColor: (context) => - DataJobExecutionToGridDataJobExecution.resolveColor((context.raw as { status: string })?.status), - pointBackgroundColor: (context) => - DataJobExecutionToGridDataJobExecution.resolveColor((context.raw as { status: string })?.status), - pointBorderWidth: 3, - parsing: { - xAxisKey: 'startTime', - yAxisKey: 'duration' - } + if ( + this._zoomPeriod.from === from && + this._zoomPeriod.to === to + ) { + return; } - ] - }; - - this.chart = new Chart<'line', CustomChartData[], number>('durationChart', { - type: 'line', - data, - options: { - // callback listen for hover events in duration chart and process events - onHover: (event, activeElements) => { - this._emitFocussedExecutionId(activeElements); - }, - showLine: false, - scales: { - x: { - type: 'time', - time: { - unit - }, - min, - max - }, - y: { - title: { - display: true, - text: `Duration ${this._getDurationUnit().name}` - } - } - }, - maintainAspectRatio: false, - plugins: { - zoom: { - zoom: { - drag: { - enabled: true - }, - mode: 'x', - onZoomComplete: (context) => { - const from = new Date(Math.floor(context.chart.scales['x'].min)); - const to = new Date(Math.ceil(context.chart.scales['x'].max)); - - if (this._zoomPeriod.from === from && this._zoomPeriod.to === to) { - return; - } - - this._zoomPeriod = { - from, - to - }; - - this.zoomPeriodChanged.next(this._zoomPeriod); - } - } - }, - datalabels: { - display: false - }, - legend: { - display: false - }, - tooltip: { - callbacks: { - label: (context) => { - const rawValues = context.raw as CustomChartData; - - // eslint-disable-next-line @typescript-eslint/restrict-plus-operands - return ( - `Duration: ${context.parsed.y} | ${rawValues.status}` + - (rawValues.endTime - ? ` | End: ${this.datePipe.transform(rawValues.endTime, DATA_PIPELINES_DATE_TIME_FORMAT, 'UTC')}` - : '') - ); - } - } - } - } - } - }); - } - private _updateChart(): void { - const chartLabels: number[] = this._getChartLabels(); - const chartData: CustomChartData[] = this._getChartData(); - const unit: TimeUnit = this._getTimeScaleUnit(chartData); - const [min, max] = this._getMinMaxExecutionTupleAdjusted(chartData, unit); + this._zoomPeriod = { + from, + to, + }; - this.chart.data.labels = chartLabels; - this.chart.data.datasets[0].data = chartData; - - this.chart.options.scales['x'] = { - type: 'time', - time: { - unit + this.zoomPeriodChanged.next(this._zoomPeriod); + }, }, - min, - max - }; + }, + datalabels: { + display: false, + }, + legend: { + display: false, + }, + tooltip: { + callbacks: { + label: (context) => { + const rawValues = context.raw as CustomChartData; + + // eslint-disable-next-line @typescript-eslint/restrict-plus-operands + return ( + `Duration: ${context.parsed.y} | ${rawValues.status}` + + (rawValues.endTime + ? ` | End: ${this.datePipe.transform(rawValues.endTime, DATA_PIPELINES_DATE_TIME_FORMAT, "UTC")}` + : "") + ); + }, + }, + }, + }, + }, + }); + } + + private _updateChart(): void { + const chartLabels: number[] = this._getChartLabels(); + const chartData: CustomChartData[] = this._getChartData(); + const unit: TimeUnit = this._getTimeScaleUnit(chartData); + const [min, max] = this._getMinMaxExecutionTupleAdjusted(chartData, unit); + + this.chart.data.labels = chartLabels; + this.chart.data.datasets[0].data = chartData; + + this.chart.options.scales["x"] = { + type: "time", + time: { + unit, + }, + min, + max, + }; - this.chart.update(); + this.chart.update(); + } + + private _getChartLabels(): number[] { + return this.jobExecutions.map((execution) => + DateUtil.normalizeToUTC(execution.startTime).getTime(), + ); + } + + private _getChartData(): CustomChartData[] { + const divider = this._getDurationUnit().divider; + + return this.jobExecutions + .map((execution) => { + return { + startTime: DateUtil.normalizeToUTC(execution.startTime).getTime(), + duration: + Math.round( + (this._getJobDurationSeconds(execution) / divider) * 100, + ) / 100, + endTime: execution.endTime ? execution.endTime : undefined, + status: execution.status, + opId: execution.opId, + id: execution.id, + } as CustomChartData; + }) + .sort((ex1, ex2) => ex1.startTime - ex2.startTime); + } + + private _getTimeScaleUnit(chartData: CustomChartData[]): TimeUnit { + const [min, max] = this._getMinMaxExecutionTuple(chartData); + + if (CollectionsUtil.isNil(min) || CollectionsUtil.isNil(max)) { + return "day"; } - private _getChartLabels(): number[] { - return this.jobExecutions.map((execution) => DateUtil.normalizeToUTC(execution.startTime).getTime()); - } + const _min = CollectionsUtil.isNumber(min) ? min : new Date(min).getTime(); + const _max = CollectionsUtil.isNumber(max) ? max : new Date(max).getTime(); + const diff = _max - _min; - private _getChartData(): CustomChartData[] { - const divider = this._getDurationUnit().divider; - - return this.jobExecutions - .map((execution) => { - return { - startTime: DateUtil.normalizeToUTC(execution.startTime).getTime(), - duration: Math.round((this._getJobDurationSeconds(execution) / divider) * 100) / 100, - endTime: execution.endTime ? execution.endTime : undefined, - status: execution.status, - opId: execution.opId, - id: execution.id - } as CustomChartData; - }) - .sort((ex1, ex2) => ex1.startTime - ex2.startTime); + if ( + diff > + this._getTimeUnitMilliseconds("year") + + this._getTimeUnitMilliseconds("second") + ) { + return "year"; } - private _getTimeScaleUnit(chartData: CustomChartData[]): TimeUnit { - const [min, max] = this._getMinMaxExecutionTuple(chartData); - - if (CollectionsUtil.isNil(min) || CollectionsUtil.isNil(max)) { - return 'day'; - } - - const _min = CollectionsUtil.isNumber(min) ? min : new Date(min).getTime(); - const _max = CollectionsUtil.isNumber(max) ? max : new Date(max).getTime(); - const diff = _max - _min; - - if (diff > this._getTimeUnitMilliseconds('year') + this._getTimeUnitMilliseconds('second')) { - return 'year'; - } - - if (diff > this._getTimeUnitMilliseconds('month') + this._getTimeUnitMilliseconds('second')) { - return 'month'; - } - - if (diff > 2 * this._getTimeUnitMilliseconds('week')) { - return 'week'; - } - - if (diff > this._getTimeUnitMilliseconds('day') + this._getTimeUnitMilliseconds('second')) { - return 'day'; - } - - if (diff > this._getTimeUnitMilliseconds('hour') + this._getTimeUnitMilliseconds('second')) { - return 'hour'; - } - - if (diff > this._getTimeUnitMilliseconds('minute') + this._getTimeUnitMilliseconds('millisecond')) { - return 'minute'; - } - - if (diff > this._getTimeUnitMilliseconds('second') + this._getTimeUnitMilliseconds('millisecond')) { - return 'second'; - } - - return 'millisecond'; + if ( + diff > + this._getTimeUnitMilliseconds("month") + + this._getTimeUnitMilliseconds("second") + ) { + return "month"; } - private _getDurationUnit(): { name: string; divider: number } { - const maxDurationSeconds = this._getMaxDurationSeconds(); - - if (maxDurationSeconds > 60) { - return maxDurationSeconds > 3600 ? { name: 'hours', divider: 3600 } : { name: 'minutes', divider: 60 }; - } else { - return { name: 'seconds', divider: 1 }; - } + if (diff > 2 * this._getTimeUnitMilliseconds("week")) { + return "week"; } - private _getMaxDurationSeconds(): number { - return this.jobExecutions - .map((execution) => this._getJobDurationSeconds(execution)) - .sort((v1, v2) => v1 - v2) - .pop(); + if ( + diff > + this._getTimeUnitMilliseconds("day") + + this._getTimeUnitMilliseconds("second") + ) { + return "day"; } - private _getJobDurationSeconds(execution: GridDataJobExecution): number { - const endTime = execution.endTime ? new Date(execution.endTime).getTime() : Date.now(); - const delta = endTime - new Date(execution.startTime).getTime(); - - return delta / 1000; + if ( + diff > + this._getTimeUnitMilliseconds("hour") + + this._getTimeUnitMilliseconds("second") + ) { + return "hour"; } - private _emitFocussedExecutionId(activeElements: ActiveElement[]): void { - if (activeElements.length > 0) { - const element: { $context?: { raw?: CustomChartData } } = activeElements[0].element as unknown; - const executionId = element?.$context?.raw?.id ?? null; - - // if event emits that element is focussed and that value is same as previous skip processing - if (this._focusedExecutionId === executionId) { - return; - } - - // when element is focused for the first time, save executionId in component context - this._focusedExecutionId = executionId; - // emit executionId to parent component - this.executionIdFocused.next(executionId); - } else { - // if event emits that no element is focussed and that value is same as previous skip processing - if (!this._focusedExecutionId) { - return; - } - - // when focused element lose focus clear executionId from component context - this._focusedExecutionId = null; - // emit null value to parent component - this.executionIdFocused.next(null); - } + if ( + diff > + this._getTimeUnitMilliseconds("minute") + + this._getTimeUnitMilliseconds("millisecond") + ) { + return "minute"; } - private _getMinMaxExecutionTuple(chartData: CustomChartData[]): [number, number] { - if (chartData.length === 0) { - if (CollectionsUtil.isDate(this._zoomPeriod.from) && CollectionsUtil.isDate(this._zoomPeriod.to)) { - return [this._zoomPeriod.from.getTime(), this._zoomPeriod.to.getTime()]; - } - - return [null, null]; - } + if ( + diff > + this._getTimeUnitMilliseconds("second") + + this._getTimeUnitMilliseconds("millisecond") + ) { + return "second"; + } - if (chartData.length === 1) { - if (CollectionsUtil.isDate(this._zoomPeriod.from) && CollectionsUtil.isDate(this._zoomPeriod.to)) { - if (this._zoomPeriod.to.getTime() - this._zoomPeriod.from.getTime() > 5 * this._getTimeUnitMilliseconds('minute')) { - return [this._zoomPeriod.from.getTime(), this._zoomPeriod.to.getTime()]; - } - } + return "millisecond"; + } - return [chartData[0].startTime, chartData[0].startTime]; - } + private _getDurationUnit(): { name: string; divider: number } { + const maxDurationSeconds = this._getMaxDurationSeconds(); - return [chartData[0].startTime, chartData[chartData.length - 1].startTime]; + if (maxDurationSeconds > 60) { + return maxDurationSeconds > 3600 + ? { name: "hours", divider: 3600 } + : { name: "minutes", divider: 60 }; + } else { + return { name: "seconds", divider: 1 }; + } + } + + private _getMaxDurationSeconds(): number { + return this.jobExecutions + .map((execution) => this._getJobDurationSeconds(execution)) + .sort((v1, v2) => v1 - v2) + .pop(); + } + + private _getJobDurationSeconds(execution: GridDataJobExecution): number { + const endTime = execution.endTime + ? new Date(execution.endTime).getTime() + : Date.now(); + const delta = endTime - new Date(execution.startTime).getTime(); + + return delta / 1000; + } + + private _emitFocussedExecutionId(activeElements: ActiveElement[]): void { + if (activeElements.length > 0) { + const element: { $context?: { raw?: CustomChartData } } = + activeElements[0].element as unknown; + const executionId = element?.$context?.raw?.id ?? null; + + // if event emits that element is focussed and that value is same as previous skip processing + if (this._focusedExecutionId === executionId) { + return; + } + + // when element is focused for the first time, save executionId in component context + this._focusedExecutionId = executionId; + // emit executionId to parent component + this.executionIdFocused.next(executionId); + } else { + // if event emits that no element is focussed and that value is same as previous skip processing + if (!this._focusedExecutionId) { + return; + } + + // when focused element lose focus clear executionId from component context + this._focusedExecutionId = null; + // emit null value to parent component + this.executionIdFocused.next(null); + } + } + + private _getMinMaxExecutionTuple( + chartData: CustomChartData[], + ): [number, number] { + if (chartData.length === 0) { + if ( + CollectionsUtil.isDate(this._zoomPeriod.from) && + CollectionsUtil.isDate(this._zoomPeriod.to) + ) { + return [this._zoomPeriod.from.getTime(), this._zoomPeriod.to.getTime()]; + } + + return [null, null]; } - private _getMinMaxExecutionTupleAdjusted(chartData: CustomChartData[], unit: TimeUnit): [number, number] { - const [min, max] = this._getMinMaxExecutionTuple(chartData); - - let adjustment: number; - - switch (unit) { - case 'millisecond': - adjustment = 10 * this._getTimeUnitMilliseconds('millisecond'); - break; - case 'second': - adjustment = 5 * this._getTimeUnitMilliseconds('second'); - break; - case 'minute': - adjustment = 5 * this._getTimeUnitMilliseconds('minute'); - break; - case 'hour': - adjustment = 2 * this._getTimeUnitMilliseconds('hour'); - break; - case 'day': - adjustment = 15 * this._getTimeUnitMilliseconds('hour'); - break; - case 'week': - adjustment = 3 * this._getTimeUnitMilliseconds('day'); - break; - case 'month': - adjustment = this._getTimeUnitMilliseconds('month'); - break; - case 'year': - adjustment = this._getTimeUnitMilliseconds('year'); - break; - default: - console.error( - // eslint-disable-next-line @typescript-eslint/restrict-template-expressions - `Taurus DataPipelines ExecutionDurationChartComponent unsupported time format unit ${unit}` - ); + if (chartData.length === 1) { + if ( + CollectionsUtil.isDate(this._zoomPeriod.from) && + CollectionsUtil.isDate(this._zoomPeriod.to) + ) { + if ( + this._zoomPeriod.to.getTime() - this._zoomPeriod.from.getTime() > + 5 * this._getTimeUnitMilliseconds("minute") + ) { + return [ + this._zoomPeriod.from.getTime(), + this._zoomPeriod.to.getTime(), + ]; } + } - return [min - adjustment, max + adjustment]; + return [chartData[0].startTime, chartData[0].startTime]; } - private _getTimeUnitMilliseconds(unit: 'millisecond' | 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year'): number { - switch (unit) { - case 'millisecond': - return 1; - case 'second': - return 1000; - case 'minute': - return 1000 * 60; - case 'hour': - return 1000 * 60 * 60; - case 'day': - return 1000 * 60 * 60 * 24; - case 'week': - return 1000 * 60 * 60 * 24 * 7; - case 'month': - return 1000 * 60 * 60 * 24 * 31; - case 'year': - return 1000 * 60 * 60 * 24 * 365; - default: - console.error( - // eslint-disable-next-line @typescript-eslint/restrict-template-expressions - `Taurus DataPipelines ExecutionDurationChartComponent unsupported time format unit ${unit}` - ); + return [chartData[0].startTime, chartData[chartData.length - 1].startTime]; + } + + private _getMinMaxExecutionTupleAdjusted( + chartData: CustomChartData[], + unit: TimeUnit, + ): [number, number] { + const [min, max] = this._getMinMaxExecutionTuple(chartData); + + let adjustment: number; + + switch (unit) { + case "millisecond": + adjustment = 10 * this._getTimeUnitMilliseconds("millisecond"); + break; + case "second": + adjustment = 5 * this._getTimeUnitMilliseconds("second"); + break; + case "minute": + adjustment = 5 * this._getTimeUnitMilliseconds("minute"); + break; + case "hour": + adjustment = 2 * this._getTimeUnitMilliseconds("hour"); + break; + case "day": + adjustment = 15 * this._getTimeUnitMilliseconds("hour"); + break; + case "week": + adjustment = 3 * this._getTimeUnitMilliseconds("day"); + break; + case "month": + adjustment = this._getTimeUnitMilliseconds("month"); + break; + case "year": + adjustment = this._getTimeUnitMilliseconds("year"); + break; + default: + console.error( + // eslint-disable-next-line @typescript-eslint/restrict-template-expressions + `Taurus DataPipelines ExecutionDurationChartComponent unsupported time format unit ${unit}`, + ); + } - return 0; - } + return [min - adjustment, max + adjustment]; + } + + private _getTimeUnitMilliseconds( + unit: + | "millisecond" + | "second" + | "minute" + | "hour" + | "day" + | "week" + | "month" + | "year", + ): number { + switch (unit) { + case "millisecond": + return 1; + case "second": + return 1000; + case "minute": + return 1000 * 60; + case "hour": + return 1000 * 60 * 60; + case "day": + return 1000 * 60 * 60 * 24; + case "week": + return 1000 * 60 * 60 * 24 * 7; + case "month": + return 1000 * 60 * 60 * 24 * 31; + case "year": + return 1000 * 60 * 60 * 24 * 365; + default: + console.error( + // eslint-disable-next-line @typescript-eslint/restrict-template-expressions + `Taurus DataPipelines ExecutionDurationChartComponent unsupported time format unit ${unit}`, + ); + + return 0; } + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/index.ts index 4dea12c3a6..3678c389f5 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-duration-chart/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './execution-duration-chart.component'; +export * from "./execution-duration-chart.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/execution-status-chart.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/execution-status-chart.component.html index 591943e34e..f99614775f 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/execution-status-chart.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/execution-status-chart.component.html @@ -4,14 +4,14 @@ -->
-
- -
- {{ totalExecutions }}
- Executions -
+
+ +
+ {{ totalExecutions }}
+ Executions
+
diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/execution-status-chart.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/execution-status-chart.component.scss index 8eb1f2d24c..0d5f5d22d0 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/execution-status-chart.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/execution-status-chart.component.scss @@ -4,16 +4,16 @@ */ div.status-chart { - height: 200px; - position: relative; - margin-top: 15px; + height: 200px; + position: relative; + margin-top: 15px; - div.inner-text { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - text-align: center; - font-size: 18px; - } + div.inner-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + font-size: 18px; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/execution-status-chart.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/execution-status-chart.component.ts index e299aedb4f..7bee068b79 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/execution-status-chart.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/execution-status-chart.component.ts @@ -3,106 +3,123 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core'; - -import { Chart, registerables } from 'chart.js'; -import ChartDataLabels from 'chartjs-plugin-datalabels'; - -import { DataJobExecutionToGridDataJobExecution, GridDataJobExecution } from '../model/data-job-execution'; +import { + Component, + Input, + OnChanges, + OnInit, + SimpleChanges, +} from "@angular/core"; + +import { Chart, registerables } from "chart.js"; +import ChartDataLabels from "chartjs-plugin-datalabels"; + +import { + DataJobExecutionToGridDataJobExecution, + GridDataJobExecution, +} from "../model/data-job-execution"; @Component({ - selector: 'lib-execution-status-chart', - templateUrl: './execution-status-chart.component.html', - styleUrls: ['./execution-status-chart.component.scss'] + selector: "lib-execution-status-chart", + templateUrl: "./execution-status-chart.component.html", + styleUrls: ["./execution-status-chart.component.scss"], }) export class ExecutionStatusChartComponent implements OnInit, OnChanges { - @Input() jobExecutions: GridDataJobExecution[]; - - totalExecutions: number; - chart: Chart; - - constructor() { - Chart.register(...registerables, ChartDataLabels); - } - - getDoughnutLabels(): string[] { - return this.jobExecutions.map((execution) => execution.status as string).filter((item, i, ar) => ar.indexOf(item) === i); - } - - getDoughnutData(): number[] { - const data: number[] = []; - - this.getDoughnutLabels().forEach((label) => - data.push(this.jobExecutions.filter((execution) => (execution.status as string) === label).length) - ); - - return data; - } - - getDoughnutLabelColors(): string[] { - const colors: string[] = []; - const statusColorMap = DataJobExecutionToGridDataJobExecution.getStatusColorsMap(); - - this.getDoughnutLabels().forEach((label) => { - colors.push(statusColorMap[label] as string); - }); - - return colors; - } - - ngOnChanges(changes: SimpleChanges): void { - if (!changes['jobExecutions'].isFirstChange()) { - this.totalExecutions = this.jobExecutions.length; - this.chart.data.labels = this.getDoughnutLabels(); - this.chart.data.datasets[0].backgroundColor = this.getDoughnutLabelColors(); - this.chart.data.datasets[0].data = this.getDoughnutData(); - this.chart.update(); - } - } - - ngOnInit(): void { - this.totalExecutions = this.jobExecutions.length; - - const data = { - labels: this.getDoughnutLabels(), - datasets: [ - { - data: this.getDoughnutData(), - backgroundColor: this.getDoughnutLabelColors(), - hoverOffset: 4 - } - ] - }; - - this.chart = new Chart('statusChart', { - type: 'doughnut', - data, - options: { - spacing: 1, - elements: { - arc: { - borderWidth: 0 - } - }, - cutout: 70, - maintainAspectRatio: false, - plugins: { - legend: { - display: false, - position: 'left' - }, - datalabels: { - color: 'black', - font: { - size: 16 - } - }, - tooltip: { - xAlign: 'center', - yAlign: 'center' - } - } - } - }); + @Input() jobExecutions: GridDataJobExecution[]; + + totalExecutions: number; + chart: Chart; + + constructor() { + Chart.register(...registerables, ChartDataLabels); + } + + getDoughnutLabels(): string[] { + return this.jobExecutions + .map((execution) => execution.status as string) + .filter((item, i, ar) => ar.indexOf(item) === i); + } + + getDoughnutData(): number[] { + const data: number[] = []; + + this.getDoughnutLabels().forEach((label) => + data.push( + this.jobExecutions.filter( + (execution) => (execution.status as string) === label, + ).length, + ), + ); + + return data; + } + + getDoughnutLabelColors(): string[] { + const colors: string[] = []; + const statusColorMap = + DataJobExecutionToGridDataJobExecution.getStatusColorsMap(); + + this.getDoughnutLabels().forEach((label) => { + colors.push(statusColorMap[label] as string); + }); + + return colors; + } + + ngOnChanges(changes: SimpleChanges): void { + if (!changes["jobExecutions"].isFirstChange()) { + this.totalExecutions = this.jobExecutions.length; + this.chart.data.labels = this.getDoughnutLabels(); + this.chart.data.datasets[0].backgroundColor = + this.getDoughnutLabelColors(); + this.chart.data.datasets[0].data = this.getDoughnutData(); + this.chart.update(); } + } + + ngOnInit(): void { + this.totalExecutions = this.jobExecutions.length; + + const data = { + labels: this.getDoughnutLabels(), + datasets: [ + { + data: this.getDoughnutData(), + backgroundColor: this.getDoughnutLabelColors(), + hoverOffset: 4, + }, + ], + }; + + this.chart = new Chart("statusChart", { + type: "doughnut", + data, + options: { + spacing: 1, + elements: { + arc: { + borderWidth: 0, + }, + }, + cutout: 70, + maintainAspectRatio: false, + plugins: { + legend: { + display: false, + position: "left", + }, + datalabels: { + color: "black", + font: { + size: 16, + }, + }, + tooltip: { + xAlign: "center", + yAlign: "center", + }, + }, + }, + }); + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/index.ts index 6e38bf3dcf..d6916f862e 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/execution-status-chart/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './execution-status-chart.component'; +export * from "./execution-status-chart.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/index.ts index b80bfccd2a..08401470c3 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/index.ts @@ -3,14 +3,14 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-job-deployment-details-modal'; -export * from './data-job-execution-status'; -export * from './data-job-execution-status-filter'; -export * from './data-job-execution-type'; -export * from './data-job-execution-type-filter'; -export * from './data-job-executions-grid'; -export * from './data-job-executions-page'; -export * from './execution-duration-chart'; -export * from './execution-status-chart'; -export * from './model'; -export * from './time-period-filter'; +export * from "./data-job-deployment-details-modal"; +export * from "./data-job-execution-status"; +export * from "./data-job-execution-status-filter"; +export * from "./data-job-execution-type"; +export * from "./data-job-execution-type-filter"; +export * from "./data-job-executions-grid"; +export * from "./data-job-executions-page"; +export * from "./execution-duration-chart"; +export * from "./execution-status-chart"; +export * from "./model"; +export * from "./time-period-filter"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/data-job-execution.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/data-job-execution.spec.ts index a556070941..f3dfa150a3 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/data-job-execution.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/data-job-execution.spec.ts @@ -3,174 +3,214 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { DatePipe } from '@angular/common'; +import { DatePipe } from "@angular/common"; -import { TestBed } from '@angular/core/testing'; +import { TestBed } from "@angular/core/testing"; -import { DataJobExecution, DataJobExecutionStatus, DataJobExecutionType } from '../../../../../model'; +import { + DataJobExecution, + DataJobExecutionStatus, + DataJobExecutionType, +} from "../../../../../model"; -import { DataJobExecutionToGridDataJobExecution, GridDataJobExecution } from './data-job-execution'; +import { + DataJobExecutionToGridDataJobExecution, + GridDataJobExecution, +} from "./data-job-execution"; -describe('DataJobExecutionToGridDataJobExecution', () => { - let datePipe: { transform: (...args: any[]) => string }; +describe("DataJobExecutionToGridDataJobExecution", () => { + let datePipe: { transform: (...args: any[]) => string }; - beforeEach(() => { - TestBed.configureTestingModule({ - providers: [DatePipe] + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [DatePipe], + }); + + datePipe = TestBed.inject(DatePipe); + }); + + describe("Statics::", () => { + describe("Methods::", () => { + describe("|convertStatus|", () => { + const params: Array<[string, string, DataJobExecutionStatus]> = [ + [ + `${DataJobExecutionStatus.SUCCEEDED}`, + null, + DataJobExecutionStatus.SUCCEEDED, + ], + [ + `${DataJobExecutionStatus.FINISHED}`, + null, + DataJobExecutionStatus.SUCCEEDED, + ], + [ + `${DataJobExecutionStatus.FAILED}`, + "Platform error", + DataJobExecutionStatus.PLATFORM_ERROR, + ], + [ + `${DataJobExecutionStatus.FAILED}`, + "Some exception message", + DataJobExecutionStatus.USER_ERROR, + ], + [ + `${DataJobExecutionStatus.FAILED}`, + null, + DataJobExecutionStatus.FAILED, + ], + [ + `Some new execution status`, + null, + `Some new execution status` as any, + ], + ]; + + for (const [status, message, assertion] of params) { + it(`should verify for provided status "${status}" will return "${assertion}"`, () => { + // When + const returnedStatus = + /* eslint-disable @typescript-eslint/no-unsafe-argument */ + DataJobExecutionToGridDataJobExecution.convertStatus( + status as any, + message, + ); + + // Then + expect(returnedStatus).toEqual(assertion); + }); + } + }); + + describe("|convertToDataJobExecution|", () => { + it("should verify will convert object correctly", () => { + // Given + spyOn(Date, "now").and.returnValue(1608036156085); + let counter = 0; + spyOn(datePipe, "transform").and.callFake(() => { + if (++counter % 2 === 1) { + return "Dec 12, 2020, 10:10:10 AM"; + } + + return "Dec 12, 2020, 11:11:11 AM"; + }); + + /* eslint-disable @typescript-eslint/naming-convention */ + const dataJobExecution: DataJobExecution = { + jobName: "test-job", + status: DataJobExecutionStatus.FAILED, + message: "Platform error", + type: DataJobExecutionType.MANUAL, + id: "123123123", + opId: "123123123", + logsUrl: "https://logs.com", + startedBy: "pmitev", + startTime: "2020-12-12T10:10:10Z", + endTime: "2020-12-12T11:11:11Z", + deployment: { + id: "test", + jobVersion: "jkdfgh", + mode: "release", + vdkVersion: "0.0.1", + deployedDate: "2020-11-11T10:10:10Z", + deployedBy: "pmitev", + resources: { + memoryLimit: 1000, + memoryRequest: 1000, + cpuLimit: 0.5, + cpuRequest: 0.5, + }, + enabled: true, + schedule: { scheduleCron: "12 * * * *" }, + }, + }; + const expectedObject: GridDataJobExecution = { + jobName: "test-job", + status: DataJobExecutionStatus.PLATFORM_ERROR, + type: DataJobExecutionType.MANUAL, + startedBy: "pmitev", + startTime: "2020-12-12T10:10:10Z", + startTimeFormatted: "Dec 12, 2020, 10:10:10 AM", + endTime: "2020-12-12T11:11:11Z", + endTimeFormatted: "Dec 12, 2020, 11:11:11 AM", + duration: "1h 1m", + message: "Platform error", + id: "123123123", + opId: "123123123", + jobVersion: "jkdfgh", + logsUrl: "https://logs.com", + deployment: { + id: "test", + jobVersion: "jkdfgh", + mode: "release", + vdkVersion: "0.0.1", + deployedDate: "2020-11-11T10:10:10Z", + deployedBy: "pmitev", + resources: { + memoryLimit: 1000, + memoryRequest: 1000, + cpuLimit: 0.5, + cpuRequest: 0.5, + }, + enabled: true, + schedule: { scheduleCron: "12 * * * *" }, + }, + }; + /* eslint-enable @typescript-eslint/naming-convention */ + + const convertedJobExecution = + DataJobExecutionToGridDataJobExecution.convertToDataJobExecution( + datePipe as DatePipe, + )([ + dataJobExecution, + { + ...dataJobExecution, + endTime: null, + }, + ]); + + expect(convertedJobExecution.length).toEqual(2); + expect(convertedJobExecution).toEqual([ + expectedObject, + { + ...expectedObject, + endTimeFormatted: "", + endTime: null, + duration: "3d 2h", + }, + ]); }); + }); + + describe("|getStatusColorsMap|", () => { + it("should verify will return correct values", () => { + // When + const value = + DataJobExecutionToGridDataJobExecution.getStatusColorsMap(); + + // Then + expect(value).toEqual({ + [DataJobExecutionStatus.SUBMITTED]: "#CCCCCC", + [DataJobExecutionStatus.RUNNING]: "#CCCCCC", + [DataJobExecutionStatus.SUCCEEDED]: "#5EB715", + [DataJobExecutionStatus.CANCELLED]: "#CCCCCC", + [DataJobExecutionStatus.SKIPPED]: "#CCCCCC", + [DataJobExecutionStatus.USER_ERROR]: "#F27963", + [DataJobExecutionStatus.PLATFORM_ERROR]: "#F8CF2A", + }); + }); + }); - datePipe = TestBed.inject(DatePipe); - }); + describe("|resolveColor|", () => { + it("should verify will resolve color from map", () => { + // When + const color = DataJobExecutionToGridDataJobExecution.resolveColor( + DataJobExecutionStatus.SUCCEEDED, + ); - describe('Statics::', () => { - describe('Methods::', () => { - describe('|convertStatus|', () => { - const params: Array<[string, string, DataJobExecutionStatus]> = [ - [`${DataJobExecutionStatus.SUCCEEDED}`, null, DataJobExecutionStatus.SUCCEEDED], - [`${DataJobExecutionStatus.FINISHED}`, null, DataJobExecutionStatus.SUCCEEDED], - [`${DataJobExecutionStatus.FAILED}`, 'Platform error', DataJobExecutionStatus.PLATFORM_ERROR], - [`${DataJobExecutionStatus.FAILED}`, 'Some exception message', DataJobExecutionStatus.USER_ERROR], - [`${DataJobExecutionStatus.FAILED}`, null, DataJobExecutionStatus.FAILED], - [`Some new execution status`, null, `Some new execution status` as any] - ]; - - for (const [status, message, assertion] of params) { - it(`should verify for provided status "${status}" will return "${assertion}"`, () => { - // When - const returnedStatus = - /* eslint-disable @typescript-eslint/no-unsafe-argument */ - DataJobExecutionToGridDataJobExecution.convertStatus(status as any, message); - - // Then - expect(returnedStatus).toEqual(assertion); - }); - } - }); - - describe('|convertToDataJobExecution|', () => { - it('should verify will convert object correctly', () => { - // Given - spyOn(Date, 'now').and.returnValue(1608036156085); - let counter = 0; - spyOn(datePipe, 'transform').and.callFake(() => { - if (++counter % 2 === 1) { - return 'Dec 12, 2020, 10:10:10 AM'; - } - - return 'Dec 12, 2020, 11:11:11 AM'; - }); - - /* eslint-disable @typescript-eslint/naming-convention */ - const dataJobExecution: DataJobExecution = { - jobName: 'test-job', - status: DataJobExecutionStatus.FAILED, - message: 'Platform error', - type: DataJobExecutionType.MANUAL, - id: '123123123', - opId: '123123123', - logsUrl: 'https://logs.com', - startedBy: 'pmitev', - startTime: '2020-12-12T10:10:10Z', - endTime: '2020-12-12T11:11:11Z', - deployment: { - id: 'test', - jobVersion: 'jkdfgh', - mode: 'release', - vdkVersion: '0.0.1', - deployedDate: '2020-11-11T10:10:10Z', - deployedBy: 'pmitev', - resources: { - memoryLimit: 1000, - memoryRequest: 1000, - cpuLimit: 0.5, - cpuRequest: 0.5 - }, - enabled: true, - schedule: { scheduleCron: '12 * * * *' } - } - }; - const expectedObject: GridDataJobExecution = { - jobName: 'test-job', - status: DataJobExecutionStatus.PLATFORM_ERROR, - type: DataJobExecutionType.MANUAL, - startedBy: 'pmitev', - startTime: '2020-12-12T10:10:10Z', - startTimeFormatted: 'Dec 12, 2020, 10:10:10 AM', - endTime: '2020-12-12T11:11:11Z', - endTimeFormatted: 'Dec 12, 2020, 11:11:11 AM', - duration: '1h 1m', - message: 'Platform error', - id: '123123123', - opId: '123123123', - jobVersion: 'jkdfgh', - logsUrl: 'https://logs.com', - deployment: { - id: 'test', - jobVersion: 'jkdfgh', - mode: 'release', - vdkVersion: '0.0.1', - deployedDate: '2020-11-11T10:10:10Z', - deployedBy: 'pmitev', - resources: { - memoryLimit: 1000, - memoryRequest: 1000, - cpuLimit: 0.5, - cpuRequest: 0.5 - }, - enabled: true, - schedule: { scheduleCron: '12 * * * *' } - } - }; - /* eslint-enable @typescript-eslint/naming-convention */ - - const convertedJobExecution = DataJobExecutionToGridDataJobExecution.convertToDataJobExecution(datePipe as DatePipe)([ - dataJobExecution, - { - ...dataJobExecution, - endTime: null - } - ]); - - expect(convertedJobExecution.length).toEqual(2); - expect(convertedJobExecution).toEqual([ - expectedObject, - { - ...expectedObject, - endTimeFormatted: '', - endTime: null, - duration: '3d 2h' - } - ]); - }); - }); - - describe('|getStatusColorsMap|', () => { - it('should verify will return correct values', () => { - // When - const value = DataJobExecutionToGridDataJobExecution.getStatusColorsMap(); - - // Then - expect(value).toEqual({ - [DataJobExecutionStatus.SUBMITTED]: '#CCCCCC', - [DataJobExecutionStatus.RUNNING]: '#CCCCCC', - [DataJobExecutionStatus.SUCCEEDED]: '#5EB715', - [DataJobExecutionStatus.CANCELLED]: '#CCCCCC', - [DataJobExecutionStatus.SKIPPED]: '#CCCCCC', - [DataJobExecutionStatus.USER_ERROR]: '#F27963', - [DataJobExecutionStatus.PLATFORM_ERROR]: '#F8CF2A' - }); - }); - }); - - describe('|resolveColor|', () => { - it('should verify will resolve color from map', () => { - // When - const color = DataJobExecutionToGridDataJobExecution.resolveColor(DataJobExecutionStatus.SUCCEEDED); - - // Then - expect(color).toEqual('#5EB715'); - }); - }); + // Then + expect(color).toEqual("#5EB715"); }); + }); }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/data-job-execution.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/data-job-execution.ts index 9344cc590b..b3ce40024d 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/data-job-execution.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/data-job-execution.ts @@ -3,81 +3,104 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { DatePipe } from '@angular/common'; +import { DatePipe } from "@angular/common"; -import { FormatDeltaPipe } from '../../../../../shared/pipes'; +import { FormatDeltaPipe } from "../../../../../shared/pipes"; -import { DATA_PIPELINES_DATE_TIME_FORMAT, DataJobExecution, DataJobExecutions, DataJobExecutionStatus } from '../../../../../model'; +import { + DATA_PIPELINES_DATE_TIME_FORMAT, + DataJobExecution, + DataJobExecutions, + DataJobExecutionStatus, +} from "../../../../../model"; export interface GridDataJobExecution extends DataJobExecution { - duration: string; - jobVersion: string; - startTimeFormatted: string; - endTimeFormatted: string; + duration: string; + jobVersion: string; + startTimeFormatted: string; + endTimeFormatted: string; } export class DataJobExecutionToGridDataJobExecution { - static convertStatus(jobStatus: DataJobExecutionStatus, message: string): DataJobExecutionStatus { - switch (`${jobStatus}`.toUpperCase()) { - case DataJobExecutionStatus.SUCCEEDED: - case DataJobExecutionStatus.FINISHED: - return DataJobExecutionStatus.SUCCEEDED; - case DataJobExecutionStatus.FAILED: - if (message) { - return message === 'Platform error' ? DataJobExecutionStatus.PLATFORM_ERROR : DataJobExecutionStatus.USER_ERROR; - } else { - return DataJobExecutionStatus.FAILED; - } - default: - return jobStatus; + static convertStatus( + jobStatus: DataJobExecutionStatus, + message: string, + ): DataJobExecutionStatus { + switch (`${jobStatus}`.toUpperCase()) { + case DataJobExecutionStatus.SUCCEEDED: + case DataJobExecutionStatus.FINISHED: + return DataJobExecutionStatus.SUCCEEDED; + case DataJobExecutionStatus.FAILED: + if (message) { + return message === "Platform error" + ? DataJobExecutionStatus.PLATFORM_ERROR + : DataJobExecutionStatus.USER_ERROR; + } else { + return DataJobExecutionStatus.FAILED; } + default: + return jobStatus; } + } - static convertToDataJobExecution(datePipe: DatePipe) { - return (dataJobExecution: DataJobExecutions): GridDataJobExecution[] => { - const formatDeltaPipe = new FormatDeltaPipe(); + static convertToDataJobExecution(datePipe: DatePipe) { + return (dataJobExecution: DataJobExecutions): GridDataJobExecution[] => { + const formatDeltaPipe = new FormatDeltaPipe(); - return dataJobExecution.reduce((accumulator, execution) => { - accumulator.push({ - status: DataJobExecutionToGridDataJobExecution.convertStatus(execution.status, execution.message), - type: execution.type, - duration: formatDeltaPipe.transform(execution), - startTime: execution.startTime, - startTimeFormatted: execution.startTime - ? datePipe.transform(execution.startTime, DATA_PIPELINES_DATE_TIME_FORMAT, 'UTC') - : '', - endTime: execution.endTime ? execution.endTime : null, - endTimeFormatted: execution.endTime - ? datePipe.transform(execution.endTime, DATA_PIPELINES_DATE_TIME_FORMAT, 'UTC') - : '', - logsUrl: execution.logsUrl, - startedBy: execution.startedBy, - id: execution.id, - jobName: execution.jobName, - opId: execution.opId, - jobVersion: execution.deployment.jobVersion, - deployment: execution.deployment, - message: execution.message - }); + return dataJobExecution.reduce((accumulator, execution) => { + accumulator.push({ + status: DataJobExecutionToGridDataJobExecution.convertStatus( + execution.status, + execution.message, + ), + type: execution.type, + duration: formatDeltaPipe.transform(execution), + startTime: execution.startTime, + startTimeFormatted: execution.startTime + ? datePipe.transform( + execution.startTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + "UTC", + ) + : "", + endTime: execution.endTime ? execution.endTime : null, + endTimeFormatted: execution.endTime + ? datePipe.transform( + execution.endTime, + DATA_PIPELINES_DATE_TIME_FORMAT, + "UTC", + ) + : "", + logsUrl: execution.logsUrl, + startedBy: execution.startedBy, + id: execution.id, + jobName: execution.jobName, + opId: execution.opId, + jobVersion: execution.deployment.jobVersion, + deployment: execution.deployment, + message: execution.message, + }); - return accumulator; - }, [] as GridDataJobExecution[]); - }; - } + return accumulator; + }, [] as GridDataJobExecution[]); + }; + } - static getStatusColorsMap() { - return { - [DataJobExecutionStatus.SUBMITTED]: '#CCCCCC', - [DataJobExecutionStatus.RUNNING]: '#CCCCCC', - [DataJobExecutionStatus.SUCCEEDED]: '#5EB715', - [DataJobExecutionStatus.CANCELLED]: '#CCCCCC', - [DataJobExecutionStatus.SKIPPED]: '#CCCCCC', - [DataJobExecutionStatus.USER_ERROR]: '#F27963', - [DataJobExecutionStatus.PLATFORM_ERROR]: '#F8CF2A' - }; - } + static getStatusColorsMap() { + return { + [DataJobExecutionStatus.SUBMITTED]: "#CCCCCC", + [DataJobExecutionStatus.RUNNING]: "#CCCCCC", + [DataJobExecutionStatus.SUCCEEDED]: "#5EB715", + [DataJobExecutionStatus.CANCELLED]: "#CCCCCC", + [DataJobExecutionStatus.SKIPPED]: "#CCCCCC", + [DataJobExecutionStatus.USER_ERROR]: "#F27963", + [DataJobExecutionStatus.PLATFORM_ERROR]: "#F8CF2A", + }; + } - static resolveColor(key: string): string { - return DataJobExecutionToGridDataJobExecution.getStatusColorsMap()[key] as string; - } + static resolveColor(key: string): string { + return DataJobExecutionToGridDataJobExecution.getStatusColorsMap()[ + key + ] as string; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/executions-filters.model.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/executions-filters.model.spec.ts index 9bb3e45ae4..92749b08b6 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/executions-filters.model.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/executions-filters.model.spec.ts @@ -4,52 +4,52 @@ */ import { - FILTER_DURATION_KEY, - FILTER_END_TIME_KEY, - FILTER_ID_KEY, - FILTER_START_TIME_KEY, - FILTER_STATUS_KEY, - FILTER_TIME_PERIOD_KEY, - FILTER_TYPE_KEY, - FILTER_VERSION_KEY, - SORT_DURATION_KEY, - SORT_END_TIME_KEY, - SORT_ID_KEY, - SORT_START_TIME_KEY, - SORT_STATUS_KEY, - SORT_TYPE_KEY, - SORT_VERSION_KEY, - SUPPORTED_EXECUTIONS_FILTER_CRITERIA, - SUPPORTED_EXECUTIONS_SORT_CRITERIA -} from './executions-filters.model'; + FILTER_DURATION_KEY, + FILTER_END_TIME_KEY, + FILTER_ID_KEY, + FILTER_START_TIME_KEY, + FILTER_STATUS_KEY, + FILTER_TIME_PERIOD_KEY, + FILTER_TYPE_KEY, + FILTER_VERSION_KEY, + SORT_DURATION_KEY, + SORT_END_TIME_KEY, + SORT_ID_KEY, + SORT_START_TIME_KEY, + SORT_STATUS_KEY, + SORT_TYPE_KEY, + SORT_VERSION_KEY, + SUPPORTED_EXECUTIONS_FILTER_CRITERIA, + SUPPORTED_EXECUTIONS_SORT_CRITERIA, +} from "./executions-filters.model"; -describe('SUPPORTED_EXECUTIONS_FILTER_CRITERIA', () => { - it('should verify supported filter criteria are correct', () => { - // Then - expect(SUPPORTED_EXECUTIONS_FILTER_CRITERIA).toEqual([ - FILTER_TIME_PERIOD_KEY, - FILTER_STATUS_KEY, - FILTER_TYPE_KEY, - FILTER_DURATION_KEY, - FILTER_START_TIME_KEY, - FILTER_END_TIME_KEY, - FILTER_ID_KEY, - FILTER_VERSION_KEY - ]); - }); +describe("SUPPORTED_EXECUTIONS_FILTER_CRITERIA", () => { + it("should verify supported filter criteria are correct", () => { + // Then + expect(SUPPORTED_EXECUTIONS_FILTER_CRITERIA).toEqual([ + FILTER_TIME_PERIOD_KEY, + FILTER_STATUS_KEY, + FILTER_TYPE_KEY, + FILTER_DURATION_KEY, + FILTER_START_TIME_KEY, + FILTER_END_TIME_KEY, + FILTER_ID_KEY, + FILTER_VERSION_KEY, + ]); + }); }); -describe('SUPPORTED_EXECUTIONS_SORT_CRITERIA', () => { - it('should verify supported sort criteria are correct', () => { - // Then - expect(SUPPORTED_EXECUTIONS_SORT_CRITERIA).toEqual([ - SORT_STATUS_KEY, - SORT_TYPE_KEY, - SORT_DURATION_KEY, - SORT_START_TIME_KEY, - SORT_END_TIME_KEY, - SORT_ID_KEY, - SORT_VERSION_KEY - ]); - }); +describe("SUPPORTED_EXECUTIONS_SORT_CRITERIA", () => { + it("should verify supported sort criteria are correct", () => { + // Then + expect(SUPPORTED_EXECUTIONS_SORT_CRITERIA).toEqual([ + SORT_STATUS_KEY, + SORT_TYPE_KEY, + SORT_DURATION_KEY, + SORT_START_TIME_KEY, + SORT_END_TIME_KEY, + SORT_ID_KEY, + SORT_VERSION_KEY, + ]); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/executions-filters.model.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/executions-filters.model.ts index 1dfe18b466..3554ec0eb8 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/executions-filters.model.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/executions-filters.model.ts @@ -3,46 +3,49 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ClrDatagridSortOrder } from '@clr/angular'; +import { ClrDatagridSortOrder } from "@clr/angular"; -import { FILTER_KEY, KeyValueTuple, SORT_KEY } from '../../../../../commons'; +import { FILTER_KEY, KeyValueTuple, SORT_KEY } from "../../../../../commons"; -export const FILTER_TIME_PERIOD_KEY = 'timePeriod'; -export const FILTER_STATUS_KEY = 'status'; -export const FILTER_TYPE_KEY = 'type'; -export const FILTER_DURATION_KEY = 'duration'; -export const FILTER_START_TIME_KEY = 'startTime'; -export const FILTER_END_TIME_KEY = 'endTime'; -export const FILTER_ID_KEY = 'id'; -export const FILTER_VERSION_KEY = 'jobVersion'; +export const FILTER_TIME_PERIOD_KEY = "timePeriod"; +export const FILTER_STATUS_KEY = "status"; +export const FILTER_TYPE_KEY = "type"; +export const FILTER_DURATION_KEY = "duration"; +export const FILTER_START_TIME_KEY = "startTime"; +export const FILTER_END_TIME_KEY = "endTime"; +export const FILTER_ID_KEY = "id"; +export const FILTER_VERSION_KEY = "jobVersion"; /** * ** Executions supported filter criteria types. */ export type ExecutionsFilterCriteria = - | typeof FILTER_TIME_PERIOD_KEY - | typeof FILTER_STATUS_KEY - | typeof FILTER_TYPE_KEY - | typeof FILTER_DURATION_KEY - | typeof FILTER_START_TIME_KEY - | typeof FILTER_END_TIME_KEY - | typeof FILTER_ID_KEY - | typeof FILTER_VERSION_KEY; + | typeof FILTER_TIME_PERIOD_KEY + | typeof FILTER_STATUS_KEY + | typeof FILTER_TYPE_KEY + | typeof FILTER_DURATION_KEY + | typeof FILTER_START_TIME_KEY + | typeof FILTER_END_TIME_KEY + | typeof FILTER_ID_KEY + | typeof FILTER_VERSION_KEY; /** * ** Executions filter pair with its corresponding value in Tuple. */ -export type ExecutionsFilterPairs = KeyValueTuple; +export type ExecutionsFilterPairs = + KeyValueTuple; /** * ** Executions grid filter with its value. */ -export type ExecutionsGridFilter = { property: K; value: string }; +export type ExecutionsGridFilter = + { property: K; value: string }; /** * ** Executions supported filter criteria. */ -export const SUPPORTED_EXECUTIONS_FILTER_CRITERIA: ExecutionsFilterCriteria[] = [ +export const SUPPORTED_EXECUTIONS_FILTER_CRITERIA: ExecutionsFilterCriteria[] = + [ FILTER_TIME_PERIOD_KEY, FILTER_STATUS_KEY, FILTER_TYPE_KEY, @@ -50,48 +53,54 @@ export const SUPPORTED_EXECUTIONS_FILTER_CRITERIA: ExecutionsFilterCriteria[] = FILTER_START_TIME_KEY, FILTER_END_TIME_KEY, FILTER_ID_KEY, - FILTER_VERSION_KEY -]; + FILTER_VERSION_KEY, + ]; -export const SORT_STATUS_KEY = 'status'; -export const SORT_TYPE_KEY = 'type'; -export const SORT_DURATION_KEY = 'duration'; -export const SORT_START_TIME_KEY = 'startTime'; -export const SORT_END_TIME_KEY = 'endTime'; -export const SORT_ID_KEY = 'id'; -export const SORT_VERSION_KEY = 'jobVersion'; +export const SORT_STATUS_KEY = "status"; +export const SORT_TYPE_KEY = "type"; +export const SORT_DURATION_KEY = "duration"; +export const SORT_START_TIME_KEY = "startTime"; +export const SORT_END_TIME_KEY = "endTime"; +export const SORT_ID_KEY = "id"; +export const SORT_VERSION_KEY = "jobVersion"; /** * ** Executions supported sort criteria types. */ export type ExecutionsSortCriteria = - | typeof SORT_STATUS_KEY - | typeof SORT_TYPE_KEY - | typeof SORT_DURATION_KEY - | typeof SORT_START_TIME_KEY - | typeof SORT_END_TIME_KEY - | typeof SORT_ID_KEY - | typeof SORT_VERSION_KEY; + | typeof SORT_STATUS_KEY + | typeof SORT_TYPE_KEY + | typeof SORT_DURATION_KEY + | typeof SORT_START_TIME_KEY + | typeof SORT_END_TIME_KEY + | typeof SORT_ID_KEY + | typeof SORT_VERSION_KEY; /** * ** Executions sort pair with its corresponding value in Tuple. */ -export type ExecutionsSortPairs = KeyValueTuple; +export type ExecutionsSortPairs = KeyValueTuple< + ExecutionsSortCriteria, + ClrDatagridSortOrder +>; /** * ** Executions supported sort criteria. */ export const SUPPORTED_EXECUTIONS_SORT_CRITERIA: ExecutionsSortCriteria[] = [ - SORT_STATUS_KEY, - SORT_TYPE_KEY, - SORT_DURATION_KEY, - SORT_START_TIME_KEY, - SORT_END_TIME_KEY, - SORT_ID_KEY, - SORT_VERSION_KEY + SORT_STATUS_KEY, + SORT_TYPE_KEY, + SORT_DURATION_KEY, + SORT_START_TIME_KEY, + SORT_END_TIME_KEY, + SORT_ID_KEY, + SORT_VERSION_KEY, ]; /** * ** Executions object that holds filter and sort criteria and their corresponding values. */ -export type ExecutionsFilterSortObject = Record; +export type ExecutionsFilterSortObject = Record< + typeof FILTER_KEY | typeof SORT_KEY, + string +>; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/index.ts index 48ccedfbe8..9933269835 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/model/index.ts @@ -3,5 +3,5 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-job-execution'; -export * from './executions-filters.model'; +export * from "./data-job-execution"; +export * from "./executions-filters.model"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/public-api.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/public-api.ts index a5110c341c..08c8aed979 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/public-api.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/public-api.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-job-executions-page'; +export * from "./data-job-executions-page"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/index.ts index 8642886088..0292983f5a 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './time-period-filter.component'; +export * from "./time-period-filter.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/time-period-filter.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/time-period-filter.component.html index 00870bbcf3..15de162f37 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/time-period-filter.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/time-period-filter.component.html @@ -4,170 +4,141 @@ -->
- Filter by time period (UTC): - - - + Filter by time period (UTC): + + +
- -

- {{ fromDateTime | date : dateTimeFormat : "UTC" }} to {{ toDateTime - | date : dateTimeFormat : "UTC" }} - -

- -
+

+ {{ fromDateTime | date: dateTimeFormat : "UTC" }} to + {{ toDateTime | date: dateTimeFormat : "UTC" }} + +

+ + +
+ +
+
+
+ + +
+
+
+
+
+ +
+
+
+ + +
+
+
+
+
+
+ -
-
-
-
-
- -
-
-
- - -
-
-
-
-
-
- - -
-
- - - + Reset + + +
+ + + + diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/time-period-filter.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/time-period-filter.component.scss index 2e828e35bc..0013a22662 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/time-period-filter.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/time-period-filter.component.scss @@ -4,306 +4,318 @@ */ :host { - .data-pipelines-job__executions-period-filter-caret { - margin-top: -2px; + .data-pipelines-job__executions-period-filter-caret { + margin-top: -2px; + } + .time-filter__action-btn { + display: flex; + justify-content: flex-end; + + button { + height: 1.6rem; + line-height: 1.6rem; + margin: 0; + + &:first-child { + margin-right: 0.6rem; + } } - .time-filter__action-btn { - display: flex; - justify-content: flex-end; - - button { - height: 1.6rem; - line-height: 1.6rem; - margin: 0; - + } + + .time-filter__heading { + font-weight: bold; + margin-right: 10px; + } + + .time-filter__container { + display: flex; + align-items: center; + } + + .time-filter__label { + line-height: 1rem; + } + + ::ng-deep { + clr-signpost { + p { + color: #0a7bd8; + margin: 0; + } + + form { + width: 13rem; + + .clr-date-container { + &.clr-form-control { &:first-child { - margin-right: 0.6rem; + margin-top: 0; } + } } - } + } - .time-filter__heading { - font-weight: bold; - margin-right: 10px; + .signpost-content-body { + overflow-y: visible; + } } - .time-filter__container { - display: flex; - align-items: center; - } + dp-date-picker { + --date-picker-border-color: rgba(0, 0, 0, 0.1); + --date-picker-box-shadow: 1px 1px 5px #0000001a; + + --date-picker-background-color: #fff; + --date-picker-selected-background-color: var( + --clr-calendar-active-cell-background-color, + #d8e3e9 + ); + --date-picker-hover-background-color: var( + --clr-calendar-btn-hover-focus-color, + #e8e8e8 + ); + --date-picker-text-color: var(--clr-p1-color, #666666); + --date-picker-selected-text-color: var( + --clr-calendar-active-cell-color, + black + ); + --date-picker-current-text-color: var( + --clr-calendar-today-date-cell-color, + black + ); + + .dp-popup { + background: var(--date-picker-background-color); + border-color: var(--date-picker-border-color); + box-shadow: var(--date-picker-box-shadow); + } + + dp-calendar-nav { + &.dp-material { + .dp-calendar-nav-container { + border: 0; + height: 36px; + } + + .dp-nav-btns-container { + right: 0; + } + + .dp-nav-header { + left: 10px; + } + + .dp-nav-header-btn { + height: 1.8rem; + padding: 0; + margin: 0; + border: 0; + width: auto; + font-size: var(--clr-calendar-picker-btn-font-size, 0.9rem); + font-weight: var(--clr-calendar-picker-btn-font-weight, 200); + line-height: 1.8rem; + border-radius: var(--clr-global-borderradius, 0.15rem); + color: var(--clr-calendar-btn-color, #0072a3); + background: var(--date-picker-background-color); + + &:hover { + background: var(--date-picker-hover-background-color); + } + } - .time-filter__label { - line-height: 1rem; - } + .dp-calendar-nav-left { + &:before { + left: 2px; + } + } - ::ng-deep { - clr-signpost { - p { - color: #0a7bd8; - margin: 0; + .dp-calendar-nav-right { + &:before { + left: -2px; + } + } + + .dp-calendar-nav-left, + .dp-calendar-nav-right { + width: 36px; + height: 36px; + color: var(--clr-calendar-btn-color, #0072a3); + background: var(--date-picker-background-color); + + &:before { + width: 10px; + height: 10px; } - form { - width: 13rem; + &:hover { + background: var(--date-picker-hover-background-color); + } + } - .clr-date-container { - &.clr-form-control { - &:first-child { - margin-top: 0; - } - } - } + .dp-current-location-btn { + background: var(--clr-calendar-btn-color, #0072a3); + width: 18px; + height: 18px; + } + } + } + + dp-day-calendar { + &.dp-material { + .dp-calendar-wrapper { + border: 0; + } + + .dp-weekdays { + margin-bottom: 0; + height: 36px; + display: flex; + align-items: center; + } + + .dp-calendar-weekday { + width: 36px; + height: 25px; + text-align: center; + font-size: var(--clr-day-font-size, 0.6rem); + font-weight: 600; + color: var(--clr-p1-color, #666666); + } + + .dp-calendar-day { + height: 1.8rem; + min-width: 1.8rem; + line-height: 1.8rem; + padding: 0; + margin: 0; + border: 0; + border-radius: var(--clr-global-borderradius, 0.15rem); + color: var(--date-picker-text-color); + background: var(--date-picker-background-color); + + &.dp-current-day { + color: var(--date-picker-current-text-color); + font-weight: var(--clr-calendar-today-date-cell-font-weight, 600); } - .signpost-content-body { - overflow-y: visible; + &.dp-selected { + color: var(--date-picker-selected-text-color); + background: var(--date-picker-selected-background-color); } + + &:hover { + background: var(--date-picker-hover-background-color); + } + + &:disabled { + opacity: 0.4; + pointer-events: none; + } + } } - dp-date-picker { - --date-picker-border-color: rgba(0, 0, 0, 0.1); - --date-picker-box-shadow: 1px 1px 5px #0000001a; - - --date-picker-background-color: #fff; - --date-picker-selected-background-color: var(--clr-calendar-active-cell-background-color, #d8e3e9); - --date-picker-hover-background-color: var(--clr-calendar-btn-hover-focus-color, #e8e8e8); - --date-picker-text-color: var(--clr-p1-color, #666666); - --date-picker-selected-text-color: var(--clr-calendar-active-cell-color, black); - --date-picker-current-text-color: var(--clr-calendar-today-date-cell-color, black); - - .dp-popup { - background: var(--date-picker-background-color); - border-color: var(--date-picker-border-color); - box-shadow: var(--date-picker-box-shadow); + .dp-day-calendar-container { + background: var(--date-picker-background-color); + } + } + + dp-day-time-calendar { + padding: 0.6rem; + + &.dp-material { + dp-time-select { + border: 0; + + .dp-time-select-controls { + background: var(--date-picker-background-color); + } + + .dp-time-select-control { + width: 36px; + + &.dp-time-select-separator { + width: 5px; + } + } + + .dp-time-select-control-up { + &:before { + top: 2px; + } } - dp-calendar-nav { - &.dp-material { - .dp-calendar-nav-container { - border: 0; - height: 36px; - } - - .dp-nav-btns-container { - right: 0; - } - - .dp-nav-header { - left: 10px; - } - - .dp-nav-header-btn { - height: 1.8rem; - padding: 0; - margin: 0; - border: 0; - width: auto; - font-size: var(--clr-calendar-picker-btn-font-size, 0.9rem); - font-weight: var(--clr-calendar-picker-btn-font-weight, 200); - line-height: 1.8rem; - border-radius: var(--clr-global-borderradius, 0.15rem); - color: var(--clr-calendar-btn-color, #0072a3); - background: var(--date-picker-background-color); - - &:hover { - background: var(--date-picker-hover-background-color); - } - } - - .dp-calendar-nav-left { - &:before { - left: 2px; - } - } - - .dp-calendar-nav-right { - &:before { - left: -2px; - } - } - - .dp-calendar-nav-left, - .dp-calendar-nav-right { - width: 36px; - height: 36px; - color: var(--clr-calendar-btn-color, #0072a3); - background: var(--date-picker-background-color); - - &:before { - width: 10px; - height: 10px; - } - - &:hover { - background: var(--date-picker-hover-background-color); - } - } - - .dp-current-location-btn { - background: var(--clr-calendar-btn-color, #0072a3); - width: 18px; - height: 18px; - } - } + .dp-time-select-control-down { + &:before { + top: -2px; + } } - dp-day-calendar { - &.dp-material { - .dp-calendar-wrapper { - border: 0; - } - - .dp-weekdays { - margin-bottom: 0; - height: 36px; - display: flex; - align-items: center; - } - - .dp-calendar-weekday { - width: 36px; - height: 25px; - text-align: center; - font-size: var(--clr-day-font-size, 0.6rem); - font-weight: 600; - color: var(--clr-p1-color, #666666); - } - - .dp-calendar-day { - height: 1.8rem; - min-width: 1.8rem; - line-height: 1.8rem; - padding: 0; - margin: 0; - border: 0; - border-radius: var(--clr-global-borderradius, 0.15rem); - color: var(--date-picker-text-color); - background: var(--date-picker-background-color); - - &.dp-current-day { - color: var(--date-picker-current-text-color); - font-weight: var(--clr-calendar-today-date-cell-font-weight, 600); - } - - &.dp-selected { - color: var(--date-picker-selected-text-color); - background: var(--date-picker-selected-background-color); - } - - &:hover { - background: var(--date-picker-hover-background-color); - } - - &:disabled { - opacity: 0.4; - pointer-events: none; - } - } - } - - .dp-day-calendar-container { - background: var(--date-picker-background-color); - } + .dp-time-select-control-up, + .dp-time-select-control-down { + padding: 0; + margin: 0; + border: 0; + width: 36px; + height: 36px; + border-radius: var(--clr-global-borderradius, 0.15rem); + color: var(--clr-calendar-btn-color, #0072a3); + + &:before { + width: 9px; + height: 9px; + } + + &:hover { + background: var(--date-picker-hover-background-color); + } + } + } + } + } + + dp-month-calendar { + &.dp-material { + .dp-month-calendar-container { + background: var(--date-picker-background-color); + } + + .dp-calendar-month { + height: 2.4rem; + min-width: 2.4rem; + width: 6.3rem; + padding: 0 0.6rem; + margin: 0; + border: 0; + border-radius: var(--clr-global-borderradius, 0.15rem); + cursor: pointer; + font-size: 0.9rem; + font-weight: 200; + line-height: 1.8rem; + color: var(--date-picker-text-color); + background: var(--date-picker-background-color); + + &.dp-current-month { + color: var(--date-picker-current-text-color); + font-weight: var(--clr-calendar-today-date-cell-font-weight, 600); + } + + &.dp-selected { + color: var(--date-picker-selected-text-color); + background: var(--date-picker-selected-background-color); } - dp-day-time-calendar { - padding: 0.6rem; - - &.dp-material { - dp-time-select { - border: 0; - - .dp-time-select-controls { - background: var(--date-picker-background-color); - } - - .dp-time-select-control { - width: 36px; - - &.dp-time-select-separator { - width: 5px; - } - } - - .dp-time-select-control-up { - &:before { - top: 2px; - } - } - - .dp-time-select-control-down { - &:before { - top: -2px; - } - } - - .dp-time-select-control-up, - .dp-time-select-control-down { - padding: 0; - margin: 0; - border: 0; - width: 36px; - height: 36px; - border-radius: var(--clr-global-borderradius, 0.15rem); - color: var(--clr-calendar-btn-color, #0072a3); - - &:before { - width: 9px; - height: 9px; - } - - &:hover { - background: var(--date-picker-hover-background-color); - } - } - } - } + &:hover { + background: var(--date-picker-hover-background-color); } - dp-month-calendar { - &.dp-material { - .dp-month-calendar-container { - background: var(--date-picker-background-color); - } - - .dp-calendar-month { - height: 2.4rem; - min-width: 2.4rem; - width: 6.3rem; - padding: 0 0.6rem; - margin: 0; - border: 0; - border-radius: var(--clr-global-borderradius, 0.15rem); - cursor: pointer; - font-size: 0.9rem; - font-weight: 200; - line-height: 1.8rem; - color: var(--date-picker-text-color); - background: var(--date-picker-background-color); - - &.dp-current-month { - color: var(--date-picker-current-text-color); - font-weight: var(--clr-calendar-today-date-cell-font-weight, 600); - } - - &.dp-selected { - color: var(--date-picker-selected-text-color); - background: var(--date-picker-selected-background-color); - } - - &:hover { - background: var(--date-picker-hover-background-color); - } - - &:disabled { - opacity: 0.4; - pointer-events: none; - } - } - } + &:disabled { + opacity: 0.4; + pointer-events: none; } + } } + } } + } } // TODO uncomment for v13+ @@ -556,40 +568,40 @@ //} .fade-to-dark { - &.dark { - :host { - ::ng-deep { - dp-date-picker { - --date-picker-border-color: #000; - --date-picker-box-shadow: 0 0.05rem 0.15rem rgb(0 0 0 / 50%); - - --date-picker-background-color: #21333b; - --date-picker-selected-background-color: #324f62; - --date-picker-hover-background-color: #28404d; - --date-picker-text-color: #acbac3; - --date-picker-selected-text-color: #fff; - --date-picker-current-text-color: #fff; - } - } + &.dark { + :host { + ::ng-deep { + dp-date-picker { + --date-picker-border-color: #000; + --date-picker-box-shadow: 0 0.05rem 0.15rem rgb(0 0 0 / 50%); + + --date-picker-background-color: #21333b; + --date-picker-selected-background-color: #324f62; + --date-picker-hover-background-color: #28404d; + --date-picker-text-color: #acbac3; + --date-picker-selected-text-color: #fff; + --date-picker-current-text-color: #fff; } - - // TODO uncomment for v13+ - //::ng-deep .cdk-overlay-container { - // .dp-material { - // &.data-pipelines__executions-filter-picker { - // &.dp-popup { - // --date-picker-border-color: #000; - // --date-picker-box-shadow: 0 0.05rem 0.15rem rgb(0 0 0 / 50%); - // - // --date-picker-background-color: #21333b; - // --date-picker-selected-background-color: #324f62; - // --date-picker-hover-background-color: #28404d; - // --date-picker-text-color: #acbac3; - // --date-picker-selected-text-color: #fff; - // --date-picker-current-text-color: #fff; - // } - // } - // } - //} + } } + + // TODO uncomment for v13+ + //::ng-deep .cdk-overlay-container { + // .dp-material { + // &.data-pipelines__executions-filter-picker { + // &.dp-popup { + // --date-picker-border-color: #000; + // --date-picker-box-shadow: 0 0.05rem 0.15rem rgb(0 0 0 / 50%); + // + // --date-picker-background-color: #21333b; + // --date-picker-selected-background-color: #324f62; + // --date-picker-hover-background-color: #28404d; + // --date-picker-text-color: #acbac3; + // --date-picker-selected-text-color: #fff; + // --date-picker-current-text-color: #fff; + // } + // } + // } + //} + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/time-period-filter.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/time-period-filter.component.ts index 37de5fd76b..f67a751aa9 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/time-period-filter.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/pages/executions/time-period-filter/time-period-filter.component.ts @@ -3,576 +3,743 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'; -import { FormBuilder, FormControl, FormGroup } from '@angular/forms'; - -import { CalendarValue, DatePickerDirective, IDatePickerDirectiveConfig } from 'ng2-date-picker'; +import { + Component, + EventEmitter, + Input, + OnChanges, + OnDestroy, + OnInit, + Output, + SimpleChanges, + ViewChild, +} from "@angular/core"; +import { FormBuilder, FormControl, FormGroup } from "@angular/forms"; + +import { + CalendarValue, + DatePickerDirective, + IDatePickerDirectiveConfig, +} from "ng2-date-picker"; // TODO [import dayjs from 'dayjs'] used in ng2-date-picker v13+ instead of moment -import moment from 'moment'; +import moment from "moment"; -import { CollectionsUtil } from '@versatiledatakit/shared'; +import { CollectionsUtil } from "@versatiledatakit/shared"; -import { FiltersSortManager } from '../../../../../commons'; +import { FiltersSortManager } from "../../../../../commons"; -import { DATA_PIPELINES_DATE_TIME_FORMAT } from '../../../../../model'; +import { DATA_PIPELINES_DATE_TIME_FORMAT } from "../../../../../model"; -import { ExecutionsFilterCriteria, FILTER_TIME_PERIOD_KEY } from '../model'; +import { ExecutionsFilterCriteria, FILTER_TIME_PERIOD_KEY } from "../model"; type CustomFormGroup = FormGroup & { controls: { [key: string]: FormControl } }; interface DateTimePeriod { - from: Date; - to: Date; + from: Date; + to: Date; } @Component({ - selector: 'lib-time-period-filter', - templateUrl: './time-period-filter.component.html', - styleUrls: ['./time-period-filter.component.scss'] + selector: "lib-time-period-filter", + templateUrl: "./time-period-filter.component.html", + styleUrls: ["./time-period-filter.component.scss"], }) export class TimePeriodFilterComponent implements OnInit, OnChanges, OnDestroy { - @ViewChild('fromPicker') fromPicker: DatePickerDirective; - @ViewChild('toPicker') toPicker: DatePickerDirective; - - /** - * ** Whether component is in state loading. - */ - @Input() loading = false; - - /** - * ** Flag that indicates there is jobs executions load error. - */ - @Input() isComponentInErrorState = false; - - /** - * ** Executions filters sort manager injected from parent. - */ - @Input() filtersSortManager: Readonly>; - - /** - * ** Date time period serialized in string format with pattern "{{epochDateTime}}-{{epochDateTime}}". - */ - @Input() selectedPeriodSerialized: string; - - /** - * ** Date time period in raw format of type object with field from and to of type Date. - */ - @Input() selectedPeriod: DateTimePeriod; - - /** - * ** Minimum available for selection DateTime in UTC. - */ - @Input() minDateTime: Date; - - /** - * ** Event Emitter that emits events on every user form action like submit or clear. - */ - @Output() filterChanged: EventEmitter = new EventEmitter(); - - pickerConfig: IDatePickerDirectiveConfig = { - // TODO [format: 'MMM DD, YYYY, hh:mm:ss A',] dayjs - format: 'MMM DD, yyyy, hh:mm:ss A', - showGoToCurrent: true, - showTwentyFourHours: false, - showSeconds: true, - weekDayFormat: 'dd', - numOfMonthRows: 6, - monthBtnFormat: 'MMMM' - }; - fromPickerConfig: IDatePickerDirectiveConfig = { - ...this.pickerConfig - }; - toPickerConfig: IDatePickerDirectiveConfig = { - ...this.pickerConfig - }; - - /** - * ** User selected value for "FROM" time date picker. - */ - fromDateTime: Date = null; - - /** - * ** User selected value for "TO" time date picker. - */ - toDateTime: Date = null; - - /** - * ** DateTime format pattern provided to Angular DateTime pipe. - */ - dateTimeFormat: string = DATA_PIPELINES_DATE_TIME_FORMAT; - - /** - * ** Allowed ranges for "fromDateTime" time date picker. - */ - // "FROM" time min allowed value is used from {@link this.minDateTime} - fromDateTimeMin: moment.Moment; - // "FROM" time max allowed value is less than {@link this.toDateTimeMin} - fromDateTimeMax: moment.Moment; - - /** - * ** Allowed ranges for "toDateTime" time date picker. - */ - // "TO" time min allowed value is less than {@link this.fromDateTimeMax} - toDateTimeMin: moment.Moment; - // "TO" time max allowed value for selection is current time. There is scheduled interval on 15s that updates this value. - // TODO check if will work without upper range - toDateTimeMax: moment.Moment; - - /** - * ** Angular form where DatePicker inputs belongs. - */ - tmForm: CustomFormGroup; - - private _isFromPickerOpened = false; - private _isToPickerOpened = false; - - private _initiallySetMin = false; - private _initiallySetMax = false; - - // refresh interval scheduled reference - private _refreshIntervalRef: number; - - private _previousSelectedPeriodSerialized: string; - - private _isUrlNormalized = false; - - /** - * ** Constructor. - */ - constructor(private readonly formBuilder: FormBuilder) { - this.tmForm = this.formBuilder.group({ - fromDateTime: '', - toDateTime: '' - }) as CustomFormGroup; + @ViewChild("fromPicker") fromPicker: DatePickerDirective; + @ViewChild("toPicker") toPicker: DatePickerDirective; + + /** + * ** Whether component is in state loading. + */ + @Input() loading = false; + + /** + * ** Flag that indicates there is jobs executions load error. + */ + @Input() isComponentInErrorState = false; + + /** + * ** Executions filters sort manager injected from parent. + */ + @Input() filtersSortManager: Readonly< + FiltersSortManager + >; + + /** + * ** Date time period serialized in string format with pattern "{{epochDateTime}}-{{epochDateTime}}". + */ + @Input() selectedPeriodSerialized: string; + + /** + * ** Date time period in raw format of type object with field from and to of type Date. + */ + @Input() selectedPeriod: DateTimePeriod; + + /** + * ** Minimum available for selection DateTime in UTC. + */ + @Input() minDateTime: Date; + + /** + * ** Event Emitter that emits events on every user form action like submit or clear. + */ + @Output() filterChanged: EventEmitter = + new EventEmitter(); + + pickerConfig: IDatePickerDirectiveConfig = { + // TODO [format: 'MMM DD, YYYY, hh:mm:ss A',] dayjs + format: "MMM DD, yyyy, hh:mm:ss A", + showGoToCurrent: true, + showTwentyFourHours: false, + showSeconds: true, + weekDayFormat: "dd", + numOfMonthRows: 6, + monthBtnFormat: "MMMM", + }; + fromPickerConfig: IDatePickerDirectiveConfig = { + ...this.pickerConfig, + }; + toPickerConfig: IDatePickerDirectiveConfig = { + ...this.pickerConfig, + }; + + /** + * ** User selected value for "FROM" time date picker. + */ + fromDateTime: Date = null; + + /** + * ** User selected value for "TO" time date picker. + */ + toDateTime: Date = null; + + /** + * ** DateTime format pattern provided to Angular DateTime pipe. + */ + dateTimeFormat: string = DATA_PIPELINES_DATE_TIME_FORMAT; + + /** + * ** Allowed ranges for "fromDateTime" time date picker. + */ + // "FROM" time min allowed value is used from {@link this.minDateTime} + fromDateTimeMin: moment.Moment; + // "FROM" time max allowed value is less than {@link this.toDateTimeMin} + fromDateTimeMax: moment.Moment; + + /** + * ** Allowed ranges for "toDateTime" time date picker. + */ + // "TO" time min allowed value is less than {@link this.fromDateTimeMax} + toDateTimeMin: moment.Moment; + // "TO" time max allowed value for selection is current time. There is scheduled interval on 15s that updates this value. + // TODO check if will work without upper range + toDateTimeMax: moment.Moment; + + /** + * ** Angular form where DatePicker inputs belongs. + */ + tmForm: CustomFormGroup; + + private _isFromPickerOpened = false; + private _isToPickerOpened = false; + + private _initiallySetMin = false; + private _initiallySetMax = false; + + // refresh interval scheduled reference + private _refreshIntervalRef: number; + + private _previousSelectedPeriodSerialized: string; + + private _isUrlNormalized = false; + + /** + * ** Constructor. + */ + constructor(private readonly formBuilder: FormBuilder) { + this.tmForm = this.formBuilder.group({ + fromDateTime: "", + toDateTime: "", + }) as CustomFormGroup; + } + + onDateTimeChange($event: CalendarValue, type: "from" | "to"): void { + if (CollectionsUtil.isNil($event)) { + return; } - onDateTimeChange($event: CalendarValue, type: 'from' | 'to'): void { - if (CollectionsUtil.isNil($event)) { - return; - } - - const emittedDate = $event as moment.Moment; - - if (type === 'from') { - if (emittedDate.isBefore(this.fromDateTimeMin) || emittedDate.isAfter(this.fromDateTimeMax)) { - return; - } - - this.toDateTimeMin = this._adjustDateTime(emittedDate, 'min'); - this.toPickerConfig = { - ...this.toPickerConfig, - min: this.toDateTimeMin - }; - - this.fromDateTime = new Date(this._adjustDateTime(emittedDate, 'from', 'timezone').valueOf()); - } else { - if (emittedDate.isBefore(this.toDateTimeMin) || emittedDate.isAfter(this.toDateTimeMax)) { - return; - } - - this.fromDateTimeMax = this._adjustDateTime(emittedDate, 'max'); - this.fromPickerConfig = { - ...this.fromPickerConfig, - max: this.fromDateTimeMax - }; - - this.toDateTime = new Date(this._adjustDateTime(emittedDate, 'to', 'timezone').valueOf()); - } + const emittedDate = $event as moment.Moment; + + if (type === "from") { + if ( + emittedDate.isBefore(this.fromDateTimeMin) || + emittedDate.isAfter(this.fromDateTimeMax) + ) { + return; + } + + this.toDateTimeMin = this._adjustDateTime(emittedDate, "min"); + this.toPickerConfig = { + ...this.toPickerConfig, + min: this.toDateTimeMin, + }; + + this.fromDateTime = new Date( + this._adjustDateTime(emittedDate, "from", "timezone").valueOf(), + ); + } else { + if ( + emittedDate.isBefore(this.toDateTimeMin) || + emittedDate.isAfter(this.toDateTimeMax) + ) { + return; + } + + this.fromDateTimeMax = this._adjustDateTime(emittedDate, "max"); + this.fromPickerConfig = { + ...this.fromPickerConfig, + max: this.fromDateTimeMax, + }; + + this.toDateTime = new Date( + this._adjustDateTime(emittedDate, "to", "timezone").valueOf(), + ); } - - togglePicker($event: MouseEvent, type: 'from' | 'to'): void { - $event.preventDefault(); - - if (type === 'from') { - if (this._isFromPickerOpened) { - this.fromPicker.api.close(); - } else { - this.fromPicker.api.open(); - } - } else { - if (this._isToPickerOpened) { - this.toPicker.api.close(); - } else { - this.toPicker.api.open(); - } - } + } + + togglePicker($event: MouseEvent, type: "from" | "to"): void { + $event.preventDefault(); + + if (type === "from") { + if (this._isFromPickerOpened) { + this.fromPicker.api.close(); + } else { + this.fromPicker.api.open(); + } + } else { + if (this._isToPickerOpened) { + this.toPicker.api.close(); + } else { + this.toPicker.api.open(); + } } + } - onPickerOpened(type: 'from' | 'to', isOpened: boolean): void { - if (type === 'from') { - this._isFromPickerOpened = isOpened; - } else { - this._isToPickerOpened = isOpened; - } + onPickerOpened(type: "from" | "to", isOpened: boolean): void { + if (type === "from") { + this._isFromPickerOpened = isOpened; + } else { + this._isToPickerOpened = isOpened; } + } - /** - * ** Apply selected values and emit. - */ - applyFilter($event: Event): void { - $event?.preventDefault(); + /** + * ** Apply selected values and emit. + */ + applyFilter($event: Event): void { + $event?.preventDefault(); - this._updateFiltersSortManager(); - this._emitChanges(); - } + this._updateFiltersSortManager(); + this._emitChanges(); + } - /** - * ** Clear selected values and emit. - */ - clearFilter($event: MouseEvent, triggerMinMaxDateTimeChangeDetection = false): void { - $event?.preventDefault(); + /** + * ** Clear selected values and emit. + */ + clearFilter( + $event: MouseEvent, + triggerMinMaxDateTimeChangeDetection = false, + ): void { + $event?.preventDefault(); - this._initiallySetMin = false; - this._initiallySetMax = false; + this._initiallySetMin = false; + this._initiallySetMax = false; - this.fromDateTime = null; - this.toDateTime = null; + this.fromDateTime = null; + this.toDateTime = null; - this._updateFiltersSortManager(); - this._emitChanges(); + this._updateFiltersSortManager(); + this._emitChanges(); - if (triggerMinMaxDateTimeChangeDetection) { - this._changeDetectionMinDateTime(); + if (triggerMinMaxDateTimeChangeDetection) { + this._changeDetectionMinDateTime(); - this._changeDetectionMaxDateTime(); - } + this._changeDetectionMaxDateTime(); + } + } + + /** + * @inheritDoc + */ + ngOnChanges(changes: SimpleChanges): void { + if (changes["selectedPeriodSerialized"]) { + this._changeDetectionSelectedPeriodSerialized(); } - /** - * @inheritDoc - */ - ngOnChanges(changes: SimpleChanges): void { - if (changes['selectedPeriodSerialized']) { - this._changeDetectionSelectedPeriodSerialized(); - } - - if (changes['selectedPeriod'] && !changes['selectedPeriod'].firstChange) { - this._changeDetectionSelectedPeriod(); - } - - if (changes['minDateTime']) { - if (CollectionsUtil.isDefined(this.minDateTime)) { - this._changeDetectionMinDateTime(); + if (changes["selectedPeriod"] && !changes["selectedPeriod"].firstChange) { + this._changeDetectionSelectedPeriod(); + } - this._changeDetectionMaxDateTime(); - } - } + if (changes["minDateTime"]) { + if (CollectionsUtil.isDefined(this.minDateTime)) { + this._changeDetectionMinDateTime(); - this._normalizeUrlAfterLoad(); + this._changeDetectionMaxDateTime(); + } } - /** - * @inheritDoc - */ - ngOnInit(): void { - // TODO check if we could not set max time for "TO" period filter and instead current time to be the max allowed - this._refreshIntervalRef = setInterval( - // eslint-disable-next-line @typescript-eslint/no-unsafe-argument - this._changeDetectionMaxDateTime.bind(this), - 15 * 1000 - ); // Update max time every 15s - - // TODO check if would have better performance with mutation observer - // register callback that would listen for mutation of supported filter and sort criteria - // this.filtersSortManager.registerMutationObserver((changes) => { - // const foundIndex = changes.findIndex(([key, value]) => key === FILTER_TIME_PERIOD_KEY && this._previousSelectedPeriodSerialized !== value); - // if (foundIndex !== -1) { - // this.selectedPeriodSerialized = changes[foundIndex][1] as string; - // this._changeDetectionSelectedPeriodSerialized(); - // } - // }); + this._normalizeUrlAfterLoad(); + } + + /** + * @inheritDoc + */ + ngOnInit(): void { + // TODO check if we could not set max time for "TO" period filter and instead current time to be the max allowed + this._refreshIntervalRef = setInterval( + // eslint-disable-next-line @typescript-eslint/no-unsafe-argument + this._changeDetectionMaxDateTime.bind(this), + 15 * 1000, + ); // Update max time every 15s + + // TODO check if would have better performance with mutation observer + // register callback that would listen for mutation of supported filter and sort criteria + // this.filtersSortManager.registerMutationObserver((changes) => { + // const foundIndex = changes.findIndex(([key, value]) => key === FILTER_TIME_PERIOD_KEY && this._previousSelectedPeriodSerialized !== value); + // if (foundIndex !== -1) { + // this.selectedPeriodSerialized = changes[foundIndex][1] as string; + // this._changeDetectionSelectedPeriodSerialized(); + // } + // }); + } + + /** + * @inheritDoc + */ + ngOnDestroy(): void { + if (this._refreshIntervalRef) { + clearInterval(this._refreshIntervalRef); + } + } + + private _adjustDateTime( + date: number | string | Date | moment.Moment, + type: "min" | "max" | "from" | "to", + travel: "utc" | "timezone" = null, + ): moment.Moment { + const offset = moment().utcOffset(); + + let dtInstance = moment(date); + + if (travel) { + if (offset > 0) { + dtInstance = + travel === "utc" + ? dtInstance.subtract(offset, "m") + : dtInstance.add(offset, "m"); + } else if (offset < 0) { + dtInstance = + travel === "utc" + ? dtInstance.add(-offset, "m") + : dtInstance.subtract(-offset, "m"); + } } - /** - * @inheritDoc - */ - ngOnDestroy(): void { - if (this._refreshIntervalRef) { - clearInterval(this._refreshIntervalRef); - } + if (type === "min") { + dtInstance = dtInstance.millisecond(0).subtract(1, "ms"); + } else if (type === "max") { + dtInstance = dtInstance.millisecond(0).add(1, "ms"); + } else if (type === "from") { + dtInstance = dtInstance.millisecond(0); + } else if (type === "to") { + dtInstance = dtInstance.millisecond(999); } - private _adjustDateTime( - date: number | string | Date | moment.Moment, - type: 'min' | 'max' | 'from' | 'to', - travel: 'utc' | 'timezone' = null - ): moment.Moment { - const offset = moment().utcOffset(); - - let dtInstance = moment(date); - - if (travel) { - if (offset > 0) { - dtInstance = travel === 'utc' ? dtInstance.subtract(offset, 'm') : dtInstance.add(offset, 'm'); - } else if (offset < 0) { - dtInstance = travel === 'utc' ? dtInstance.add(-offset, 'm') : dtInstance.subtract(-offset, 'm'); - } - } + return dtInstance; + } + + private _updateFiltersSortManager(): void { + if ( + CollectionsUtil.isNil(this.fromDateTime) || + CollectionsUtil.isNil(this.toDateTime) + ) { + this._previousSelectedPeriodSerialized = undefined; + this.filtersSortManager.deleteFilter(FILTER_TIME_PERIOD_KEY); + } else { + const serializedDateTimePeriod = + this._serializeDateTimePeriodPairValues(); + + this._previousSelectedPeriodSerialized = serializedDateTimePeriod; + this.filtersSortManager.setFilter( + FILTER_TIME_PERIOD_KEY, + serializedDateTimePeriod, + ); + } + } - if (type === 'min') { - dtInstance = dtInstance.millisecond(0).subtract(1, 'ms'); - } else if (type === 'max') { - dtInstance = dtInstance.millisecond(0).add(1, 'ms'); - } else if (type === 'from') { - dtInstance = dtInstance.millisecond(0); - } else if (type === 'to') { - dtInstance = dtInstance.millisecond(999); - } + private _changeDetectionSelectedPeriodSerialized(): void { + if ( + this._previousSelectedPeriodSerialized === this.selectedPeriodSerialized + ) { + return; + } - return dtInstance; + if ( + !CollectionsUtil.isString(this.selectedPeriodSerialized) || + this.selectedPeriodSerialized.length === 0 + ) { + if ( + CollectionsUtil.isDefined(this.fromDateTime) || + CollectionsUtil.isDefined(this.toDateTime) + ) { + this.clearFilter(null); + } + } else { + const deserializedPeriodValues: DateTimePeriod = + this._deserializeDateTimePeriodPairValues( + this.selectedPeriodSerialized, + ); + if (deserializedPeriodValues) { + this.fromDateTime = deserializedPeriodValues.from; + this.toDateTime = deserializedPeriodValues.to; + + this._updateForm("both"); + + this.applyFilter(null); + } } + } - private _updateFiltersSortManager(): void { - if (CollectionsUtil.isNil(this.fromDateTime) || CollectionsUtil.isNil(this.toDateTime)) { - this._previousSelectedPeriodSerialized = undefined; - this.filtersSortManager.deleteFilter(FILTER_TIME_PERIOD_KEY); - } else { - const serializedDateTimePeriod = this._serializeDateTimePeriodPairValues(); + private _changeDetectionSelectedPeriod(): void { + if (CollectionsUtil.isNil(this.selectedPeriod)) { + return; + } - this._previousSelectedPeriodSerialized = serializedDateTimePeriod; - this.filtersSortManager.setFilter(FILTER_TIME_PERIOD_KEY, serializedDateTimePeriod); - } + if ( + this.fromDateTime === this.selectedPeriod.from && + this.toDateTime === this.selectedPeriod.to + ) { + return; } - private _changeDetectionSelectedPeriodSerialized(): void { - if (this._previousSelectedPeriodSerialized === this.selectedPeriodSerialized) { - return; + if ( + CollectionsUtil.isNil(this.selectedPeriod.from) || + CollectionsUtil.isNil(this.selectedPeriod.to) + ) { + if ( + CollectionsUtil.isDefined(this.fromDateTime) || + CollectionsUtil.isDefined(this.toDateTime) + ) { + this.clearFilter(null); + } + } else { + const periodFromAdjusted = this._adjustDateTime( + this.selectedPeriod.from, + null, + ); + const periodToAdjusted = this._adjustDateTime( + this.selectedPeriod.to, + null, + ); + + if (!periodFromAdjusted.isBefore(periodToAdjusted)) { + return; + } + + if ( + CollectionsUtil.isDefined(this.fromDateTimeMin) && + CollectionsUtil.isDefined(this.toDateTimeMax) + ) { + if ( + periodFromAdjusted.isSameOrAfter(this.fromDateTimeMin) && + periodFromAdjusted.isBefore(this.toDateTimeMax) + ) { + this.fromDateTime = new Date( + this._adjustDateTime( + this.selectedPeriod.from, + "from", + "timezone", + ).valueOf(), + ); } - if (!CollectionsUtil.isString(this.selectedPeriodSerialized) || this.selectedPeriodSerialized.length === 0) { - if (CollectionsUtil.isDefined(this.fromDateTime) || CollectionsUtil.isDefined(this.toDateTime)) { - this.clearFilter(null); - } - } else { - const deserializedPeriodValues: DateTimePeriod = this._deserializeDateTimePeriodPairValues(this.selectedPeriodSerialized); - if (deserializedPeriodValues) { - this.fromDateTime = deserializedPeriodValues.from; - this.toDateTime = deserializedPeriodValues.to; - - this._updateForm('both'); - - this.applyFilter(null); - } + if ( + periodToAdjusted.isAfter(this.fromDateTimeMin) && + periodToAdjusted.isSameOrBefore(this.toDateTimeMax) + ) { + this.toDateTime = new Date( + this._adjustDateTime( + this.selectedPeriod.to, + "to", + "timezone", + ).valueOf(), + ); } + } else { + this.fromDateTime = new Date( + this._adjustDateTime( + this.selectedPeriod.from, + "from", + "timezone", + ).valueOf(), + ); + this.toDateTime = new Date( + this._adjustDateTime( + this.selectedPeriod.to, + "to", + "timezone", + ).valueOf(), + ); + } + + this._updateForm("both"); + + this.applyFilter(null); } - - private _changeDetectionSelectedPeriod(): void { - if (CollectionsUtil.isNil(this.selectedPeriod)) { - return; + } + + private _changeDetectionMinDateTime(): void { + // set once during initialization or forced when user clear the form + if (!this._initiallySetMin) { + this._initiallySetMin = true; + + if ( + CollectionsUtil.isDate(this.fromDateTime) && + CollectionsUtil.isDate(this.minDateTime) + ) { + if (this.fromDateTime.getTime() < this.minDateTime.getTime()) { + this.fromDateTime = this.minDateTime; } + } else { + this.fromDateTime = this.minDateTime; + } + + this.fromDateTimeMin = this._adjustDateTime( + this.minDateTime, + "min", + "utc", + ); + this.fromPickerConfig = { + ...this.fromPickerConfig, + min: this.fromDateTimeMin, + }; + + this.toDateTimeMin = this._adjustDateTime( + this.fromDateTime ?? this.minDateTime, + "min", + "utc", + ); + this.toPickerConfig = { + ...this.toPickerConfig, + min: this.toDateTimeMin, + }; + + if (!this._isFromPickerOpened) { + this._updateForm("fromDateTime"); + } + } + } - if (this.fromDateTime === this.selectedPeriod.from && this.toDateTime === this.selectedPeriod.to) { - return; - } + private _changeDetectionMaxDateTime() { + const date = new Date(); - if (CollectionsUtil.isNil(this.selectedPeriod.from) || CollectionsUtil.isNil(this.selectedPeriod.to)) { - if (CollectionsUtil.isDefined(this.fromDateTime) || CollectionsUtil.isDefined(this.toDateTime)) { - this.clearFilter(null); - } - } else { - const periodFromAdjusted = this._adjustDateTime(this.selectedPeriod.from, null); - const periodToAdjusted = this._adjustDateTime(this.selectedPeriod.to, null); - - if (!periodFromAdjusted.isBefore(periodToAdjusted)) { - return; - } - - if (CollectionsUtil.isDefined(this.fromDateTimeMin) && CollectionsUtil.isDefined(this.toDateTimeMax)) { - if (periodFromAdjusted.isSameOrAfter(this.fromDateTimeMin) && periodFromAdjusted.isBefore(this.toDateTimeMax)) { - this.fromDateTime = new Date(this._adjustDateTime(this.selectedPeriod.from, 'from', 'timezone').valueOf()); - } - - if (periodToAdjusted.isAfter(this.fromDateTimeMin) && periodToAdjusted.isSameOrBefore(this.toDateTimeMax)) { - this.toDateTime = new Date(this._adjustDateTime(this.selectedPeriod.to, 'to', 'timezone').valueOf()); - } - } else { - this.fromDateTime = new Date(this._adjustDateTime(this.selectedPeriod.from, 'from', 'timezone').valueOf()); - this.toDateTime = new Date(this._adjustDateTime(this.selectedPeriod.to, 'to', 'timezone').valueOf()); - } - - this._updateForm('both'); - - this.applyFilter(null); - } - } + this.toDateTimeMax = this._adjustDateTime(date, "max", "utc"); + this.toPickerConfig = { + ...this.toPickerConfig, + max: this.toDateTimeMax, + }; - private _changeDetectionMinDateTime(): void { - // set once during initialization or forced when user clear the form - if (!this._initiallySetMin) { - this._initiallySetMin = true; - - if (CollectionsUtil.isDate(this.fromDateTime) && CollectionsUtil.isDate(this.minDateTime)) { - if (this.fromDateTime.getTime() < this.minDateTime.getTime()) { - this.fromDateTime = this.minDateTime; - } - } else { - this.fromDateTime = this.minDateTime; - } - - this.fromDateTimeMin = this._adjustDateTime(this.minDateTime, 'min', 'utc'); - this.fromPickerConfig = { - ...this.fromPickerConfig, - min: this.fromDateTimeMin - }; - - this.toDateTimeMin = this._adjustDateTime(this.fromDateTime ?? this.minDateTime, 'min', 'utc'); - this.toPickerConfig = { - ...this.toPickerConfig, - min: this.toDateTimeMin - }; - - if (!this._isFromPickerOpened) { - this._updateForm('fromDateTime'); - } - } - } + // set once during initialization or forced when user clear the form + if (!this._initiallySetMax) { + this._initiallySetMax = true; - private _changeDetectionMaxDateTime() { - const date = new Date(); - - this.toDateTimeMax = this._adjustDateTime(date, 'max', 'utc'); - this.toPickerConfig = { - ...this.toPickerConfig, - max: this.toDateTimeMax - }; - - // set once during initialization or forced when user clear the form - if (!this._initiallySetMax) { - this._initiallySetMax = true; - - if (CollectionsUtil.isDate(this.toDateTime)) { - if (this.toDateTime.getTime() > date.getTime()) { - this.toDateTime = date; - } - } else { - this.toDateTime = date; - } - - this.fromDateTimeMax = this._adjustDateTime(this.toDateTime, 'max', 'utc'); - this.fromPickerConfig = { - ...this.fromPickerConfig, - max: this.fromDateTimeMax - }; - - if (!this._isToPickerOpened) { - this._updateForm('toDateTime'); - } + if (CollectionsUtil.isDate(this.toDateTime)) { + if (this.toDateTime.getTime() > date.getTime()) { + this.toDateTime = date; } + } else { + this.toDateTime = date; + } + + this.fromDateTimeMax = this._adjustDateTime( + this.toDateTime, + "max", + "utc", + ); + this.fromPickerConfig = { + ...this.fromPickerConfig, + max: this.fromDateTimeMax, + }; + + if (!this._isToPickerOpened) { + this._updateForm("toDateTime"); + } } + } - private _serializeDateTimePeriodPairValues(): string { - let timePeriodFilter = ''; - - if (this.fromDateTime instanceof Date) { - timePeriodFilter += `${this.fromDateTime.getTime()}`; - } + private _serializeDateTimePeriodPairValues(): string { + let timePeriodFilter = ""; - if (this.toDateTime instanceof Date) { - timePeriodFilter += `-${this.toDateTime.getTime()}`; - } + if (this.fromDateTime instanceof Date) { + timePeriodFilter += `${this.fromDateTime.getTime()}`; + } - return timePeriodFilter; + if (this.toDateTime instanceof Date) { + timePeriodFilter += `-${this.toDateTime.getTime()}`; } - private _deserializeDateTimePeriodPairValues(dateTimePeriodValues: string): DateTimePeriod { - const fromToDateTimeTuple = dateTimePeriodValues.split('-'); + return timePeriodFilter; + } + + private _deserializeDateTimePeriodPairValues( + dateTimePeriodValues: string, + ): DateTimePeriod { + const fromToDateTimeTuple = dateTimePeriodValues.split("-"); - let fromDateTime: Date; - let toDateTime: Date; + let fromDateTime: Date; + let toDateTime: Date; - if (CollectionsUtil.isStringWithContent(fromToDateTimeTuple[0]) && /\d+/.test(fromToDateTimeTuple[0])) { - const parsedFromEpochTime = parseInt(fromToDateTimeTuple[0], 10); + if ( + CollectionsUtil.isStringWithContent(fromToDateTimeTuple[0]) && + /\d+/.test(fromToDateTimeTuple[0]) + ) { + const parsedFromEpochTime = parseInt(fromToDateTimeTuple[0], 10); - if (CollectionsUtil.isNumber(parsedFromEpochTime) && !CollectionsUtil.isNaN(parsedFromEpochTime)) { - fromDateTime = new Date(parsedFromEpochTime); + if ( + CollectionsUtil.isNumber(parsedFromEpochTime) && + !CollectionsUtil.isNaN(parsedFromEpochTime) + ) { + fromDateTime = new Date(parsedFromEpochTime); - if (CollectionsUtil.isNaN(fromDateTime.valueOf())) { - fromDateTime = null; - } - } + if (CollectionsUtil.isNaN(fromDateTime.valueOf())) { + fromDateTime = null; } + } + } - if (CollectionsUtil.isStringWithContent(fromToDateTimeTuple[1]) && /\d+/.test(fromToDateTimeTuple[1])) { - const parsedToEpochTime = parseInt(fromToDateTimeTuple[1], 10); + if ( + CollectionsUtil.isStringWithContent(fromToDateTimeTuple[1]) && + /\d+/.test(fromToDateTimeTuple[1]) + ) { + const parsedToEpochTime = parseInt(fromToDateTimeTuple[1], 10); - if (CollectionsUtil.isNumber(parsedToEpochTime) && !CollectionsUtil.isNaN(parsedToEpochTime)) { - toDateTime = new Date(parsedToEpochTime); + if ( + CollectionsUtil.isNumber(parsedToEpochTime) && + !CollectionsUtil.isNaN(parsedToEpochTime) + ) { + toDateTime = new Date(parsedToEpochTime); - if (CollectionsUtil.isNaN(toDateTime.valueOf())) { - toDateTime = null; - } - } + if (CollectionsUtil.isNaN(toDateTime.valueOf())) { + toDateTime = null; } + } + } - if (CollectionsUtil.isDate(fromDateTime) && CollectionsUtil.isDate(toDateTime)) { - const fromDateTimeMoment = this._adjustDateTime(fromDateTime, null, 'utc'); - const toDateTimeMoment = this._adjustDateTime(toDateTime, null, 'utc'); - - if (fromDateTimeMoment.isSameOrAfter(toDateTimeMoment)) { - return null; - } - - if (CollectionsUtil.isDefined(this.fromDateTimeMin) && CollectionsUtil.isDefined(this.fromDateTimeMax)) { - if (!fromDateTimeMoment.isBetween(this.fromDateTimeMin, this.fromDateTimeMax)) { - return null; - } - } - - if (CollectionsUtil.isDefined(this.toDateTimeMin) && CollectionsUtil.isDefined(this.toDateTimeMax)) { - if (!toDateTimeMoment.isBetween(this.toDateTimeMin, this.toDateTimeMax)) { - return null; - } - } - - return { - from: fromDateTime, - to: toDateTime - }; + if ( + CollectionsUtil.isDate(fromDateTime) && + CollectionsUtil.isDate(toDateTime) + ) { + const fromDateTimeMoment = this._adjustDateTime( + fromDateTime, + null, + "utc", + ); + const toDateTimeMoment = this._adjustDateTime(toDateTime, null, "utc"); + + if (fromDateTimeMoment.isSameOrAfter(toDateTimeMoment)) { + return null; + } + + if ( + CollectionsUtil.isDefined(this.fromDateTimeMin) && + CollectionsUtil.isDefined(this.fromDateTimeMax) + ) { + if ( + !fromDateTimeMoment.isBetween( + this.fromDateTimeMin, + this.fromDateTimeMax, + ) + ) { + return null; + } + } + + if ( + CollectionsUtil.isDefined(this.toDateTimeMin) && + CollectionsUtil.isDefined(this.toDateTimeMax) + ) { + if ( + !toDateTimeMoment.isBetween(this.toDateTimeMin, this.toDateTimeMax) + ) { + return null; } + } - return null; + return { + from: fromDateTime, + to: toDateTime, + }; } - private _normalizeUrlAfterLoad(): void { - if (this._isUrlNormalized) { - return; - } + return null; + } - if (!this.filtersSortManager) { - return; - } + private _normalizeUrlAfterLoad(): void { + if (this._isUrlNormalized) { + return; + } - if (!this.filtersSortManager.hasFilter(FILTER_TIME_PERIOD_KEY)) { - return; - } + if (!this.filtersSortManager) { + return; + } - this._isUrlNormalized = true; + if (!this.filtersSortManager.hasFilter(FILTER_TIME_PERIOD_KEY)) { + return; + } - if (this.filtersSortManager.filterCriteria[FILTER_TIME_PERIOD_KEY] === this._serializeDateTimePeriodPairValues()) { - return; - } + this._isUrlNormalized = true; - this.filtersSortManager.setFilter(FILTER_TIME_PERIOD_KEY, this._serializeDateTimePeriodPairValues()); - this.filtersSortManager.updateBrowserUrl('replaceToURL', true); + if ( + this.filtersSortManager.filterCriteria[FILTER_TIME_PERIOD_KEY] === + this._serializeDateTimePeriodPairValues() + ) { + return; } - private _updateForm(partial: 'fromDateTime' | 'toDateTime' | 'both'): void { - if (partial === 'both' || partial === 'fromDateTime') { - this.tmForm - .get('fromDateTime') - .patchValue(this._adjustDateTime(this.fromDateTime, 'from', 'utc').format(this.fromPickerConfig.format)); - } - - if (partial === 'both' || partial === 'toDateTime') { - this.tmForm.get('toDateTime').patchValue(this._adjustDateTime(this.toDateTime, 'to', 'utc').format(this.toPickerConfig.format)); - } + this.filtersSortManager.setFilter( + FILTER_TIME_PERIOD_KEY, + this._serializeDateTimePeriodPairValues(), + ); + this.filtersSortManager.updateBrowserUrl("replaceToURL", true); + } + + private _updateForm(partial: "fromDateTime" | "toDateTime" | "both"): void { + if (partial === "both" || partial === "fromDateTime") { + this.tmForm + .get("fromDateTime") + .patchValue( + this._adjustDateTime(this.fromDateTime, "from", "utc").format( + this.fromPickerConfig.format, + ), + ); } - private _emitChanges(): void { - this.filterChanged.emit({ - from: this.fromDateTime, - to: this.toDateTime - }); + if (partial === "both" || partial === "toDateTime") { + this.tmForm + .get("toDateTime") + .patchValue( + this._adjustDateTime(this.toDateTime, "to", "utc").format( + this.toPickerConfig.format, + ), + ); } + } + + private _emitChanges(): void { + this.filterChanged.emit({ + from: this.fromDateTime, + to: this.toDateTime, + }); + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/public-api.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/public-api.ts index ff32bd3607..64ac2276b7 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/public-api.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-job/public-api.ts @@ -3,6 +3,6 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-job-page.component'; -export * from './pages/details/public-api'; -export * from './pages/executions/public-api'; +export * from "./data-job-page.component"; +export * from "./pages/details/public-api"; +export * from "./pages/executions/public-api"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.html index 0e85771b46..d72159e84e 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.html @@ -6,508 +6,482 @@
- -
- -
- - -
+
+ +
+ + +
+ - Job name + + + Team name + + + + - Job name - - - Team name - - - - - Description - - - - - - Deployment Status - - - - - - - - - Python Version - - - - - Last Execution End (UTC) - - - - Last Execution Duration - - - - Last Execution Status - - - - - - - - - - - - Success rate - - - - - Calculating up to 336 executions from last 14 days - - - - - Schedule (UTC) - - - Next run (UTC) - - - - - Last Deployed (UTC) - - - - Last Deployed By - - - - - Source - - - - - Logs - - - - View - - - - - - {{ job.jobName }} - - - {{ job.jobName }} - - - - - {{ job.config.team }} - - - - {{ job.config?.description | words : 8 }} - - - - - - - {{ job.deployments ? job.deployments[0]?.jobPythonVersion : - null }} - - - - {{ job.deployments ? (job.deployments[0]?.lastExecutionTime - | date : "MMM d, y, hh:mm a" : "utc") : null }} - - - - {{ job.deployments ? - (job.deployments[0]?.lastExecutionDuration | formatDuration) - : null }} - - - - - - - {{ job.deployments | executionSuccessRate }} - - {{ job.config?.schedule?.scheduleCron | formatSchedule : "" - }} - - - {{ job.config?.schedule?.nextRunEpochSeconds | - parseEpoch | date : "MMM d, y, hh:mm a" : "UTC" }} - - - - - {{ job.deployments && job.deployments[0]?.lastDeployedDate ? - (job.deployments[0]?.lastDeployedDate | date : "MMM d, y, - hh:mm a" : "UTC") : null }} - - - - {{ job.deployments ? job.deployments[0]?.lastDeployedBy : - null }} - - - -
-
-
- - - -
-
- - - - - - - - - - - - - - - - - - -
- No data jobs created! -
-
- No data jobs that match with - {{ clrGridUIState.search }} - criteria -
- - - - - - - Data Jobs per page - {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 - }} of {{ pagination.totalItems }} Data Jobs - - - -
+ Description + + + + + + Deployment Status + + + + + + + + + Python Version + + + + + Last Execution End (UTC) + + + + Last Execution Duration + + + + Last Execution Status + + + + + + + + + + + + Success rate + + + + + Calculating up to 336 executions from last 14 days + + + + + Schedule (UTC) + + + Next run (UTC) + + + + + Last Deployed (UTC) + + + + Last Deployed By + + + + + Source + + + + + Logs + + + + View + + + + + + {{ job.jobName }} + + + {{ job.jobName }} + + + + + {{ + job.config.team + }} + + + + {{ job.config?.description | words: 8 }} + + + + + + + {{ job.deployments ? job.deployments[0]?.jobPythonVersion : null }} + + + + {{ + job.deployments + ? (job.deployments[0]?.lastExecutionTime + | date: "MMM d, y, hh:mm a" : "utc") + : null + }} + + + + {{ + job.deployments + ? (job.deployments[0]?.lastExecutionDuration | formatDuration) + : null + }} + + + + + + + {{ job.deployments | executionSuccessRate }} + + {{ + job.config?.schedule?.scheduleCron | formatSchedule: "" + }} + + + {{ + job.config?.schedule?.nextRunEpochSeconds + | parseEpoch + | date: "MMM d, y, hh:mm a" : "UTC" + }} + + + + + {{ + job.deployments && job.deployments[0]?.lastDeployedDate + ? (job.deployments[0]?.lastDeployedDate + | date + : "MMM d, y, + hh:mm a" + : "UTC") + : null + }} + + + + {{ job.deployments ? job.deployments[0]?.lastDeployedBy : null }} + + + +
+
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + +
No data jobs created!
+
+ No data jobs that match with + {{ clrGridUIState.search }} + criteria +
+ + + + + + + Data Jobs per page + {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of + {{ pagination.totalItems }} Data Jobs + + + +
diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.scss index 8c72a072ec..42ebd80f19 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.scss @@ -3,10 +3,10 @@ * SPDX-License-Identifier: Apache-2.0 */ -@import '../../../base-grid/data-jobs-base-grid.component'; +@import "../../../base-grid/data-jobs-base-grid.component"; .label-link-suppress-decoration { - &:hover { - text-decoration: none; - } + &:hover { + text-decoration: none; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.spec.ts index e543e8f685..2c5e8e851a 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.spec.ts @@ -3,356 +3,466 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { Location } from '@angular/common'; -import { ActivatedRoute, Router } from '@angular/router'; -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { NO_ERRORS_SCHEMA } from "@angular/core"; +import { Location } from "@angular/common"; +import { ActivatedRoute, Router } from "@angular/router"; +import { ComponentFixture, TestBed } from "@angular/core/testing"; -import { BehaviorSubject, Observable, of, Subject } from 'rxjs'; +import { BehaviorSubject, Observable, of, Subject } from "rxjs"; -import { ClrDatagridStateInterface } from '@clr/angular'; +import { ClrDatagridStateInterface } from "@clr/angular"; -import { ApolloQueryResult } from '@apollo/client/core'; +import { ApolloQueryResult } from "@apollo/client/core"; import { - ASC, - CallFake, - ComponentModel, - ComponentService, - ComponentStateImpl, - ErrorHandlerService, - generateErrorCodes, - NavigationService, - RouterService, - RouterState, - SystemEventDispatcher, - URLStateManager -} from '@versatiledatakit/shared'; - -import { DATA_PIPELINES_CONFIGS, DataJobDetails, DataJobPage, DisplayMode } from '../../../../model'; - -import { DataJobsApiService, DataJobsService } from '../../../../services'; - -import { TASK_LOAD_JOBS_STATE } from '../../../../state/tasks'; -import { LOAD_JOBS_ERROR_CODES } from '../../../../state/error-codes'; - -import { QUERY_PARAM_SEARCH } from '../../../base-grid/data-jobs-base-grid.component'; - -import { DataJobsExploreGridComponent } from './data-jobs-explore-grid.component'; - -describe('DataJobsExploreGridComponent', () => { - let componentServiceStub: jasmine.SpyObj; - let dataJobsApiServiceStub: jasmine.SpyObj; - let locationStub: jasmine.SpyObj; - let navigationServiceStub: jasmine.SpyObj; - let routerServiceStub: jasmine.SpyObj; - let dataJobsServiceStub: jasmine.SpyObj; - let errorHandlerServiceStub: jasmine.SpyObj; - - let componentModelStub: ComponentModel; - let component: DataJobsExploreGridComponent; - let fixture: ComponentFixture; - - const TEST_JOB = { - jobName: 'job001' - }; - - beforeAll(() => { - // This hack is needed in order to prevent tests to reload browser. - // Browser reloading stops Tests execution in the same browser, and need to restart execution from beginning. - window.onbeforeunload = () => 'Stop browser from reload!'; + ASC, + CallFake, + ComponentModel, + ComponentService, + ComponentStateImpl, + ErrorHandlerService, + generateErrorCodes, + NavigationService, + RouterService, + RouterState, + SystemEventDispatcher, + URLStateManager, +} from "@versatiledatakit/shared"; + +import { + DATA_PIPELINES_CONFIGS, + DataJobDetails, + DataJobPage, + DisplayMode, +} from "../../../../model"; + +import { DataJobsApiService, DataJobsService } from "../../../../services"; + +import { TASK_LOAD_JOBS_STATE } from "../../../../state/tasks"; +import { LOAD_JOBS_ERROR_CODES } from "../../../../state/error-codes"; + +import { QUERY_PARAM_SEARCH } from "../../../base-grid/data-jobs-base-grid.component"; + +import { DataJobsExploreGridComponent } from "./data-jobs-explore-grid.component"; + +describe("DataJobsExploreGridComponent", () => { + let componentServiceStub: jasmine.SpyObj; + let dataJobsApiServiceStub: jasmine.SpyObj; + let locationStub: jasmine.SpyObj; + let navigationServiceStub: jasmine.SpyObj; + let routerServiceStub: jasmine.SpyObj; + let dataJobsServiceStub: jasmine.SpyObj; + let errorHandlerServiceStub: jasmine.SpyObj; + + let componentModelStub: ComponentModel; + let component: DataJobsExploreGridComponent; + let fixture: ComponentFixture; + + const TEST_JOB = { + jobName: "job001", + }; + + beforeAll(() => { + // This hack is needed in order to prevent tests to reload browser. + // Browser reloading stops Tests execution in the same browser, and need to restart execution from beginning. + window.onbeforeunload = () => "Stop browser from reload!"; + }); + + beforeEach(() => { + const activatedRouteStub = () => ({ + queryParams: { + subscribe: CallFake, + }, + snapshot: null, + }); + const routerStub = () => ({ + url: "/explore/data-jobs", }); - beforeEach(() => { - const activatedRouteStub = () => ({ - queryParams: { - subscribe: CallFake - }, - snapshot: null - }); - const routerStub = () => ({ - url: '/explore/data-jobs' - }); - - componentServiceStub = jasmine.createSpyObj('componentService', ['init', 'getModel', 'idle', 'update']); - navigationServiceStub = jasmine.createSpyObj('navigationService', ['navigate', 'navigateTo', 'navigateBack']); - dataJobsApiServiceStub = jasmine.createSpyObj('dataJobsService', [ - 'getJobs', - 'getJobDetails', - 'getJobExecutions' - ]); - dataJobsServiceStub = jasmine.createSpyObj('dataJobsService', [ - 'loadJobs', - 'notifyForRunningJobExecutionId', - 'notifyForJobExecutions', - 'notifyForTeamImplicitly', - 'getNotifiedForRunningJobExecutionId', - 'getNotifiedForJobExecutions', - 'getNotifiedForTeamImplicitly' - ]); - locationStub = jasmine.createSpyObj('location', ['path', 'go']); - routerServiceStub = jasmine.createSpyObj('routerService', ['getState', 'get']); - errorHandlerServiceStub = jasmine.createSpyObj('errorHandlerService', ['processError', 'handleError']); - - dataJobsServiceStub.getNotifiedForJobExecutions.and.returnValue(new Subject()); - dataJobsServiceStub.getNotifiedForTeamImplicitly.and.returnValue(new BehaviorSubject('taurus')); - - componentModelStub = ComponentModel.of(ComponentStateImpl.of({}), RouterState.empty()); - routerServiceStub.getState.and.returnValue(new Subject()); - routerServiceStub.get.and.returnValue(new Subject()); - componentServiceStub.init.and.returnValue(of(componentModelStub)); - componentServiceStub.getModel.and.returnValue(of(componentModelStub)); - - generateErrorCodes(dataJobsApiServiceStub, ['getJobs', 'getJobDetails', 'getJobExecutions']); - - LOAD_JOBS_ERROR_CODES[TASK_LOAD_JOBS_STATE] = dataJobsApiServiceStub.errorCodes.getJobs; - - TestBed.configureTestingModule({ - schemas: [NO_ERRORS_SCHEMA], - declarations: [DataJobsExploreGridComponent], - providers: [ - { - provide: DATA_PIPELINES_CONFIGS, - useFactory: () => ({ - defaultOwnerTeamName: 'all' - }) - }, - { provide: RouterService, useValue: routerServiceStub }, - { provide: ComponentService, useValue: componentServiceStub }, - { provide: NavigationService, useValue: navigationServiceStub }, - { provide: ActivatedRoute, useFactory: activatedRouteStub }, - { - provide: DataJobsApiService, - useValue: dataJobsApiServiceStub - }, - { provide: DataJobsService, useValue: dataJobsServiceStub }, - { provide: Location, useValue: locationStub }, - { provide: Router, useFactory: routerStub }, - { - provide: ErrorHandlerService, - useValue: errorHandlerServiceStub - } - ] - }); - - fixture = TestBed.createComponent(DataJobsExploreGridComponent); - component = fixture.componentInstance; - component.teamNameFilter = 'testFilterTeam'; - component.model = componentModelStub; - - dataJobsApiServiceStub.getJobs.and.returnValue( - of({ - data: { - content: [], - totalItems: 0 - } - } as ApolloQueryResult) - ); - dataJobsApiServiceStub.getJobDetails.and.returnValue(of(null) as Observable); - dataJobsApiServiceStub.getJobExecutions.and.returnValue(of({ content: [], totalItems: 0, totalPages: 0 })); - - locationStub.path.and.returnValue('/explore/data-jobs'); - - spyOn(SystemEventDispatcher, 'send').and.returnValue(Promise.resolve(true)); + componentServiceStub = jasmine.createSpyObj( + "componentService", + ["init", "getModel", "idle", "update"], + ); + navigationServiceStub = jasmine.createSpyObj( + "navigationService", + ["navigate", "navigateTo", "navigateBack"], + ); + dataJobsApiServiceStub = jasmine.createSpyObj( + "dataJobsService", + ["getJobs", "getJobDetails", "getJobExecutions"], + ); + dataJobsServiceStub = jasmine.createSpyObj( + "dataJobsService", + [ + "loadJobs", + "notifyForRunningJobExecutionId", + "notifyForJobExecutions", + "notifyForTeamImplicitly", + "getNotifiedForRunningJobExecutionId", + "getNotifiedForJobExecutions", + "getNotifiedForTeamImplicitly", + ], + ); + locationStub = jasmine.createSpyObj("location", ["path", "go"]); + routerServiceStub = jasmine.createSpyObj("routerService", [ + "getState", + "get", + ]); + errorHandlerServiceStub = jasmine.createSpyObj( + "errorHandlerService", + ["processError", "handleError"], + ); + + dataJobsServiceStub.getNotifiedForJobExecutions.and.returnValue( + new Subject(), + ); + dataJobsServiceStub.getNotifiedForTeamImplicitly.and.returnValue( + new BehaviorSubject("taurus"), + ); + + componentModelStub = ComponentModel.of( + ComponentStateImpl.of({}), + RouterState.empty(), + ); + routerServiceStub.getState.and.returnValue(new Subject()); + routerServiceStub.get.and.returnValue(new Subject()); + componentServiceStub.init.and.returnValue(of(componentModelStub)); + componentServiceStub.getModel.and.returnValue(of(componentModelStub)); + + generateErrorCodes(dataJobsApiServiceStub, [ + "getJobs", + "getJobDetails", + "getJobExecutions", + ]); + + LOAD_JOBS_ERROR_CODES[TASK_LOAD_JOBS_STATE] = + dataJobsApiServiceStub.errorCodes.getJobs; + + TestBed.configureTestingModule({ + schemas: [NO_ERRORS_SCHEMA], + declarations: [DataJobsExploreGridComponent], + providers: [ + { + provide: DATA_PIPELINES_CONFIGS, + useFactory: () => ({ + defaultOwnerTeamName: "all", + }), + }, + { provide: RouterService, useValue: routerServiceStub }, + { provide: ComponentService, useValue: componentServiceStub }, + { provide: NavigationService, useValue: navigationServiceStub }, + { provide: ActivatedRoute, useFactory: activatedRouteStub }, + { + provide: DataJobsApiService, + useValue: dataJobsApiServiceStub, + }, + { provide: DataJobsService, useValue: dataJobsServiceStub }, + { provide: Location, useValue: locationStub }, + { provide: Router, useFactory: routerStub }, + { + provide: ErrorHandlerService, + useValue: errorHandlerServiceStub, + }, + ], }); - it('can load instance', () => { - expect(component).toBeTruthy(); + fixture = TestBed.createComponent(DataJobsExploreGridComponent); + component = fixture.componentInstance; + component.teamNameFilter = "testFilterTeam"; + component.model = componentModelStub; + + dataJobsApiServiceStub.getJobs.and.returnValue( + of({ + data: { + content: [], + totalItems: 0, + }, + } as ApolloQueryResult), + ); + dataJobsApiServiceStub.getJobDetails.and.returnValue( + of(null) as Observable, + ); + dataJobsApiServiceStub.getJobExecutions.and.returnValue( + of({ content: [], totalItems: 0, totalPages: 0 }), + ); + + locationStub.path.and.returnValue("/explore/data-jobs"); + + spyOn(SystemEventDispatcher, "send").and.returnValue(Promise.resolve(true)); + }); + + it("can load instance", () => { + expect(component).toBeTruthy(); + }); + + it(`displayMode has default value`, () => { + expect(component.displayMode).toEqual(DisplayMode.STANDARD); + }); + + it(`loading has default value`, () => { + expect(component.loading).toBeFalse(); + }); + + it(`dataJobs has default value`, () => { + expect(component.dataJobs).toEqual([]); + }); + + it(`totalJobs has default value`, () => { + expect(component.totalJobs).toEqual(0); + }); + + describe("urlUpdateStrategy", () => { + it("should verify the behaviour of _doUrlUpdate when urlUpdateStrategy is default (updateRouter)", () => { + const locationToUrlSpy = spyOn( + component.urlStateManager, + "locationToURL", + ).and.callFake(CallFake); + + // @ts-ignore + component._doUrlUpdate(); + + expect(locationToUrlSpy).toHaveBeenCalled(); }); - it(`displayMode has default value`, () => { - expect(component.displayMode).toEqual(DisplayMode.STANDARD); + it("should verify the behaviour of _doUrlUpdate when urlUpdateStrategy is changed (updateLocation)", () => { + const locationToURLSpy = spyOn( + component.urlStateManager, + "locationToURL", + ).and.callFake(CallFake); + component.urlUpdateStrategy = "updateLocation"; + + // @ts-ignore + component._doUrlUpdate(); + + expect(locationToURLSpy).toHaveBeenCalled(); }); + }); - it(`loading has default value`, () => { - expect(component.loading).toBeFalse(); + describe("urlStateManager", () => { + beforeEach(() => { + fixture.detectChanges(); }); - it(`dataJobs has default value`, () => { - expect(component.dataJobs).toEqual([]); + it("should verify will invoke default urlStateManager (locally created)", () => { + // Given + const setQueryParamSpy = spyOn( + component.urlStateManager, + "setQueryParam", + ).and.callFake(CallFake); + + // When + component.search("search"); + + // Then + expect(setQueryParamSpy.calls.argsFor(0)).toEqual([ + "jobName", + undefined, + 1, + ]); + expect(setQueryParamSpy.calls.argsFor(1)).toEqual([ + "teamName", + undefined, + 2, + ]); + expect(setQueryParamSpy.calls.argsFor(2)).toEqual([ + "description", + undefined, + 3, + ]); + expect(setQueryParamSpy.calls.argsFor(3)).toEqual([ + "deploymentStatus", + "all", + 4, + ]); + expect(setQueryParamSpy.calls.argsFor(4)).toEqual([ + "deploymentLastExecutionStatus", + undefined, + 5, + ]); + expect(setQueryParamSpy.calls.argsFor(5)).toEqual([ + QUERY_PARAM_SEARCH, + "search", + 0, + ]); }); - it(`totalJobs has default value`, () => { - expect(component.totalJobs).toEqual(0); + it("should verify will invoke external urlStateManager (dependency injected)", () => { + // Given + const urlStateManagerStub = new URLStateManager("baseUrl", locationStub); + const setQueryParamSpy = spyOn( + urlStateManagerStub, + "setQueryParam", + ).and.callFake(CallFake); + + // When + component.urlStateManager = urlStateManagerStub; + component.search("search"); + + // Then + expect(setQueryParamSpy.calls.argsFor(0)).toEqual([ + "jobName", + undefined, + 1, + ]); + expect(setQueryParamSpy.calls.argsFor(1)).toEqual([ + "teamName", + undefined, + 2, + ]); + expect(setQueryParamSpy.calls.argsFor(2)).toEqual([ + "description", + undefined, + 3, + ]); + expect(setQueryParamSpy.calls.argsFor(3)).toEqual([ + "deploymentStatus", + "all", + 4, + ]); + expect(setQueryParamSpy.calls.argsFor(4)).toEqual([ + "deploymentLastExecutionStatus", + undefined, + 5, + ]); + expect(setQueryParamSpy.calls.argsFor(5)).toEqual([ + QUERY_PARAM_SEARCH, + "search", + 0, + ]); }); - describe('urlUpdateStrategy', () => { - it('should verify the behaviour of _doUrlUpdate when urlUpdateStrategy is default (updateRouter)', () => { - const locationToUrlSpy = spyOn(component.urlStateManager, 'locationToURL').and.callFake(CallFake); + it("should verify will invoke default urlStateManager (dependency injection is null or undefined)", () => { + // Given + const setQueryParamSpy = spyOn( + component.urlStateManager, + "setQueryParam", + ).and.callFake(CallFake); + // When + component.urlStateManager = null; + component.search("search test value 1"); + component.urlStateManager = undefined; + component.search("search test value 2"); + + // Then + expect(setQueryParamSpy.calls.argsFor(5)).toEqual([ + QUERY_PARAM_SEARCH, + "search test value 1", + 0, + ]); + expect(setQueryParamSpy.calls.argsFor(11)).toEqual([ + QUERY_PARAM_SEARCH, + "search test value 2", + 0, + ]); + }); + }); - // @ts-ignore - component._doUrlUpdate(); + describe("handleStateChange", () => { + beforeEach(() => { + fixture.detectChanges(); + }); - expect(locationToUrlSpy).toHaveBeenCalled(); - }); + it("makes expected calls", () => { + const clrDatagridStateInterfaceStub = { + filters: [], + } as ClrDatagridStateInterface; + clrDatagridStateInterfaceStub.filters.push({ + property: "search_prop", + pattern: "%search%", + sort: ASC, + }); + component.gridState = clrDatagridStateInterfaceStub; + + // @ts-ignore + spyOn(component, "_createApiFilterPattern").and.callThrough(); + // @ts-ignore + component._doLoadData(); + // @ts-ignore + expect(component._createApiFilterPattern).toHaveBeenCalled(); + expect(dataJobsServiceStub.loadJobs).toHaveBeenCalled(); + }); + }); - it('should verify the behaviour of _doUrlUpdate when urlUpdateStrategy is changed (updateLocation)', () => { - const locationToURLSpy = spyOn(component.urlStateManager, 'locationToURL').and.callFake(CallFake); - component.urlUpdateStrategy = 'updateLocation'; + describe("viewJobDetails", () => { + it("skips viewJobDetails for undefined job", () => { + // Given + const navigateToSpy = spyOn(component, "navigateTo").and.callFake( + CallFake, + ); - // @ts-ignore - component._doUrlUpdate(); + // When + component.navigateToJobDetails(); - expect(locationToURLSpy).toHaveBeenCalled(); - }); + // Then + expect(component.selectedJob).toBeUndefined(); + expect(navigateToSpy).not.toHaveBeenCalled(); }); - describe('urlStateManager', () => { - beforeEach(() => { - fixture.detectChanges(); - }); - - it('should verify will invoke default urlStateManager (locally created)', () => { - // Given - const setQueryParamSpy = spyOn(component.urlStateManager, 'setQueryParam').and.callFake(CallFake); - - // When - component.search('search'); - - // Then - expect(setQueryParamSpy.calls.argsFor(0)).toEqual(['jobName', undefined, 1]); - expect(setQueryParamSpy.calls.argsFor(1)).toEqual(['teamName', undefined, 2]); - expect(setQueryParamSpy.calls.argsFor(2)).toEqual(['description', undefined, 3]); - expect(setQueryParamSpy.calls.argsFor(3)).toEqual(['deploymentStatus', 'all', 4]); - expect(setQueryParamSpy.calls.argsFor(4)).toEqual(['deploymentLastExecutionStatus', undefined, 5]); - expect(setQueryParamSpy.calls.argsFor(5)).toEqual([QUERY_PARAM_SEARCH, 'search', 0]); - }); - - it('should verify will invoke external urlStateManager (dependency injected)', () => { - // Given - const urlStateManagerStub = new URLStateManager('baseUrl', locationStub); - const setQueryParamSpy = spyOn(urlStateManagerStub, 'setQueryParam').and.callFake(CallFake); - - // When - component.urlStateManager = urlStateManagerStub; - component.search('search'); - - // Then - expect(setQueryParamSpy.calls.argsFor(0)).toEqual(['jobName', undefined, 1]); - expect(setQueryParamSpy.calls.argsFor(1)).toEqual(['teamName', undefined, 2]); - expect(setQueryParamSpy.calls.argsFor(2)).toEqual(['description', undefined, 3]); - expect(setQueryParamSpy.calls.argsFor(3)).toEqual(['deploymentStatus', 'all', 4]); - expect(setQueryParamSpy.calls.argsFor(4)).toEqual(['deploymentLastExecutionStatus', undefined, 5]); - expect(setQueryParamSpy.calls.argsFor(5)).toEqual([QUERY_PARAM_SEARCH, 'search', 0]); - }); - - it('should verify will invoke default urlStateManager (dependency injection is null or undefined)', () => { - // Given - const setQueryParamSpy = spyOn(component.urlStateManager, 'setQueryParam').and.callFake(CallFake); - // When - component.urlStateManager = null; - component.search('search test value 1'); - component.urlStateManager = undefined; - component.search('search test value 2'); - - // Then - expect(setQueryParamSpy.calls.argsFor(5)).toEqual([QUERY_PARAM_SEARCH, 'search test value 1', 0]); - expect(setQueryParamSpy.calls.argsFor(11)).toEqual([QUERY_PARAM_SEARCH, 'search test value 2', 0]); - }); + it("opens viewJobDetails for valid job", () => { + // Given + const navigateToSpy = spyOn(component, "navigateTo").and.returnValue( + Promise.resolve(true), + ); + component.ngOnInit(); + + // When + component.navigateToJobDetails({ + jobName: "job001", + config: { team: "team007" }, + }); + + // Then + expect(component.selectedJob).toBeDefined(); + expect(navigateToSpy).toHaveBeenCalledWith({ + "$.team": "team007", + "$.job": "job001", + }); + }); + }); + + describe("ngOnInit", () => { + it("makes expected calls", () => { + // @ts-ignore + component.ngOnInit(); + expect(componentServiceStub.init).toHaveBeenCalled(); + expect(componentServiceStub.getModel).toHaveBeenCalled(); }); + }); - describe('handleStateChange', () => { - beforeEach(() => { - fixture.detectChanges(); - }); - - it('makes expected calls', () => { - const clrDatagridStateInterfaceStub = { - filters: [] - } as ClrDatagridStateInterface; - clrDatagridStateInterfaceStub.filters.push({ - property: 'search_prop', - pattern: '%search%', - sort: ASC - }); - component.gridState = clrDatagridStateInterfaceStub; - - // @ts-ignore - spyOn(component, '_createApiFilterPattern').and.callThrough(); - // @ts-ignore - component._doLoadData(); - // @ts-ignore - expect(component._createApiFilterPattern).toHaveBeenCalled(); - expect(dataJobsServiceStub.loadJobs).toHaveBeenCalled(); - }); + describe("isStandardDisplayMode", () => { + it("returns expected displayMode with COMPACT", () => { + component.displayMode = DisplayMode.COMPACT; + expect(component.isStandardDisplayMode()).toBeFalse(); }); - describe('viewJobDetails', () => { - it('skips viewJobDetails for undefined job', () => { - // Given - const navigateToSpy = spyOn(component, 'navigateTo').and.callFake(CallFake); - - // When - component.navigateToJobDetails(); - - // Then - expect(component.selectedJob).toBeUndefined(); - expect(navigateToSpy).not.toHaveBeenCalled(); - }); - - it('opens viewJobDetails for valid job', () => { - // Given - const navigateToSpy = spyOn(component, 'navigateTo').and.returnValue(Promise.resolve(true)); - component.ngOnInit(); - - // When - component.navigateToJobDetails({ - jobName: 'job001', - config: { team: 'team007' } - }); - - // Then - expect(component.selectedJob).toBeDefined(); - expect(navigateToSpy).toHaveBeenCalledWith({ - '$.team': 'team007', - '$.job': 'job001' - }); - }); + it("returns expected displayMode with null", () => { + component.displayMode = null; + expect(component.isStandardDisplayMode()).toBeFalse(); }); - describe('ngOnInit', () => { - it('makes expected calls', () => { - // @ts-ignore - component.ngOnInit(); - expect(componentServiceStub.init).toHaveBeenCalled(); - expect(componentServiceStub.getModel).toHaveBeenCalled(); - }); + it("returns expected displayMode with STANDARD", () => { + component.displayMode = DisplayMode.STANDARD; + expect(component.isStandardDisplayMode()).toBeTrue(); }); + }); - describe('isStandardDisplayMode', () => { - it('returns expected displayMode with COMPACT', () => { - component.displayMode = DisplayMode.COMPACT; - expect(component.isStandardDisplayMode()).toBeFalse(); - }); - - it('returns expected displayMode with null', () => { - component.displayMode = null; - expect(component.isStandardDisplayMode()).toBeFalse(); - }); - - it('returns expected displayMode with STANDARD', () => { - component.displayMode = DisplayMode.STANDARD; - expect(component.isStandardDisplayMode()).toBeTrue(); - }); + describe("selectionChanged", () => { + it("sets expected dataJob", () => { + component.selectionChanged(TEST_JOB); + expect(component.selectedJob).toEqual(TEST_JOB); }); + }); - describe('selectionChanged', () => { - it('sets expected dataJob', () => { - component.selectionChanged(TEST_JOB); - expect(component.selectedJob).toEqual(TEST_JOB); - }); + describe("search", () => { + beforeEach(() => { + fixture.detectChanges(); }); - describe('search', () => { - beforeEach(() => { - fixture.detectChanges(); - }); - - it('makes expected calls', () => { - spyOn(component, 'loadDataWithState').and.callThrough(); - component.search('searchValue'); - expect(component.clrGridUIState.search).toBe('searchValue'); - expect(component.loadDataWithState).toHaveBeenCalled(); - }); + it("makes expected calls", () => { + spyOn(component, "loadDataWithState").and.callThrough(); + component.search("searchValue"); + expect(component.clrGridUIState.search).toBe("searchValue"); + expect(component.loadDataWithState).toHaveBeenCalled(); }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.ts index 4d5ea360f0..0f886ba7d9 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/data-jobs-explore-grid.component.ts @@ -3,88 +3,109 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Component, ElementRef, HostBinding, Inject, Input, OnInit } from '@angular/core'; -import { DOCUMENT, Location } from '@angular/common'; -import { ActivatedRoute, Router } from '@angular/router'; +import { + Component, + ElementRef, + HostBinding, + Inject, + Input, + OnInit, +} from "@angular/core"; +import { DOCUMENT, Location } from "@angular/common"; +import { ActivatedRoute, Router } from "@angular/router"; -import { ComponentService, ErrorHandlerService, NavigationService, RouterService } from '@versatiledatakit/shared'; +import { + ComponentService, + ErrorHandlerService, + NavigationService, + RouterService, +} from "@versatiledatakit/shared"; -import { DATA_PIPELINES_CONFIGS, DataPipelinesConfig, DisplayMode } from '../../../../model'; -import { DataJobsApiService, DataJobsService } from '../../../../services'; +import { + DATA_PIPELINES_CONFIGS, + DataPipelinesConfig, + DisplayMode, +} from "../../../../model"; +import { DataJobsApiService, DataJobsService } from "../../../../services"; -import { DataJobsBaseGridComponent } from '../../../base-grid/data-jobs-base-grid.component'; +import { DataJobsBaseGridComponent } from "../../../base-grid/data-jobs-base-grid.component"; @Component({ - selector: 'lib-data-jobs-explore-grid', - templateUrl: './data-jobs-explore-grid.component.html', - styleUrls: ['./data-jobs-explore-grid.component.scss'] + selector: "lib-data-jobs-explore-grid", + templateUrl: "./data-jobs-explore-grid.component.html", + styleUrls: ["./data-jobs-explore-grid.component.scss"], }) -export class DataJobsExploreGridComponent extends DataJobsBaseGridComponent implements OnInit { - /** - * @inheritDoc - */ - static override readonly CLASS_NAME: string = 'DataJobsExploreGridComponent'; +export class DataJobsExploreGridComponent + extends DataJobsBaseGridComponent + implements OnInit +{ + /** + * @inheritDoc + */ + static override readonly CLASS_NAME: string = "DataJobsExploreGridComponent"; - /** - * @inheritDoc - */ - static override readonly PUBLIC_NAME: string = 'DataJobs-ExploreGrid-Component'; + /** + * @inheritDoc + */ + static override readonly PUBLIC_NAME: string = + "DataJobs-ExploreGrid-Component"; - //Decorators are not inherited in Angular. If we need @Input() we need to declare it here - @Input() override teamNameFilter: string; - @Input() override displayMode: DisplayMode; + //Decorators are not inherited in Angular. If we need @Input() we need to declare it here + @Input() override teamNameFilter: string; + @Input() override displayMode: DisplayMode; - @HostBinding('attr.data-cy') attributeDataCy = 'data-pipelines-explore-data-jobs'; + @HostBinding("attr.data-cy") attributeDataCy = + "data-pipelines-explore-data-jobs"; - readonly uuid = 'DataJobsExploreGridComponent'; + readonly uuid = "DataJobsExploreGridComponent"; - constructor( - componentService: ComponentService, - navigationService: NavigationService, - activatedRoute: ActivatedRoute, - routerService: RouterService, - dataJobsService: DataJobsService, - dataJobsApiService: DataJobsApiService, - errorHandlerService: ErrorHandlerService, - location: Location, - router: Router, - elementRef: ElementRef, - @Inject(DOCUMENT) document: Document, - @Inject(DATA_PIPELINES_CONFIGS) - dataPipelinesModuleConfig: DataPipelinesConfig - ) { - super( - componentService, - navigationService, - activatedRoute, - routerService, - dataJobsService, - dataJobsApiService, - errorHandlerService, - location, - router, - elementRef, - document, - dataPipelinesModuleConfig, - 'explore_data_jobs_grid_user_config', - { - hiddenColumns: { - description: true, - lastExecutionDuration: true, - successRate: true, - nextRun: true, - lastDeployedDate: true, - lastDeployedBy: true, - source: true, - logsUrl: true, - jobPythonVersion: true - } - }, - DataJobsExploreGridComponent.CLASS_NAME - ); - } + constructor( + componentService: ComponentService, + navigationService: NavigationService, + activatedRoute: ActivatedRoute, + routerService: RouterService, + dataJobsService: DataJobsService, + dataJobsApiService: DataJobsApiService, + errorHandlerService: ErrorHandlerService, + location: Location, + router: Router, + elementRef: ElementRef, + @Inject(DOCUMENT) document: Document, + @Inject(DATA_PIPELINES_CONFIGS) + dataPipelinesModuleConfig: DataPipelinesConfig, + ) { + super( + componentService, + navigationService, + activatedRoute, + routerService, + dataJobsService, + dataJobsApiService, + errorHandlerService, + location, + router, + elementRef, + document, + dataPipelinesModuleConfig, + "explore_data_jobs_grid_user_config", + { + hiddenColumns: { + description: true, + lastExecutionDuration: true, + successRate: true, + nextRun: true, + lastDeployedDate: true, + lastDeployedBy: true, + source: true, + logsUrl: true, + jobPythonVersion: true, + }, + }, + DataJobsExploreGridComponent.CLASS_NAME, + ); + } - showTeamsColumn() { - return this.dataPipelinesModuleConfig?.exploreConfig?.showTeamsColumn; - } + showTeamsColumn() { + return this.dataPipelinesModuleConfig?.exploreConfig?.showTeamsColumn; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/index.ts index f20e16104a..f417a7165b 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/components/grid/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-jobs-explore-grid.component'; +export * from "./data-jobs-explore-grid.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.css b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.css index c77bb25ec5..2e9e5e6a33 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.css +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.css @@ -4,7 +4,7 @@ */ .page-container { - display: grid; - height: 100%; - grid-template-rows: 40px 1fr; + display: grid; + height: 100%; + grid-template-rows: 40px 1fr; } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.html index a8f8b89523..033161048e 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.html @@ -4,10 +4,10 @@ -->
-
-

- Explore Data Jobs -

-
- +
+

+ Explore Data Jobs +

+
+
diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.spec.ts index 77ae8bb92f..df8e9c57f4 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.spec.ts @@ -3,24 +3,24 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { DataJobsExplorePageComponent } from './data-jobs-explore-page.component'; +import { ComponentFixture, TestBed } from "@angular/core/testing"; +import { NO_ERRORS_SCHEMA } from "@angular/core"; +import { DataJobsExplorePageComponent } from "./data-jobs-explore-page.component"; -describe('DataJobsExploreComponent', () => { - let component: DataJobsExplorePageComponent; - let fixture: ComponentFixture; +describe("DataJobsExploreComponent", () => { + let component: DataJobsExplorePageComponent; + let fixture: ComponentFixture; - beforeEach(() => { - TestBed.configureTestingModule({ - schemas: [NO_ERRORS_SCHEMA], - declarations: [DataJobsExplorePageComponent] - }); - fixture = TestBed.createComponent(DataJobsExplorePageComponent); - component = fixture.componentInstance; + beforeEach(() => { + TestBed.configureTestingModule({ + schemas: [NO_ERRORS_SCHEMA], + declarations: [DataJobsExplorePageComponent], }); + fixture = TestBed.createComponent(DataJobsExplorePageComponent); + component = fixture.componentInstance; + }); - it('can load instance', () => { - expect(component).toBeTruthy(); - }); + it("can load instance", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.ts index b1d3aaeb0f..2f5097d3d7 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/data-jobs-explore-page.component.ts @@ -3,11 +3,11 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Component } from '@angular/core'; +import { Component } from "@angular/core"; @Component({ - selector: 'lib-data-jobs-explore', - templateUrl: './data-jobs-explore-page.component.html', - styleUrls: ['./data-jobs-explore-page.component.css'] + selector: "lib-data-jobs-explore", + templateUrl: "./data-jobs-explore-page.component.html", + styleUrls: ["./data-jobs-explore-page.component.css"], }) export class DataJobsExplorePageComponent {} diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/index.ts index 159400d344..29ae022b3f 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-jobs-explore-page.component'; +export * from "./data-jobs-explore-page.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/public-api.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/public-api.ts index a265ad53d3..ce933d6a97 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/public-api.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-explore/public-api.ts @@ -3,5 +3,5 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './index'; -export * from './components/grid'; +export * from "./index"; +export * from "./components/grid"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.html index 68afd46072..0a28004394 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.html @@ -6,599 +6,558 @@
- -
- -
- -
- -
- -
- -
- -
- -
- - -
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + +
+ - Job name + + + Team name + + + + - Job name - - - Team name - - - - - Description - - - - - - Deployment Status - - - - - - - - - Python Version - - - - - Last Execution End (UTC) - - - - Last Execution Duration - - - - Last Execution Status - - - - - - - - - - - - Success rate - - - - - Calculating up to 336 executions from last 14 days - - - - - Schedule (in UTC) - - - Next run (UTC) - - - - - Last Deployed (UTC) - - - - Last Deployed By - - - - - Notifications - - - - - Source - - - - - Logs - - - - Details - - - - {{ job.jobName }} - - - {{ job.config?.team }} - - - {{ job.config?.description | words : 8 }} - - - - - - - - {{ job.deployments ? job.deployments[0]?.jobPythonVersion : - null }} - - - - {{ job.deployments ? (job.deployments[0]?.lastExecutionTime - | date : "MMM d, y, hh:mm a" : "utc") : null }} - - - - {{ job.deployments ? - (job.deployments[0]?.lastExecutionDuration | formatDuration) - : null }} - - - - - - - {{ job.deployments | executionSuccessRate }} - - - {{ job.config?.schedule?.scheduleCron | formatSchedule : "" - }} - - - - - {{ job.config?.schedule?.nextRunEpochSeconds | - parseEpoch | date : "MMM d, y, hh:mm a" : "UTC" }} - - - - - {{ job.deployments && job.deployments[0]?.lastDeployedDate ? - (job.deployments[0]?.lastDeployedDate | date : "MMM d, y, - hh:mm a" : "UTC") : null }} - - - - {{ job.deployments ? job.deployments[0]?.lastDeployedBy : - null }} - - - - - - - - -
-
-
- - - -
-
- - - - - - - - - - - - - - - - - - -
-
No data jobs created!
- - Learn - about Data Jobs - -
-
- No data jobs that match with - {{ clrGridUIState.search }} - criteria -
- - - - - - - Data Jobs per page - {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 - }} of {{ pagination.totalItems }} Data Jobs - - - -
+ Description + + + + + + Deployment Status + + + + + + + + + Python Version + + + + + Last Execution End (UTC) + + + + Last Execution Duration + + + + Last Execution Status + + + + + + + + + + + + Success rate + + + + + Calculating up to 336 executions from last 14 days + + + + + Schedule (in UTC) + + + Next run (UTC) + + + + + Last Deployed (UTC) + + + + Last Deployed By + + + + + Notifications + + + + + Source + + + + + Logs + + + + Details + + + + {{ job.jobName }} + + + {{ + job.config?.team + }} + + + {{ job.config?.description | words: 8 }} + + + + + + + + {{ job.deployments ? job.deployments[0]?.jobPythonVersion : null }} + + + + {{ + job.deployments + ? (job.deployments[0]?.lastExecutionTime + | date: "MMM d, y, hh:mm a" : "utc") + : null + }} + + + + {{ + job.deployments + ? (job.deployments[0]?.lastExecutionDuration | formatDuration) + : null + }} + + + + + + + {{ job.deployments | executionSuccessRate }} + + + {{ job.config?.schedule?.scheduleCron | formatSchedule: "" }} + + + + + {{ + job.config?.schedule?.nextRunEpochSeconds + | parseEpoch + | date: "MMM d, y, hh:mm a" : "UTC" + }} + + + + + {{ + job.deployments && job.deployments[0]?.lastDeployedDate + ? (job.deployments[0]?.lastDeployedDate + | date + : "MMM d, y, + hh:mm a" + : "UTC") + : null + }} + + + + {{ job.deployments ? job.deployments[0]?.lastDeployedBy : null }} + + + + + + + + +
+
+
+ + + +
+
+ + + + + + + + + + + + + + + + + + +
+
No data jobs created!
+ + Learn about Data Jobs + +
+
+ No data jobs that match with + {{ clrGridUIState.search }} + criteria +
+ + + + + + + Data Jobs per page + {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of + {{ pagination.totalItems }} Data Jobs + + + +
diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.scss index 055071330c..eb073da8aa 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.scss @@ -3,12 +3,12 @@ * SPDX-License-Identifier: Apache-2.0 */ -@import '../../../base-grid/data-jobs-base-grid.component'; +@import "../../../base-grid/data-jobs-base-grid.component"; clr-datagrid clr-dg-placeholder { - .msg-btn-placeholder { - display: flex; - flex-direction: column; - align-items: center; - } + .msg-btn-placeholder { + display: flex; + flex-direction: column; + align-items: center; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.spec.ts index 2218beb4dd..e24ba3ffb2 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.spec.ts @@ -3,420 +3,459 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; -import { Location } from '@angular/common'; -import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; +import { NO_ERRORS_SCHEMA } from "@angular/core"; +import { ActivatedRoute, Router } from "@angular/router"; +import { Location } from "@angular/common"; +import { + ComponentFixture, + fakeAsync, + TestBed, + tick, +} from "@angular/core/testing"; -import { of, Subject } from 'rxjs'; +import { of, Subject } from "rxjs"; -import { ClrDatagridStateInterface } from '@clr/angular'; +import { ClrDatagridStateInterface } from "@clr/angular"; import { - ASC, - CallFake, - ComponentModel, - ComponentService, - ComponentStateImpl, - DESC, - ErrorHandlerService, - generateErrorCodes, - NavigationService, - RouterService, - RouterState, - RouteState, - ToastService -} from '@versatiledatakit/shared'; - -import { ExtractJobStatusPipe } from '../../../../shared/pipes'; - -import { DataJobsApiService, DataJobsService } from '../../../../services'; - -import { DATA_PIPELINES_CONFIGS, DisplayMode } from '../../../../model'; - -import { TASK_LOAD_JOBS_STATE } from '../../../../state/tasks'; -import { LOAD_JOBS_ERROR_CODES } from '../../../../state/error-codes'; - -import { DataJobsManageGridComponent } from './data-jobs-manage-grid.component'; - -describe('DataJobsManageGridComponent', () => { - let componentServiceStub: jasmine.SpyObj; - let navigationServiceStub: jasmine.SpyObj; - let routerServiceStub: jasmine.SpyObj; - let dataJobsServiceStub: jasmine.SpyObj; - let toastServiceStub: jasmine.SpyObj; - let errorHandlerServiceStub: jasmine.SpyObj; - - let componentModelStub: ComponentModel; - let component: DataJobsManageGridComponent; - let fixture: ComponentFixture; - - const TEST_DEPLOYMENT = { - id: 'id001', - enabled: true - }; - - const TEST_JOB = { - jobName: 'job001', - config: { - description: 'description001', - team: 'testTeam' + ASC, + CallFake, + ComponentModel, + ComponentService, + ComponentStateImpl, + DESC, + ErrorHandlerService, + generateErrorCodes, + NavigationService, + RouterService, + RouterState, + RouteState, + ToastService, +} from "@versatiledatakit/shared"; + +import { ExtractJobStatusPipe } from "../../../../shared/pipes"; + +import { DataJobsApiService, DataJobsService } from "../../../../services"; + +import { DATA_PIPELINES_CONFIGS, DisplayMode } from "../../../../model"; + +import { TASK_LOAD_JOBS_STATE } from "../../../../state/tasks"; +import { LOAD_JOBS_ERROR_CODES } from "../../../../state/error-codes"; + +import { DataJobsManageGridComponent } from "./data-jobs-manage-grid.component"; + +describe("DataJobsManageGridComponent", () => { + let componentServiceStub: jasmine.SpyObj; + let navigationServiceStub: jasmine.SpyObj; + let routerServiceStub: jasmine.SpyObj; + let dataJobsServiceStub: jasmine.SpyObj; + let toastServiceStub: jasmine.SpyObj; + let errorHandlerServiceStub: jasmine.SpyObj; + + let componentModelStub: ComponentModel; + let component: DataJobsManageGridComponent; + let fixture: ComponentFixture; + + const TEST_DEPLOYMENT = { + id: "id001", + enabled: true, + }; + + const TEST_JOB = { + jobName: "job001", + config: { + description: "description001", + team: "testTeam", + }, + deployments: [TEST_DEPLOYMENT], + }; + + let teamSubject: Subject; + let teamSubjectSubscribeSpy: jasmine.Spy; + + const EMPTY_TEAM_NAME_FILTER = ""; + + beforeAll(() => { + // This hack is needed in order to prevent tests to reload browser. + // Browser reloading stops Tests execution in the same browser, and need to restart execution from beginning. + window.onbeforeunload = () => "Stop browser from reload!"; + }); + + beforeEach(() => { + componentServiceStub = jasmine.createSpyObj( + "componentService", + ["init", "getModel", "idle", "update"], + ); + navigationServiceStub = jasmine.createSpyObj( + "navigationService", + ["navigateTo", "navigateBack"], + ); + routerServiceStub = jasmine.createSpyObj("routerService", [ + "getState", + "get", + ]); + dataJobsServiceStub = jasmine.createSpyObj( + "dataJobsService", + [ + "loadJobs", + "notifyForRunningJobExecutionId", + "notifyForJobExecutions", + "notifyForTeamImplicitly", + "getNotifiedForRunningJobExecutionId", + "getNotifiedForJobExecutions", + "getNotifiedForTeamImplicitly", + ], + ); + toastServiceStub = jasmine.createSpyObj("toastService", [ + "show", + ]); + errorHandlerServiceStub = jasmine.createSpyObj( + "errorHandlerService", + ["processError", "handleError"], + ); + + teamSubject = new Subject(); + teamSubjectSubscribeSpy = spyOn(teamSubject, "subscribe").and.callThrough(); + + const activatedRouteStub = () => ({ + queryParams: { + subscribe: CallFake, + }, + snapshot: null, + }); + const dataJobsApiServiceStub = () => ({ + getAllJobs: () => ({ + subscribe: CallFake, + }), + getJobDetails: () => ({ + subscribe: () => CallFake, + }), + getJobExecutions: () => ({ + subscribe: () => CallFake, + }), + updateDataJobStatus: () => ({ + subscribe: () => { + return new Subject(); }, - deployments: [TEST_DEPLOYMENT] - }; - - let teamSubject: Subject; - let teamSubjectSubscribeSpy: jasmine.Spy; - - const EMPTY_TEAM_NAME_FILTER = ''; - - beforeAll(() => { - // This hack is needed in order to prevent tests to reload browser. - // Browser reloading stops Tests execution in the same browser, and need to restart execution from beginning. - window.onbeforeunload = () => 'Stop browser from reload!'; + }), + executeDataJob: () => ({ + subscribe: () => { + return new Subject(); + }, + }), + }); + const locationStub = () => ({ + path: () => "Test", + go: () => CallFake, + }); + const routerStub = () => ({ + url: "/explore/data-jobs", }); - beforeEach(() => { - componentServiceStub = jasmine.createSpyObj('componentService', ['init', 'getModel', 'idle', 'update']); - navigationServiceStub = jasmine.createSpyObj('navigationService', ['navigateTo', 'navigateBack']); - routerServiceStub = jasmine.createSpyObj('routerService', ['getState', 'get']); - dataJobsServiceStub = jasmine.createSpyObj('dataJobsService', [ - 'loadJobs', - 'notifyForRunningJobExecutionId', - 'notifyForJobExecutions', - 'notifyForTeamImplicitly', - 'getNotifiedForRunningJobExecutionId', - 'getNotifiedForJobExecutions', - 'getNotifiedForTeamImplicitly' - ]); - toastServiceStub = jasmine.createSpyObj('toastService', ['show']); - errorHandlerServiceStub = jasmine.createSpyObj('errorHandlerService', ['processError', 'handleError']); - - teamSubject = new Subject(); - teamSubjectSubscribeSpy = spyOn(teamSubject, 'subscribe').and.callThrough(); - - const activatedRouteStub = () => ({ - queryParams: { - subscribe: CallFake + const dataJobsApiServiceStubTemp = jasmine.createSpyObj( + "dataJobsApiServiceStub", + ["getJobs"], + ); + + generateErrorCodes(dataJobsApiServiceStubTemp, [ + "getJobs", + "getJobDetails", + "getJobExecutions", + ]); + + LOAD_JOBS_ERROR_CODES[TASK_LOAD_JOBS_STATE] = + dataJobsApiServiceStubTemp.errorCodes.getJobs; + + TestBed.configureTestingModule({ + schemas: [NO_ERRORS_SCHEMA], + declarations: [DataJobsManageGridComponent, ExtractJobStatusPipe], + providers: [ + { + provide: DATA_PIPELINES_CONFIGS, + useFactory: () => ({ + defaultOwnerTeamName: "all", + manageConfig: { + filterByTeamName: true, + showTeamsColumn: true, + allowExecuteNow: true, + displayMode: DisplayMode.COMPACT, + selectedTeamNameObservable: teamSubject, }, - snapshot: null - }); - const dataJobsApiServiceStub = () => ({ - getAllJobs: () => ({ - subscribe: CallFake - }), - getJobDetails: () => ({ - subscribe: () => CallFake - }), - getJobExecutions: () => ({ - subscribe: () => CallFake - }), - updateDataJobStatus: () => ({ - subscribe: () => { - return new Subject(); - } - }), - executeDataJob: () => ({ - subscribe: () => { - return new Subject(); - } - }) - }); - const locationStub = () => ({ - path: () => 'Test', - go: () => CallFake - }); - const routerStub = () => ({ - url: '/explore/data-jobs' - }); - - const dataJobsApiServiceStubTemp = jasmine.createSpyObj('dataJobsApiServiceStub', ['getJobs']); - - generateErrorCodes(dataJobsApiServiceStubTemp, ['getJobs', 'getJobDetails', 'getJobExecutions']); - - LOAD_JOBS_ERROR_CODES[TASK_LOAD_JOBS_STATE] = dataJobsApiServiceStubTemp.errorCodes.getJobs; - - TestBed.configureTestingModule({ - schemas: [NO_ERRORS_SCHEMA], - declarations: [DataJobsManageGridComponent, ExtractJobStatusPipe], - providers: [ - { - provide: DATA_PIPELINES_CONFIGS, - useFactory: () => ({ - defaultOwnerTeamName: 'all', - manageConfig: { - filterByTeamName: true, - showTeamsColumn: true, - allowExecuteNow: true, - displayMode: DisplayMode.COMPACT, - selectedTeamNameObservable: teamSubject - } - }) - }, - { provide: RouterService, useValue: routerServiceStub }, - { provide: ComponentService, useValue: componentServiceStub }, - { provide: NavigationService, useValue: navigationServiceStub }, - { provide: ActivatedRoute, useFactory: activatedRouteStub }, - { provide: DataJobsService, useValue: dataJobsServiceStub }, - { provide: ToastService, useValue: toastServiceStub }, - { - provide: DataJobsApiService, - useFactory: dataJobsApiServiceStub - }, - { provide: Location, useFactory: locationStub }, - { provide: Router, useFactory: routerStub }, - { - provide: ErrorHandlerService, - useValue: errorHandlerServiceStub - } - ] - }); - - componentModelStub = ComponentModel.of(ComponentStateImpl.of({}), RouterState.of(RouteState.empty(), 1)); - componentServiceStub.init.and.returnValue(of(componentModelStub)); - componentServiceStub.getModel.and.returnValue(of(componentModelStub)); - routerServiceStub.getState.and.returnValue(new Subject()); - routerServiceStub.get.and.returnValue(new Subject()); - - fixture = TestBed.createComponent(DataJobsManageGridComponent); - component = fixture.componentInstance; - component.selectedJob = TEST_JOB; - component.model = componentModelStub; + }), + }, + { provide: RouterService, useValue: routerServiceStub }, + { provide: ComponentService, useValue: componentServiceStub }, + { provide: NavigationService, useValue: navigationServiceStub }, + { provide: ActivatedRoute, useFactory: activatedRouteStub }, + { provide: DataJobsService, useValue: dataJobsServiceStub }, + { provide: ToastService, useValue: toastServiceStub }, + { + provide: DataJobsApiService, + useFactory: dataJobsApiServiceStub, + }, + { provide: Location, useFactory: locationStub }, + { provide: Router, useFactory: routerStub }, + { + provide: ErrorHandlerService, + useValue: errorHandlerServiceStub, + }, + ], }); - it('can load instance', () => { - expect(component).toBeTruthy(); + componentModelStub = ComponentModel.of( + ComponentStateImpl.of({}), + RouterState.of(RouteState.empty(), 1), + ); + componentServiceStub.init.and.returnValue(of(componentModelStub)); + componentServiceStub.getModel.and.returnValue(of(componentModelStub)); + routerServiceStub.getState.and.returnValue(new Subject()); + routerServiceStub.get.and.returnValue(new Subject()); + + fixture = TestBed.createComponent(DataJobsManageGridComponent); + component = fixture.componentInstance; + component.selectedJob = TEST_JOB; + component.model = componentModelStub; + }); + + it("can load instance", () => { + expect(component).toBeTruthy(); + }); + + describe("editJob", () => { + it("skips editJob for undefined job", () => { + // Given + const navigateToSpy = spyOn(component, "navigateTo").and.callFake( + CallFake, + ); + component.selectedJob = null; + + // When + component.navigateToJobDetails(); + + // Then + expect(component.selectedJob).toBeNull(); + expect(navigateToSpy).not.toHaveBeenCalled(); }); - describe('editJob', () => { - it('skips editJob for undefined job', () => { - // Given - const navigateToSpy = spyOn(component, 'navigateTo').and.callFake(CallFake); - component.selectedJob = null; - - // When - component.navigateToJobDetails(); - - // Then - expect(component.selectedJob).toBeNull(); - expect(navigateToSpy).not.toHaveBeenCalled(); - }); - - it('opens editJob for valid job', () => { - // Given - const navigateToSpy = spyOn(component, 'navigateTo').and.returnValue(Promise.resolve(true)); - component.selectedJob = null; - component.ngOnInit(); - - // When - component.navigateToJobDetails(TEST_JOB); - - // Then - expect(component.selectedJob).toBeDefined(); - expect(navigateToSpy).toHaveBeenCalledWith({ - '$.team': 'testTeam', - '$.job': 'job001' - }); - }); + it("opens editJob for valid job", () => { + // Given + const navigateToSpy = spyOn(component, "navigateTo").and.returnValue( + Promise.resolve(true), + ); + component.selectedJob = null; + component.ngOnInit(); + + // When + component.navigateToJobDetails(TEST_JOB); + + // Then + expect(component.selectedJob).toBeDefined(); + expect(navigateToSpy).toHaveBeenCalledWith({ + "$.team": "testTeam", + "$.job": "job001", + }); }); + }); - describe('ngOnInit', () => { - it('makes expected calls', () => { - component.ngOnInit(); - expect(componentServiceStub.init).toHaveBeenCalled(); - expect(componentServiceStub.getModel).toHaveBeenCalled(); - }); + describe("ngOnInit", () => { + it("makes expected calls", () => { + component.ngOnInit(); + expect(componentServiceStub.init).toHaveBeenCalled(); + expect(componentServiceStub.getModel).toHaveBeenCalled(); }); + }); - describe('showTeamsColumn', () => { - it('returns correct value', () => { - expect(component.showTeamsColumn()).toBeTrue(); - }); + describe("showTeamsColumn", () => { + it("returns correct value", () => { + expect(component.showTeamsColumn()).toBeTrue(); }); - - describe('onJobStatusChange', () => { - it('makes expected calls for empty SelectedJobDeployment', () => { - component.selectedJob.deployments = []; - spyOn(component, 'extractSelectedJobDeployment').and.callThrough(); - spyOn(console, 'log').and.callThrough(); - component.onJobStatusChange(); - expect(component.extractSelectedJobDeployment).toHaveBeenCalled(); - expect(console.log).toHaveBeenCalled(); - }); - - it('makes expected calls for valid SelectedJobDeployment', () => { - component.selectedJob.deployments = [TEST_DEPLOYMENT]; - const dataJobSServiceStub: DataJobsApiService = fixture.debugElement.injector.get(DataJobsApiService); - spyOn(component, 'extractSelectedJobDeployment').and.callThrough(); - spyOn(dataJobSServiceStub, 'updateDataJobStatus').and.callThrough(); - component.onJobStatusChange(); - expect(component.extractSelectedJobDeployment).toHaveBeenCalled(); - expect(dataJobSServiceStub.updateDataJobStatus).toHaveBeenCalled(); - }); + }); + + describe("onJobStatusChange", () => { + it("makes expected calls for empty SelectedJobDeployment", () => { + component.selectedJob.deployments = []; + spyOn(component, "extractSelectedJobDeployment").and.callThrough(); + spyOn(console, "log").and.callThrough(); + component.onJobStatusChange(); + expect(component.extractSelectedJobDeployment).toHaveBeenCalled(); + expect(console.log).toHaveBeenCalled(); }); - describe('onExecuteDataJob', () => { - it('makes expected calls', () => { - component.selectedJob = TEST_JOB; - component.selectedJob.deployments = [TEST_DEPLOYMENT]; - const dataJobSServiceStub: DataJobsApiService = fixture.debugElement.injector.get(DataJobsApiService); - spyOn(component, 'extractSelectedJobDeployment').and.callThrough(); - spyOn(dataJobSServiceStub, 'executeDataJob').and.callThrough(); - component.onExecuteDataJob(); - expect(component.extractSelectedJobDeployment).toHaveBeenCalled(); - expect(dataJobSServiceStub.executeDataJob).toHaveBeenCalled(); - }); + it("makes expected calls for valid SelectedJobDeployment", () => { + component.selectedJob.deployments = [TEST_DEPLOYMENT]; + const dataJobSServiceStub: DataJobsApiService = + fixture.debugElement.injector.get(DataJobsApiService); + spyOn(component, "extractSelectedJobDeployment").and.callThrough(); + spyOn(dataJobSServiceStub, "updateDataJobStatus").and.callThrough(); + component.onJobStatusChange(); + expect(component.extractSelectedJobDeployment).toHaveBeenCalled(); + expect(dataJobSServiceStub.updateDataJobStatus).toHaveBeenCalled(); }); - - describe('executeDataJob', () => { - it('sets the expected options', () => { - component.executeDataJob(); - expect(component.confirmExecuteNowOptions.message).toBeDefined(); - expect(component.confirmExecuteNowOptions.infoText).toBeDefined(); - expect(component.confirmExecuteNowOptions.opened).toBeTrue(); - }); + }); + + describe("onExecuteDataJob", () => { + it("makes expected calls", () => { + component.selectedJob = TEST_JOB; + component.selectedJob.deployments = [TEST_DEPLOYMENT]; + const dataJobSServiceStub: DataJobsApiService = + fixture.debugElement.injector.get(DataJobsApiService); + spyOn(component, "extractSelectedJobDeployment").and.callThrough(); + spyOn(dataJobSServiceStub, "executeDataJob").and.callThrough(); + component.onExecuteDataJob(); + expect(component.extractSelectedJobDeployment).toHaveBeenCalled(); + expect(dataJobSServiceStub.executeDataJob).toHaveBeenCalled(); }); - - describe('enable', () => { - it('sets the expected options', () => { - component.enable(); - expect(component.confirmStatusOptions.message).toBeDefined(); - expect(component.confirmStatusOptions.infoText).toBeDefined(); - expect(component.confirmStatusOptions.opened).toBeTrue(); - }); + }); + + describe("executeDataJob", () => { + it("sets the expected options", () => { + component.executeDataJob(); + expect(component.confirmExecuteNowOptions.message).toBeDefined(); + expect(component.confirmExecuteNowOptions.infoText).toBeDefined(); + expect(component.confirmExecuteNowOptions.opened).toBeTrue(); }); - - describe('disable', () => { - it('sets the expected options', () => { - component.disable(); - expect(component.confirmStatusOptions.message).toBeDefined(); - expect(component.confirmStatusOptions.infoText).toBeDefined(); - expect(component.confirmStatusOptions.opened).toBeTrue(); - }); + }); + + describe("enable", () => { + it("sets the expected options", () => { + component.enable(); + expect(component.confirmStatusOptions.message).toBeDefined(); + expect(component.confirmStatusOptions.infoText).toBeDefined(); + expect(component.confirmStatusOptions.opened).toBeTrue(); }); + }); + + describe("disable", () => { + it("sets the expected options", () => { + component.disable(); + expect(component.confirmStatusOptions.message).toBeDefined(); + expect(component.confirmStatusOptions.infoText).toBeDefined(); + expect(component.confirmStatusOptions.opened).toBeTrue(); + }); + }); - describe('component initialization', () => { - it('reads manageConfig filterByTeamName properly', () => { - expect(component.filterByTeamName).toBeTrue(); - }); - - it('reads manageConfig displayMode properly', () => { - expect(component.displayMode).toEqual(DisplayMode.COMPACT); - }); + describe("component initialization", () => { + it("reads manageConfig filterByTeamName properly", () => { + expect(component.filterByTeamName).toBeTrue(); + }); - it('reads manageConfig selectedTeamNameObservable properly', () => { - expect(teamSubjectSubscribeSpy).toHaveBeenCalled(); - }); + it("reads manageConfig displayMode properly", () => { + expect(component.displayMode).toEqual(DisplayMode.COMPACT); }); - describe('resetTeamNameFilter', () => { - it('resets the TeamNameFilter', () => { - component.resetTeamNameFilter(); - expect(component.teamNameFilter).toEqual(EMPTY_TEAM_NAME_FILTER); - }); + it("reads manageConfig selectedTeamNameObservable properly", () => { + expect(teamSubjectSubscribeSpy).toHaveBeenCalled(); }); + }); - describe('Methods::', () => { - describe('|loadDataWithState|', () => { - it('should verify will append on model team filter when default team exist', fakeAsync(() => { - // Given - const state: ClrDatagridStateInterface = { - filters: null, - sort: null, - page: { - size: 10, - current: 2 - } - }; - component.ngOnInit(); - teamSubject.next('teamA'); - - tick(100); - - // When - component.loadDataWithState(state); - - tick(600); - - // Then - const filter = componentModelStub.getComponentState().filter; - expect(filter.criteria.length).toEqual(1); - expect(filter.criteria[0]).toEqual({ - property: 'config.team', - pattern: 'teamA', - sort: null - }); - })); - - it('should verify will append on model filter and sorting and default team filter', fakeAsync(() => { - // Given - const state: ClrDatagridStateInterface = { - filters: [{ property: 'deployments.enabled', value: 'true' }], - sort: { by: 'jobName', reverse: false }, - page: { - size: 10, - current: 2 - } - }; - component.ngOnInit(); - teamSubject.next('teamB'); - - tick(100); - - // When - component.loadDataWithState(state); - - tick(600); - - // Then - const filter = componentModelStub.getComponentState().filter; - expect(filter.criteria).toEqual([ - { property: 'config.team', pattern: 'teamB', sort: null }, - { - property: 'deployments.enabled', - pattern: 'true', - sort: null - }, - { property: 'jobName', pattern: null, sort: ASC } - ]); - })); - - it('should verify will append on model filter and sorting and no default team filter', fakeAsync(() => { - // Given - const state: ClrDatagridStateInterface = { - filters: [{ property: 'deployments.enabled', value: 'false' }], - sort: { by: 'config.description', reverse: true }, - page: { - size: 10, - current: 2 - } - }; - component.filterByTeamName = false; - component.ngOnInit(); - - tick(100); - - // When - component.loadDataWithState(state); - - tick(600); - - // Then - const filter = componentModelStub.getComponentState().filter; - console.log(filter.criteria); - expect(filter.criteria).toEqual([ - { - property: 'deployments.enabled', - pattern: 'false', - sort: null - }, - { - property: 'config.description', - pattern: null, - sort: DESC - } - ]); - })); + describe("resetTeamNameFilter", () => { + it("resets the TeamNameFilter", () => { + component.resetTeamNameFilter(); + expect(component.teamNameFilter).toEqual(EMPTY_TEAM_NAME_FILTER); + }); + }); + + describe("Methods::", () => { + describe("|loadDataWithState|", () => { + it("should verify will append on model team filter when default team exist", fakeAsync(() => { + // Given + const state: ClrDatagridStateInterface = { + filters: null, + sort: null, + page: { + size: 10, + current: 2, + }, + }; + component.ngOnInit(); + teamSubject.next("teamA"); + + tick(100); + + // When + component.loadDataWithState(state); + + tick(600); + + // Then + const filter = componentModelStub.getComponentState().filter; + expect(filter.criteria.length).toEqual(1); + expect(filter.criteria[0]).toEqual({ + property: "config.team", + pattern: "teamA", + sort: null, }); + })); + + it("should verify will append on model filter and sorting and default team filter", fakeAsync(() => { + // Given + const state: ClrDatagridStateInterface = { + filters: [{ property: "deployments.enabled", value: "true" }], + sort: { by: "jobName", reverse: false }, + page: { + size: 10, + current: 2, + }, + }; + component.ngOnInit(); + teamSubject.next("teamB"); + + tick(100); + + // When + component.loadDataWithState(state); + + tick(600); + + // Then + const filter = componentModelStub.getComponentState().filter; + expect(filter.criteria).toEqual([ + { property: "config.team", pattern: "teamB", sort: null }, + { + property: "deployments.enabled", + pattern: "true", + sort: null, + }, + { property: "jobName", pattern: null, sort: ASC }, + ]); + })); + + it("should verify will append on model filter and sorting and no default team filter", fakeAsync(() => { + // Given + const state: ClrDatagridStateInterface = { + filters: [{ property: "deployments.enabled", value: "false" }], + sort: { by: "config.description", reverse: true }, + page: { + size: 10, + current: 2, + }, + }; + component.filterByTeamName = false; + component.ngOnInit(); + + tick(100); + + // When + component.loadDataWithState(state); + + tick(600); + + // Then + const filter = componentModelStub.getComponentState().filter; + console.log(filter.criteria); + expect(filter.criteria).toEqual([ + { + property: "deployments.enabled", + pattern: "false", + sort: null, + }, + { + property: "config.description", + pattern: null, + sort: DESC, + }, + ]); + })); }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.ts index 68a7a66f42..2329c7903a 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/data-jobs-manage-grid.component.ts @@ -3,226 +3,270 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Component, ElementRef, HostBinding, Inject, OnInit } from '@angular/core'; -import { DOCUMENT, Location } from '@angular/common'; -import { ActivatedRoute, Router } from '@angular/router'; -import { HttpErrorResponse } from '@angular/common/http'; +import { + Component, + ElementRef, + HostBinding, + Inject, + OnInit, +} from "@angular/core"; +import { DOCUMENT, Location } from "@angular/common"; +import { ActivatedRoute, Router } from "@angular/router"; +import { HttpErrorResponse } from "@angular/common/http"; import { - ComponentService, - ErrorHandlerService, - NavigationService, - RouterService, - ToastService, - VmwToastType -} from '@versatiledatakit/shared'; + ComponentService, + ErrorHandlerService, + NavigationService, + RouterService, + ToastService, + VmwToastType, +} from "@versatiledatakit/shared"; -import { ErrorUtil } from '../../../../shared/utils'; +import { ErrorUtil } from "../../../../shared/utils"; -import { ConfirmationModalOptions, ModalOptions } from '../../../../shared/model'; +import { + ConfirmationModalOptions, + ModalOptions, +} from "../../../../shared/model"; -import { DATA_PIPELINES_CONFIGS, DataJobStatus, DataPipelinesConfig, ToastDefinitions } from '../../../../model'; -import { DataJobsApiService, DataJobsService } from '../../../../services'; +import { + DATA_PIPELINES_CONFIGS, + DataJobStatus, + DataPipelinesConfig, + ToastDefinitions, +} from "../../../../model"; +import { DataJobsApiService, DataJobsService } from "../../../../services"; -import { ClrGridUIState, DataJobsBaseGridComponent } from '../../../base-grid/data-jobs-base-grid.component'; +import { + ClrGridUIState, + DataJobsBaseGridComponent, +} from "../../../base-grid/data-jobs-base-grid.component"; @Component({ - selector: 'lib-data-jobs-manage-grid', - templateUrl: './data-jobs-manage-grid.component.html', - styleUrls: ['./data-jobs-manage-grid.component.scss'] + selector: "lib-data-jobs-manage-grid", + templateUrl: "./data-jobs-manage-grid.component.html", + styleUrls: ["./data-jobs-manage-grid.component.scss"], }) -export class DataJobsManageGridComponent extends DataJobsBaseGridComponent implements OnInit { - /** - * @inheritDoc - */ - static override readonly CLASS_NAME: string = 'DataJobsManageGridComponent'; - - /** - * @inheritDoc - */ - static override readonly PUBLIC_NAME: string = 'DataJobs-ManageGrid-Component'; - - @HostBinding('attr.data-cy') attributeDataCy = 'data-pipelines-manage-data-jobs'; - - readonly uuid = 'DataJobsManageGridComponent'; - - confirmStatusOptions: ModalOptions; - confirmExecuteNowOptions: ModalOptions; - - override clrGridDefaultFilter: ClrGridUIState['filter'] = { - deploymentStatus: DataJobStatus.ENABLED - }; - override clrGridDefaultSort: ClrGridUIState['sort'] = { - // eslint-disable-next-line @typescript-eslint/naming-convention - 'deployments.lastExecutionTime': -1 - }; - - dataPipelinesDocumentationUrl: string; - - constructor( - componentService: ComponentService, - navigationService: NavigationService, - activatedRoute: ActivatedRoute, - routerService: RouterService, - dataJobsService: DataJobsService, - dataJobsApiService: DataJobsApiService, - errorHandlerService: ErrorHandlerService, - location: Location, - router: Router, - elementRef: ElementRef, - @Inject(DOCUMENT) document: Document, - @Inject(DATA_PIPELINES_CONFIGS) - dataPipelinesModuleConfig: DataPipelinesConfig, - private readonly toastService: ToastService - ) { - super( - componentService, - navigationService, - activatedRoute, - routerService, - dataJobsService, - dataJobsApiService, - errorHandlerService, - location, - router, - elementRef, - document, - dataPipelinesModuleConfig, - 'manage_data_jobs_grid_user_config', - { - hiddenColumns: { - description: true, - nextRun: true, - lastDeployedDate: true, - lastDeployedBy: true, - notifications: true, - source: true - } - }, - DataJobsManageGridComponent.CLASS_NAME - ); +export class DataJobsManageGridComponent + extends DataJobsBaseGridComponent + implements OnInit +{ + /** + * @inheritDoc + */ + static override readonly CLASS_NAME: string = "DataJobsManageGridComponent"; - this.confirmStatusOptions = new ConfirmationModalOptions(); - this.confirmExecuteNowOptions = new ConfirmationModalOptions(); + /** + * @inheritDoc + */ + static override readonly PUBLIC_NAME: string = + "DataJobs-ManageGrid-Component"; - this._inputConfig(dataPipelinesModuleConfig); - } + @HostBinding("attr.data-cy") attributeDataCy = + "data-pipelines-manage-data-jobs"; - enable() { - this.confirmStatusOptions.message = `Job ${this.selectedJob.jobName} will be enabled`; - this.confirmStatusOptions.infoText = `Enabling this job means that it will be scheduled for execution`; - this.confirmStatusOptions.opened = true; - } + readonly uuid = "DataJobsManageGridComponent"; + + confirmStatusOptions: ModalOptions; + confirmExecuteNowOptions: ModalOptions; - disable() { - this.confirmStatusOptions.message = `Job ${this.selectedJob.jobName} will be disabled`; - this.confirmStatusOptions.infoText = `Disabling this job means that + override clrGridDefaultFilter: ClrGridUIState["filter"] = { + deploymentStatus: DataJobStatus.ENABLED, + }; + override clrGridDefaultSort: ClrGridUIState["sort"] = { + // eslint-disable-next-line @typescript-eslint/naming-convention + "deployments.lastExecutionTime": -1, + }; + + dataPipelinesDocumentationUrl: string; + + constructor( + componentService: ComponentService, + navigationService: NavigationService, + activatedRoute: ActivatedRoute, + routerService: RouterService, + dataJobsService: DataJobsService, + dataJobsApiService: DataJobsApiService, + errorHandlerService: ErrorHandlerService, + location: Location, + router: Router, + elementRef: ElementRef, + @Inject(DOCUMENT) document: Document, + @Inject(DATA_PIPELINES_CONFIGS) + dataPipelinesModuleConfig: DataPipelinesConfig, + private readonly toastService: ToastService, + ) { + super( + componentService, + navigationService, + activatedRoute, + routerService, + dataJobsService, + dataJobsApiService, + errorHandlerService, + location, + router, + elementRef, + document, + dataPipelinesModuleConfig, + "manage_data_jobs_grid_user_config", + { + hiddenColumns: { + description: true, + nextRun: true, + lastDeployedDate: true, + lastDeployedBy: true, + notifications: true, + source: true, + }, + }, + DataJobsManageGridComponent.CLASS_NAME, + ); + + this.confirmStatusOptions = new ConfirmationModalOptions(); + this.confirmExecuteNowOptions = new ConfirmationModalOptions(); + + this._inputConfig(dataPipelinesModuleConfig); + } + + enable() { + this.confirmStatusOptions.message = `Job ${this.selectedJob.jobName} will be enabled`; + this.confirmStatusOptions.infoText = `Enabling this job means that it will be scheduled for execution`; + this.confirmStatusOptions.opened = true; + } + + disable() { + this.confirmStatusOptions.message = `Job ${this.selectedJob.jobName} will be disabled`; + this.confirmStatusOptions.infoText = `Disabling this job means that it will NOT be scheduled for execution anymore`; - this.confirmStatusOptions.opened = true; - } + this.confirmStatusOptions.opened = true; + } - onJobStatusChange() { - const selectedJobDeployment = this.extractSelectedJobDeployment(); - if (!selectedJobDeployment) { - console.log('Status update action will not be performed for job with no deployments.'); - return; - } - - this.subscriptions.push( - this.dataJobsApiService - .updateDataJobStatus( - this.selectedJob.config?.team, - this.selectedJob.jobName, - selectedJobDeployment.id, - !selectedJobDeployment.enabled - ) - .subscribe({ - next: () => { - selectedJobDeployment.enabled = !selectedJobDeployment.enabled; - - const state = selectedJobDeployment.enabled ? 'enabled' : 'disabled'; - - this.toastService.show({ - type: VmwToastType.INFO, - title: `Status update completed`, - description: `Data job "${this.selectedJob.jobName}" successfully ${state}` - }); - }, - error: (error: unknown) => { - this.errorHandlerService.processError(ErrorUtil.extractError(error as Error), { - title: `Updating status for Data job "${this.selectedJob?.jobName}" failed` - }); - } - }) - ); + onJobStatusChange() { + const selectedJobDeployment = this.extractSelectedJobDeployment(); + if (!selectedJobDeployment) { + console.log( + "Status update action will not be performed for job with no deployments.", + ); + return; } - executeDataJob() { - this.confirmExecuteNowOptions.message = `Job ${this.selectedJob.jobName} will be queued for execution.`; - this.confirmExecuteNowOptions.infoText = `Confirming will result in immediate data job execution.`; - this.confirmExecuteNowOptions.opened = true; - } + this.subscriptions.push( + this.dataJobsApiService + .updateDataJobStatus( + this.selectedJob.config?.team, + this.selectedJob.jobName, + selectedJobDeployment.id, + !selectedJobDeployment.enabled, + ) + .subscribe({ + next: () => { + selectedJobDeployment.enabled = !selectedJobDeployment.enabled; - onExecuteDataJob() { - this.subscriptions.push( - this.dataJobsApiService - .executeDataJob(this.selectedJob.config?.team, this.selectedJob.jobName, this.extractSelectedJobDeployment().id) - .subscribe({ - next: () => { - this.toastService.show(ToastDefinitions.successfullyRanJob(this.selectedJob.jobName)); - }, - error: (error: unknown) => { - this.errorHandlerService.processError(ErrorUtil.extractError(error as Error), { - title: - (error as HttpErrorResponse)?.status === 409 - ? 'Failed, Data job is already executing' - : 'Failed to queue Data job for execution' - }); - } - }) - ); - } + const state = selectedJobDeployment.enabled + ? "enabled" + : "disabled"; - resetTeamNameFilter() { - this.teamNameFilter = ''; - } + this.toastService.show({ + type: VmwToastType.INFO, + title: `Status update completed`, + description: `Data job "${this.selectedJob.jobName}" successfully ${state}`, + }); + }, + error: (error: unknown) => { + this.errorHandlerService.processError( + ErrorUtil.extractError(error as Error), + { + title: `Updating status for Data job "${this.selectedJob?.jobName}" failed`, + }, + ); + }, + }), + ); + } + + executeDataJob() { + this.confirmExecuteNowOptions.message = `Job ${this.selectedJob.jobName} will be queued for execution.`; + this.confirmExecuteNowOptions.infoText = `Confirming will result in immediate data job execution.`; + this.confirmExecuteNowOptions.opened = true; + } + + onExecuteDataJob() { + this.subscriptions.push( + this.dataJobsApiService + .executeDataJob( + this.selectedJob.config?.team, + this.selectedJob.jobName, + this.extractSelectedJobDeployment().id, + ) + .subscribe({ + next: () => { + this.toastService.show( + ToastDefinitions.successfullyRanJob(this.selectedJob.jobName), + ); + }, + error: (error: unknown) => { + this.errorHandlerService.processError( + ErrorUtil.extractError(error as Error), + { + title: + (error as HttpErrorResponse)?.status === 409 + ? "Failed, Data job is already executing" + : "Failed to queue Data job for execution", + }, + ); + }, + }), + ); + } - showTeamsColumn() { - return this.dataPipelinesModuleConfig?.manageConfig?.showTeamsColumn; + resetTeamNameFilter() { + this.teamNameFilter = ""; + } + + showTeamsColumn() { + return this.dataPipelinesModuleConfig?.manageConfig?.showTeamsColumn; + } + + extractSelectedJobDeployment() { + return this.selectedJob?.deployments[ + this.selectedJob?.deployments?.length - 1 + ]; + } + + private _inputConfig(dataPipelinesModuleConfig: DataPipelinesConfig) { + if (dataPipelinesModuleConfig.manageConfig?.filterByTeamName) { + this.filterByTeamName = + dataPipelinesModuleConfig.manageConfig?.filterByTeamName; } - extractSelectedJobDeployment() { - return this.selectedJob?.deployments[this.selectedJob?.deployments?.length - 1]; + if (dataPipelinesModuleConfig.manageConfig?.displayMode) { + this.displayMode = dataPipelinesModuleConfig.manageConfig?.displayMode; } - private _inputConfig(dataPipelinesModuleConfig: DataPipelinesConfig) { - if (dataPipelinesModuleConfig.manageConfig?.filterByTeamName) { - this.filterByTeamName = dataPipelinesModuleConfig.manageConfig?.filterByTeamName; - } - - if (dataPipelinesModuleConfig.manageConfig?.displayMode) { - this.displayMode = dataPipelinesModuleConfig.manageConfig?.displayMode; - } - - if (dataPipelinesModuleConfig.manageConfig?.selectedTeamNameObservable) { - this.subscriptions.push( - dataPipelinesModuleConfig.manageConfig?.selectedTeamNameObservable.subscribe({ - next: (newTeam) => { - if (newTeam !== this.teamNameFilter) { - this.teamNameFilter = newTeam; - this.refresh(); - } - }, - error: (error: unknown) => { - this.resetTeamNameFilter(); - console.error('Error loading selected team', error); - } - }) - ); - } + if (dataPipelinesModuleConfig.manageConfig?.selectedTeamNameObservable) { + this.subscriptions.push( + dataPipelinesModuleConfig.manageConfig?.selectedTeamNameObservable.subscribe( + { + next: (newTeam) => { + if (newTeam !== this.teamNameFilter) { + this.teamNameFilter = newTeam; + this.refresh(); + } + }, + error: (error: unknown) => { + this.resetTeamNameFilter(); + console.error("Error loading selected team", error); + }, + }, + ), + ); + } - if (dataPipelinesModuleConfig?.dataPipelinesDocumentationUrl) { - this.dataPipelinesDocumentationUrl = dataPipelinesModuleConfig.dataPipelinesDocumentationUrl; - } + if (dataPipelinesModuleConfig?.dataPipelinesDocumentationUrl) { + this.dataPipelinesDocumentationUrl = + dataPipelinesModuleConfig.dataPipelinesDocumentationUrl; } + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/index.ts index 019e9084bd..ab4710a77b 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/components/grid/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-jobs-manage-grid.component'; +export * from "./data-jobs-manage-grid.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.css b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.css index c77bb25ec5..2e9e5e6a33 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.css +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.css @@ -4,7 +4,7 @@ */ .page-container { - display: grid; - height: 100%; - grid-template-rows: 40px 1fr; + display: grid; + height: 100%; + grid-template-rows: 40px 1fr; } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.html index 6d7e7d60a5..e2989e0ab2 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.html @@ -4,10 +4,10 @@ -->
-
-

- Manage Data Jobs -

-
- +
+

+ Manage Data Jobs +

+
+
diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.spec.ts index b671cb0cf3..d1101f20e5 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.spec.ts @@ -3,24 +3,24 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { DataJobsManagePageComponent } from './data-jobs-manage-page.component'; +import { ComponentFixture, TestBed } from "@angular/core/testing"; +import { NO_ERRORS_SCHEMA } from "@angular/core"; +import { DataJobsManagePageComponent } from "./data-jobs-manage-page.component"; -describe('DataJobsManageComponent', () => { - let component: DataJobsManagePageComponent; - let fixture: ComponentFixture; +describe("DataJobsManageComponent", () => { + let component: DataJobsManagePageComponent; + let fixture: ComponentFixture; - beforeEach(() => { - TestBed.configureTestingModule({ - schemas: [NO_ERRORS_SCHEMA], - declarations: [DataJobsManagePageComponent] - }); - fixture = TestBed.createComponent(DataJobsManagePageComponent); - component = fixture.componentInstance; + beforeEach(() => { + TestBed.configureTestingModule({ + schemas: [NO_ERRORS_SCHEMA], + declarations: [DataJobsManagePageComponent], }); + fixture = TestBed.createComponent(DataJobsManagePageComponent); + component = fixture.componentInstance; + }); - it('can load instance', () => { - expect(component).toBeTruthy(); - }); + it("can load instance", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.ts index a9364bbf89..0244dd5532 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/data-jobs-manage-page.component.ts @@ -3,11 +3,11 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Component } from '@angular/core'; +import { Component } from "@angular/core"; @Component({ - selector: 'lib-data-jobs-manage', - templateUrl: './data-jobs-manage-page.component.html', - styleUrls: ['./data-jobs-manage-page.component.css'] + selector: "lib-data-jobs-manage", + templateUrl: "./data-jobs-manage-page.component.html", + styleUrls: ["./data-jobs-manage-page.component.css"], }) export class DataJobsManagePageComponent {} diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/index.ts index 7b5f863705..47c22fab79 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-jobs-manage-page.component'; +export * from "./data-jobs-manage-page.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/public-api.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/public-api.ts index a265ad53d3..ce933d6a97 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/public-api.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/data-jobs-manage/public-api.ts @@ -3,5 +3,5 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './index'; -export * from './components/grid'; +export * from "./index"; +export * from "./components/grid"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/public-api.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/public-api.ts index 7d36bb80ef..24c86a4240 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/public-api.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/public-api.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-job/public-api'; -export * from './data-jobs-explore/public-api'; -export * from './data-jobs-manage/public-api'; -export * from './widgets/public-api'; +export * from "./data-job/public-api"; +export * from "./data-jobs-explore/public-api"; +export * from "./data-jobs-manage/public-api"; +export * from "./widgets/public-api"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/data-jobs-executions-widget.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/data-jobs-executions-widget.component.html index 88687435de..0de9f08d19 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/data-jobs-executions-widget.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/data-jobs-executions-widget.component.html @@ -4,63 +4,63 @@ --> - We couldn't find any failed executions! + We couldn't find any failed executions! - Most recent failed executions - Last 24h (UTC time) - + Most recent failed executions - Last 24h (UTC time) + - Status - - - - + Status + + + + - End (UTC) - + End (UTC) + - + + + {{ jobExecution.id }} + + + + + + {{ jobExecution.endTimeFormatted }} - - - {{ jobExecution.id }} - - - - - - {{ jobExecution.endTimeFormatted }} - + diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/data-jobs-executions-widget.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/data-jobs-executions-widget.component.scss index 7fe6714b55..2d6a109bd8 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/data-jobs-executions-widget.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/data-jobs-executions-widget.component.scss @@ -4,56 +4,56 @@ */ .datagrid-executions-widget-table { - height: 300px; - - ::ng-deep .datagrid-table { - width: 100%; - - .header-title { - .datagrid-column-separator { - display: none; - } - } - - .datagrid-row-scrollable { - width: 100%; - } - - .job-name-column { - width: 60% !important; - } - - .status-column { - width: 20% !important; - padding-left: 0px !important; - white-space: nowrap; - } - - .time-column { - width: 20% !important; - min-width: 120px; - } - - clr-dg-cell { - .btn { - width: 100% !important; - text-align: left; - } - } + height: 300px; + + ::ng-deep .datagrid-table { + width: 100%; + + .header-title { + .datagrid-column-separator { + display: none; + } + } + + .datagrid-row-scrollable { + width: 100%; + } + + .job-name-column { + width: 60% !important; + } + + .status-column { + width: 20% !important; + padding-left: 0px !important; + white-space: nowrap; + } + + .time-column { + width: 20% !important; + min-width: 120px; + } + + clr-dg-cell { + .btn { + width: 100% !important; + text-align: left; + } } + } } clr-dg-cell .btn { - margin: 0 !important; - text-transform: none !important; - padding: 0.3rem 0.3rem 0.3rem; + margin: 0 !important; + text-transform: none !important; + padding: 0.3rem 0.3rem 0.3rem; } .no-padding { - padding-bottom: 0px; - padding-top: 0px; + padding-bottom: 0px; + padding-top: 0px; } .hide { - display: none; + display: none; } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/data-jobs-executions-widget.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/data-jobs-executions-widget.component.ts index b52849e54f..03240a76da 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/data-jobs-executions-widget.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/data-jobs-executions-widget.component.ts @@ -3,57 +3,66 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + Input, + OnChanges, + SimpleChanges, +} from "@angular/core"; -import { NavigationService } from '@versatiledatakit/shared'; +import { NavigationService } from "@versatiledatakit/shared"; -import { DataJob, DataJobExecution } from '../../../model'; +import { DataJob, DataJobExecution } from "../../../model"; -import { GridDataJobExecution } from '../../data-job/pages/executions'; +import { GridDataJobExecution } from "../../data-job/pages/executions"; @Component({ - selector: 'lib-data-jobs-executions-widget', - templateUrl: './data-jobs-executions-widget.component.html', - styleUrls: ['./data-jobs-executions-widget.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush + selector: "lib-data-jobs-executions-widget", + templateUrl: "./data-jobs-executions-widget.component.html", + styleUrls: ["./data-jobs-executions-widget.component.scss"], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class DataJobsExecutionsWidgetComponent implements OnChanges { - @Input() manageLink: string; - @Input() allJobs: DataJob[]; - @Input() jobExecutions: GridDataJobExecution[] = []; + @Input() manageLink: string; + @Input() allJobs: DataJob[]; + @Input() jobExecutions: GridDataJobExecution[] = []; - readonly uuid = 'DataJobsExecutionsWidgetComponent'; + readonly uuid = "DataJobsExecutionsWidgetComponent"; - loading = true; + loading = true; - constructor(private readonly navigationService: NavigationService) {} + constructor(private readonly navigationService: NavigationService) {} - /** - * ** NgFor elements tracking function. - */ - trackByFn(index: number, execution: DataJobExecution): string { - return `${index}|${execution?.id}`; - } + /** + * ** NgFor elements tracking function. + */ + trackByFn(index: number, execution: DataJobExecution): string { + return `${index}|${execution?.id}`; + } - /** - * @inheritDoc - */ - ngOnChanges(changes: SimpleChanges) { - if (changes['jobExecutions'] !== undefined && changes['jobExecutions'].currentValue !== undefined) { - this.loading = false; - } + /** + * @inheritDoc + */ + ngOnChanges(changes: SimpleChanges) { + if ( + changes["jobExecutions"] !== undefined && + changes["jobExecutions"].currentValue !== undefined + ) { + this.loading = false; } + } + + navigateToJobExecutions(job?: DataJobExecution): void { + const dataJob = this.allJobs.find((el) => el.jobName === job.jobName); + let link = this.manageLink; + link = link.replace("{team}", dataJob.config?.team); + link = link.replace("{data-job}", dataJob.jobName); + link = link + "/executions"; - navigateToJobExecutions(job?: DataJobExecution): void { - const dataJob = this.allJobs.find((el) => el.jobName === job.jobName); - let link = this.manageLink; - link = link.replace('{team}', dataJob.config?.team); - link = link.replace('{data-job}', dataJob.jobName); - link = link + '/executions'; - - if (dataJob) { - // eslint-disable-next-line @typescript-eslint/no-floating-promises - this.navigationService.navigate(link); - } + if (dataJob) { + // eslint-disable-next-line @typescript-eslint/no-floating-promises + this.navigationService.navigate(link); } + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/index.ts index 671fe26929..f8d55aa476 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-executions-widget/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-jobs-executions-widget.component'; +export * from "./data-jobs-executions-widget.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/data-jobs-failed-widget.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/data-jobs-failed-widget.component.html index be2d9263ce..cd645929d8 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/data-jobs-failed-widget.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/data-jobs-failed-widget.component.html @@ -4,45 +4,45 @@ --> - We couldn't find any failed jobs! + We couldn't find any failed jobs! - Jobs with Failing executions - Last 24h - + Jobs with Failing executions - Last 24h + - Failed executions - + Failed executions + - - - - {{ dataJob.jobName }} - - + + + + {{ dataJob.jobName }} + + - - {{ dataJob.failedTotal }} - - + + {{ + dataJob.failedTotal + }} + + diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/data-jobs-failed-widget.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/data-jobs-failed-widget.component.scss index 1fdf7f924f..3fe9e36671 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/data-jobs-failed-widget.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/data-jobs-failed-widget.component.scss @@ -4,54 +4,54 @@ */ .datagrid-failed-executions-widget { - height: 300px; - - ::ng-deep .datagrid-table { - width: 100%; - - .header-title { - .datagrid-column-separator { - display: none; - } - } - - .datagrid-row-scrollable { - width: 100%; - } - - .job-name-column { - width: 70% !important; - } - - .center { - width: 30% !important; - text-align: center; - } - - clr-dg-cell { - .btn { - width: 100% !important; - text-align: left; - } - } + height: 300px; + + ::ng-deep .datagrid-table { + width: 100%; + + .header-title { + .datagrid-column-separator { + display: none; + } + } + + .datagrid-row-scrollable { + width: 100%; + } + + .job-name-column { + width: 70% !important; + } + + .center { + width: 30% !important; + text-align: center; + } + + clr-dg-cell { + .btn { + width: 100% !important; + text-align: left; + } } + } } clr-dg-cell .btn { - margin: 0 !important; - text-transform: none !important; - padding: 0.3rem 0.3rem 0.3rem; + margin: 0 !important; + text-transform: none !important; + padding: 0.3rem 0.3rem 0.3rem; } .no-padding { - padding-bottom: 0px; - padding-top: 0px; + padding-bottom: 0px; + padding-top: 0px; } .custom-label { - width: 50px; + width: 50px; } .label-column { - display: none; + display: none; } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/data-jobs-failed-widget.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/data-jobs-failed-widget.component.ts index bc0c66d969..bef557e180 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/data-jobs-failed-widget.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/data-jobs-failed-widget.component.ts @@ -3,74 +3,82 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + Input, + OnChanges, + SimpleChanges, +} from "@angular/core"; -import { NavigationService } from '@versatiledatakit/shared'; +import { NavigationService } from "@versatiledatakit/shared"; -import { DataJob, DataJobExecutions } from '../../../model'; +import { DataJob, DataJobExecutions } from "../../../model"; -import { GridDataJobExecution } from '../../data-job/pages/executions'; +import { GridDataJobExecution } from "../../data-job/pages/executions"; interface DataJobGrid extends DataJob { - failedTotal?: number; + failedTotal?: number; } @Component({ - selector: 'lib-data-jobs-failed-widget', - templateUrl: './data-jobs-failed-widget.component.html', - styleUrls: ['./data-jobs-failed-widget.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush + selector: "lib-data-jobs-failed-widget", + templateUrl: "./data-jobs-failed-widget.component.html", + styleUrls: ["./data-jobs-failed-widget.component.scss"], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class DataJobsFailedWidgetComponent implements OnChanges { - @Input() manageLink: string; - @Input() allJobs: DataJob[]; - @Input() jobExecutions: GridDataJobExecution[] = []; + @Input() manageLink: string; + @Input() allJobs: DataJob[]; + @Input() jobExecutions: GridDataJobExecution[] = []; - readonly uuid = 'DataJobsFailedWidgetComponent'; + readonly uuid = "DataJobsFailedWidgetComponent"; - loading = true; - dataJobs: DataJobGrid[] = []; + loading = true; + dataJobs: DataJobGrid[] = []; - constructor(private readonly navigationService: NavigationService) {} + constructor(private readonly navigationService: NavigationService) {} - /** - * ** NgFor elements tracking function. - */ - trackByFn(index: number, dataJob: DataJob): string { - return `${index}|${dataJob?.jobName}`; - } + /** + * ** NgFor elements tracking function. + */ + trackByFn(index: number, dataJob: DataJob): string { + return `${index}|${dataJob?.jobName}`; + } - /** - * @inheritDoc - */ - ngOnChanges(changes: SimpleChanges) { - if (changes['jobExecutions'] !== undefined) { - this.dataJobs = []; - (changes['jobExecutions'].currentValue as DataJobExecutions).forEach((element) => { - const temp = this.dataJobs.find((i) => i.jobName === element.jobName); - if (!temp) { - this.dataJobs.push({ - jobName: element.jobName, - failedTotal: 1 - } as DataJobGrid); - } else { - temp.failedTotal++; - } - }); - this.loading = false; - } + /** + * @inheritDoc + */ + ngOnChanges(changes: SimpleChanges) { + if (changes["jobExecutions"] !== undefined) { + this.dataJobs = []; + (changes["jobExecutions"].currentValue as DataJobExecutions).forEach( + (element) => { + const temp = this.dataJobs.find((i) => i.jobName === element.jobName); + if (!temp) { + this.dataJobs.push({ + jobName: element.jobName, + failedTotal: 1, + } as DataJobGrid); + } else { + temp.failedTotal++; + } + }, + ); + this.loading = false; } + } - navigateToJobDetails(job?: DataJob): void { - const dataJob = this.allJobs.find((el) => el.jobName === job.jobName); - let link = this.manageLink; - link = link.replace('{team}', dataJob.config?.team); - link = link.replace('{data-job}', job.jobName); - link = link + '/details'; + navigateToJobDetails(job?: DataJob): void { + const dataJob = this.allJobs.find((el) => el.jobName === job.jobName); + let link = this.manageLink; + link = link.replace("{team}", dataJob.config?.team); + link = link.replace("{data-job}", job.jobName); + link = link + "/details"; - if (dataJob) { - // eslint-disable-next-line @typescript-eslint/no-floating-promises - this.navigationService.navigate(link); - } + if (dataJob) { + // eslint-disable-next-line @typescript-eslint/no-floating-promises + this.navigationService.navigate(link); } + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/index.ts index ecdb6dc3ba..0623601e97 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-failed-widget/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-jobs-failed-widget.component'; +export * from "./data-jobs-failed-widget.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/data-jobs-health-panel.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/data-jobs-health-panel.component.html index 15e33b7ebc..c973919456 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/data-jobs-health-panel.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/data-jobs-health-panel.component.html @@ -4,74 +4,67 @@ -->
-
-
-
-

- - Data Jobs - -

- -
-

- Data Jobs help Data Engineers develop, deploy, run, and manage - data processing workloads -

-
+
+
+
+

+ + Data Jobs + +

+ +
+

+ Data Jobs help Data Engineers develop, deploy, run, and manage data + processing workloads +

+
-
-
-
- -
-
- -
-
- -
-
- -
- - -
- +
+
+
+ +
+
+ +
+
+ +
+
+ +
+ +
-
+ +
+ diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/data-jobs-health-panel.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/data-jobs-health-panel.component.scss index 779c7a1f87..e03d524eeb 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/data-jobs-health-panel.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/data-jobs-health-panel.component.scss @@ -3,274 +3,274 @@ * SPDX-License-Identifier: Apache-2.0 */ -@import '../variables.scss'; +@import "../variables.scss"; .widget { - position: relative; - height: 100%; + position: relative; + height: 100%; - .widget-section-container { - padding: 1.2rem; - height: 100%; - border-radius: 0.2rem; - border: none; - box-shadow: - 0 3px 10px 0 rgba(0, 0, 0, 0.1), - 0 3px 5px 0 rgba(0, 0, 0, 0.09); - position: relative; - overflow: hidden; - ::ng-deep .datagrid-table-wrapper { - max-width: 98.6% !important; - } + .widget-section-container { + padding: 1.2rem; + height: 100%; + border-radius: 0.2rem; + border: none; + box-shadow: + 0 3px 10px 0 rgba(0, 0, 0, 0.1), + 0 3px 5px 0 rgba(0, 0, 0, 0.09); + position: relative; + overflow: hidden; + ::ng-deep .datagrid-table-wrapper { + max-width: 98.6% !important; } + } } ::ng-deep .fade-to-dark.dark { - .widget-card { - --label-color-error: #f27963; - --label-color-success: #5eb715; - --header-background: #28404d; - --widget-border: 1px solid #28404d; - --widget-clickable-background: #324f62; - --widget-details-background: #21333b; - --widget-details-hover-background: #1b2a32; - --widget-details-color: #b3b3b3; - --widget-details-border: 2px solid #28404d; - --widget-icon-backgound-color: #194b70; - } + .widget-card { + --label-color-error: #f27963; + --label-color-success: #5eb715; + --header-background: #28404d; + --widget-border: 1px solid #28404d; + --widget-clickable-background: #324f62; + --widget-details-background: #21333b; + --widget-details-hover-background: #1b2a32; + --widget-details-color: #b3b3b3; + --widget-details-border: 2px solid #28404d; + --widget-icon-backgound-color: #194b70; + } } .widget-card { - --label-color-error: #f35e44; - --label-color-success: #5aa220; - --header-background: #{$color-white}; - --widget-border: 1px solid #e3f5fc; - --widget-clickable-background: #e8e8e8; - --widget-details-background: #{$color-white}; - --widget-details-hover-background: #d8e3e9; - --widget-details-color: #8c8c8c; - --widget-details-border: 2px solid #e3f5fc; - --widget-icon-backgound-color: #0072a3; - - .label-error { - color: var(--label-color-error); - } + --label-color-error: #f35e44; + --label-color-success: #5aa220; + --header-background: #{$color-white}; + --widget-border: 1px solid #e3f5fc; + --widget-clickable-background: #e8e8e8; + --widget-details-background: #{$color-white}; + --widget-details-hover-background: #d8e3e9; + --widget-details-color: #8c8c8c; + --widget-details-border: 2px solid #e3f5fc; + --widget-icon-backgound-color: #0072a3; + + .label-error { + color: var(--label-color-error); + } + + .label-success { + color: var(--label-color-success); + } + + .widget-footer { + position: relative; + min-height: 25px; + margin: 1.3rem -1.2rem -1.2rem; + border-top: var(--widget-border); - .label-success { - color: var(--label-color-success); + a { + margin: 0 0 0 0.5rem; + padding: 0px; } + } - .widget-footer { - position: relative; - min-height: 25px; - margin: 1.3rem -1.2rem -1.2rem; - border-top: var(--widget-border); + .widget-header { + background: var(--header-background); + margin: -1.2rem -1.2rem 0 -1.2rem; + padding: 0.8rem; + border-radius: 0.1rem 0.1rem 0 0; + position: relative; + + .widget-header-title-refresh-button { + display: flex; + align-items: center; - a { - margin: 0 0 0 0.5rem; - padding: 0px; + .header-title { + margin-top: 0; + font-weight: 200; + + clr-icon { + margin-top: -2px; } + } + } + p { + margin-top: 0.4rem; + line-height: 0.8rem; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; } + } + + .widget-container { + z-index: 100; + + .widget-values { + line-height: 0.8rem; + display: grid; + grid-template: ". . ." 1fr / 1fr 1fr 1fr; + margin-left: -1.2rem; + margin-right: -1.2rem; + margin-bottom: -1.2rem; + row-gap: 1.2rem; + border-top: var(--widget-border); + + .widget-value { + display: block; + text-align: center; + background: var(--widget-details-background); - .widget-header { - background: var(--header-background); - margin: -1.2rem -1.2rem 0 -1.2rem; - padding: 0.8rem; - border-radius: 0.1rem 0.1rem 0 0; - position: relative; + &:not(:first-child) { + border-left: var(--widget-border); + } - .widget-header-title-refresh-button { - display: flex; - align-items: center; + &:not(:last-child) { + border-right: var(--widget-border); + } - .header-title { - margin-top: 0; - font-weight: 200; + padding: 0.6rem; - clr-icon { - margin-top: -2px; - } - } + .widget-title { + margin-bottom: 0.2rem; + margin-top: 0.2rem; + font-size: 1.2rem; + font-weight: 500; + display: block; } - p { - margin-top: 0.4rem; - line-height: 0.8rem; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; + + .widget-text { + font-size: 0.55rem; + display: block; + line-height: 0.6rem; } - } - .widget-container { - z-index: 100; - - .widget-values { - line-height: 0.8rem; - display: grid; - grid-template: '. . .' 1fr / 1fr 1fr 1fr; - margin-left: -1.2rem; - margin-right: -1.2rem; - margin-bottom: -1.2rem; - row-gap: 1.2rem; - border-top: var(--widget-border); - - .widget-value { - display: block; - text-align: center; - background: var(--widget-details-background); - - &:not(:first-child) { - border-left: var(--widget-border); - } - - &:not(:last-child) { - border-right: var(--widget-border); - } - - padding: 0.6rem; - - .widget-title { - margin-bottom: 0.2rem; - margin-top: 0.2rem; - font-size: 1.2rem; - font-weight: 500; - display: block; - } - - .widget-text { - font-size: 0.55rem; - display: block; - line-height: 0.6rem; - } - - &.widget-clickable { - cursor: pointer; - - &:hover { - background: var(--widget-clickable-background); - } - } - - &.show-details { - background: var(--widget-clickable-background); - - .widget-text { - font-weight: bold; - } - - position: relative; - } - } + &.widget-clickable { + cursor: pointer; + + &:hover { + background: var(--widget-clickable-background); + } } + + &.show-details { + background: var(--widget-clickable-background); + + .widget-text { + font-weight: bold; + } + + position: relative; + } + } + } + } + + .widget-details { + z-index: 1; + height: 0; + margin: 1.2rem -1.2rem -1.2rem -1.2rem; + transition: height 0.3s; + overflow: hidden; + background: var(--widget-details-background); + + &.show-details { + height: 240px; + border-top: var(--widget-details-border); } - .widget-details { - z-index: 1; - height: 0; - margin: 1.2rem -1.2rem -1.2rem -1.2rem; - transition: height 0.3s; - overflow: hidden; - background: var(--widget-details-background); + .no-issues { + height: 100%; + width: 100%; + text-align: center; + margin-top: 1.2rem; + + .no-issues-img { + display: block; + height: 120px; + margin: 0 auto; + } + + .no-issues-text { + color: var(--widget-details-color); + } + } - &.show-details { - height: 240px; - border-top: var(--widget-details-border); + .data-details { + height: 240px; + position: relative; + + :host ::ng-deep clr-datagrid { + height: 100%; + + .datagrid { + margin-top: 0; + flex-basis: 0; + border: 0; + + .datagrid-row { + border-top: none; + border-bottom: none; + } + + .datagrid-placeholder-container { + border-top: none; + } } - .no-issues { - height: 100%; - width: 100%; - text-align: center; - margin-top: 1.2rem; + .datagrid-footer { + padding: 0.1rem 0.5rem; + border-right: none; + border-left: none; + border-bottom: none; + } + } - .no-issues-img { - display: block; - height: 120px; - margin: 0 auto; - } + .data-row { + display: block; + margin-top: 0; + position: relative; + padding-left: 0.2rem; - .no-issues-text { - color: var(--widget-details-color); - } + &.clickable { + cursor: pointer; } - .data-details { - height: 240px; - position: relative; - - :host ::ng-deep clr-datagrid { - height: 100%; - - .datagrid { - margin-top: 0; - flex-basis: 0; - border: 0; - - .datagrid-row { - border-top: none; - border-bottom: none; - } - - .datagrid-placeholder-container { - border-top: none; - } - } - - .datagrid-footer { - padding: 0.1rem 0.5rem; - border-right: none; - border-left: none; - border-bottom: none; - } - } + .data-title { + line-height: 0.6rem; + font-weight: 500; + display: block; + margin-top: 0; + position: relative; - .data-row { - display: block; - margin-top: 0; - position: relative; - padding-left: 0.2rem; - - &.clickable { - cursor: pointer; - } - - .data-title { - line-height: 0.6rem; - font-weight: 500; - display: block; - margin-top: 0; - position: relative; - - .btn { - margin: 0; - } - - .title-icon { - float: left; - width: 32px; - display: flex; - justify-content: center; - - lib-status-cell { - width: 15px; - display: flex; - justify-content: center; - } - } - } - - .data-description { - display: block; - margin-top: 0; - color: var(--widget-details-color); - line-height: 1rem; - - clr-icon { - margin-top: -2px; - } - } + .btn { + margin: 0; + } + + .title-icon { + float: left; + width: 32px; + display: flex; + justify-content: center; + + lib-status-cell { + width: 15px; + display: flex; + justify-content: center; } + } + } + + .data-description { + display: block; + margin-top: 0; + color: var(--widget-details-color); + line-height: 1rem; + + clr-icon { + margin-top: -2px; + } } + } } + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/data-jobs-health-panel.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/data-jobs-health-panel.component.ts index 739644d8f0..ae85657806 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/data-jobs-health-panel.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/data-jobs-health-panel.component.ts @@ -3,257 +3,300 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core'; -import { DatePipe } from '@angular/common'; -import { ActivatedRoute } from '@angular/router'; +import { + Component, + EventEmitter, + Inject, + Input, + OnInit, + Output, +} from "@angular/core"; +import { DatePipe } from "@angular/common"; +import { ActivatedRoute } from "@angular/router"; import { - ApiPredicate, - CollectionsUtil, - ComponentModel, - ComponentService, - DESC, - ErrorRecord, - NavigationService, - OnTaurusModelChange, - OnTaurusModelError, - OnTaurusModelInit, - OnTaurusModelLoad, - RouterService, - TaurusBaseComponent -} from '@versatiledatakit/shared'; + ApiPredicate, + CollectionsUtil, + ComponentModel, + ComponentService, + DESC, + ErrorRecord, + NavigationService, + OnTaurusModelChange, + OnTaurusModelError, + OnTaurusModelInit, + OnTaurusModelLoad, + RouterService, + TaurusBaseComponent, +} from "@versatiledatakit/shared"; -import { ErrorUtil } from '../../../shared/utils'; +import { ErrorUtil } from "../../../shared/utils"; -import { DataJobsService } from '../../../services'; +import { DataJobsService } from "../../../services"; import { - DATA_PIPELINES_CONFIGS, - DataJob, - DataJobExecutionFilter, - DataJobExecutionOrder, - DataJobExecutions, - DataJobExecutionStatus, - DataJobPage, - DataPipelinesConfig, - FILTER_REQ_PARAM, - JOB_EXECUTIONS_DATA_KEY, - JOB_NAME_REQ_PARAM, - JOBS_DATA_KEY, - ORDER_REQ_PARAM, - TEAM_NAME_REQ_PARAM -} from '../../../model'; + DATA_PIPELINES_CONFIGS, + DataJob, + DataJobExecutionFilter, + DataJobExecutionOrder, + DataJobExecutions, + DataJobExecutionStatus, + DataJobPage, + DataPipelinesConfig, + FILTER_REQ_PARAM, + JOB_EXECUTIONS_DATA_KEY, + JOB_NAME_REQ_PARAM, + JOBS_DATA_KEY, + ORDER_REQ_PARAM, + TEAM_NAME_REQ_PARAM, +} from "../../../model"; -import { TASK_LOAD_JOB_EXECUTIONS, TASK_LOAD_JOBS_STATE } from '../../../state/tasks'; -import { LOAD_JOB_ERROR_CODES, LOAD_JOBS_ERROR_CODES } from '../../../state/error-codes'; +import { + TASK_LOAD_JOB_EXECUTIONS, + TASK_LOAD_JOBS_STATE, +} from "../../../state/tasks"; +import { + LOAD_JOB_ERROR_CODES, + LOAD_JOBS_ERROR_CODES, +} from "../../../state/error-codes"; -import { DataJobExecutionToGridDataJobExecution, GridDataJobExecution } from '../../data-job/pages/executions'; +import { + DataJobExecutionToGridDataJobExecution, + GridDataJobExecution, +} from "../../data-job/pages/executions"; enum State { - loading = 'loading', - ready = 'ready', - empty = 'empty', - error = 'error' + loading = "loading", + ready = "ready", + empty = "empty", + error = "error", } @Component({ - selector: 'lib-data-jobs-health-panel', - templateUrl: './data-jobs-health-panel.component.html', - styleUrls: ['./data-jobs-health-panel.component.scss'], - providers: [DatePipe] + selector: "lib-data-jobs-health-panel", + templateUrl: "./data-jobs-health-panel.component.html", + styleUrls: ["./data-jobs-health-panel.component.scss"], + providers: [DatePipe], }) export class DataJobsHealthPanelComponent - extends TaurusBaseComponent - implements OnInit, OnTaurusModelInit, OnTaurusModelLoad, OnTaurusModelChange, OnTaurusModelError + extends TaurusBaseComponent + implements + OnInit, + OnTaurusModelInit, + OnTaurusModelLoad, + OnTaurusModelChange, + OnTaurusModelError { - @Input() manageLink: string; - @Output() componentStateEvent = new EventEmitter(); + @Input() manageLink: string; + @Output() componentStateEvent = new EventEmitter(); - readonly uuid = 'DataJobsHealthPanelComponent'; + readonly uuid = "DataJobsHealthPanelComponent"; - loadingJobs = true; - loadingExecutions = true; + loadingJobs = true; + loadingExecutions = true; - teamName: string; - loading = true; - dataJobs: DataJob[]; - jobExecutions: GridDataJobExecution[] = []; + teamName: string; + loading = true; + dataJobs: DataJob[]; + jobExecutions: GridDataJobExecution[] = []; - /** - * ** Flag that indicates there is jobs executions load error. - */ - isComponentInErrorState = false; + /** + * ** Flag that indicates there is jobs executions load error. + */ + isComponentInErrorState = false; - /** - * ** Array of error code patterns that component should listen for in errors store. - */ - listenForErrorPatterns: string[] = [ - LOAD_JOB_ERROR_CODES[TASK_LOAD_JOB_EXECUTIONS].All, - LOAD_JOBS_ERROR_CODES[TASK_LOAD_JOBS_STATE].All - ]; + /** + * ** Array of error code patterns that component should listen for in errors store. + */ + listenForErrorPatterns: string[] = [ + LOAD_JOB_ERROR_CODES[TASK_LOAD_JOB_EXECUTIONS].All, + LOAD_JOBS_ERROR_CODES[TASK_LOAD_JOBS_STATE].All, + ]; - constructor( - componentService: ComponentService, - navigationService: NavigationService, - activatedRoute: ActivatedRoute, - private readonly routerService: RouterService, - private readonly dataJobsService: DataJobsService, - private readonly datePipe: DatePipe, - @Inject(DATA_PIPELINES_CONFIGS) - public readonly dataPipelinesModuleConfig: DataPipelinesConfig - ) { - super(componentService, navigationService, activatedRoute); - } + constructor( + componentService: ComponentService, + navigationService: NavigationService, + activatedRoute: ActivatedRoute, + private readonly routerService: RouterService, + private readonly dataJobsService: DataJobsService, + private readonly datePipe: DatePipe, + @Inject(DATA_PIPELINES_CONFIGS) + public readonly dataPipelinesModuleConfig: DataPipelinesConfig, + ) { + super(componentService, navigationService, activatedRoute); + } - fetchDataJobs(): void { - this.loadingJobs = true; - const filters: ApiPredicate[] = []; + fetchDataJobs(): void { + this.loadingJobs = true; + const filters: ApiPredicate[] = []; - if (this.teamName) { - filters.push({ - property: 'config.team', - pattern: this.teamName, - sort: null - }); - } - - this.dataJobsService.loadJobs( - this.model - .withRequestParam(TEAM_NAME_REQ_PARAM, 'no-team-specified') - .withRequestParam(JOB_NAME_REQ_PARAM, '') - .withFilter(filters) - .withRequestParam(ORDER_REQ_PARAM, { - property: 'startTime', - direction: DESC - }) - .withPage(1, 1000) - ); + if (this.teamName) { + filters.push({ + property: "config.team", + pattern: this.teamName, + sort: null, + }); } - fetchDataJobExecutions(): void { - this.loadingExecutions = true; - const d = new Date(); - d.setDate(d.getDate() - 1); - this.dataJobsService.loadJobExecutions( - this.model - .withRequestParam(TEAM_NAME_REQ_PARAM, 'no-team-specified') - .withRequestParam(JOB_NAME_REQ_PARAM, '') - .withRequestParam(FILTER_REQ_PARAM, { - statusIn: [DataJobExecutionStatus.USER_ERROR, DataJobExecutionStatus.PLATFORM_ERROR], - startTimeGte: d, - teamNameIn: this.teamName ? [this.teamName] : [] - } as DataJobExecutionFilter) - .withRequestParam(ORDER_REQ_PARAM, { - property: 'startTime', - direction: DESC - } as DataJobExecutionOrder) - ); - } + this.dataJobsService.loadJobs( + this.model + .withRequestParam(TEAM_NAME_REQ_PARAM, "no-team-specified") + .withRequestParam(JOB_NAME_REQ_PARAM, "") + .withFilter(filters) + .withRequestParam(ORDER_REQ_PARAM, { + property: "startTime", + direction: DESC, + }) + .withPage(1, 1000), + ); + } - /** - * @inheritDoc - */ - onModelInit(): void { - this._subscribeForTeamChange(); - this._emitNewState(); - } + fetchDataJobExecutions(): void { + this.loadingExecutions = true; + const d = new Date(); + d.setDate(d.getDate() - 1); + this.dataJobsService.loadJobExecutions( + this.model + .withRequestParam(TEAM_NAME_REQ_PARAM, "no-team-specified") + .withRequestParam(JOB_NAME_REQ_PARAM, "") + .withRequestParam(FILTER_REQ_PARAM, { + statusIn: [ + DataJobExecutionStatus.USER_ERROR, + DataJobExecutionStatus.PLATFORM_ERROR, + ], + startTimeGte: d, + teamNameIn: this.teamName ? [this.teamName] : [], + } as DataJobExecutionFilter) + .withRequestParam(ORDER_REQ_PARAM, { + property: "startTime", + direction: DESC, + } as DataJobExecutionOrder), + ); + } - /** - * @inheritDoc - */ - onModelLoad(): void { - this.loading = false; - } + /** + * @inheritDoc + */ + onModelInit(): void { + this._subscribeForTeamChange(); + this._emitNewState(); + } - /** - * @inheritDoc - */ - onModelChange(model: ComponentModel, task: string): void { - if (task === TASK_LOAD_JOB_EXECUTIONS) { - const executions: DataJobExecutions = model.getComponentState().data.get(JOB_EXECUTIONS_DATA_KEY); - if (executions) { - const remappedExecutions = DataJobExecutionToGridDataJobExecution.convertToDataJobExecution(this.datePipe)([...executions]); - this.jobExecutions = remappedExecutions.filter((ex) => ex.status !== DataJobExecutionStatus.SUCCEEDED); - this.loadingExecutions = false; - } - } else if (task === TASK_LOAD_JOBS_STATE) { - const componentState = model.getComponentState(); - const dataJobsData: DataJobPage = componentState.data.get(JOBS_DATA_KEY); + /** + * @inheritDoc + */ + onModelLoad(): void { + this.loading = false; + } - this.dataJobs = CollectionsUtil.isArray(dataJobsData?.content) ? [...dataJobsData?.content] : []; - this.loadingJobs = false; - } + /** + * @inheritDoc + */ + onModelChange(model: ComponentModel, task: string): void { + if (task === TASK_LOAD_JOB_EXECUTIONS) { + const executions: DataJobExecutions = model + .getComponentState() + .data.get(JOB_EXECUTIONS_DATA_KEY); + if (executions) { + const remappedExecutions = + DataJobExecutionToGridDataJobExecution.convertToDataJobExecution( + this.datePipe, + )([...executions]); + this.jobExecutions = remappedExecutions.filter( + (ex) => ex.status !== DataJobExecutionStatus.SUCCEEDED, + ); + this.loadingExecutions = false; + } + } else if (task === TASK_LOAD_JOBS_STATE) { + const componentState = model.getComponentState(); + const dataJobsData: DataJobPage = componentState.data.get(JOBS_DATA_KEY); - this._emitNewState(); + this.dataJobs = CollectionsUtil.isArray(dataJobsData?.content) + ? [...dataJobsData?.content] + : []; + this.loadingJobs = false; } - /** - * @inheritDoc - */ - onModelError(model: ComponentModel, task: string, newErrorRecords: ErrorRecord[]): void { - newErrorRecords.forEach((errorRecord) => { - const error = ErrorUtil.extractError(errorRecord.error); + this._emitNewState(); + } - if (task === TASK_LOAD_JOB_EXECUTIONS) { - this.jobExecutions = []; - this.loadingExecutions = false; - } else if (task === TASK_LOAD_JOBS_STATE) { - this.loadingJobs = false; - } + /** + * @inheritDoc + */ + onModelError( + model: ComponentModel, + task: string, + newErrorRecords: ErrorRecord[], + ): void { + newErrorRecords.forEach((errorRecord) => { + const error = ErrorUtil.extractError(errorRecord.error); - // don't show toast message, only log to console, logic for component is to stay hidden when there is no data are there is error + if (task === TASK_LOAD_JOB_EXECUTIONS) { + this.jobExecutions = []; + this.loadingExecutions = false; + } else if (task === TASK_LOAD_JOBS_STATE) { + this.loadingJobs = false; + } - console.error(error); - }); - } + // don't show toast message, only log to console, logic for component is to stay hidden when there is no data are there is error - /** - * @inheritDoc - */ - override ngOnInit(): void { - // attach listener to ErrorStore and listen for Errors change - this.errors.onChange((store) => { - // if there is record for listened error code patterns set component in error state - this.isComponentInErrorState = store.hasCodePattern(...this.listenForErrorPatterns); - }); + console.error(error); + }); + } - super.ngOnInit(); - } + /** + * @inheritDoc + */ + override ngOnInit(): void { + // attach listener to ErrorStore and listen for Errors change + this.errors.onChange((store) => { + // if there is record for listened error code patterns set component in error state + this.isComponentInErrorState = store.hasCodePattern( + ...this.listenForErrorPatterns, + ); + }); - private _emitNewState() { - if (this.loadingJobs || this.loadingExecutions) { - this.componentStateEvent.emit(State.loading); - } else if (this.jobExecutions.length === 0 && this.dataJobs.length === 0) { - this.componentStateEvent.emit(State.empty); - } else if (this.isComponentInErrorState) { - this.componentStateEvent.emit(State.error); - } else { - this.componentStateEvent.emit(State.ready); - } + super.ngOnInit(); + } + + private _emitNewState() { + if (this.loadingJobs || this.loadingExecutions) { + this.componentStateEvent.emit(State.loading); + } else if (this.jobExecutions.length === 0 && this.dataJobs.length === 0) { + this.componentStateEvent.emit(State.empty); + } else if (this.isComponentInErrorState) { + this.componentStateEvent.emit(State.error); + } else { + this.componentStateEvent.emit(State.ready); } + } - private _subscribeForTeamChange(): void { - if (this.dataPipelinesModuleConfig.manageConfig?.selectedTeamNameObservable) { - this.subscriptions.push( - this.dataPipelinesModuleConfig.manageConfig?.selectedTeamNameObservable.subscribe({ - next: (newTeamName: string) => { - if (newTeamName !== this.teamName) { - if (newTeamName && newTeamName !== '') { - this.teamName = newTeamName; - this.fetchDataJobExecutions(); - this.fetchDataJobs(); - } - } - }, - error: (error: unknown) => { - this.jobExecutions = []; - this.dataJobs = []; - console.error('Error loading selected team', error); - } - }) - ); - } else { - this.fetchDataJobExecutions(); - this.fetchDataJobs(); - } + private _subscribeForTeamChange(): void { + if ( + this.dataPipelinesModuleConfig.manageConfig?.selectedTeamNameObservable + ) { + this.subscriptions.push( + this.dataPipelinesModuleConfig.manageConfig?.selectedTeamNameObservable.subscribe( + { + next: (newTeamName: string) => { + if (newTeamName !== this.teamName) { + if (newTeamName && newTeamName !== "") { + this.teamName = newTeamName; + this.fetchDataJobExecutions(); + this.fetchDataJobs(); + } + } + }, + error: (error: unknown) => { + this.jobExecutions = []; + this.dataJobs = []; + console.error("Error loading selected team", error); + }, + }, + ), + ); + } else { + this.fetchDataJobExecutions(); + this.fetchDataJobs(); } + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/index.ts index 5b02377aa6..457fd0438c 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-health-panel/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-jobs-health-panel.component'; +export * from "./data-jobs-health-panel.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.html index 3610f7e8e1..50fcdb17b4 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.html @@ -4,224 +4,217 @@ -->
-
-
-

Data Jobs

-

- Data Jobs help Data Engineers develop, deploy, run, and manage - data processing workloads -

-
+
+
+

Data Jobs

+

+ Data Jobs help Data Engineers develop, deploy, run, and manage data + processing workloads +

+
-
-
-
-
- - - - Data Jobs - -
-
-
- - - - Job Executions - last 24 hours -
-
- - - - Failures - last 24 hours -
-
+
+
+
+
+ + + + Data Jobs + +
-
-
-
- -
-
- -
-
- -
-
-
+ + + + Job Executions + last 24 hours
- -
- - Manage - +
+ + + + Failures + last 24 hours
-
-
+ + -
- - - -
- {{ item.jobName }} - {{ item.startTime | date : "MMM d, y, hh:mm a" }} , - took 12min, {{ item.status }} -
- - - Coming Soon! - - - - - +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+ + Manage +
+ + + + +
+ + + +
+ {{ item.jobName }} + {{ item.startTime | date: "MMM d, y, hh:mm a" }} , took 12min, + {{ item.status }} +
+ + + Coming Soon! + + + + + +
-
- - - -
- {{ item.jobName }} - {{ item.startTime | date : "MMM d, y, hh:mm a" }} , - took 12min, {{ item.status }} -
- - - Coming Soon! +
+ + + +
+ {{ item.jobName }} + {{ item.startTime | date: "MMM d, y, hh:mm a" }} , took 12min, + {{ item.status }} +
+ + + Coming Soon! - - - - - -
+ + + + + +
-
- - Job - Schedule (in UTC) - - -
- {{ item.jobName }} -
- - - {{ item.config?.schedule?.scheduleCron | formatSchedule : - "Not scheduled" }} - - - We couldn't find any data jobs, but you can always create - one! +
+ + Job + Schedule (in UTC) + + +
+ {{ item.jobName }} +
+ + + {{ + item.config?.schedule?.scheduleCron + | formatSchedule: "Not scheduled" + }} + + + We couldn't find any data jobs, but you can always create + one! - - - - - -
+ + + + + +
-
-
- Loading ... -
+
+
+ Loading ...
+
diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.scss index 103deeb8e2..262f0a9d8f 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.scss @@ -3,261 +3,261 @@ * SPDX-License-Identifier: Apache-2.0 */ -@import 'variables.scss'; +@import "variables.scss"; ::ng-deep .fade-to-dark.dark { - .widget-card { - --label-color-error: #f27963; - --label-color-success: #5eb715; - --header-background: #28404d; - --widget-border: 1px solid #28404d; - --widget-clickable-background: #324f62; - --widget-details-background: #21333b; - --widget-details-hover-background: #1b2a32; - --widget-details-color: #b3b3b3; - --widget-details-border: 2px solid #28404d; - --widget-icon-backgound-color: #194b70; - } + .widget-card { + --label-color-error: #f27963; + --label-color-success: #5eb715; + --header-background: #28404d; + --widget-border: 1px solid #28404d; + --widget-clickable-background: #324f62; + --widget-details-background: #21333b; + --widget-details-hover-background: #1b2a32; + --widget-details-color: #b3b3b3; + --widget-details-border: 2px solid #28404d; + --widget-icon-backgound-color: #194b70; + } } .widget-card { - --label-color-error: #f35e44; - --label-color-success: #5aa220; - --header-background: #{$color-white}; - --widget-border: 1px solid #e3f5fc; - --widget-clickable-background: #e8e8e8; - --widget-details-background: #{$color-white}; - --widget-details-hover-background: #d8e3e9; - --widget-details-color: #8c8c8c; - --widget-details-border: 2px solid #e3f5fc; - --widget-icon-backgound-color: #0072a3; - - .label-error { - color: var(--label-color-error); + --label-color-error: #f35e44; + --label-color-success: #5aa220; + --header-background: #{$color-white}; + --widget-border: 1px solid #e3f5fc; + --widget-clickable-background: #e8e8e8; + --widget-details-background: #{$color-white}; + --widget-details-hover-background: #d8e3e9; + --widget-details-color: #8c8c8c; + --widget-details-border: 2px solid #e3f5fc; + --widget-icon-backgound-color: #0072a3; + + .label-error { + color: var(--label-color-error); + } + + .label-success { + color: var(--label-color-success); + } + + .widget-footer { + position: relative; + min-height: 25px; + margin: 1.3rem -1.2rem -1.2rem; + border-top: var(--widget-border); + + a { + margin: 0 0 0 0.5rem; + padding: 0px; + } + } + + .widget-header { + background: var(--header-background); + margin: -1.2rem -1.2rem 0 -1.2rem; + padding: 0.8rem; + border-radius: 0.1rem 0.1rem 0 0; + position: relative; + min-height: 96px; + + .header-title { + margin-top: 0; + font-weight: 200; + + clr-icon { + margin-top: -2px; + } } - .label-success { - color: var(--label-color-success); + p { + margin-top: 0.3rem; + line-height: 0.8rem; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; } - .widget-footer { - position: relative; - min-height: 25px; - margin: 1.3rem -1.2rem -1.2rem; - border-top: var(--widget-border); + .header-link { + position: absolute; + top: 0.4rem; + right: 0.3rem; - a { - margin: 0 0 0 0.5rem; - padding: 0px; - } + clr-icon { + margin-top: -0.1rem; + } } + } + + .widget-container { + z-index: 100; + + .widget-values { + line-height: 0.8rem; + display: grid; + grid-template: ". . ." 1fr / 1fr 1fr 1fr; + margin-left: -1.2rem; + margin-right: -1.2rem; + margin-bottom: -1.2rem; + row-gap: 1.2rem; + border-top: var(--widget-border); + + .widget-value { + display: block; + text-align: center; + background: var(--widget-details-background); - .widget-header { - background: var(--header-background); - margin: -1.2rem -1.2rem 0 -1.2rem; - padding: 0.8rem; - border-radius: 0.1rem 0.1rem 0 0; - position: relative; - min-height: 96px; + &:not(:first-child) { + border-left: var(--widget-border); + } + + &:not(:last-child) { + border-right: var(--widget-border); + } - .header-title { - margin-top: 0; - font-weight: 200; + padding: 0.6rem; - clr-icon { - margin-top: -2px; - } + .widget-title { + margin-bottom: 0.2rem; + margin-top: 0.2rem; + font-size: 1.2rem; + font-weight: 500; + display: block; } - p { - margin-top: 0.3rem; - line-height: 0.8rem; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; + .widget-text { + font-size: 0.55rem; + display: block; + line-height: 0.6rem; } - .header-link { - position: absolute; - top: 0.4rem; - right: 0.3rem; + &.widget-clickable { + cursor: pointer; - clr-icon { - margin-top: -0.1rem; - } + &:hover { + background: var(--widget-clickable-background); + } } - } - .widget-container { - z-index: 100; - - .widget-values { - line-height: 0.8rem; - display: grid; - grid-template: '. . .' 1fr / 1fr 1fr 1fr; - margin-left: -1.2rem; - margin-right: -1.2rem; - margin-bottom: -1.2rem; - row-gap: 1.2rem; - border-top: var(--widget-border); - - .widget-value { - display: block; - text-align: center; - background: var(--widget-details-background); - - &:not(:first-child) { - border-left: var(--widget-border); - } - - &:not(:last-child) { - border-right: var(--widget-border); - } - - padding: 0.6rem; - - .widget-title { - margin-bottom: 0.2rem; - margin-top: 0.2rem; - font-size: 1.2rem; - font-weight: 500; - display: block; - } - - .widget-text { - font-size: 0.55rem; - display: block; - line-height: 0.6rem; - } - - &.widget-clickable { - cursor: pointer; - - &:hover { - background: var(--widget-clickable-background); - } - } - - &.show-details { - background: var(--widget-clickable-background); - - .widget-text { - font-weight: bold; - } - - position: relative; - } - } + &.show-details { + background: var(--widget-clickable-background); + + .widget-text { + font-weight: bold; + } + + position: relative; } + } + } + } + + .widget-details { + z-index: 1; + height: 0; + margin: 1.2rem -1.2rem -1.2rem -1.2rem; + transition: height 0.3s; + overflow: hidden; + background: var(--widget-details-background); + + &.show-details { + height: 240px; + border-top: var(--widget-details-border); } - .widget-details { - z-index: 1; - height: 0; - margin: 1.2rem -1.2rem -1.2rem -1.2rem; - transition: height 0.3s; - overflow: hidden; - background: var(--widget-details-background); + .no-issues { + height: 100%; + width: 100%; + text-align: center; + margin-top: 1.2rem; + + .no-issues-img { + display: block; + height: 120px; + margin: 0 auto; + } + + .no-issues-text { + color: var(--widget-details-color); + } + } - &.show-details { - height: 240px; - border-top: var(--widget-details-border); + .data-details { + height: 240px; + position: relative; + + ::ng-deep clr-datagrid { + height: 100%; + + .datagrid { + margin-top: 0; + flex-basis: 0; + border: 0; + + .datagrid-row { + border-top: none; + border-bottom: none; + } + + .datagrid-placeholder-container { + border-top: none; + } } - .no-issues { - height: 100%; - width: 100%; - text-align: center; - margin-top: 1.2rem; + .datagrid-footer { + padding: 0.1rem 0.5rem; + border-right: none; + border-left: none; + border-bottom: none; + } + } - .no-issues-img { - display: block; - height: 120px; - margin: 0 auto; - } + .data-row { + display: block; + margin-top: 0; + position: relative; + padding-left: 0.2rem; - .no-issues-text { - color: var(--widget-details-color); - } + &.clickable { + cursor: pointer; } - .data-details { - height: 240px; - position: relative; - - ::ng-deep clr-datagrid { - height: 100%; - - .datagrid { - margin-top: 0; - flex-basis: 0; - border: 0; - - .datagrid-row { - border-top: none; - border-bottom: none; - } - - .datagrid-placeholder-container { - border-top: none; - } - } - - .datagrid-footer { - padding: 0.1rem 0.5rem; - border-right: none; - border-left: none; - border-bottom: none; - } + .data-title { + line-height: 0.6rem; + font-weight: 500; + display: block; + margin-top: 0; + position: relative; + + .btn { + margin: 0; + } + + .title-icon { + float: left; + width: 32px; + display: flex; + justify-content: center; + + lib-status-cell { + width: 15px; + display: flex; + justify-content: center; } + } + } - .data-row { - display: block; - margin-top: 0; - position: relative; - padding-left: 0.2rem; - - &.clickable { - cursor: pointer; - } - - .data-title { - line-height: 0.6rem; - font-weight: 500; - display: block; - margin-top: 0; - position: relative; - - .btn { - margin: 0; - } - - .title-icon { - float: left; - width: 32px; - display: flex; - justify-content: center; - - lib-status-cell { - width: 15px; - display: flex; - justify-content: center; - } - } - } - - .data-description { - display: block; - margin-top: 0; - color: var(--widget-details-color); - line-height: 1rem; - - clr-icon { - margin-top: -2px; - } - } - } + .data-description { + display: block; + margin-top: 0; + color: var(--widget-details-color); + line-height: 1rem; + + clr-icon { + margin-top: -2px; + } } + } } + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.spec.ts index 32960b965f..7fa3137e88 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.spec.ts @@ -3,112 +3,122 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { of, throwError } from 'rxjs'; - -import { ErrorHandlerService } from '@versatiledatakit/shared'; - -import { FormatSchedulePipe } from '../../shared/pipes'; - -import { DataJobsApiService } from '../../services'; - -import { DataJobsWidgetOneComponent, WidgetTab } from './data-jobs-widget-one.component'; - -describe('DataJobsWidgetOneComponent', () => { - let errorHandlerServiceStub: jasmine.SpyObj; - - let component: DataJobsWidgetOneComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - // mock service - const dataJobsServiceStub = () => ({ - getJobs: () => - of({ - data: { - totalItems: 1, - totalPages: 11, - content: [ - { - jobName: 'test-job', - item: { - config: { - schedule: { - scheduleCron: '*/5 * * * *' - } - } - } - } - ] - } - }) - }); - errorHandlerServiceStub = jasmine.createSpyObj('errorHandlerService', ['processError', 'handleError']); - - await TestBed.configureTestingModule({ - declarations: [DataJobsWidgetOneComponent, FormatSchedulePipe], - providers: [ - { - provide: DataJobsApiService, - useFactory: dataJobsServiceStub +import { ComponentFixture, TestBed } from "@angular/core/testing"; +import { of, throwError } from "rxjs"; + +import { ErrorHandlerService } from "@versatiledatakit/shared"; + +import { FormatSchedulePipe } from "../../shared/pipes"; + +import { DataJobsApiService } from "../../services"; + +import { + DataJobsWidgetOneComponent, + WidgetTab, +} from "./data-jobs-widget-one.component"; + +describe("DataJobsWidgetOneComponent", () => { + let errorHandlerServiceStub: jasmine.SpyObj; + + let component: DataJobsWidgetOneComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + // mock service + const dataJobsServiceStub = () => ({ + getJobs: () => + of({ + data: { + totalItems: 1, + totalPages: 11, + content: [ + { + jobName: "test-job", + item: { + config: { + schedule: { + scheduleCron: "*/5 * * * *", + }, + }, }, - { - provide: ErrorHandlerService, - useValue: errorHandlerServiceStub - } - ] - }).compileComponents(); + }, + ], + }, + }), }); - - beforeEach(() => { - fixture = TestBed.createComponent(DataJobsWidgetOneComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('can load instance', () => { - expect(component).toBeTruthy(); + errorHandlerServiceStub = jasmine.createSpyObj( + "errorHandlerService", + ["processError", "handleError"], + ); + + await TestBed.configureTestingModule({ + declarations: [DataJobsWidgetOneComponent, FormatSchedulePipe], + providers: [ + { + provide: DataJobsApiService, + useFactory: dataJobsServiceStub, + }, + { + provide: ErrorHandlerService, + useValue: errorHandlerServiceStub, + }, + ], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(DataJobsWidgetOneComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it("can load instance", () => { + expect(component).toBeTruthy(); + }); + + describe("ngOnInit", () => { + it("make expected calls", () => { + const dataJobsServiceStub: DataJobsApiService = + fixture.debugElement.injector.get(DataJobsApiService); + spyOn(dataJobsServiceStub, "getJobs").and.callThrough(); + component.ngOnInit(); + expect(dataJobsServiceStub.getJobs).toHaveBeenCalled(); + + // TODO: make expected calls to executions & failures }); + }); - describe('ngOnInit', () => { - it('make expected calls', () => { - const dataJobsServiceStub: DataJobsApiService = fixture.debugElement.injector.get(DataJobsApiService); - spyOn(dataJobsServiceStub, 'getJobs').and.callThrough(); - component.ngOnInit(); - expect(dataJobsServiceStub.getJobs).toHaveBeenCalled(); - - // TODO: make expected calls to executions & failures - }); + describe("switchTab", () => { + it("switch to expected tab", () => { + component.switchTab(WidgetTab.EXECUTIONS); + expect(component.selectedTab).toEqual(WidgetTab.EXECUTIONS); + expect(component.currentPage).toEqual(1); }); - describe('switchTab', () => { - it('switch to expected tab', () => { - component.switchTab(WidgetTab.EXECUTIONS); - expect(component.selectedTab).toEqual(WidgetTab.EXECUTIONS); - expect(component.currentPage).toEqual(1); - }); - - it('collapse panel when click the same selected tab', () => { - component.switchTab(WidgetTab.EXECUTIONS); - component.switchTab(WidgetTab.EXECUTIONS); - expect(component.selectedTab).toEqual(WidgetTab.NONE); - }); + it("collapse panel when click the same selected tab", () => { + component.switchTab(WidgetTab.EXECUTIONS); + component.switchTab(WidgetTab.EXECUTIONS); + expect(component.selectedTab).toEqual(WidgetTab.NONE); }); + }); - describe('handle errors', () => { - it('should catch error when API fails', () => { - expect(component.errorJobs).toEqual(false); - const dataJobsServiceStub: DataJobsApiService = fixture.debugElement.injector.get(DataJobsApiService); - spyOn(dataJobsServiceStub, 'getJobs').and.returnValue(throwError(() => true)); - component.refresh(1, WidgetTab.DATAJOBS); + describe("handle errors", () => { + it("should catch error when API fails", () => { + expect(component.errorJobs).toEqual(false); + const dataJobsServiceStub: DataJobsApiService = + fixture.debugElement.injector.get(DataJobsApiService); + spyOn(dataJobsServiceStub, "getJobs").and.returnValue( + throwError(() => true), + ); + component.refresh(1, WidgetTab.DATAJOBS); - component.jobs$.subscribe(); - component.executions$.subscribe(); - component.failures$.subscribe(); + component.jobs$.subscribe(); + component.executions$.subscribe(); + component.failures$.subscribe(); - expect(component.errorJobs).toEqual(true); + expect(component.errorJobs).toEqual(true); - // TODO: handle errors for executions & failures - }); + // TODO: handle errors for executions & failures }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.ts index 1f1f4c1be3..405914130b 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/data-jobs-widget-one.component.ts @@ -3,189 +3,195 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Component, HostListener, Input, OnInit } from '@angular/core'; +import { Component, HostListener, Input, OnInit } from "@angular/core"; -import { Observable, of, throwError } from 'rxjs'; -import { catchError, delay, map } from 'rxjs/operators'; +import { Observable, of, throwError } from "rxjs"; +import { catchError, delay, map } from "rxjs/operators"; -import { ErrorHandlerService } from '@versatiledatakit/shared'; +import { ErrorHandlerService } from "@versatiledatakit/shared"; -import { ErrorUtil } from '../../shared/utils'; +import { ErrorUtil } from "../../shared/utils"; -import { DataJobExecutionStatus, DataJobPage } from '../../model'; +import { DataJobExecutionStatus, DataJobPage } from "../../model"; -import { DataJobsApiService } from '../../services'; +import { DataJobsApiService } from "../../services"; export enum WidgetTab { - /* eslint-disable-next-line @typescript-eslint/naming-convention */ - DATAJOBS, - /* eslint-disable-next-line @typescript-eslint/naming-convention */ - EXECUTIONS, - /* eslint-disable-next-line @typescript-eslint/naming-convention */ - FAILURES, - /* eslint-disable-next-line @typescript-eslint/naming-convention */ - NONE + /* eslint-disable-next-line @typescript-eslint/naming-convention */ + DATAJOBS, + /* eslint-disable-next-line @typescript-eslint/naming-convention */ + EXECUTIONS, + /* eslint-disable-next-line @typescript-eslint/naming-convention */ + FAILURES, + /* eslint-disable-next-line @typescript-eslint/naming-convention */ + NONE, } // TODO: Remove when consume data from API const executionsMock = [ - { - jobName: 'data-job-1', - status: DataJobExecutionStatus.FINISHED, - startTime: Date.now(), - endTime: Date.now(), - startedBy: 'auserov' - }, - { - jobName: 'data-job-2', - status: DataJobExecutionStatus.FAILED, - startTime: Date.now(), - endTime: Date.now(), - startedBy: 'buserov' - }, - { - jobName: 'data-job-3', - status: DataJobExecutionStatus.FINISHED, - startTime: Date.now(), - endTime: Date.now(), - startedBy: 'cuserov' - }, - { - jobName: 'data-job-long-name-test-1', - status: DataJobExecutionStatus.FINISHED, - startTime: Date.now(), - endTime: Date.now(), - startedBy: 'duserov' - }, - { - jobName: 'data-job-long-name-test-2', - status: DataJobExecutionStatus.FAILED, - startTime: Date.now(), - endTime: Date.now(), - startedBy: 'euserov' - }, - { - jobName: 'data-job-long-name-test-3', - status: DataJobExecutionStatus.SUBMITTED, - startTime: Date.now(), - endTime: Date.now(), - startedBy: 'fuserov' - }, - { - jobName: 'data-job-long-name-test-4', - status: DataJobExecutionStatus.PLATFORM_ERROR, - startTime: Date.now(), - endTime: Date.now(), - startedBy: 'guserov' - }, - { - jobName: 'data-job-long-name-test-5', - status: DataJobExecutionStatus.USER_ERROR, - startTime: Date.now(), - endTime: Date.now(), - startedBy: 'huserov' - }, - { - jobName: 'data-job-a-very-long-name-listed-here-test-1', - status: DataJobExecutionStatus.FINISHED, - startTime: Date.now(), - endTime: Date.now(), - startedBy: 'fuserov' - } + { + jobName: "data-job-1", + status: DataJobExecutionStatus.FINISHED, + startTime: Date.now(), + endTime: Date.now(), + startedBy: "auserov", + }, + { + jobName: "data-job-2", + status: DataJobExecutionStatus.FAILED, + startTime: Date.now(), + endTime: Date.now(), + startedBy: "buserov", + }, + { + jobName: "data-job-3", + status: DataJobExecutionStatus.FINISHED, + startTime: Date.now(), + endTime: Date.now(), + startedBy: "cuserov", + }, + { + jobName: "data-job-long-name-test-1", + status: DataJobExecutionStatus.FINISHED, + startTime: Date.now(), + endTime: Date.now(), + startedBy: "duserov", + }, + { + jobName: "data-job-long-name-test-2", + status: DataJobExecutionStatus.FAILED, + startTime: Date.now(), + endTime: Date.now(), + startedBy: "euserov", + }, + { + jobName: "data-job-long-name-test-3", + status: DataJobExecutionStatus.SUBMITTED, + startTime: Date.now(), + endTime: Date.now(), + startedBy: "fuserov", + }, + { + jobName: "data-job-long-name-test-4", + status: DataJobExecutionStatus.PLATFORM_ERROR, + startTime: Date.now(), + endTime: Date.now(), + startedBy: "guserov", + }, + { + jobName: "data-job-long-name-test-5", + status: DataJobExecutionStatus.USER_ERROR, + startTime: Date.now(), + endTime: Date.now(), + startedBy: "huserov", + }, + { + jobName: "data-job-a-very-long-name-listed-here-test-1", + status: DataJobExecutionStatus.FINISHED, + startTime: Date.now(), + endTime: Date.now(), + startedBy: "fuserov", + }, ]; @Component({ - selector: 'lib-data-jobs-widget-one', - templateUrl: './data-jobs-widget-one.component.html', - styleUrls: ['./data-jobs-widget-one.component.scss', './widget.scss'] + selector: "lib-data-jobs-widget-one", + templateUrl: "./data-jobs-widget-one.component.html", + styleUrls: ["./data-jobs-widget-one.component.scss", "./widget.scss"], }) export class DataJobsWidgetOneComponent implements OnInit { - @Input() manageLink: string; - - selectedTab: WidgetTab = WidgetTab.DATAJOBS; - jobs$: Observable; - /* eslint-disable @typescript-eslint/no-explicit-any */ - executions$: Observable; - failures$: Observable; - /* eslint-enable @typescript-eslint/no-explicit-any */ - widgetTab = WidgetTab; - pageSize = 25; - currentPage = 1; - - errorJobs: boolean; - - constructor( - private readonly dataJobsService: DataJobsApiService, - private readonly errorHandlerService: ErrorHandlerService - ) {} - - @HostListener('window:resize') - onWindowResize() { - // Listener was needed because ChangeDetection cycle doesn't run for Component on "window resize event" - // and doesn't update the data grid column width as expected, - // so only solution was to add dummy listener for window:resize which triggers ChangeDetection cycle inside the Component. - // No-op! Updates the component when the window resizes. This is used for resizing the data grid columns. - } - - ngOnInit() { - this.refreshAll(); - } - - refreshAll() { - this.refresh(this.currentPage, WidgetTab.DATAJOBS); - this.refresh(this.currentPage, WidgetTab.EXECUTIONS); - this.refresh(this.currentPage, WidgetTab.FAILURES); - } - - switchTab(tab: WidgetTab) { - this.selectedTab = this.selectedTab !== tab ? tab : WidgetTab.NONE; - this.currentPage = 1; - } - - refresh(currentPage: number, tab: WidgetTab) { - this.currentPage = currentPage; - - switch (tab) { - case WidgetTab.DATAJOBS: - this.errorJobs = false; - this.jobs$ = this.dataJobsService.getJobs([], '', this.currentPage, this.pageSize).pipe( - map((result) => result?.data), - catchError((error: unknown) => { - this.errorJobs = !!error; - - this.errorHandlerService.processError(ErrorUtil.extractError(error as Error)); - - return throwError(() => error); - }) - ); - break; - case WidgetTab.EXECUTIONS: - // TODO: Consume data from API - this.executions$ = of({ - data: { - totalItems: 0, - totalPages: executionsMock.length / this.pageSize, - content: [] - } - }).pipe( - map((result) => result?.data), - delay(1200) // TODO: Remove delay when consume data from API - ); - break; - case WidgetTab.FAILURES: - // TODO: Consume data from API - const failuresMock = executionsMock.filter((e) => e.status === DataJobExecutionStatus.FAILED); - this.failures$ = of({ - data: { - totalItems: 0, - totalPages: failuresMock.length / this.pageSize, - content: [] - } - }).pipe( - map((result) => result?.data), - delay(1800) // TODO: Remove delay when consume data from API - ); - break; - } + @Input() manageLink: string; + + selectedTab: WidgetTab = WidgetTab.DATAJOBS; + jobs$: Observable; + /* eslint-disable @typescript-eslint/no-explicit-any */ + executions$: Observable; + failures$: Observable; + /* eslint-enable @typescript-eslint/no-explicit-any */ + widgetTab = WidgetTab; + pageSize = 25; + currentPage = 1; + + errorJobs: boolean; + + constructor( + private readonly dataJobsService: DataJobsApiService, + private readonly errorHandlerService: ErrorHandlerService, + ) {} + + @HostListener("window:resize") + onWindowResize() { + // Listener was needed because ChangeDetection cycle doesn't run for Component on "window resize event" + // and doesn't update the data grid column width as expected, + // so only solution was to add dummy listener for window:resize which triggers ChangeDetection cycle inside the Component. + // No-op! Updates the component when the window resizes. This is used for resizing the data grid columns. + } + + ngOnInit() { + this.refreshAll(); + } + + refreshAll() { + this.refresh(this.currentPage, WidgetTab.DATAJOBS); + this.refresh(this.currentPage, WidgetTab.EXECUTIONS); + this.refresh(this.currentPage, WidgetTab.FAILURES); + } + + switchTab(tab: WidgetTab) { + this.selectedTab = this.selectedTab !== tab ? tab : WidgetTab.NONE; + this.currentPage = 1; + } + + refresh(currentPage: number, tab: WidgetTab) { + this.currentPage = currentPage; + + switch (tab) { + case WidgetTab.DATAJOBS: + this.errorJobs = false; + this.jobs$ = this.dataJobsService + .getJobs([], "", this.currentPage, this.pageSize) + .pipe( + map((result) => result?.data), + catchError((error: unknown) => { + this.errorJobs = !!error; + + this.errorHandlerService.processError( + ErrorUtil.extractError(error as Error), + ); + + return throwError(() => error); + }), + ); + break; + case WidgetTab.EXECUTIONS: + // TODO: Consume data from API + this.executions$ = of({ + data: { + totalItems: 0, + totalPages: executionsMock.length / this.pageSize, + content: [], + }, + }).pipe( + map((result) => result?.data), + delay(1200), // TODO: Remove delay when consume data from API + ); + break; + case WidgetTab.FAILURES: + // TODO: Consume data from API + const failuresMock = executionsMock.filter( + (e) => e.status === DataJobExecutionStatus.FAILED, + ); + this.failures$ = of({ + data: { + totalItems: 0, + totalPages: failuresMock.length / this.pageSize, + content: [], + }, + }).pipe( + map((result) => result?.data), + delay(1800), // TODO: Remove delay when consume data from API + ); + break; } + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/index.ts index c1226f2ade..efd7ea24b2 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/index.ts @@ -3,8 +3,8 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-jobs-widget-one.component'; -export * from './data-jobs-executions-widget'; -export * from './data-jobs-failed-widget'; -export * from './data-jobs-health-panel'; -export * from './widget-execution-status-gauge'; +export * from "./data-jobs-widget-one.component"; +export * from "./data-jobs-executions-widget"; +export * from "./data-jobs-failed-widget"; +export * from "./data-jobs-health-panel"; +export * from "./widget-execution-status-gauge"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/public-api.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/public-api.ts index 27de297bf0..bdbc0b3e91 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/public-api.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/public-api.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './index'; +export * from "./index"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/index.ts index 042bad11c9..e9d17df97e 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './widget-execution-status-gauge.component'; +export * from "./widget-execution-status-gauge.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/widget-execution-status-gauge.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/widget-execution-status-gauge.component.html index d555f782a7..5301ca18ed 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/widget-execution-status-gauge.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/widget-execution-status-gauge.component.html @@ -4,65 +4,63 @@ -->
-
-
- -
Job Executions
-
-
Success Rate
-
- - -

- Success rate is calculated from all executions - from the last 14 days (up to 336 for each job) -

- - -
-
-
- {{ successRate | percent }} -
-
- {{ failedExecutions }} failed -
-
- {{ totalExecutions }} total -
-
-
-
- - -
+
+
+ +
Job Executions
+
+
Success Rate
+
+ + +

+ Success rate is calculated from all executions from the last 14 + days (up to 336 for each job) +

+ +
+
+
+ {{ successRate | percent }} +
+
+ {{ failedExecutions }} failed +
+
+ {{ totalExecutions }} total +
+
+
+
+ + +
+
-
- -
+
+ +
diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/widget-execution-status-gauge.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/widget-execution-status-gauge.component.scss index 7a3b9ce1ac..76492a2dce 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/widget-execution-status-gauge.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/widget-execution-status-gauge.component.scss @@ -25,27 +25,27 @@ $xxl-min-width: 1919px; $min-el-size: 310px; .medium-and-up { - @media screen and (max-width: $medium-width2) { - display: none !important; - } + @media screen and (max-width: $medium-width2) { + display: none !important; + } } .small-and-up { - @media screen and (max-width: $xs-max) { - display: none !important; - } + @media screen and (max-width: $xs-max) { + display: none !important; + } } .medium-and-down { - @media screen and (min-width: $medium-width) { - display: none !important; - } + @media screen and (min-width: $medium-width) { + display: none !important; + } } .small-and-down { - @media screen and (min-width: $small-width) { - display: none !important; - } + @media screen and (min-width: $small-width) { + display: none !important; + } } $gray1: #747474; @@ -91,503 +91,515 @@ $xs-width: 130px; $red: rgb(194, 84, 0); ::ng-deep .dark lib-widget-execution-status-gauge { - .gauge-container { - margin-top: 50px; - .gauge-meta .value-percent { - //color: $lightblue !important; - } + .gauge-container { + margin-top: 50px; + .gauge-meta .value-percent { + //color: $lightblue !important; + } - svg.ngx-charts g[ngx-charts-pie-arc]:not(.background-arc) > g.arc-group > path.arc { - //fill: $lightblue !important; - } + svg.ngx-charts + g[ngx-charts-pie-arc]:not(.background-arc) + > g.arc-group + > path.arc { + //fill: $lightblue !important; + } - svg.ngx-charts g[ngx-charts-pie-arc].background-arc > g.arc-group > path.arc { - fill: rgba(0, 0, 0, 0.25); - } + svg.ngx-charts + g[ngx-charts-pie-arc].background-arc + > g.arc-group + > path.arc { + fill: rgba(0, 0, 0, 0.25); } + } } ::ng-deep .dark vmw-gauge { - .gauge-container.above-threshold { - .gauge-meta .value-percent { - color: $red !important; - } + .gauge-container.above-threshold { + .gauge-meta .value-percent { + color: $red !important; + } - svg.ngx-charts g[ngx-charts-pie-arc]:not(.background-arc) > g.arc-group > path.arc { - fill: $red !important; - } + svg.ngx-charts + g[ngx-charts-pie-arc]:not(.background-arc) + > g.arc-group + > path.arc { + fill: $red !important; + } - svg.ngx-charts g[ngx-charts-pie-arc].background-arc > g.arc-group > path.arc { - fill: rgba(0, 0, 0, 0.25); - } + svg.ngx-charts + g[ngx-charts-pie-arc].background-arc + > g.arc-group + > path.arc { + fill: rgba(0, 0, 0, 0.25); } + } } ::ng-deep lib-widget-execution-status-gauge { - svg.ngx-charts { - margin: -$chart-margin; + svg.ngx-charts { + margin: -$chart-margin; - g text { - display: none; - } + g text { + display: none; + } - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.1); - opacity: 0.3; + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.1); + opacity: 0.3; - g.background-arc { - display: none; - } - } + g.background-arc { + display: none; } + } } + } - .above-threshold svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.05); - } - } + .above-threshold svg.ngx-charts { + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.05); + } } + } } .gauge-container { - padding: 0; - height: $xl-width - 2 * $chart-margin; - width: $xl-width - 2 * $chart-margin; - position: relative; - margin-top: 50px; - margin-left: auto; - margin-right: auto; - .gauge-chart-container { - width: inherit; - height: inherit; - overflow: hidden; + padding: 0; + height: $xl-width - 2 * $chart-margin; + width: $xl-width - 2 * $chart-margin; + position: relative; + margin-top: 50px; + margin-left: auto; + margin-right: auto; + .gauge-chart-container { + width: inherit; + height: inherit; + overflow: hidden; + } + + .gauge-chart { + height: $xl-width; + width: $xl-width; + margin: 0 auto; + } + + &.above-threshold { + .gauge-meta .value-percent { + color: $red; + } + } + + .gauge-meta { + text-align: center; + position: absolute; + width: inherit; + z-index: 1; + + // integrators can use whatever tag they like for the title, e.g. + // h4 if they want screen readers to notice the gauge as a title, + // or span if they do not. + ::ng-deep .gauge-title { + display: block; + font-size: 19px; + margin-top: 40px; } - .gauge-chart { - height: $xl-width; - width: $xl-width; - margin: 0 auto; + .value-percent { + color: $darkblue; + margin-top: 15px; + margin-bottom: 23px; + font-size: 42.5px; } - &.above-threshold { - .gauge-meta .value-percent { - color: $red; - } + .value-current { + font-size: 16px; } - .gauge-meta { - text-align: center; - position: absolute; - width: inherit; - z-index: 1; - - // integrators can use whatever tag they like for the title, e.g. - // h4 if they want screen readers to notice the gauge as a title, - // or span if they do not. - ::ng-deep .gauge-title { - display: block; - font-size: 19px; - margin-top: 40px; - } + .value-limit { + font-size: 14px; + color: #9a9a9a; + margin-top: 0px; + } + } +} - .value-percent { - color: $darkblue; - margin-top: 15px; - margin-bottom: 23px; - font-size: 42.5px; - } +.large { + &.gauge-container { + height: $lg-width - 2 * $chart-margin + 10px; + width: $lg-width - 2 * $chart-margin; + } - .value-current { - font-size: 16px; - } + .gauge-chart { + height: $lg-width; + width: $lg-width; + } - .value-limit { - font-size: 14px; - color: #9a9a9a; - margin-top: 0px; - } + .gauge-meta { + .value-limit { + margin-top: 0; + } + } + + ::ng-deep &.above-threshold svg.ngx-charts { + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.07) !important; + } + } + } + + ::ng-deep svg.ngx-charts { + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.12); + } } + } } -.large { +@media (min-width: $large-min) and (max-width: $large-width) { + .auto { &.gauge-container { - height: $lg-width - 2 * $chart-margin + 10px; - width: $lg-width - 2 * $chart-margin; + height: $lg-width - 2 * $chart-margin + 10px; + width: $lg-width - 2 * $chart-margin; } .gauge-chart { - height: $lg-width; - width: $lg-width; + height: $lg-width; + width: $lg-width; } .gauge-meta { - .value-limit { - margin-top: 0; - } + .value-limit { + margin-top: 0; + } } ::ng-deep &.above-threshold svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.07) !important; - } + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.07) !important; } + } } ::ng-deep svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.12); - } + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.12); } + } } + } } -@media (min-width: $large-min) and (max-width: $large-width) { - .auto { - &.gauge-container { - height: $lg-width - 2 * $chart-margin + 10px; - width: $lg-width - 2 * $chart-margin; - } +.medium { + &.gauge-container { + height: $med-width - 2 * $chart-margin + 10px; + width: $med-width - 2 * $chart-margin; + } - .gauge-chart { - height: $lg-width; - width: $lg-width; - } + .gauge-chart { + height: $med-width; + width: $med-width; + } - .gauge-meta { - .value-limit { - margin-top: 0; - } - } + .gauge-meta { + ::ng-deep .gauge-title { + font-size: 20px; + margin-top: 28px; + } - ::ng-deep &.above-threshold svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.07) !important; - } - } - } + .value-percent { + margin: 10px 0; + font-size: 26px; + } - ::ng-deep svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.12); - } - } - } + .value-current { + font-size: 16px; + } + + .value-limit { + font-size: 13px; + margin-top: 0; + } + } + + ::ng-deep &.above-threshold svg.ngx-charts { + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.09) !important; + } + } + } + + ::ng-deep svg.ngx-charts { + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.16); + } } + } } -.medium { +@media (min-width: $medium-min) and (max-width: $medium-width) { + .auto { &.gauge-container { - height: $med-width - 2 * $chart-margin + 10px; - width: $med-width - 2 * $chart-margin; + height: $med-width - 2 * $chart-margin + 10px; + width: $med-width - 2 * $chart-margin; } .gauge-chart { - height: $med-width; - width: $med-width; + height: $med-width; + width: $med-width; } .gauge-meta { - ::ng-deep .gauge-title { - font-size: 20px; - margin-top: 28px; - } + ::ng-deep .gauge-title { + font-size: 20px; + margin-top: 28px; + } - .value-percent { - margin: 10px 0; - font-size: 26px; - } + .value-percent { + margin: 10px 0; + font-size: 26px; + } - .value-current { - font-size: 16px; - } + .value-current { + font-size: 16px; + } - .value-limit { - font-size: 13px; - margin-top: 0; - } + .value-limit { + font-size: 13px; + margin-top: 0; + } } ::ng-deep &.above-threshold svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.09) !important; - } + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.09) !important; } + } } ::ng-deep svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.16); - } + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.16); } + } } + } } -@media (min-width: $medium-min) and (max-width: $medium-width) { - .auto { - &.gauge-container { - height: $med-width - 2 * $chart-margin + 10px; - width: $med-width - 2 * $chart-margin; - } +.small { + &.gauge-container { + height: $sm-width - 2 * $chart-margin + 10px; + width: $sm-width - 2 * $chart-margin; + } - .gauge-chart { - height: $med-width; - width: $med-width; - } + .gauge-chart { + height: $sm-width; + width: $sm-width; + } - .gauge-meta { - ::ng-deep .gauge-title { - font-size: 20px; - margin-top: 28px; - } - - .value-percent { - margin: 10px 0; - font-size: 26px; - } - - .value-current { - font-size: 16px; - } - - .value-limit { - font-size: 13px; - margin-top: 0; - } - } + .gauge-meta { + ::ng-deep .gauge-title { + font-size: 17px; + margin-top: 26px; + } - ::ng-deep &.above-threshold svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.09) !important; - } - } - } + .value-percent { + margin: 0; + font-size: 18.5px; + } - ::ng-deep svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.16); - } - } - } + .value-current { + font-size: 14px; + } + + .value-limit { + font-size: 10px; + margin-top: 0; + } + } + + ::ng-deep &.above-threshold svg.ngx-charts { + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.1) !important; + } + } + } + + ::ng-deep svg.ngx-charts { + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.2); + } } + } } -.small { +@media (min-width: $small-min) and (max-width: $small-max) { + .auto { &.gauge-container { - height: $sm-width - 2 * $chart-margin + 10px; - width: $sm-width - 2 * $chart-margin; + height: $sm-width - 2 * $chart-margin + 10px; + width: $sm-width - 2 * $chart-margin; } .gauge-chart { - height: $sm-width; - width: $sm-width; + height: $sm-width; + width: $sm-width; } .gauge-meta { - ::ng-deep .gauge-title { - font-size: 17px; - margin-top: 26px; - } + ::ng-deep .gauge-title { + font-size: 17px; + margin-top: 26px; + } - .value-percent { - margin: 0; - font-size: 18.5px; - } + .value-percent { + margin: 0; + font-size: 18.5px; + } - .value-current { - font-size: 14px; - } + .value-current { + font-size: 14px; + } - .value-limit { - font-size: 10px; - margin-top: 0; - } + .value-limit { + font-size: 10px; + margin-top: 0; + } } ::ng-deep &.above-threshold svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.1) !important; - } + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.1) !important; } + } } ::ng-deep svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.2); - } + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.2); } + } } + } } -@media (min-width: $small-min) and (max-width: $small-max) { - .auto { - &.gauge-container { - height: $sm-width - 2 * $chart-margin + 10px; - width: $sm-width - 2 * $chart-margin; - } +.xs { + &.gauge-container { + height: $xs-width - 2 * $chart-margin + 10px; + width: $xs-width - 2 * $chart-margin; + } - .gauge-chart { - height: $sm-width; - width: $sm-width; - } + .gauge-chart { + height: $xs-width; + width: $xs-width; + } - .gauge-meta { - ::ng-deep .gauge-title { - font-size: 17px; - margin-top: 26px; - } - - .value-percent { - margin: 0; - font-size: 18.5px; - } - - .value-current { - font-size: 14px; - } - - .value-limit { - font-size: 10px; - margin-top: 0; - } - } + .gauge-meta { + .value-current, + .value-limit { + display: none; + } - ::ng-deep &.above-threshold svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.1) !important; - } - } - } + ::ng-deep .gauge-title { + width: inherit; + font-size: 14px; + margin-top: 14px; + } - ::ng-deep svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.2); - } - } - } + .value-percent { + margin-top: 0px; + font-size: 18.5px; } + } + + ::ng-deep &.above-threshold svg.ngx-charts { + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.15) !important; + } + } + } + + ::ng-deep svg.ngx-charts { + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.31); + } + } + } } -.xs { +@media (max-width: $xs-max) { + .auto { &.gauge-container { - height: $xs-width - 2 * $chart-margin + 10px; - width: $xs-width - 2 * $chart-margin; + height: $xs-width - 2 * $chart-margin + 10px; + width: $xs-width - 2 * $chart-margin; } .gauge-chart { - height: $xs-width; - width: $xs-width; + height: $xs-width; + width: $xs-width; } .gauge-meta { - .value-current, - .value-limit { - display: none; - } - - ::ng-deep .gauge-title { - width: inherit; - font-size: 14px; - margin-top: 14px; - } - - .value-percent { - margin-top: 0px; - font-size: 18.5px; - } + .value-current, + .value-limit { + display: none; + } + + ::ng-deep .gauge-title { + width: 100%; + font-size: 14px; + margin-top: 14px; + } + + .value-percent { + margin-top: 0px; + font-size: 18.5px; + } } ::ng-deep &.above-threshold svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.15) !important; - } + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.15) !important; } + } } ::ng-deep svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.31); - } - } - } -} - -@media (max-width: $xs-max) { - .auto { - &.gauge-container { - height: $xs-width - 2 * $chart-margin + 10px; - width: $xs-width - 2 * $chart-margin; - } - - .gauge-chart { - height: $xs-width; - width: $xs-width; - } - - .gauge-meta { - .value-current, - .value-limit { - display: none; - } - - ::ng-deep .gauge-title { - width: 100%; - font-size: 14px; - margin-top: 14px; - } - - .value-percent { - margin-top: 0px; - font-size: 18.5px; - } - } - - ::ng-deep &.above-threshold svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.15) !important; - } - } - } - - ::ng-deep svg.ngx-charts { - g.gauge { - > g:nth-child(2) { - transform: rotate(225deg) scale(1.31); - } - } + g.gauge { + > g:nth-child(2) { + transform: rotate(225deg) scale(1.31); } + } } + } } .centered { - text-align: center; - margin-top: 100px; + text-align: center; + margin-top: 100px; } .success-rate-container { - display: flex; - justify-content: center; - align-items: center; - - .success-rate-info-panel { - font-size: small; - margin-top: 0px; - } + display: flex; + justify-content: center; + align-items: center; + + .success-rate-info-panel { + font-size: small; + margin-top: 0px; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/widget-execution-status-gauge.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/widget-execution-status-gauge.component.ts index 9232ed2047..2051f0f731 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/widget-execution-status-gauge.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget-execution-status-gauge/widget-execution-status-gauge.component.ts @@ -3,46 +3,47 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Component, Input, OnChanges, SimpleChanges } from '@angular/core'; +import { Component, Input, OnChanges, SimpleChanges } from "@angular/core"; -import { DataJob } from '../../../model'; +import { DataJob } from "../../../model"; @Component({ - selector: 'lib-widget-execution-status-gauge', - templateUrl: './widget-execution-status-gauge.component.html', - styleUrls: ['./widget-execution-status-gauge.component.scss'] + selector: "lib-widget-execution-status-gauge", + templateUrl: "./widget-execution-status-gauge.component.html", + styleUrls: ["./widget-execution-status-gauge.component.scss"], }) export class WidgetExecutionStatusGaugeComponent implements OnChanges { - @Input() allJobs: DataJob[]; - failedExecutions: number; - successfulExecutions: number; - totalExecutions: number; - successRate: number; - loading = true; + @Input() allJobs: DataJob[]; + failedExecutions: number; + successfulExecutions: number; + totalExecutions: number; + successRate: number; + loading = true; - ngOnChanges(changes: SimpleChanges) { - if (changes['allJobs'].currentValue) { - this.failedExecutions = 0; - this.successfulExecutions = 0; - (changes['allJobs'].currentValue as DataJob[]).forEach((dataJob) => { - if (dataJob.deployments) { - this.failedExecutions += dataJob.deployments[0].failedExecutions; - this.successfulExecutions += dataJob.deployments[0].successfulExecutions; - } - }); - this.totalExecutions = this.failedExecutions + this.successfulExecutions; - this.successRate = this.successfulExecutions / this.totalExecutions; - this.loading = false; + ngOnChanges(changes: SimpleChanges) { + if (changes["allJobs"].currentValue) { + this.failedExecutions = 0; + this.successfulExecutions = 0; + (changes["allJobs"].currentValue as DataJob[]).forEach((dataJob) => { + if (dataJob.deployments) { + this.failedExecutions += dataJob.deployments[0].failedExecutions; + this.successfulExecutions += + dataJob.deployments[0].successfulExecutions; } + }); + this.totalExecutions = this.failedExecutions + this.successfulExecutions; + this.successRate = this.successfulExecutions / this.totalExecutions; + this.loading = false; } + } - customColors(name) { - if (name >= 95) { - return '#5AA220'; - } else if (name >= 90) { - return '#EFC006'; - } else { - return '#F35E44'; - } + customColors(name) { + if (name >= 95) { + return "#5AA220"; + } else if (name >= 90) { + return "#EFC006"; + } else { + return "#F35E44"; } + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget.scss index 5025b90d64..7a122bf804 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/components/widgets/widget.scss @@ -3,21 +3,21 @@ * SPDX-License-Identifier: Apache-2.0 */ -@import 'variables.scss'; +@import "variables.scss"; .widget { - position: relative; - height: 100%; + position: relative; + height: 100%; - .widget-section-container { - padding: 1.2rem; - height: 100%; - border-radius: 0.2rem; - border: none; - box-shadow: - 0 3px 10px 0 rgba(0, 0, 0, 0.1), - 0 3px 5px 0 rgba(0, 0, 0, 0.09); - position: relative; - overflow: hidden; - } + .widget-section-container { + padding: 1.2rem; + height: 100%; + border-radius: 0.2rem; + border: none; + box-shadow: + 0 3px 10px 0 rgba(0, 0, 0, 0.1), + 0 3px 5px 0 rgba(0, 0, 0, 0.09); + position: relative; + overflow: hidden; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/config.model.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/config.model.ts index 548ba43ed7..0b8d632f50 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/config.model.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/config.model.ts @@ -5,13 +5,14 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { Type } from '@angular/core'; +import { Type } from "@angular/core"; -import { Observable } from 'rxjs'; +import { Observable } from "rxjs"; -import { DisplayMode } from './grid-config.model'; +import { DisplayMode } from "./grid-config.model"; -export const MISSING_DEFAULT_TEAM_MESSAGE = 'The defaultOwnerTeamName property need to be set for the DATA_PIPELINES_CONFIGS'; +export const MISSING_DEFAULT_TEAM_MESSAGE = + "The defaultOwnerTeamName property need to be set for the DATA_PIPELINES_CONFIGS"; export const RESERVED_DEFAULT_TEAM_NAME_MESSAGE = `The 'default' value is reserved, and can not be used for defaultOwnerTeamName property`; @@ -19,129 +20,129 @@ export const RESERVED_DEFAULT_TEAM_NAME_MESSAGE = `The 'default' value is reserv * ** Configuration map for Data Pipelines library. */ export interface DataPipelinesConfig { - resourceServer?: { - getUrl?: () => string; - }; - - defaultOwnerTeamName: string; - ownerTeamNamesObservable?: Observable; + resourceServer?: { + getUrl?: () => string; + }; + + defaultOwnerTeamName: string; + ownerTeamNamesObservable?: Observable; + /** + * @deprecated + */ + showLogsInsightUrl?: boolean; + + /** + * @deprecated + */ + showExecutionsPage?: boolean; + /** + * ** Flag instruction to show or hide tab for lineage page. + */ + showLineagePage?: boolean; + + /** + * ** Documentation url for Data Pipelines. + */ + dataPipelinesDocumentationUrl?: string; + + // health status url configured by a segment after hostname, including slash with {0} for the id param, + healthStatusUrl?: string; // eg: /dev-center/health-status?dataJob={0} + + /** + * ** Data Job change history configuration. + */ + changeHistory?: { /** - * @deprecated + * ** Url template to external/internal system. */ - showLogsInsightUrl?: boolean; - + urlTemplate: string; /** - * @deprecated + * ** Confirmation title if url template is to external system. */ - showExecutionsPage?: boolean; + confirmationTitle: string; /** - * ** Flag instruction to show or hide tab for lineage page. + * ** Confirmation message component if url template is to external system. */ - showLineagePage?: boolean; - - /** - * ** Documentation url for Data Pipelines. - */ - dataPipelinesDocumentationUrl?: string; - - // health status url configured by a segment after hostname, including slash with {0} for the id param, - healthStatusUrl?: string; // eg: /dev-center/health-status?dataJob={0} - + confirmationMessageComponent: Type; + }; + + /** + * ** Reference to Explore Data Job(s) configuration map. + */ + exploreConfig?: ExploreConfig; + /** + ** Reference to Manage Data Job(s) configuration map. + */ + manageConfig?: ManageConfig; + + /** + * ** Integration providers from Host application. + */ + integrationProviders?: { /** - * ** Data Job change history configuration. + * ** Users related. */ - changeHistory?: { - /** - * ** Url template to external/internal system. - */ - urlTemplate: string; - /** - * ** Confirmation title if url template is to external system. - */ - confirmationTitle: string; - /** - * ** Confirmation message component if url template is to external system. - */ - confirmationMessageComponent: Type; + users?: { + /** + * ** Get logged User email. + */ + getEmail?: () => string; + /** + * ** Get logged User username. + */ + getUsername?: () => string; }; - - /** - * ** Reference to Explore Data Job(s) configuration map. - */ - exploreConfig?: ExploreConfig; - /** - ** Reference to Manage Data Job(s) configuration map. - */ - manageConfig?: ManageConfig; - /** - * ** Integration providers from Host application. + * ** Teams related. */ - integrationProviders?: { - /** - * ** Users related. - */ - users?: { - /** - * ** Get logged User email. - */ - getEmail?: () => string; - /** - * ** Get logged User username. - */ - getUsername?: () => string; - }; - /** - * ** Teams related. - */ - teams?: { - /** - * ** Ensure User membership in early access program identified by its name. - */ - ensureMembershipEarlyAccessProgram?: (key: string) => boolean; - }; + teams?: { + /** + * ** Ensure User membership in early access program identified by its name. + */ + ensureMembershipEarlyAccessProgram?: (key: string) => boolean; }; + }; } /** * ** Configuration map for Explore Data Job(s). */ export interface ExploreConfig { - /** - * ** Shot Teams column in Explore Data Jobs list. - */ - showTeamsColumn?: boolean; - /** - * ** Show Teams section in Explore Data Job details. - */ - showTeamSectionInJobDetails?: boolean; - /** - * ** Show Change history section in Explore Data Job details. - */ - showChangeHistorySectionInJobDetails?: boolean; + /** + * ** Shot Teams column in Explore Data Jobs list. + */ + showTeamsColumn?: boolean; + /** + * ** Show Teams section in Explore Data Job details. + */ + showTeamSectionInJobDetails?: boolean; + /** + * ** Show Change history section in Explore Data Job details. + */ + showChangeHistorySectionInJobDetails?: boolean; } /** * ** Configuration map for Manage Data Job(s). */ export interface ManageConfig { - /** - * ** Shot Teams column in Manage Data Jobs list. - */ - showTeamsColumn?: boolean; - /** - * ** Show Teams section in Manage Data Job details. - */ - showTeamSectionInJobDetails?: boolean; - /** - * ** Show Change history section in Manage Data Job details. - */ - showChangeHistorySectionInJobDetails?: boolean; - selectedTeamNameObservable?: Observable; - filterByTeamName?: boolean; - displayMode?: DisplayMode; - /** - * ** Allow keytab download in Manage Data Job details. - */ - allowKeyTabDownloads?: boolean; + /** + * ** Shot Teams column in Manage Data Jobs list. + */ + showTeamsColumn?: boolean; + /** + * ** Show Teams section in Manage Data Job details. + */ + showTeamSectionInJobDetails?: boolean; + /** + * ** Show Change history section in Manage Data Job details. + */ + showChangeHistorySectionInJobDetails?: boolean; + selectedTeamNameObservable?: Observable; + filterByTeamName?: boolean; + displayMode?: DisplayMode; + /** + * ** Allow keytab download in Manage Data Job details. + */ + allowKeyTabDownloads?: boolean; } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/constants.model.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/constants.model.ts index f8136cdd68..c3b6393562 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/constants.model.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/constants.model.ts @@ -3,76 +3,78 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { InjectionToken } from '@angular/core'; +import { InjectionToken } from "@angular/core"; -import { DataPipelinesConfig } from './config.model'; +import { DataPipelinesConfig } from "./config.model"; /** * ** Injection Token for Data pipelines config. */ -export const DATA_PIPELINES_CONFIGS = new InjectionToken('DataPipelinesConfig'); +export const DATA_PIPELINES_CONFIGS = new InjectionToken( + "DataPipelinesConfig", +); /** * ** DateTime format pattern provided to Angular DateTime directives/pipes, etc... */ -export const DATA_PIPELINES_DATE_TIME_FORMAT = 'MMM d, y, hh:mm:ss a'; +export const DATA_PIPELINES_DATE_TIME_FORMAT = "MMM d, y, hh:mm:ss a"; /** * ** Team name constant used as key identifier in {@link ComponentState.requestParams}. */ -export const TEAM_NAME_REQ_PARAM = 'team-name-req-param'; +export const TEAM_NAME_REQ_PARAM = "team-name-req-param"; /** * ** Data Job name constant used as key identifier in {@link ComponentState.requestParams}. */ -export const JOB_NAME_REQ_PARAM = 'job-name-req-param'; +export const JOB_NAME_REQ_PARAM = "job-name-req-param"; /** * ** Data Job deployment ID constant used as key identifier in {@link ComponentState.requestParams}. */ -export const JOB_DEPLOYMENT_ID_REQ_PARAM = 'job-deployment-id-req-param'; +export const JOB_DEPLOYMENT_ID_REQ_PARAM = "job-deployment-id-req-param"; /** * ** Data Job status constant used as key identifier in {@link ComponentState.requestParams}. */ -export const JOB_STATUS_REQ_PARAM = 'job-status-req-param'; +export const JOB_STATUS_REQ_PARAM = "job-status-req-param"; /** * ** Filter constant used as key identifier in {@link ComponentState.requestParams}. */ -export const FILTER_REQ_PARAM = 'filter-req-param'; +export const FILTER_REQ_PARAM = "filter-req-param"; /** * ** Order constant used as key identifier in {@link ComponentState.requestParams}. */ -export const ORDER_REQ_PARAM = 'order-req-param'; +export const ORDER_REQ_PARAM = "order-req-param"; /** * ** Data Job details constant used as key identifier in {@link ComponentState.requestParams}. */ -export const JOB_DETAILS_REQ_PARAM = 'job-details-req-param'; +export const JOB_DETAILS_REQ_PARAM = "job-details-req-param"; /** * ** Data Job state constant used as key identifier in {@link ComponentState.requestParams}. */ -export const JOB_STATE_REQ_PARAM = 'job-state-req-param'; +export const JOB_STATE_REQ_PARAM = "job-state-req-param"; /** * ** Data Job state constant used as key identifier in {@link ComponentState.data} */ -export const JOB_STATE_DATA_KEY = 'job-state-data-key'; +export const JOB_STATE_DATA_KEY = "job-state-data-key"; /** * ** Data Jobs states constant used as key identifier in {@link ComponentState.data} */ -export const JOBS_DATA_KEY = 'jobs-data-key'; +export const JOBS_DATA_KEY = "jobs-data-key"; /** * ** Data Job details constant used as key identifier in {@link ComponentState.data} */ -export const JOB_DETAILS_DATA_KEY = 'job-details-data-key'; +export const JOB_DETAILS_DATA_KEY = "job-details-data-key"; /** * ** Data Job Executions constant used as key identifier in {@link ComponentState.data} */ -export const JOB_EXECUTIONS_DATA_KEY = 'job-executions-data-key'; +export const JOB_EXECUTIONS_DATA_KEY = "job-executions-data-key"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-base.model.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-base.model.ts index 5d3c43ced8..e58ee74cef 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-base.model.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-base.model.ts @@ -6,93 +6,95 @@ /* eslint-disable @typescript-eslint/naming-convention */ export interface StatusDetails { - enabled: boolean; + enabled: boolean; } export interface GraphQLResponsePage { - content?: T[]; - totalItems?: number; - totalPages?: number; + content?: T[]; + totalItems?: number; + totalPages?: number; } // Deployment -export interface BaseDataJobDeployment extends StatusDetails { - id: string; - contacts?: DataJobContacts; - jobVersion?: string; - deployedDate?: string; - deployedBy?: string; - mode?: string; - resources?: DataJobResources; - schedule?: DataJobSchedule; - vdkVersion?: string; - jobPythonVersion?: string; - status?: DataJobDeploymentStatus; - executions?: E[]; +export interface BaseDataJobDeployment< + E extends DataJobExecution = DataJobExecution, +> extends StatusDetails { + id: string; + contacts?: DataJobContacts; + jobVersion?: string; + deployedDate?: string; + deployedBy?: string; + mode?: string; + resources?: DataJobResources; + schedule?: DataJobSchedule; + vdkVersion?: string; + jobPythonVersion?: string; + status?: DataJobDeploymentStatus; + executions?: E[]; } export enum DataJobDeploymentStatus { - NONE = 'NONE', - SUCCESS = 'SUCCESS', - PLATFORM_ERROR = 'PLATFORM_ERROR', - USER_ERROR = 'USER_ERROR' + NONE = "NONE", + SUCCESS = "SUCCESS", + PLATFORM_ERROR = "PLATFORM_ERROR", + USER_ERROR = "USER_ERROR", } export interface DataJobContacts { - notifiedOnJobFailureUserError: string[]; - notifiedOnJobFailurePlatformError: string[]; - notifiedOnJobSuccess: string[]; - notifiedOnJobDeploy: string[]; + notifiedOnJobFailureUserError: string[]; + notifiedOnJobFailurePlatformError: string[]; + notifiedOnJobSuccess: string[]; + notifiedOnJobDeploy: string[]; } export interface DataJobSchedule { - scheduleCron?: string; - nextRunEpochSeconds?: number; + scheduleCron?: string; + nextRunEpochSeconds?: number; } export interface DataJobResources { - cpuLimit: number; - cpuRequest: number; - memoryLimit: number; - memoryRequest: number; - ephemeralStorageLimit?: number; - ephemeralStorageRequest?: number; - netBandwidthLimit?: number; + cpuLimit: number; + cpuRequest: number; + memoryLimit: number; + memoryRequest: number; + ephemeralStorageLimit?: number; + ephemeralStorageRequest?: number; + netBandwidthLimit?: number; } // Execution export interface DataJobExecution { - id: string; - type?: DataJobExecutionType; - jobName?: string; - status?: DataJobExecutionStatus; - startTime?: string; - endTime?: string; - startedBy?: string; - message?: string; - opId?: string; - logsUrl?: string; - deployment?: BaseDataJobDeployment; + id: string; + type?: DataJobExecutionType; + jobName?: string; + status?: DataJobExecutionStatus; + startTime?: string; + endTime?: string; + startedBy?: string; + message?: string; + opId?: string; + logsUrl?: string; + deployment?: BaseDataJobDeployment; } export enum DataJobExecutionType { - MANUAL = 'MANUAL', - SCHEDULED = 'SCHEDULED' + MANUAL = "MANUAL", + SCHEDULED = "SCHEDULED", } /** * ** Execution Status. */ export enum DataJobExecutionStatus { - SUBMITTED = 'SUBMITTED', - RUNNING = 'RUNNING', - FINISHED = 'FINISHED', // Keep for backward compatibility - SUCCEEDED = 'SUCCEEDED', - CANCELLED = 'CANCELLED', - SKIPPED = 'SKIPPED', - FAILED = 'FAILED', // Keep for backward compatibility - USER_ERROR = 'USER_ERROR', - PLATFORM_ERROR = 'PLATFORM_ERROR' + SUBMITTED = "SUBMITTED", + RUNNING = "RUNNING", + FINISHED = "FINISHED", // Keep for backward compatibility + SUCCEEDED = "SUCCEEDED", + CANCELLED = "CANCELLED", + SKIPPED = "SKIPPED", + FAILED = "FAILED", // Keep for backward compatibility + USER_ERROR = "USER_ERROR", + PLATFORM_ERROR = "PLATFORM_ERROR", } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-deployments.model.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-deployments.model.ts index ecc4db9d9d..6dadc3a40d 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-deployments.model.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-deployments.model.ts @@ -3,14 +3,17 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { BaseDataJobDeployment, DataJobExecutionStatus } from './data-job-base.model'; +import { + BaseDataJobDeployment, + DataJobExecutionStatus, +} from "./data-job-base.model"; export interface DataJobDeployment extends BaseDataJobDeployment { - lastDeployedDate?: string; - lastDeployedBy?: string; - lastExecutionStatus?: DataJobExecutionStatus; - lastExecutionDuration?: number; - lastExecutionTime?: string; - successfulExecutions?: number; - failedExecutions?: number; + lastDeployedDate?: string; + lastDeployedBy?: string; + lastExecutionStatus?: DataJobExecutionStatus; + lastExecutionDuration?: number; + lastExecutionTime?: string; + successfulExecutions?: number; + failedExecutions?: number; } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-details.model.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-details.model.ts index 6dc921aaa4..19de25ee7b 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-details.model.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-details.model.ts @@ -5,9 +5,9 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { StatusDetails } from './data-job-base.model'; +import { StatusDetails } from "./data-job-base.model"; -import { DataJobExecutionStatusDeprecated } from './data-job-executions.model'; +import { DataJobExecutionStatusDeprecated } from "./data-job-executions.model"; /** * ** Data job details. @@ -15,10 +15,10 @@ import { DataJobExecutionStatusDeprecated } from './data-job-executions.model'; * @deprecated */ export interface DataJobDetails { - job_name?: string; - team?: string; - description?: string; - config?: DataJobConfigDetails; + job_name?: string; + team?: string; + description?: string; + config?: DataJobConfigDetails; } /** @@ -27,8 +27,8 @@ export interface DataJobDetails { * @deprecated */ export interface DataJobConfigDetails { - schedule?: DataJobScheduleDetails; - contacts?: DataJobContactsDetails; + schedule?: DataJobScheduleDetails; + contacts?: DataJobContactsDetails; } /** @@ -37,17 +37,17 @@ export interface DataJobConfigDetails { * @deprecated */ export interface DataJobExecutionDetails { - id: string; - job_name: string; - type: 'manual' | 'scheduled'; - status: DataJobExecutionStatusDeprecated; - start_time: string; - started_by: string; - end_time: string; - op_id: string; - message: string; - logs_url: string; - deployment?: DataJobDeploymentDetails; + id: string; + job_name: string; + type: "manual" | "scheduled"; + status: DataJobExecutionStatusDeprecated; + start_time: string; + started_by: string; + end_time: string; + op_id: string; + message: string; + logs_url: string; + deployment?: DataJobDeploymentDetails; } /** @@ -56,21 +56,21 @@ export interface DataJobExecutionDetails { * @deprecated */ export interface DataJobDeploymentDetails extends StatusDetails { - id: string; - job_version: string; - mode: string; - vdk_version: string; - deployed_by: string; - deployed_date: string; - resources: { - cpu_request: number; - cpu_limit: number; - memory_limit: number; - memory_request: number; - }; - contacts?: DataJobContactsDetails; - schedule?: DataJobScheduleDetails; - python_version: string; + id: string; + job_version: string; + mode: string; + vdk_version: string; + deployed_by: string; + deployed_date: string; + resources: { + cpu_request: number; + cpu_limit: number; + memory_limit: number; + memory_request: number; + }; + contacts?: DataJobContactsDetails; + schedule?: DataJobScheduleDetails; + python_version: string; } /** @@ -79,7 +79,7 @@ export interface DataJobDeploymentDetails extends StatusDetails { * @deprecated */ export interface DataJobScheduleDetails { - schedule_cron: string; + schedule_cron: string; } /** @@ -88,8 +88,8 @@ export interface DataJobScheduleDetails { * @deprecated */ export interface DataJobContactsDetails { - notified_on_job_deploy: string[]; - notified_on_job_failure_platform_error: string[]; - notified_on_job_failure_user_error: string[]; - notified_on_job_success: string[]; + notified_on_job_deploy: string[]; + notified_on_job_failure_platform_error: string[]; + notified_on_job_failure_user_error: string[]; + notified_on_job_success: string[]; } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-executions.model.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-executions.model.ts index ba02ed478c..12f6e5d148 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-executions.model.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job-executions.model.ts @@ -5,9 +5,13 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { DirectionType } from '@versatiledatakit/shared'; +import { DirectionType } from "@versatiledatakit/shared"; -import { DataJobExecution, DataJobExecutionStatus, GraphQLResponsePage } from './data-job-base.model'; +import { + DataJobExecution, + DataJobExecutionStatus, + GraphQLResponsePage, +} from "./data-job-base.model"; export type DataJobExecutions = DataJobExecution[]; @@ -18,40 +22,40 @@ export type DataJobExecutions = DataJobExecution[]; */ // eslint-disable-next-line no-shadow export enum DataJobExecutionStatusDeprecated { - SUBMITTED = 'submitted', - RUNNING = 'running', - FINISHED = 'finished', // Keep for backward compatibility - SUCCEEDED = 'succeeded', - CANCELLED = 'cancelled', - SKIPPED = 'skipped', - FAILED = 'failed', // Keep for backward compatibility - USER_ERROR = 'user_error', - PLATFORM_ERROR = 'platform_error' + SUBMITTED = "submitted", + RUNNING = "running", + FINISHED = "finished", // Keep for backward compatibility + SUCCEEDED = "succeeded", + CANCELLED = "cancelled", + SKIPPED = "skipped", + FAILED = "failed", // Keep for backward compatibility + USER_ERROR = "user_error", + PLATFORM_ERROR = "platform_error", } /** * ** Request variables fro DataJobs Executions jobsQuery GraphQL API. */ export interface DataJobExecutionsReqVariables { - pageNumber?: number; - pageSize?: number; - filter?: DataJobExecutionFilter; - order?: DataJobExecutionOrder; + pageNumber?: number; + pageSize?: number; + filter?: DataJobExecutionFilter; + order?: DataJobExecutionOrder; } export interface DataJobExecutionFilter { - statusIn?: DataJobExecutionStatus[]; - jobNameIn?: string[]; - teamNameIn?: string[]; - startTimeGte?: string | Date; - endTimeGte?: string | Date; - startTimeLte?: string | Date; - endTimeLte?: string | Date; + statusIn?: DataJobExecutionStatus[]; + jobNameIn?: string[]; + teamNameIn?: string[]; + startTimeGte?: string | Date; + endTimeGte?: string | Date; + startTimeLte?: string | Date; + endTimeLte?: string | Date; } export interface DataJobExecutionOrder { - property: keyof DataJobExecution; - direction: DirectionType; + property: keyof DataJobExecution; + direction: DirectionType; } export type DataJobExecutionsPage = GraphQLResponsePage; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job.model.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job.model.ts index d20ca0dd20..921642fd6f 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job.model.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/data-job.model.ts @@ -5,47 +5,51 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { ApiPredicate } from '@versatiledatakit/shared'; +import { ApiPredicate } from "@versatiledatakit/shared"; -import { DataJobContacts, DataJobSchedule, GraphQLResponsePage } from './data-job-base.model'; +import { + DataJobContacts, + DataJobSchedule, + GraphQLResponsePage, +} from "./data-job-base.model"; -import { DataJobDeployment } from './data-job-deployments.model'; +import { DataJobDeployment } from "./data-job-deployments.model"; export type DataJobPage = GraphQLResponsePage; export interface DataJob { - jobName?: string; - config?: DataJobConfig; - deployments?: DataJobDeployment[]; + jobName?: string; + config?: DataJobConfig; + deployments?: DataJobDeployment[]; } export interface DataJobConfig { - team?: string; - description?: string; - generateKeytab?: boolean; - sourceUrl?: string; - logsUrl?: string; - schedule?: DataJobSchedule; - contacts?: DataJobContacts; + team?: string; + description?: string; + generateKeytab?: boolean; + sourceUrl?: string; + logsUrl?: string; + schedule?: DataJobSchedule; + contacts?: DataJobContacts; } /** * ** Request variables for DataJobs jobsQuery GraphQL API. */ export interface DataJobReqVariables { - pageNumber?: number; - pageSize?: number; - filter?: ApiPredicate[]; - search?: string; + pageNumber?: number; + pageSize?: number; + filter?: ApiPredicate[]; + search?: string; } export enum DataJobStatus { - ENABLED = 'Enabled', - DISABLED = 'Disabled', - NOT_DEPLOYED = 'Not Deployed' + ENABLED = "Enabled", + DISABLED = "Disabled", + NOT_DEPLOYED = "Not Deployed", } export interface IPcsOAuthDto { - teamName: string; - clientId: string; + teamName: string; + clientId: string; } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/grid-config.model.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/grid-config.model.ts index da5f703238..faf9418dbe 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/grid-config.model.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/grid-config.model.ts @@ -4,17 +4,17 @@ */ export enum DisplayMode { - /* eslint-disable-next-line @typescript-eslint/naming-convention */ - COMPACT = 'compact', - /* eslint-disable-next-line @typescript-eslint/naming-convention */ - STANDARD = 'standard' + /* eslint-disable-next-line @typescript-eslint/naming-convention */ + COMPACT = "compact", + /* eslint-disable-next-line @typescript-eslint/naming-convention */ + STANDARD = "standard", } export interface GridFilters { - jobName?: string; - teamName?: string; - description?: string; - deploymentStatus?: string; - deploymentLastExecutionStatus?: string; - jobPythonVersion?: string; + jobName?: string; + teamName?: string; + description?: string; + deploymentStatus?: string; + deploymentLastExecutionStatus?: string; + jobPythonVersion?: string; } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/index.ts index 3e9c253d09..2c22034f03 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/index.ts @@ -3,13 +3,13 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './config.model'; -export * from './constants.model'; -export * from './data-job-base.model'; -export * from './data-job.model'; -export * from './data-job-deployments.model'; -export * from './data-job-details.model'; -export * from './data-job-executions.model'; -export * from './grid-config.model'; -export * from './route.model'; -export * from './toast-definitions.model'; +export * from "./config.model"; +export * from "./constants.model"; +export * from "./data-job-base.model"; +export * from "./data-job.model"; +export * from "./data-job-deployments.model"; +export * from "./data-job-details.model"; +export * from "./data-job-executions.model"; +export * from "./grid-config.model"; +export * from "./route.model"; +export * from "./toast-definitions.model"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/public-api.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/public-api.ts index 1f80deac1a..2c83db2ecf 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/public-api.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/public-api.ts @@ -3,22 +3,26 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-job-base.model'; +export * from "./data-job-base.model"; -export * from './data-job.model'; +export * from "./data-job.model"; -export * from './data-job-details.model'; +export * from "./data-job-details.model"; -export * from './data-job-deployments.model'; +export * from "./data-job-deployments.model"; -export * from './data-job-executions.model'; +export * from "./data-job-executions.model"; -export * from './grid-config.model'; +export * from "./grid-config.model"; -export { ManageConfig, DataPipelinesConfig, ExploreConfig } from './config.model'; +export { + ManageConfig, + DataPipelinesConfig, + ExploreConfig, +} from "./config.model"; -export * from './route.model'; +export * from "./route.model"; -export * from './toast-definitions.model'; +export * from "./toast-definitions.model"; -export { DATA_PIPELINES_CONFIGS } from './constants.model'; +export { DATA_PIPELINES_CONFIGS } from "./constants.model"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/route.model.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/route.model.ts index 45cbbf99e1..531b523a87 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/route.model.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/route.model.ts @@ -4,75 +4,76 @@ */ import { - ArrayElement, - TaurusNavigateAction, - TaurusRouteData, - TaurusRouteNavigateBackData, - TaurusRouteNavigateToData, - TaurusRoutes -} from '@versatiledatakit/shared'; + ArrayElement, + TaurusNavigateAction, + TaurusRouteData, + TaurusRouteNavigateBackData, + TaurusRouteNavigateToData, + TaurusRoutes, +} from "@versatiledatakit/shared"; export interface DataPipelinesRestoreUI { - /** - * ** Restore when this condition is met, previous ConfigPath equals to provided. - */ - previousConfigPathLike: string; + /** + * ** Restore when this condition is met, previous ConfigPath equals to provided. + */ + previousConfigPathLike: string; } /** * ** Data pipelines Route data. */ -export interface DataPipelinesRouteData extends TaurusRouteNavigateToData, TaurusRouteNavigateBackData { - /** - * ** Field that has pointer to paramKey for Team in Route config. - */ - teamParamKey?: string; +export interface DataPipelinesRouteData + extends TaurusRouteNavigateToData, TaurusRouteNavigateBackData { + /** + * ** Field that has pointer to paramKey for Team in Route config. + */ + teamParamKey?: string; - /** - * ** Field that has pointer to paramKey for Job in Route config. - */ - jobParamKey?: string; + /** + * ** Field that has pointer to paramKey for Job in Route config. + */ + jobParamKey?: string; - /** - * ** Field flag that enable/disable Listener for Team Change and on Change to do some action. - */ - activateListenerForTeamChange?: boolean; + /** + * ** Field flag that enable/disable Listener for Team Change and on Change to do some action. + */ + activateListenerForTeamChange?: boolean; - /** - * ** Field flag that enable/disable subpage navigation. - * - * - true - enables subpage navigation - * - false - disable subpage navigation and activate default root Page navigation. - */ - activateSubpageNavigation?: boolean; + /** + * ** Field flag that enable/disable subpage navigation. + * + * - true - enables subpage navigation + * - false - disable subpage navigation and activate default root Page navigation. + */ + activateSubpageNavigation?: boolean; - /** - * @inheritDoc - */ - navigateTo?: TaurusNavigateAction; + /** + * @inheritDoc + */ + navigateTo?: TaurusNavigateAction; - /** - * @inheritDoc - */ - navigateBack?: TaurusNavigateAction; + /** + * @inheritDoc + */ + navigateBack?: TaurusNavigateAction; - /** - * ** Field that instruct Component when should restore UI. - */ - restoreUiWhen?: DataPipelinesRestoreUI; + /** + * ** Field that instruct Component when should restore UI. + */ + restoreUiWhen?: DataPipelinesRestoreUI; - /** - * ** Configuring this field, instruct Component on this Route to be in editable mode or no. - * - * - true -> Component is in editable mode. - * - false -> Component is in readonly mode. - */ - editable?: boolean; + /** + * ** Configuring this field, instruct Component on this Route to be in editable mode or no. + * + * - true -> Component is in editable mode. + * - false -> Component is in readonly mode. + */ + editable?: boolean; - /** - * ** Configuring this field, gives context to the Component. - */ - context?: 'manage' | 'explore'; + /** + * ** Configuring this field, gives context to the Component. + */ + context?: "manage" | "explore"; } /** @@ -83,4 +84,6 @@ export type DataPipelinesRoute = ArrayElement; /** * ** Data pipelines Routes configs. */ -export type DataPipelinesRoutes = TaurusRoutes>; +export type DataPipelinesRoutes = TaurusRoutes< + TaurusRouteData +>; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/toast-definitions.model.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/toast-definitions.model.ts index 7fb738fd19..dd0cbe1755 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/toast-definitions.model.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/model/toast-definitions.model.ts @@ -3,14 +3,14 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Toast, VmwToastType } from '@versatiledatakit/shared'; +import { Toast, VmwToastType } from "@versatiledatakit/shared"; export class ToastDefinitions { - static successfullyRanJob(jobName: string): Toast { - return { - type: VmwToastType.INFO, - title: `Data job Queued for execution`, - description: `Data job "${jobName}" successfully queued for execution.` - }; - } + static successfullyRanJob(jobName: string): Toast { + return { + type: VmwToastType.INFO, + title: `Data job Queued for execution`, + description: `Data job "${jobName}" successfully queued for execution.`, + }; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-base.api.service.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-base.api.service.spec.ts index af5c51b64c..f95af603c5 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-base.api.service.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-base.api.service.spec.ts @@ -3,83 +3,96 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { HttpClient } from '@angular/common/http'; +import { HttpClient } from "@angular/common/http"; -import { TestBed } from '@angular/core/testing'; +import { TestBed } from "@angular/core/testing"; -import { of } from 'rxjs'; +import { of } from "rxjs"; -import { ApolloQueryResult, gql, InMemoryCache } from '@apollo/client/core'; +import { ApolloQueryResult, gql, InMemoryCache } from "@apollo/client/core"; -import { Apollo, ApolloBase, QueryRef } from 'apollo-angular'; -import { HttpLink, HttpLinkHandler } from 'apollo-angular/http'; +import { Apollo, ApolloBase, QueryRef } from "apollo-angular"; +import { HttpLink, HttpLinkHandler } from "apollo-angular/http"; -import { ErrorHandlerService } from '@versatiledatakit/shared'; +import { ErrorHandlerService } from "@versatiledatakit/shared"; import { - DATA_PIPELINES_CONFIGS, - DataJobExecutionsPage, - DataJobExecutionsReqVariables, - DataJobPage, - DataJobReqVariables, - DataPipelinesConfig -} from '../model'; + DATA_PIPELINES_CONFIGS, + DataJobExecutionsPage, + DataJobExecutionsReqVariables, + DataJobPage, + DataJobReqVariables, + DataPipelinesConfig, +} from "../model"; -import { DataJobsBaseApiService } from './data-jobs-base.api.service'; +import { DataJobsBaseApiService } from "./data-jobs-base.api.service"; -describe('DataJobsBaseApiService', () => { - let service: DataJobsBaseApiService; - let apolloStub: jasmine.SpyObj; - let httpLinkStub: jasmine.SpyObj; - let httpClientStub: jasmine.SpyObj; - let errorHandlerServiceStub: jasmine.SpyObj; +describe("DataJobsBaseApiService", () => { + let service: DataJobsBaseApiService; + let apolloStub: jasmine.SpyObj; + let httpLinkStub: jasmine.SpyObj; + let httpClientStub: jasmine.SpyObj; + let errorHandlerServiceStub: jasmine.SpyObj; - let apolloBaseStub: jasmine.SpyObj; + let apolloBaseStub: jasmine.SpyObj; - beforeEach(() => { - apolloStub = jasmine.createSpyObj('apolloService', ['use', 'createNamed']); - httpLinkStub = jasmine.createSpyObj('httpLinkService', ['create']); - httpClientStub = jasmine.createSpyObj('httpClientService', ['request']); - errorHandlerServiceStub = jasmine.createSpyObj('errorHandlerService', ['processError', 'handleError']); + beforeEach(() => { + apolloStub = jasmine.createSpyObj("apolloService", [ + "use", + "createNamed", + ]); + httpLinkStub = jasmine.createSpyObj("httpLinkService", [ + "create", + ]); + httpClientStub = jasmine.createSpyObj("httpClientService", [ + "request", + ]); + errorHandlerServiceStub = jasmine.createSpyObj( + "errorHandlerService", + ["processError", "handleError"], + ); - apolloBaseStub = jasmine.createSpyObj('apolloBase', ['query', 'watchQuery']); + apolloBaseStub = jasmine.createSpyObj("apolloBase", [ + "query", + "watchQuery", + ]); - TestBed.configureTestingModule({ - providers: [ - DataJobsBaseApiService, - { provide: Apollo, useValue: apolloStub }, - { provide: HttpLink, useValue: httpLinkStub }, - { provide: HttpClient, useValue: httpClientStub }, - { - provide: DATA_PIPELINES_CONFIGS, - useFactory: () => - ({ - resourceServer: { - getUrl: () => '' - }, - defaultOwnerTeamName: 'all' - }) as DataPipelinesConfig - }, - { - provide: ErrorHandlerService, - useValue: errorHandlerServiceStub - } - ] - }); - - service = TestBed.inject(DataJobsBaseApiService); + TestBed.configureTestingModule({ + providers: [ + DataJobsBaseApiService, + { provide: Apollo, useValue: apolloStub }, + { provide: HttpLink, useValue: httpLinkStub }, + { provide: HttpClient, useValue: httpClientStub }, + { + provide: DATA_PIPELINES_CONFIGS, + useFactory: () => + ({ + resourceServer: { + getUrl: () => "", + }, + defaultOwnerTeamName: "all", + }) as DataPipelinesConfig, + }, + { + provide: ErrorHandlerService, + useValue: errorHandlerServiceStub, + }, + ], }); - it('should verify service instance is created', () => { - // Then - expect(service).toBeTruthy(); - }); + service = TestBed.inject(DataJobsBaseApiService); + }); - describe('Methods::', () => { - describe('|getJobs|', () => { - it('should verify will make expected calls', () => { - // Given - const gqlQuery = `query jobsQuery($filter: [Predicate], $search: String, $pageNumber: Int, $pageSize: Int) + it("should verify service instance is created", () => { + // Then + expect(service).toBeTruthy(); + }); + + describe("Methods::", () => { + describe("|getJobs|", () => { + it("should verify will make expected calls", () => { + // Given + const gqlQuery = `query jobsQuery($filter: [Predicate], $search: String, $pageNumber: Int, $pageSize: Int) { jobs(filter: $filter, search: $search, pageNumber: $pageNumber, pageSize: $pageSize) { content { @@ -94,66 +107,74 @@ describe('DataJobsBaseApiService', () => { totalItems } }`; - const ownerTeam = 'supercollider_test'; - const dataJobReqVariables: DataJobReqVariables = { - pageNumber: 2, - pageSize: 25, - filter: [], - search: 'sup' - }; - const apolloLinkHandlerStub: HttpLinkHandler = {} as any; - const apolloMockResponse: ApolloQueryResult = { - data: { - content: [], - totalItems: 25, - totalPages: 1 - }, - networkStatus: 7, - loading: false - }; + const ownerTeam = "supercollider_test"; + const dataJobReqVariables: DataJobReqVariables = { + pageNumber: 2, + pageSize: 25, + filter: [], + search: "sup", + }; + const apolloLinkHandlerStub: HttpLinkHandler = {} as any; + const apolloMockResponse: ApolloQueryResult = { + data: { + content: [], + totalItems: 25, + totalPages: 1, + }, + networkStatus: 7, + loading: false, + }; - apolloBaseStub.query.and.returnValue(of(apolloMockResponse)); - apolloStub.use.and.returnValues(null, apolloBaseStub); - httpLinkStub.create.and.returnValue(apolloLinkHandlerStub); + apolloBaseStub.query.and.returnValue(of(apolloMockResponse)); + apolloStub.use.and.returnValues(null, apolloBaseStub); + httpLinkStub.create.and.returnValue(apolloLinkHandlerStub); - // When - let dataJobPage: DataJobPage; - service.getJobs(ownerTeam, gqlQuery, dataJobReqVariables).subscribe((r) => (dataJobPage = r.data)); + // When + let dataJobPage: DataJobPage; + service + .getJobs(ownerTeam, gqlQuery, dataJobReqVariables) + .subscribe((r) => (dataJobPage = r.data)); - // Then - expect(apolloStub.use.calls.argsFor(0)).toEqual([ownerTeam]); - expect(httpLinkStub.create).toHaveBeenCalledWith({ - uri: `/data-jobs/for-team/${ownerTeam}/jobs`, - method: 'GET' - }); - expect(apolloStub.createNamed.calls.argsFor(0)[0]).toEqual(ownerTeam); - expect(apolloStub.createNamed.calls.argsFor(0)[1].cache).toEqual(jasmine.any(InMemoryCache)); - expect(apolloStub.createNamed.calls.argsFor(0)[1].link).toBe(apolloLinkHandlerStub); - expect(apolloStub.createNamed.calls.argsFor(0)[1].defaultOptions).toEqual({ - watchQuery: { - fetchPolicy: 'no-cache', - errorPolicy: 'all' - }, - query: { - fetchPolicy: 'no-cache', - errorPolicy: 'all' - } - }); - expect(apolloStub.use.calls.argsFor(1)).toEqual([ownerTeam]); - expect(apolloBaseStub.query).toHaveBeenCalledWith({ - query: gql` - ${gqlQuery} - `, - variables: dataJobReqVariables - }); - expect(dataJobPage).toBe(apolloMockResponse.data); - }); + // Then + expect(apolloStub.use.calls.argsFor(0)).toEqual([ownerTeam]); + expect(httpLinkStub.create).toHaveBeenCalledWith({ + uri: `/data-jobs/for-team/${ownerTeam}/jobs`, + method: "GET", + }); + expect(apolloStub.createNamed.calls.argsFor(0)[0]).toEqual(ownerTeam); + expect(apolloStub.createNamed.calls.argsFor(0)[1].cache).toEqual( + jasmine.any(InMemoryCache), + ); + expect(apolloStub.createNamed.calls.argsFor(0)[1].link).toBe( + apolloLinkHandlerStub, + ); + expect( + apolloStub.createNamed.calls.argsFor(0)[1].defaultOptions, + ).toEqual({ + watchQuery: { + fetchPolicy: "no-cache", + errorPolicy: "all", + }, + query: { + fetchPolicy: "no-cache", + errorPolicy: "all", + }, + }); + expect(apolloStub.use.calls.argsFor(1)).toEqual([ownerTeam]); + expect(apolloBaseStub.query).toHaveBeenCalledWith({ + query: gql` + ${gqlQuery} + `, + variables: dataJobReqVariables, }); + expect(dataJobPage).toBe(apolloMockResponse.data); + }); + }); - describe('|watchForJobs|', () => { - it('should verify will make expected calls', () => { - // Given - const gqlQuery = `query jobsQuery($filter: [Predicate], $search: String, $pageNumber: Int, $pageSize: Int) + describe("|watchForJobs|", () => { + it("should verify will make expected calls", () => { + // Given + const gqlQuery = `query jobsQuery($filter: [Predicate], $search: String, $pageNumber: Int, $pageSize: Int) { jobs(filter: $filter, search: $search, pageNumber: $pageNumber, pageSize: $pageSize) { content { @@ -168,70 +189,78 @@ describe('DataJobsBaseApiService', () => { totalItems } }`; - const ownerTeam = 'supercollider_test'; - const dataJobReqVariables: DataJobReqVariables = { - pageNumber: 2, - pageSize: 25, - filter: [], - search: 'sup' - }; - const apolloLinkHandlerStub = {} as HttpLinkHandler; - const apolloQueryResult: ApolloQueryResult = { - data: { - content: [], - totalItems: 25, - totalPages: 1 - }, - networkStatus: 7, - loading: false - }; - const apolloMockResponse: QueryRef = { - valueChanges: of(apolloQueryResult) - } as QueryRef; + const ownerTeam = "supercollider_test"; + const dataJobReqVariables: DataJobReqVariables = { + pageNumber: 2, + pageSize: 25, + filter: [], + search: "sup", + }; + const apolloLinkHandlerStub = {} as HttpLinkHandler; + const apolloQueryResult: ApolloQueryResult = { + data: { + content: [], + totalItems: 25, + totalPages: 1, + }, + networkStatus: 7, + loading: false, + }; + const apolloMockResponse: QueryRef = { + valueChanges: of(apolloQueryResult), + } as QueryRef; - apolloBaseStub.watchQuery.and.returnValue(apolloMockResponse); - apolloStub.use.and.returnValues(null, apolloBaseStub); - httpLinkStub.create.and.returnValue(apolloLinkHandlerStub); + apolloBaseStub.watchQuery.and.returnValue(apolloMockResponse); + apolloStub.use.and.returnValues(null, apolloBaseStub); + httpLinkStub.create.and.returnValue(apolloLinkHandlerStub); - // When - let dataJobPage: DataJobPage; - service.watchForJobs(ownerTeam, gqlQuery, dataJobReqVariables).valueChanges.subscribe((r) => (dataJobPage = r.data)); + // When + let dataJobPage: DataJobPage; + service + .watchForJobs(ownerTeam, gqlQuery, dataJobReqVariables) + .valueChanges.subscribe((r) => (dataJobPage = r.data)); - // Then - expect(apolloStub.use.calls.argsFor(0)).toEqual([ownerTeam]); - expect(httpLinkStub.create).toHaveBeenCalledWith({ - uri: `/data-jobs/for-team/${ownerTeam}/jobs`, - method: 'GET' - }); - expect(apolloStub.createNamed.calls.argsFor(0)[0]).toEqual(ownerTeam); - expect(apolloStub.createNamed.calls.argsFor(0)[1].cache).toEqual(jasmine.any(InMemoryCache)); - expect(apolloStub.createNamed.calls.argsFor(0)[1].link).toBe(apolloLinkHandlerStub); - expect(apolloStub.createNamed.calls.argsFor(0)[1].defaultOptions).toEqual({ - watchQuery: { - fetchPolicy: 'no-cache', - errorPolicy: 'all' - }, - query: { - fetchPolicy: 'no-cache', - errorPolicy: 'all' - } - }); - expect(apolloStub.use.calls.argsFor(1)).toEqual([ownerTeam]); - expect(apolloBaseStub.watchQuery).toHaveBeenCalledWith({ - query: gql` - ${gqlQuery} - `, - variables: dataJobReqVariables - }); - expect(dataJobPage).toBe(apolloQueryResult.data); - }); + // Then + expect(apolloStub.use.calls.argsFor(0)).toEqual([ownerTeam]); + expect(httpLinkStub.create).toHaveBeenCalledWith({ + uri: `/data-jobs/for-team/${ownerTeam}/jobs`, + method: "GET", + }); + expect(apolloStub.createNamed.calls.argsFor(0)[0]).toEqual(ownerTeam); + expect(apolloStub.createNamed.calls.argsFor(0)[1].cache).toEqual( + jasmine.any(InMemoryCache), + ); + expect(apolloStub.createNamed.calls.argsFor(0)[1].link).toBe( + apolloLinkHandlerStub, + ); + expect( + apolloStub.createNamed.calls.argsFor(0)[1].defaultOptions, + ).toEqual({ + watchQuery: { + fetchPolicy: "no-cache", + errorPolicy: "all", + }, + query: { + fetchPolicy: "no-cache", + errorPolicy: "all", + }, + }); + expect(apolloStub.use.calls.argsFor(1)).toEqual([ownerTeam]); + expect(apolloBaseStub.watchQuery).toHaveBeenCalledWith({ + query: gql` + ${gqlQuery} + `, + variables: dataJobReqVariables, }); + expect(dataJobPage).toBe(apolloQueryResult.data); + }); + }); - describe('|getExecutions|', () => { - it('should verify will make expected calls', () => { - // Given - // eslint-disable-next-line max-len - const gqlQuery = `query jobsQuery($pageNumber: Int, $pageSize: Int, $filter: DataJobExecutionFilter, $order: DataJobExecutionOrder) + describe("|getExecutions|", () => { + it("should verify will make expected calls", () => { + // Given + // eslint-disable-next-line max-len + const gqlQuery = `query jobsQuery($pageNumber: Int, $pageSize: Int, $filter: DataJobExecutionFilter, $order: DataJobExecutionOrder) { executions(pageNumber: $pageNumber, pageSize: $pageSize, filter: $filter, order: $order) { content { @@ -253,58 +282,66 @@ describe('DataJobsBaseApiService', () => { totalItems } }`; - const ownerTeam = 'supercollider_test'; - const dataJobReqVariables: DataJobExecutionsReqVariables = { - pageNumber: 2, - pageSize: 25 - }; - const apolloLinkHandlerStub = {} as HttpLinkHandler; - const apolloMockResponse: ApolloQueryResult = { - data: { - content: [], - totalItems: 25, - totalPages: 1 - }, - networkStatus: 7, - loading: false - }; + const ownerTeam = "supercollider_test"; + const dataJobReqVariables: DataJobExecutionsReqVariables = { + pageNumber: 2, + pageSize: 25, + }; + const apolloLinkHandlerStub = {} as HttpLinkHandler; + const apolloMockResponse: ApolloQueryResult = { + data: { + content: [], + totalItems: 25, + totalPages: 1, + }, + networkStatus: 7, + loading: false, + }; - apolloBaseStub.query.and.returnValue(of(apolloMockResponse)); - apolloStub.use.and.returnValues(null, apolloBaseStub); - httpLinkStub.create.and.returnValue(apolloLinkHandlerStub); + apolloBaseStub.query.and.returnValue(of(apolloMockResponse)); + apolloStub.use.and.returnValues(null, apolloBaseStub); + httpLinkStub.create.and.returnValue(apolloLinkHandlerStub); - // When - let dataJobExecutionsPage: DataJobExecutionsPage; - service.getExecutions(ownerTeam, gqlQuery, dataJobReqVariables).subscribe((r) => (dataJobExecutionsPage = r.data)); + // When + let dataJobExecutionsPage: DataJobExecutionsPage; + service + .getExecutions(ownerTeam, gqlQuery, dataJobReqVariables) + .subscribe((r) => (dataJobExecutionsPage = r.data)); - // Then - expect(apolloStub.use.calls.argsFor(0)).toEqual([ownerTeam]); - expect(httpLinkStub.create).toHaveBeenCalledWith({ - uri: `/data-jobs/for-team/${ownerTeam}/jobs`, - method: 'GET' - }); - expect(apolloStub.createNamed.calls.argsFor(0)[0]).toEqual(ownerTeam); - expect(apolloStub.createNamed.calls.argsFor(0)[1].cache).toEqual(jasmine.any(InMemoryCache)); - expect(apolloStub.createNamed.calls.argsFor(0)[1].link).toBe(apolloLinkHandlerStub); - expect(apolloStub.createNamed.calls.argsFor(0)[1].defaultOptions).toEqual({ - watchQuery: { - fetchPolicy: 'no-cache', - errorPolicy: 'all' - }, - query: { - fetchPolicy: 'no-cache', - errorPolicy: 'all' - } - }); - expect(apolloStub.use.calls.argsFor(1)).toEqual([ownerTeam]); - expect(apolloBaseStub.query).toHaveBeenCalledWith({ - query: gql` - ${gqlQuery} - `, - variables: dataJobReqVariables - }); - expect(dataJobExecutionsPage).toBe(apolloMockResponse.data); - }); + // Then + expect(apolloStub.use.calls.argsFor(0)).toEqual([ownerTeam]); + expect(httpLinkStub.create).toHaveBeenCalledWith({ + uri: `/data-jobs/for-team/${ownerTeam}/jobs`, + method: "GET", + }); + expect(apolloStub.createNamed.calls.argsFor(0)[0]).toEqual(ownerTeam); + expect(apolloStub.createNamed.calls.argsFor(0)[1].cache).toEqual( + jasmine.any(InMemoryCache), + ); + expect(apolloStub.createNamed.calls.argsFor(0)[1].link).toBe( + apolloLinkHandlerStub, + ); + expect( + apolloStub.createNamed.calls.argsFor(0)[1].defaultOptions, + ).toEqual({ + watchQuery: { + fetchPolicy: "no-cache", + errorPolicy: "all", + }, + query: { + fetchPolicy: "no-cache", + errorPolicy: "all", + }, + }); + expect(apolloStub.use.calls.argsFor(1)).toEqual([ownerTeam]); + expect(apolloBaseStub.query).toHaveBeenCalledWith({ + query: gql` + ${gqlQuery} + `, + variables: dataJobReqVariables, }); + expect(dataJobExecutionsPage).toBe(apolloMockResponse.data); + }); }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-base.api.service.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-base.api.service.ts index cf5b39a62f..40d48aed99 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-base.api.service.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-base.api.service.ts @@ -5,136 +5,152 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { Inject, Injectable } from '@angular/core'; +import { Inject, Injectable } from "@angular/core"; -import { Observable } from 'rxjs'; +import { Observable } from "rxjs"; -import { ApolloQueryResult, DefaultOptions, gql, InMemoryCache } from '@apollo/client/core'; +import { + ApolloQueryResult, + DefaultOptions, + gql, + InMemoryCache, +} from "@apollo/client/core"; -import { Apollo, ApolloBase, QueryRef } from 'apollo-angular'; -import { HttpLink } from 'apollo-angular/http'; +import { Apollo, ApolloBase, QueryRef } from "apollo-angular"; +import { HttpLink } from "apollo-angular/http"; -import { TaurusBaseApiService } from '@versatiledatakit/shared'; +import { TaurusBaseApiService } from "@versatiledatakit/shared"; import { - DATA_PIPELINES_CONFIGS, - DataJob, - DataJobExecutionsPage, - DataJobExecutionsReqVariables, - DataJobPage, - DataJobReqVariables, - DataPipelinesConfig -} from '../model'; + DATA_PIPELINES_CONFIGS, + DataJob, + DataJobExecutionsPage, + DataJobExecutionsReqVariables, + DataJobPage, + DataJobReqVariables, + DataPipelinesConfig, +} from "../model"; /** * ** Data Jobs Service build on top of Apollo gql client. */ @Injectable() export class DataJobsBaseApiService extends TaurusBaseApiService { - /** - * @inheritDoc - */ - static override readonly CLASS_NAME: string = 'DataJobsBaseApiService'; - - /** - * @inheritDoc - */ - static override readonly PUBLIC_NAME: string = 'Data-Pipelines-Service'; - - private static readonly APOLLO_METHOD = 'GET'; - private static readonly APOLLO_DEFAULT_OPTIONS: DefaultOptions = { - watchQuery: { - fetchPolicy: 'no-cache', - errorPolicy: 'all' - }, - query: { - fetchPolicy: 'no-cache', - errorPolicy: 'all' - } - }; - - /** - * ** Constructor. - */ - constructor( - @Inject(DATA_PIPELINES_CONFIGS) private readonly dataPipelinesConfig: DataPipelinesConfig, - private readonly apollo: Apollo, - private readonly httpLink: HttpLink - ) { - super(DataJobsBaseApiService.CLASS_NAME); - - this.registerErrorCodes(DataJobsBaseApiService); + /** + * @inheritDoc + */ + static override readonly CLASS_NAME: string = "DataJobsBaseApiService"; + + /** + * @inheritDoc + */ + static override readonly PUBLIC_NAME: string = "Data-Pipelines-Service"; + + private static readonly APOLLO_METHOD = "GET"; + private static readonly APOLLO_DEFAULT_OPTIONS: DefaultOptions = { + watchQuery: { + fetchPolicy: "no-cache", + errorPolicy: "all", + }, + query: { + fetchPolicy: "no-cache", + errorPolicy: "all", + }, + }; + + /** + * ** Constructor. + */ + constructor( + @Inject(DATA_PIPELINES_CONFIGS) + private readonly dataPipelinesConfig: DataPipelinesConfig, + private readonly apollo: Apollo, + private readonly httpLink: HttpLink, + ) { + super(DataJobsBaseApiService.CLASS_NAME); + + this.registerErrorCodes(DataJobsBaseApiService); + } + + /** + * ** Get all DataJobs for provided OwnerTeam and load data based on provided gqlQuery. + */ + getJobs( + ownerTeam: string, + gqlQuery: string, + variables: DataJobReqVariables, + ): Observable> { + return this.getApolloClientFor(ownerTeam).query({ + query: gql` + ${gqlQuery} + `, + variables, + }); + } + + /** + * ** Create Apollo watcher for gqlQuery. + */ + watchForJobs( + ownerTeam: string, + gqlQuery: string, + variables: DataJobReqVariables, + ): QueryRef { + return this.getApolloClientFor(ownerTeam).watchQuery({ + query: gql` + ${gqlQuery} + `, + variables, + }); + } + + /** + * ** Get all DataJob Executions for provided OwnerTeam and load data based on provided gqlQuery. + */ + getExecutions( + ownerTeam: string, + gqlQuery: string, + variables: DataJobExecutionsReqVariables, + ): Observable> { + return this.getApolloClientFor(ownerTeam).query({ + query: gql` + ${gqlQuery} + `, + variables, + }); + } + + private getApolloClientFor(ownerTeam: string): ApolloBase { + if (!this.apollo.use(ownerTeam)) { + this.apollo.createNamed(ownerTeam, { + cache: new InMemoryCache({ + typePolicies: { + Query: { + fields: { + jobs: (_existing, _options) => { + return {}; + }, + executions: (_existing, _options) => { + return {}; + }, + }, + }, + }, + }), + link: this.httpLink.create({ + uri: `${this._resolvePipelinesServiceUrl()}/data-jobs/for-team/${ownerTeam}/jobs`, + method: DataJobsBaseApiService.APOLLO_METHOD, + }), + defaultOptions: DataJobsBaseApiService.APOLLO_DEFAULT_OPTIONS, + }); } - /** - * ** Get all DataJobs for provided OwnerTeam and load data based on provided gqlQuery. - */ - getJobs(ownerTeam: string, gqlQuery: string, variables: DataJobReqVariables): Observable> { - return this.getApolloClientFor(ownerTeam).query({ - query: gql` - ${gqlQuery} - `, - variables - }); - } + return this.apollo.use(ownerTeam) as ApolloBase; + } - /** - * ** Create Apollo watcher for gqlQuery. - */ - watchForJobs(ownerTeam: string, gqlQuery: string, variables: DataJobReqVariables): QueryRef { - return this.getApolloClientFor(ownerTeam).watchQuery({ - query: gql` - ${gqlQuery} - `, - variables - }); - } - - /** - * ** Get all DataJob Executions for provided OwnerTeam and load data based on provided gqlQuery. - */ - getExecutions( - ownerTeam: string, - gqlQuery: string, - variables: DataJobExecutionsReqVariables - ): Observable> { - return this.getApolloClientFor(ownerTeam).query({ - query: gql` - ${gqlQuery} - `, - variables - }); - } - - private getApolloClientFor(ownerTeam: string): ApolloBase { - if (!this.apollo.use(ownerTeam)) { - this.apollo.createNamed(ownerTeam, { - cache: new InMemoryCache({ - typePolicies: { - Query: { - fields: { - jobs: (_existing, _options) => { - return {}; - }, - executions: (_existing, _options) => { - return {}; - } - } - } - } - }), - link: this.httpLink.create({ - uri: `${this._resolvePipelinesServiceUrl()}/data-jobs/for-team/${ownerTeam}/jobs`, - method: DataJobsBaseApiService.APOLLO_METHOD - }), - defaultOptions: DataJobsBaseApiService.APOLLO_DEFAULT_OPTIONS - }); - } - - return this.apollo.use(ownerTeam) as ApolloBase; - } - - private _resolvePipelinesServiceUrl(): string { - return this.dataPipelinesConfig?.resourceServer?.getUrl ? this.dataPipelinesConfig.resourceServer.getUrl() : ''; - } + private _resolvePipelinesServiceUrl(): string { + return this.dataPipelinesConfig?.resourceServer?.getUrl + ? this.dataPipelinesConfig.resourceServer.getUrl() + : ""; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-public.api.service.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-public.api.service.spec.ts index 1f5df6a106..0cac495f55 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-public.api.service.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-public.api.service.spec.ts @@ -3,79 +3,91 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { TestBed } from '@angular/core/testing'; -import { HttpClient } from '@angular/common/http'; - -import { forkJoin, of, Subject } from 'rxjs'; - -import { ApolloQueryResult } from '@apollo/client/core'; - -import { ApiPredicate } from '@versatiledatakit/shared'; - -import { DATA_PIPELINES_CONFIGS, DataJobPage, DataPipelinesConfig } from '../model'; - -import { DataJobsBaseApiService } from './data-jobs-base.api.service'; -import { DataJobsPublicApiService } from './data-jobs-public.api.service'; - -describe('DataJobsPublicApiService', () => { - let dataJobsBaseServiceStub: jasmine.SpyObj; - let httpClientStub: jasmine.SpyObj; - - let service: DataJobsPublicApiService; - - beforeEach(() => { - dataJobsBaseServiceStub = jasmine.createSpyObj('dataJobsBaseServiceStub', ['getJobs']); - dataJobsBaseServiceStub.getJobs.and.returnValue(new Subject>()); - httpClientStub = jasmine.createSpyObj('httpClientService', ['get', 'post']); - - TestBed.configureTestingModule({ - providers: [ - DataJobsPublicApiService, - { provide: HttpClient, useValue: httpClientStub }, - { provide: DataJobsBaseApiService, useValue: dataJobsBaseServiceStub }, - { - provide: DATA_PIPELINES_CONFIGS, - useFactory: () => - ({ - resourceServer: { - getUrl: () => '' - }, - defaultOwnerTeamName: 'all' - }) as DataPipelinesConfig - } - ] - }); - service = TestBed.inject(DataJobsPublicApiService); - }); - - it('should be created', () => { - expect(service).toBeTruthy(); +import { TestBed } from "@angular/core/testing"; +import { HttpClient } from "@angular/common/http"; + +import { forkJoin, of, Subject } from "rxjs"; + +import { ApolloQueryResult } from "@apollo/client/core"; + +import { ApiPredicate } from "@versatiledatakit/shared"; + +import { + DATA_PIPELINES_CONFIGS, + DataJobPage, + DataPipelinesConfig, +} from "../model"; + +import { DataJobsBaseApiService } from "./data-jobs-base.api.service"; +import { DataJobsPublicApiService } from "./data-jobs-public.api.service"; + +describe("DataJobsPublicApiService", () => { + let dataJobsBaseServiceStub: jasmine.SpyObj; + let httpClientStub: jasmine.SpyObj; + + let service: DataJobsPublicApiService; + + beforeEach(() => { + dataJobsBaseServiceStub = jasmine.createSpyObj( + "dataJobsBaseServiceStub", + ["getJobs"], + ); + dataJobsBaseServiceStub.getJobs.and.returnValue( + new Subject>(), + ); + httpClientStub = jasmine.createSpyObj("httpClientService", [ + "get", + "post", + ]); + + TestBed.configureTestingModule({ + providers: [ + DataJobsPublicApiService, + { provide: HttpClient, useValue: httpClientStub }, + { provide: DataJobsBaseApiService, useValue: dataJobsBaseServiceStub }, + { + provide: DATA_PIPELINES_CONFIGS, + useFactory: () => + ({ + resourceServer: { + getUrl: () => "", + }, + defaultOwnerTeamName: "all", + }) as DataPipelinesConfig, + }, + ], }); - - describe('Methods::', () => { - describe('|getAllDataJobs|', () => { - it('should verify will make expected calls scenario 1', () => { - // Given - const apolloQueryResult: ApolloQueryResult = { - data: { - content: [{}], - totalItems: 1, - totalPages: 1 - }, - loading: false, - networkStatus: 7 - }; - const apolloQueryRef = of(apolloQueryResult); - - dataJobsBaseServiceStub.getJobs.and.returnValue(apolloQueryRef); - - // When - service.getAllDataJobs('teamA').subscribe(); - - // Then - expect(dataJobsBaseServiceStub.getJobs).toHaveBeenCalledWith( - 'teamA', - `query jobsQuery($filter: [Predicate], $search: String, $pageNumber: Int, $pageSize: Int) + service = TestBed.inject(DataJobsPublicApiService); + }); + + it("should be created", () => { + expect(service).toBeTruthy(); + }); + + describe("Methods::", () => { + describe("|getAllDataJobs|", () => { + it("should verify will make expected calls scenario 1", () => { + // Given + const apolloQueryResult: ApolloQueryResult = { + data: { + content: [{}], + totalItems: 1, + totalPages: 1, + }, + loading: false, + networkStatus: 7, + }; + const apolloQueryRef = of(apolloQueryResult); + + dataJobsBaseServiceStub.getJobs.and.returnValue(apolloQueryRef); + + // When + service.getAllDataJobs("teamA").subscribe(); + + // Then + expect(dataJobsBaseServiceStub.getJobs).toHaveBeenCalledWith( + "teamA", + `query jobsQuery($filter: [Predicate], $search: String, $pageNumber: Int, $pageSize: Int) { jobs(filter: $filter, search: $search, pageNumber: $pageNumber, pageSize: $pageSize) { content { @@ -90,36 +102,38 @@ describe('DataJobsPublicApiService', () => { totalItems } }`, - { - filter: [], - search: null, - pageNumber: 1, - pageSize: 1000 - } - ); - }); - - it('should verify will make expected calls scenario 2', (done) => { - // Given - const apolloQueryResult: ApolloQueryResult = { - data: { - content: [{}], - totalItems: 2500, - totalPages: 3 - }, - loading: false, - networkStatus: 7 - }; - const apolloQueryRef = of(apolloQueryResult); - let counter = 0; - - dataJobsBaseServiceStub.getJobs.and.returnValue(apolloQueryRef); - - // When/Then - service.getAllDataJobs('teamA').subscribe((value) => { - expect(dataJobsBaseServiceStub.getJobs.calls.argsFor(counter)).toEqual([ - 'teamA', - `query jobsQuery($filter: [Predicate], $search: String, $pageNumber: Int, $pageSize: Int) + { + filter: [], + search: null, + pageNumber: 1, + pageSize: 1000, + }, + ); + }); + + it("should verify will make expected calls scenario 2", (done) => { + // Given + const apolloQueryResult: ApolloQueryResult = { + data: { + content: [{}], + totalItems: 2500, + totalPages: 3, + }, + loading: false, + networkStatus: 7, + }; + const apolloQueryRef = of(apolloQueryResult); + let counter = 0; + + dataJobsBaseServiceStub.getJobs.and.returnValue(apolloQueryRef); + + // When/Then + service.getAllDataJobs("teamA").subscribe((value) => { + expect( + dataJobsBaseServiceStub.getJobs.calls.argsFor(counter), + ).toEqual([ + "teamA", + `query jobsQuery($filter: [Predicate], $search: String, $pageNumber: Int, $pageSize: Int) { jobs(filter: $filter, search: $search, pageNumber: $pageNumber, pageSize: $pageSize) { content { @@ -134,76 +148,76 @@ describe('DataJobsPublicApiService', () => { totalItems } }`, - { - filter: [], - search: null, - pageNumber: counter + 1, - pageSize: 1000 - } - ]); - - counter++; - - expect(value?.length).toEqual(counter); - - if (counter === 3) { - done(); - } - }); - }); + { + filter: [], + search: null, + pageNumber: counter + 1, + pageSize: 1000, + }, + ]); + + counter++; + + expect(value?.length).toEqual(counter); + + if (counter === 3) { + done(); + } }); + }); + }); - describe('|getDataJobsTotalForTeam|', () => { - it('should verify will make expected calls', (done) => { - // Given - const apolloQueryResult: ApolloQueryResult = { - data: { - content: [{}, {}, {}, {}, {}], - totalItems: 5, - totalPages: 1 - }, - loading: false, - networkStatus: 7 - }; - const assertionFilters: ApiPredicate[] = [ - { - property: 'config.team', - pattern: 'teamA', - sort: null - } - ]; - - dataJobsBaseServiceStub.getJobs.and.returnValues( - of(apolloQueryResult), - // eslint-disable-next-line @typescript-eslint/no-unsafe-argument - of(undefined), - of({ - ...apolloQueryResult, - data: undefined - }), - of({ - ...apolloQueryResult, - data: { - ...apolloQueryResult.data, - totalItems: undefined - } - }) - ); - - // When/Then - forkJoin([ - service.getDataJobsTotal('teamA'), - service.getDataJobsTotal('teamA'), - service.getDataJobsTotal('teamA'), - service.getDataJobsTotal('teamA') - ]).subscribe(([value1, value2, value3, value4]) => { - expect(value1).toEqual(5); - expect(value2).toEqual(0); - expect(value3).toEqual(0); - expect(value4).toEqual(0); - expect(dataJobsBaseServiceStub.getJobs).toHaveBeenCalledWith( - 'teamA', - `query jobsQuery($filter: [Predicate], $search: String, $pageNumber: Int, $pageSize: Int) + describe("|getDataJobsTotalForTeam|", () => { + it("should verify will make expected calls", (done) => { + // Given + const apolloQueryResult: ApolloQueryResult = { + data: { + content: [{}, {}, {}, {}, {}], + totalItems: 5, + totalPages: 1, + }, + loading: false, + networkStatus: 7, + }; + const assertionFilters: ApiPredicate[] = [ + { + property: "config.team", + pattern: "teamA", + sort: null, + }, + ]; + + dataJobsBaseServiceStub.getJobs.and.returnValues( + of(apolloQueryResult), + // eslint-disable-next-line @typescript-eslint/no-unsafe-argument + of(undefined), + of({ + ...apolloQueryResult, + data: undefined, + }), + of({ + ...apolloQueryResult, + data: { + ...apolloQueryResult.data, + totalItems: undefined, + }, + }), + ); + + // When/Then + forkJoin([ + service.getDataJobsTotal("teamA"), + service.getDataJobsTotal("teamA"), + service.getDataJobsTotal("teamA"), + service.getDataJobsTotal("teamA"), + ]).subscribe(([value1, value2, value3, value4]) => { + expect(value1).toEqual(5); + expect(value2).toEqual(0); + expect(value3).toEqual(0); + expect(value4).toEqual(0); + expect(dataJobsBaseServiceStub.getJobs).toHaveBeenCalledWith( + "teamA", + `query jobsQuery($filter: [Predicate], $search: String, $pageNumber: Int, $pageSize: Int) { jobs(filter: $filter, search: $search, pageNumber: $pageNumber, pageSize: $pageSize) { content { @@ -216,17 +230,17 @@ describe('DataJobsPublicApiService', () => { totalItems } }`, - { - filter: assertionFilters, - search: null, - pageNumber: 1, - pageSize: 1 - } - ); - - done(); - }); - }); + { + filter: assertionFilters, + search: null, + pageNumber: 1, + pageSize: 1, + }, + ); + + done(); }); + }); }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-public.api.service.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-public.api.service.ts index 82d163fe53..64096d053c 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-public.api.service.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs-public.api.service.ts @@ -3,95 +3,104 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Inject, Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; +import { Inject, Injectable } from "@angular/core"; +import { HttpClient } from "@angular/common/http"; -import { EMPTY, expand, Observable, throwError } from 'rxjs'; -import { catchError, map } from 'rxjs/operators'; +import { EMPTY, expand, Observable, throwError } from "rxjs"; +import { catchError, map } from "rxjs/operators"; -import { ApiPredicate, TaurusBaseApiService } from '@versatiledatakit/shared'; +import { ApiPredicate, TaurusBaseApiService } from "@versatiledatakit/shared"; -import { ErrorUtil } from '../shared/utils'; +import { ErrorUtil } from "../shared/utils"; -import { DATA_PIPELINES_CONFIGS, DataJob, DataJobPage, DataPipelinesConfig, IPcsOAuthDto } from '../model'; +import { + DATA_PIPELINES_CONFIGS, + DataJob, + DataJobPage, + DataPipelinesConfig, + IPcsOAuthDto, +} from "../model"; -import { DataJobsBaseApiService } from './data-jobs-base.api.service'; +import { DataJobsBaseApiService } from "./data-jobs-base.api.service"; @Injectable() export class DataJobsPublicApiService extends TaurusBaseApiService { - /** - * @inheritDoc - */ - static override readonly CLASS_NAME: string = 'DataJobsPublicApiService'; - - /** - * @inheritDoc - */ - static override readonly PUBLIC_NAME: string = 'Data-Pipelines-Service'; - - /** - * ** Constructor. - */ - constructor( - @Inject(DATA_PIPELINES_CONFIGS) private readonly dataPipelinesConfig: DataPipelinesConfig, - private readonly dataJobsBaseService: DataJobsBaseApiService, - private readonly httpClient: HttpClient - ) { - super(DataJobsPublicApiService.CLASS_NAME); - - this.registerErrorCodes(DataJobsPublicApiService); - } - - /** - * ** Retrieve all DataJobs for Team. - */ - getAllDataJobs(team: string): Observable< - Array<{ - jobName?: string; - config?: { - team?: string; - description?: string; - sourceUrl?: string; - }; - }> - > { - const pageSize = 1000; - let pageNumber = 1; - let dataJobs: DataJob[] = []; - - return this._getDataJobsPage(team, pageNumber, pageSize).pipe( - expand((dataJobPage) => { - if (dataJobPage.totalPages <= pageNumber) { - return EMPTY; - } else { - return this._getDataJobsPage(team, ++pageNumber, pageSize); - } - }), - map((dataJobPage) => { - dataJobs = dataJobs.concat(dataJobPage.content as unknown as DataJob[]); - - return dataJobs; - }), - catchError((error: unknown) => throwError(() => ErrorUtil.extractError(error as Error))) - ); - } - - /** - * ** Get total number of Data Jobs assets for Team. - */ - getDataJobsTotal(team: string): Observable { - const filters: ApiPredicate[] = [ - { - property: 'config.team', - pattern: team, - sort: null - } - ]; - - return this.dataJobsBaseService - .getJobs( - team, - `query jobsQuery($filter: [Predicate], $search: String, $pageNumber: Int, $pageSize: Int) + /** + * @inheritDoc + */ + static override readonly CLASS_NAME: string = "DataJobsPublicApiService"; + + /** + * @inheritDoc + */ + static override readonly PUBLIC_NAME: string = "Data-Pipelines-Service"; + + /** + * ** Constructor. + */ + constructor( + @Inject(DATA_PIPELINES_CONFIGS) + private readonly dataPipelinesConfig: DataPipelinesConfig, + private readonly dataJobsBaseService: DataJobsBaseApiService, + private readonly httpClient: HttpClient, + ) { + super(DataJobsPublicApiService.CLASS_NAME); + + this.registerErrorCodes(DataJobsPublicApiService); + } + + /** + * ** Retrieve all DataJobs for Team. + */ + getAllDataJobs(team: string): Observable< + Array<{ + jobName?: string; + config?: { + team?: string; + description?: string; + sourceUrl?: string; + }; + }> + > { + const pageSize = 1000; + let pageNumber = 1; + let dataJobs: DataJob[] = []; + + return this._getDataJobsPage(team, pageNumber, pageSize).pipe( + expand((dataJobPage) => { + if (dataJobPage.totalPages <= pageNumber) { + return EMPTY; + } else { + return this._getDataJobsPage(team, ++pageNumber, pageSize); + } + }), + map((dataJobPage) => { + dataJobs = dataJobs.concat(dataJobPage.content as unknown as DataJob[]); + + return dataJobs; + }), + catchError((error: unknown) => + throwError(() => ErrorUtil.extractError(error as Error)), + ), + ); + } + + /** + * ** Get total number of Data Jobs assets for Team. + */ + getDataJobsTotal(team: string): Observable { + const filters: ApiPredicate[] = [ + { + property: "config.team", + pattern: team, + sort: null, + }, + ]; + + return this.dataJobsBaseService + .getJobs( + team, + `query jobsQuery($filter: [Predicate], $search: String, $pageNumber: Int, $pageSize: Int) { jobs(filter: $filter, search: $search, pageNumber: $pageNumber, pageSize: $pageSize) { content { @@ -104,52 +113,56 @@ export class DataJobsPublicApiService extends TaurusBaseApiService response?.data?.totalItems ?? 0), - catchError((error: unknown) => throwError(() => ErrorUtil.extractError(error as Error))) - ); - } - - /** - * ** Returns OAuth app client id for given Team name. - */ - getTeamOAuthClientId(teamName: string): Observable { - return this.httpClient.get( - `${this._resolvePipelinesServiceUrl()}/data-jobs/teams/${teamName}/oauth-credentials/client-id` - ); - } - - /** - * ** Returns inventory of found OAuth apps client ids for given Team names. - */ - getInventoryOfTeamsOAuthClientIds(clientIds: string[]): Observable { - return this.httpClient.post( - `${this._resolvePipelinesServiceUrl()}/data-jobs/oauth-credentials/client-ids`, - clientIds - ); - } - - /** - * ** Retrieve the data-jobs page. - */ - private _getDataJobsPage( - team: string, - pageNumber: number, - pageSize: number, - filters: ApiPredicate[] = [], - searchQueryValue: string = null - ): Observable { - return this.dataJobsBaseService - .getJobs( - team, - `query jobsQuery($filter: [Predicate], $search: String, $pageNumber: Int, $pageSize: Int) + { + filter: filters, + search: null, + pageNumber: 1, + pageSize: 1, + }, + ) + .pipe( + map((response) => response?.data?.totalItems ?? 0), + catchError((error: unknown) => + throwError(() => ErrorUtil.extractError(error as Error)), + ), + ); + } + + /** + * ** Returns OAuth app client id for given Team name. + */ + getTeamOAuthClientId(teamName: string): Observable { + return this.httpClient.get( + `${this._resolvePipelinesServiceUrl()}/data-jobs/teams/${teamName}/oauth-credentials/client-id`, + ); + } + + /** + * ** Returns inventory of found OAuth apps client ids for given Team names. + */ + getInventoryOfTeamsOAuthClientIds( + clientIds: string[], + ): Observable { + return this.httpClient.post( + `${this._resolvePipelinesServiceUrl()}/data-jobs/oauth-credentials/client-ids`, + clientIds, + ); + } + + /** + * ** Retrieve the data-jobs page. + */ + private _getDataJobsPage( + team: string, + pageNumber: number, + pageSize: number, + filters: ApiPredicate[] = [], + searchQueryValue: string = null, + ): Observable { + return this.dataJobsBaseService + .getJobs( + team, + `query jobsQuery($filter: [Predicate], $search: String, $pageNumber: Int, $pageSize: Int) { jobs(filter: $filter, search: $search, pageNumber: $pageNumber, pageSize: $pageSize) { content { @@ -164,17 +177,19 @@ export class DataJobsPublicApiService extends TaurusBaseApiService response.data)); - } - - private _resolvePipelinesServiceUrl(): string { - return this.dataPipelinesConfig?.resourceServer?.getUrl ? this.dataPipelinesConfig.resourceServer.getUrl() : ''; - } + { + filter: filters, + search: searchQueryValue, + pageNumber, + pageSize, + }, + ) + .pipe(map((response) => response.data)); + } + + private _resolvePipelinesServiceUrl(): string { + return this.dataPipelinesConfig?.resourceServer?.getUrl + ? this.dataPipelinesConfig.resourceServer.getUrl() + : ""; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.api.service.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.api.service.spec.ts index 6ff584b65e..48f636ef45 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.api.service.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.api.service.spec.ts @@ -3,100 +3,109 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { TestBed } from '@angular/core/testing'; -import { HttpClient } from '@angular/common/http'; +import { TestBed } from "@angular/core/testing"; +import { HttpClient } from "@angular/common/http"; -import { of } from 'rxjs'; +import { of } from "rxjs"; -import { ApolloQueryResult } from '@apollo/client/core'; +import { ApolloQueryResult } from "@apollo/client/core"; import { - DATA_PIPELINES_CONFIGS, - DataJob, - DataJobPage, - DataPipelinesConfig, - MISSING_DEFAULT_TEAM_MESSAGE, - RESERVED_DEFAULT_TEAM_NAME_MESSAGE -} from '../model'; - -import { DataJobsBaseApiService } from './data-jobs-base.api.service'; - -import { DataJobsApiService } from './data-jobs.api.service'; - -describe('DataJobsApiService', () => { - let service: DataJobsApiService; - let dataJobsBaseServiceStub: jasmine.SpyObj; - let httpClientStub: jasmine.SpyObj; - - const TEST_JOB_DETAILS = { - /* eslint-disable-next-line @typescript-eslint/naming-convention */ - job_name: 'job001', - team: 'taurus', - description: 'descpription001' - }; - - beforeEach(() => { - dataJobsBaseServiceStub = jasmine.createSpyObj('dataJobsBaseService', ['getJobs']); - httpClientStub = jasmine.createSpyObj('httpClient', ['get', 'post', 'patch', 'put', 'delete']); - - httpClientStub.get.and.returnValue(of({})); - httpClientStub.post.and.returnValue(of({})); - httpClientStub.patch.and.returnValue(of({})); - httpClientStub.put.and.returnValue(of({})); - httpClientStub.delete.and.returnValue(of({})); - - TestBed.configureTestingModule({ - providers: [ - DataJobsApiService, - { provide: HttpClient, useValue: httpClientStub }, - { - provide: DataJobsBaseApiService, - useValue: dataJobsBaseServiceStub - }, - { - provide: DATA_PIPELINES_CONFIGS, - useFactory: () => - ({ - resourceServer: { - getUrl: () => '' - }, - defaultOwnerTeamName: 'all' - }) as DataPipelinesConfig - } - ] - }); - - service = TestBed.inject(DataJobsApiService); + DATA_PIPELINES_CONFIGS, + DataJob, + DataJobPage, + DataPipelinesConfig, + MISSING_DEFAULT_TEAM_MESSAGE, + RESERVED_DEFAULT_TEAM_NAME_MESSAGE, +} from "../model"; + +import { DataJobsBaseApiService } from "./data-jobs-base.api.service"; + +import { DataJobsApiService } from "./data-jobs.api.service"; + +describe("DataJobsApiService", () => { + let service: DataJobsApiService; + let dataJobsBaseServiceStub: jasmine.SpyObj; + let httpClientStub: jasmine.SpyObj; + + const TEST_JOB_DETAILS = { + /* eslint-disable-next-line @typescript-eslint/naming-convention */ + job_name: "job001", + team: "taurus", + description: "descpription001", + }; + + beforeEach(() => { + dataJobsBaseServiceStub = jasmine.createSpyObj( + "dataJobsBaseService", + ["getJobs"], + ); + httpClientStub = jasmine.createSpyObj("httpClient", [ + "get", + "post", + "patch", + "put", + "delete", + ]); + + httpClientStub.get.and.returnValue(of({})); + httpClientStub.post.and.returnValue(of({})); + httpClientStub.patch.and.returnValue(of({})); + httpClientStub.put.and.returnValue(of({})); + httpClientStub.delete.and.returnValue(of({})); + + TestBed.configureTestingModule({ + providers: [ + DataJobsApiService, + { provide: HttpClient, useValue: httpClientStub }, + { + provide: DataJobsBaseApiService, + useValue: dataJobsBaseServiceStub, + }, + { + provide: DATA_PIPELINES_CONFIGS, + useFactory: () => + ({ + resourceServer: { + getUrl: () => "", + }, + defaultOwnerTeamName: "all", + }) as DataPipelinesConfig, + }, + ], }); - it('can load instance', () => { - expect(service).toBeTruthy(); - }); - - describe('Methods::', () => { - describe('|getJobs|', () => { - it('should verify will make expected calls', () => { - // Given - const apolloQueryResult: ApolloQueryResult = { - data: { - content: [{}], - totalItems: 1, - totalPages: 1 - }, - loading: false, - networkStatus: 7 - }; - const apolloQueryRef = of(apolloQueryResult); - - dataJobsBaseServiceStub.getJobs.and.returnValue(apolloQueryRef); - - // When - service.getJobs([], 'searchQueryValue', 1, 1); - - // Then - expect(dataJobsBaseServiceStub.getJobs).toHaveBeenCalledWith( - 'all', - `query jobsQuery($filter: [Predicate], $search: String, $pageNumber: Int, $pageSize: Int) + service = TestBed.inject(DataJobsApiService); + }); + + it("can load instance", () => { + expect(service).toBeTruthy(); + }); + + describe("Methods::", () => { + describe("|getJobs|", () => { + it("should verify will make expected calls", () => { + // Given + const apolloQueryResult: ApolloQueryResult = { + data: { + content: [{}], + totalItems: 1, + totalPages: 1, + }, + loading: false, + networkStatus: 7, + }; + const apolloQueryRef = of(apolloQueryResult); + + dataJobsBaseServiceStub.getJobs.and.returnValue(apolloQueryRef); + + // When + service.getJobs([], "searchQueryValue", 1, 1); + + // Then + expect(dataJobsBaseServiceStub.getJobs).toHaveBeenCalledWith( + "all", + `query jobsQuery($filter: [Predicate], $search: String, $pageNumber: Int, $pageSize: Int) { jobs(pageNumber: $pageNumber, pageSize: $pageSize, filter: $filter, search: $search) { content { @@ -139,37 +148,37 @@ describe('DataJobsApiService', () => { totalItems } }`, - { - pageNumber: 1, - pageSize: 1, - filter: [], - search: 'searchQueryValue' - } - ); - }); - }); - - describe('|getJobListState|', () => { - it('should verify will make expected calls', () => { - // Given - const apolloQueryResult: ApolloQueryResult = { - data: { - content: [{}], - totalItems: 1, - totalPages: 1 - }, - loading: false, - networkStatus: 7 - }; - dataJobsBaseServiceStub.getJobs.and.returnValue(of(apolloQueryResult)); - - // When - service.getJob('supercollider_demo', 'test-job-taur'); - - // Then - expect(dataJobsBaseServiceStub.getJobs).toHaveBeenCalledWith( - 'supercollider_demo', - `query jobsQuery($filter: [Predicate]) + { + pageNumber: 1, + pageSize: 1, + filter: [], + search: "searchQueryValue", + }, + ); + }); + }); + + describe("|getJobListState|", () => { + it("should verify will make expected calls", () => { + // Given + const apolloQueryResult: ApolloQueryResult = { + data: { + content: [{}], + totalItems: 1, + totalPages: 1, + }, + loading: false, + networkStatus: 7, + }; + dataJobsBaseServiceStub.getJobs.and.returnValue(of(apolloQueryResult)); + + // When + service.getJob("supercollider_demo", "test-job-taur"); + + // Then + expect(dataJobsBaseServiceStub.getJobs).toHaveBeenCalledWith( + "supercollider_demo", + `query jobsQuery($filter: [Predicate]) { jobs(pageNumber: 1, pageSize: 1, filter: $filter) { content { @@ -207,209 +216,251 @@ describe('DataJobsApiService', () => { totalItems } }`, - { - filter: [ - { - property: 'config.team', - pattern: 'supercollider_demo', - sort: null - }, - { - property: 'jobName', - pattern: 'test-job-taur', - sort: null - } - ] - } - ); - }); - - it('should verify will return expected data for given response', (done) => { - // Given - const dataJob: DataJob = {}; - const apolloQueryResult1: ApolloQueryResult = undefined; - const apolloQueryResult2: ApolloQueryResult = { - data: undefined, - loading: false, - networkStatus: 7 - }; - const apolloQueryResult3: ApolloQueryResult = { - data: { - content: undefined - }, - loading: false, - networkStatus: 7 - }; - const apolloQueryResult4: ApolloQueryResult = { - data: { - content: [] - }, - loading: false, - networkStatus: 7 - }; - const apolloQueryResult5: ApolloQueryResult = { - data: { - content: [dataJob], - totalItems: 1, - totalPages: 1 - }, - loading: false, - networkStatus: 7 - }; - dataJobsBaseServiceStub.getJobs.and.returnValues( - of(apolloQueryResult1), - of(apolloQueryResult2), - of(apolloQueryResult3), - of(apolloQueryResult4), - of(apolloQueryResult5) - ); - - const executeNextCall = (executionId) => { - if (executionId === 4) { - service.getJob('supercollider_demo', 'test-job-taur').subscribe((value) => { - expect(value).toBe(dataJob); - done(); - }); - } else { - service.getJob('supercollider_demo', 'test-job-taur').subscribe((value) => { - expect(value).toBeNull(); - executeNextCall(++executionId); - }); - } - }; - - // When/Then - executeNextCall(0); - }); - }); - - describe('|getJobExecution|', () => { - it('should verify will make expected calls', () => { - // Given - const teamName = 'teamA'; - const jobName = 'jobA'; - const executionId = 'executionA'; - - // When - const response = service.getJobExecution(teamName, jobName, executionId); - - // Then - expect(response).toBeDefined(); - expect(httpClientStub.get).toHaveBeenCalledWith( - `/data-jobs/for-team/${teamName}/jobs/${jobName}/executions/${executionId}` - ); - }); - }); + { + filter: [ + { + property: "config.team", + pattern: "supercollider_demo", + sort: null, + }, + { + property: "jobName", + pattern: "test-job-taur", + sort: null, + }, + ], + }, + ); + }); + + it("should verify will return expected data for given response", (done) => { + // Given + const dataJob: DataJob = {}; + const apolloQueryResult1: ApolloQueryResult = undefined; + const apolloQueryResult2: ApolloQueryResult = { + data: undefined, + loading: false, + networkStatus: 7, + }; + const apolloQueryResult3: ApolloQueryResult = { + data: { + content: undefined, + }, + loading: false, + networkStatus: 7, + }; + const apolloQueryResult4: ApolloQueryResult = { + data: { + content: [], + }, + loading: false, + networkStatus: 7, + }; + const apolloQueryResult5: ApolloQueryResult = { + data: { + content: [dataJob], + totalItems: 1, + totalPages: 1, + }, + loading: false, + networkStatus: 7, + }; + dataJobsBaseServiceStub.getJobs.and.returnValues( + of(apolloQueryResult1), + of(apolloQueryResult2), + of(apolloQueryResult3), + of(apolloQueryResult4), + of(apolloQueryResult5), + ); + + const executeNextCall = (executionId) => { + if (executionId === 4) { + service + .getJob("supercollider_demo", "test-job-taur") + .subscribe((value) => { + expect(value).toBe(dataJob); + done(); + }); + } else { + service + .getJob("supercollider_demo", "test-job-taur") + .subscribe((value) => { + expect(value).toBeNull(); + executeNextCall(++executionId); + }); + } + }; + + // When/Then + executeNextCall(0); + }); }); - describe('validateModuleConfig', () => { - it('validates dataPipelinesModuleConfig with empty defaultOwnerTeamName', () => { - expect(() => - // @ts-ignore - service._validateModuleConfig({ - defaultOwnerTeamName: '' - }) - ).toThrow(new Error(MISSING_DEFAULT_TEAM_MESSAGE)); - }); - - it('validates dataPipelinesModuleConfig with reserved defaultOwnerTeamName', () => { - expect(() => - // @ts-ignore - service._validateModuleConfig({ - defaultOwnerTeamName: 'default' - }) - ).toThrow(new Error(RESERVED_DEFAULT_TEAM_NAME_MESSAGE)); - }); + describe("|getJobExecution|", () => { + it("should verify will make expected calls", () => { + // Given + const teamName = "teamA"; + const jobName = "jobA"; + const executionId = "executionA"; + + // When + const response = service.getJobExecution( + teamName, + jobName, + executionId, + ); + + // Then + expect(response).toBeDefined(); + expect(httpClientStub.get).toHaveBeenCalledWith( + `/data-jobs/for-team/${teamName}/jobs/${jobName}/executions/${executionId}`, + ); + }); }); - - describe('getJobDetails', () => { - it('returs observable', () => { - const jobDetailsObservable = service.getJobDetails('team001', 'job001'); - expect(jobDetailsObservable).toBeDefined(); - }); + }); + + describe("validateModuleConfig", () => { + it("validates dataPipelinesModuleConfig with empty defaultOwnerTeamName", () => { + expect(() => + // @ts-ignore + service._validateModuleConfig({ + defaultOwnerTeamName: "", + }), + ).toThrow(new Error(MISSING_DEFAULT_TEAM_MESSAGE)); }); - describe('removeJob', () => { - it('returs observable', () => { - const removeJobObservable = service.removeJob('team001', 'job001'); - expect(removeJobObservable).toBeDefined(); - }); + it("validates dataPipelinesModuleConfig with reserved defaultOwnerTeamName", () => { + expect(() => + // @ts-ignore + service._validateModuleConfig({ + defaultOwnerTeamName: "default", + }), + ).toThrow(new Error(RESERVED_DEFAULT_TEAM_NAME_MESSAGE)); }); + }); - describe('downloadFile', () => { - it('returs observable', () => { - const downloadFileObservable = service.downloadFile('team001', 'job001'); - expect(downloadFileObservable).toBeDefined(); - }); + describe("getJobDetails", () => { + it("returs observable", () => { + const jobDetailsObservable = service.getJobDetails("team001", "job001"); + expect(jobDetailsObservable).toBeDefined(); }); + }); - describe('getJobDeployments', () => { - it('returs observable', () => { - const getJobDeploymentsObservable = service.getJobDeployments('team001', 'job001'); - expect(getJobDeploymentsObservable).toBeDefined(); - }); + describe("removeJob", () => { + it("returs observable", () => { + const removeJobObservable = service.removeJob("team001", "job001"); + expect(removeJobObservable).toBeDefined(); }); + }); - describe('updateDataJobStatus', () => { - it('returs observable', () => { - const updateDataJobStatusObservable = service.updateDataJobStatus('team001', 'job001', 'deploy001', false); - expect(updateDataJobStatusObservable).toBeDefined(); - }); + describe("downloadFile", () => { + it("returs observable", () => { + const downloadFileObservable = service.downloadFile("team001", "job001"); + expect(downloadFileObservable).toBeDefined(); }); - - describe('updateDataJobStatus', () => { - it('returs observable', () => { - const updateDataJobStatusObservable = service.updateDataJobStatus('team001', 'job001', null, false); - expect(updateDataJobStatusObservable).toBeDefined(); - }); + }); + + describe("getJobDeployments", () => { + it("returs observable", () => { + const getJobDeploymentsObservable = service.getJobDeployments( + "team001", + "job001", + ); + expect(getJobDeploymentsObservable).toBeDefined(); }); - - describe('updateDataJob', () => { - it('returs observable', () => { - const updateDataJobStatusObservable = service.updateDataJob('team001', 'job001', TEST_JOB_DETAILS); - expect(updateDataJobStatusObservable).toBeDefined(); - }); + }); + + describe("updateDataJobStatus", () => { + it("returs observable", () => { + const updateDataJobStatusObservable = service.updateDataJobStatus( + "team001", + "job001", + "deploy001", + false, + ); + expect(updateDataJobStatusObservable).toBeDefined(); }); - - describe('getJobExecutions', () => { - it('returs observable', () => { - const jobExecutionsObservable = service.getJobExecutions('team001', 'job001'); - expect(jobExecutionsObservable).toBeDefined(); - }); + }); + + describe("updateDataJobStatus", () => { + it("returs observable", () => { + const updateDataJobStatusObservable = service.updateDataJobStatus( + "team001", + "job001", + null, + false, + ); + expect(updateDataJobStatusObservable).toBeDefined(); }); - - describe('executeDataJob', () => { - it('returns observable', () => { - const teamName = 'team001'; - const jobName = 'job001'; - const deploymentId = 'hhw-dff-fgg-100'; - - const executeDataJobObservable = service.executeDataJob(teamName, jobName, deploymentId); - expect(executeDataJobObservable).toBeDefined(); - expect(httpClientStub.post).toHaveBeenCalledWith( - `/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments/${deploymentId}/executions`, - {} - ); - }); + }); + + describe("updateDataJob", () => { + it("returs observable", () => { + const updateDataJobStatusObservable = service.updateDataJob( + "team001", + "job001", + TEST_JOB_DETAILS, + ); + expect(updateDataJobStatusObservable).toBeDefined(); }); - - describe('cancelDataJob', () => { - it('returns observable', () => { - const teamName = 'team001'; - const jobName = 'job001'; - const deploymentId = 'hhw-dff-fgg-100'; - const executionId = 'hhw-dff-fgg-100'; - - const executeDataJobObservable = service.executeDataJob(teamName, jobName, deploymentId); - expect(executeDataJobObservable).toBeDefined(); - expect(httpClientStub.post).toHaveBeenCalledWith( - `/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments/${deploymentId}/executions`, - {} - ); - - const cancelExecutionDataJobObservable = service.cancelDataJobExecution(teamName, jobName, executionId); - expect(cancelExecutionDataJobObservable).toBeDefined(); - expect(httpClientStub.delete).toHaveBeenCalledWith(`/data-jobs/for-team/${teamName}/jobs/${jobName}/executions/${executionId}`); - }); + }); + + describe("getJobExecutions", () => { + it("returs observable", () => { + const jobExecutionsObservable = service.getJobExecutions( + "team001", + "job001", + ); + expect(jobExecutionsObservable).toBeDefined(); + }); + }); + + describe("executeDataJob", () => { + it("returns observable", () => { + const teamName = "team001"; + const jobName = "job001"; + const deploymentId = "hhw-dff-fgg-100"; + + const executeDataJobObservable = service.executeDataJob( + teamName, + jobName, + deploymentId, + ); + expect(executeDataJobObservable).toBeDefined(); + expect(httpClientStub.post).toHaveBeenCalledWith( + `/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments/${deploymentId}/executions`, + {}, + ); + }); + }); + + describe("cancelDataJob", () => { + it("returns observable", () => { + const teamName = "team001"; + const jobName = "job001"; + const deploymentId = "hhw-dff-fgg-100"; + const executionId = "hhw-dff-fgg-100"; + + const executeDataJobObservable = service.executeDataJob( + teamName, + jobName, + deploymentId, + ); + expect(executeDataJobObservable).toBeDefined(); + expect(httpClientStub.post).toHaveBeenCalledWith( + `/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments/${deploymentId}/executions`, + {}, + ); + + const cancelExecutionDataJobObservable = service.cancelDataJobExecution( + teamName, + jobName, + executionId, + ); + expect(cancelExecutionDataJobObservable).toBeDefined(); + expect(httpClientStub.delete).toHaveBeenCalledWith( + `/data-jobs/for-team/${teamName}/jobs/${jobName}/executions/${executionId}`, + ); }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.api.service.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.api.service.ts index f22bdf3551..7c22f30bea 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.api.service.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.api.service.ts @@ -3,78 +3,85 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Inject, Injectable } from '@angular/core'; -import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { Inject, Injectable } from "@angular/core"; +import { HttpClient, HttpHeaders } from "@angular/common/http"; -import { Observable } from 'rxjs'; -import { map } from 'rxjs/operators'; +import { Observable } from "rxjs"; +import { map } from "rxjs/operators"; -import { ApolloQueryResult } from '@apollo/client/core'; +import { ApolloQueryResult } from "@apollo/client/core"; -import { ApiPredicate, CollectionsUtil, TaurusBaseApiService } from '@versatiledatakit/shared'; +import { + ApiPredicate, + CollectionsUtil, + TaurusBaseApiService, +} from "@versatiledatakit/shared"; import { - DATA_PIPELINES_CONFIGS, - DataJob, - DataJobDeploymentDetails, - DataJobDetails, - DataJobExecutionDetails, - DataJobExecutionFilter, - DataJobExecutionOrder, - DataJobExecutionsPage, - DataJobPage, - DataPipelinesConfig, - MISSING_DEFAULT_TEAM_MESSAGE, - RESERVED_DEFAULT_TEAM_NAME_MESSAGE -} from '../model'; - -import { DataJobsBaseApiService } from './data-jobs-base.api.service'; + DATA_PIPELINES_CONFIGS, + DataJob, + DataJobDeploymentDetails, + DataJobDetails, + DataJobExecutionDetails, + DataJobExecutionFilter, + DataJobExecutionOrder, + DataJobExecutionsPage, + DataJobPage, + DataPipelinesConfig, + MISSING_DEFAULT_TEAM_MESSAGE, + RESERVED_DEFAULT_TEAM_NAME_MESSAGE, +} from "../model"; + +import { DataJobsBaseApiService } from "./data-jobs-base.api.service"; @Injectable() export class DataJobsApiService extends TaurusBaseApiService { - /** - * @inheritDoc - */ - static override readonly CLASS_NAME: string = 'DataJobsApiService'; - - /** - * @inheritDoc - */ - static override readonly PUBLIC_NAME: string = 'Data-Pipelines-Service'; - - ownerTeamName: string; - - constructor( - @Inject(DATA_PIPELINES_CONFIGS) private readonly dataPipelinesConfig: DataPipelinesConfig, - private readonly http: HttpClient, - private readonly dataJobsBaseService: DataJobsBaseApiService - ) { - super(DataJobsApiService.CLASS_NAME); - - this.registerErrorCodes(DataJobsApiService); - - this._validateModuleConfig(this.dataPipelinesConfig); - - this.ownerTeamName = this.dataPipelinesConfig?.defaultOwnerTeamName; - if (this.dataPipelinesConfig?.ownerTeamNamesObservable) { - this.dataPipelinesConfig.ownerTeamNamesObservable.subscribe((result: string[]) => { - if (result?.length) { - //Take the first element from the teams array - this.ownerTeamName = result[0]; - } - }); - } + /** + * @inheritDoc + */ + static override readonly CLASS_NAME: string = "DataJobsApiService"; + + /** + * @inheritDoc + */ + static override readonly PUBLIC_NAME: string = "Data-Pipelines-Service"; + + ownerTeamName: string; + + constructor( + @Inject(DATA_PIPELINES_CONFIGS) + private readonly dataPipelinesConfig: DataPipelinesConfig, + private readonly http: HttpClient, + private readonly dataJobsBaseService: DataJobsBaseApiService, + ) { + super(DataJobsApiService.CLASS_NAME); + + this.registerErrorCodes(DataJobsApiService); + + this._validateModuleConfig(this.dataPipelinesConfig); + + this.ownerTeamName = this.dataPipelinesConfig?.defaultOwnerTeamName; + if (this.dataPipelinesConfig?.ownerTeamNamesObservable) { + this.dataPipelinesConfig.ownerTeamNamesObservable.subscribe( + (result: string[]) => { + if (result?.length) { + //Take the first element from the teams array + this.ownerTeamName = result[0]; + } + }, + ); } - - getJobs( - filters: ApiPredicate[], - searchQueryValue: string, - pageNumber: number, - pageSize: number - ): Observable> { - return this.dataJobsBaseService.getJobs( - this.ownerTeamName, - `query jobsQuery($filter: [Predicate], $search: String, $pageNumber: Int, $pageSize: Int) + } + + getJobs( + filters: ApiPredicate[], + searchQueryValue: string, + pageNumber: number, + pageSize: number, + ): Observable> { + return this.dataJobsBaseService.getJobs( + this.ownerTeamName, + `query jobsQuery($filter: [Predicate], $search: String, $pageNumber: Int, $pageSize: Int) { jobs(pageNumber: $pageNumber, pageSize: $pageSize, filter: $filter, search: $search) { content { @@ -117,20 +124,20 @@ export class DataJobsApiService extends TaurusBaseApiService totalItems } }`, - { - pageNumber, - pageSize, - filter: filters, - search: searchQueryValue - } - ); - } - - getJob(teamName: string, jobName: string): Observable { - return this.dataJobsBaseService - .getJobs( - teamName, - `query jobsQuery($filter: [Predicate]) + { + pageNumber, + pageSize, + filter: filters, + search: searchQueryValue, + }, + ); + } + + getJob(teamName: string, jobName: string): Observable { + return this.dataJobsBaseService + .getJobs( + teamName, + `query jobsQuery($filter: [Predicate]) { jobs(pageNumber: 1, pageSize: 1, filter: $filter) { content { @@ -168,78 +175,91 @@ export class DataJobsApiService extends TaurusBaseApiService totalItems } }`, - { - filter: this._createTeamJobNameFilter(teamName, jobName) - } - ) - .pipe( - map((response: ApolloQueryResult) => { - if (!CollectionsUtil.isArray(response?.data?.content) || response.data.content.length === 0) { - return null; - } - - return response.data.content[0]; - }) - ); + { + filter: this._createTeamJobNameFilter(teamName, jobName), + }, + ) + .pipe( + map((response: ApolloQueryResult) => { + if ( + !CollectionsUtil.isArray(response?.data?.content) || + response.data.content.length === 0 + ) { + return null; + } + + return response.data.content[0]; + }), + ); + } + + getJobDetails(teamName: string, jobName: string): Observable { + return this.http.get( + `${this._resolvePipelinesServiceUrl()}/data-jobs/for-team/${teamName}/jobs/${jobName}`, + ); + } + + removeJob(teamName: string, jobName: string): Observable { + return this.http.delete( + `${this._resolvePipelinesServiceUrl()}/data-jobs/for-team/${teamName}/jobs/${jobName}`, + ); + } + + downloadFile(teamName: string, jobName: string): Observable { + const httpHeaders = new HttpHeaders(); + httpHeaders.append("Accept", "application/octet-stream"); + + return this.http.get( + `${this._resolvePipelinesServiceUrl()}/data-jobs/for-team/${teamName}/jobs/${jobName}/keytab`, + { + headers: httpHeaders, + responseType: "blob", + }, + ); + } + + getJobExecutions( + teamName: string, + jobName: string, + ): Observable; + getJobExecutions( + teamName: string, + jobName: string, + forceGraphQL: boolean, + filter?: DataJobExecutionFilter, + order?: DataJobExecutionOrder, + pageNumber?: number, + pageSize?: number, + ): Observable; + getJobExecutions( + teamName: string, + jobName: string, + forceGraphQL = false, + filter: DataJobExecutionFilter = null, + order: DataJobExecutionOrder = null, + pageNumber: number = null, + pageSize: number = null, + ): Observable | Observable { + if (!forceGraphQL) { + return this.http.get( + `${this._resolvePipelinesServiceUrl()}/data-jobs/for-team/${teamName}/jobs/${jobName}/executions`, + ); } - getJobDetails(teamName: string, jobName: string): Observable { - return this.http.get(`${this._resolvePipelinesServiceUrl()}/data-jobs/for-team/${teamName}/jobs/${jobName}`); - } + const preparedFilter = { ...(filter ?? {}) }; - removeJob(teamName: string, jobName: string): Observable { - return this.http.delete(`${this._resolvePipelinesServiceUrl()}/data-jobs/for-team/${teamName}/jobs/${jobName}`); + if (jobName.length > 0) { + if (CollectionsUtil.isArray(preparedFilter.jobNameIn)) { + preparedFilter.jobNameIn.push(jobName); + } else { + preparedFilter.jobNameIn = [jobName]; + } } - downloadFile(teamName: string, jobName: string): Observable { - const httpHeaders = new HttpHeaders(); - httpHeaders.append('Accept', 'application/octet-stream'); - - return this.http.get(`${this._resolvePipelinesServiceUrl()}/data-jobs/for-team/${teamName}/jobs/${jobName}/keytab`, { - headers: httpHeaders, - responseType: 'blob' - }); - } - - getJobExecutions(teamName: string, jobName: string): Observable; - getJobExecutions( - teamName: string, - jobName: string, - forceGraphQL: boolean, - filter?: DataJobExecutionFilter, - order?: DataJobExecutionOrder, - pageNumber?: number, - pageSize?: number - ): Observable; - getJobExecutions( - teamName: string, - jobName: string, - forceGraphQL = false, - filter: DataJobExecutionFilter = null, - order: DataJobExecutionOrder = null, - pageNumber: number = null, - pageSize: number = null - ): Observable | Observable { - if (!forceGraphQL) { - return this.http.get( - `${this._resolvePipelinesServiceUrl()}/data-jobs/for-team/${teamName}/jobs/${jobName}/executions` - ); - } - - const preparedFilter = { ...(filter ?? {}) }; - - if (jobName.length > 0) { - if (CollectionsUtil.isArray(preparedFilter.jobNameIn)) { - preparedFilter.jobNameIn.push(jobName); - } else { - preparedFilter.jobNameIn = [jobName]; - } - } - - return this.dataJobsBaseService - .getExecutions( - teamName, - `query jobsQuery($pageNumber: Int, $pageSize: Int, $filter: DataJobExecutionFilter, $order: DataJobExecutionOrder) + return this.dataJobsBaseService + .getExecutions( + teamName, + `query jobsQuery($pageNumber: Int, $pageSize: Int, $filter: DataJobExecutionFilter, $order: DataJobExecutionOrder) { executions(pageNumber: $pageNumber, pageSize: $pageSize, filter: $filter, order: $order) { content { @@ -276,85 +296,108 @@ export class DataJobsApiService extends TaurusBaseApiService totalItems } }`, - { - pageNumber: pageNumber ?? 1, - pageSize: pageSize ?? 500, - filter: preparedFilter, - order: order ?? null - } - ) - .pipe(map((response) => response.data)); - } - - getJobExecution(teamName: string, jobName: string, executionId: string): Observable { - return this.http.get( - `${this._resolvePipelinesServiceUrl()}/data-jobs/for-team/${teamName}/jobs/${jobName}/executions/${executionId}` - ); - } - - getJobDeployments(teamName: string, jobName: string): Observable { - return this.http.get( - `${this._resolvePipelinesServiceUrl()}/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments` - ); - } - - updateDataJobStatus( - teamName: string, - jobName: string, - deploymentId: string, - dataJobEnabled: boolean - ): Observable<{ enabled: boolean }> { - const deploymentStatus = { enabled: dataJobEnabled }; - - if (!deploymentId) { - console.log(`Status update will be processed with default deploymentId`); - deploymentId = 'default'; - } - - return this.http.patch<{ enabled: boolean }>( - `${this._resolvePipelinesServiceUrl()}/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments/${deploymentId}`, - deploymentStatus - ); - } - - updateDataJob(teamName: string, jobName: string, dataJob: DataJobDetails): Observable { - return this.http.put( - `${this._resolvePipelinesServiceUrl()}/data-jobs/for-team/${teamName}/jobs/${jobName}`, - dataJob - ); + { + pageNumber: pageNumber ?? 1, + pageSize: pageSize ?? 500, + filter: preparedFilter, + order: order ?? null, + }, + ) + .pipe(map((response) => response.data)); + } + + getJobExecution( + teamName: string, + jobName: string, + executionId: string, + ): Observable { + return this.http.get( + `${this._resolvePipelinesServiceUrl()}/data-jobs/for-team/${teamName}/jobs/${jobName}/executions/${executionId}`, + ); + } + + getJobDeployments( + teamName: string, + jobName: string, + ): Observable { + return this.http.get( + `${this._resolvePipelinesServiceUrl()}/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments`, + ); + } + + updateDataJobStatus( + teamName: string, + jobName: string, + deploymentId: string, + dataJobEnabled: boolean, + ): Observable<{ enabled: boolean }> { + const deploymentStatus = { enabled: dataJobEnabled }; + + if (!deploymentId) { + console.log(`Status update will be processed with default deploymentId`); + deploymentId = "default"; } - executeDataJob(teamName: string, jobName: string, deploymentId: string): Observable { - return this.http.post( - `${this._resolvePipelinesServiceUrl()}/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments/${deploymentId}/executions`, - {} - ); + return this.http.patch<{ enabled: boolean }>( + `${this._resolvePipelinesServiceUrl()}/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments/${deploymentId}`, + deploymentStatus, + ); + } + + updateDataJob( + teamName: string, + jobName: string, + dataJob: DataJobDetails, + ): Observable { + return this.http.put( + `${this._resolvePipelinesServiceUrl()}/data-jobs/for-team/${teamName}/jobs/${jobName}`, + dataJob, + ); + } + + executeDataJob( + teamName: string, + jobName: string, + deploymentId: string, + ): Observable { + return this.http.post( + `${this._resolvePipelinesServiceUrl()}/data-jobs/for-team/${teamName}/jobs/${jobName}/deployments/${deploymentId}/executions`, + {}, + ); + } + + cancelDataJobExecution( + teamName: string, + jobName: string, + executionId: string, + ): Observable { + return this.http.delete( + `${this._resolvePipelinesServiceUrl()}/data-jobs/for-team/${teamName}/jobs/${jobName}/executions/${executionId}`, + ); + } + + private _resolvePipelinesServiceUrl(): string { + return this.dataPipelinesConfig?.resourceServer?.getUrl + ? this.dataPipelinesConfig.resourceServer.getUrl() + : ""; + } + + private _createTeamJobNameFilter(teamName: string, jobName: string) { + return [ + { property: "config.team", pattern: teamName, sort: null }, + { property: "jobName", pattern: jobName, sort: null }, + ]; + } + + private _validateModuleConfig( + dataPipelinesConfig: DataPipelinesConfig, + ): void { + if (!dataPipelinesConfig?.defaultOwnerTeamName) { + throw new Error(MISSING_DEFAULT_TEAM_MESSAGE); } - cancelDataJobExecution(teamName: string, jobName: string, executionId: string): Observable { - return this.http.delete( - `${this._resolvePipelinesServiceUrl()}/data-jobs/for-team/${teamName}/jobs/${jobName}/executions/${executionId}` - ); - } - - private _resolvePipelinesServiceUrl(): string { - return this.dataPipelinesConfig?.resourceServer?.getUrl ? this.dataPipelinesConfig.resourceServer.getUrl() : ''; - } - - private _createTeamJobNameFilter(teamName: string, jobName: string) { - return [ - { property: 'config.team', pattern: teamName, sort: null }, - { property: 'jobName', pattern: jobName, sort: null } - ]; - } - - private _validateModuleConfig(dataPipelinesConfig: DataPipelinesConfig): void { - if (!dataPipelinesConfig?.defaultOwnerTeamName) { - throw new Error(MISSING_DEFAULT_TEAM_MESSAGE); - } - - if (dataPipelinesConfig?.defaultOwnerTeamName === 'default') { - throw new Error(RESERVED_DEFAULT_TEAM_NAME_MESSAGE); - } + if (dataPipelinesConfig?.defaultOwnerTeamName === "default") { + throw new Error(RESERVED_DEFAULT_TEAM_NAME_MESSAGE); } + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.service.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.service.spec.ts index 2f0d9501fb..0f67d184c2 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.service.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.service.spec.ts @@ -3,206 +3,255 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { TestBed } from '@angular/core/testing'; +import { TestBed } from "@angular/core/testing"; + +import { Observable } from "rxjs"; + +import { + ComponentModel, + ComponentService, + ComponentStateImpl, + RouterState, + RouteState, +} from "@versatiledatakit/shared"; + +import { + FETCH_DATA_JOB, + FETCH_DATA_JOB_EXECUTIONS, + FETCH_DATA_JOBS, + UPDATE_DATA_JOB, +} from "../state/actions"; +import { TASK_UPDATE_JOB_DESCRIPTION } from "../state/tasks"; + +import { DataJobsService, DataJobsServiceImpl } from "./data-jobs.service"; + +describe("DataJobsService -> DataJobsServiceImpl", () => { + let componentServiceStub: jasmine.SpyObj; + + let service: DataJobsService; + + beforeEach(() => { + componentServiceStub = jasmine.createSpyObj( + "componentService", + ["load", "dispatchAction"], + ); + + TestBed.configureTestingModule({ + providers: [ + { provide: ComponentService, useValue: componentServiceStub }, + { provide: DataJobsService, useClass: DataJobsServiceImpl }, + ], + }); + + service = TestBed.inject(DataJobsService); + }); + + it("should verify instance is created", () => { + // Then + expect(service).toBeDefined(); + }); + + describe("Methods::", () => { + describe("|loadJob|", () => { + it("should verify will invoke expected method", () => { + // Given + const model = ComponentModel.of( + ComponentStateImpl.of({ + id: "test-component", + }), + RouterState.of(RouteState.empty(), 1), + ); + + // When + service.loadJob(model); + + // Then + expect(componentServiceStub.load).toHaveBeenCalledWith( + model.getComponentState(), + ); + expect(componentServiceStub.dispatchAction).toHaveBeenCalledWith( + FETCH_DATA_JOB, + model.getComponentState(), + ); + }); + }); + + describe("|loadJobs|", () => { + it("should verify will invoke expected method", () => { + // Given + const model = ComponentModel.of( + ComponentStateImpl.of({ + id: "test-component", + }), + RouterState.of(RouteState.empty(), 1), + ); + + // When + service.loadJobs(model); + + // Then + expect(componentServiceStub.load).toHaveBeenCalledWith( + model.getComponentState(), + ); + expect(componentServiceStub.dispatchAction).toHaveBeenCalledWith( + FETCH_DATA_JOBS, + model.getComponentState(), + ); + }); + }); + + describe("|loadJobExecutions|", () => { + it("should verify will invoke expected method", () => { + // Given + const model = ComponentModel.of( + ComponentStateImpl.of({ + id: "test-component", + }), + RouterState.of(RouteState.empty(), 1), + ); + + // When + service.loadJobExecutions(model); + + // Then + expect(componentServiceStub.load).toHaveBeenCalledWith( + model.getComponentState(), + ); + expect(componentServiceStub.dispatchAction).toHaveBeenCalledWith( + FETCH_DATA_JOB_EXECUTIONS, + model.getComponentState(), + ); + }); + }); + + describe("|updateJob|", () => { + it("should verify will invoke expected method", () => { + // Given + const model = ComponentModel.of( + ComponentStateImpl.of({ + id: "test-component", + }), + RouterState.of(RouteState.empty(), 1), + ); -import { Observable } from 'rxjs'; + // When + service.updateJob(model, TASK_UPDATE_JOB_DESCRIPTION); -import { ComponentModel, ComponentService, ComponentStateImpl, RouterState, RouteState } from '@versatiledatakit/shared'; + // Then + expect(componentServiceStub.load).toHaveBeenCalledWith( + model.getComponentState(), + ); + expect(componentServiceStub.dispatchAction).toHaveBeenCalledWith( + UPDATE_DATA_JOB, + model.getComponentState(), + TASK_UPDATE_JOB_DESCRIPTION, + ); + }); + }); + + describe("|getNotifiedForRunningJobExecutionId|", () => { + it("should verify will return Observable", () => { + // Given + // eslint-disable-next-line @typescript-eslint/dot-notation + const asObservableSpy = spyOn( + (service as DataJobsServiceImpl)["_runningJobExecutionId"], + "asObservable", + ).and.callThrough(); -import { FETCH_DATA_JOB, FETCH_DATA_JOB_EXECUTIONS, FETCH_DATA_JOBS, UPDATE_DATA_JOB } from '../state/actions'; -import { TASK_UPDATE_JOB_DESCRIPTION } from '../state/tasks'; + // When + const observable = service.getNotifiedForRunningJobExecutionId(); + + // Then + expect(observable).toBeInstanceOf(Observable); + expect(asObservableSpy).toHaveBeenCalled(); + }); + }); -import { DataJobsService, DataJobsServiceImpl } from './data-jobs.service'; + describe("|notifyForRunningJobExecutionId|", () => { + it("should verify will notify correct Subject", () => { + // Given + // eslint-disable-next-line @typescript-eslint/dot-notation + const nextSpy = spyOn( + (service as DataJobsServiceImpl)["_runningJobExecutionId"], + "next", + ).and.callThrough(); -describe('DataJobsService -> DataJobsServiceImpl', () => { - let componentServiceStub: jasmine.SpyObj; + // When + service.notifyForRunningJobExecutionId("xy"); - let service: DataJobsService; + // Then + expect(nextSpy).toHaveBeenCalledWith("xy"); + }); + }); - beforeEach(() => { - componentServiceStub = jasmine.createSpyObj('componentService', ['load', 'dispatchAction']); + describe("|getNotifiedForJobExecutions|", () => { + it("should verify will return Observable", () => { + // Given + // eslint-disable-next-line @typescript-eslint/dot-notation + const asObservableSpy = spyOn( + (service as DataJobsServiceImpl)["_jobExecutions"], + "asObservable", + ).and.callThrough(); - TestBed.configureTestingModule({ - providers: [ - { provide: ComponentService, useValue: componentServiceStub }, - { provide: DataJobsService, useClass: DataJobsServiceImpl } - ] - }); + // When + const observable = service.getNotifiedForJobExecutions(); - service = TestBed.inject(DataJobsService); + // Then + expect(observable).toBeInstanceOf(Observable); + expect(asObservableSpy).toHaveBeenCalled(); + }); }); - it('should verify instance is created', () => { + describe("|notifyForJobExecutions|", () => { + it("should verify will notify correct Subject", () => { + // Given + // eslint-disable-next-line @typescript-eslint/dot-notation + const nextSpy = spyOn( + (service as DataJobsServiceImpl)["_jobExecutions"], + "next", + ).and.callThrough(); + + // When + service.notifyForJobExecutions([null]); + // Then - expect(service).toBeDefined(); + expect(nextSpy).toHaveBeenCalledWith([null]); + }); }); - describe('Methods::', () => { - describe('|loadJob|', () => { - it('should verify will invoke expected method', () => { - // Given - const model = ComponentModel.of( - ComponentStateImpl.of({ - id: 'test-component' - }), - RouterState.of(RouteState.empty(), 1) - ); - - // When - service.loadJob(model); - - // Then - expect(componentServiceStub.load).toHaveBeenCalledWith(model.getComponentState()); - expect(componentServiceStub.dispatchAction).toHaveBeenCalledWith(FETCH_DATA_JOB, model.getComponentState()); - }); - }); - - describe('|loadJobs|', () => { - it('should verify will invoke expected method', () => { - // Given - const model = ComponentModel.of( - ComponentStateImpl.of({ - id: 'test-component' - }), - RouterState.of(RouteState.empty(), 1) - ); - - // When - service.loadJobs(model); - - // Then - expect(componentServiceStub.load).toHaveBeenCalledWith(model.getComponentState()); - expect(componentServiceStub.dispatchAction).toHaveBeenCalledWith(FETCH_DATA_JOBS, model.getComponentState()); - }); - }); - - describe('|loadJobExecutions|', () => { - it('should verify will invoke expected method', () => { - // Given - const model = ComponentModel.of( - ComponentStateImpl.of({ - id: 'test-component' - }), - RouterState.of(RouteState.empty(), 1) - ); - - // When - service.loadJobExecutions(model); - - // Then - expect(componentServiceStub.load).toHaveBeenCalledWith(model.getComponentState()); - expect(componentServiceStub.dispatchAction).toHaveBeenCalledWith(FETCH_DATA_JOB_EXECUTIONS, model.getComponentState()); - }); - }); - - describe('|updateJob|', () => { - it('should verify will invoke expected method', () => { - // Given - const model = ComponentModel.of( - ComponentStateImpl.of({ - id: 'test-component' - }), - RouterState.of(RouteState.empty(), 1) - ); - - // When - service.updateJob(model, TASK_UPDATE_JOB_DESCRIPTION); - - // Then - expect(componentServiceStub.load).toHaveBeenCalledWith(model.getComponentState()); - expect(componentServiceStub.dispatchAction).toHaveBeenCalledWith( - UPDATE_DATA_JOB, - model.getComponentState(), - TASK_UPDATE_JOB_DESCRIPTION - ); - }); - }); - - describe('|getNotifiedForRunningJobExecutionId|', () => { - it('should verify will return Observable', () => { - // Given - // eslint-disable-next-line @typescript-eslint/dot-notation - const asObservableSpy = spyOn((service as DataJobsServiceImpl)['_runningJobExecutionId'], 'asObservable').and.callThrough(); - - // When - const observable = service.getNotifiedForRunningJobExecutionId(); - - // Then - expect(observable).toBeInstanceOf(Observable); - expect(asObservableSpy).toHaveBeenCalled(); - }); - }); - - describe('|notifyForRunningJobExecutionId|', () => { - it('should verify will notify correct Subject', () => { - // Given - // eslint-disable-next-line @typescript-eslint/dot-notation - const nextSpy = spyOn((service as DataJobsServiceImpl)['_runningJobExecutionId'], 'next').and.callThrough(); - - // When - service.notifyForRunningJobExecutionId('xy'); - - // Then - expect(nextSpy).toHaveBeenCalledWith('xy'); - }); - }); - - describe('|getNotifiedForJobExecutions|', () => { - it('should verify will return Observable', () => { - // Given - // eslint-disable-next-line @typescript-eslint/dot-notation - const asObservableSpy = spyOn((service as DataJobsServiceImpl)['_jobExecutions'], 'asObservable').and.callThrough(); - - // When - const observable = service.getNotifiedForJobExecutions(); - - // Then - expect(observable).toBeInstanceOf(Observable); - expect(asObservableSpy).toHaveBeenCalled(); - }); - }); - - describe('|notifyForJobExecutions|', () => { - it('should verify will notify correct Subject', () => { - // Given - // eslint-disable-next-line @typescript-eslint/dot-notation - const nextSpy = spyOn((service as DataJobsServiceImpl)['_jobExecutions'], 'next').and.callThrough(); - - // When - service.notifyForJobExecutions([null]); - - // Then - expect(nextSpy).toHaveBeenCalledWith([null]); - }); - }); - - describe('|getNotifiedForTeamImplicitly|', () => { - it('should verify will return Observable', () => { - // Given - // eslint-disable-next-line @typescript-eslint/dot-notation - const asObservableSpy = spyOn((service as DataJobsServiceImpl)['_implicitTeam'], 'asObservable').and.callThrough(); - - // When - const observable = service.getNotifiedForTeamImplicitly(); - - // Then - expect(observable).toBeInstanceOf(Observable); - expect(asObservableSpy).toHaveBeenCalled(); - }); - }); - - describe('|notifyForTeamImplicitly|', () => { - it('should verify will notify correct BehaviorSubject', () => { - // Given - // eslint-disable-next-line @typescript-eslint/dot-notation - const nextSpy = spyOn((service as DataJobsServiceImpl)['_implicitTeam'], 'next').and.callThrough(); - - // When - service.notifyForTeamImplicitly('teamZero'); - - // Then - expect(nextSpy).toHaveBeenCalledWith('teamZero'); - }); - }); + describe("|getNotifiedForTeamImplicitly|", () => { + it("should verify will return Observable", () => { + // Given + // eslint-disable-next-line @typescript-eslint/dot-notation + const asObservableSpy = spyOn( + (service as DataJobsServiceImpl)["_implicitTeam"], + "asObservable", + ).and.callThrough(); + + // When + const observable = service.getNotifiedForTeamImplicitly(); + + // Then + expect(observable).toBeInstanceOf(Observable); + expect(asObservableSpy).toHaveBeenCalled(); + }); + }); + + describe("|notifyForTeamImplicitly|", () => { + it("should verify will notify correct BehaviorSubject", () => { + // Given + // eslint-disable-next-line @typescript-eslint/dot-notation + const nextSpy = spyOn( + (service as DataJobsServiceImpl)["_implicitTeam"], + "next", + ).and.callThrough(); + + // When + service.notifyForTeamImplicitly("teamZero"); + + // Then + expect(nextSpy).toHaveBeenCalledWith("teamZero"); + }); }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.service.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.service.ts index 3e264a465f..3f0b44587a 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.service.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/data-jobs.service.ts @@ -5,154 +5,172 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { Injectable } from '@angular/core'; +import { Injectable } from "@angular/core"; -import { BehaviorSubject, Observable, Subject } from 'rxjs'; +import { BehaviorSubject, Observable, Subject } from "rxjs"; -import { ComponentModel, ComponentService } from '@versatiledatakit/shared'; +import { ComponentModel, ComponentService } from "@versatiledatakit/shared"; -import { FETCH_DATA_JOB, FETCH_DATA_JOB_EXECUTIONS, FETCH_DATA_JOBS, UPDATE_DATA_JOB } from '../state/actions'; -import { DataJobUpdateTasks } from '../state/tasks'; +import { + FETCH_DATA_JOB, + FETCH_DATA_JOB_EXECUTIONS, + FETCH_DATA_JOBS, + UPDATE_DATA_JOB, +} from "../state/actions"; +import { DataJobUpdateTasks } from "../state/tasks"; -import { DataJobExecutions } from '../model'; +import { DataJobExecutions } from "../model"; export abstract class DataJobsService { - /** - * ** Trigger Action for loading DataJobs data. - */ - abstract loadJobs(model: ComponentModel): void; - - /** - * ** Trigger Actions to load all necessary data for Data Job. - */ - abstract loadJob(model: ComponentModel): void; - - /** - * ** Trigger Action for loading Data Job executions data. - */ - abstract loadJobExecutions(model: ComponentModel): void; - - /** - * ** Trigger Action update Job. - */ - abstract updateJob(model: ComponentModel, task: DataJobUpdateTasks): void; - - /** - * ** Returns Observable(Subject) that fires when Running Job Execution ID change. - */ - abstract getNotifiedForRunningJobExecutionId(): Observable; - - /** - * ** Send new event to Observable stream. - */ - abstract notifyForRunningJobExecutionId(id: string): void; - - /** - * ** Returns Observable(Subject) that fires with new Job Executions. - */ - abstract getNotifiedForJobExecutions(): Observable; - - /** - * ** Send new event to Observable stream. - */ - abstract notifyForJobExecutions(executions: DataJobExecutions): void; - - /** - * ** Returns Observable(BehaviorSubject) that fires with team name implicitly. - */ - abstract getNotifiedForTeamImplicitly(): Observable; - - /** - * ** Send new event to Observable stream. - */ - abstract notifyForTeamImplicitly(team: string): void; + /** + * ** Trigger Action for loading DataJobs data. + */ + abstract loadJobs(model: ComponentModel): void; + + /** + * ** Trigger Actions to load all necessary data for Data Job. + */ + abstract loadJob(model: ComponentModel): void; + + /** + * ** Trigger Action for loading Data Job executions data. + */ + abstract loadJobExecutions(model: ComponentModel): void; + + /** + * ** Trigger Action update Job. + */ + abstract updateJob(model: ComponentModel, task: DataJobUpdateTasks): void; + + /** + * ** Returns Observable(Subject) that fires when Running Job Execution ID change. + */ + abstract getNotifiedForRunningJobExecutionId(): Observable; + + /** + * ** Send new event to Observable stream. + */ + abstract notifyForRunningJobExecutionId(id: string): void; + + /** + * ** Returns Observable(Subject) that fires with new Job Executions. + */ + abstract getNotifiedForJobExecutions(): Observable; + + /** + * ** Send new event to Observable stream. + */ + abstract notifyForJobExecutions(executions: DataJobExecutions): void; + + /** + * ** Returns Observable(BehaviorSubject) that fires with team name implicitly. + */ + abstract getNotifiedForTeamImplicitly(): Observable; + + /** + * ** Send new event to Observable stream. + */ + abstract notifyForTeamImplicitly(team: string): void; } @Injectable() export class DataJobsServiceImpl extends DataJobsService { - private readonly _runningJobExecutionId: Subject; - private readonly _jobExecutions: Subject; - private readonly _implicitTeam: BehaviorSubject; - - /** - * ** Constructor. - */ - constructor(private readonly componentService: ComponentService) { - super(); - - this._runningJobExecutionId = new Subject(); - this._jobExecutions = new Subject(); - this._implicitTeam = new BehaviorSubject(undefined); - } - - /** - * @inheritDoc - */ - loadJobs(model: ComponentModel): void { - this.componentService.load(model.getComponentState()); - this.componentService.dispatchAction(FETCH_DATA_JOBS, model.getComponentState()); - } - - loadJob(model: ComponentModel): void { - this.componentService.load(model.getComponentState()); - this.componentService.dispatchAction(FETCH_DATA_JOB, model.getComponentState()); - } - - /** - * @inheritDoc - */ - loadJobExecutions(model: ComponentModel): void { - this.componentService.load(model.getComponentState()); - this.componentService.dispatchAction(FETCH_DATA_JOB_EXECUTIONS, model.getComponentState()); - } - - /** - * @inheritDoc - */ - updateJob(model: ComponentModel, task: DataJobUpdateTasks): void { - this.componentService.load(model.getComponentState()); - this.componentService.dispatchAction(UPDATE_DATA_JOB, model.getComponentState(), task); - } - - /** - * @inheritDoc - */ - getNotifiedForJobExecutions(): Observable { - return this._jobExecutions.asObservable(); - } - - /** - * @inheritDoc - */ - notifyForJobExecutions(executions: DataJobExecutions): void { - this._jobExecutions.next(executions); - } - - /** - * @inheritDoc - */ - getNotifiedForRunningJobExecutionId(): Observable { - return this._runningJobExecutionId.asObservable(); - } - - /** - * @inheritDoc - */ - notifyForRunningJobExecutionId(id: string): void { - this._runningJobExecutionId.next(id); - } - - /** - * @inheritDoc - */ - getNotifiedForTeamImplicitly(): Observable { - return this._implicitTeam.asObservable(); - } - - /** - * @inheritDoc - */ - notifyForTeamImplicitly(team: string): void { - this._implicitTeam.next(team); - } + private readonly _runningJobExecutionId: Subject; + private readonly _jobExecutions: Subject; + private readonly _implicitTeam: BehaviorSubject; + + /** + * ** Constructor. + */ + constructor(private readonly componentService: ComponentService) { + super(); + + this._runningJobExecutionId = new Subject(); + this._jobExecutions = new Subject(); + this._implicitTeam = new BehaviorSubject(undefined); + } + + /** + * @inheritDoc + */ + loadJobs(model: ComponentModel): void { + this.componentService.load(model.getComponentState()); + this.componentService.dispatchAction( + FETCH_DATA_JOBS, + model.getComponentState(), + ); + } + + loadJob(model: ComponentModel): void { + this.componentService.load(model.getComponentState()); + this.componentService.dispatchAction( + FETCH_DATA_JOB, + model.getComponentState(), + ); + } + + /** + * @inheritDoc + */ + loadJobExecutions(model: ComponentModel): void { + this.componentService.load(model.getComponentState()); + this.componentService.dispatchAction( + FETCH_DATA_JOB_EXECUTIONS, + model.getComponentState(), + ); + } + + /** + * @inheritDoc + */ + updateJob(model: ComponentModel, task: DataJobUpdateTasks): void { + this.componentService.load(model.getComponentState()); + this.componentService.dispatchAction( + UPDATE_DATA_JOB, + model.getComponentState(), + task, + ); + } + + /** + * @inheritDoc + */ + getNotifiedForJobExecutions(): Observable { + return this._jobExecutions.asObservable(); + } + + /** + * @inheritDoc + */ + notifyForJobExecutions(executions: DataJobExecutions): void { + this._jobExecutions.next(executions); + } + + /** + * @inheritDoc + */ + getNotifiedForRunningJobExecutionId(): Observable { + return this._runningJobExecutionId.asObservable(); + } + + /** + * @inheritDoc + */ + notifyForRunningJobExecutionId(id: string): void { + this._runningJobExecutionId.next(id); + } + + /** + * @inheritDoc + */ + getNotifiedForTeamImplicitly(): Observable { + return this._implicitTeam.asObservable(); + } + + /** + * @inheritDoc + */ + notifyForTeamImplicitly(team: string): void { + this._implicitTeam.next(team); + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/index.ts index cf83d83e97..477781d0dc 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/index.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-jobs-base.api.service'; -export * from './data-jobs-public.api.service'; -export * from './data-jobs.api.service'; -export * from './data-jobs.service'; +export * from "./data-jobs-base.api.service"; +export * from "./data-jobs-public.api.service"; +export * from "./data-jobs.api.service"; +export * from "./data-jobs.service"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/public-api.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/public-api.ts index f08a9082f5..8cde2b5ce4 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/public-api.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/services/public-api.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-jobs-public.api.service'; +export * from "./data-jobs-public.api.service"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.html index 4bddca7db5..1ab7ee46a6 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.html @@ -4,43 +4,43 @@ --> -

{{ options.title }}

-
-

- - - - - -
-
- - -
+

{{ options.title }}

+
+

+ + + + + +
+
+ + +
diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.scss index 82f6f3a775..c48a58df00 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.scss @@ -4,17 +4,17 @@ */ .schema-confirm-to-prod { - .modal-title { - margin-bottom: 0.5rem; - } + .modal-title { + margin-bottom: 0.5rem; + } - .signpostBtn { - height: 0rem; + .signpostBtn { + height: 0rem; - .btn-info { - margin-top: -0.65rem; - border: 0; - height: 1.2rem; - } + .btn-info { + margin-top: -0.65rem; + border: 0; + height: 1.2rem; } + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.spec.ts index f26bbfcea3..ff11b8a869 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.spec.ts @@ -3,34 +3,34 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { ConfirmationDialogModalComponent } from './confirmation-dialog-modal.component'; +import { ComponentFixture, TestBed } from "@angular/core/testing"; +import { ConfirmationDialogModalComponent } from "./confirmation-dialog-modal.component"; -describe('ConfirmationDialogModalComponent', () => { - let component: ConfirmationDialogModalComponent; - let fixture: ComponentFixture; +describe("ConfirmationDialogModalComponent", () => { + let component: ConfirmationDialogModalComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ConfirmationDialogModalComponent] - }).compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ConfirmationDialogModalComponent], + }).compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(ConfirmationDialogModalComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(ConfirmationDialogModalComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); - describe('confirm', () => { - it('makes expected calls', () => { - spyOn(component.changeStatus, 'emit').and.callThrough(); - component.confirm(); - expect(component.changeStatus.emit).toHaveBeenCalled(); - }); + describe("confirm", () => { + it("makes expected calls", () => { + spyOn(component.changeStatus, "emit").and.callThrough(); + component.confirm(); + expect(component.changeStatus.emit).toHaveBeenCalled(); }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.ts index c1eafdb958..c7f3ac4695 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/confirmation-dialog-modal.component.ts @@ -3,27 +3,27 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { ConfirmationModalOptions } from '../../model/modal-options'; -import { ModalComponentDirective } from '../modal/modal.component'; +import { Component, EventEmitter, Input, Output } from "@angular/core"; +import { ConfirmationModalOptions } from "../../model/modal-options"; +import { ModalComponentDirective } from "../modal/modal.component"; @Component({ - selector: 'lib-confirmation-dialog-modal', - templateUrl: './confirmation-dialog-modal.component.html', - styleUrls: ['./confirmation-dialog-modal.component.scss'] + selector: "lib-confirmation-dialog-modal", + templateUrl: "./confirmation-dialog-modal.component.html", + styleUrls: ["./confirmation-dialog-modal.component.scss"], }) export class ConfirmationDialogModalComponent extends ModalComponentDirective { - @Input() confirmationInput: string; - @Output() changeStatus: EventEmitter = new EventEmitter(); + @Input() confirmationInput: string; + @Output() changeStatus: EventEmitter = new EventEmitter(); - constructor() { - super(); - this.options = new ConfirmationModalOptions(); - } + constructor() { + super(); + this.options = new ConfirmationModalOptions(); + } - override confirm(): void { - super.confirm(); + override confirm(): void { + super.confirm(); - this.changeStatus.emit(); - } + this.changeStatus.emit(); + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/index.ts index c28b78d5f6..bf407c409d 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/confirmation-dialog-modal/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './confirmation-dialog-modal.component'; +export * from "./confirmation-dialog-modal.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.html index 010d3811b0..2bd6893e8e 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.html @@ -6,33 +6,30 @@ - + - + diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.scss index 321379656b..768e3cf3e1 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.scss @@ -4,10 +4,10 @@ */ .datagrid-filter { - outline: none; + outline: none; - .close { - outline: none; - box-shadow: none; - } + .close { + outline: none; + box-shadow: none; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.spec.ts index a52f8af566..e3ef8f4e17 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.spec.ts @@ -3,54 +3,54 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { ClrDatagridFilter } from '@clr/angular'; - -import { ColumnFilterComponent } from './column-filter.component'; - -describe('ColumnFilterComponent', () => { - let component: ColumnFilterComponent; - let fixture: ComponentFixture; - - const TEST_VALUE = 'test_value'; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ColumnFilterComponent], - providers: [ - { - provide: ClrDatagridFilter, - useFactory: () => ({ - setFilter: () => ({}) - }) - } - ] - }).compileComponents(); +import { ComponentFixture, TestBed } from "@angular/core/testing"; +import { ClrDatagridFilter } from "@clr/angular"; + +import { ColumnFilterComponent } from "./column-filter.component"; + +describe("ColumnFilterComponent", () => { + let component: ColumnFilterComponent; + let fixture: ComponentFixture; + + const TEST_VALUE = "test_value"; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ColumnFilterComponent], + providers: [ + { + provide: ClrDatagridFilter, + useFactory: () => ({ + setFilter: () => ({}), + }), + }, + ], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ColumnFilterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it("should create", () => { + expect(component).toBeTruthy(); + }); + + describe("toggle selection", () => { + it("change value", () => { + component.toggleSelection({ + target: { value: TEST_VALUE } as unknown as EventTarget, + } as Event); + expect(component.value).toBe(TEST_VALUE); }); + }); - beforeEach(() => { - fixture = TestBed.createComponent(ColumnFilterComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); - - describe('toggle selection', () => { - it('change value', () => { - component.toggleSelection({ - target: { value: TEST_VALUE } as unknown as EventTarget - } as Event); - expect(component.value).toBe(TEST_VALUE); - }); - }); - - describe('clean filter', () => { - it('remove value', () => { - component.cleanFilter(); - expect(component.value).toBe(null); - }); + describe("clean filter", () => { + it("remove value", () => { + component.cleanFilter(); + expect(component.value).toBe(null); }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.ts index 7578bb7be9..2a811d65eb 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/column-filter.component.ts @@ -3,71 +3,82 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, TemplateRef, ViewEncapsulation } from '@angular/core'; +import { + Component, + EventEmitter, + Input, + OnChanges, + Output, + SimpleChanges, + TemplateRef, + ViewEncapsulation, +} from "@angular/core"; -import { Observable, Subject } from 'rxjs'; +import { Observable, Subject } from "rxjs"; -import { ClrDatagridFilter, ClrDatagridFilterInterface } from '@clr/angular'; +import { ClrDatagridFilter, ClrDatagridFilterInterface } from "@clr/angular"; -import { DataJob } from '../../../../model'; +import { DataJob } from "../../../../model"; @Component({ - selector: 'lib-column-filter', - templateUrl: './column-filter.component.html', - styleUrls: ['./column-filter.component.scss'], - encapsulation: ViewEncapsulation.None + selector: "lib-column-filter", + templateUrl: "./column-filter.component.html", + styleUrls: ["./column-filter.component.scss"], + encapsulation: ViewEncapsulation.None, }) -export class ColumnFilterComponent implements ClrDatagridFilterInterface, OnChanges { - @Input() property: string; - @Input() listOfOptions: string[]; - @Input() isExecutionStatus = false; - - @Input() optionRenderer: TemplateRef = null; - - private _changesSubject = new Subject(); - - @Input() value: string; - @Output() valueChange = new EventEmitter(); - - // We do not want to expose the Subject itself, but the Observable which is read-only - get changes(): Observable { - return this._changesSubject.asObservable(); - } - - constructor(private filterContainer: ClrDatagridFilter) { - filterContainer.setFilter(this); - } - - isActive(): boolean { - return !!this.value; - } - - accepts(_item: DataJob): boolean { - return true; - } - - toggleSelection($event: Event) { - this._setValue(($event.target as HTMLInputElement).value); - } - - cleanFilter() { - this._setValue(null); - } - - isValueSelected(value: string) { - return this.value === value; - } - - /** - * @inheritDoc - */ - ngOnChanges(changes: SimpleChanges): void { - this._changesSubject.next(changes['value'].currentValue as string); - } - - private _setValue(value: string): void { - this.value = value; - this.valueChange.emit(this.value); - this._changesSubject.next(this.value); - } +export class ColumnFilterComponent + implements ClrDatagridFilterInterface, OnChanges +{ + @Input() property: string; + @Input() listOfOptions: string[]; + @Input() isExecutionStatus = false; + + @Input() optionRenderer: TemplateRef = null; + + private _changesSubject = new Subject(); + + @Input() value: string; + @Output() valueChange = new EventEmitter(); + + // We do not want to expose the Subject itself, but the Observable which is read-only + get changes(): Observable { + return this._changesSubject.asObservable(); + } + + constructor(private filterContainer: ClrDatagridFilter) { + filterContainer.setFilter(this); + } + + isActive(): boolean { + return !!this.value; + } + + accepts(_item: DataJob): boolean { + return true; + } + + toggleSelection($event: Event) { + this._setValue(($event.target as HTMLInputElement).value); + } + + cleanFilter() { + this._setValue(null); + } + + isValueSelected(value: string) { + return this.value === value; + } + + /** + * @inheritDoc + */ + ngOnChanges(changes: SimpleChanges): void { + this._changesSubject.next(changes["value"].currentValue as string); + } + + private _setValue(value: string): void { + this.value = value; + this.valueChange.emit(this.value); + this._changesSubject.next(this.value); + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/index.ts index aee0c8c5dd..32562c295a 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/column-filter/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './column-filter.component'; +export * from "./column-filter.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.html index a1bab5c6be..d7fefa7c76 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.html @@ -4,97 +4,93 @@ -->
-
- +
+ - + + -
- + +
- -
+
+ -
- + +
- -
+
+ + + +
diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.scss index 76a4a39ca6..1292a498a9 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.scss @@ -4,85 +4,85 @@ */ .grid-actions-container { - display: flex; - justify-content: space-between; - align-content: center; - flex-direction: row; - margin-top: 20px; - min-height: 1.5rem; + display: flex; + justify-content: space-between; + align-content: center; + flex-direction: row; + margin-top: 20px; + min-height: 1.5rem; - .btn-actions-container { - .btn { - margin: 0.25rem 0; - padding: 0 0.5rem; - } + .btn-actions-container { + .btn { + margin: 0.25rem 0; + padding: 0 0.5rem; } + } - > .btn-actions-container { - button { - &:first-child { - padding-left: 0; - } - } + > .btn-actions-container { + button { + &:first-child { + padding-left: 0; + } } + } - .btn-filters-container { - display: flex; - flex-grow: 1; - justify-content: flex-end; - } + .btn-filters-container { + display: flex; + flex-grow: 1; + justify-content: flex-end; + } - .btn-search-container { - display: inline-flex; + .btn-search-container { + display: inline-flex; - .search-container { - display: inline-flex; - margin: 0 !important; - transform: translateY(0.15rem); + .search-container { + display: inline-flex; + margin: 0 !important; + transform: translateY(0.15rem); - input { - &.clr-input { - padding-top: 2px; - } - } + input { + &.clr-input { + padding-top: 2px; } + } } + } - .tooltip-content { - text-transform: initial; - font-size: 11px !important; - } + .tooltip-content { + text-transform: initial; + font-size: 11px !important; + } - > * { - margin-right: 1rem; + > * { + margin-right: 1rem; - &:last-child { - margin-right: 0; - } + &:last-child { + margin-right: 0; } + } } .custom-buttons { - .btn { - &:not(.custom-btn) { - margin: initial !important; - padding: initial !important; - } + .btn { + &:not(.custom-btn) { + margin: initial !important; + padding: initial !important; } + } } .btn { - &.btn-link { - &.btn-link-red { - color: #e62700; + &.btn-link { + &.btn-link-red { + color: #e62700; - &:hover { - color: #a32100; - } + &:hover { + color: #a32100; + } - &:disabled { - color: #565656; - } - } + &:disabled { + color: #565656; + } } + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.spec.ts index abeaee5c82..262e928862 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.spec.ts @@ -3,40 +3,40 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { GridActionComponent } from './grid-action.component'; - -describe('GridActionComponent', () => { - let component: GridActionComponent; - let fixture: ComponentFixture; - - beforeEach(() => { - TestBed.configureTestingModule({ - schemas: [NO_ERRORS_SCHEMA], - declarations: [GridActionComponent] - }); - fixture = TestBed.createComponent(GridActionComponent); - component = fixture.componentInstance; +import { ComponentFixture, TestBed } from "@angular/core/testing"; +import { NO_ERRORS_SCHEMA } from "@angular/core"; +import { GridActionComponent } from "./grid-action.component"; + +describe("GridActionComponent", () => { + let component: GridActionComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + schemas: [NO_ERRORS_SCHEMA], + declarations: [GridActionComponent], }); + fixture = TestBed.createComponent(GridActionComponent); + component = fixture.componentInstance; + }); - it('can load instance', () => { - expect(component).toBeTruthy(); - }); + it("can load instance", () => { + expect(component).toBeTruthy(); + }); - it(`id has default value`, () => { - expect(component.id).toBeDefined(); - }); + it(`id has default value`, () => { + expect(component.id).toBeDefined(); + }); - it(`addId has default value`, () => { - expect(component.addId).toBeDefined(); - }); + it(`addId has default value`, () => { + expect(component.addId).toBeDefined(); + }); - it(`editId has default value`, () => { - expect(component.editId).toBeDefined(); - }); + it(`editId has default value`, () => { + expect(component.editId).toBeDefined(); + }); - it(`removeId has default value`, () => { - expect(component.removeId).toBeDefined(); - }); + it(`removeId has default value`, () => { + expect(component.removeId).toBeDefined(); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.ts index 1cf51ed933..fef2b8c26d 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/grid-action.component.ts @@ -3,103 +3,114 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { AfterViewInit, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core'; +import { + AfterViewInit, + Component, + EventEmitter, + Input, + OnChanges, + Output, + SimpleChanges, + ViewEncapsulation, +} from "@angular/core"; -import { CollectionsUtil } from '@versatiledatakit/shared'; +import { CollectionsUtil } from "@versatiledatakit/shared"; -import { QuickFilterChangeEvent, QuickFilters } from '../../quick-filters'; +import { QuickFilterChangeEvent, QuickFilters } from "../../quick-filters"; @Component({ - selector: 'lib-grid-action', - templateUrl: './grid-action.component.html', - styleUrls: ['./grid-action.component.scss'], - encapsulation: ViewEncapsulation.None + selector: "lib-grid-action", + templateUrl: "./grid-action.component.html", + styleUrls: ["./grid-action.component.scss"], + encapsulation: ViewEncapsulation.None, }) export class GridActionComponent implements AfterViewInit, OnChanges { - @Input() id = 'lib-ga-search-id'; - @Input() addId = 'lib-ga-add-id'; - @Input() editId = 'lib-ga-edit-id'; - @Input() removeId = 'lib-ga-remove-id'; - - @Input() addLabel: string; - @Input() editLabel: string; - @Input() removeLabel: string; - - @Input() addTooltip: string; - @Input() editTooltip: string; - @Input() removeTooltip: string; - - // eslint-disable-next-line @typescript-eslint/no-explicit-any - @Input() selectedValue: any | any[]; - @Input() searchQueryValue = ''; - - @Input() disableAdd: boolean; - @Input() disableEdit: boolean; - @Input() disableRemove: boolean; - - /** - * ** Proxy config for QuickFilters component. - */ - @Input() quickFilters: QuickFilters; - @Input() suppressQuickFilterChangeEvent: boolean; - - /** - * ** Flag that indicates actionable elements should be disabled. - */ - @Input() disableActionableElements = false; - - /** - * ** Proxy emitter from QuickFilters component. - */ - @Output() quickFilterChange = new EventEmitter(); - - @Output() search: EventEmitter = new EventEmitter(); - @Output() add: EventEmitter = new EventEmitter(); - /* eslint-disable @typescript-eslint/no-explicit-any */ - @Output() edit: EventEmitter = new EventEmitter(); - @Output() remove: EventEmitter = new EventEmitter(); - /* eslint-enable @typescript-eslint/no-explicit-any */ - - queryValue: string; - - ngAfterViewInit(): void { - this.setQueryValue(); - } - - ngOnChanges(changes: SimpleChanges): void { - if (changes['searchQueryValue']) { - this.setQueryValue(); - } - } - - get editDisabled(): boolean { - return ( - CollectionsUtil.isNil(this.selectedValue) || - (CollectionsUtil.isString(this.selectedValue) && this.selectedValue.length === 0) || - this.disableEdit - ); - } - - get addDisabled(): boolean { - return this.disableAdd; - } - - get removeDisabled(): boolean { - return ( - CollectionsUtil.isNil(this.selectedValue) || - (CollectionsUtil.isString(this.selectedValue) && this.selectedValue.length === 0) || - this.disableRemove - ); - } - - /** - * vdk-search is being broken for one-way binding related to an input [searchQueryValue] - * this fix is a workaround (adding a delay of 1 millisecond to set queryValue, looks like - * needs to run in a separate thread) - */ - private setQueryValue() { - setTimeout(() => { - this.queryValue = this.searchQueryValue; - }, 1); + @Input() id = "lib-ga-search-id"; + @Input() addId = "lib-ga-add-id"; + @Input() editId = "lib-ga-edit-id"; + @Input() removeId = "lib-ga-remove-id"; + + @Input() addLabel: string; + @Input() editLabel: string; + @Input() removeLabel: string; + + @Input() addTooltip: string; + @Input() editTooltip: string; + @Input() removeTooltip: string; + + // eslint-disable-next-line @typescript-eslint/no-explicit-any + @Input() selectedValue: any | any[]; + @Input() searchQueryValue = ""; + + @Input() disableAdd: boolean; + @Input() disableEdit: boolean; + @Input() disableRemove: boolean; + + /** + * ** Proxy config for QuickFilters component. + */ + @Input() quickFilters: QuickFilters; + @Input() suppressQuickFilterChangeEvent: boolean; + + /** + * ** Flag that indicates actionable elements should be disabled. + */ + @Input() disableActionableElements = false; + + /** + * ** Proxy emitter from QuickFilters component. + */ + @Output() quickFilterChange = new EventEmitter(); + + @Output() search: EventEmitter = new EventEmitter(); + @Output() add: EventEmitter = new EventEmitter(); + /* eslint-disable @typescript-eslint/no-explicit-any */ + @Output() edit: EventEmitter = new EventEmitter(); + @Output() remove: EventEmitter = new EventEmitter(); + /* eslint-enable @typescript-eslint/no-explicit-any */ + + queryValue: string; + + ngAfterViewInit(): void { + this.setQueryValue(); + } + + ngOnChanges(changes: SimpleChanges): void { + if (changes["searchQueryValue"]) { + this.setQueryValue(); } + } + + get editDisabled(): boolean { + return ( + CollectionsUtil.isNil(this.selectedValue) || + (CollectionsUtil.isString(this.selectedValue) && + this.selectedValue.length === 0) || + this.disableEdit + ); + } + + get addDisabled(): boolean { + return this.disableAdd; + } + + get removeDisabled(): boolean { + return ( + CollectionsUtil.isNil(this.selectedValue) || + (CollectionsUtil.isString(this.selectedValue) && + this.selectedValue.length === 0) || + this.disableRemove + ); + } + + /** + * vdk-search is being broken for one-way binding related to an input [searchQueryValue] + * this fix is a workaround (adding a delay of 1 millisecond to set queryValue, looks like + * needs to run in a separate thread) + */ + private setQueryValue() { + setTimeout(() => { + this.queryValue = this.searchQueryValue; + }, 1); + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/index.ts index 0b8f0005b5..ce776e0c3a 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/grid-action/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './grid-action.component'; +export * from "./grid-action.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/index.ts index d3248b2bd9..9590c8e28e 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/data-grid/index.ts @@ -3,5 +3,5 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './grid-action'; -export * from './column-filter'; +export * from "./grid-action"; +export * from "./column-filter"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/delete-modal.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/delete-modal.component.html index db3df86d6e..5c7909a150 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/delete-modal.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/delete-modal.component.html @@ -4,45 +4,45 @@ --> - + -
-

+
+

- - - - - -
+ + + + + +
-
- - -
+
+ + +
diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/delete-modal.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/delete-modal.component.spec.ts index f9fdfbe19d..25246da6bd 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/delete-modal.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/delete-modal.component.spec.ts @@ -3,40 +3,40 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { DeleteModalComponent } from './delete-modal.component'; +import { ComponentFixture, TestBed } from "@angular/core/testing"; +import { NO_ERRORS_SCHEMA } from "@angular/core"; +import { DeleteModalComponent } from "./delete-modal.component"; -describe('DeleteModalComponent', () => { - let component: DeleteModalComponent; - let fixture: ComponentFixture; +describe("DeleteModalComponent", () => { + let component: DeleteModalComponent; + let fixture: ComponentFixture; - beforeEach(() => { - TestBed.configureTestingModule({ - schemas: [NO_ERRORS_SCHEMA], - declarations: [DeleteModalComponent] - }); - fixture = TestBed.createComponent(DeleteModalComponent); - component = fixture.componentInstance; + beforeEach(() => { + TestBed.configureTestingModule({ + schemas: [NO_ERRORS_SCHEMA], + declarations: [DeleteModalComponent], }); + fixture = TestBed.createComponent(DeleteModalComponent); + component = fixture.componentInstance; + }); - it('can load instance', () => { - expect(component).toBeTruthy(); - }); + it("can load instance", () => { + expect(component).toBeTruthy(); + }); - describe('confirm', () => { - it('makes expected calls', () => { - spyOn(component, 'close').and.callThrough(); - component.confirm(); - expect(component.close).toHaveBeenCalled(); - }); + describe("confirm", () => { + it("makes expected calls", () => { + spyOn(component, "close").and.callThrough(); + component.confirm(); + expect(component.close).toHaveBeenCalled(); }); + }); - describe('cancel', () => { - it('makes expected calls', () => { - spyOn(component, 'close').and.callThrough(); - component.cancel(); - expect(component.close).toHaveBeenCalled(); - }); + describe("cancel", () => { + it("makes expected calls", () => { + spyOn(component, "close").and.callThrough(); + component.cancel(); + expect(component.close).toHaveBeenCalled(); }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/delete-modal.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/delete-modal.component.ts index 1a82fa8803..8bf6442a97 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/delete-modal.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/delete-modal.component.ts @@ -3,32 +3,32 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Component, EventEmitter, Output } from '@angular/core'; +import { Component, EventEmitter, Output } from "@angular/core"; -import { DeleteModalOptions } from '../../model'; +import { DeleteModalOptions } from "../../model"; -import { ModalComponentDirective } from '../modal'; +import { ModalComponentDirective } from "../modal"; @Component({ - selector: 'lib-delete-modal', - templateUrl: './delete-modal.component.html', - styleUrls: ['./delete-modal.component.css'] + selector: "lib-delete-modal", + templateUrl: "./delete-modal.component.html", + styleUrls: ["./delete-modal.component.css"], }) export class DeleteModalComponent extends ModalComponentDirective { - @Output() delete: EventEmitter = new EventEmitter(); + @Output() delete: EventEmitter = new EventEmitter(); - constructor() { - super(); - this.options = new DeleteModalOptions(); - } + constructor() { + super(); + this.options = new DeleteModalOptions(); + } - /** - * emit that the user confirmed that it want to delete the item - * and close the modal - */ - override confirm(): void { - super.confirm(); + /** + * emit that the user confirmed that it want to delete the item + * and close the modal + */ + override confirm(): void { + super.confirm(); - this.delete.emit(); - } + this.delete.emit(); + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/index.ts index 9fe8cb12c0..75f61930e7 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/delete-modal/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './delete-modal.component'; +export * from "./delete-modal.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.html index 2e8ae41017..b9ae5ce927 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.html @@ -6,26 +6,26 @@
- - + + - - - - - + + + + +
diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.scss index 6b38c17232..e603b1714f 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.scss @@ -4,19 +4,19 @@ */ .empty-state-container { - vdk-empty-state-placeholder { - text-align: center; - ::ng-deep h2 { - font-size: 18px !important; - font-weight: 500; - margin-top: 0.1rem !important; - line-height: 1rem; - } + vdk-empty-state-placeholder { + text-align: center; + ::ng-deep h2 { + font-size: 18px !important; + font-weight: 500; + margin-top: 0.1rem !important; + line-height: 1rem; + } - ::ng-deep h3 { - font-size: 13px !important; - line-height: 1rem; - margin-top: 0.3rem; - } + ::ng-deep h3 { + font-size: 13px !important; + line-height: 1rem; + margin-top: 0.3rem; } + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.spec.ts index 850cfc3b1d..3f94a24ac5 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.spec.ts @@ -9,27 +9,27 @@ * @format */ -import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; +import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing"; -import { EmptyStateComponent } from './empty-state.component'; +import { EmptyStateComponent } from "./empty-state.component"; -describe('EmptyStateComponent', () => { - let component: EmptyStateComponent; - let fixture: ComponentFixture; +describe("EmptyStateComponent", () => { + let component: EmptyStateComponent; + let fixture: ComponentFixture; - beforeEach(waitForAsync(() => { - TestBed.configureTestingModule({ - declarations: [EmptyStateComponent] - }).compileComponents(); - })); + beforeEach(waitForAsync(() => { + TestBed.configureTestingModule({ + declarations: [EmptyStateComponent], + }).compileComponents(); + })); - beforeEach(() => { - fixture = TestBed.createComponent(EmptyStateComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(EmptyStateComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.ts index 45ade7179a..10da692ab9 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/empty-state.component.ts @@ -5,21 +5,21 @@ /** @format */ -import { Component, Input } from '@angular/core'; +import { Component, Input } from "@angular/core"; @Component({ - selector: 'lib-empty-state', - templateUrl: './empty-state.component.html', - styleUrls: ['./empty-state.component.scss'] + selector: "lib-empty-state", + templateUrl: "./empty-state.component.html", + styleUrls: ["./empty-state.component.scss"], }) export class EmptyStateComponent { - @Input() title = 'Empty State'; - @Input() description = 'Description'; - @Input() width = 256; - @Input() imgSrc: string; - @Input() hideImage = false; - @Input() opacity = 1; - @Input() animSrc = 'assets/animations/no-events-in-timeframe-animation.json'; - @Input() marginTop = '3rem'; - @Input() marginBottom = '20px'; + @Input() title = "Empty State"; + @Input() description = "Description"; + @Input() width = 256; + @Input() imgSrc: string; + @Input() hideImage = false; + @Input() opacity = 1; + @Input() animSrc = "assets/animations/no-events-in-timeframe-animation.json"; + @Input() marginTop = "3rem"; + @Input() marginBottom = "20px"; } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/index.ts index f914b7eb01..9d85b2ca72 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/empty-state/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './empty-state.component'; +export * from "./empty-state.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.html index cc77eeeedc..3de1100f0b 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.html @@ -6,183 +6,186 @@
+
+ - + +
  • +
    -
    - Scheduled - {{ next | date : "MMM d, y, hh:mm a" : "UTC" }} UTC -
    -
    • + + +
    + Scheduled + {{ next | date: "MMM d, y, hh:mm a" : "UTC" }} UTC +
    + diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.scss index f7223eab76..3ea553a061 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.scss @@ -3,56 +3,56 @@ * SPDX-License-Identifier: Apache-2.0 */ -.clr-timeline-step clr-icon[shape='success-standard'] { - color: var(--clr-timeline-success-step-color, #5eb715); +.clr-timeline-step clr-icon[shape="success-standard"] { + color: var(--clr-timeline-success-step-color, #5eb715); } -.clr-timeline-step clr-icon[shape='error-standard'] { - color: var(--clr-timeline-error-step-color, #c21d00); +.clr-timeline-step clr-icon[shape="error-standard"] { + color: var(--clr-timeline-error-step-color, #c21d00); } .clr-timeline-step clr-icon { - height: 1.8rem; - width: 1.8rem; - min-height: 1.8rem; - min-width: 1.8rem; + height: 1.8rem; + width: 1.8rem; + min-height: 1.8rem; + min-width: 1.8rem; } .clr-timeline-horizontal { - padding-top: 35px; + padding-top: 35px; } .manual-execution-label { - margin-top: 5px; + margin-top: 5px; } .clr-timeline { - .clr-timeline__step-header--underline-dotted { - text-decoration: underline; - text-decoration-style: dotted; + .clr-timeline__step-header--underline-dotted { + text-decoration: underline; + text-decoration-style: dotted; + } + + .clr-timeline__log-link { + min-height: 0 !important; + min-width: 0 !important; + } + + .clr-timeline__element--display-block { + display: block; + width: 200px; + + span { + word-break: break-word; + + .btn-show-more { + padding: 0; + margin: 0; + } } + } - .clr-timeline__log-link { - min-height: 0 !important; - min-width: 0 !important; - } - - .clr-timeline__element--display-block { - display: block; - width: 200px; - - span { - word-break: break-word; - - .btn-show-more { - padding: 0; - margin: 0; - } - } - } - - .clr-timeline__duration-tag { - font-weight: bold; - text-decoration: underline; - } + .clr-timeline__duration-tag { + font-weight: bold; + text-decoration: underline; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.spec.ts index dacb9f7cf3..7c4cf428ed 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.spec.ts @@ -3,70 +3,82 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { ComponentFixture, TestBed } from "@angular/core/testing"; -import { ExecutionsTimelineComponent } from './executions-timeline.component'; +import { ExecutionsTimelineComponent } from "./executions-timeline.component"; -import { DATA_PIPELINES_CONFIGS, DataJobExecution, DataJobExecutionType } from '../../../model'; +import { + DATA_PIPELINES_CONFIGS, + DataJobExecution, + DataJobExecutionType, +} from "../../../model"; -describe('ExecutionsTimelineComponent', () => { - let component: ExecutionsTimelineComponent; - let fixture: ComponentFixture; +describe("ExecutionsTimelineComponent", () => { + let component: ExecutionsTimelineComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ExecutionsTimelineComponent], - providers: [ - { - provide: DATA_PIPELINES_CONFIGS, - useFactory: () => ({ - defaultOwnerTeamName: 'all', - manageConfig: { - allowKeyTabDownloads: true, - allowExecuteNow: true - }, - healthStatusUrl: 'baseUrl' - }) - } - ] - }).compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ExecutionsTimelineComponent], + providers: [ + { + provide: DATA_PIPELINES_CONFIGS, + useFactory: () => ({ + defaultOwnerTeamName: "all", + manageConfig: { + allowKeyTabDownloads: true, + allowExecuteNow: true, + }, + healthStatusUrl: "baseUrl", + }), + }, + ], + }).compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(ExecutionsTimelineComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(ExecutionsTimelineComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); - it('should create', () => { - const mockExec = { - /* eslint-disable-next-line @typescript-eslint/naming-convention */ - startedBy: 'manual/auser' - } as DataJobExecution; - expect(component.getManualExecutedByTitle(mockExec)).toBe(ExecutionsTimelineComponent.manualRunKnownUser + ' auser'); + it("should create", () => { + const mockExec = { + /* eslint-disable-next-line @typescript-eslint/naming-convention */ + startedBy: "manual/auser", + } as DataJobExecution; + expect(component.getManualExecutedByTitle(mockExec)).toBe( + ExecutionsTimelineComponent.manualRunKnownUser + " auser", + ); - mockExec.startedBy = 'manual/manual'; - mockExec.type = DataJobExecutionType.MANUAL; - expect(component.getManualExecutedByTitle(mockExec)).toBe(ExecutionsTimelineComponent.manualRunKnownUser + ' manual'); + mockExec.startedBy = "manual/manual"; + mockExec.type = DataJobExecutionType.MANUAL; + expect(component.getManualExecutedByTitle(mockExec)).toBe( + ExecutionsTimelineComponent.manualRunKnownUser + " manual", + ); - mockExec.startedBy = 'scheduled/runtime'; - mockExec.type = DataJobExecutionType.SCHEDULED; - expect(component.getManualExecutedByTitle(mockExec)).toContain(ExecutionsTimelineComponent.manualRunNoUser); + mockExec.startedBy = "scheduled/runtime"; + mockExec.type = DataJobExecutionType.SCHEDULED; + expect(component.getManualExecutedByTitle(mockExec)).toContain( + ExecutionsTimelineComponent.manualRunNoUser, + ); - mockExec.startedBy = 'scheduled/runtime'; - mockExec.type = null; - expect(component.getManualExecutedByTitle(mockExec)).toContain(ExecutionsTimelineComponent.manualRunNoUser); - }); + mockExec.startedBy = "scheduled/runtime"; + mockExec.type = null; + expect(component.getManualExecutedByTitle(mockExec)).toContain( + ExecutionsTimelineComponent.manualRunNoUser, + ); + }); - describe('Methods::', () => { - // TODO write some unit tests - it('no-op', () => { - // No-op. - expect(true).toBeTrue(); - }); + describe("Methods::", () => { + // TODO write some unit tests + it("no-op", () => { + // No-op. + expect(true).toBeTrue(); }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.ts index b99f82e710..67915c36b6 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/executions-timeline.component.ts @@ -3,76 +3,94 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ChangeDetectionStrategy, Component, Inject, Input, OnInit } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + Inject, + Input, + OnInit, +} from "@angular/core"; import { - DATA_PIPELINES_CONFIGS, - DataJobExecution, - DataJobExecutions, - DataJobExecutionStatus, - DataJobExecutionType, - DataPipelinesConfig -} from '../../../model'; + DATA_PIPELINES_CONFIGS, + DataJobExecution, + DataJobExecutions, + DataJobExecutionStatus, + DataJobExecutionType, + DataPipelinesConfig, +} from "../../../model"; @Component({ - selector: 'lib-executions-timeline', - templateUrl: './executions-timeline.component.html', - styleUrls: ['./executions-timeline.component.scss'], - changeDetection: ChangeDetectionStrategy.OnPush + selector: "lib-executions-timeline", + templateUrl: "./executions-timeline.component.html", + styleUrls: ["./executions-timeline.component.scss"], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class ExecutionsTimelineComponent implements OnInit { - static manualRunKnownUser = 'This job is triggered manually by user'; - static manualRunNoUser = 'This job is triggered manually, but there is no info about the user'; + static manualRunKnownUser = "This job is triggered manually by user"; + static manualRunNoUser = + "This job is triggered manually, but there is no info about the user"; - @Input() jobExecutions: DataJobExecutions = []; - @Input() next: Date = null; - @Input() showErrorMessage = false; - showExecutionFullMessage: boolean[]; + @Input() jobExecutions: DataJobExecutions = []; + @Input() next: Date = null; + @Input() showErrorMessage = false; + showExecutionFullMessage: boolean[]; - messageWordsBeforeTruncate = 50; - dataJobExecutionStatus = DataJobExecutionStatus; + messageWordsBeforeTruncate = 50; + dataJobExecutionStatus = DataJobExecutionStatus; - constructor( - @Inject(DATA_PIPELINES_CONFIGS) - public dataPipelinesModuleConfig: DataPipelinesConfig - ) {} + constructor( + @Inject(DATA_PIPELINES_CONFIGS) + public dataPipelinesModuleConfig: DataPipelinesConfig, + ) {} - ngOnInit(): void { - this.showExecutionFullMessage = new Array(this.jobExecutions.length).fill(false); - } + ngOnInit(): void { + this.showExecutionFullMessage = new Array(this.jobExecutions.length).fill( + false, + ); + } - /** - * ** NgFor elements tracking function. - */ - trackByFn(index: number, execution: DataJobExecution): string { - return `${index}|${execution.id}`; - } + /** + * ** NgFor elements tracking function. + */ + trackByFn(index: number, execution: DataJobExecution): string { + return `${index}|${execution.id}`; + } - isExecutionManual(execution: DataJobExecution): boolean { - return execution?.type === DataJobExecutionType.MANUAL; - } + isExecutionManual(execution: DataJobExecution): boolean { + return execution?.type === DataJobExecutionType.MANUAL; + } - getManualExecutedByTitle(execution: DataJobExecution): string { - if (!execution || !execution.startedBy || !execution.startedBy.startsWith('manual/')) { - // execution has no info abot user provided - return ExecutionsTimelineComponent.manualRunNoUser; - } + getManualExecutedByTitle(execution: DataJobExecution): string { + if ( + !execution || + !execution.startedBy || + !execution.startedBy.startsWith("manual/") + ) { + // execution has no info abot user provided + return ExecutionsTimelineComponent.manualRunNoUser; + } - const user = execution.startedBy.replace('manual/', ''); + const user = execution.startedBy.replace("manual/", ""); - return `${ExecutionsTimelineComponent.manualRunKnownUser} ${user}`; - } + return `${ExecutionsTimelineComponent.manualRunKnownUser} ${user}`; + } - isJobStatusSuitableForMessageTooltip(execution: DataJobExecution): boolean { - return ( - execution.status === DataJobExecutionStatus.PLATFORM_ERROR || - execution.status === DataJobExecutionStatus.USER_ERROR || - execution.status === DataJobExecutionStatus.SKIPPED - ); - } + isJobStatusSuitableForMessageTooltip(execution: DataJobExecution): boolean { + return ( + execution.status === DataJobExecutionStatus.PLATFORM_ERROR || + execution.status === DataJobExecutionStatus.USER_ERROR || + execution.status === DataJobExecutionStatus.SKIPPED + ); + } - isJobMessageDifferentFromStatus(execution: DataJobExecution): boolean { - const message = execution.message?.toLowerCase(); - return message !== 'user error' && message !== 'platform error' && message !== 'skipped' && message !== ''; - } + isJobMessageDifferentFromStatus(execution: DataJobExecution): boolean { + const message = execution.message?.toLowerCase(); + return ( + message !== "user error" && + message !== "platform error" && + message !== "skipped" && + message !== "" + ); + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/index.ts index 3efa58f2da..4cfd22d42e 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/executions-timeline/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './executions-timeline.component'; +export * from "./executions-timeline.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/index.ts index dde361c100..e855bc7c0c 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/index.ts @@ -3,12 +3,12 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './confirmation-dialog-modal'; -export * from './delete-modal'; -export * from './executions-timeline'; -export * from './data-grid'; -export * from './modal'; -export * from './quick-filters'; -export * from './status'; -export * from './widget-value'; -export * from './empty-state'; +export * from "./confirmation-dialog-modal"; +export * from "./delete-modal"; +export * from "./executions-timeline"; +export * from "./data-grid"; +export * from "./modal"; +export * from "./quick-filters"; +export * from "./status"; +export * from "./widget-value"; +export * from "./empty-state"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/modal/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/modal/index.ts index 617ba59125..9e0c479077 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/modal/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/modal/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './modal.component'; +export * from "./modal.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/modal/modal.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/modal/modal.component.ts index b697e424fa..fc81385945 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/modal/modal.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/modal/modal.component.ts @@ -3,44 +3,46 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Directive, EventEmitter, Input, Output } from '@angular/core'; +import { Directive, EventEmitter, Input, Output } from "@angular/core"; -import { TaurusObject } from '@versatiledatakit/shared'; +import { TaurusObject } from "@versatiledatakit/shared"; -import { ModalOptions } from '../../model'; +import { ModalOptions } from "../../model"; @Directive() export abstract class ModalComponentDirective extends TaurusObject { - @Input() options: ModalOptions; + @Input() options: ModalOptions; - @Output() optionsChange: EventEmitter = new EventEmitter(); + @Output() optionsChange: EventEmitter = + new EventEmitter(); - @Output() cancelAction: EventEmitter = new EventEmitter(); + @Output() cancelAction: EventEmitter = + new EventEmitter(); - constructor() { - super(); - } + constructor() { + super(); + } - confirm() { - this.close(); - } + confirm() { + this.close(); + } - /** - * close the modal - */ - close(): void { - if (!this._isNull(this.options)) { - this.options.opened = false; - this.optionsChange.emit(this.options); - } + /** + * close the modal + */ + close(): void { + if (!this._isNull(this.options)) { + this.options.opened = false; + this.optionsChange.emit(this.options); } + } - cancel() { - this.cancelAction.emit(); - this.close(); - } + cancel() { + this.cancelAction.emit(); + this.close(); + } - private _isNull(value: ModalOptions): boolean { - return value === null || value === undefined; - } + private _isNull(value: ModalOptions): boolean { + return value === null || value === undefined; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/index.ts index ec1f690625..f62e64fea6 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/index.ts @@ -3,5 +3,5 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './quick-filters.component'; -export * from './model'; +export * from "./quick-filters.component"; +export * from "./model"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/model/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/model/index.ts index 6da903fb89..90d10ac6eb 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/model/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/model/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './quick-filters.model'; +export * from "./quick-filters.model"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/model/quick-filters.model.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/model/quick-filters.model.ts index 54cce248cd..7c1ce1846a 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/model/quick-filters.model.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/model/quick-filters.model.ts @@ -3,31 +3,31 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Attributes } from '../../../directives'; +import { Attributes } from "../../../directives"; interface IconAttributes extends Attributes { - style?: string; - title?: string; - class?: string; - shape?: string; - // eslint-disable-next-line @typescript-eslint/naming-convention - 'data-cy'?: string; - size?: number; + style?: string; + title?: string; + class?: string; + shape?: string; + // eslint-disable-next-line @typescript-eslint/naming-convention + "data-cy"?: string; + size?: number; } export interface QuickFilter { - id?: string; - label: string; - icon?: IconAttributes; - active?: boolean; - suppressCancel?: boolean; - onActivate?: () => void; - onDeactivate?: () => void; + id?: string; + label: string; + icon?: IconAttributes; + active?: boolean; + suppressCancel?: boolean; + onActivate?: () => void; + onDeactivate?: () => void; } export type QuickFilters = QuickFilter[]; export interface QuickFilterChangeEvent { - deactivatedFilter: QuickFilter | null; - activatedFilter: QuickFilter | null; + deactivatedFilter: QuickFilter | null; + activatedFilter: QuickFilter | null; } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.html index 90de0fc334..5504fc4709 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.html @@ -4,35 +4,34 @@ -->
    -
    - QUICK FILTERS: -
    +
    + QUICK FILTERS: +
    -
    - - +
    + + - {{ filter.label }} - -
    + {{ filter.label }} +     +
    diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.scss b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.scss index 547b0b7070..8cb6d91104 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.scss +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.scss @@ -4,41 +4,41 @@ */ :host { - display: flex; - align-items: center; + display: flex; + align-items: center; } .quick-filters { - display: flex; - - .quick-filters__title { - display: inline-flex; - font-size: var(--clr-btn-appearance-standard-font-size, 0.55rem); - text-transform: uppercase; - align-items: center; - margin-right: 0.25rem; - white-space: nowrap; - } + display: flex; + + .quick-filters__title { + display: inline-flex; + font-size: var(--clr-btn-appearance-standard-font-size, 0.55rem); + text-transform: uppercase; + align-items: center; + margin-right: 0.25rem; + white-space: nowrap; + } - .quick-filters__list { - display: inline-flex; - align-items: center; + .quick-filters__list { + display: inline-flex; + align-items: center; - .quick-filters__list-item { - margin: 0 0 0 0.3rem; + .quick-filters__list-item { + margin: 0 0 0 0.3rem; - &.disabled { - cursor: not-allowed; - } + &.disabled { + cursor: not-allowed; + } - &.clickable { - cursor: pointer; - } - } + &.clickable { + cursor: pointer; + } + } - .label-light-blue { - border: 1px solid #4474b9; - background-color: rgb(177, 208, 255); - } + .label-light-blue { + border: 1px solid #4474b9; + background-color: rgb(177, 208, 255); } + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.spec.ts index 4d428a6f6e..4996831144 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.spec.ts @@ -3,27 +3,27 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { ComponentFixture, TestBed } from "@angular/core/testing"; -import { QuickFiltersComponent } from './quick-filters.component'; +import { QuickFiltersComponent } from "./quick-filters.component"; -describe('QuickFiltersComponent', () => { - let component: QuickFiltersComponent; - let fixture: ComponentFixture; +describe("QuickFiltersComponent", () => { + let component: QuickFiltersComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [QuickFiltersComponent] - }).compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [QuickFiltersComponent], + }).compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(QuickFiltersComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(QuickFiltersComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.ts index 6180ac0f70..fd0c12cadf 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/quick-filters/quick-filters.component.ts @@ -3,124 +3,136 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; +import { + Component, + EventEmitter, + Input, + OnChanges, + Output, + SimpleChanges, +} from "@angular/core"; -import { CollectionsUtil } from '@versatiledatakit/shared'; +import { CollectionsUtil } from "@versatiledatakit/shared"; -import { QuickFilter, QuickFilterChangeEvent, QuickFilters } from './model'; +import { QuickFilter, QuickFilterChangeEvent, QuickFilters } from "./model"; @Component({ - selector: 'lib-quick-filters', - templateUrl: './quick-filters.component.html', - styleUrls: ['./quick-filters.component.scss'] + selector: "lib-quick-filters", + templateUrl: "./quick-filters.component.html", + styleUrls: ["./quick-filters.component.scss"], }) export class QuickFiltersComponent implements OnChanges { - /** - * ** Quick Filters array config. - */ - @Input() set quickFilters(filters: QuickFilters) { - this._quickFilters = CollectionsUtil.isArray(filters) ? filters : []; + /** + * ** Quick Filters array config. + */ + @Input() set quickFilters(filters: QuickFilters) { + this._quickFilters = CollectionsUtil.isArray(filters) ? filters : []; + } + + get quickFilters(): QuickFilters { + return this._quickFilters; + } + + /** + * ** Show or hide Label "QUICK FILTERS" before filters list. + * + * - true - Show + * - false - Hide + */ + @Input() showFiltersLabel = false; + + /** + * ** Suppress emitted event when some filter state change. + * + * - true - Event wont be emitted + * - false - Event would be emitted on change + */ + @Input() suppressQuickFilterChangeEvent = false; + + /** + * ** Flag that indicates actionable elements should be disabled. + */ + @Input() disableActionableElements = false; + + /** + * ** Event Emitter for Filter state change. + */ + @Output() quickFilterChange = new EventEmitter(); + + activatedFilter: QuickFilter; + + private _quickFilters: QuickFilters = []; + private _deactivatedFilter: QuickFilter | null = null; + + /** + * ** NgFor elements tracking function. + */ + trackByFn(index: number, filter: QuickFilter): string { + return `${index}|${filter.id}`; + } + + /** + * ** Executed when some filter change it's state. + *

    + * State changes when User click on some Filter or press Enter while it's on focus. + *

    + */ + changeFilter(filter: QuickFilter): void { + if (this.disableActionableElements) { + return; } - get quickFilters(): QuickFilters { - return this._quickFilters; + const executeOnDeactivate = (dFilter: QuickFilter) => { + if ( + this.suppressQuickFilterChangeEvent && + CollectionsUtil.isDefined(dFilter) && + CollectionsUtil.isFunction(dFilter.onDeactivate) + ) { + dFilter.onDeactivate(); + } + }; + + if (this.activatedFilter === filter) { + if (!filter.suppressCancel) { + this._deactivatedFilter = this.activatedFilter; + this.activatedFilter = null; + executeOnDeactivate(this._deactivatedFilter); + } + } else { + this._deactivatedFilter = this.activatedFilter; + this.activatedFilter = filter; + executeOnDeactivate(this._deactivatedFilter); } - /** - * ** Show or hide Label "QUICK FILTERS" before filters list. - * - * - true - Show - * - false - Hide - */ - @Input() showFiltersLabel = false; - - /** - * ** Suppress emitted event when some filter state change. - * - * - true - Event wont be emitted - * - false - Event would be emitted on change - */ - @Input() suppressQuickFilterChangeEvent = false; - - /** - * ** Flag that indicates actionable elements should be disabled. - */ - @Input() disableActionableElements = false; - - /** - * ** Event Emitter for Filter state change. - */ - @Output() quickFilterChange = new EventEmitter(); - - activatedFilter: QuickFilter; - - private _quickFilters: QuickFilters = []; - private _deactivatedFilter: QuickFilter | null = null; - - /** - * ** NgFor elements tracking function. - */ - trackByFn(index: number, filter: QuickFilter): string { - return `${index}|${filter.id}`; + if (this.suppressQuickFilterChangeEvent) { + if ( + CollectionsUtil.isDefined(this.activatedFilter) && + CollectionsUtil.isFunction(this.activatedFilter.onActivate) + ) { + this.activatedFilter.onActivate(); + } else { + console.warn( + "QuickFiltersComponent: No listener for onActivate callback while Event Emitter is suppressed.", + ); + } } - /** - * ** Executed when some filter change it's state. - *

    - * State changes when User click on some Filter or press Enter while it's on focus. - *

    - */ - changeFilter(filter: QuickFilter): void { - if (this.disableActionableElements) { - return; - } - - const executeOnDeactivate = (dFilter: QuickFilter) => { - if ( - this.suppressQuickFilterChangeEvent && - CollectionsUtil.isDefined(dFilter) && - CollectionsUtil.isFunction(dFilter.onDeactivate) - ) { - dFilter.onDeactivate(); - } - }; - - if (this.activatedFilter === filter) { - if (!filter.suppressCancel) { - this._deactivatedFilter = this.activatedFilter; - this.activatedFilter = null; - executeOnDeactivate(this._deactivatedFilter); - } - } else { - this._deactivatedFilter = this.activatedFilter; - this.activatedFilter = filter; - executeOnDeactivate(this._deactivatedFilter); - } - - if (this.suppressQuickFilterChangeEvent) { - if (CollectionsUtil.isDefined(this.activatedFilter) && CollectionsUtil.isFunction(this.activatedFilter.onActivate)) { - this.activatedFilter.onActivate(); - } else { - console.warn('QuickFiltersComponent: No listener for onActivate callback while Event Emitter is suppressed.'); - } - } - - this.quickFilterChange.emit({ - activatedFilter: this.activatedFilter, - deactivatedFilter: this._deactivatedFilter - }); - } - - /** - * @inheritDoc - */ - ngOnChanges(changes: SimpleChanges) { - if (changes['quickFilters']) { - const defaultActiveFilter = this.quickFilters.find((f) => f.active); - - if (CollectionsUtil.isDefined(defaultActiveFilter)) { - this.activatedFilter = defaultActiveFilter; - } - } + this.quickFilterChange.emit({ + activatedFilter: this.activatedFilter, + deactivatedFilter: this._deactivatedFilter, + }); + } + + /** + * @inheritDoc + */ + ngOnChanges(changes: SimpleChanges) { + if (changes["quickFilters"]) { + const defaultActiveFilter = this.quickFilters.find((f) => f.active); + + if (CollectionsUtil.isDefined(defaultActiveFilter)) { + this.activatedFilter = defaultActiveFilter; + } } + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/index.ts index f82091559d..46d9eea009 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/index.ts @@ -3,5 +3,5 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './status-panel/status-panel.component'; -export * from './status-cell/status-cell.component'; +export * from "./status-panel/status-panel.component"; +export * from "./status-cell/status-cell.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-cell/status-cell.component.css b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-cell/status-cell.component.css index c39cfe3ddb..16c8021fd2 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-cell/status-cell.component.css +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-cell/status-cell.component.css @@ -4,9 +4,9 @@ */ .status-icon-enabled { - color: hsl(93, 67%, 38%); + color: hsl(93, 67%, 38%); } .status-icon-disabled { - color: hsl(32, 95%, 48%); + color: hsl(32, 95%, 48%); } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-cell/status-cell.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-cell/status-cell.component.html index 21da7099ce..1ee68053e1 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-cell/status-cell.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-cell/status-cell.component.html @@ -4,44 +4,44 @@ --> diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-cell/status-cell.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-cell/status-cell.component.spec.ts index 206b5383c0..3971a84980 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-cell/status-cell.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-cell/status-cell.component.spec.ts @@ -3,36 +3,36 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { ExtractJobStatusPipe } from '../../../pipes/extract-job-status.pipe'; +import { ComponentFixture, TestBed } from "@angular/core/testing"; +import { ExtractJobStatusPipe } from "../../../pipes/extract-job-status.pipe"; -import { StatusCellComponent } from './status-cell.component'; +import { StatusCellComponent } from "./status-cell.component"; const TEST_JOB = { - jobName: 'job002', - config: { - description: 'description002' - } + jobName: "job002", + config: { + description: "description002", + }, }; -describe('StatusCellComponent', () => { - let component: StatusCellComponent; - let fixture: ComponentFixture; +describe("StatusCellComponent", () => { + let component: StatusCellComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [StatusCellComponent, ExtractJobStatusPipe] - }).compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [StatusCellComponent, ExtractJobStatusPipe], + }).compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(StatusCellComponent); - component = fixture.componentInstance; - component.dataJob = TEST_JOB; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(StatusCellComponent); + component = fixture.componentInstance; + component.dataJob = TEST_JOB; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-cell/status-cell.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-cell/status-cell.component.ts index 9149915a6f..c9a51efac3 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-cell/status-cell.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-cell/status-cell.component.ts @@ -3,14 +3,14 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Component, Input } from '@angular/core'; -import { DataJob } from '../../../../model/data-job.model'; +import { Component, Input } from "@angular/core"; +import { DataJob } from "../../../../model/data-job.model"; @Component({ - selector: 'lib-status-cell', - templateUrl: './status-cell.component.html', - styleUrls: ['./status-cell.component.css'] + selector: "lib-status-cell", + templateUrl: "./status-cell.component.html", + styleUrls: ["./status-cell.component.css"], }) export class StatusCellComponent { - @Input() dataJob: DataJob; + @Input() dataJob: DataJob; } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-panel/status-panel.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-panel/status-panel.component.html index 6cf4ce3571..fc06decd56 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-panel/status-panel.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-panel/status-panel.component.html @@ -4,27 +4,27 @@ --> - Not Deployed - Disabled - Enabled + Not Deployed + Disabled + Enabled diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-panel/status-panel.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-panel/status-panel.component.spec.ts index 0d45c65b4d..aa893a2e20 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-panel/status-panel.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-panel/status-panel.component.spec.ts @@ -3,28 +3,28 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { ExtractJobStatusPipe } from '../../../pipes/extract-job-status.pipe'; +import { ComponentFixture, TestBed } from "@angular/core/testing"; +import { ExtractJobStatusPipe } from "../../../pipes/extract-job-status.pipe"; -import { StatusPanelComponent } from './status-panel.component'; +import { StatusPanelComponent } from "./status-panel.component"; -describe('StatusPanelComponent', () => { - let component: StatusPanelComponent; - let fixture: ComponentFixture; +describe("StatusPanelComponent", () => { + let component: StatusPanelComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [StatusPanelComponent, ExtractJobStatusPipe] - }).compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [StatusPanelComponent, ExtractJobStatusPipe], + }).compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(StatusPanelComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(StatusPanelComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-panel/status-panel.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-panel/status-panel.component.ts index 4042281d1a..3f0594be83 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-panel/status-panel.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/status/status-panel/status-panel.component.ts @@ -3,15 +3,15 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Component, Input } from '@angular/core'; +import { Component, Input } from "@angular/core"; -import { DataJobDeployment } from '../../../../model'; +import { DataJobDeployment } from "../../../../model"; @Component({ - selector: 'lib-status-panel', - templateUrl: './status-panel.component.html', - styleUrls: ['./status-panel.component.css'] + selector: "lib-status-panel", + templateUrl: "./status-panel.component.html", + styleUrls: ["./status-panel.component.css"], }) export class StatusPanelComponent { - @Input() jobDeployments: DataJobDeployment[]; + @Input() jobDeployments: DataJobDeployment[]; } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/widget-value/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/widget-value/index.ts index 8b6e1837f9..820549dc2f 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/widget-value/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/widget-value/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './widget-value.component'; +export * from "./widget-value.component"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/widget-value/widget-value.component.html b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/widget-value/widget-value.component.html index 283f1eaa00..c50d107ed4 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/widget-value/widget-value.component.html +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/widget-value/widget-value.component.html @@ -4,27 +4,27 @@ --> - {{ prop ? data[prop] : data }} + {{ prop ? data[prop] : data }} - -
    - -
    -     + +
    + +
    +     - -
    - Loading ... -
    -     + +
    + Loading ... +
    +     diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/widget-value/widget-value.component.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/widget-value/widget-value.component.spec.ts index dae256c364..dd8a079d5c 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/widget-value/widget-value.component.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/widget-value/widget-value.component.spec.ts @@ -3,27 +3,27 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { ComponentFixture, TestBed } from "@angular/core/testing"; -import { WidgetValueComponent } from './widget-value.component'; +import { WidgetValueComponent } from "./widget-value.component"; -describe('WidgetValueComponent', () => { - let component: WidgetValueComponent; - let fixture: ComponentFixture; +describe("WidgetValueComponent", () => { + let component: WidgetValueComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [WidgetValueComponent] - }).compileComponents(); - }); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [WidgetValueComponent], + }).compileComponents(); + }); - beforeEach(() => { - fixture = TestBed.createComponent(WidgetValueComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + beforeEach(() => { + fixture = TestBed.createComponent(WidgetValueComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it("should create", () => { + expect(component).toBeTruthy(); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/widget-value/widget-value.component.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/widget-value/widget-value.component.ts index 4428625b46..5fa28364c8 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/widget-value/widget-value.component.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/components/widget-value/widget-value.component.ts @@ -3,16 +3,16 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; -import { Observable } from 'rxjs'; +import { ChangeDetectionStrategy, Component, Input } from "@angular/core"; +import { Observable } from "rxjs"; @Component({ - selector: 'lib-widget-value', - templateUrl: './widget-value.component.html', - changeDetection: ChangeDetectionStrategy.OnPush + selector: "lib-widget-value", + templateUrl: "./widget-value.component.html", + changeDetection: ChangeDetectionStrategy.OnPush, }) export class WidgetValueComponent { - @Input() observable$: Observable; - @Input() prop: string; - @Input() showErrorState: boolean; + @Input() observable$: Observable; + @Input() prop: string; + @Input() showErrorState: boolean; } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/directives/attribute.directive.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/directives/attribute.directive.spec.ts index e214bbff5e..1070899ac5 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/directives/attribute.directive.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/directives/attribute.directive.spec.ts @@ -3,158 +3,161 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ElementRef, Renderer2 } from '@angular/core'; - -import { AttributesDirective } from './attribute.directive'; - -describe('AttributesDirective', () => { - let nativeElementStub: any; - let elementRefStub: ElementRef; - let rendererStub: jasmine.SpyObj; - - let directive: AttributesDirective; - - beforeEach(() => { - nativeElementStub = {}; - elementRefStub = { - nativeElement: nativeElementStub - }; - rendererStub = jasmine.createSpyObj('renderer2', ['setAttribute', 'removeAttribute']); - - directive = new AttributesDirective(elementRefStub, rendererStub); - }); - - it('should verify directive instance is created', () => { - // Then - expect(directive).toBeDefined(); - }); - - it('should verify on no attributes wont execute renderer', () => { - // When - directive.ngOnChanges({}); - directive.ngOnInit(); - - // Then - expect(rendererStub.setAttribute).not.toHaveBeenCalled(); - expect(rendererStub.removeAttribute).not.toHaveBeenCalled(); - }); - - it('should verify when attributes are null wont execute renderer', () => { - // When - directive.attributes = null; - directive.ngOnChanges({}); - directive.ngOnInit(); - - // Then - expect(rendererStub.setAttribute).not.toHaveBeenCalled(); - expect(rendererStub.removeAttribute).not.toHaveBeenCalled(); - }); - - it('should verify when attributes are not Literal Object wont execute renderer', () => { - // When - directive.attributes = new Map() as any; - directive.ngOnChanges({}); - directive.ngOnInit(); - - // Then - expect(rendererStub.setAttribute).not.toHaveBeenCalled(); - expect(rendererStub.removeAttribute).not.toHaveBeenCalled(); - }); - - it('should verify when providing two times same attributes by value but different reference would execute only once', () => { - // When 1 - directive.attributes = { - title: 'some-title', - size: 10, - shape: 'square', - class: 'css-class-1, css-class-2, css-class-3', - tabIndex: 0, - 'data-cy': 'cypress-selector' - }; - directive.ngOnInit(); - - // Then 1 - expect(rendererStub.setAttribute).toHaveBeenCalledTimes(6); - expect(rendererStub.removeAttribute).not.toHaveBeenCalled(); - - // When 2 - directive.attributes = { - title: 'some-title', - size: 10, - shape: 'square', - class: 'css-class-1, css-class-2, css-class-3', - tabIndex: 0, - 'data-cy': 'cypress-selector' - }; - directive.ngOnChanges({}); - - // Then - expect(rendererStub.setAttribute).toHaveBeenCalledTimes(6); - expect(rendererStub.removeAttribute).not.toHaveBeenCalled(); - }); - - it('should verify will set expected attributes from provided Literal Object', () => { - // When - directive.attributes = { - title: 'element-title', - size: 10, - shape: 'square', - class: 'css-class-1, css-class-2, css-class-3', - 'aria-label': 'aria-element-title', - tabIndex: 0, - 'data-cy': 'cypress-selector' - }; - directive.ngOnInit(); - - // Then - expect(rendererStub.setAttribute).toHaveBeenCalledTimes(7); - expect(rendererStub.removeAttribute).not.toHaveBeenCalled(); - }); - - it('should verify will remove expected attributes from provided Literal Object', () => { - // When - directive.attributes = { - title: undefined, - size: 10, - shape: 'square', - class: 'css-class-1, css-class-2, css-class-3', - 'aria-label': null, - tabIndex: 0, - 'data-cy': 'cypress-selector', - 'data-index': false, - 'data-attribute': 'delete', - 'data-btn': 'false', - 'data-attr': '' - }; - directive.ngOnInit(); - - // Then - expect(rendererStub.setAttribute).toHaveBeenCalledTimes(5); - expect(rendererStub.removeAttribute).toHaveBeenCalledTimes(6); - }); - - it('should verify will set and then remove provided attributes', () => { - // When 1 - directive.attributes = { - title: 'some-title', - size: 10, - shape: 'square', - class: 'css-class-1, css-class-2, css-class-3', - tabIndex: 0, - 'data-cy': 'cypress-selector' - }; - directive.ngOnInit(); - - // Then 1 - expect(rendererStub.setAttribute).toHaveBeenCalledTimes(6); - expect(rendererStub.removeAttribute).not.toHaveBeenCalled(); - - // When 2 - directive.attributes = null; - directive.ngOnChanges({}); - - // Then 2 - expect(rendererStub.setAttribute).toHaveBeenCalledTimes(6); - expect(rendererStub.removeAttribute).toHaveBeenCalledTimes(6); - }); +import { ElementRef, Renderer2 } from "@angular/core"; + +import { AttributesDirective } from "./attribute.directive"; + +describe("AttributesDirective", () => { + let nativeElementStub: any; + let elementRefStub: ElementRef; + let rendererStub: jasmine.SpyObj; + + let directive: AttributesDirective; + + beforeEach(() => { + nativeElementStub = {}; + elementRefStub = { + nativeElement: nativeElementStub, + }; + rendererStub = jasmine.createSpyObj("renderer2", [ + "setAttribute", + "removeAttribute", + ]); + + directive = new AttributesDirective(elementRefStub, rendererStub); + }); + + it("should verify directive instance is created", () => { + // Then + expect(directive).toBeDefined(); + }); + + it("should verify on no attributes wont execute renderer", () => { + // When + directive.ngOnChanges({}); + directive.ngOnInit(); + + // Then + expect(rendererStub.setAttribute).not.toHaveBeenCalled(); + expect(rendererStub.removeAttribute).not.toHaveBeenCalled(); + }); + + it("should verify when attributes are null wont execute renderer", () => { + // When + directive.attributes = null; + directive.ngOnChanges({}); + directive.ngOnInit(); + + // Then + expect(rendererStub.setAttribute).not.toHaveBeenCalled(); + expect(rendererStub.removeAttribute).not.toHaveBeenCalled(); + }); + + it("should verify when attributes are not Literal Object wont execute renderer", () => { + // When + directive.attributes = new Map() as any; + directive.ngOnChanges({}); + directive.ngOnInit(); + + // Then + expect(rendererStub.setAttribute).not.toHaveBeenCalled(); + expect(rendererStub.removeAttribute).not.toHaveBeenCalled(); + }); + + it("should verify when providing two times same attributes by value but different reference would execute only once", () => { + // When 1 + directive.attributes = { + title: "some-title", + size: 10, + shape: "square", + class: "css-class-1, css-class-2, css-class-3", + tabIndex: 0, + "data-cy": "cypress-selector", + }; + directive.ngOnInit(); + + // Then 1 + expect(rendererStub.setAttribute).toHaveBeenCalledTimes(6); + expect(rendererStub.removeAttribute).not.toHaveBeenCalled(); + + // When 2 + directive.attributes = { + title: "some-title", + size: 10, + shape: "square", + class: "css-class-1, css-class-2, css-class-3", + tabIndex: 0, + "data-cy": "cypress-selector", + }; + directive.ngOnChanges({}); + + // Then + expect(rendererStub.setAttribute).toHaveBeenCalledTimes(6); + expect(rendererStub.removeAttribute).not.toHaveBeenCalled(); + }); + + it("should verify will set expected attributes from provided Literal Object", () => { + // When + directive.attributes = { + title: "element-title", + size: 10, + shape: "square", + class: "css-class-1, css-class-2, css-class-3", + "aria-label": "aria-element-title", + tabIndex: 0, + "data-cy": "cypress-selector", + }; + directive.ngOnInit(); + + // Then + expect(rendererStub.setAttribute).toHaveBeenCalledTimes(7); + expect(rendererStub.removeAttribute).not.toHaveBeenCalled(); + }); + + it("should verify will remove expected attributes from provided Literal Object", () => { + // When + directive.attributes = { + title: undefined, + size: 10, + shape: "square", + class: "css-class-1, css-class-2, css-class-3", + "aria-label": null, + tabIndex: 0, + "data-cy": "cypress-selector", + "data-index": false, + "data-attribute": "delete", + "data-btn": "false", + "data-attr": "", + }; + directive.ngOnInit(); + + // Then + expect(rendererStub.setAttribute).toHaveBeenCalledTimes(5); + expect(rendererStub.removeAttribute).toHaveBeenCalledTimes(6); + }); + + it("should verify will set and then remove provided attributes", () => { + // When 1 + directive.attributes = { + title: "some-title", + size: 10, + shape: "square", + class: "css-class-1, css-class-2, css-class-3", + tabIndex: 0, + "data-cy": "cypress-selector", + }; + directive.ngOnInit(); + + // Then 1 + expect(rendererStub.setAttribute).toHaveBeenCalledTimes(6); + expect(rendererStub.removeAttribute).not.toHaveBeenCalled(); + + // When 2 + directive.attributes = null; + directive.ngOnChanges({}); + + // Then 2 + expect(rendererStub.setAttribute).toHaveBeenCalledTimes(6); + expect(rendererStub.removeAttribute).toHaveBeenCalledTimes(6); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/directives/attribute.directive.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/directives/attribute.directive.ts index 15d0ab258a..33f862004e 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/directives/attribute.directive.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/directives/attribute.directive.ts @@ -3,12 +3,24 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Directive, ElementRef, Input, OnChanges, OnInit, Renderer2, SimpleChanges } from '@angular/core'; - -import { CollectionsUtil, PrimitivesNil, TaurusObject } from '@versatiledatakit/shared'; +import { + Directive, + ElementRef, + Input, + OnChanges, + OnInit, + Renderer2, + SimpleChanges, +} from "@angular/core"; + +import { + CollectionsUtil, + PrimitivesNil, + TaurusObject, +} from "@versatiledatakit/shared"; export interface Attributes { - [attribute: string]: PrimitivesNil; + [attribute: string]: PrimitivesNil; } /** @@ -17,91 +29,114 @@ export interface Attributes { * @author gorankokin */ @Directive({ - selector: '[libSetAttributes]' + selector: "[libSetAttributes]", }) -export class AttributesDirective extends TaurusObject implements OnInit, OnChanges { - /** - * ** Input attributes that should be applied to host element. - */ - @Input() attributes: Attributes; - - private _attributesCopy: Attributes; - - /** - * ** Constructor. - */ - constructor( - private readonly el: ElementRef, - private readonly renderer: Renderer2 - ) { - super(); - } - - /** - * @inheritDoc - */ - ngOnChanges(_changes: SimpleChanges) { - this._transformAttributes(); - } - - /** - * @inheritDoc - */ - ngOnInit() { - this._transformAttributes(); +export class AttributesDirective + extends TaurusObject + implements OnInit, OnChanges +{ + /** + * ** Input attributes that should be applied to host element. + */ + @Input() attributes: Attributes; + + private _attributesCopy: Attributes; + + /** + * ** Constructor. + */ + constructor( + private readonly el: ElementRef, + private readonly renderer: Renderer2, + ) { + super(); + } + + /** + * @inheritDoc + */ + ngOnChanges(_changes: SimpleChanges) { + this._transformAttributes(); + } + + /** + * @inheritDoc + */ + ngOnInit() { + this._transformAttributes(); + } + + private _transformAttributes(): void { + if (CollectionsUtil.isEqual(this.attributes, this._attributesCopy)) { + return; } - private _transformAttributes(): void { - if (CollectionsUtil.isEqual(this.attributes, this._attributesCopy)) { - return; - } - - if (CollectionsUtil.isNil(this.attributes)) { - if (CollectionsUtil.isNil(this._attributesCopy)) { - return; - } - - CollectionsUtil.iterateObject(this._attributesCopy, (_attributeValue, attributeName) => { - this._removeAttribute(attributeName); - }); - - return; - } + if (CollectionsUtil.isNil(this.attributes)) { + if (CollectionsUtil.isNil(this._attributesCopy)) { + return; + } - if (!CollectionsUtil.isLiteralObject(this.attributes)) { - return; - } - - this._attributesCopy = CollectionsUtil.cloneDeep(this.attributes); - - CollectionsUtil.iterateObject(this._attributesCopy, (attributeValue, attributeName) => { - this._setOrRemoveAttribute(attributeName, attributeValue); - }); - } - - private _setOrRemoveAttribute(attributeName: string, attributeValue: unknown): void { - if (AttributesDirective._isTruthy(attributeValue)) { - this._setAttribute(attributeName, attributeValue); - } else { - this._removeAttribute(attributeName); - } - } - - private _setAttribute(attributeName: string, attributeValue: unknown): void { - this.renderer.setAttribute(this.el.nativeElement, attributeName, attributeValue as string); - } + CollectionsUtil.iterateObject( + this._attributesCopy, + (_attributeValue, attributeName) => { + this._removeAttribute(attributeName); + }, + ); - private _removeAttribute(attributeName: string): void { - this.renderer.removeAttribute(this.el.nativeElement, attributeName); + return; } - // eslint-disable-next-line @typescript-eslint/member-ordering,@typescript-eslint/no-explicit-any - private static _isTruthy(value: any): boolean { - return AttributesDirective._valueNotIn(value, [undefined, false, null, 'delete', 'false', '']); + if (!CollectionsUtil.isLiteralObject(this.attributes)) { + return; } - // eslint-disable-next-line @typescript-eslint/member-ordering,@typescript-eslint/no-explicit-any - private static _valueNotIn(value: any, forbiddenValues: any[]): boolean { - return forbiddenValues.every((prop) => value !== prop); + this._attributesCopy = CollectionsUtil.cloneDeep(this.attributes); + + CollectionsUtil.iterateObject( + this._attributesCopy, + (attributeValue, attributeName) => { + this._setOrRemoveAttribute(attributeName, attributeValue); + }, + ); + } + + private _setOrRemoveAttribute( + attributeName: string, + attributeValue: unknown, + ): void { + if (AttributesDirective._isTruthy(attributeValue)) { + this._setAttribute(attributeName, attributeValue); + } else { + this._removeAttribute(attributeName); } + } + + private _setAttribute(attributeName: string, attributeValue: unknown): void { + this.renderer.setAttribute( + this.el.nativeElement, + attributeName, + attributeValue as string, + ); + } + + private _removeAttribute(attributeName: string): void { + this.renderer.removeAttribute(this.el.nativeElement, attributeName); + } + + // eslint-disable-next-line @typescript-eslint/member-ordering,@typescript-eslint/no-explicit-any + private static _isTruthy(value: any): boolean { + return AttributesDirective._valueNotIn(value, [ + undefined, + false, + null, + "delete", + "false", + "", + ]); + } + + // eslint-disable-next-line @typescript-eslint/member-ordering,@typescript-eslint/no-explicit-any + private static _valueNotIn(value: any, forbiddenValues: any[]): boolean { + return forbiddenValues.every((prop) => value !== prop); + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/directives/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/directives/index.ts index 7608d11614..490e6c3170 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/directives/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/directives/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './attribute.directive'; +export * from "./attribute.directive"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/model/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/model/index.ts index 56e2b6049d..bda515e728 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/model/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/model/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './modal-options'; +export * from "./modal-options"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/model/modal-options.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/model/modal-options.spec.ts index 49272b0cb1..67c1714677 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/model/modal-options.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/model/modal-options.spec.ts @@ -3,42 +3,46 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { EditModalOptions, ConfirmationModalOptions, DeleteModalOptions } from './modal-options'; +import { + EditModalOptions, + ConfirmationModalOptions, + DeleteModalOptions, +} from "./modal-options"; -describe('ModalOptions', () => { - it('DeleteModalOptions have initial values', () => { - const deleteModalOptions = new DeleteModalOptions(); - expect(deleteModalOptions.opened).toBeFalse(); - expect(deleteModalOptions.title).toBeDefined(); - expect(deleteModalOptions.message).toBeDefined(); - expect(deleteModalOptions.cancelBtn).toBeDefined(); - expect(deleteModalOptions.showCancelBtn).toBeTrue(); - expect(deleteModalOptions.okBtn).toBeDefined(); - expect(deleteModalOptions.showOkBtn).toBeTrue(); - expect(deleteModalOptions.showCloseX).toBeTrue(); - }); +describe("ModalOptions", () => { + it("DeleteModalOptions have initial values", () => { + const deleteModalOptions = new DeleteModalOptions(); + expect(deleteModalOptions.opened).toBeFalse(); + expect(deleteModalOptions.title).toBeDefined(); + expect(deleteModalOptions.message).toBeDefined(); + expect(deleteModalOptions.cancelBtn).toBeDefined(); + expect(deleteModalOptions.showCancelBtn).toBeTrue(); + expect(deleteModalOptions.okBtn).toBeDefined(); + expect(deleteModalOptions.showOkBtn).toBeTrue(); + expect(deleteModalOptions.showCloseX).toBeTrue(); + }); - it('EditModalOptions have initial values', () => { - const editModalOptions = new EditModalOptions(); - expect(editModalOptions.opened).toBeFalse(); - expect(editModalOptions.title).toBeDefined(); - expect(editModalOptions.message).toBeDefined(); - expect(editModalOptions.cancelBtn).toBeDefined(); - expect(editModalOptions.showCancelBtn).toBeTrue(); - expect(editModalOptions.okBtn).toBeDefined(); - expect(editModalOptions.showOkBtn).toBeTrue(); - expect(editModalOptions.showCloseX).toBeTrue(); - }); + it("EditModalOptions have initial values", () => { + const editModalOptions = new EditModalOptions(); + expect(editModalOptions.opened).toBeFalse(); + expect(editModalOptions.title).toBeDefined(); + expect(editModalOptions.message).toBeDefined(); + expect(editModalOptions.cancelBtn).toBeDefined(); + expect(editModalOptions.showCancelBtn).toBeTrue(); + expect(editModalOptions.okBtn).toBeDefined(); + expect(editModalOptions.showOkBtn).toBeTrue(); + expect(editModalOptions.showCloseX).toBeTrue(); + }); - it('ConfirmationModalOptions have initial values', () => { - const confirmationModalOptions = new ConfirmationModalOptions(); - expect(confirmationModalOptions.opened).toBeFalse(); - expect(confirmationModalOptions.title).toBeDefined(); - expect(confirmationModalOptions.message).toBeDefined(); - expect(confirmationModalOptions.cancelBtn).toBeDefined(); - expect(confirmationModalOptions.showCancelBtn).toBeTrue(); - expect(confirmationModalOptions.okBtn).toBeDefined(); - expect(confirmationModalOptions.showOkBtn).toBeTrue(); - expect(confirmationModalOptions.showCloseX).toBeTrue(); - }); + it("ConfirmationModalOptions have initial values", () => { + const confirmationModalOptions = new ConfirmationModalOptions(); + expect(confirmationModalOptions.opened).toBeFalse(); + expect(confirmationModalOptions.title).toBeDefined(); + expect(confirmationModalOptions.message).toBeDefined(); + expect(confirmationModalOptions.cancelBtn).toBeDefined(); + expect(confirmationModalOptions.showCancelBtn).toBeTrue(); + expect(confirmationModalOptions.okBtn).toBeDefined(); + expect(confirmationModalOptions.showOkBtn).toBeTrue(); + expect(confirmationModalOptions.showCloseX).toBeTrue(); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/model/modal-options.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/model/modal-options.ts index 53f86084aa..a32b7438fe 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/model/modal-options.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/model/modal-options.ts @@ -4,81 +4,81 @@ */ export interface ModalOptions { - opened: boolean; - title: string; - message: string; - cancelBtn: string; - showCancelBtn: boolean; - okBtn: string; - showOkBtn: boolean; - showCloseX: boolean; + opened: boolean; + title: string; + message: string; + cancelBtn: string; + showCancelBtn: boolean; + okBtn: string; + showOkBtn: boolean; + showCloseX: boolean; - infoText?: string; - warningText?: string; + infoText?: string; + warningText?: string; } export class DeleteModalOptions implements ModalOptions { - opened: boolean; - title: string; - message: string; - cancelBtn: string; - showCancelBtn: boolean; - okBtn: string; - showOkBtn: boolean; - showCloseX: boolean; + opened: boolean; + title: string; + message: string; + cancelBtn: string; + showCancelBtn: boolean; + okBtn: string; + showOkBtn: boolean; + showCloseX: boolean; - constructor() { - this.opened = false; - this.title = 'Delete'; - this.message = 'Are you sure you want to permanently delete this item?'; - this.cancelBtn = 'Cancel'; - this.showCancelBtn = true; - this.okBtn = 'Delete'; - this.showOkBtn = true; - this.showCloseX = true; - } + constructor() { + this.opened = false; + this.title = "Delete"; + this.message = "Are you sure you want to permanently delete this item?"; + this.cancelBtn = "Cancel"; + this.showCancelBtn = true; + this.okBtn = "Delete"; + this.showOkBtn = true; + this.showCloseX = true; + } } export class EditModalOptions implements ModalOptions { - opened: boolean; - title: string; - message: string; - cancelBtn: string; - showCancelBtn: boolean; - okBtn: string; - showOkBtn: boolean; - showCloseX: boolean; + opened: boolean; + title: string; + message: string; + cancelBtn: string; + showCancelBtn: boolean; + okBtn: string; + showOkBtn: boolean; + showCloseX: boolean; - constructor() { - this.opened = false; - this.title = 'Edit'; - this.message = ''; - this.cancelBtn = 'Cancel'; - this.showCancelBtn = true; - this.okBtn = 'Edit'; - this.showOkBtn = true; - this.showCloseX = true; - } + constructor() { + this.opened = false; + this.title = "Edit"; + this.message = ""; + this.cancelBtn = "Cancel"; + this.showCancelBtn = true; + this.okBtn = "Edit"; + this.showOkBtn = true; + this.showCloseX = true; + } } export class ConfirmationModalOptions implements ModalOptions { - opened: boolean; - title: string; - message: string; - cancelBtn: string; - showCancelBtn: boolean; - okBtn: string; - showOkBtn: boolean; - showCloseX: boolean; + opened: boolean; + title: string; + message: string; + cancelBtn: string; + showCancelBtn: boolean; + okBtn: string; + showOkBtn: boolean; + showCloseX: boolean; - constructor() { - this.opened = false; - this.title = 'Confirm'; - this.message = 'Are you sure?'; - this.cancelBtn = 'Cancel'; - this.showCancelBtn = true; - this.okBtn = 'Confirm'; - this.showOkBtn = true; - this.showCloseX = true; - } + constructor() { + this.opened = false; + this.title = "Confirm"; + this.message = "Are you sure?"; + this.cancelBtn = "Cancel"; + this.showCancelBtn = true; + this.okBtn = "Confirm"; + this.showOkBtn = true; + this.showCloseX = true; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/contacts-present.pipe.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/contacts-present.pipe.spec.ts index 08fa15479d..658464dbce 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/contacts-present.pipe.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/contacts-present.pipe.spec.ts @@ -3,109 +3,109 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { DataJobContacts } from '../../model'; +import { DataJobContacts } from "../../model"; -import { ContactsPresentPipe } from './contacts-present.pipe'; +import { ContactsPresentPipe } from "./contacts-present.pipe"; -describe('ContactsPresentPipe', () => { - it('should verify instance is created', () => { - // When - const instance = new ContactsPresentPipe(); +describe("ContactsPresentPipe", () => { + it("should verify instance is created", () => { + // When + const instance = new ContactsPresentPipe(); - // Then - expect(instance).toBeDefined(); - }); + // Then + expect(instance).toBeDefined(); + }); - describe('Methods::', () => { - let pipe: ContactsPresentPipe; + describe("Methods::", () => { + let pipe: ContactsPresentPipe; - beforeEach(() => { - pipe = new ContactsPresentPipe(); - }); + beforeEach(() => { + pipe = new ContactsPresentPipe(); + }); - describe('|transform|', () => { - const parameters: Array<{ - contacts: DataJobContacts; - expected: boolean; - }> = [ - { contacts: null, expected: false }, - { - contacts: { - notifiedOnJobSuccess: undefined, - notifiedOnJobDeploy: undefined, - notifiedOnJobFailurePlatformError: undefined, - notifiedOnJobFailureUserError: undefined - }, - expected: false - }, - { - contacts: { - notifiedOnJobSuccess: [], - notifiedOnJobDeploy: [], - notifiedOnJobFailurePlatformError: [], - notifiedOnJobFailureUserError: [] - }, - expected: false - }, - { - contacts: { - notifiedOnJobSuccess: ['alpha@abc.com'], - notifiedOnJobDeploy: [], - notifiedOnJobFailurePlatformError: [], - notifiedOnJobFailureUserError: [] - }, - expected: true - }, - { - contacts: { - notifiedOnJobSuccess: [], - notifiedOnJobDeploy: ['beta@abc.com'], - notifiedOnJobFailurePlatformError: [], - notifiedOnJobFailureUserError: [] - }, - expected: true - }, - { - contacts: { - notifiedOnJobSuccess: [], - notifiedOnJobDeploy: [], - notifiedOnJobFailurePlatformError: ['gama@abc.com'], - notifiedOnJobFailureUserError: [] - }, - expected: true - }, - { - contacts: { - notifiedOnJobSuccess: [], - notifiedOnJobDeploy: [], - notifiedOnJobFailurePlatformError: [], - notifiedOnJobFailureUserError: ['delta@abc.com'] - }, - expected: true - }, - { - contacts: { - notifiedOnJobSuccess: ['alpha@abc.com'], - notifiedOnJobDeploy: ['beta@abc.com'], - notifiedOnJobFailurePlatformError: ['gama@abc.com'], - notifiedOnJobFailureUserError: ['delta@abc.com'] - }, - expected: true - } - ]; + describe("|transform|", () => { + const parameters: Array<{ + contacts: DataJobContacts; + expected: boolean; + }> = [ + { contacts: null, expected: false }, + { + contacts: { + notifiedOnJobSuccess: undefined, + notifiedOnJobDeploy: undefined, + notifiedOnJobFailurePlatformError: undefined, + notifiedOnJobFailureUserError: undefined, + }, + expected: false, + }, + { + contacts: { + notifiedOnJobSuccess: [], + notifiedOnJobDeploy: [], + notifiedOnJobFailurePlatformError: [], + notifiedOnJobFailureUserError: [], + }, + expected: false, + }, + { + contacts: { + notifiedOnJobSuccess: ["alpha@abc.com"], + notifiedOnJobDeploy: [], + notifiedOnJobFailurePlatformError: [], + notifiedOnJobFailureUserError: [], + }, + expected: true, + }, + { + contacts: { + notifiedOnJobSuccess: [], + notifiedOnJobDeploy: ["beta@abc.com"], + notifiedOnJobFailurePlatformError: [], + notifiedOnJobFailureUserError: [], + }, + expected: true, + }, + { + contacts: { + notifiedOnJobSuccess: [], + notifiedOnJobDeploy: [], + notifiedOnJobFailurePlatformError: ["gama@abc.com"], + notifiedOnJobFailureUserError: [], + }, + expected: true, + }, + { + contacts: { + notifiedOnJobSuccess: [], + notifiedOnJobDeploy: [], + notifiedOnJobFailurePlatformError: [], + notifiedOnJobFailureUserError: ["delta@abc.com"], + }, + expected: true, + }, + { + contacts: { + notifiedOnJobSuccess: ["alpha@abc.com"], + notifiedOnJobDeploy: ["beta@abc.com"], + notifiedOnJobFailurePlatformError: ["gama@abc.com"], + notifiedOnJobFailureUserError: ["delta@abc.com"], + }, + expected: true, + }, + ]; - let cnt = 0; - for (const params of parameters) { - cnt++; + let cnt = 0; + for (const params of parameters) { + cnt++; - it(`should verify will return ${params.expected as unknown as string} case ${cnt}`, () => { - // When - const value = pipe.transform(params.contacts); + it(`should verify will return ${params.expected as unknown as string} case ${cnt}`, () => { + // When + const value = pipe.transform(params.contacts); - // Then - expect(value).toEqual(params.expected); - }); - } + // Then + expect(value).toEqual(params.expected); }); + } }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/contacts-present.pipe.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/contacts-present.pipe.ts index 0ce5f6c325..9d4a91a7b4 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/contacts-present.pipe.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/contacts-present.pipe.ts @@ -3,31 +3,35 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Pipe, PipeTransform } from '@angular/core'; +import { Pipe, PipeTransform } from "@angular/core"; -import { CollectionsUtil } from '@versatiledatakit/shared'; +import { CollectionsUtil } from "@versatiledatakit/shared"; -import { DataJobContacts } from '../../model'; +import { DataJobContacts } from "../../model"; @Pipe({ - name: 'contactsPresent' + name: "contactsPresent", }) export class ContactsPresentPipe implements PipeTransform { - /** - * @inheritDoc - */ - transform(contacts: DataJobContacts): boolean { - return ( - CollectionsUtil.isDefined(contacts) && - (ContactsPresentPipe.contactIsPresent(contacts.notifiedOnJobSuccess) || - ContactsPresentPipe.contactIsPresent(contacts.notifiedOnJobDeploy) || - ContactsPresentPipe.contactIsPresent(contacts.notifiedOnJobFailureUserError) || - ContactsPresentPipe.contactIsPresent(contacts.notifiedOnJobFailurePlatformError)) - ); - } + /** + * @inheritDoc + */ + transform(contacts: DataJobContacts): boolean { + return ( + CollectionsUtil.isDefined(contacts) && + (ContactsPresentPipe.contactIsPresent(contacts.notifiedOnJobSuccess) || + ContactsPresentPipe.contactIsPresent(contacts.notifiedOnJobDeploy) || + ContactsPresentPipe.contactIsPresent( + contacts.notifiedOnJobFailureUserError, + ) || + ContactsPresentPipe.contactIsPresent( + contacts.notifiedOnJobFailurePlatformError, + )) + ); + } - // eslint-disable-next-line @typescript-eslint/member-ordering - private static contactIsPresent(contacts: string[]): boolean { - return CollectionsUtil.isArray(contacts) && contacts.length > 0; - } + // eslint-disable-next-line @typescript-eslint/member-ordering + private static contactIsPresent(contacts: string[]): boolean { + return CollectionsUtil.isArray(contacts) && contacts.length > 0; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/execution-success-rate.pipe.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/execution-success-rate.pipe.spec.ts index cd21778c22..b49ca9aca7 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/execution-success-rate.pipe.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/execution-success-rate.pipe.spec.ts @@ -3,87 +3,87 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { DataJobDeployment } from '../../model'; - -import { ExecutionSuccessRatePipe } from './execution-success-rate.pipe'; - -describe('ExecutionSuccessRatePipe', () => { - let localeId: string; - let pipe: ExecutionSuccessRatePipe; - let deployments: DataJobDeployment[]; - - beforeEach(() => { - localeId = 'en-US'; - pipe = new ExecutionSuccessRatePipe(localeId); - deployments = [ - { - successfulExecutions: 20, - failedExecutions: 5 - } as DataJobDeployment - ]; - }); +import { DataJobDeployment } from "../../model"; + +import { ExecutionSuccessRatePipe } from "./execution-success-rate.pipe"; + +describe("ExecutionSuccessRatePipe", () => { + let localeId: string; + let pipe: ExecutionSuccessRatePipe; + let deployments: DataJobDeployment[]; + + beforeEach(() => { + localeId = "en-US"; + pipe = new ExecutionSuccessRatePipe(localeId); + deployments = [ + { + successfulExecutions: 20, + failedExecutions: 5, + } as DataJobDeployment, + ]; + }); + + it("should verify instance is created", () => { + // Then + expect(pipe).toBeDefined(); + }); + + describe("Methods::", () => { + describe("|transform|", () => { + it(`should verify will return '' when no deployments or Empty Array`, () => { + // When + const r1 = pipe.transform(null); + const r2 = pipe.transform(undefined); + const r3 = pipe.transform([]); - it('should verify instance is created', () => { // Then - expect(pipe).toBeDefined(); - }); + expect(r1).toEqual(""); + expect(r2).toEqual(""); + expect(r3).toEqual(""); + }); + + it(`should verify will return '' when sum of all all executions is 0`, () => { + // Given + deployments[0].successfulExecutions = 0; + deployments[0].failedExecutions = 0; + + // When + const r = pipe.transform(deployments); + + // Then + expect(r).toEqual(""); + }); + + it("should verify will return 100% when no failed executions", () => { + // Given + deployments[0].failedExecutions = 0; + + // When + const r = pipe.transform(deployments); - describe('Methods::', () => { - describe('|transform|', () => { - it(`should verify will return '' when no deployments or Empty Array`, () => { - // When - const r1 = pipe.transform(null); - const r2 = pipe.transform(undefined); - const r3 = pipe.transform([]); - - // Then - expect(r1).toEqual(''); - expect(r2).toEqual(''); - expect(r3).toEqual(''); - }); - - it(`should verify will return '' when sum of all all executions is 0`, () => { - // Given - deployments[0].successfulExecutions = 0; - deployments[0].failedExecutions = 0; - - // When - const r = pipe.transform(deployments); - - // Then - expect(r).toEqual(''); - }); - - it('should verify will return 100% when no failed executions', () => { - // Given - deployments[0].failedExecutions = 0; - - // When - const r = pipe.transform(deployments); - - // Then - expect(r).toEqual('100.00%'); - }); - - it('should verify will return percent of success and number of failed executions (case 1)', () => { - // When - const r = pipe.transform(deployments); - - // Then - expect(r).toEqual('80.00% (5 failed)'); - }); - - it('should verify will return percent of success and number of failed executions (case 2)', () => { - // Given - deployments[0].successfulExecutions = 18; - deployments[0].failedExecutions = 15; - - // When - const r = pipe.transform(deployments); - - // Then - expect(r).toEqual('54.55% (15 failed)'); - }); - }); + // Then + expect(r).toEqual("100.00%"); + }); + + it("should verify will return percent of success and number of failed executions (case 1)", () => { + // When + const r = pipe.transform(deployments); + + // Then + expect(r).toEqual("80.00% (5 failed)"); + }); + + it("should verify will return percent of success and number of failed executions (case 2)", () => { + // Given + deployments[0].successfulExecutions = 18; + deployments[0].failedExecutions = 15; + + // When + const r = pipe.transform(deployments); + + // Then + expect(r).toEqual("54.55% (15 failed)"); + }); }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/execution-success-rate.pipe.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/execution-success-rate.pipe.ts index 06db00e006..4b671fa50d 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/execution-success-rate.pipe.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/execution-success-rate.pipe.ts @@ -3,49 +3,53 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Inject, LOCALE_ID, Pipe, PipeTransform } from '@angular/core'; -import { PercentPipe } from '@angular/common'; +import { Inject, LOCALE_ID, Pipe, PipeTransform } from "@angular/core"; +import { PercentPipe } from "@angular/common"; -import { CollectionsUtil } from '@versatiledatakit/shared'; +import { CollectionsUtil } from "@versatiledatakit/shared"; -import { DataJobDeployment } from '../../model'; +import { DataJobDeployment } from "../../model"; @Pipe({ - name: 'executionSuccessRate' + name: "executionSuccessRate", }) export class ExecutionSuccessRatePipe implements PipeTransform { - private readonly _percentPipe: PercentPipe; - - /** - * ** Constructor. - */ - constructor(@Inject(LOCALE_ID) readonly localeId: string) { - this._percentPipe = new PercentPipe(localeId); + private readonly _percentPipe: PercentPipe; + + /** + * ** Constructor. + */ + constructor(@Inject(LOCALE_ID) readonly localeId: string) { + this._percentPipe = new PercentPipe(localeId); + } + + /** + * @inheritDoc + */ + transform(deployments: DataJobDeployment[]): string { + let result = ""; + + if (CollectionsUtil.isArrayEmpty(deployments)) { + return result; } - /** - * @inheritDoc - */ - transform(deployments: DataJobDeployment[]): string { - let result = ''; - - if (CollectionsUtil.isArrayEmpty(deployments)) { - return result; - } - - const firstDeployment = deployments[0]; - const allExecutions = firstDeployment.successfulExecutions + firstDeployment.failedExecutions; + const firstDeployment = deployments[0]; + const allExecutions = + firstDeployment.successfulExecutions + firstDeployment.failedExecutions; - if (allExecutions === 0) { - return result; - } - - result += this._percentPipe.transform(firstDeployment.successfulExecutions / allExecutions, '1.2-2'); + if (allExecutions === 0) { + return result; + } - if (firstDeployment.failedExecutions > 0) { - result += ` (${firstDeployment.failedExecutions} failed)`; - } + result += this._percentPipe.transform( + firstDeployment.successfulExecutions / allExecutions, + "1.2-2", + ); - return result; + if (firstDeployment.failedExecutions > 0) { + result += ` (${firstDeployment.failedExecutions} failed)`; } + + return result; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/extract-contacts.pipe.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/extract-contacts.pipe.ts index 25258e3106..ae18fdd751 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/extract-contacts.pipe.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/extract-contacts.pipe.ts @@ -3,21 +3,21 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Pipe, PipeTransform } from '@angular/core'; +import { Pipe, PipeTransform } from "@angular/core"; @Pipe({ - name: 'extractContacts' + name: "extractContacts", }) export class ExtractContactsPipe implements PipeTransform { - static transform(contacts: string[]): string[] { - if (Array.isArray(contacts) && contacts.length) { - return contacts; - } else { - return []; - } + static transform(contacts: string[]): string[] { + if (Array.isArray(contacts) && contacts.length) { + return contacts; + } else { + return []; } + } - transform(contacts: string[]): string[] { - return ExtractContactsPipe.transform(contacts); - } + transform(contacts: string[]): string[] { + return ExtractContactsPipe.transform(contacts); + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/extract-job-status.pipe.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/extract-job-status.pipe.spec.ts index e481a0c810..eb8b6b9d6a 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/extract-job-status.pipe.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/extract-job-status.pipe.spec.ts @@ -3,61 +3,61 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { TestBed } from '@angular/core/testing'; -import { DataJobDeploymentDetails } from '../../model/data-job-details.model'; -import { ExtractJobStatusPipe } from './extract-job-status.pipe'; +import { TestBed } from "@angular/core/testing"; +import { DataJobDeploymentDetails } from "../../model/data-job-details.model"; +import { ExtractJobStatusPipe } from "./extract-job-status.pipe"; const TEST_JOB_DEPLOYMENT_DETAILS: DataJobDeploymentDetails = { - id: 'id002', - enabled: true, - /* eslint-disable-next-line @typescript-eslint/naming-convention */ - job_version: 'v001', - mode: 'special', - /* eslint-disable-next-line @typescript-eslint/naming-convention */ - vdk_version: 'v002', - python_version: '3.9-secure', - contacts: null, - /* eslint-disable @typescript-eslint/naming-convention */ - deployed_date: '2020-11-11T10:10:10Z', - deployed_by: 'pmitev', - resources: { - memory_limit: 1000, - memory_request: 1000, - cpu_limit: 0.5, - cpu_request: 0.5 - } - /* eslint-enable @typescript-eslint/naming-convention */ + id: "id002", + enabled: true, + /* eslint-disable-next-line @typescript-eslint/naming-convention */ + job_version: "v001", + mode: "special", + /* eslint-disable-next-line @typescript-eslint/naming-convention */ + vdk_version: "v002", + python_version: "3.9-secure", + contacts: null, + /* eslint-disable @typescript-eslint/naming-convention */ + deployed_date: "2020-11-11T10:10:10Z", + deployed_by: "pmitev", + resources: { + memory_limit: 1000, + memory_request: 1000, + cpu_limit: 0.5, + cpu_request: 0.5, + }, + /* eslint-enable @typescript-eslint/naming-convention */ }; -describe('ExtractJobStatusPipe', () => { - let pipe: ExtractJobStatusPipe; - let deploymentDetails: DataJobDeploymentDetails; +describe("ExtractJobStatusPipe", () => { + let pipe: ExtractJobStatusPipe; + let deploymentDetails: DataJobDeploymentDetails; - beforeEach(() => { - TestBed.configureTestingModule({ providers: [ExtractJobStatusPipe] }); - pipe = TestBed.inject(ExtractJobStatusPipe); - deploymentDetails = TEST_JOB_DEPLOYMENT_DETAILS; - }); + beforeEach(() => { + TestBed.configureTestingModule({ providers: [ExtractJobStatusPipe] }); + pipe = TestBed.inject(ExtractJobStatusPipe); + deploymentDetails = TEST_JOB_DEPLOYMENT_DETAILS; + }); - it('can instantiate ExtractJobStatusPipe', () => { - expect(pipe).toBeTruthy(); - }); + it("can instantiate ExtractJobStatusPipe", () => { + expect(pipe).toBeTruthy(); + }); - it('transforms empty deploymentDetails to NOT_DEPLOYED', () => { - expect(pipe.transform([])).toEqual('Not Deployed'); - }); + it("transforms empty deploymentDetails to NOT_DEPLOYED", () => { + expect(pipe.transform([])).toEqual("Not Deployed"); + }); - it('transforms disabled deploymentDetails to DISABLED', () => { - deploymentDetails.enabled = false; + it("transforms disabled deploymentDetails to DISABLED", () => { + deploymentDetails.enabled = false; - const jobDeployments = [deploymentDetails]; - expect(pipe.transform(jobDeployments)).toEqual('Disabled'); - }); + const jobDeployments = [deploymentDetails]; + expect(pipe.transform(jobDeployments)).toEqual("Disabled"); + }); - it('transforms enabled deploymentDetails to DISABLED', () => { - deploymentDetails.enabled = true; + it("transforms enabled deploymentDetails to DISABLED", () => { + deploymentDetails.enabled = true; - const jobExecutions = [deploymentDetails]; - expect(pipe.transform(jobExecutions)).toEqual('Enabled'); - }); + const jobExecutions = [deploymentDetails]; + expect(pipe.transform(jobExecutions)).toEqual("Enabled"); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/extract-job-status.pipe.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/extract-job-status.pipe.ts index 661d3f4785..f9838892f9 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/extract-job-status.pipe.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/extract-job-status.pipe.ts @@ -3,40 +3,40 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Pipe, PipeTransform } from '@angular/core'; +import { Pipe, PipeTransform } from "@angular/core"; -import { DataJobStatus, StatusDetails } from '../../model'; +import { DataJobStatus, StatusDetails } from "../../model"; @Pipe({ - name: 'extractJobStatus', - pure: false + name: "extractJobStatus", + pure: false, }) export class ExtractJobStatusPipe implements PipeTransform { - /** - * ** Extract Job Status from Details. - * - * - This method should be equal to instance method. - * - Methods: {@link ExtractJobStatusPipe.transform} - */ - static transform(jobDeployments: StatusDetails[]): DataJobStatus { - if (!jobDeployments?.length) { - return DataJobStatus.NOT_DEPLOYED; - } - - if (jobDeployments[jobDeployments.length - 1].enabled) { - return DataJobStatus.ENABLED; - } - - return DataJobStatus.DISABLED; + /** + * ** Extract Job Status from Details. + * + * - This method should be equal to instance method. + * - Methods: {@link ExtractJobStatusPipe.transform} + */ + static transform(jobDeployments: StatusDetails[]): DataJobStatus { + if (!jobDeployments?.length) { + return DataJobStatus.NOT_DEPLOYED; } - /** - * @inheritDoc - * - * - This method should be equal to instance method. - * - Methods: {@link ExtractJobStatusPipe.transform} - */ - transform(jobDeployments: StatusDetails[]): DataJobStatus { - return ExtractJobStatusPipe.transform(jobDeployments); + if (jobDeployments[jobDeployments.length - 1].enabled) { + return DataJobStatus.ENABLED; } + + return DataJobStatus.DISABLED; + } + + /** + * @inheritDoc + * + * - This method should be equal to instance method. + * - Methods: {@link ExtractJobStatusPipe.transform} + */ + transform(jobDeployments: StatusDetails[]): DataJobStatus { + return ExtractJobStatusPipe.transform(jobDeployments); + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/format-delta.pipe.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/format-delta.pipe.spec.ts index fd3ae60e68..e38f3af8c3 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/format-delta.pipe.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/format-delta.pipe.spec.ts @@ -3,90 +3,94 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { TestBed } from '@angular/core/testing'; +import { TestBed } from "@angular/core/testing"; -import { DataJobExecution, DataJobExecutionStatus, DataJobExecutionType } from '../../model'; +import { + DataJobExecution, + DataJobExecutionStatus, + DataJobExecutionType, +} from "../../model"; -import { FormatDeltaPipe } from './format-delta.pipe'; +import { FormatDeltaPipe } from "./format-delta.pipe"; const TEST_JOBS_EXECUTIONS = { - id: 'id001', - jobName: 'name001', - status: DataJobExecutionStatus.RUNNING, - startTime: new Date().toISOString(), - startedBy: 'aUserov', - type: DataJobExecutionType.SCHEDULED, - endTime: new Date().toISOString(), - opId: 'op001', - message: 'Message 001' + id: "id001", + jobName: "name001", + status: DataJobExecutionStatus.RUNNING, + startTime: new Date().toISOString(), + startedBy: "aUserov", + type: DataJobExecutionType.SCHEDULED, + endTime: new Date().toISOString(), + opId: "op001", + message: "Message 001", } as DataJobExecution; -describe('FormatDeltaPipe', () => { - let pipe: FormatDeltaPipe; - let execution: DataJobExecution; - - beforeEach(() => { - TestBed.configureTestingModule({ providers: [FormatDeltaPipe] }); - pipe = TestBed.inject(FormatDeltaPipe); - execution = { ...TEST_JOBS_EXECUTIONS }; - }); - - it('can instantiate FormatDeltaPipe', () => { - expect(pipe).toBeTruthy(); - }); - - it('transforms missing startTime to valid value', (): void => { - execution.startTime = undefined; - execution.endTime = undefined; - expect(pipe.transform(execution)).toEqual(''); - }); - - it('transforms invalid EndData to valid delta', (): void => { - execution.startTime = substract(new Date().toISOString(), 1); - execution.endTime = null; - expect(pipe.transform(execution)).toBeDefined(); - }); - - it('transforms a out of range input to NaN delta', (): void => { - const currentDate = new Date().toISOString(); - execution.startTime = substract(currentDate, -10); - execution.endTime = currentDate; - expect(pipe.transform(execution)).toBe('N/A'); - }); - - it('transforms a seconds range input to valid delta', (): void => { - const currentDate = new Date().toISOString(); - execution.startTime = substract(currentDate, 10); - execution.endTime = currentDate; - expect(pipe.transform(execution)).toBe('10s'); - }); - - it('transforms a minutes range input to valid delta', (): void => { - const currentDate = new Date().toISOString(); - execution.startTime = substract(currentDate, 121); - execution.endTime = currentDate; - expect(pipe.transform(execution)).toBe('2m 1s'); - }); - - it('transforms an hours range input to valid delta', (): void => { - const currentDate = new Date().toISOString(); - execution.startTime = substract(currentDate, 7260); - execution.endTime = currentDate; - expect(pipe.transform(execution)).toBe('2h 1m'); - }); - - it('transforms a days range input to valid delta', (): void => { - const currentDate = new Date().toISOString(); - execution.startTime = substract(currentDate, 176400); - execution.endTime = currentDate; - expect(pipe.transform(execution)).toBe('2d 1h'); - }); - - const substract = (date: string, secondsToSubstract: number) => { - const d = new Date(date); - const result = d; - result.setTime(d.getTime() - 1000 * secondsToSubstract); - - return result.toISOString(); - }; +describe("FormatDeltaPipe", () => { + let pipe: FormatDeltaPipe; + let execution: DataJobExecution; + + beforeEach(() => { + TestBed.configureTestingModule({ providers: [FormatDeltaPipe] }); + pipe = TestBed.inject(FormatDeltaPipe); + execution = { ...TEST_JOBS_EXECUTIONS }; + }); + + it("can instantiate FormatDeltaPipe", () => { + expect(pipe).toBeTruthy(); + }); + + it("transforms missing startTime to valid value", (): void => { + execution.startTime = undefined; + execution.endTime = undefined; + expect(pipe.transform(execution)).toEqual(""); + }); + + it("transforms invalid EndData to valid delta", (): void => { + execution.startTime = substract(new Date().toISOString(), 1); + execution.endTime = null; + expect(pipe.transform(execution)).toBeDefined(); + }); + + it("transforms a out of range input to NaN delta", (): void => { + const currentDate = new Date().toISOString(); + execution.startTime = substract(currentDate, -10); + execution.endTime = currentDate; + expect(pipe.transform(execution)).toBe("N/A"); + }); + + it("transforms a seconds range input to valid delta", (): void => { + const currentDate = new Date().toISOString(); + execution.startTime = substract(currentDate, 10); + execution.endTime = currentDate; + expect(pipe.transform(execution)).toBe("10s"); + }); + + it("transforms a minutes range input to valid delta", (): void => { + const currentDate = new Date().toISOString(); + execution.startTime = substract(currentDate, 121); + execution.endTime = currentDate; + expect(pipe.transform(execution)).toBe("2m 1s"); + }); + + it("transforms an hours range input to valid delta", (): void => { + const currentDate = new Date().toISOString(); + execution.startTime = substract(currentDate, 7260); + execution.endTime = currentDate; + expect(pipe.transform(execution)).toBe("2h 1m"); + }); + + it("transforms a days range input to valid delta", (): void => { + const currentDate = new Date().toISOString(); + execution.startTime = substract(currentDate, 176400); + execution.endTime = currentDate; + expect(pipe.transform(execution)).toBe("2d 1h"); + }); + + const substract = (date: string, secondsToSubstract: number) => { + const d = new Date(date); + const result = d; + result.setTime(d.getTime() - 1000 * secondsToSubstract); + + return result.toISOString(); + }; }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/format-delta.pipe.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/format-delta.pipe.ts index 51f4866180..8070b62cac 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/format-delta.pipe.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/format-delta.pipe.ts @@ -3,11 +3,11 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Pipe, PipeTransform } from '@angular/core'; +import { Pipe, PipeTransform } from "@angular/core"; -import { CollectionsUtil } from '@versatiledatakit/shared'; +import { CollectionsUtil } from "@versatiledatakit/shared"; -import { DataJobExecution } from '../../model'; +import { DataJobExecution } from "../../model"; /** * Format Delta Pipe formats the delta of the execution start and end Time. @@ -24,60 +24,63 @@ import { DataJobExecution } from '../../model'; * 4: If the duration is more than 1 day, the format is `${days}d ${hours}h` */ @Pipe({ - name: 'formatDelta' + name: "formatDelta", }) export class FormatDeltaPipe implements PipeTransform { - static formatDelta(delta: number): string { - if (delta < 0) { - return 'N/A'; - } else if (delta < 60) { - return `${Math.ceil(delta)}s`; - } else if (delta < 3600) { - const minute = Math.floor((delta / 60) % 60); - const seconds = Math.floor(delta % 60); + static formatDelta(delta: number): string { + if (delta < 0) { + return "N/A"; + } else if (delta < 60) { + return `${Math.ceil(delta)}s`; + } else if (delta < 3600) { + const minute = Math.floor((delta / 60) % 60); + const seconds = Math.floor(delta % 60); - return `${minute}m ${seconds}s`; - } else if (delta < 86400) { - const hours = Math.floor((delta / (60 * 60)) % 24); - const minutes = Math.floor((delta / 60) % 60); + return `${minute}m ${seconds}s`; + } else if (delta < 86400) { + const hours = Math.floor((delta / (60 * 60)) % 24); + const minutes = Math.floor((delta / 60) % 60); - return `${hours}h ${minutes}m`; - } else { - const days = Math.floor(delta / (60 * 60 * 24)); - const hours = Math.floor((delta / (60 * 60)) % 24); + return `${hours}h ${minutes}m`; + } else { + const days = Math.floor(delta / (60 * 60 * 24)); + const hours = Math.floor((delta / (60 * 60)) % 24); - return `${days}d ${hours}h`; - } + return `${days}d ${hours}h`; } + } - /** - * @inheritDoc - */ - transform(execution: DataJobExecution): string { - if (CollectionsUtil.isNil(execution.startTime)) { - return ''; - } - - const delta = (FormatDeltaPipe._getEndTime(execution) - FormatDeltaPipe._getStartTime(execution)) / 1000; - - return FormatDeltaPipe.formatDelta(delta); + /** + * @inheritDoc + */ + transform(execution: DataJobExecution): string { + if (CollectionsUtil.isNil(execution.startTime)) { + return ""; } - // eslint-disable-next-line @typescript-eslint/member-ordering - private static _getStartTime(execution: DataJobExecution): number { - if (CollectionsUtil.isDefined(execution.startTime)) { - return new Date(execution.startTime).getTime(); - } + const delta = + (FormatDeltaPipe._getEndTime(execution) - + FormatDeltaPipe._getStartTime(execution)) / + 1000; - return Date.now(); + return FormatDeltaPipe.formatDelta(delta); + } + + // eslint-disable-next-line @typescript-eslint/member-ordering + private static _getStartTime(execution: DataJobExecution): number { + if (CollectionsUtil.isDefined(execution.startTime)) { + return new Date(execution.startTime).getTime(); } - // eslint-disable-next-line @typescript-eslint/member-ordering - private static _getEndTime(execution: DataJobExecution): number { - if (CollectionsUtil.isDefined(execution.endTime)) { - return new Date(execution.endTime).getTime(); - } + return Date.now(); + } - return Date.now(); + // eslint-disable-next-line @typescript-eslint/member-ordering + private static _getEndTime(execution: DataJobExecution): number { + if (CollectionsUtil.isDefined(execution.endTime)) { + return new Date(execution.endTime).getTime(); } + + return Date.now(); + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/format-duration.pipe.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/format-duration.pipe.ts index 717f01aa93..8785773ac8 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/format-duration.pipe.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/format-duration.pipe.ts @@ -3,17 +3,19 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Pipe, PipeTransform } from '@angular/core'; -import { FormatDeltaPipe } from './format-delta.pipe'; +import { Pipe, PipeTransform } from "@angular/core"; +import { FormatDeltaPipe } from "./format-delta.pipe"; @Pipe({ - name: 'formatDuration' + name: "formatDuration", }) export class FormatDurationPipe implements PipeTransform { - /** - * @inheritDoc - */ - transform(durationSeconds: number): string { - return durationSeconds ? FormatDeltaPipe.formatDelta(durationSeconds) : null; - } + /** + * @inheritDoc + */ + transform(durationSeconds: number): string { + return durationSeconds + ? FormatDeltaPipe.formatDelta(durationSeconds) + : null; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/format-schedule.pipe.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/format-schedule.pipe.spec.ts index 2c776496a0..19130f103a 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/format-schedule.pipe.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/format-schedule.pipe.spec.ts @@ -3,412 +3,440 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { FormatSchedulePipe } from './format-schedule.pipe'; +import { FormatSchedulePipe } from "./format-schedule.pipe"; -describe('FormatSchedulePipe', () => { - let pipe: FormatSchedulePipe; +describe("FormatSchedulePipe", () => { + let pipe: FormatSchedulePipe; - beforeEach(() => { - pipe = new FormatSchedulePipe(); - }); + beforeEach(() => { + pipe = new FormatSchedulePipe(); + }); + + it("can instantiate FormatSchedulePipe", () => { + // Then + expect(pipe).toBeTruthy(); + }); + + describe("Methods::", () => { + describe("|transform|", () => { + it("should verify on missing schedule returns empty result", () => { + // Given + const schedule: string = null; + + // When + const result = pipe.transform(schedule); - it('can instantiate FormatSchedulePipe', () => { // Then - expect(pipe).toBeTruthy(); - }); + expect(result).toBe(""); + }); + + it("should verify on missing schedule returns default value", () => { + // Given + const schedule: string = null; + const defaultResult = "default001"; + + //When + const result = pipe.transform(schedule, defaultResult); + + // Then + expect(result).toBe(defaultResult); + }); + + it('should verify will correctly translate cron "5 5 5 2 *"', () => { + // Given + const schedule = "5 5 5 2 *"; + + // When + const result = pipe.transform(schedule); + + // Then + expect(result).toBeDefined(); + expect(result).toContain("At 05:05 AM"); + }); + + it('should verify will return parsing error message invalid cron "65 65 65 65 65"', () => { + // Given + const schedule = "65 65 65 65 65"; - describe('Methods::', () => { - describe('|transform|', () => { - it('should verify on missing schedule returns empty result', () => { - // Given - const schedule: string = null; + // When + const result = pipe.transform(schedule); - // When - const result = pipe.transform(schedule); + // Then + expect(result).toBeDefined(); + expect(result).toContain(`Invalid Cron expression "${schedule}"`); + }); + + describe("testing minute range", () => { + it('should verify will correctly translate cron "0 11 10 7 *"', () => { + // Given + const schedule = "0 11 10 7 *"; + + // When + const result = pipe.transform(schedule); + + // Then + expect(result).toBeDefined(); + expect(result).toContain( + "At 11:00 AM, on day 10 of the month, only in July", + ); + }); + + it('should verify will correctly translate cron "59 11 10 7 *"', () => { + // Given + const schedule = "59 11 10 7 *"; + + // When + const result = pipe.transform(schedule); + + // Then + expect(result).toBeDefined(); + expect(result).toContain( + "At 11:59 AM, on day 10 of the month, only in July", + ); + }); + + it('should verify will return parsing error message invalid cron "60 11 10 7 *"', () => { + // Given + const schedule = "60 12 10 7 *"; - // Then - expect(result).toBe(''); - }); + // When + const result = pipe.transform(schedule); - it('should verify on missing schedule returns default value', () => { - // Given - const schedule: string = null; - const defaultResult = 'default001'; + // Then + expect(result).toBeDefined(); + expect(result).toContain(`Invalid Cron expression "${schedule}"`); + }); + }); + + describe("testing hour range", () => { + it('should verify will correctly translate cron "30 0 10 7 *"', () => { + // Given + const schedule = "30 0 10 7 *"; - //When - const result = pipe.transform(schedule, defaultResult); + // When + const result = pipe.transform(schedule); + + // Then + expect(result).toBeDefined(); + expect(result).toContain( + "At 12:30 AM, on day 10 of the month, only in July", + ); + }); - // Then - expect(result).toBe(defaultResult); - }); + it('should verify will correctly translate cron "30 23 10 7 *"', () => { + // Given + const schedule = "30 23 10 7 *"; + + // When + const result = pipe.transform(schedule); + + // Then + expect(result).toBeDefined(); + expect(result).toContain( + "At 11:30 PM, on day 10 of the month, only in July", + ); + }); - it('should verify will correctly translate cron "5 5 5 2 *"', () => { - // Given - const schedule = '5 5 5 2 *'; - - // When - const result = pipe.transform(schedule); - - // Then - expect(result).toBeDefined(); - expect(result).toContain('At 05:05 AM'); - }); - - it('should verify will return parsing error message invalid cron "65 65 65 65 65"', () => { - // Given - const schedule = '65 65 65 65 65'; - - // When - const result = pipe.transform(schedule); - - // Then - expect(result).toBeDefined(); - expect(result).toContain(`Invalid Cron expression "${schedule}"`); - }); - - describe('testing minute range', () => { - it('should verify will correctly translate cron "0 11 10 7 *"', () => { - // Given - const schedule = '0 11 10 7 *'; + it('should verify will return parsing error message invalid cron "30 24 10 7 *"', () => { + // Given + const schedule = "30 24 10 7 *"; + + // When + const result = pipe.transform(schedule); + + // Then + expect(result).toBeDefined(); + expect(result).toContain(`Invalid Cron expression "${schedule}"`); + }); + }); + + describe("testing day range", () => { + it('should verify will correctly translate cron "30 11 1 7 *"', () => { + // Given + const schedule = "30 11 1 7 *"; + + // When + const result = pipe.transform(schedule); + + // Then + expect(result).toBeDefined(); + expect(result).toContain( + "At 11:30 AM, on day 1 of the month, only in July", + ); + }); + + it('should verify will correctly translate cron "30 11 31 7 *"', () => { + // Given + const schedule = "30 11 31 7 *"; + + // When + const result = pipe.transform(schedule); + + // Then + expect(result).toBeDefined(); + expect(result).toContain( + "At 11:30 AM, on day 31 of the month, only in July", + ); + }); + + it('should verify will return parsing error message invalid cron "30 11 0 7 *"', () => { + // Given + const schedule = "30 11 0 7 *"; + + // When + const result = pipe.transform(schedule); + + // Then + expect(result).toBeDefined(); + expect(result).toContain(`Invalid Cron expression "${schedule}"`); + }); + + it('should verify will return parsing error message invalid cron "30 11 32 7 *"', () => { + // Given + const schedule = "30 11 32 7 *"; + + // When + const result = pipe.transform(schedule); + + // Then + expect(result).toBeDefined(); + expect(result).toContain(`Invalid Cron expression "${schedule}"`); + }); + }); + + describe("testing month range", () => { + it('should verify will correctly translate cron "30 11 10 1 *"', () => { + // Given + const schedule = "30 11 10 1 *"; + + // When + const result = pipe.transform(schedule); + + // Then + expect(result).toBeDefined(); + expect(result).toContain( + "At 11:30 AM, on day 10 of the month, only in January", + ); + }); + + it('should verify will correctly translate cron "30 11 10 12 *"', () => { + // Given + const schedule = "30 11 10 12 *"; + + // When + const result = pipe.transform(schedule); + + // Then + expect(result).toBeDefined(); + expect(result).toContain( + "At 11:30 AM, on day 10 of the month, only in December", + ); + }); - // When - const result = pipe.transform(schedule); + it('should verify will return parsing error message invalid cron "30 11 10 0 *"', () => { + // Given + const schedule = "30 11 10 0 *"; - // Then - expect(result).toBeDefined(); - expect(result).toContain('At 11:00 AM, on day 10 of the month, only in July'); - }); + // When + const result = pipe.transform(schedule); + + // Then + expect(result).toBeDefined(); + expect(result).toContain(`Invalid Cron expression "${schedule}"`); + }); + + it('should verify will return parsing error message invalid cron "30 11 10 13 *"', () => { + // Given + const schedule = "30 11 10 13 *"; + + // When + const result = pipe.transform(schedule); + + // Then + expect(result).toBeDefined(); + expect(result).toContain(`Invalid Cron expression "${schedule}"`); + }); + }); + + describe("testing day of week range", () => { + it('should verify will correctly translate cron "30 11 10 7 0"', () => { + // Given + const schedule = "30 11 10 7 0"; + + // When + const result = pipe.transform(schedule); + + // Then + expect(result).toBeDefined(); + expect(result).toContain( + "At 11:30 AM, on day 10 of the month, and on Sunday, only in July", + ); + }); + + it('should verify will correctly translate cron "30 11 10 7 6"', () => { + // Given + const schedule = "30 11 10 7 6"; + + // When + const result = pipe.transform(schedule); + + // Then + expect(result).toBeDefined(); + expect(result).toContain( + "At 11:30 AM, on day 10 of the month, and on Saturday, only in July", + ); + }); + + it('should verify will correctly translate cron "30 11 10 7 7"', () => { + // Given + const schedule = "30 11 10 7 7"; + + // When + const result = pipe.transform(schedule); + + // Then + expect(result).toBeDefined(); + expect(result).toContain( + "At 11:30 AM, on day 10 of the month, and on Sunday, only in July", + ); + }); + + it('should verify will return parsing error message invalid cron "30 11 10 7 8"', () => { + // Given + const schedule = "30 11 10 7 8"; + + // When + const result = pipe.transform(schedule); + + // Then + expect(result).toBeDefined(); + expect(result).toContain(`Invalid Cron expression "${schedule}"`); + }); + }); + + describe("testing non-standard cron expressions", () => { + it('should verify will correctly translate cron "@hourly"', () => { + // Given + const schedule = "@hourly"; + + // When + const result = pipe.transform(schedule); + + // Then + expect(result).toBeDefined(); + expect(result).toContain( + "Run once an hour at the beginning of the hour", + ); + }); + + it('should verify will correctly translate cron "@daily" and "@midnight"', () => { + // Given + const schedule1 = "@daily"; + const schedule2 = "@midnight"; + + // When + const result1 = pipe.transform(schedule1); + const result2 = pipe.transform(schedule2); + + // Then + expect(result1).toBeDefined(); + expect(result1).toContain("Run once a day at midnight"); + expect(result2).toBeDefined(); + expect(result2).toContain("Run once a day at midnight"); + }); + + it('should verify will correctly translate cron "@weekly"', () => { + // Given + const schedule = "@weekly"; + + // When + const result = pipe.transform(schedule); + + // Then + expect(result).toBeDefined(); + expect(result).toContain( + "Run once a week at midnight on Sunday morning", + ); + }); + + it('should verify will correctly translate cron "@monthly"', () => { + // Given + const schedule = "@monthly"; + + // When + const result = pipe.transform(schedule); + + // Then + expect(result).toBeDefined(); + expect(result).toContain( + "Run once a month at midnight of the first day of the month", + ); + }); + + it('should verify will correctly translate cron "@yearly" and "@annually"', () => { + // Given + const schedule1 = "@yearly"; + const schedule2 = "@annually"; + + // When + const result1 = pipe.transform(schedule1); + const result2 = pipe.transform(schedule2); + + // Then + expect(result1).toBeDefined(); + expect(result1).toContain("Run once a year at midnight of 1 January"); + expect(result2).toBeDefined(); + expect(result2).toContain("Run once a year at midnight of 1 January"); + }); + + it('should verify will return parsing error message invalid cron "yearly"', () => { + // Given + const schedule = "yearly"; + + // When + const result = pipe.transform(schedule); + + // Then + expect(result).toBeDefined(); + expect(result).toContain(`Invalid Cron expression "${schedule}"`); + }); + + it('should verify will return parsing error message invalid cron "some random text"', () => { + // Given + const schedule = "some random text"; + + // When + const result = pipe.transform(schedule); + + // Then + expect(result).toBeDefined(); + expect(result).toContain(`Invalid Cron expression "${schedule}"`); + }); + + it('should verify will return parsing error message invalid cron "some random text"', () => { + // Given + const schedule = "some random text"; + + // When + const result = pipe.transform(schedule); + + // Then + expect(result).toBeDefined(); + expect(result).toContain(`Invalid Cron expression "${schedule}"`); + }); - it('should verify will correctly translate cron "59 11 10 7 *"', () => { - // Given - const schedule = '59 11 10 7 *'; + it('should verify will return parsing error message invalid cron "yearly"', () => { + // Given + const schedule = "yearly"; - // When - const result = pipe.transform(schedule); + // When + const result = pipe.transform(schedule); - // Then - expect(result).toBeDefined(); - expect(result).toContain('At 11:59 AM, on day 10 of the month, only in July'); - }); - - it('should verify will return parsing error message invalid cron "60 11 10 7 *"', () => { - // Given - const schedule = '60 12 10 7 *'; - - // When - const result = pipe.transform(schedule); - - // Then - expect(result).toBeDefined(); - expect(result).toContain(`Invalid Cron expression "${schedule}"`); - }); - }); - - describe('testing hour range', () => { - it('should verify will correctly translate cron "30 0 10 7 *"', () => { - // Given - const schedule = '30 0 10 7 *'; - - // When - const result = pipe.transform(schedule); - - // Then - expect(result).toBeDefined(); - expect(result).toContain('At 12:30 AM, on day 10 of the month, only in July'); - }); - - it('should verify will correctly translate cron "30 23 10 7 *"', () => { - // Given - const schedule = '30 23 10 7 *'; - - // When - const result = pipe.transform(schedule); - - // Then - expect(result).toBeDefined(); - expect(result).toContain('At 11:30 PM, on day 10 of the month, only in July'); - }); - - it('should verify will return parsing error message invalid cron "30 24 10 7 *"', () => { - // Given - const schedule = '30 24 10 7 *'; - - // When - const result = pipe.transform(schedule); - - // Then - expect(result).toBeDefined(); - expect(result).toContain(`Invalid Cron expression "${schedule}"`); - }); - }); - - describe('testing day range', () => { - it('should verify will correctly translate cron "30 11 1 7 *"', () => { - // Given - const schedule = '30 11 1 7 *'; - - // When - const result = pipe.transform(schedule); - - // Then - expect(result).toBeDefined(); - expect(result).toContain('At 11:30 AM, on day 1 of the month, only in July'); - }); - - it('should verify will correctly translate cron "30 11 31 7 *"', () => { - // Given - const schedule = '30 11 31 7 *'; - - // When - const result = pipe.transform(schedule); - - // Then - expect(result).toBeDefined(); - expect(result).toContain('At 11:30 AM, on day 31 of the month, only in July'); - }); - - it('should verify will return parsing error message invalid cron "30 11 0 7 *"', () => { - // Given - const schedule = '30 11 0 7 *'; - - // When - const result = pipe.transform(schedule); - - // Then - expect(result).toBeDefined(); - expect(result).toContain(`Invalid Cron expression "${schedule}"`); - }); - - it('should verify will return parsing error message invalid cron "30 11 32 7 *"', () => { - // Given - const schedule = '30 11 32 7 *'; - - // When - const result = pipe.transform(schedule); - - // Then - expect(result).toBeDefined(); - expect(result).toContain(`Invalid Cron expression "${schedule}"`); - }); - }); - - describe('testing month range', () => { - it('should verify will correctly translate cron "30 11 10 1 *"', () => { - // Given - const schedule = '30 11 10 1 *'; - - // When - const result = pipe.transform(schedule); - - // Then - expect(result).toBeDefined(); - expect(result).toContain('At 11:30 AM, on day 10 of the month, only in January'); - }); - - it('should verify will correctly translate cron "30 11 10 12 *"', () => { - // Given - const schedule = '30 11 10 12 *'; - - // When - const result = pipe.transform(schedule); - - // Then - expect(result).toBeDefined(); - expect(result).toContain('At 11:30 AM, on day 10 of the month, only in December'); - }); - - it('should verify will return parsing error message invalid cron "30 11 10 0 *"', () => { - // Given - const schedule = '30 11 10 0 *'; - - // When - const result = pipe.transform(schedule); - - // Then - expect(result).toBeDefined(); - expect(result).toContain(`Invalid Cron expression "${schedule}"`); - }); - - it('should verify will return parsing error message invalid cron "30 11 10 13 *"', () => { - // Given - const schedule = '30 11 10 13 *'; - - // When - const result = pipe.transform(schedule); - - // Then - expect(result).toBeDefined(); - expect(result).toContain(`Invalid Cron expression "${schedule}"`); - }); - }); - - describe('testing day of week range', () => { - it('should verify will correctly translate cron "30 11 10 7 0"', () => { - // Given - const schedule = '30 11 10 7 0'; - - // When - const result = pipe.transform(schedule); - - // Then - expect(result).toBeDefined(); - expect(result).toContain('At 11:30 AM, on day 10 of the month, and on Sunday, only in July'); - }); - - it('should verify will correctly translate cron "30 11 10 7 6"', () => { - // Given - const schedule = '30 11 10 7 6'; - - // When - const result = pipe.transform(schedule); - - // Then - expect(result).toBeDefined(); - expect(result).toContain('At 11:30 AM, on day 10 of the month, and on Saturday, only in July'); - }); - - it('should verify will correctly translate cron "30 11 10 7 7"', () => { - // Given - const schedule = '30 11 10 7 7'; - - // When - const result = pipe.transform(schedule); - - // Then - expect(result).toBeDefined(); - expect(result).toContain('At 11:30 AM, on day 10 of the month, and on Sunday, only in July'); - }); - - it('should verify will return parsing error message invalid cron "30 11 10 7 8"', () => { - // Given - const schedule = '30 11 10 7 8'; - - // When - const result = pipe.transform(schedule); - - // Then - expect(result).toBeDefined(); - expect(result).toContain(`Invalid Cron expression "${schedule}"`); - }); - }); - - describe('testing non-standard cron expressions', () => { - it('should verify will correctly translate cron "@hourly"', () => { - // Given - const schedule = '@hourly'; - - // When - const result = pipe.transform(schedule); - - // Then - expect(result).toBeDefined(); - expect(result).toContain('Run once an hour at the beginning of the hour'); - }); - - it('should verify will correctly translate cron "@daily" and "@midnight"', () => { - // Given - const schedule1 = '@daily'; - const schedule2 = '@midnight'; - - // When - const result1 = pipe.transform(schedule1); - const result2 = pipe.transform(schedule2); - - // Then - expect(result1).toBeDefined(); - expect(result1).toContain('Run once a day at midnight'); - expect(result2).toBeDefined(); - expect(result2).toContain('Run once a day at midnight'); - }); - - it('should verify will correctly translate cron "@weekly"', () => { - // Given - const schedule = '@weekly'; - - // When - const result = pipe.transform(schedule); - - // Then - expect(result).toBeDefined(); - expect(result).toContain('Run once a week at midnight on Sunday morning'); - }); - - it('should verify will correctly translate cron "@monthly"', () => { - // Given - const schedule = '@monthly'; - - // When - const result = pipe.transform(schedule); - - // Then - expect(result).toBeDefined(); - expect(result).toContain('Run once a month at midnight of the first day of the month'); - }); - - it('should verify will correctly translate cron "@yearly" and "@annually"', () => { - // Given - const schedule1 = '@yearly'; - const schedule2 = '@annually'; - - // When - const result1 = pipe.transform(schedule1); - const result2 = pipe.transform(schedule2); - - // Then - expect(result1).toBeDefined(); - expect(result1).toContain('Run once a year at midnight of 1 January'); - expect(result2).toBeDefined(); - expect(result2).toContain('Run once a year at midnight of 1 January'); - }); - - it('should verify will return parsing error message invalid cron "yearly"', () => { - // Given - const schedule = 'yearly'; - - // When - const result = pipe.transform(schedule); - - // Then - expect(result).toBeDefined(); - expect(result).toContain(`Invalid Cron expression "${schedule}"`); - }); - - it('should verify will return parsing error message invalid cron "some random text"', () => { - // Given - const schedule = 'some random text'; - - // When - const result = pipe.transform(schedule); - - // Then - expect(result).toBeDefined(); - expect(result).toContain(`Invalid Cron expression "${schedule}"`); - }); - - it('should verify will return parsing error message invalid cron "some random text"', () => { - // Given - const schedule = 'some random text'; - - // When - const result = pipe.transform(schedule); - - // Then - expect(result).toBeDefined(); - expect(result).toContain(`Invalid Cron expression "${schedule}"`); - }); - - it('should verify will return parsing error message invalid cron "yearly"', () => { - // Given - const schedule = 'yearly'; - - // When - const result = pipe.transform(schedule); - - // Then - expect(result).toBeDefined(); - expect(result).toContain(`Invalid Cron expression "${schedule}"`); - }); - }); + // Then + expect(result).toBeDefined(); + expect(result).toContain(`Invalid Cron expression "${schedule}"`); }); + }); }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/format-schedule.pipe.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/format-schedule.pipe.ts index 6c3dd08b38..91071653e6 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/format-schedule.pipe.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/format-schedule.pipe.ts @@ -5,69 +5,75 @@ /* eslint-disable no-underscore-dangle */ -import { Pipe, PipeTransform } from '@angular/core'; +import { Pipe, PipeTransform } from "@angular/core"; -import cronstrue from 'cronstrue'; +import cronstrue from "cronstrue"; -import { CollectionsUtil } from '@versatiledatakit/shared'; +import { CollectionsUtil } from "@versatiledatakit/shared"; @Pipe({ - name: 'formatSchedule' + name: "formatSchedule", }) export class FormatSchedulePipe implements PipeTransform { - private static _fallbackTransformNonStandardCron(cron: string): string { - const match = `${cron}`.trim().match(/^@hourly|@daily|@midnight|@weekly|@monthly|@yearly|@annually$/); + private static _fallbackTransformNonStandardCron(cron: string): string { + const match = `${cron}` + .trim() + .match(/^@hourly|@daily|@midnight|@weekly|@monthly|@yearly|@annually$/); - if (CollectionsUtil.isNil(match)) { - throw new Error('Cron expression cannot be null or undefined.'); - } + if (CollectionsUtil.isNil(match)) { + throw new Error("Cron expression cannot be null or undefined."); + } - switch (match.input) { - case '@hourly': - return 'Run once an hour at the beginning of the hour'; - case '@daily': - case '@midnight': - return 'Run once a day at midnight'; - case '@weekly': - return 'Run once a week at midnight on Sunday morning'; - case '@monthly': - return 'Run once a month at midnight of the first day of the month'; - case '@yearly': - case '@annually': - return 'Run once a year at midnight of 1 January'; - default: - throw new Error('Cron expression is NOT nonstandard predefined scheduling definition.'); - } + switch (match.input) { + case "@hourly": + return "Run once an hour at the beginning of the hour"; + case "@daily": + case "@midnight": + return "Run once a day at midnight"; + case "@weekly": + return "Run once a week at midnight on Sunday morning"; + case "@monthly": + return "Run once a month at midnight of the first day of the month"; + case "@yearly": + case "@annually": + return "Run once a year at midnight of 1 January"; + default: + throw new Error( + "Cron expression is NOT nonstandard predefined scheduling definition.", + ); } + } - /** - * @inheritDoc - * - * - Cron schedule default format from kubernetes https://kubernetes.io/docs/concepts/workloads/controllers/cron-jobs/ - * - Time in UTC - */ - transform(cronSchedule: string, defaultResult?: string): string { - try { - const defaultValue = defaultResult ?? ''; + /** + * @inheritDoc + * + * - Cron schedule default format from kubernetes https://kubernetes.io/docs/concepts/workloads/controllers/cron-jobs/ + * - Time in UTC + */ + transform(cronSchedule: string, defaultResult?: string): string { + try { + const defaultValue = defaultResult ?? ""; - if (!cronSchedule) { - return defaultValue; - } + if (!cronSchedule) { + return defaultValue; + } - //TODO : https://github.com/bradymholt/cRonstrue/issues/94 - // cronstrue doesn't support timezones. Need to use another library - return cronstrue.toString(cronSchedule, { - monthStartIndexZero: false, - dayOfWeekStartIndexZero: true - }); - } catch (e) { - try { - return FormatSchedulePipe._fallbackTransformNonStandardCron(cronSchedule); - } catch (_e) { - console.error(`Parsing error. Cron expression "${cronSchedule}"`); + //TODO : https://github.com/bradymholt/cRonstrue/issues/94 + // cronstrue doesn't support timezones. Need to use another library + return cronstrue.toString(cronSchedule, { + monthStartIndexZero: false, + dayOfWeekStartIndexZero: true, + }); + } catch (e) { + try { + return FormatSchedulePipe._fallbackTransformNonStandardCron( + cronSchedule, + ); + } catch (_e) { + console.error(`Parsing error. Cron expression "${cronSchedule}"`); - return `Invalid Cron expression "${cronSchedule}"`; - } - } + return `Invalid Cron expression "${cronSchedule}"`; + } } + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/index.ts index 4a7c10f8c5..f41d49daf2 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/index.ts @@ -3,11 +3,11 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './contacts-present.pipe'; -export * from './execution-success-rate.pipe'; -export * from './extract-job-status.pipe'; -export * from './format-delta.pipe'; -export * from './format-schedule.pipe'; -export * from './parse-epoch.pipe'; -export * from './parse-next-run.pipe'; -export * from './extract-contacts.pipe'; +export * from "./contacts-present.pipe"; +export * from "./execution-success-rate.pipe"; +export * from "./extract-job-status.pipe"; +export * from "./format-delta.pipe"; +export * from "./format-schedule.pipe"; +export * from "./parse-epoch.pipe"; +export * from "./parse-next-run.pipe"; +export * from "./extract-contacts.pipe"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/parse-epoch.pipe.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/parse-epoch.pipe.spec.ts index 50c9d3ecef..8f487ec1e1 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/parse-epoch.pipe.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/parse-epoch.pipe.spec.ts @@ -3,30 +3,30 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { TestBed } from '@angular/core/testing'; -import { ParseEpochPipe } from './parse-epoch.pipe'; +import { TestBed } from "@angular/core/testing"; +import { ParseEpochPipe } from "./parse-epoch.pipe"; -describe('ParseEpochPipe', () => { - let pipe: ParseEpochPipe; - const TEST_EPOCH_SECONDS = 1522668899; - const MILLIS_MULTIPLIER = 1000; +describe("ParseEpochPipe", () => { + let pipe: ParseEpochPipe; + const TEST_EPOCH_SECONDS = 1522668899; + const MILLIS_MULTIPLIER = 1000; - beforeEach(() => { - TestBed.configureTestingModule({ providers: [ParseEpochPipe] }); - pipe = TestBed.inject(ParseEpochPipe); - }); + beforeEach(() => { + TestBed.configureTestingModule({ providers: [ParseEpochPipe] }); + pipe = TestBed.inject(ParseEpochPipe); + }); - it('can instantiate', () => { - expect(pipe).toBeTruthy(); - }); + it("can instantiate", () => { + expect(pipe).toBeTruthy(); + }); - it('transforms missing epoch to emtpy result', () => { - expect(pipe.transform(-1)).toBeNull(); - }); + it("transforms missing epoch to emtpy result", () => { + expect(pipe.transform(-1)).toBeNull(); + }); - it('transforms valid epoch to valid result', () => { - const result = pipe.transform(TEST_EPOCH_SECONDS); - expect(result).toBeDefined(); - expect(result).toEqual(new Date(TEST_EPOCH_SECONDS * MILLIS_MULTIPLIER)); - }); + it("transforms valid epoch to valid result", () => { + const result = pipe.transform(TEST_EPOCH_SECONDS); + expect(result).toBeDefined(); + expect(result).toEqual(new Date(TEST_EPOCH_SECONDS * MILLIS_MULTIPLIER)); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/parse-epoch.pipe.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/parse-epoch.pipe.ts index bc7c45199c..678a9d9c5d 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/parse-epoch.pipe.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/parse-epoch.pipe.ts @@ -3,33 +3,33 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Pipe, PipeTransform } from '@angular/core'; +import { Pipe, PipeTransform } from "@angular/core"; @Pipe({ - name: 'parseEpoch' + name: "parseEpoch", }) export class ParseEpochPipe implements PipeTransform { - /** - * ** Transform to Epoch time. - * - * - This method should be equal to instance method. - * - Methods: {@link ParseEpochPipe.transform} - */ - static transform(nextRunEpochSeconds: number): Date { - if (nextRunEpochSeconds < 0) { - return null; - } - - return new Date(nextRunEpochSeconds * 1000); + /** + * ** Transform to Epoch time. + * + * - This method should be equal to instance method. + * - Methods: {@link ParseEpochPipe.transform} + */ + static transform(nextRunEpochSeconds: number): Date { + if (nextRunEpochSeconds < 0) { + return null; } - /** - * @inheritDoc - * - * - This method should be equal to instance method. - * - Methods: {@link ParseEpochPipe.transform} - */ - transform(nextRunEpochSeconds: number): Date { - return ParseEpochPipe.transform(nextRunEpochSeconds); - } + return new Date(nextRunEpochSeconds * 1000); + } + + /** + * @inheritDoc + * + * - This method should be equal to instance method. + * - Methods: {@link ParseEpochPipe.transform} + */ + transform(nextRunEpochSeconds: number): Date { + return ParseEpochPipe.transform(nextRunEpochSeconds); + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/parse-next-run.pipe.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/parse-next-run.pipe.spec.ts index 40a98fcc93..706454be2d 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/parse-next-run.pipe.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/parse-next-run.pipe.spec.ts @@ -3,169 +3,191 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { TestBed } from '@angular/core/testing'; -import { ParseNextRunPipe } from './parse-next-run.pipe'; - -describe('ParseNextRunPipe', () => { - let pipe: ParseNextRunPipe; - - beforeEach(() => { - TestBed.configureTestingModule({ providers: [ParseNextRunPipe] }); - pipe = TestBed.inject(ParseNextRunPipe); - }); - - it('can instantiate ParseNextRunPipe', () => { - expect(pipe).toBeTruthy(); - }); - - describe('Methods::', () => { - describe('|transform|', () => { - it('transforms invalid cron to null date', () => { - const cron: string = null; - const nextExecution = 1; - expect(pipe.transform(cron, nextExecution)).toBe(null); - }); - - it('transforms invalid nextExecution to valid date', () => { - const cron = '* * * * *'; - const nextExecution: number = null; - expect(pipe.transform(cron, nextExecution)).toBeDefined(); - }); - - it('transforms missing nextExecution to valid date', () => { - const cron = '* * * * *'; - expect(pipe.transform(cron)).toBeDefined(); - }); - - it('transforms valid cron to valid date', () => { - const cron = '5 5 5 2 *'; - const result = pipe.transform(cron); - expect(result).toBeDefined(); - expect(result.getMonth()).toBe(1); // 1 means Feb - }); - - it(`should verify will return next first run for cron "0 12 * * *" to DateTime in UTC`, (done) => { - // Given - const cron = '0 12 * * *'; - const expected = new Date(); - let useTimeout = false; - - if (expected.getUTCHours() === 11 && expected.getUTCMinutes() === 59 && expected.getUTCSeconds() === 59) { - useTimeout = true; - expected.setUTCDate(expected.getUTCDate() + 1); - } else if (expected.getUTCHours() >= 12) { - expected.setUTCDate(expected.getUTCDate() + 1); - } - - const y = expected.getUTCFullYear(); - const _m: number = expected.getUTCMonth() + 1; - const _d: number = expected.getUTCDate(); - - let m = `${_m}`; - let d = `${_d}`; - - if (_m < 10) { - m = `0${_m}`; - } - - if (_d < 10) { - d = `0${_d}`; - } - - if (useTimeout) { - setTimeout(() => { - // When - const date = pipe.transform(cron, 1); - - // Then - console.log(date.toISOString()); - expect(date.toISOString()).toEqual(`${y}-${m}-${d}T12:00:00.000Z`); - - done(); - }); - } else { - // When - const date = pipe.transform(cron, 1); - - // Then - console.log(date.toISOString()); - expect(date.toISOString()).toEqual(`${y}-${m}-${d}T12:00:00.000Z`); - - done(); - } - }, 5000); - - it(`should verify will return next second run for cron "45 0/12 * * *" to DateTime in UTC`, (done) => { - // Given - const cron = '45 0/12 * * *'; - const expected = new Date(); - let useTimeout = false; - let lunchTime = false; - - let hh: string; - let mm: string; - - if (expected.getUTCHours() === 12 && expected.getUTCMinutes() === 44 && expected.getUTCSeconds() === 59) { - lunchTime = true; - useTimeout = true; - expected.setUTCDate(expected.getUTCDate() + 1); - } else if (expected.getUTCHours() === 0 && expected.getUTCMinutes() === 44 && expected.getUTCSeconds() === 59) { - useTimeout = true; - expected.setUTCDate(expected.getUTCDate() + 1); - } else if ((expected.getUTCHours() >= 12 && expected.getUTCMinutes() >= 45) || expected.getUTCHours() >= 13) { - lunchTime = true; - expected.setUTCDate(expected.getUTCDate() + 1); - } else if (expected.getUTCHours() === 0 && expected.getUTCMinutes() < 45) { - lunchTime = true; - } else { - expected.setUTCDate(expected.getUTCDate() + 1); - } - - const y = expected.getUTCFullYear(); - const _m: number = expected.getUTCMonth() + 1; - const _d: number = expected.getUTCDate(); - - let m = `${_m}`; - let d = `${_d}`; - - if (_m < 10) { - m = `0${m}`; - } - - if (_d < 10) { - d = `0${d}`; - } - - if (lunchTime) { - hh = '12'; - mm = '45'; - } else { - hh = '00'; - mm = '45'; - } - - if (useTimeout) { - setTimeout(() => { - // When - const date = pipe.transform(cron, 2); - - // Then - console.log(date.toISOString()); - expect(date.toISOString()).toEqual(`${y}-${m}-${d}T${hh}:${mm}:00.000Z`); - - done(); - }, 2000); - } else { - // When - const date = pipe.transform(cron, 2); - - // Then - console.log(date.toISOString()); - expect(date.toISOString()).toEqual(`${y}-${m}-${d}T${hh}:${mm}:00.000Z`); - - done(); - } - }, 10000); - }); +import { TestBed } from "@angular/core/testing"; +import { ParseNextRunPipe } from "./parse-next-run.pipe"; + +describe("ParseNextRunPipe", () => { + let pipe: ParseNextRunPipe; + + beforeEach(() => { + TestBed.configureTestingModule({ providers: [ParseNextRunPipe] }); + pipe = TestBed.inject(ParseNextRunPipe); + }); + + it("can instantiate ParseNextRunPipe", () => { + expect(pipe).toBeTruthy(); + }); + + describe("Methods::", () => { + describe("|transform|", () => { + it("transforms invalid cron to null date", () => { + const cron: string = null; + const nextExecution = 1; + expect(pipe.transform(cron, nextExecution)).toBe(null); + }); + + it("transforms invalid nextExecution to valid date", () => { + const cron = "* * * * *"; + const nextExecution: number = null; + expect(pipe.transform(cron, nextExecution)).toBeDefined(); + }); + + it("transforms missing nextExecution to valid date", () => { + const cron = "* * * * *"; + expect(pipe.transform(cron)).toBeDefined(); + }); + + it("transforms valid cron to valid date", () => { + const cron = "5 5 5 2 *"; + const result = pipe.transform(cron); + expect(result).toBeDefined(); + expect(result.getMonth()).toBe(1); // 1 means Feb + }); + + it(`should verify will return next first run for cron "0 12 * * *" to DateTime in UTC`, (done) => { + // Given + const cron = "0 12 * * *"; + const expected = new Date(); + let useTimeout = false; + + if ( + expected.getUTCHours() === 11 && + expected.getUTCMinutes() === 59 && + expected.getUTCSeconds() === 59 + ) { + useTimeout = true; + expected.setUTCDate(expected.getUTCDate() + 1); + } else if (expected.getUTCHours() >= 12) { + expected.setUTCDate(expected.getUTCDate() + 1); + } + + const y = expected.getUTCFullYear(); + const _m: number = expected.getUTCMonth() + 1; + const _d: number = expected.getUTCDate(); + + let m = `${_m}`; + let d = `${_d}`; + + if (_m < 10) { + m = `0${_m}`; + } + + if (_d < 10) { + d = `0${_d}`; + } + + if (useTimeout) { + setTimeout(() => { + // When + const date = pipe.transform(cron, 1); + + // Then + console.log(date.toISOString()); + expect(date.toISOString()).toEqual(`${y}-${m}-${d}T12:00:00.000Z`); + + done(); + }); + } else { + // When + const date = pipe.transform(cron, 1); + + // Then + console.log(date.toISOString()); + expect(date.toISOString()).toEqual(`${y}-${m}-${d}T12:00:00.000Z`); + + done(); + } + }, 5000); + + it(`should verify will return next second run for cron "45 0/12 * * *" to DateTime in UTC`, (done) => { + // Given + const cron = "45 0/12 * * *"; + const expected = new Date(); + let useTimeout = false; + let lunchTime = false; + + let hh: string; + let mm: string; + + if ( + expected.getUTCHours() === 12 && + expected.getUTCMinutes() === 44 && + expected.getUTCSeconds() === 59 + ) { + lunchTime = true; + useTimeout = true; + expected.setUTCDate(expected.getUTCDate() + 1); + } else if ( + expected.getUTCHours() === 0 && + expected.getUTCMinutes() === 44 && + expected.getUTCSeconds() === 59 + ) { + useTimeout = true; + expected.setUTCDate(expected.getUTCDate() + 1); + } else if ( + (expected.getUTCHours() >= 12 && expected.getUTCMinutes() >= 45) || + expected.getUTCHours() >= 13 + ) { + lunchTime = true; + expected.setUTCDate(expected.getUTCDate() + 1); + } else if ( + expected.getUTCHours() === 0 && + expected.getUTCMinutes() < 45 + ) { + lunchTime = true; + } else { + expected.setUTCDate(expected.getUTCDate() + 1); + } + + const y = expected.getUTCFullYear(); + const _m: number = expected.getUTCMonth() + 1; + const _d: number = expected.getUTCDate(); + + let m = `${_m}`; + let d = `${_d}`; + + if (_m < 10) { + m = `0${m}`; + } + + if (_d < 10) { + d = `0${d}`; + } + + if (lunchTime) { + hh = "12"; + mm = "45"; + } else { + hh = "00"; + mm = "45"; + } + + if (useTimeout) { + setTimeout(() => { + // When + const date = pipe.transform(cron, 2); + + // Then + console.log(date.toISOString()); + expect(date.toISOString()).toEqual( + `${y}-${m}-${d}T${hh}:${mm}:00.000Z`, + ); + + done(); + }, 2000); + } else { + // When + const date = pipe.transform(cron, 2); + + // Then + console.log(date.toISOString()); + expect(date.toISOString()).toEqual( + `${y}-${m}-${d}T${hh}:${mm}:00.000Z`, + ); + + done(); + } + }, 10000); }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/parse-next-run.pipe.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/parse-next-run.pipe.ts index f17aa55ed1..c029c5b0e9 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/parse-next-run.pipe.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/pipes/parse-next-run.pipe.ts @@ -3,36 +3,36 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Pipe, PipeTransform } from '@angular/core'; +import { Pipe, PipeTransform } from "@angular/core"; -import * as parser from 'cron-parser'; +import * as parser from "cron-parser"; @Pipe({ - name: 'parseNextRun' + name: "parseNextRun", }) export class ParseNextRunPipe implements PipeTransform { - /** - * @inheritDoc - */ - transform(cron: string, nextExecution?: number): Date { - if (!cron) { - return null; - } + /** + * @inheritDoc + */ + transform(cron: string, nextExecution?: number): Date { + if (!cron) { + return null; + } - if (!nextExecution) { - nextExecution = 1; - } + if (!nextExecution) { + nextExecution = 1; + } - let result: Date; - try { - const parsedDate = parser.parseExpression(cron, { utc: true }); - for (let i = 0; i < nextExecution; i++) { - result = parsedDate.next().toDate(); - } - } catch (e) { - result = null; - console.error('Error parsing next run', e); - } - return result; + let result: Date; + try { + const parsedDate = parser.parseExpression(cron, { utc: true }); + for (let i = 0; i < nextExecution; i++) { + result = parsedDate.next().toDate(); + } + } catch (e) { + result = null; + console.error("Error parsing next run", e); } + return result; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/cron.util.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/cron.util.spec.ts index d8269057bc..e64c6b1566 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/cron.util.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/cron.util.spec.ts @@ -3,18 +3,20 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { CronUtil } from './cron.util'; +import { CronUtil } from "./cron.util"; -describe('DateUtil', () => { - it('expect null argument to return null result', () => { - expect(CronUtil.getNextExecutionErrors(null)).toBe('No schedule cron configured for this job'); - }); +describe("DateUtil", () => { + it("expect null argument to return null result", () => { + expect(CronUtil.getNextExecutionErrors(null)).toBe( + "No schedule cron configured for this job", + ); + }); - it('expect invalid argument to return error text', () => { - expect(CronUtil.getNextExecutionErrors('* * * * * * *')).toContain(''); - }); + it("expect invalid argument to return error text", () => { + expect(CronUtil.getNextExecutionErrors("* * * * * * *")).toContain(""); + }); - it('expect valid argument to return null', () => { - expect(CronUtil.getNextExecutionErrors('5 5 5 2 *')).toEqual(null); - }); + it("expect valid argument to return null", () => { + expect(CronUtil.getNextExecutionErrors("5 5 5 2 *")).toEqual(null); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/cron.util.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/cron.util.ts index b7ec14d47f..2b577d1055 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/cron.util.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/cron.util.ts @@ -3,19 +3,19 @@ * SPDX-License-Identifier: Apache-2.0 */ -import * as parser from 'cron-parser'; +import * as parser from "cron-parser"; export class CronUtil { - static getNextExecutionErrors(cron: string): string { - if (!cron) { - return 'No schedule cron configured for this job'; - } - try { - parser.parseExpression(cron); - return null; // parsing successful, reset flag - } catch (e: unknown) { - // eslint-disable-next-line @typescript-eslint/restrict-template-expressions - return `Could not extract next executions from the cron expression: ${e}`; - } + static getNextExecutionErrors(cron: string): string { + if (!cron) { + return "No schedule cron configured for this job"; } + try { + parser.parseExpression(cron); + return null; // parsing successful, reset flag + } catch (e: unknown) { + // eslint-disable-next-line @typescript-eslint/restrict-template-expressions + return `Could not extract next executions from the cron expression: ${e}`; + } + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/data-job.util.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/data-job.util.spec.ts index 850854ff91..bbb0dc95d1 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/data-job.util.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/data-job.util.spec.ts @@ -6,251 +6,267 @@ /* eslint-disable @typescript-eslint/naming-convention */ import { - DataJobExecution, - DataJobExecutionDetails, - DataJobExecutionStatus, - DataJobExecutionStatusDeprecated, - DataJobExecutionType -} from '../../model'; - -import { DataJobUtil } from './data-job.util'; - -describe('DataJobUtil', () => { - describe('|isJobRunningPredicate|', () => { - it('should verify will return true if status is RUNNING', () => { - // Given - const execution: DataJobExecutionDetails = { - status: DataJobExecutionStatusDeprecated.RUNNING - } as any; - - // When - const response = DataJobUtil.isJobRunningPredicate(execution); - - // Then - expect(response).toBeTrue(); - }); - - it('should verify will return true if status is SUBMITTED', () => { - // Given - const execution: DataJobExecutionDetails = { - status: DataJobExecutionStatusDeprecated.SUBMITTED - } as any; - - // When - const response = DataJobUtil.isJobRunningPredicate(execution); - - // Then - expect(response).toBeTrue(); - }); - - it('should verify will return false if status is different from RUNNING or SUBMITTED', () => { - // Given - const execution1: DataJobExecutionDetails = { - status: DataJobExecutionStatusDeprecated.USER_ERROR - } as any; - const execution2: DataJobExecutionDetails = { - status: DataJobExecutionStatusDeprecated.SKIPPED - } as any; - const execution3: DataJobExecutionDetails = { - status: DataJobExecutionStatusDeprecated.PLATFORM_ERROR - } as any; - const execution4: DataJobExecutionDetails = { - status: DataJobExecutionStatusDeprecated.SUCCEEDED - } as any; - - // When - const response1 = DataJobUtil.isJobRunningPredicate(execution1); - const response2 = DataJobUtil.isJobRunningPredicate(execution2); - const response3 = DataJobUtil.isJobRunningPredicate(execution3); - const response4 = DataJobUtil.isJobRunningPredicate(execution4); - - // Then - expect(response1).toBeFalse(); - expect(response2).toBeFalse(); - expect(response3).toBeFalse(); - expect(response4).toBeFalse(); - }); + DataJobExecution, + DataJobExecutionDetails, + DataJobExecutionStatus, + DataJobExecutionStatusDeprecated, + DataJobExecutionType, +} from "../../model"; + +import { DataJobUtil } from "./data-job.util"; + +describe("DataJobUtil", () => { + describe("|isJobRunningPredicate|", () => { + it("should verify will return true if status is RUNNING", () => { + // Given + const execution: DataJobExecutionDetails = { + status: DataJobExecutionStatusDeprecated.RUNNING, + } as any; + + // When + const response = DataJobUtil.isJobRunningPredicate(execution); + + // Then + expect(response).toBeTrue(); }); - describe('|isJobRunning|', () => { - it('should verify will invoke correct method', () => { - // Given - const spy = spyOn(DataJobUtil, 'isJobRunningPredicate').and.callThrough(); - const executions: DataJobExecutionDetails[] = [{ status: DataJobExecutionStatusDeprecated.RUNNING }] as any; - - // When - DataJobUtil.isJobRunning(executions); - - // Then - expect(spy.calls.argsFor(0)[0]).toEqual(executions[0]); - }); - - it('should verify will invoke correct method until find RUNNING or SUBMITTED status', () => { - // Given - const spy = spyOn(DataJobUtil, 'isJobRunningPredicate').and.callThrough(); - const executions: DataJobExecutionDetails[] = [ - { status: DataJobExecutionStatusDeprecated.FAILED }, - { status: DataJobExecutionStatusDeprecated.PLATFORM_ERROR }, - { status: DataJobExecutionStatusDeprecated.SUBMITTED }, - { status: DataJobExecutionStatusDeprecated.RUNNING } - ] as any; - - // When - DataJobUtil.isJobRunning(executions); - - // Then - expect(spy).toHaveBeenCalledTimes(3); - expect(spy.calls.argsFor(0)[0]).toEqual(executions[0]); - expect(spy.calls.argsFor(1)[0]).toEqual(executions[1]); - expect(spy.calls.argsFor(2)[0]).toEqual(executions[2]); - }); - - it('should verify will invoke correct method with all elements no RUNNING or SUBMITTED status', () => { - // Given - const spy = spyOn(DataJobUtil, 'isJobRunningPredicate').and.callThrough(); - const executions: DataJobExecutionDetails[] = [ - { status: DataJobExecutionStatusDeprecated.FAILED }, - { status: DataJobExecutionStatusDeprecated.PLATFORM_ERROR }, - { status: DataJobExecutionStatusDeprecated.SUCCEEDED }, - { status: DataJobExecutionStatusDeprecated.SKIPPED } - ] as any; - - // When - DataJobUtil.isJobRunning(executions); - - // Then - expect(spy).toHaveBeenCalledTimes(4); - expect(spy.calls.argsFor(0)[0]).toEqual(executions[0]); - expect(spy.calls.argsFor(1)[0]).toEqual(executions[1]); - expect(spy.calls.argsFor(2)[0]).toEqual(executions[2]); - expect(spy.calls.argsFor(3)[0]).toEqual(executions[3]); - }); + it("should verify will return true if status is SUBMITTED", () => { + // Given + const execution: DataJobExecutionDetails = { + status: DataJobExecutionStatusDeprecated.SUBMITTED, + } as any; + + // When + const response = DataJobUtil.isJobRunningPredicate(execution); + + // Then + expect(response).toBeTrue(); + }); + + it("should verify will return false if status is different from RUNNING or SUBMITTED", () => { + // Given + const execution1: DataJobExecutionDetails = { + status: DataJobExecutionStatusDeprecated.USER_ERROR, + } as any; + const execution2: DataJobExecutionDetails = { + status: DataJobExecutionStatusDeprecated.SKIPPED, + } as any; + const execution3: DataJobExecutionDetails = { + status: DataJobExecutionStatusDeprecated.PLATFORM_ERROR, + } as any; + const execution4: DataJobExecutionDetails = { + status: DataJobExecutionStatusDeprecated.SUCCEEDED, + } as any; + + // When + const response1 = DataJobUtil.isJobRunningPredicate(execution1); + const response2 = DataJobUtil.isJobRunningPredicate(execution2); + const response3 = DataJobUtil.isJobRunningPredicate(execution3); + const response4 = DataJobUtil.isJobRunningPredicate(execution4); + + // Then + expect(response1).toBeFalse(); + expect(response2).toBeFalse(); + expect(response3).toBeFalse(); + expect(response4).toBeFalse(); + }); + }); + + describe("|isJobRunning|", () => { + it("should verify will invoke correct method", () => { + // Given + const spy = spyOn(DataJobUtil, "isJobRunningPredicate").and.callThrough(); + const executions: DataJobExecutionDetails[] = [ + { status: DataJobExecutionStatusDeprecated.RUNNING }, + ] as any; + + // When + DataJobUtil.isJobRunning(executions); + + // Then + expect(spy.calls.argsFor(0)[0]).toEqual(executions[0]); + }); + + it("should verify will invoke correct method until find RUNNING or SUBMITTED status", () => { + // Given + const spy = spyOn(DataJobUtil, "isJobRunningPredicate").and.callThrough(); + const executions: DataJobExecutionDetails[] = [ + { status: DataJobExecutionStatusDeprecated.FAILED }, + { status: DataJobExecutionStatusDeprecated.PLATFORM_ERROR }, + { status: DataJobExecutionStatusDeprecated.SUBMITTED }, + { status: DataJobExecutionStatusDeprecated.RUNNING }, + ] as any; + + // When + DataJobUtil.isJobRunning(executions); + + // Then + expect(spy).toHaveBeenCalledTimes(3); + expect(spy.calls.argsFor(0)[0]).toEqual(executions[0]); + expect(spy.calls.argsFor(1)[0]).toEqual(executions[1]); + expect(spy.calls.argsFor(2)[0]).toEqual(executions[2]); + }); + + it("should verify will invoke correct method with all elements no RUNNING or SUBMITTED status", () => { + // Given + const spy = spyOn(DataJobUtil, "isJobRunningPredicate").and.callThrough(); + const executions: DataJobExecutionDetails[] = [ + { status: DataJobExecutionStatusDeprecated.FAILED }, + { status: DataJobExecutionStatusDeprecated.PLATFORM_ERROR }, + { status: DataJobExecutionStatusDeprecated.SUCCEEDED }, + { status: DataJobExecutionStatusDeprecated.SKIPPED }, + ] as any; + + // When + DataJobUtil.isJobRunning(executions); + + // Then + expect(spy).toHaveBeenCalledTimes(4); + expect(spy.calls.argsFor(0)[0]).toEqual(executions[0]); + expect(spy.calls.argsFor(1)[0]).toEqual(executions[1]); + expect(spy.calls.argsFor(2)[0]).toEqual(executions[2]); + expect(spy.calls.argsFor(3)[0]).toEqual(executions[3]); + }); + }); + + describe("|convertFromExecutionDetailsToExecutionState|", () => { + let executionDetails: DataJobExecutionDetails; + let expectedExecution: DataJobExecution; + + beforeEach(() => { + executionDetails = { + id: "id001", + job_name: "job001", + type: "manual", + status: DataJobExecutionStatusDeprecated.SUBMITTED, + start_time: new Date().toISOString(), + started_by: "aUserov", + end_time: new Date().toISOString(), + op_id: "op001", + message: "message001", + logs_url: "http://url", + deployment: { + schedule: { + schedule_cron: "5 5 5 5 *", + }, + id: "id002", + enabled: true, + job_version: "002", + mode: "test_mode", + vdk_version: "002", + python_version: "3.9-secure", + resources: { + memory_limit: 1000, + memory_request: 1000, + cpu_limit: 0.5, + cpu_request: 0.5, + }, + deployed_date: "2020-11-11T10:10:10Z", + deployed_by: "pmitev", + }, + }; + expectedExecution = { + id: "id001", + jobName: "job001", + type: DataJobExecutionType.MANUAL, + status: DataJobExecutionStatus.SUBMITTED, + startTime: executionDetails.start_time, + startedBy: "aUserov", + endTime: executionDetails.end_time, + opId: "op001", + message: "message001", + logsUrl: "http://url", + deployment: { + schedule: { + scheduleCron: "5 5 5 5 *", + }, + id: "id002", + enabled: true, + jobVersion: "002", + mode: "test_mode", + vdkVersion: "002", + jobPythonVersion: "3.9-secure", + resources: { + memoryLimit: 1000, + memoryRequest: 1000, + cpuLimit: 0.5, + cpuRequest: 0.5, + }, + deployedDate: "2020-11-11T10:10:10Z", + deployedBy: "pmitev", + }, + }; + }); + + it("should verify will return empty execution when null and undefined provided", () => { + // When + const res1 = + DataJobUtil.convertFromExecutionDetailsToExecutionState(null); + const res2 = + DataJobUtil.convertFromExecutionDetailsToExecutionState(undefined); + + // Then + expect(res1).toEqual({ id: null }); + expect(res2).toEqual({ id: null }); + }); + + it("should verify will correctly convert case 1", () => { + // When + const converted = + DataJobUtil.convertFromExecutionDetailsToExecutionState( + executionDetails, + ); + + // Then + expect(converted).toEqual(expectedExecution); + }); + + it("should verify will correctly convert case 2", () => { + // Given + delete executionDetails.deployment.resources; + expectedExecution.deployment.resources = {} as any; + + // When + const converted = + DataJobUtil.convertFromExecutionDetailsToExecutionState( + executionDetails, + ); + + // Then + expect(converted).toEqual(expectedExecution); + }); + + it("should verify will correctly convert case 3", () => { + // Given + delete executionDetails.deployment.schedule; + expectedExecution.deployment.schedule = {} as any; + + // When + const converted = + DataJobUtil.convertFromExecutionDetailsToExecutionState( + executionDetails, + ); + + // Then + expect(converted).toEqual(expectedExecution); }); - describe('|convertFromExecutionDetailsToExecutionState|', () => { - let executionDetails: DataJobExecutionDetails; - let expectedExecution: DataJobExecution; - - beforeEach(() => { - executionDetails = { - id: 'id001', - job_name: 'job001', - type: 'manual', - status: DataJobExecutionStatusDeprecated.SUBMITTED, - start_time: new Date().toISOString(), - started_by: 'aUserov', - end_time: new Date().toISOString(), - op_id: 'op001', - message: 'message001', - logs_url: 'http://url', - deployment: { - schedule: { - schedule_cron: '5 5 5 5 *' - }, - id: 'id002', - enabled: true, - job_version: '002', - mode: 'test_mode', - vdk_version: '002', - python_version: '3.9-secure', - resources: { - memory_limit: 1000, - memory_request: 1000, - cpu_limit: 0.5, - cpu_request: 0.5 - }, - deployed_date: '2020-11-11T10:10:10Z', - deployed_by: 'pmitev' - } - }; - expectedExecution = { - id: 'id001', - jobName: 'job001', - type: DataJobExecutionType.MANUAL, - status: DataJobExecutionStatus.SUBMITTED, - startTime: executionDetails.start_time, - startedBy: 'aUserov', - endTime: executionDetails.end_time, - opId: 'op001', - message: 'message001', - logsUrl: 'http://url', - deployment: { - schedule: { - scheduleCron: '5 5 5 5 *' - }, - id: 'id002', - enabled: true, - jobVersion: '002', - mode: 'test_mode', - vdkVersion: '002', - jobPythonVersion: '3.9-secure', - resources: { - memoryLimit: 1000, - memoryRequest: 1000, - cpuLimit: 0.5, - cpuRequest: 0.5 - }, - deployedDate: '2020-11-11T10:10:10Z', - deployedBy: 'pmitev' - } - }; - }); - - it('should verify will return empty execution when null and undefined provided', () => { - // When - const res1 = DataJobUtil.convertFromExecutionDetailsToExecutionState(null); - const res2 = DataJobUtil.convertFromExecutionDetailsToExecutionState(undefined); - - // Then - expect(res1).toEqual({ id: null }); - expect(res2).toEqual({ id: null }); - }); - - it('should verify will correctly convert case 1', () => { - // When - const converted = DataJobUtil.convertFromExecutionDetailsToExecutionState(executionDetails); - - // Then - expect(converted).toEqual(expectedExecution); - }); - - it('should verify will correctly convert case 2', () => { - // Given - delete executionDetails.deployment.resources; - expectedExecution.deployment.resources = {} as any; - - // When - const converted = DataJobUtil.convertFromExecutionDetailsToExecutionState(executionDetails); - - // Then - expect(converted).toEqual(expectedExecution); - }); - - it('should verify will correctly convert case 3', () => { - // Given - delete executionDetails.deployment.schedule; - expectedExecution.deployment.schedule = {} as any; - - // When - const converted = DataJobUtil.convertFromExecutionDetailsToExecutionState(executionDetails); - - // Then - expect(converted).toEqual(expectedExecution); - }); - - it('should verify will correctly convert case 4', () => { - // Given - delete executionDetails.deployment; - expectedExecution.deployment = { - schedule: {}, - resources: {} - } as any; - - // When - const converted = DataJobUtil.convertFromExecutionDetailsToExecutionState(executionDetails); - - // Then - expect(converted).toEqual(expectedExecution); - }); + it("should verify will correctly convert case 4", () => { + // Given + delete executionDetails.deployment; + expectedExecution.deployment = { + schedule: {}, + resources: {}, + } as any; + + // When + const converted = + DataJobUtil.convertFromExecutionDetailsToExecutionState( + executionDetails, + ); + + // Then + expect(converted).toEqual(expectedExecution); }); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/data-job.util.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/data-job.util.ts index 11ff5625b0..e22040781a 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/data-job.util.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/data-job.util.ts @@ -3,87 +3,114 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { CollectionsUtil } from '@versatiledatakit/shared'; +import { CollectionsUtil } from "@versatiledatakit/shared"; import { - DataJobDeployment, - DataJobExecution, - DataJobExecutionDetails, - DataJobExecutionStatus, - DataJobExecutionStatusDeprecated, - DataJobExecutionType -} from '../../model'; + DataJobDeployment, + DataJobExecution, + DataJobExecutionDetails, + DataJobExecutionStatus, + DataJobExecutionStatusDeprecated, + DataJobExecutionType, +} from "../../model"; /** * ** Utils for Data Job. */ export class DataJobUtil { - /** - * ** Predicate for Job Running. - */ - static isJobRunningPredicate = (jobExecution: DataJobExecution | DataJobExecutionDetails): boolean => { - return ( - (jobExecution as DataJobExecution).status === DataJobExecutionStatus.RUNNING || - (jobExecution as DataJobExecution).status === DataJobExecutionStatus.SUBMITTED || - (jobExecution as DataJobExecutionDetails).status === DataJobExecutionStatusDeprecated.RUNNING || - (jobExecution as DataJobExecutionDetails).status === DataJobExecutionStatusDeprecated.SUBMITTED - ); - }; - - /** - * ** Find if some Job is running in provided Executions. - */ - static isJobRunning(jobExecutions: DataJobExecution[] | DataJobExecutionDetails[]): boolean { - // eslint-disable-next-line @typescript-eslint/unbound-method - return jobExecutions.findIndex(DataJobUtil.isJobRunningPredicate) !== -1; - } + /** + * ** Predicate for Job Running. + */ + static isJobRunningPredicate = ( + jobExecution: DataJobExecution | DataJobExecutionDetails, + ): boolean => { + return ( + (jobExecution as DataJobExecution).status === + DataJobExecutionStatus.RUNNING || + (jobExecution as DataJobExecution).status === + DataJobExecutionStatus.SUBMITTED || + (jobExecution as DataJobExecutionDetails).status === + DataJobExecutionStatusDeprecated.RUNNING || + (jobExecution as DataJobExecutionDetails).status === + DataJobExecutionStatusDeprecated.SUBMITTED + ); + }; - static convertFromExecutionDetailsToExecutionState(jobExecutionDetails: DataJobExecutionDetails): DataJobExecution { - if (CollectionsUtil.isNil(jobExecutionDetails)) { - return { - id: null - }; - } + /** + * ** Find if some Job is running in provided Executions. + */ + static isJobRunning( + jobExecutions: DataJobExecution[] | DataJobExecutionDetails[], + ): boolean { + // eslint-disable-next-line @typescript-eslint/unbound-method + return jobExecutions.findIndex(DataJobUtil.isJobRunningPredicate) !== -1; + } - const execution: DataJobExecution = { - id: jobExecutionDetails.id, - jobName: jobExecutionDetails.job_name, - opId: jobExecutionDetails.op_id, - status: jobExecutionDetails.status.toUpperCase() as DataJobExecutionStatus, - startedBy: jobExecutionDetails.started_by, - startTime: jobExecutionDetails.start_time, - endTime: jobExecutionDetails.end_time, - message: jobExecutionDetails.message, - type: jobExecutionDetails.type.toUpperCase() as DataJobExecutionType, - logsUrl: jobExecutionDetails.logs_url, - deployment: { - schedule: {}, - resources: {} - } as DataJobDeployment - }; + static convertFromExecutionDetailsToExecutionState( + jobExecutionDetails: DataJobExecutionDetails, + ): DataJobExecution { + if (CollectionsUtil.isNil(jobExecutionDetails)) { + return { + id: null, + }; + } - if (CollectionsUtil.isLiteralObject(jobExecutionDetails.deployment)) { - execution.deployment.id = jobExecutionDetails.deployment.id; - execution.deployment.enabled = jobExecutionDetails.deployment.enabled; - execution.deployment.jobVersion = jobExecutionDetails.deployment.job_version; - execution.deployment.vdkVersion = jobExecutionDetails.deployment.vdk_version; - execution.deployment.mode = jobExecutionDetails.deployment.mode; - execution.deployment.deployedDate = jobExecutionDetails.deployment.deployed_date; - execution.deployment.deployedBy = jobExecutionDetails.deployment.deployed_by; - execution.deployment.jobPythonVersion = jobExecutionDetails.deployment.python_version; + const execution: DataJobExecution = { + id: jobExecutionDetails.id, + jobName: jobExecutionDetails.job_name, + opId: jobExecutionDetails.op_id, + status: + jobExecutionDetails.status.toUpperCase() as DataJobExecutionStatus, + startedBy: jobExecutionDetails.started_by, + startTime: jobExecutionDetails.start_time, + endTime: jobExecutionDetails.end_time, + message: jobExecutionDetails.message, + type: jobExecutionDetails.type.toUpperCase() as DataJobExecutionType, + logsUrl: jobExecutionDetails.logs_url, + deployment: { + schedule: {}, + resources: {}, + } as DataJobDeployment, + }; - if (CollectionsUtil.isLiteralObject(jobExecutionDetails.deployment.schedule)) { - execution.deployment.schedule.scheduleCron = jobExecutionDetails.deployment.schedule.schedule_cron; - } + if (CollectionsUtil.isLiteralObject(jobExecutionDetails.deployment)) { + execution.deployment.id = jobExecutionDetails.deployment.id; + execution.deployment.enabled = jobExecutionDetails.deployment.enabled; + execution.deployment.jobVersion = + jobExecutionDetails.deployment.job_version; + execution.deployment.vdkVersion = + jobExecutionDetails.deployment.vdk_version; + execution.deployment.mode = jobExecutionDetails.deployment.mode; + execution.deployment.deployedDate = + jobExecutionDetails.deployment.deployed_date; + execution.deployment.deployedBy = + jobExecutionDetails.deployment.deployed_by; + execution.deployment.jobPythonVersion = + jobExecutionDetails.deployment.python_version; - if (CollectionsUtil.isLiteralObject(jobExecutionDetails.deployment.resources)) { - execution.deployment.resources.cpuRequest = jobExecutionDetails.deployment.resources.cpu_request; - execution.deployment.resources.cpuLimit = jobExecutionDetails.deployment.resources.cpu_limit; - execution.deployment.resources.memoryRequest = jobExecutionDetails.deployment.resources.memory_request; - execution.deployment.resources.memoryLimit = jobExecutionDetails.deployment.resources.memory_limit; - } - } + if ( + CollectionsUtil.isLiteralObject(jobExecutionDetails.deployment.schedule) + ) { + execution.deployment.schedule.scheduleCron = + jobExecutionDetails.deployment.schedule.schedule_cron; + } - return execution; + if ( + CollectionsUtil.isLiteralObject( + jobExecutionDetails.deployment.resources, + ) + ) { + execution.deployment.resources.cpuRequest = + jobExecutionDetails.deployment.resources.cpu_request; + execution.deployment.resources.cpuLimit = + jobExecutionDetails.deployment.resources.cpu_limit; + execution.deployment.resources.memoryRequest = + jobExecutionDetails.deployment.resources.memory_request; + execution.deployment.resources.memoryLimit = + jobExecutionDetails.deployment.resources.memory_limit; + } } + + return execution; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/date.util.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/date.util.spec.ts index 144c767dd3..87b29e76a5 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/date.util.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/date.util.spec.ts @@ -3,50 +3,71 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { DataJobExecution, DataJobExecutionStatus, DataJobExecutionType } from '../../model'; +import { + DataJobExecution, + DataJobExecutionStatus, + DataJobExecutionType, +} from "../../model"; -import { DateUtil } from './date.util'; +import { DateUtil } from "./date.util"; const LESSER_DATE_JOBS_EXECUTION: DataJobExecution = { - id: 'oneId', - startTime: new Date(1).toISOString(), - jobName: 'oneJob', - status: DataJobExecutionStatus.SUBMITTED, - startedBy: '', - type: DataJobExecutionType.MANUAL, - endTime: new Date(1).toISOString(), - opId: 'oneOp', - message: 'oneMessage', - logsUrl: 'https::/logs.com' + id: "oneId", + startTime: new Date(1).toISOString(), + jobName: "oneJob", + status: DataJobExecutionStatus.SUBMITTED, + startedBy: "", + type: DataJobExecutionType.MANUAL, + endTime: new Date(1).toISOString(), + opId: "oneOp", + message: "oneMessage", + logsUrl: "https::/logs.com", }; const GREATER_DATE_JOBS_EXECUTION: DataJobExecution = { - id: 'twoId', - startTime: new Date(2).toISOString(), - jobName: 'twoJob', - status: DataJobExecutionStatus.SUBMITTED, - startedBy: '', - type: DataJobExecutionType.MANUAL, - endTime: new Date(2).toISOString(), - opId: 'twoOp', - message: 'twoMessage', - logsUrl: 'https::/logs.com' + id: "twoId", + startTime: new Date(2).toISOString(), + jobName: "twoJob", + status: DataJobExecutionStatus.SUBMITTED, + startedBy: "", + type: DataJobExecutionType.MANUAL, + endTime: new Date(2).toISOString(), + opId: "twoOp", + message: "twoMessage", + logsUrl: "https::/logs.com", }; -describe('DateUtil', () => { - it('Compare Dates Asc for equal left and right', () => { - expect(DateUtil.compareDatesAsc(LESSER_DATE_JOBS_EXECUTION, LESSER_DATE_JOBS_EXECUTION)).toEqual(0); - }); +describe("DateUtil", () => { + it("Compare Dates Asc for equal left and right", () => { + expect( + DateUtil.compareDatesAsc( + LESSER_DATE_JOBS_EXECUTION, + LESSER_DATE_JOBS_EXECUTION, + ), + ).toEqual(0); + }); - it('Compare Dates Asc for greater left', () => { - expect(DateUtil.compareDatesAsc(GREATER_DATE_JOBS_EXECUTION, LESSER_DATE_JOBS_EXECUTION)).toBeGreaterThan(0); - }); + it("Compare Dates Asc for greater left", () => { + expect( + DateUtil.compareDatesAsc( + GREATER_DATE_JOBS_EXECUTION, + LESSER_DATE_JOBS_EXECUTION, + ), + ).toBeGreaterThan(0); + }); - it('Compare Dates Asc for greater right', () => { - expect(DateUtil.compareDatesAsc(LESSER_DATE_JOBS_EXECUTION, GREATER_DATE_JOBS_EXECUTION)).toBeLessThan(0); - }); + it("Compare Dates Asc for greater right", () => { + expect( + DateUtil.compareDatesAsc( + LESSER_DATE_JOBS_EXECUTION, + GREATER_DATE_JOBS_EXECUTION, + ), + ).toBeLessThan(0); + }); - it('GetDateInUTC', () => { - expect(DateUtil.normalizeToUTC('2021-12-10T10:12:12Z').getHours()).toEqual(10); - }); + it("GetDateInUTC", () => { + expect(DateUtil.normalizeToUTC("2021-12-10T10:12:12Z").getHours()).toEqual( + 10, + ); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/date.util.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/date.util.ts index 17d555085c..225f78d95d 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/date.util.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/date.util.ts @@ -3,17 +3,22 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { DataJobExecution } from '../../model'; +import { DataJobExecution } from "../../model"; export class DateUtil { - static compareDatesAsc(left: DataJobExecution, right: DataJobExecution): number { - const leftStartTime = left.startTime ?? 0; - const rightStartTime = right.endTime ?? 0; + static compareDatesAsc( + left: DataJobExecution, + right: DataJobExecution, + ): number { + const leftStartTime = left.startTime ?? 0; + const rightStartTime = right.endTime ?? 0; - return new Date(leftStartTime).getTime() - new Date(rightStartTime).getTime(); - } + return ( + new Date(leftStartTime).getTime() - new Date(rightStartTime).getTime() + ); + } - static normalizeToUTC(dateISO: string): Date { - return new Date(dateISO.replace(/Z$/, '')); - } + static normalizeToUTC(dateISO: string): Date { + return new Date(dateISO.replace(/Z$/, "")); + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/error.util.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/error.util.ts index 0d6f713640..4b023012b2 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/error.util.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/error.util.ts @@ -3,9 +3,9 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ApolloError } from '@apollo/client/core'; +import { ApolloError } from "@apollo/client/core"; -import { CollectionsUtil } from '@versatiledatakit/shared'; +import { CollectionsUtil } from "@versatiledatakit/shared"; /** * ** Error Utils class. @@ -13,14 +13,17 @@ import { CollectionsUtil } from '@versatiledatakit/shared'; * @author gorankokin */ export class ErrorUtil { - /** - * ** Extract root Error depending of the format. - */ - static extractError(error: Error): Error { - if (error instanceof ApolloError && CollectionsUtil.isDefined(error.networkError)) { - return error.networkError; - } - - return error; + /** + * ** Extract root Error depending of the format. + */ + static extractError(error: Error): Error { + if ( + error instanceof ApolloError && + CollectionsUtil.isDefined(error.networkError) + ) { + return error.networkError; } + + return error; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/index.ts index e87b4d1bae..5609ce9d3c 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/index.ts @@ -3,8 +3,8 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './cron.util'; -export * from './data-job.util'; -export * from './date.util'; -export * from './error.util'; -export * from './string.util'; +export * from "./cron.util"; +export * from "./data-job.util"; +export * from "./date.util"; +export * from "./error.util"; +export * from "./string.util"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/string.util.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/string.util.spec.ts index ab2260f1d1..2b451fb896 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/string.util.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/string.util.spec.ts @@ -3,22 +3,28 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { StringUtil } from './string.util'; +import { StringUtil } from "./string.util"; -describe('StringUtil', () => { - it('parsing string with single var', () => { - expect(StringUtil.stringFormat('Hello {0}', 'World!')).toBe('Hello World!'); - }); +describe("StringUtil", () => { + it("parsing string with single var", () => { + expect(StringUtil.stringFormat("Hello {0}", "World!")).toBe("Hello World!"); + }); - it('parsing string with multiple var', () => { - expect(StringUtil.stringFormat('Hello {0} {1}', 'beautiful', 'World!')).toBe('Hello beautiful World!'); - }); + it("parsing string with multiple var", () => { + expect( + StringUtil.stringFormat("Hello {0} {1}", "beautiful", "World!"), + ).toBe("Hello beautiful World!"); + }); - it('parsing string with multiple same var', () => { - expect(StringUtil.stringFormat('Hello {0} {0}', 'beautiful', 'World!')).toBe('Hello beautiful beautiful'); - }); + it("parsing string with multiple same var", () => { + expect( + StringUtil.stringFormat("Hello {0} {0}", "beautiful", "World!"), + ).toBe("Hello beautiful beautiful"); + }); - it('parsing string with same var', () => { - expect(StringUtil.stringFormat('Hello {0} {0}', 'beautiful')).toBe('Hello beautiful beautiful'); - }); + it("parsing string with same var", () => { + expect(StringUtil.stringFormat("Hello {0} {0}", "beautiful")).toBe( + "Hello beautiful beautiful", + ); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/string.util.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/string.util.ts index a2fe176855..4e30999e51 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/string.util.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/shared/utils/string.util.ts @@ -4,5 +4,6 @@ */ export class StringUtil { - static stringFormat = (str: string, ...args: string[]) => str.replace(/{(\d+)}/g, (match, index: number) => args[index] || ''); + static stringFormat = (str: string, ...args: string[]) => + str.replace(/{(\d+)}/g, (match, index: number) => args[index] || ""); } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/actions/data-jobs.actions.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/actions/data-jobs.actions.ts index 8ed500a397..6dcf874d77 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/actions/data-jobs.actions.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/actions/data-jobs.actions.ts @@ -6,19 +6,20 @@ /** * ** Action type Fetch Data Jobs. */ -export const FETCH_DATA_JOBS = '[feature::data-pipelines] Fetch Data Jobs'; +export const FETCH_DATA_JOBS = "[feature::data-pipelines] Fetch Data Jobs"; /** * ** Action type Fetch Data Job. */ -export const FETCH_DATA_JOB = '[feature::data-pipelines] Fetch Data Job'; +export const FETCH_DATA_JOB = "[feature::data-pipelines] Fetch Data Job"; /** * ** Action type Fetch Data Job executions. */ -export const FETCH_DATA_JOB_EXECUTIONS = '[feature::data-pipelines] Fetch Data Job Executions'; +export const FETCH_DATA_JOB_EXECUTIONS = + "[feature::data-pipelines] Fetch Data Job Executions"; /** * ** Action type Update Data job. */ -export const UPDATE_DATA_JOB = '[feature::data-pipelines] Update Data Job'; +export const UPDATE_DATA_JOB = "[feature::data-pipelines] Update Data Job"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/actions/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/actions/index.ts index 874cd271cd..7446b704a8 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/actions/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/actions/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-jobs.actions'; +export * from "./data-jobs.actions"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/effects/data-jobs.effects.spec.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/effects/data-jobs.effects.spec.ts index c379d1dfa5..22cf2974bf 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/effects/data-jobs.effects.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/effects/data-jobs.effects.spec.ts @@ -5,554 +5,617 @@ /* eslint-disable @typescript-eslint/naming-convention */ -import { TestBed, waitForAsync } from '@angular/core/testing'; +import { TestBed, waitForAsync } from "@angular/core/testing"; -import { Observable, throwError } from 'rxjs'; +import { Observable, throwError } from "rxjs"; -import { marbles } from 'rxjs-marbles/jasmine'; +import { marbles } from "rxjs-marbles/jasmine"; -import { provideMockActions } from '@ngrx/effects/testing'; +import { provideMockActions } from "@ngrx/effects/testing"; -import { ApolloQueryResult } from '@apollo/client/core'; +import { ApolloQueryResult } from "@apollo/client/core"; import { - CollectionsUtil, - ComponentFailed, - ComponentLoaded, - ComponentModel, - ComponentService, - ComponentStateImpl, - ComponentUpdate, - ErrorRecord, - generateErrorCode, - generateErrorCodes, - GenericAction, - LOADED, - LOADING, - RouterState, - RouteState, - StatusType -} from '@versatiledatakit/shared'; - -import { DataJobsApiService } from '../../services'; + CollectionsUtil, + ComponentFailed, + ComponentLoaded, + ComponentModel, + ComponentService, + ComponentStateImpl, + ComponentUpdate, + ErrorRecord, + generateErrorCode, + generateErrorCodes, + GenericAction, + LOADED, + LOADING, + RouterState, + RouteState, + StatusType, +} from "@versatiledatakit/shared"; + +import { DataJobsApiService } from "../../services"; import { - DataJob, - DataJobDetails, - DataJobExecutionsPage, - DataJobPage, - JOB_DEPLOYMENT_ID_REQ_PARAM, - JOB_DETAILS_DATA_KEY, - JOB_EXECUTIONS_DATA_KEY, - JOB_NAME_REQ_PARAM, - JOB_STATE_DATA_KEY, - JOBS_DATA_KEY, - TEAM_NAME_REQ_PARAM -} from '../../model'; + DataJob, + DataJobDetails, + DataJobExecutionsPage, + DataJobPage, + JOB_DEPLOYMENT_ID_REQ_PARAM, + JOB_DETAILS_DATA_KEY, + JOB_EXECUTIONS_DATA_KEY, + JOB_NAME_REQ_PARAM, + JOB_STATE_DATA_KEY, + JOBS_DATA_KEY, + TEAM_NAME_REQ_PARAM, +} from "../../model"; -import { FETCH_DATA_JOB, FETCH_DATA_JOB_EXECUTIONS, FETCH_DATA_JOBS, UPDATE_DATA_JOB } from '../actions'; +import { + FETCH_DATA_JOB, + FETCH_DATA_JOB_EXECUTIONS, + FETCH_DATA_JOBS, + UPDATE_DATA_JOB, +} from "../actions"; -import { DataJobsEffects } from './data-jobs.effects'; +import { DataJobsEffects } from "./data-jobs.effects"; import { - TASK_LOAD_JOB_DETAILS, - TASK_LOAD_JOB_EXECUTIONS, - TASK_LOAD_JOB_STATE, - TASK_LOAD_JOBS_STATE, - TASK_UPDATE_JOB_DESCRIPTION, - TASK_UPDATE_JOB_STATUS -} from '../tasks'; - -describe('DataJobsEffects', () => { - let effects: DataJobsEffects; - - let actions$: Observable; - - let dataJobsApiServiceStub: jasmine.SpyObj; - let componentServiceStub: jasmine.SpyObj; - - beforeEach(waitForAsync(() => { - dataJobsApiServiceStub = jasmine.createSpyObj('dataJobsApiService', [ - 'getJobs', - 'getJob', - 'getJobDetails', - 'getJobExecutions', - 'updateDataJob', - 'updateDataJobStatus' - ]); - componentServiceStub = jasmine.createSpyObj('componentService', ['getModel']); - - generateErrorCodes(dataJobsApiServiceStub, [ - 'getJob', - 'getJobDetails', - 'getJobExecutions', - 'getJobs', - 'updateDataJobStatus', - 'updateDataJob' - ]); - - TestBed.configureTestingModule({ - providers: [ - { - provide: DataJobsApiService, - useValue: dataJobsApiServiceStub - }, - { - provide: ComponentService, - useValue: componentServiceStub - }, - provideMockActions(() => actions$), - DataJobsEffects - ] - }); - - effects = TestBed.inject(DataJobsEffects); - })); - - describe('Effects::', () => { - describe('|loadDataJobs$|', () => { - it( - 'should verify will load data-jobs', - marbles((m) => { - // Given - const dateNow = Date.now(); - spyOn(CollectionsUtil, 'dateNow').and.returnValue(dateNow); - const error = new Error('Something bad happened'); - const errorRecord: ErrorRecord = { - code: dataJobsApiServiceStub.errorCodes.getJobs.Unknown, - error, - objectUUID: effects.objectUUID - }; - - actions$ = m.cold('-a---------b', { - a: GenericAction.of(FETCH_DATA_JOBS, createModel().getComponentState()), - b: GenericAction.of(FETCH_DATA_JOBS, createModel(null, 4).getComponentState()) - }); - - let cntComponentServiceStub = 0; - componentServiceStub.getModel.and.callFake(() => { - cntComponentServiceStub++; - - if (cntComponentServiceStub === 1) { - return m.cold('--a', { a: createModel() }); - } - - return m.cold('--a', { a: createModel(null, 4) }); - }); - - const result = { - data: { - content: [{ jobName: 'job1' }, { jobName: 'job2' }, { jobName: 'job3' }], - totalPages: 0, - totalItems: 0 - } - } as ApolloQueryResult; - - let cntDataJobsApiServiceStub = 0; - dataJobsApiServiceStub.getJobs.and.callFake(() => { - cntDataJobsApiServiceStub++; - - if (cntDataJobsApiServiceStub === 1) { - return m.cold('-----a', { - a: result - }); - } - - return throwError(() => new Error('Something bad happened')); - }); - - const expected$ = m.cold('--------a------b', { - a: ComponentLoaded.of( - createModel() - .withData(JOBS_DATA_KEY, result.data) - .withTask(TASK_LOAD_JOBS_STATE) - .withStatusLoaded() - .getComponentState() - ), - b: ComponentFailed.of( - createModel(null, 4) - .withData(JOBS_DATA_KEY, { - content: [], - totalItems: 0, - totalPages: 0 - } as DataJobPage) - .withError(errorRecord) - .withTask(TASK_LOAD_JOBS_STATE) - .withStatusFailed() - .getComponentState() - ) - }); - - // When - const response$ = effects.loadDataJobs$; - - // Then - m.expect(response$).toBeObservable(expected$); - }) - ); - }); - - describe('|loadDataJob$|', () => { - it( - 'should verify will load data-job', - marbles((m) => { - // Given - actions$ = m.cold('-a----------', { - a: GenericAction.of(FETCH_DATA_JOB, createModel().getComponentState()) - }); - - let cntComponentServiceStub = 0; - componentServiceStub.getModel.and.callFake(() => { - cntComponentServiceStub++; - - switch (cntComponentServiceStub) { - case 1: - return m.cold('--a', { a: createModel() }); - case 2: - return m.cold('---a', { a: createModel() }); - case 3: - return m.cold('---a', { - a: createModel(new Map([getJobStateTuple()]), 1, LOADED) - }); - case 4: - return m.cold('---a', { - a: createModel(new Map([getJobStateTuple(), getDataJobDetailsTuple()]), 1, LOADED) - }); - default: - return m.cold('---a', { - a: createModel( - new Map([ - getJobStateTuple(), - getDataJobDetailsTuple(), - [getExecutionsTuples()[0], getExecutionsTuples()[1].content] - ]), - 1, - LOADED - ) - }); - } - }); - - dataJobsApiServiceStub.getJob.and.returnValue( - m.cold('--a', { - a: getJobStateTuple()[1] - }) - ); - - dataJobsApiServiceStub.getJobDetails.and.returnValue( - m.cold('----a', { - a: getDataJobDetailsTuple()[1] - }) - ); - - dataJobsApiServiceStub.getJobExecutions.and.returnValue( - m.cold('------a', { - a: getExecutionsTuples()[1] - }) - ); - - const expected$ = m.cold('--------a-b-c', { - a: ComponentLoaded.of( - /* eslint-disable @typescript-eslint/no-unsafe-argument */ - /* eslint-disable @typescript-eslint/no-unsafe-member-access */ - /* eslint-disable @typescript-eslint/no-unsafe-call */ - createModel() - .clearErrors() - .withTask(TASK_LOAD_JOB_STATE) - .withData(JOB_STATE_DATA_KEY, getJobStateTuple()[1]) - .withStatusLoaded() - .getComponentState() - ), - b: ComponentUpdate.of( - createModel() - .clearErrors() - .withTask(TASK_LOAD_JOB_DETAILS) - .withData(JOB_STATE_DATA_KEY, getJobStateTuple()[1]) - .withData(JOB_DETAILS_DATA_KEY, getDataJobDetailsTuple()[1]) - .withStatusLoaded() - .getComponentState() - ), - c: ComponentUpdate.of( - createModel() - .clearErrors() - .withTask(TASK_LOAD_JOB_EXECUTIONS) - .withData(JOB_STATE_DATA_KEY, getJobStateTuple()[1]) - .withData(JOB_DETAILS_DATA_KEY, getDataJobDetailsTuple()[1]) - .withData(JOB_EXECUTIONS_DATA_KEY, getExecutionsTuples()[1].content) - .withStatusLoaded() - .getComponentState() - ) - }); - - // When - const response$ = effects.loadDataJob$; - - // Then - m.expect(response$).toBeObservable(expected$); - }) - ); - }); - - describe('|loadDataJobExecutions$|', () => { - it( - 'should verify will load data-job executions', - marbles((m) => { - // Given - const genericAction = GenericAction.of(FETCH_DATA_JOB_EXECUTIONS, createModel().getComponentState()); - actions$ = m.cold('-a----------', { - a: genericAction - }); - - let cntComponentServiceStub = 0; - componentServiceStub.getModel.and.callFake(() => { - cntComponentServiceStub++; - - switch (cntComponentServiceStub) { - case 1: - return m.cold('--a', { a: createModel() }); - case 2: - return m.cold('---a', { a: createModel() }); - default: - return m.cold('---a', { - a: createModel( - new Map([[getExecutionsTuples()[0], getExecutionsTuples()[1].content]]), - 1, - LOADED - ) - }); - } - }); - - dataJobsApiServiceStub.getJobExecutions.and.returnValue( - m.cold('--a', { - a: getExecutionsTuples()[1] - }) - ); - - const expected$ = m.cold('--------a', { - a: ComponentLoaded.of( - createModel() - .clearErrors() - .withTask(TASK_LOAD_JOB_EXECUTIONS) - .withData(JOB_EXECUTIONS_DATA_KEY, getExecutionsTuples()[1].content) - .withStatusLoaded() - .getComponentState() - ) - }); - - // When - const response$ = effects.loadDataJobExecutions$; - - // Then - m.expect(response$).toBeObservable(expected$); - }) - ); - }); - - describe('|updateDataJob$|', () => { - it( - 'should verify will update data-job description', - marbles((m) => { - // Given - const genericAction1 = GenericAction.of( - UPDATE_DATA_JOB, - createModel(undefined, 1, LOADING).getComponentState(), - TASK_UPDATE_JOB_DESCRIPTION - ); - actions$ = m.cold('-a----------', { - a: genericAction1 - }); - - componentServiceStub.getModel.and.callFake(() => - m.cold('---a', { - a: createModel(undefined, 1, LOADING) - }) - ); - - dataJobsApiServiceStub.updateDataJob.and.returnValue( - m.cold('-----a', { - a: getDataJobDetailsTuple()[1] - }) - ); - - const expected$ = m.cold('---------a-', { - a: ComponentLoaded.of( - createModel(undefined, 1, LOADING) - .clearErrors() - .withTask(genericAction1.task) - .withData(JOB_DETAILS_DATA_KEY, undefined) - .withStatusLoaded() - .getComponentState() - ) - }); - - // When - const response$ = effects.updateDataJob$; - - // Then - m.expect(response$).toBeObservable(expected$); - }) - ); - - it( - 'should verify will update data-job status', - marbles((m) => { - // Given - const genericAction1 = GenericAction.of( - UPDATE_DATA_JOB, - createModel(undefined, 1, LOADING).getComponentState(), - TASK_UPDATE_JOB_STATUS - ); - actions$ = m.cold('-a----------', { - a: genericAction1 - }); - - componentServiceStub.getModel.and.callFake(() => - m.cold('---a', { - a: createModel(undefined, 1, LOADING) - }) - ); - - dataJobsApiServiceStub.updateDataJobStatus.and.returnValue( - m.cold('-----a', { - a: { enabled: true } - }) - ); - - const expected$ = m.cold('---------a-', { - a: ComponentLoaded.of( - createModel(undefined, 1, LOADING) - .clearErrors() - .withTask(genericAction1.task) - .withData(JOB_STATE_DATA_KEY, undefined) - .withStatusLoaded() - .getComponentState() - ) - }); - - // When - const response$ = effects.updateDataJob$; - - // Then - m.expect(response$).toBeObservable(expected$); - }) - ); - - it( - 'should verify will fail', - marbles((m) => { - // Given - const dateNow = Date.now(); - spyOn(CollectionsUtil, 'dateNow').and.returnValue(dateNow); - const error = new Error('Unsupported action task for Data Pipelines, update Data Job.'); - const errorRecord: ErrorRecord = { - code: generateErrorCode( - DataJobsEffects.CLASS_NAME, - DataJobsEffects.PUBLIC_NAME, - '_updateJob', - 'UnsupportedActionTask' - ), - error, - objectUUID: effects.objectUUID - }; - const genericAction1 = GenericAction.of( - UPDATE_DATA_JOB, - createModel(undefined, 1, LOADING).getComponentState(), - TASK_LOAD_JOB_STATE - ); - actions$ = m.cold('-a----------', { - a: genericAction1 - }); - - componentServiceStub.getModel.and.callFake(() => - m.cold('---a', { - a: createModel() - }) - ); - - const expected$ = m.cold('----a-', { - a: ComponentFailed.of( - createModel().withTask(genericAction1.task).withError(errorRecord).withStatusFailed().getComponentState() - ) - }); - - // When - const response$ = effects.updateDataJob$; - - // Then - m.expect(response$).toBeObservable(expected$); - }) - ); - }); + TASK_LOAD_JOB_DETAILS, + TASK_LOAD_JOB_EXECUTIONS, + TASK_LOAD_JOB_STATE, + TASK_LOAD_JOBS_STATE, + TASK_UPDATE_JOB_DESCRIPTION, + TASK_UPDATE_JOB_STATUS, +} from "../tasks"; + +describe("DataJobsEffects", () => { + let effects: DataJobsEffects; + + let actions$: Observable; + + let dataJobsApiServiceStub: jasmine.SpyObj; + let componentServiceStub: jasmine.SpyObj; + + beforeEach(waitForAsync(() => { + dataJobsApiServiceStub = jasmine.createSpyObj( + "dataJobsApiService", + [ + "getJobs", + "getJob", + "getJobDetails", + "getJobExecutions", + "updateDataJob", + "updateDataJobStatus", + ], + ); + componentServiceStub = jasmine.createSpyObj( + "componentService", + ["getModel"], + ); + + generateErrorCodes(dataJobsApiServiceStub, [ + "getJob", + "getJobDetails", + "getJobExecutions", + "getJobs", + "updateDataJobStatus", + "updateDataJob", + ]); + + TestBed.configureTestingModule({ + providers: [ + { + provide: DataJobsApiService, + useValue: dataJobsApiServiceStub, + }, + { + provide: ComponentService, + useValue: componentServiceStub, + }, + provideMockActions(() => actions$), + DataJobsEffects, + ], }); -}); -const createModel = (data?: Map, navigationId = 1, status: StatusType = LOADING, requestParams: Array<[string, any]> = []) => - ComponentModel.of( - ComponentStateImpl.of({ - id: 'testComponent', - status, - data, - requestParams: new Map([ - [TEAM_NAME_REQ_PARAM, 'aTeam'], - [JOB_NAME_REQ_PARAM, 'aJob'], - [JOB_DEPLOYMENT_ID_REQ_PARAM, 'aJobDeploymentId'], - ...requestParams - ]), - navigationId + effects = TestBed.inject(DataJobsEffects); + })); + + describe("Effects::", () => { + describe("|loadDataJobs$|", () => { + it( + "should verify will load data-jobs", + marbles((m) => { + // Given + const dateNow = Date.now(); + spyOn(CollectionsUtil, "dateNow").and.returnValue(dateNow); + const error = new Error("Something bad happened"); + const errorRecord: ErrorRecord = { + code: dataJobsApiServiceStub.errorCodes.getJobs.Unknown, + error, + objectUUID: effects.objectUUID, + }; + + actions$ = m.cold("-a---------b", { + a: GenericAction.of( + FETCH_DATA_JOBS, + createModel().getComponentState(), + ), + b: GenericAction.of( + FETCH_DATA_JOBS, + createModel(null, 4).getComponentState(), + ), + }); + + let cntComponentServiceStub = 0; + componentServiceStub.getModel.and.callFake(() => { + cntComponentServiceStub++; + + if (cntComponentServiceStub === 1) { + return m.cold("--a", { a: createModel() }); + } + + return m.cold("--a", { a: createModel(null, 4) }); + }); + + const result = { + data: { + content: [ + { jobName: "job1" }, + { jobName: "job2" }, + { jobName: "job3" }, + ], + totalPages: 0, + totalItems: 0, + }, + } as ApolloQueryResult; + + let cntDataJobsApiServiceStub = 0; + dataJobsApiServiceStub.getJobs.and.callFake(() => { + cntDataJobsApiServiceStub++; + + if (cntDataJobsApiServiceStub === 1) { + return m.cold("-----a", { + a: result, + }); + } + + return throwError(() => new Error("Something bad happened")); + }); + + const expected$ = m.cold("--------a------b", { + a: ComponentLoaded.of( + createModel() + .withData(JOBS_DATA_KEY, result.data) + .withTask(TASK_LOAD_JOBS_STATE) + .withStatusLoaded() + .getComponentState(), + ), + b: ComponentFailed.of( + createModel(null, 4) + .withData(JOBS_DATA_KEY, { + content: [], + totalItems: 0, + totalPages: 0, + } as DataJobPage) + .withError(errorRecord) + .withTask(TASK_LOAD_JOBS_STATE) + .withStatusFailed() + .getComponentState(), + ), + }); + + // When + const response$ = effects.loadDataJobs$; + + // Then + m.expect(response$).toBeObservable(expected$); }), - RouterState.of(RouteState.empty(), navigationId) - ); + ); + }); -const getJobStateTuple = () => - [ - JOB_STATE_DATA_KEY, - { - jobName: 'aJob', - deployments: [], - config: { - schedule: { - scheduleCron: '5 5 5 5 *' - }, - description: 'aDesc', - team: 'aTeam', - logsUrl: 'http://url', - sourceUrl: 'http://urlsource' + describe("|loadDataJob$|", () => { + it( + "should verify will load data-job", + marbles((m) => { + // Given + actions$ = m.cold("-a----------", { + a: GenericAction.of( + FETCH_DATA_JOB, + createModel().getComponentState(), + ), + }); + + let cntComponentServiceStub = 0; + componentServiceStub.getModel.and.callFake(() => { + cntComponentServiceStub++; + + switch (cntComponentServiceStub) { + case 1: + return m.cold("--a", { a: createModel() }); + case 2: + return m.cold("---a", { a: createModel() }); + case 3: + return m.cold("---a", { + a: createModel( + new Map([getJobStateTuple()]), + 1, + LOADED, + ), + }); + case 4: + return m.cold("---a", { + a: createModel( + new Map([ + getJobStateTuple(), + getDataJobDetailsTuple(), + ]), + 1, + LOADED, + ), + }); + default: + return m.cold("---a", { + a: createModel( + new Map([ + getJobStateTuple(), + getDataJobDetailsTuple(), + [ + getExecutionsTuples()[0], + getExecutionsTuples()[1].content, + ], + ]), + 1, + LOADED, + ), + }); } - } - ] as [string, DataJob]; + }); + + dataJobsApiServiceStub.getJob.and.returnValue( + m.cold("--a", { + a: getJobStateTuple()[1], + }), + ); + + dataJobsApiServiceStub.getJobDetails.and.returnValue( + m.cold("----a", { + a: getDataJobDetailsTuple()[1], + }), + ); + + dataJobsApiServiceStub.getJobExecutions.and.returnValue( + m.cold("------a", { + a: getExecutionsTuples()[1], + }), + ); + + const expected$ = m.cold("--------a-b-c", { + a: ComponentLoaded.of( + /* eslint-disable @typescript-eslint/no-unsafe-argument */ + /* eslint-disable @typescript-eslint/no-unsafe-member-access */ + /* eslint-disable @typescript-eslint/no-unsafe-call */ + createModel() + .clearErrors() + .withTask(TASK_LOAD_JOB_STATE) + .withData(JOB_STATE_DATA_KEY, getJobStateTuple()[1]) + .withStatusLoaded() + .getComponentState(), + ), + b: ComponentUpdate.of( + createModel() + .clearErrors() + .withTask(TASK_LOAD_JOB_DETAILS) + .withData(JOB_STATE_DATA_KEY, getJobStateTuple()[1]) + .withData(JOB_DETAILS_DATA_KEY, getDataJobDetailsTuple()[1]) + .withStatusLoaded() + .getComponentState(), + ), + c: ComponentUpdate.of( + createModel() + .clearErrors() + .withTask(TASK_LOAD_JOB_EXECUTIONS) + .withData(JOB_STATE_DATA_KEY, getJobStateTuple()[1]) + .withData(JOB_DETAILS_DATA_KEY, getDataJobDetailsTuple()[1]) + .withData( + JOB_EXECUTIONS_DATA_KEY, + getExecutionsTuples()[1].content, + ) + .withStatusLoaded() + .getComponentState(), + ), + }); + + // When + const response$ = effects.loadDataJob$; + + // Then + m.expect(response$).toBeObservable(expected$); + }), + ); + }); -const getDataJobDetailsTuple = () => - [ - JOB_DETAILS_DATA_KEY, - { - job_name: 'aJob', - team: 'aTeam', - description: 'aDesc', - config: { - schedule: { - schedule_cron: '5 5 5 5 *' - }, - contacts: { - notified_on_job_success: [], - notified_on_job_failure_user_error: [], - notified_on_job_failure_platform_error: [], - notified_on_job_deploy: [] - } + describe("|loadDataJobExecutions$|", () => { + it( + "should verify will load data-job executions", + marbles((m) => { + // Given + const genericAction = GenericAction.of( + FETCH_DATA_JOB_EXECUTIONS, + createModel().getComponentState(), + ); + actions$ = m.cold("-a----------", { + a: genericAction, + }); + + let cntComponentServiceStub = 0; + componentServiceStub.getModel.and.callFake(() => { + cntComponentServiceStub++; + + switch (cntComponentServiceStub) { + case 1: + return m.cold("--a", { a: createModel() }); + case 2: + return m.cold("---a", { a: createModel() }); + default: + return m.cold("---a", { + a: createModel( + new Map([ + [ + getExecutionsTuples()[0], + getExecutionsTuples()[1].content, + ], + ]), + 1, + LOADED, + ), + }); } - } - ] as [string, DataJobDetails]; + }); + + dataJobsApiServiceStub.getJobExecutions.and.returnValue( + m.cold("--a", { + a: getExecutionsTuples()[1], + }), + ); + + const expected$ = m.cold("--------a", { + a: ComponentLoaded.of( + createModel() + .clearErrors() + .withTask(TASK_LOAD_JOB_EXECUTIONS) + .withData( + JOB_EXECUTIONS_DATA_KEY, + getExecutionsTuples()[1].content, + ) + .withStatusLoaded() + .getComponentState(), + ), + }); + + // When + const response$ = effects.loadDataJobExecutions$; + + // Then + m.expect(response$).toBeObservable(expected$); + }), + ); + }); + + describe("|updateDataJob$|", () => { + it( + "should verify will update data-job description", + marbles((m) => { + // Given + const genericAction1 = GenericAction.of( + UPDATE_DATA_JOB, + createModel(undefined, 1, LOADING).getComponentState(), + TASK_UPDATE_JOB_DESCRIPTION, + ); + actions$ = m.cold("-a----------", { + a: genericAction1, + }); + + componentServiceStub.getModel.and.callFake(() => + m.cold("---a", { + a: createModel(undefined, 1, LOADING), + }), + ); + + dataJobsApiServiceStub.updateDataJob.and.returnValue( + m.cold("-----a", { + a: getDataJobDetailsTuple()[1], + }), + ); + + const expected$ = m.cold("---------a-", { + a: ComponentLoaded.of( + createModel(undefined, 1, LOADING) + .clearErrors() + .withTask(genericAction1.task) + .withData(JOB_DETAILS_DATA_KEY, undefined) + .withStatusLoaded() + .getComponentState(), + ), + }); + + // When + const response$ = effects.updateDataJob$; + + // Then + m.expect(response$).toBeObservable(expected$); + }), + ); + + it( + "should verify will update data-job status", + marbles((m) => { + // Given + const genericAction1 = GenericAction.of( + UPDATE_DATA_JOB, + createModel(undefined, 1, LOADING).getComponentState(), + TASK_UPDATE_JOB_STATUS, + ); + actions$ = m.cold("-a----------", { + a: genericAction1, + }); + + componentServiceStub.getModel.and.callFake(() => + m.cold("---a", { + a: createModel(undefined, 1, LOADING), + }), + ); + + dataJobsApiServiceStub.updateDataJobStatus.and.returnValue( + m.cold("-----a", { + a: { enabled: true }, + }), + ); + + const expected$ = m.cold("---------a-", { + a: ComponentLoaded.of( + createModel(undefined, 1, LOADING) + .clearErrors() + .withTask(genericAction1.task) + .withData(JOB_STATE_DATA_KEY, undefined) + .withStatusLoaded() + .getComponentState(), + ), + }); + + // When + const response$ = effects.updateDataJob$; + + // Then + m.expect(response$).toBeObservable(expected$); + }), + ); + + it( + "should verify will fail", + marbles((m) => { + // Given + const dateNow = Date.now(); + spyOn(CollectionsUtil, "dateNow").and.returnValue(dateNow); + const error = new Error( + "Unsupported action task for Data Pipelines, update Data Job.", + ); + const errorRecord: ErrorRecord = { + code: generateErrorCode( + DataJobsEffects.CLASS_NAME, + DataJobsEffects.PUBLIC_NAME, + "_updateJob", + "UnsupportedActionTask", + ), + error, + objectUUID: effects.objectUUID, + }; + const genericAction1 = GenericAction.of( + UPDATE_DATA_JOB, + createModel(undefined, 1, LOADING).getComponentState(), + TASK_LOAD_JOB_STATE, + ); + actions$ = m.cold("-a----------", { + a: genericAction1, + }); + + componentServiceStub.getModel.and.callFake(() => + m.cold("---a", { + a: createModel(), + }), + ); + + const expected$ = m.cold("----a-", { + a: ComponentFailed.of( + createModel() + .withTask(genericAction1.task) + .withError(errorRecord) + .withStatusFailed() + .getComponentState(), + ), + }); + + // When + const response$ = effects.updateDataJob$; + + // Then + m.expect(response$).toBeObservable(expected$); + }), + ); + }); + }); +}); + +const createModel = ( + data?: Map, + navigationId = 1, + status: StatusType = LOADING, + requestParams: Array<[string, any]> = [], +) => + ComponentModel.of( + ComponentStateImpl.of({ + id: "testComponent", + status, + data, + requestParams: new Map([ + [TEAM_NAME_REQ_PARAM, "aTeam"], + [JOB_NAME_REQ_PARAM, "aJob"], + [JOB_DEPLOYMENT_ID_REQ_PARAM, "aJobDeploymentId"], + ...requestParams, + ]), + navigationId, + }), + RouterState.of(RouteState.empty(), navigationId), + ); + +const getJobStateTuple = () => + [ + JOB_STATE_DATA_KEY, + { + jobName: "aJob", + deployments: [], + config: { + schedule: { + scheduleCron: "5 5 5 5 *", + }, + description: "aDesc", + team: "aTeam", + logsUrl: "http://url", + sourceUrl: "http://urlsource", + }, + }, + ] as [string, DataJob]; + +const getDataJobDetailsTuple = () => + [ + JOB_DETAILS_DATA_KEY, + { + job_name: "aJob", + team: "aTeam", + description: "aDesc", + config: { + schedule: { + schedule_cron: "5 5 5 5 *", + }, + contacts: { + notified_on_job_success: [], + notified_on_job_failure_user_error: [], + notified_on_job_failure_platform_error: [], + notified_on_job_deploy: [], + }, + }, + }, + ] as [string, DataJobDetails]; const getExecutionsTuples = () => - [ - JOB_EXECUTIONS_DATA_KEY, - { - content: [ - { jobName: 'aJob', logsUrl: 'http://a1', id: 'a1' }, - { jobName: 'aJob', logsUrl: 'http://a2', id: 'a2' }, - { jobName: 'aJob', logsUrl: 'http://a3', id: 'a3' }, - { jobName: 'aJob', logsUrl: 'http://a4', id: 'a4' } - ], - totalPages: 1, - totalItems: 4 - } - ] as [string, DataJobExecutionsPage]; + [ + JOB_EXECUTIONS_DATA_KEY, + { + content: [ + { jobName: "aJob", logsUrl: "http://a1", id: "a1" }, + { jobName: "aJob", logsUrl: "http://a2", id: "a2" }, + { jobName: "aJob", logsUrl: "http://a3", id: "a3" }, + { jobName: "aJob", logsUrl: "http://a4", id: "a4" }, + ], + totalPages: 1, + totalItems: 4, + }, + ] as [string, DataJobExecutionsPage]; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/effects/data-jobs.effects.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/effects/data-jobs.effects.ts index 0798806c06..eafbc94a60 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/effects/data-jobs.effects.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/effects/data-jobs.effects.ts @@ -3,415 +3,504 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Injectable } from '@angular/core'; +import { Injectable } from "@angular/core"; -import { merge, Observable, of, throwError } from 'rxjs'; -import { catchError, map, switchMap, take, tap } from 'rxjs/operators'; +import { merge, Observable, of, throwError } from "rxjs"; +import { catchError, map, switchMap, take, tap } from "rxjs/operators"; -import { Actions, createEffect, ofType } from '@ngrx/effects'; +import { Actions, createEffect, ofType } from "@ngrx/effects"; import { - CollectionsUtil, - ComponentFailed, - ComponentLoaded, - ComponentModel, - ComponentService, - ComponentState, - ComponentUpdate, - extractTaskFromIdentifier, - generateErrorCode, - getModel, - getModelAndTask, - LOADED, - processServiceRequestError, - ServiceHttpErrorCodes, - StatusType, - TaurusBaseEffects -} from '@versatiledatakit/shared'; - -import { ErrorUtil } from '../../shared/utils'; + CollectionsUtil, + ComponentFailed, + ComponentLoaded, + ComponentModel, + ComponentService, + ComponentState, + ComponentUpdate, + extractTaskFromIdentifier, + generateErrorCode, + getModel, + getModelAndTask, + LOADED, + processServiceRequestError, + ServiceHttpErrorCodes, + StatusType, + TaurusBaseEffects, +} from "@versatiledatakit/shared"; + +import { ErrorUtil } from "../../shared/utils"; import { - DataJob, - DataJobDetails, - DataJobExecutionFilter, - DataJobExecutionOrder, - DataJobPage, - FILTER_REQ_PARAM, - JOB_DEPLOYMENT_ID_REQ_PARAM, - JOB_DETAILS_DATA_KEY, - JOB_DETAILS_REQ_PARAM, - JOB_EXECUTIONS_DATA_KEY, - JOB_NAME_REQ_PARAM, - JOB_STATE_DATA_KEY, - JOB_STATE_REQ_PARAM, - JOB_STATUS_REQ_PARAM, - JOBS_DATA_KEY, - ORDER_REQ_PARAM, - TEAM_NAME_REQ_PARAM -} from '../../model'; + DataJob, + DataJobDetails, + DataJobExecutionFilter, + DataJobExecutionOrder, + DataJobPage, + FILTER_REQ_PARAM, + JOB_DEPLOYMENT_ID_REQ_PARAM, + JOB_DETAILS_DATA_KEY, + JOB_DETAILS_REQ_PARAM, + JOB_EXECUTIONS_DATA_KEY, + JOB_NAME_REQ_PARAM, + JOB_STATE_DATA_KEY, + JOB_STATE_REQ_PARAM, + JOB_STATUS_REQ_PARAM, + JOBS_DATA_KEY, + ORDER_REQ_PARAM, + TEAM_NAME_REQ_PARAM, +} from "../../model"; import { - DataJobLoadTasks, - DataJobsLoadTasks, - DataJobUpdateTasks, - TASK_LOAD_JOB_DETAILS, - TASK_LOAD_JOB_EXECUTIONS, - TASK_LOAD_JOB_STATE, - TASK_LOAD_JOBS_STATE, - TASK_UPDATE_JOB_DESCRIPTION, - TASK_UPDATE_JOB_STATUS -} from '../tasks'; + DataJobLoadTasks, + DataJobsLoadTasks, + DataJobUpdateTasks, + TASK_LOAD_JOB_DETAILS, + TASK_LOAD_JOB_EXECUTIONS, + TASK_LOAD_JOB_STATE, + TASK_LOAD_JOBS_STATE, + TASK_UPDATE_JOB_DESCRIPTION, + TASK_UPDATE_JOB_STATUS, +} from "../tasks"; -import { LOAD_JOB_ERROR_CODES, LOAD_JOBS_ERROR_CODES, UPDATE_JOB_DETAILS_ERROR_CODES } from '../error-codes'; +import { + LOAD_JOB_ERROR_CODES, + LOAD_JOBS_ERROR_CODES, + UPDATE_JOB_DETAILS_ERROR_CODES, +} from "../error-codes"; -import { FETCH_DATA_JOB, FETCH_DATA_JOB_EXECUTIONS, FETCH_DATA_JOBS, UPDATE_DATA_JOB } from '../actions'; +import { + FETCH_DATA_JOB, + FETCH_DATA_JOB_EXECUTIONS, + FETCH_DATA_JOBS, + UPDATE_DATA_JOB, +} from "../actions"; -import { DataJobsApiService } from '../../services'; +import { DataJobsApiService } from "../../services"; /** * ** Effect for DataJobs. */ @Injectable() export class DataJobsEffects extends TaurusBaseEffects { - /** - * @inheritDoc - */ - static override readonly CLASS_NAME = 'DataJobsEffects'; - - /** - * @inheritDoc - */ - static override readonly PUBLIC_NAME = 'Data-Jobs-Effects'; - - /** - * ** Load DataJobs data. - */ - loadDataJobs$ = createEffect(() => - this.actions$.pipe( - ofType(FETCH_DATA_JOBS), - getModel(this.componentService), - switchMap((model: ComponentModel) => this._loadDataJobs(model)) - ) - ); - - loadDataJob$ = createEffect(() => - this.actions$.pipe( - ofType(FETCH_DATA_JOB), - getModel(this.componentService), - switchMap((model) => - merge( - this._executeJobTask(model, TASK_LOAD_JOB_STATE), - this._executeJobTask(model, TASK_LOAD_JOB_DETAILS), - this._executeJobTask(model, TASK_LOAD_JOB_EXECUTIONS) + /** + * @inheritDoc + */ + static override readonly CLASS_NAME = "DataJobsEffects"; + + /** + * @inheritDoc + */ + static override readonly PUBLIC_NAME = "Data-Jobs-Effects"; + + /** + * ** Load DataJobs data. + */ + loadDataJobs$ = createEffect(() => + this.actions$.pipe( + ofType(FETCH_DATA_JOBS), + getModel(this.componentService), + switchMap((model: ComponentModel) => this._loadDataJobs(model)), + ), + ); + + loadDataJob$ = createEffect(() => + this.actions$.pipe( + ofType(FETCH_DATA_JOB), + getModel(this.componentService), + switchMap((model) => + merge( + this._executeJobTask(model, TASK_LOAD_JOB_STATE), + this._executeJobTask(model, TASK_LOAD_JOB_DETAILS), + this._executeJobTask(model, TASK_LOAD_JOB_EXECUTIONS), + ), + ), + ), + ); + + loadDataJobExecutions$ = createEffect(() => + this.actions$.pipe( + ofType(FETCH_DATA_JOB_EXECUTIONS), + getModel(this.componentService), + switchMap((model) => + this._executeJobTask(model, TASK_LOAD_JOB_EXECUTIONS), + ), + ), + ); + + updateDataJob$ = createEffect(() => + this.actions$.pipe( + ofType(UPDATE_DATA_JOB), + getModelAndTask(this.componentService), + switchMap(([model, task]) => this._updateJob(model, task)), // eslint-disable-line rxjs/no-unsafe-switchmap + ), + ); + + /** + * ** Constructor. + */ + constructor( + actions$: Actions, + componentService: ComponentService, + private readonly dataJobsApiService: DataJobsApiService, + ) { + super(actions$, componentService, DataJobsEffects.CLASS_NAME); + + this.registerEffectsErrorCodes(); + } + + /** + * @inheritDoc + * @protected + */ + protected registerEffectsErrorCodes(): void { + LOAD_JOB_ERROR_CODES[TASK_LOAD_JOB_STATE] = + this.dataJobsApiService.errorCodes.getJob; + LOAD_JOB_ERROR_CODES[TASK_LOAD_JOB_DETAILS] = + this.dataJobsApiService.errorCodes.getJobDetails; + LOAD_JOB_ERROR_CODES[TASK_LOAD_JOB_EXECUTIONS] = + this.dataJobsApiService.errorCodes.getJobExecutions; + + LOAD_JOBS_ERROR_CODES[TASK_LOAD_JOBS_STATE] = + this.dataJobsApiService.errorCodes.getJobs; + + UPDATE_JOB_DETAILS_ERROR_CODES[TASK_UPDATE_JOB_STATUS] = + this.dataJobsApiService.errorCodes.updateDataJobStatus; + UPDATE_JOB_DETAILS_ERROR_CODES[TASK_UPDATE_JOB_DESCRIPTION] = + this.dataJobsApiService.errorCodes.updateDataJob; + } + + private _loadDataJobs( + componentModel: ComponentModel, + ): Observable { + const componentState = componentModel.getComponentState(); + const task: DataJobsLoadTasks = TASK_LOAD_JOBS_STATE; + + return of(componentModel).pipe( + switchMap((model) => + this.dataJobsApiService + .getJobs( + componentState.filter.criteria, + componentState.search, + componentState.page.page, + componentState.page.size, + ) + .pipe( + map((response) => + model + .clearTask() + .removeErrorCodePatterns( + LOAD_JOBS_ERROR_CODES[TASK_LOAD_JOBS_STATE].All, ) - ) - ) - ); - - loadDataJobExecutions$ = createEffect(() => - this.actions$.pipe( - ofType(FETCH_DATA_JOB_EXECUTIONS), - getModel(this.componentService), - switchMap((model) => this._executeJobTask(model, TASK_LOAD_JOB_EXECUTIONS)) - ) - ); - - updateDataJob$ = createEffect(() => - this.actions$.pipe( - ofType(UPDATE_DATA_JOB), - getModelAndTask(this.componentService), - switchMap(([model, task]) => this._updateJob(model, task)) // eslint-disable-line rxjs/no-unsafe-switchmap - ) - ); - - /** - * ** Constructor. - */ - constructor( - actions$: Actions, - componentService: ComponentService, - private readonly dataJobsApiService: DataJobsApiService - ) { - super(actions$, componentService, DataJobsEffects.CLASS_NAME); - - this.registerEffectsErrorCodes(); - } - - /** - * @inheritDoc - * @protected - */ - protected registerEffectsErrorCodes(): void { - LOAD_JOB_ERROR_CODES[TASK_LOAD_JOB_STATE] = this.dataJobsApiService.errorCodes.getJob; - LOAD_JOB_ERROR_CODES[TASK_LOAD_JOB_DETAILS] = this.dataJobsApiService.errorCodes.getJobDetails; - LOAD_JOB_ERROR_CODES[TASK_LOAD_JOB_EXECUTIONS] = this.dataJobsApiService.errorCodes.getJobExecutions; - - LOAD_JOBS_ERROR_CODES[TASK_LOAD_JOBS_STATE] = this.dataJobsApiService.errorCodes.getJobs; - - UPDATE_JOB_DETAILS_ERROR_CODES[TASK_UPDATE_JOB_STATUS] = this.dataJobsApiService.errorCodes.updateDataJobStatus; - UPDATE_JOB_DETAILS_ERROR_CODES[TASK_UPDATE_JOB_DESCRIPTION] = this.dataJobsApiService.errorCodes.updateDataJob; - } - - private _loadDataJobs(componentModel: ComponentModel): Observable { - const componentState = componentModel.getComponentState(); - const task: DataJobsLoadTasks = TASK_LOAD_JOBS_STATE; - - return of(componentModel).pipe( - switchMap((model) => - this.dataJobsApiService - .getJobs(componentState.filter.criteria, componentState.search, componentState.page.page, componentState.page.size) - .pipe( - map((response) => - model - .clearTask() - .removeErrorCodePatterns(LOAD_JOBS_ERROR_CODES[TASK_LOAD_JOBS_STATE].All) - .withData(JOBS_DATA_KEY, response.data) - .withTask(task) - .withStatusLoaded() - .getComponentState() - ), - map((state) => ComponentLoaded.of(state)), - catchError>((error: unknown) => - this._getLatestModel(model).pipe( - map((newModel) => - ComponentFailed.of( - newModel - .withData(JOBS_DATA_KEY, { - content: [], - totalItems: 0, - totalPages: 0 - } as DataJobPage) - .withError( - processServiceRequestError( - this.objectUUID, - LOAD_JOBS_ERROR_CODES[TASK_LOAD_JOBS_STATE], - ErrorUtil.extractError(error as Error) - ) - ) - .withTask(task) - .withStatusFailed() - .getComponentState() - ) - ) - ) + .withData(JOBS_DATA_KEY, response.data) + .withTask(task) + .withStatusLoaded() + .getComponentState(), + ), + map((state) => + ComponentLoaded.of(state), + ), + catchError>( + (error: unknown) => + this._getLatestModel(model).pipe( + map((newModel) => + ComponentFailed.of( + newModel + .withData(JOBS_DATA_KEY, { + content: [], + totalItems: 0, + totalPages: 0, + } as DataJobPage) + .withError( + processServiceRequestError( + this.objectUUID, + LOAD_JOBS_ERROR_CODES[TASK_LOAD_JOBS_STATE], + ErrorUtil.extractError(error as Error), + ), ) - ) - ) + .withTask(task) + .withStatusFailed() + .getComponentState(), + ), + ), + ), + ), + ), + ), + ); + } + + private _executeJobTask( + model: ComponentModel, + task: DataJobLoadTasks, + ): Observable { + switch (task) { + case TASK_LOAD_JOB_STATE: + return this._fetchJobData( + // eslint-disable-next-line @typescript-eslint/no-unsafe-argument + this.dataJobsApiService.getJob.bind(this.dataJobsApiService), + LOAD_JOB_ERROR_CODES[TASK_LOAD_JOB_STATE], + model, + TASK_LOAD_JOB_STATE, + JOB_STATE_DATA_KEY, ); - } - - private _executeJobTask(model: ComponentModel, task: DataJobLoadTasks): Observable { - switch (task) { - case TASK_LOAD_JOB_STATE: - return this._fetchJobData( - // eslint-disable-next-line @typescript-eslint/no-unsafe-argument - this.dataJobsApiService.getJob.bind(this.dataJobsApiService), - LOAD_JOB_ERROR_CODES[TASK_LOAD_JOB_STATE], - model, - TASK_LOAD_JOB_STATE, - JOB_STATE_DATA_KEY - ); - case TASK_LOAD_JOB_DETAILS: - return this._fetchJobData( - // eslint-disable-next-line @typescript-eslint/no-unsafe-argument - this.dataJobsApiService.getJobDetails.bind(this.dataJobsApiService), - LOAD_JOB_ERROR_CODES[TASK_LOAD_JOB_DETAILS], - model, - TASK_LOAD_JOB_DETAILS, - JOB_DETAILS_DATA_KEY - ); - case TASK_LOAD_JOB_EXECUTIONS: - return this._loadDataJobExecutionsGraphQL(model); - default: - return throwError(() => new Error('Unknown action task for Data Pipelines.')).pipe(this._handleError(model, null, task)); - } - } - - private _fetchJobData( - executor: (param1: string, param2: string) => Observable, - executorErrorCodes: Readonly>, - componentModel: ComponentModel, - task: DataJobLoadTasks | string, - dataKey: string - ): Observable { - return of(componentModel).pipe( - switchMap((model) => - executor( - componentModel.getComponentState().requestParams.get(TEAM_NAME_REQ_PARAM) as string, - componentModel.getComponentState().requestParams.get(JOB_NAME_REQ_PARAM) as string - ).pipe( - switchMap((data) => { - let obsoleteStatus: StatusType; - - return this._getLatestModel(model).pipe( - tap((newModel) => (obsoleteStatus = newModel.status)), - map((newModel) => - newModel - .removeErrorCodePatterns(executorErrorCodes.All) - .withTask(task) - .withData(dataKey, data) - .withStatusLoaded() - .getComponentState() - ), - map((state) => (obsoleteStatus === LOADED ? ComponentUpdate.of(state) : ComponentLoaded.of(state))) - ); - }), - this._handleError(model, executorErrorCodes, task) - ) - ) + case TASK_LOAD_JOB_DETAILS: + return this._fetchJobData( + // eslint-disable-next-line @typescript-eslint/no-unsafe-argument + this.dataJobsApiService.getJobDetails.bind(this.dataJobsApiService), + LOAD_JOB_ERROR_CODES[TASK_LOAD_JOB_DETAILS], + model, + TASK_LOAD_JOB_DETAILS, + JOB_DETAILS_DATA_KEY, ); + case TASK_LOAD_JOB_EXECUTIONS: + return this._loadDataJobExecutionsGraphQL(model); + default: + return throwError( + () => new Error("Unknown action task for Data Pipelines."), + ).pipe(this._handleError(model, null, task)); } - - private _updateJob(model: ComponentModel, taskIdentifier: string): Observable { - const task = extractTaskFromIdentifier(taskIdentifier); - const requestParams = model.getComponentState().requestParams; - - if (task === TASK_UPDATE_JOB_DESCRIPTION) { - const jobDetails: DataJobDetails = requestParams.get(JOB_DETAILS_REQ_PARAM); - - return this.dataJobsApiService - .updateDataJob( - requestParams.get(TEAM_NAME_REQ_PARAM) as string, - requestParams.get(JOB_NAME_REQ_PARAM) as string, - jobDetails - ) - .pipe( - map(() => - ComponentLoaded.of( - model - .removeErrorCodePatterns(UPDATE_JOB_DETAILS_ERROR_CODES[TASK_UPDATE_JOB_DESCRIPTION].All) - .withTask(taskIdentifier) - .withData(JOB_DETAILS_DATA_KEY, jobDetails) - .withStatusLoaded() - .getComponentState() - ) - ), - this._handleError(model, UPDATE_JOB_DETAILS_ERROR_CODES[TASK_UPDATE_JOB_DESCRIPTION], taskIdentifier) - ); - } - - if (task === TASK_UPDATE_JOB_STATUS) { - const jobState: DataJob = model.getComponentState().requestParams.get(JOB_STATE_REQ_PARAM); - - return this.dataJobsApiService - .updateDataJobStatus( - requestParams.get(TEAM_NAME_REQ_PARAM) as string, - requestParams.get(JOB_NAME_REQ_PARAM) as string, - requestParams.get(JOB_DEPLOYMENT_ID_REQ_PARAM) as string, - requestParams.get(JOB_STATUS_REQ_PARAM) as boolean + } + + private _fetchJobData( + executor: (param1: string, param2: string) => Observable, + executorErrorCodes: Readonly>, + componentModel: ComponentModel, + task: DataJobLoadTasks | string, + dataKey: string, + ): Observable { + return of(componentModel).pipe( + switchMap((model) => + executor( + componentModel + .getComponentState() + .requestParams.get(TEAM_NAME_REQ_PARAM) as string, + componentModel + .getComponentState() + .requestParams.get(JOB_NAME_REQ_PARAM) as string, + ).pipe( + switchMap((data) => { + let obsoleteStatus: StatusType; + + return this._getLatestModel(model).pipe( + tap((newModel) => (obsoleteStatus = newModel.status)), + map((newModel) => + newModel + .removeErrorCodePatterns(executorErrorCodes.All) + .withTask(task) + .withData(dataKey, data) + .withStatusLoaded() + .getComponentState(), + ), + map((state) => + obsoleteStatus === LOADED + ? ComponentUpdate.of(state) + : ComponentLoaded.of(state), + ), + ); + }), + this._handleError(model, executorErrorCodes, task), + ), + ), + ); + } + + private _updateJob( + model: ComponentModel, + taskIdentifier: string, + ): Observable { + const task = extractTaskFromIdentifier(taskIdentifier); + const requestParams = model.getComponentState().requestParams; + + if (task === TASK_UPDATE_JOB_DESCRIPTION) { + const jobDetails: DataJobDetails = requestParams.get( + JOB_DETAILS_REQ_PARAM, + ); + + return this.dataJobsApiService + .updateDataJob( + requestParams.get(TEAM_NAME_REQ_PARAM) as string, + requestParams.get(JOB_NAME_REQ_PARAM) as string, + jobDetails, + ) + .pipe( + map(() => + ComponentLoaded.of( + model + .removeErrorCodePatterns( + UPDATE_JOB_DETAILS_ERROR_CODES[TASK_UPDATE_JOB_DESCRIPTION] + .All, ) - .pipe( - map(() => - ComponentLoaded.of( - model - .removeErrorCodePatterns(UPDATE_JOB_DETAILS_ERROR_CODES[TASK_UPDATE_JOB_STATUS].All) - .withTask(taskIdentifier) - .withData(JOB_STATE_DATA_KEY, jobState) - .withStatusLoaded() - .getComponentState() - ) - ), - this._handleError(model, UPDATE_JOB_DETAILS_ERROR_CODES[TASK_UPDATE_JOB_STATUS], taskIdentifier) - ); - } - - const error = new Error('Unsupported action task for Data Pipelines, update Data Job.'); - - console.error(error); - - return of( - ComponentFailed.of( - model - .withTask(taskIdentifier) - .withError({ - objectUUID: this.objectUUID, - code: generateErrorCode( - DataJobsEffects.CLASS_NAME, - DataJobsEffects.PUBLIC_NAME, - '_updateJob', - 'UnsupportedActionTask' - ), - error - }) - .withStatusFailed() - .getComponentState() - ) + .withTask(taskIdentifier) + .withData(JOB_DETAILS_DATA_KEY, jobDetails) + .withStatusLoaded() + .getComponentState(), + ), + ), + this._handleError( + model, + UPDATE_JOB_DETAILS_ERROR_CODES[TASK_UPDATE_JOB_DESCRIPTION], + taskIdentifier, + ), ); } - private _loadDataJobExecutionsGraphQL(componentModel: ComponentModel): Observable { - const componentState = componentModel.getComponentState(); - const requestParams = componentState.requestParams; - - return of(componentModel).pipe( - switchMap((model) => - this.dataJobsApiService - .getJobExecutions( - requestParams.get(TEAM_NAME_REQ_PARAM) as string, - requestParams.get(JOB_NAME_REQ_PARAM) as string, - true, - requestParams.get(FILTER_REQ_PARAM) as DataJobExecutionFilter, - requestParams.get(ORDER_REQ_PARAM) as DataJobExecutionOrder - ) - .pipe( - switchMap((response) => { - let obsoleteStatus: StatusType; - - return this._getLatestModel(model).pipe( - tap((newModel) => (obsoleteStatus = newModel.status)), - map((newModel) => - newModel - .removeErrorCodePatterns(LOAD_JOB_ERROR_CODES[TASK_LOAD_JOB_EXECUTIONS].All) - .withTask(TASK_LOAD_JOB_EXECUTIONS) - .withData(JOB_EXECUTIONS_DATA_KEY, response.content) - .withStatusLoaded() - .getComponentState() - ), - map((state) => (obsoleteStatus === LOADED ? ComponentUpdate.of(state) : ComponentLoaded.of(state))) - ); - }), - this._handleError(model, LOAD_JOB_ERROR_CODES[TASK_LOAD_JOB_EXECUTIONS], TASK_LOAD_JOB_EXECUTIONS) - ) - ) + if (task === TASK_UPDATE_JOB_STATUS) { + const jobState: DataJob = model + .getComponentState() + .requestParams.get(JOB_STATE_REQ_PARAM); + + return this.dataJobsApiService + .updateDataJobStatus( + requestParams.get(TEAM_NAME_REQ_PARAM) as string, + requestParams.get(JOB_NAME_REQ_PARAM) as string, + requestParams.get(JOB_DEPLOYMENT_ID_REQ_PARAM) as string, + requestParams.get(JOB_STATUS_REQ_PARAM) as boolean, + ) + .pipe( + map(() => + ComponentLoaded.of( + model + .removeErrorCodePatterns( + UPDATE_JOB_DETAILS_ERROR_CODES[TASK_UPDATE_JOB_STATUS].All, + ) + .withTask(taskIdentifier) + .withData(JOB_STATE_DATA_KEY, jobState) + .withStatusLoaded() + .getComponentState(), + ), + ), + this._handleError( + model, + UPDATE_JOB_DETAILS_ERROR_CODES[TASK_UPDATE_JOB_STATUS], + taskIdentifier, + ), ); } - private _getLatestModel(componentModel: ComponentModel): Observable { - const componentState = componentModel.getComponentState(); - - return this.componentService.getModel(componentState.id, componentState.routePathSegments, ['*']).pipe(take(1)); - } + const error = new Error( + "Unsupported action task for Data Pipelines, update Data Job.", + ); - private _handleError( - obsoleteModel: ComponentModel, - executorErrorCodes: Readonly>, - task: DataJobLoadTasks | string - ) { - return catchError>((error: unknown) => { - return this._getLatestModel(obsoleteModel).pipe( + console.error(error); + + return of( + ComponentFailed.of( + model + .withTask(taskIdentifier) + .withError({ + objectUUID: this.objectUUID, + code: generateErrorCode( + DataJobsEffects.CLASS_NAME, + DataJobsEffects.PUBLIC_NAME, + "_updateJob", + "UnsupportedActionTask", + ), + error, + }) + .withStatusFailed() + .getComponentState(), + ), + ); + } + + private _loadDataJobExecutionsGraphQL( + componentModel: ComponentModel, + ): Observable { + const componentState = componentModel.getComponentState(); + const requestParams = componentState.requestParams; + + return of(componentModel).pipe( + switchMap((model) => + this.dataJobsApiService + .getJobExecutions( + requestParams.get(TEAM_NAME_REQ_PARAM) as string, + requestParams.get(JOB_NAME_REQ_PARAM) as string, + true, + requestParams.get(FILTER_REQ_PARAM) as DataJobExecutionFilter, + requestParams.get(ORDER_REQ_PARAM) as DataJobExecutionOrder, + ) + .pipe( + switchMap((response) => { + let obsoleteStatus: StatusType; + + return this._getLatestModel(model).pipe( + tap((newModel) => (obsoleteStatus = newModel.status)), map((newModel) => - newModel - .withTask(task) - .withError( - CollectionsUtil.isLiteralObject(executorErrorCodes) - ? processServiceRequestError(this.objectUUID, executorErrorCodes, ErrorUtil.extractError(error as Error)) - : { - objectUUID: this.objectUUID, - code: generateErrorCode( - DataJobsEffects.CLASS_NAME, - DataJobsEffects.PUBLIC_NAME, - '_handleError', - 'GenericError' - ), - error: error as Error - } - ) - .withStatusFailed() - .getComponentState() + newModel + .removeErrorCodePatterns( + LOAD_JOB_ERROR_CODES[TASK_LOAD_JOB_EXECUTIONS].All, + ) + .withTask(TASK_LOAD_JOB_EXECUTIONS) + .withData(JOB_EXECUTIONS_DATA_KEY, response.content) + .withStatusLoaded() + .getComponentState(), ), - map((state) => ComponentFailed.of(state)) - ); - }); - } + map((state) => + obsoleteStatus === LOADED + ? ComponentUpdate.of(state) + : ComponentLoaded.of(state), + ), + ); + }), + this._handleError( + model, + LOAD_JOB_ERROR_CODES[TASK_LOAD_JOB_EXECUTIONS], + TASK_LOAD_JOB_EXECUTIONS, + ), + ), + ), + ); + } + + private _getLatestModel( + componentModel: ComponentModel, + ): Observable { + const componentState = componentModel.getComponentState(); + + return this.componentService + .getModel(componentState.id, componentState.routePathSegments, ["*"]) + .pipe(take(1)); + } + + private _handleError( + obsoleteModel: ComponentModel, + executorErrorCodes: Readonly>, + task: DataJobLoadTasks | string, + ) { + return catchError< + ComponentLoaded | ComponentUpdate, + Observable + >((error: unknown) => { + return this._getLatestModel(obsoleteModel).pipe( + map((newModel) => + newModel + .withTask(task) + .withError( + CollectionsUtil.isLiteralObject(executorErrorCodes) + ? processServiceRequestError( + this.objectUUID, + executorErrorCodes, + ErrorUtil.extractError(error as Error), + ) + : { + objectUUID: this.objectUUID, + code: generateErrorCode( + DataJobsEffects.CLASS_NAME, + DataJobsEffects.PUBLIC_NAME, + "_handleError", + "GenericError", + ), + error: error as Error, + }, + ) + .withStatusFailed() + .getComponentState(), + ), + map((state) => + ComponentFailed.of(state), + ), + ); + }); + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/effects/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/effects/index.ts index b30e8ce31a..d9fe8a23ee 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/effects/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/effects/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-jobs.effects'; +export * from "./data-jobs.effects"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/error-codes/data-job.error-codes.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/error-codes/data-job.error-codes.ts index 58083a392d..b5f7be4cfa 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/error-codes/data-job.error-codes.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/error-codes/data-job.error-codes.ts @@ -3,41 +3,49 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ServiceHttpErrorCodes } from '@versatiledatakit/shared'; +import { ServiceHttpErrorCodes } from "@versatiledatakit/shared"; import { - TASK_LOAD_JOB_DETAILS, - TASK_LOAD_JOB_EXECUTIONS, - TASK_LOAD_JOB_STATE, - TASK_LOAD_JOBS_STATE, - TASK_UPDATE_JOB_DESCRIPTION, - TASK_UPDATE_JOB_STATUS -} from '../tasks'; + TASK_LOAD_JOB_DETAILS, + TASK_LOAD_JOB_EXECUTIONS, + TASK_LOAD_JOB_STATE, + TASK_LOAD_JOBS_STATE, + TASK_UPDATE_JOB_DESCRIPTION, + TASK_UPDATE_JOB_STATUS, +} from "../tasks"; // load tasks error codes export const LOAD_JOB_ERROR_CODES: { - [TASK_LOAD_JOB_STATE]: Readonly>; - [TASK_LOAD_JOB_DETAILS]: Readonly>; - [TASK_LOAD_JOB_EXECUTIONS]: Readonly>; + [TASK_LOAD_JOB_STATE]: Readonly>; + [TASK_LOAD_JOB_DETAILS]: Readonly< + Record + >; + [TASK_LOAD_JOB_EXECUTIONS]: Readonly< + Record + >; } = { - [TASK_LOAD_JOB_STATE]: null, - [TASK_LOAD_JOB_DETAILS]: null, - [TASK_LOAD_JOB_EXECUTIONS]: null + [TASK_LOAD_JOB_STATE]: null, + [TASK_LOAD_JOB_DETAILS]: null, + [TASK_LOAD_JOB_EXECUTIONS]: null, }; export const LOAD_JOBS_ERROR_CODES: { - [TASK_LOAD_JOBS_STATE]: Readonly>; + [TASK_LOAD_JOBS_STATE]: Readonly>; } = { - [TASK_LOAD_JOBS_STATE]: null + [TASK_LOAD_JOBS_STATE]: null, }; // update tasks error codes export const UPDATE_JOB_DETAILS_ERROR_CODES: { - [TASK_UPDATE_JOB_STATUS]: Readonly>; - [TASK_UPDATE_JOB_DESCRIPTION]: Readonly>; + [TASK_UPDATE_JOB_STATUS]: Readonly< + Record + >; + [TASK_UPDATE_JOB_DESCRIPTION]: Readonly< + Record + >; } = { - [TASK_UPDATE_JOB_STATUS]: null, - [TASK_UPDATE_JOB_DESCRIPTION]: null + [TASK_UPDATE_JOB_STATUS]: null, + [TASK_UPDATE_JOB_DESCRIPTION]: null, }; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/error-codes/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/error-codes/index.ts index 787a602fdd..feac5e6d5d 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/error-codes/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/error-codes/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-job.error-codes'; +export * from "./data-job.error-codes"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/tasks/data-job.tasks.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/tasks/data-job.tasks.ts index d85fa0db50..31090c9b3c 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/tasks/data-job.tasks.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/tasks/data-job.tasks.ts @@ -5,22 +5,27 @@ // load tasks -export const TASK_LOAD_JOB_STATE = 'load_job_state'; +export const TASK_LOAD_JOB_STATE = "load_job_state"; -export const TASK_LOAD_JOB_DETAILS = 'load_job_details'; +export const TASK_LOAD_JOB_DETAILS = "load_job_details"; -export const TASK_LOAD_JOB_EXECUTIONS = 'load_job_executions'; +export const TASK_LOAD_JOB_EXECUTIONS = "load_job_executions"; -export type DataJobLoadTasks = typeof TASK_LOAD_JOB_STATE | typeof TASK_LOAD_JOB_DETAILS | typeof TASK_LOAD_JOB_EXECUTIONS; +export type DataJobLoadTasks = + | typeof TASK_LOAD_JOB_STATE + | typeof TASK_LOAD_JOB_DETAILS + | typeof TASK_LOAD_JOB_EXECUTIONS; -export const TASK_LOAD_JOBS_STATE = 'load_jobs_state'; +export const TASK_LOAD_JOBS_STATE = "load_jobs_state"; export type DataJobsLoadTasks = typeof TASK_LOAD_JOBS_STATE; // update tasks -export const TASK_UPDATE_JOB_DESCRIPTION = 'update_job_description'; +export const TASK_UPDATE_JOB_DESCRIPTION = "update_job_description"; -export const TASK_UPDATE_JOB_STATUS = 'update_job_status'; +export const TASK_UPDATE_JOB_STATUS = "update_job_status"; -export type DataJobUpdateTasks = typeof TASK_UPDATE_JOB_DESCRIPTION | typeof TASK_UPDATE_JOB_STATUS; +export type DataJobUpdateTasks = + | typeof TASK_UPDATE_JOB_DESCRIPTION + | typeof TASK_UPDATE_JOB_STATUS; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/tasks/index.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/tasks/index.ts index abb5fe9ab2..caf6989587 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/tasks/index.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/state/tasks/index.ts @@ -3,4 +3,4 @@ * SPDX-License-Identifier: Apache-2.0 */ -export * from './data-job.tasks'; +export * from "./data-job.tasks"; diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/vdk-data-pipelines.module.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/vdk-data-pipelines.module.ts index 2a56c26735..f507052d71 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/vdk-data-pipelines.module.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/lib/vdk-data-pipelines.module.ts @@ -3,176 +3,188 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { ModuleWithProviders, NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { RouterModule, Routes } from '@angular/router'; -import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { ModuleWithProviders, NgModule } from "@angular/core"; +import { CommonModule } from "@angular/common"; +import { RouterModule, Routes } from "@angular/router"; +import { FormsModule, ReactiveFormsModule } from "@angular/forms"; -import { TruncateModule } from '@yellowspot/ng-truncate'; +import { TruncateModule } from "@yellowspot/ng-truncate"; -import { NgxChartsModule } from '@swimlane/ngx-charts'; +import { NgxChartsModule } from "@swimlane/ngx-charts"; -import { TimeagoModule } from 'ngx-timeago'; -import { LottieModule } from 'ngx-lottie'; +import { TimeagoModule } from "ngx-timeago"; +import { LottieModule } from "ngx-lottie"; -import { DpDatePickerModule } from 'ng2-date-picker'; +import { DpDatePickerModule } from "ng2-date-picker"; -import { ClarityModule } from '@clr/angular'; +import { ClarityModule } from "@clr/angular"; -import { VdkSharedComponentsModule, VdkSharedFeaturesModule, VdkSharedNgRxModule } from '@versatiledatakit/shared'; +import { + VdkSharedComponentsModule, + VdkSharedFeaturesModule, + VdkSharedNgRxModule, +} from "@versatiledatakit/shared"; -import { AttributesDirective } from './shared/directives'; +import { AttributesDirective } from "./shared/directives"; import { - ContactsPresentPipe, - ExecutionSuccessRatePipe, - ExtractContactsPipe, - ExtractJobStatusPipe, - FormatDeltaPipe, - FormatSchedulePipe, - ParseEpochPipe, - ParseNextRunPipe -} from './shared/pipes'; + ContactsPresentPipe, + ExecutionSuccessRatePipe, + ExtractContactsPipe, + ExtractJobStatusPipe, + FormatDeltaPipe, + FormatSchedulePipe, + ParseEpochPipe, + ParseNextRunPipe, +} from "./shared/pipes"; import { - ColumnFilterComponent, - ConfirmationDialogModalComponent, - DeleteModalComponent, - EmptyStateComponent, - ExecutionsTimelineComponent, - GridActionComponent, - QuickFiltersComponent, - StatusCellComponent, - StatusPanelComponent, - WidgetValueComponent -} from './shared/components'; + ColumnFilterComponent, + ConfirmationDialogModalComponent, + DeleteModalComponent, + EmptyStateComponent, + ExecutionsTimelineComponent, + GridActionComponent, + QuickFiltersComponent, + StatusCellComponent, + StatusPanelComponent, + WidgetValueComponent, +} from "./shared/components"; -import { DataJobsApiService, DataJobsBaseApiService, DataJobsPublicApiService, DataJobsService, DataJobsServiceImpl } from './services'; +import { + DataJobsApiService, + DataJobsBaseApiService, + DataJobsPublicApiService, + DataJobsService, + DataJobsServiceImpl, +} from "./services"; -import { DATA_PIPELINES_CONFIGS, DataPipelinesConfig } from './model'; +import { DATA_PIPELINES_CONFIGS, DataPipelinesConfig } from "./model"; -import { DataJobsEffects } from './state/effects'; +import { DataJobsEffects } from "./state/effects"; -import { FormatDurationPipe } from './shared/pipes/format-duration.pipe'; +import { FormatDurationPipe } from "./shared/pipes/format-duration.pipe"; -import { DataJobsExplorePageComponent } from './components/data-jobs-explore'; -import { DataJobsExploreGridComponent } from './components/data-jobs-explore/components/grid'; +import { DataJobsExplorePageComponent } from "./components/data-jobs-explore"; +import { DataJobsExploreGridComponent } from "./components/data-jobs-explore/components/grid"; -import { DataJobsManagePageComponent } from './components/data-jobs-manage'; -import { DataJobsManageGridComponent } from './components/data-jobs-manage/components/grid'; +import { DataJobsManagePageComponent } from "./components/data-jobs-manage"; +import { DataJobsManageGridComponent } from "./components/data-jobs-manage/components/grid"; -import { DataJobPageComponent } from './components/data-job'; -import { DataJobDetailsPageComponent } from './components/data-job/pages/details'; +import { DataJobPageComponent } from "./components/data-job"; +import { DataJobDetailsPageComponent } from "./components/data-job/pages/details"; import { - DataJobDeploymentDetailsModalComponent, - DataJobExecutionsGridComponent, + DataJobDeploymentDetailsModalComponent, + DataJobExecutionsGridComponent, + DataJobExecutionsPageComponent, + DataJobExecutionStatusComponent, + DataJobExecutionStatusFilterComponent, + DataJobExecutionTypeComponent, + DataJobExecutionTypeFilterComponent, + ExecutionDurationChartComponent, + ExecutionStatusChartComponent, + TimePeriodFilterComponent, +} from "./components/data-job/pages/executions"; + +import { + DataJobsExecutionsWidgetComponent, + DataJobsFailedWidgetComponent, + DataJobsHealthPanelComponent, + DataJobsWidgetOneComponent, + WidgetExecutionStatusGaugeComponent, +} from "./components/widgets"; + +const routes: Routes = []; + +@NgModule({ + imports: [ + CommonModule, + RouterModule.forChild(routes), + FormsModule, + ReactiveFormsModule, + LottieModule, + TruncateModule, + TimeagoModule.forRoot(), + ClarityModule, + DpDatePickerModule, + NgxChartsModule, + VdkSharedComponentsModule.forChild(), + VdkSharedFeaturesModule.forChild(), + VdkSharedNgRxModule.forFeatureEffects([DataJobsEffects]), + ], + declarations: [ + AttributesDirective, + FormatDeltaPipe, + FormatSchedulePipe, + ParseNextRunPipe, + ContactsPresentPipe, + ExecutionSuccessRatePipe, + ExtractJobStatusPipe, + ExtractContactsPipe, + ParseEpochPipe, + DataJobsExplorePageComponent, + DataJobsExploreGridComponent, + DataJobsManagePageComponent, + DataJobsManageGridComponent, + DataJobPageComponent, + DataJobDetailsPageComponent, DataJobExecutionsPageComponent, - DataJobExecutionStatusComponent, - DataJobExecutionStatusFilterComponent, DataJobExecutionTypeComponent, + DataJobExecutionStatusFilterComponent, + DataJobDeploymentDetailsModalComponent, + DataJobExecutionsGridComponent, DataJobExecutionTypeFilterComponent, - ExecutionDurationChartComponent, + TimePeriodFilterComponent, ExecutionStatusChartComponent, - TimePeriodFilterComponent -} from './components/data-job/pages/executions'; - -import { + ExecutionDurationChartComponent, + DataJobExecutionStatusComponent, + DeleteModalComponent, + ConfirmationDialogModalComponent, + GridActionComponent, + StatusCellComponent, + StatusPanelComponent, + ExecutionsTimelineComponent, + // Widgets + DataJobsWidgetOneComponent, + WidgetValueComponent, + ColumnFilterComponent, + FormatDurationPipe, + QuickFiltersComponent, DataJobsExecutionsWidgetComponent, DataJobsFailedWidgetComponent, + WidgetExecutionStatusGaugeComponent, DataJobsHealthPanelComponent, + EmptyStateComponent, + ], + exports: [ + DataJobsExplorePageComponent, + DataJobsExploreGridComponent, + DataJobsManagePageComponent, + DataJobsManageGridComponent, + DataJobPageComponent, + DataJobDetailsPageComponent, + DataJobExecutionsPageComponent, DataJobsWidgetOneComponent, - WidgetExecutionStatusGaugeComponent -} from './components/widgets'; - -const routes: Routes = []; - -@NgModule({ - imports: [ - CommonModule, - RouterModule.forChild(routes), - FormsModule, - ReactiveFormsModule, - LottieModule, - TruncateModule, - TimeagoModule.forRoot(), - ClarityModule, - DpDatePickerModule, - NgxChartsModule, - VdkSharedComponentsModule.forChild(), - VdkSharedFeaturesModule.forChild(), - VdkSharedNgRxModule.forFeatureEffects([DataJobsEffects]) - ], - declarations: [ - AttributesDirective, - FormatDeltaPipe, - FormatSchedulePipe, - ParseNextRunPipe, - ContactsPresentPipe, - ExecutionSuccessRatePipe, - ExtractJobStatusPipe, - ExtractContactsPipe, - ParseEpochPipe, - DataJobsExplorePageComponent, - DataJobsExploreGridComponent, - DataJobsManagePageComponent, - DataJobsManageGridComponent, - DataJobPageComponent, - DataJobDetailsPageComponent, - DataJobExecutionsPageComponent, - DataJobExecutionTypeComponent, - DataJobExecutionStatusFilterComponent, - DataJobDeploymentDetailsModalComponent, - DataJobExecutionsGridComponent, - DataJobExecutionTypeFilterComponent, - TimePeriodFilterComponent, - ExecutionStatusChartComponent, - ExecutionDurationChartComponent, - DataJobExecutionStatusComponent, - DeleteModalComponent, - ConfirmationDialogModalComponent, - GridActionComponent, - StatusCellComponent, - StatusPanelComponent, - ExecutionsTimelineComponent, - // Widgets - DataJobsWidgetOneComponent, - WidgetValueComponent, - ColumnFilterComponent, - FormatDurationPipe, - QuickFiltersComponent, - DataJobsExecutionsWidgetComponent, - DataJobsFailedWidgetComponent, - WidgetExecutionStatusGaugeComponent, - DataJobsHealthPanelComponent, - EmptyStateComponent - ], - exports: [ - DataJobsExplorePageComponent, - DataJobsExploreGridComponent, - DataJobsManagePageComponent, - DataJobsManageGridComponent, - DataJobPageComponent, - DataJobDetailsPageComponent, - DataJobExecutionsPageComponent, - DataJobsWidgetOneComponent, - DataJobsExecutionsWidgetComponent, - DataJobsFailedWidgetComponent, - WidgetExecutionStatusGaugeComponent, - DataJobsHealthPanelComponent - ] + DataJobsExecutionsWidgetComponent, + DataJobsFailedWidgetComponent, + WidgetExecutionStatusGaugeComponent, + DataJobsHealthPanelComponent, + ], }) export class VdkDataPipelinesModule { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - static forRoot(config: DataPipelinesConfig = {} as any): ModuleWithProviders { - return { - ngModule: VdkDataPipelinesModule, - providers: [ - DataJobsBaseApiService, - DataJobsPublicApiService, - DataJobsApiService, - { provide: DataJobsService, useClass: DataJobsServiceImpl }, - { provide: DATA_PIPELINES_CONFIGS, useValue: config } - ] - }; - } + // eslint-disable-next-line @typescript-eslint/no-explicit-any + static forRoot( + config: DataPipelinesConfig = {} as any, + ): ModuleWithProviders { + return { + ngModule: VdkDataPipelinesModule, + providers: [ + DataJobsBaseApiService, + DataJobsPublicApiService, + DataJobsApiService, + { provide: DataJobsService, useClass: DataJobsServiceImpl }, + { provide: DATA_PIPELINES_CONFIGS, useValue: config }, + ], + }; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/public-api.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/public-api.ts index 2a97140c68..3d609b8ebd 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/public-api.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/public-api.ts @@ -7,15 +7,15 @@ * Public API Surface of data-pipelines */ -export * from './lib/vdk-data-pipelines.module'; +export * from "./lib/vdk-data-pipelines.module"; // Components / Pages -export * from './lib/components/public-api'; +export * from "./lib/components/public-api"; // Services -export * from './lib/services/public-api'; +export * from "./lib/services/public-api"; // Models -export * from './lib/model/public-api'; +export * from "./lib/model/public-api"; // Shared diff --git a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/test.ts b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/test.ts index 705c769e34..3689d5a9c0 100644 --- a/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/test.ts +++ b/projects/frontend/data-pipelines/gui/projects/data-pipelines/src/test.ts @@ -5,27 +5,34 @@ // This file is required by karma.conf.js and loads recursively all the .spec and framework files -import 'zone.js'; -import 'zone.js/testing'; -import { getTestBed } from '@angular/core/testing'; -import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing'; +import "zone.js"; +import "zone.js/testing"; +import { getTestBed } from "@angular/core/testing"; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting, +} from "@angular/platform-browser-dynamic/testing"; declare const require: { - context( - path: string, - deep?: boolean, - filter?: RegExp - ): { - keys(): string[]; - (id: string): T; - }; + context( + path: string, + deep?: boolean, + filter?: RegExp, + ): { + keys(): string[]; + (id: string): T; + }; }; // First, initialize the Angular testing environment. -getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), { - teardown: { destroyAfterEach: false } -}); +getTestBed().initTestEnvironment( + BrowserDynamicTestingModule, + platformBrowserDynamicTesting(), + { + teardown: { destroyAfterEach: false }, + }, +); // Then we find all the tests. -const context = require.context('./', true, /\.spec\.ts$/); +const context = require.context("./", true, /\.spec\.ts$/); // And load the modules. context.keys().forEach(context); diff --git a/projects/frontend/data-pipelines/gui/projects/ui/karma.conf.js b/projects/frontend/data-pipelines/gui/projects/ui/karma.conf.js index 48068ab2f3..bd03bdf740 100644 --- a/projects/frontend/data-pipelines/gui/projects/ui/karma.conf.js +++ b/projects/frontend/data-pipelines/gui/projects/ui/karma.conf.js @@ -7,54 +7,67 @@ // https://karma-runner.github.io/1.0/config/configuration-file.html module.exports = function (config) { - config.set({ - basePath: '', - frameworks: ['jasmine', '@angular-devkit/build-angular'], - plugins: [require('karma-jasmine'), require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), require('karma-junit-reporter'), require('karma-coverage'), require('@angular-devkit/build-angular/plugins/karma')], - client: { - jasmine: { - // you can add configuration options for Jasmine here - // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html - // for example, you can disable the random execution with `random: false` - // or set a specific seed with `seed: 4321` - }, - clearContext: false // leave Jasmine Spec Runner output visible in browser + config.set({ + basePath: "", + frameworks: ["jasmine", "@angular-devkit/build-angular"], + plugins: [ + require("karma-jasmine"), + require("karma-chrome-launcher"), + require("karma-jasmine-html-reporter"), + require("karma-junit-reporter"), + require("karma-coverage"), + require("@angular-devkit/build-angular/plugins/karma"), + ], + client: { + jasmine: { + // you can add configuration options for Jasmine here + // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html + // for example, you can disable the random execution with `random: false` + // or set a specific seed with `seed: 4321` + }, + clearContext: false, // leave Jasmine Spec Runner output visible in browser + }, + coverageReporter: { + dir: require("path").join( + __dirname, + "../../reports/coverage/data-pipelines-ui", + ), + reporters: [ + //Code coverage - output only in HTML file + { type: "html" }, + { type: "text-summary" }, + { type: "lcovonly" }, + ], + check: { + global: { + lines: 20, }, - coverageReporter: { - dir: require('path').join(__dirname, '../../reports/coverage/data-pipelines-ui'), - reporters: [ - //Code coverage - output only in HTML file - { type: 'html' }, - { type: 'text-summary' }, - { type: 'lcovonly' } - ], - check: { - global: { - lines: 20 - } - } - }, - jasmineHtmlReporter: { - suppressAll: true // removes the duplicated traces - }, - junitReporter: { - outputDir: require('path').join(__dirname, '../../reports/test-results/data-pipelines-ui'), - outputFile: 'unit-tests.xml', - useBrowserName: false - }, - reporters: ['progress', 'junit', 'coverage'], - port: 9876, - colors: true, - logLevel: config.LOG_INFO, - autoWatch: true, - browsers: ['ChromeHeadless'], - customLaunchers: { - ChromeHeadless_No_Sandbox: { - base: 'ChromeHeadless', - flags: ['--no-sandbox'] - } - }, - singleRun: false, - restartOnFileChange: true - }); + }, + }, + jasmineHtmlReporter: { + suppressAll: true, // removes the duplicated traces + }, + junitReporter: { + outputDir: require("path").join( + __dirname, + "../../reports/test-results/data-pipelines-ui", + ), + outputFile: "unit-tests.xml", + useBrowserName: false, + }, + reporters: ["progress", "junit", "coverage"], + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: true, + browsers: ["ChromeHeadless"], + customLaunchers: { + ChromeHeadless_No_Sandbox: { + base: "ChromeHeadless", + flags: ["--no-sandbox"], + }, + }, + singleRun: false, + restartOnFileChange: true, + }); }; diff --git a/projects/frontend/data-pipelines/gui/projects/ui/src/app/app-config.model.ts b/projects/frontend/data-pipelines/gui/projects/ui/src/app/app-config.model.ts index 67de4ff40f..cf0fa0d5ce 100644 --- a/projects/frontend/data-pipelines/gui/projects/ui/src/app/app-config.model.ts +++ b/projects/frontend/data-pipelines/gui/projects/ui/src/app/app-config.model.ts @@ -3,30 +3,30 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { AuthConfig, OAuthResourceServerConfig } from 'angular-oauth2-oidc'; +import { AuthConfig, OAuthResourceServerConfig } from "angular-oauth2-oidc"; export interface AppConfig { - auth: Auth; - ignoreRoutes?: string[]; - ignoreComponents?: string[]; + auth: Auth; + ignoreRoutes?: string[]; + ignoreComponents?: string[]; } export interface Auth { - skipAuth?: false; + skipAuth?: false; - // Used for producing the AuthConfig.customQueryParams mapping for `orgLink` and `targetUri` - consoleCloudUrl?: string; - orgLinkRoot?: string; - // $window.location.origin is replaced with the corresponding value dynamically upon loading, - // see AppConfigService - authConfig?: AuthConfig; - resourceServer?: OAuthResourceServerConfig; - // Used for token auto-refresh capability, in case a token is about to expire. - refreshTokenConfig?: RefreshTokenConfig; + // Used for producing the AuthConfig.customQueryParams mapping for `orgLink` and `targetUri` + consoleCloudUrl?: string; + orgLinkRoot?: string; + // $window.location.origin is replaced with the corresponding value dynamically upon loading, + // see AppConfigService + authConfig?: AuthConfig; + resourceServer?: OAuthResourceServerConfig; + // Used for token auto-refresh capability, in case a token is about to expire. + refreshTokenConfig?: RefreshTokenConfig; } export interface RefreshTokenConfig { - start?: number; - remainingTime?: number; - checkInterval?: number; + start?: number; + remainingTime?: number; + checkInterval?: number; } diff --git a/projects/frontend/data-pipelines/gui/projects/ui/src/app/app-config.service.spec.ts b/projects/frontend/data-pipelines/gui/projects/ui/src/app/app-config.service.spec.ts index a1024f6a1a..18e0ecf1d6 100644 --- a/projects/frontend/data-pipelines/gui/projects/ui/src/app/app-config.service.spec.ts +++ b/projects/frontend/data-pipelines/gui/projects/ui/src/app/app-config.service.spec.ts @@ -3,22 +3,28 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { TestBed } from '@angular/core/testing'; -import { HttpClientTestingModule } from '@angular/common/http/testing'; -import { AppConfigService } from './app-config.service'; -import { HttpBackend } from '@angular/common/http'; +import { TestBed } from "@angular/core/testing"; +import { HttpClientTestingModule } from "@angular/common/http/testing"; +import { AppConfigService } from "./app-config.service"; +import { HttpBackend } from "@angular/common/http"; -describe('AppConfigService', () => { - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [HttpClientTestingModule], - providers: [{ provide: AppConfigService, useClass: AppConfigService, deps: [HttpBackend] }] - }); +describe("AppConfigService", () => { + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [HttpClientTestingModule], + providers: [ + { + provide: AppConfigService, + useClass: AppConfigService, + deps: [HttpBackend], + }, + ], }); + }); - it('can load instance', () => { - const service = TestBed.inject(AppConfigService); - service.loadAppConfig(); - expect(service).toBeTruthy(); - }); + it("can load instance", () => { + const service = TestBed.inject(AppConfigService); + service.loadAppConfig(); + expect(service).toBeTruthy(); + }); }); diff --git a/projects/frontend/data-pipelines/gui/projects/ui/src/app/app-config.service.ts b/projects/frontend/data-pipelines/gui/projects/ui/src/app/app-config.service.ts index 01389c3600..4d9dbaf900 100644 --- a/projects/frontend/data-pipelines/gui/projects/ui/src/app/app-config.service.ts +++ b/projects/frontend/data-pipelines/gui/projects/ui/src/app/app-config.service.ts @@ -3,66 +3,72 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { Injectable } from '@angular/core'; -import { HttpBackend, HttpClient } from '@angular/common/http'; -import { AuthConfig } from 'angular-oauth2-oidc'; -import { AppConfig, RefreshTokenConfig } from './app-config.model'; -import { firstValueFrom } from 'rxjs'; -import { Router } from '@angular/router'; -import { routes } from './app.routing'; +import { Injectable } from "@angular/core"; +import { HttpBackend, HttpClient } from "@angular/common/http"; +import { AuthConfig } from "angular-oauth2-oidc"; +import { AppConfig, RefreshTokenConfig } from "./app-config.model"; +import { firstValueFrom } from "rxjs"; +import { Router } from "@angular/router"; +import { routes } from "./app.routing"; @Injectable({ - providedIn: 'root' + providedIn: "root", }) export class AppConfigService { - private httpClient: HttpClient; - private appConfig: AppConfig; + private httpClient: HttpClient; + private appConfig: AppConfig; - constructor( - private httpBackend: HttpBackend, - private router: Router - ) { - this.httpClient = new HttpClient(httpBackend); - } + constructor( + private httpBackend: HttpBackend, + private router: Router, + ) { + this.httpClient = new HttpClient(httpBackend); + } - loadAppConfig(): Promise { - return firstValueFrom(this.httpClient.get('/assets/data/appConfig.json')).then((data) => { - this.appConfig = data; - try { - if (data.ignoreRoutes) { - const localRoutes = routes.filter((route: { path: string }) => { - return !data.ignoreRoutes.includes(route.path); - }); - this.router.resetConfig(localRoutes); - } - } catch (e) { - console.error('Failed to reset Router config'); - throw e; - } - }); - } + loadAppConfig(): Promise { + return firstValueFrom( + this.httpClient.get("/assets/data/appConfig.json"), + ).then((data) => { + this.appConfig = data; + try { + if (data.ignoreRoutes) { + const localRoutes = routes.filter((route: { path: string }) => { + return !data.ignoreRoutes.includes(route.path); + }); + this.router.resetConfig(localRoutes); + } + } catch (e) { + console.error("Failed to reset Router config"); + throw e; + } + }); + } - getConfig(): AppConfig { - return this.appConfig; - } + getConfig(): AppConfig { + return this.appConfig; + } - getSkipAuth(): boolean { - return this.appConfig.auth.skipAuth; - } + getSkipAuth(): boolean { + return this.appConfig.auth.skipAuth; + } - getAuthCodeFlowConfig(): AuthConfig { - if (this.getSkipAuth()) return new AuthConfig(); - const replaceWindowLocationOrigin = (str: string): string => { - return str?.replace('$window.location.origin', window.location.origin); - }; + getAuthCodeFlowConfig(): AuthConfig { + if (this.getSkipAuth()) return new AuthConfig(); + const replaceWindowLocationOrigin = (str: string): string => { + return str?.replace("$window.location.origin", window.location.origin); + }; - const authCodeFlowConfig: AuthConfig = this.getConfig()?.auth.authConfig; - authCodeFlowConfig.redirectUri = replaceWindowLocationOrigin(authCodeFlowConfig?.redirectUri); - authCodeFlowConfig.silentRefreshRedirectUri = replaceWindowLocationOrigin(authCodeFlowConfig?.silentRefreshRedirectUri); - return authCodeFlowConfig; - } + const authCodeFlowConfig: AuthConfig = this.getConfig()?.auth.authConfig; + authCodeFlowConfig.redirectUri = replaceWindowLocationOrigin( + authCodeFlowConfig?.redirectUri, + ); + authCodeFlowConfig.silentRefreshRedirectUri = replaceWindowLocationOrigin( + authCodeFlowConfig?.silentRefreshRedirectUri, + ); + return authCodeFlowConfig; + } - getRefreshTokenConfig(): RefreshTokenConfig { - if (this.getSkipAuth()) return null; - return this.getConfig()?.auth.refreshTokenConfig; - } + getRefreshTokenConfig(): RefreshTokenConfig { + if (this.getSkipAuth()) return null; + return this.getConfig()?.auth.refreshTokenConfig; + } } diff --git a/projects/frontend/data-pipelines/gui/projects/ui/src/app/app.component.html b/projects/frontend/data-pipelines/gui/projects/ui/src/app/app.component.html index f577a85a94..faaec0ba68 100644 --- a/projects/frontend/data-pipelines/gui/projects/ui/src/app/app.component.html +++ b/projects/frontend/data-pipelines/gui/projects/ui/src/app/app.component.html @@ -4,120 +4,114 @@ --> - -
    -
    - - - Data Pipelines - + +
    +
    + + + Data Pipelines + +
    +
    + + + +
    + Logout
    -
    - - - -
    - Logout -
    -     -     -
    -
    + + +
    +
    -
    - - - - Get started - +
    + + + + Get started + - - - Explore - - - - - Data jobs - - - + + + Explore + + + + + Data jobs + + + -
    +
    - - - - Manage + + + + Manage - - - Data Jobs - - -     + + + Data Jobs + + + -
    - -
    -
    - +
    + +
    +
    +