From df73b6e9e1ed8f6404b02d2254d81944d08ffc7d Mon Sep 17 00:00:00 2001 From: Brandon Caton Date: Wed, 7 Feb 2024 14:07:38 -0500 Subject: [PATCH] ui: updating references to status.redhat.com (PROJQUAY-6654) (#2645) Updates references from `status.quay.io` to `status.redhat.com`. --- static/directives/quay-service-status.html | 2 +- static/js/services/notification-service.js | 2 +- static/js/services/status-service.js | 54 +++++- templates/500.html | 4 +- web/.eslintrc.js | 2 +- web/cypress/e2e/service-status.cy.ts | 59 ++++++ web/cypress/fixtures/registry-status.json | 168 ++++++++++++++++++ .../errors/SiteUnavailableError.tsx | 3 +- web/src/hooks/UseServiceStatus.ts | 105 +++++++++++ web/src/index.html | 1 + web/src/routes/RegistryStatus.css | 44 +++++ web/src/routes/RegistryStatus.tsx | 72 ++++++++ web/src/routes/StandaloneMain.tsx | 7 + 13 files changed, 513 insertions(+), 10 deletions(-) create mode 100644 web/cypress/e2e/service-status.cy.ts create mode 100644 web/cypress/fixtures/registry-status.json create mode 100644 web/src/hooks/UseServiceStatus.ts create mode 100644 web/src/routes/RegistryStatus.css create mode 100644 web/src/routes/RegistryStatus.tsx diff --git a/static/directives/quay-service-status.html b/static/directives/quay-service-status.html index 59951dcc3a..89b4f0fbaf 100644 --- a/static/directives/quay-service-status.html +++ b/static/directives/quay-service-status.html @@ -2,6 +2,6 @@ - {{ description }} + {{ description }} : {{ degraded[0].name }} diff --git a/static/js/services/notification-service.js b/static/js/services/notification-service.js index 48b94eb15b..c2e96be95d 100644 --- a/static/js/services/notification-service.js +++ b/static/js/services/notification-service.js @@ -70,7 +70,7 @@ function($rootScope, $interval, UserService, ApiService, StringBuilderService, P 'level': 'warning', 'message': 'We will be down for schedule maintenance from {from_date} to {to_date} ' + 'for {reason}. We are sorry about any inconvenience.', - 'page': 'http://status.quay.io/' + 'page': 'https://status.redhat.com' }, 'repo_push': { 'level': 'info', diff --git a/static/js/services/status-service.js b/static/js/services/status-service.js index 46a41e471a..2e2aeff1d8 100644 --- a/static/js/services/status-service.js +++ b/static/js/services/status-service.js @@ -8,8 +8,27 @@ angular.module('quay').factory('StatusService', ['Features', function(Features) }; } - var STATUSPAGE_PAGE_ID = '8szqd6w4s277'; - var STATUSPAGE_SRC = 'https://statuspage-production.s3.amazonaws.com/se-v2.js'; + var STATUSPAGE_PAGE_ID = 'dn6mqn7xvzz3'; + var STATUSPAGE_QUAY_ID = 'cllr1k2dzsf7'; + var STATUSPAGE_SRC = 'https://cdn.statuspage.io/se-v2.js'; + var statusToIndicator = { + operational: { + indicator: 'none', + description: 'All Systems Operational' + }, + degraded_performance: { + indicator: 'minor', + description: 'Degraded Performance' + }, + partial_outage: { + indicator: 'major', + description: 'Partial System Outage' + }, + major_outage: { + indicator: 'critical', + description: 'Major Service Outage' + }, + } var statusPageHandler = null; var statusPageData = null; var callbacks = []; @@ -18,8 +37,35 @@ angular.module('quay').factory('StatusService', ['Features', function(Features) if (!data) { return; } statusPageData = data; + const quayData = {status:{}}; + const quayComponent = data.components.find((component) => component.id === STATUSPAGE_QUAY_ID); + if(!quayComponent) {return;} + const subComponentIds = quayComponent.components || []; + + // incidents + const incidents = data.incidents.filter((incident) => { + return incident.components.some((component) => subComponentIds.includes(component.id)); + }); + quayData.incidents = incidents; + + // components + const subComponents = data.components.filter((component) => subComponentIds.includes(component.id)); + quayData.components = subComponents; + + // scheduled_maintenances + const scheduledMaintenances = data.scheduled_maintenances.filter((scheduledMaintenance) => { + return scheduledMaintenance.components.some((component) => subComponentIds.includes(component.id)); + }); + quayData.scheduled_maintenances = scheduledMaintenances; + + // status.indicator + quayData.status.indicator = statusToIndicator[quayComponent.status].indicator; + + // status.description + quayData.status.description = statusToIndicator[quayComponent.status].description; + for (var i = 0; i < callbacks.length; ++i) { - callbacks[i](data); + callbacks[i](quayData); } callbacks = []; @@ -39,4 +85,4 @@ angular.module('quay').factory('StatusService', ['Features', function(Features) }; return statusService; -}]); \ No newline at end of file +}]); diff --git a/templates/500.html b/templates/500.html index 28f81baa6b..a1decbd51b 100644 --- a/templates/500.html +++ b/templates/500.html @@ -17,10 +17,10 @@

(Loading) - + diff --git a/web/.eslintrc.js b/web/.eslintrc.js index 0a067a5377..3054827fc3 100644 --- a/web/.eslintrc.js +++ b/web/.eslintrc.js @@ -18,7 +18,7 @@ module.exports = { }, }, plugins: ['import', 'react', '@typescript-eslint', 'prettier'], - ignorePatterns: ['*.md', '**/*.css', '**/*.scss', '*.svg', '*.png'], + ignorePatterns: ['*.md', '**/*.css', '**/*.scss', '*.svg', '*.png', '*.html'], rules: { 'react/react-in-jsx-scope': 'off', 'prettier/prettier': ['error'], diff --git a/web/cypress/e2e/service-status.cy.ts b/web/cypress/e2e/service-status.cy.ts new file mode 100644 index 0000000000..1e44d4187b --- /dev/null +++ b/web/cypress/e2e/service-status.cy.ts @@ -0,0 +1,59 @@ +/// +import {formatDate} from '../../src/libs/utils'; + +describe('Default permissions page', () => { + beforeEach(() => { + cy.exec('npm run quay:seed'); + cy.intercept('GET', '/config', {fixture: 'config.json'}).as('getConfig'); + cy.request('GET', `${Cypress.env('REACT_QUAY_APP_API_URL')}/csrf_token`) + .then((response) => response.body.csrf_token) + .then((token) => { + cy.loginByCSRF(token); + }); + }); + + it('Displays incidents and maintanences', () => { + cy.intercept( + 'GET', + 'https://dn6mqn7xvzz3.statuspage.io/api/v2/summary.json', + {fixture: 'registry-status.json'}, + ); + cy.visit('/organization/testorg'); + cy.contains('incident1').should( + 'have.attr', + 'href', + 'https://stspg.io/incident1', + ); + cy.contains('incident2').should( + 'have.attr', + 'href', + 'https://stspg.io/incident2', + ); + cy.contains(`Scheduled for ${formatDate('2024-02-09T10:00:00.000-05:00')}`); + cy.contains('maintenance1').should( + 'have.attr', + 'href', + 'https://stspg.io/maintenance1', + ); + cy.contains('In progress:'); + cy.contains('maintenance2').should( + 'have.attr', + 'href', + 'https://stspg.io/maintenance2', + ); + }); + + it('Displays no incidents and maintanences', () => { + cy.fixture('registry-status.json').then((statusFixture) => { + statusFixture.incidents = []; + statusFixture.scheduled_maintenances = []; + cy.intercept( + 'GET', + 'https://dn6mqn7xvzz3.statuspage.io/api/v2/summary.json', + statusFixture, + ); + }); + cy.visit('/organization/testorg'); + cy.get('#registry-status').should('not.exist'); + }); +}); diff --git a/web/cypress/fixtures/registry-status.json b/web/cypress/fixtures/registry-status.json new file mode 100644 index 0000000000..6467ab0cf8 --- /dev/null +++ b/web/cypress/fixtures/registry-status.json @@ -0,0 +1,168 @@ +{ + "page": { + "id": "dn6mqn7xvzz3", + "name": "Red Hat", + "url": "https://status.redhat.com", + "time_zone": "America/New_York", + "updated_at": "2024-02-06T12:27:50.519-05:00" + }, + "components": [ + { + "id": "cllr1k2dzsf7", + "name": "Quay.io", + "status": "major_outage", + "created_at": "2024-01-16T15:36:01.802-05:00", + "updated_at": "2024-01-16T16:57:38.322-05:00", + "position": 16, + "description": null, + "showcase": false, + "start_date": null, + "group_id": null, + "page_id": "dn6mqn7xvzz3", + "group": true, + "only_show_if_degraded": false, + "components": [ + "m65lxn2nf6l0", + "6fb8zflt4fbt", + "fvnvxz75h3m2", + "02hhmtl31chv", + "4y37q0jspj5n" + ] + }, + { + "id": "m65lxn2nf6l0", + "name": "API", + "status": "major_outage", + "created_at": "2024-01-16T15:36:01.876-05:00", + "updated_at": "2024-01-16T15:36:01.876-05:00", + "position": 1, + "description": null, + "showcase": false, + "start_date": "2024-01-16", + "group_id": "cllr1k2dzsf7", + "page_id": "dn6mqn7xvzz3", + "group": false, + "only_show_if_degraded": false + }, + { + "id": "6fb8zflt4fbt", + "name": "Build System", + "status": "partial_outage", + "created_at": "2024-01-16T15:38:09.519-05:00", + "updated_at": "2024-01-16T15:38:09.519-05:00", + "position": 2, + "description": null, + "showcase": false, + "start_date": "2024-01-16", + "group_id": "cllr1k2dzsf7", + "page_id": "dn6mqn7xvzz3", + "group": false, + "only_show_if_degraded": false + }, + { + "id": "fvnvxz75h3m2", + "name": "Registry", + "status": "operational", + "created_at": "2024-01-16T15:38:30.060-05:00", + "updated_at": "2024-01-16T15:38:30.060-05:00", + "position": 3, + "description": null, + "showcase": false, + "start_date": "2024-01-16", + "group_id": "cllr1k2dzsf7", + "page_id": "dn6mqn7xvzz3", + "group": false, + "only_show_if_degraded": false + }, + { + "id": "02hhmtl31chv", + "name": "Frontend", + "status": "operational", + "created_at": "2024-01-16T15:38:44.726-05:00", + "updated_at": "2024-01-16T15:38:44.726-05:00", + "position": 4, + "description": null, + "showcase": false, + "start_date": "2024-01-16", + "group_id": "cllr1k2dzsf7", + "page_id": "dn6mqn7xvzz3", + "group": false, + "only_show_if_degraded": false + }, + { + "id": "4y37q0jspj5n", + "name": "Security Scanning", + "status": "operational", + "created_at": "2024-01-16T15:38:59.314-05:00", + "updated_at": "2024-01-16T15:38:59.314-05:00", + "position": 5, + "description": null, + "showcase": false, + "start_date": "2024-01-16", + "group_id": "cllr1k2dzsf7", + "page_id": "dn6mqn7xvzz3", + "group": false, + "only_show_if_degraded": false + } + ], + "incidents": [ + { + "name": "incident1", + "shortlink": "https://stspg.io/incident1", + "components": [ + { + "id": "m65lxn2nf6l0" + }, + { + "id": "6fb8zflt4fbt" + } + ] + }, + { + "name": "incident2", + "shortlink": "https://stspg.io/incident2", + "components": [ + { + "id": "m65lxn2nf6l0" + }, + { + "id": "6fb8zflt4fbt" + } + ] + } + ], + "scheduled_maintenances": [ + { + "status": "scheduled", + "name": "maintenance1", + "shortlink": "https://stspg.io/maintenance1", + "components": [ + { + "id": "m65lxn2nf6l0" + }, + { + "id": "6fb8zflt4fbt" + } + ], + "scheduled_for": "2024-02-09T10:00:00.000-05:00" + }, + { + "name": "maintenance2", + "status": "in_progress", + "shortlink": "https://stspg.io/maintenance2", + "components": [ + { + "id": "m65lxn2nf6l0" + }, + { + "id": "6fb8zflt4fbt" + } + ], + "scheduled_for": "2024-02-09T10:00:00.000-05:00" + } + ], + "status": { + "indicator": "none", + "description": "All Systems Operational" + } +} diff --git a/web/src/components/errors/SiteUnavailableError.tsx b/web/src/components/errors/SiteUnavailableError.tsx index 0669bd10f6..e66768a8f5 100644 --- a/web/src/components/errors/SiteUnavailableError.tsx +++ b/web/src/components/errors/SiteUnavailableError.tsx @@ -23,7 +23,8 @@ export default function SiteUnavailableError() { Try refreshing the page. If the problem persists, contact your organization administrator or visit our{' '} - status page for known outages. + status page for known + outages.