diff options
author | Ambroise C <ambroise.christea@sonarsource.com> | 2024-01-04 18:56:00 +0100 |
---|---|---|
committer | sonartech <sonartech@sonarsource.com> | 2024-01-05 20:02:36 +0000 |
commit | a9e4c05ba0af80a7c8c7c46b1e7a3d4b8574e034 (patch) | |
tree | 2e95b42b72d4a9915012a38cb26ba8a8cf92e5d4 /server/sonar-web/src/main/js/apps/maintenance | |
parent | ef96f7b0518343fa48a1d74d2763cd3ed479ba70 (diff) | |
download | sonarqube-a9e4c05ba0af80a7c8c7c46b1e7a3d4b8574e034.tar.gz sonarqube-a9e4c05ba0af80a7c8c7c46b1e7a3d4b8574e034.zip |
SONAR-21398 Migrate maintenance and setup pages to MIUI
Diffstat (limited to 'server/sonar-web/src/main/js/apps/maintenance')
-rw-r--r-- | server/sonar-web/src/main/js/apps/maintenance/components/App.tsx | 166 | ||||
-rw-r--r-- | server/sonar-web/src/main/js/apps/maintenance/styles.css | 38 |
2 files changed, 89 insertions, 115 deletions
diff --git a/server/sonar-web/src/main/js/apps/maintenance/components/App.tsx b/server/sonar-web/src/main/js/apps/maintenance/components/App.tsx index 77afea7e4bd..dac43387268 100644 --- a/server/sonar-web/src/main/js/apps/maintenance/components/App.tsx +++ b/server/sonar-web/src/main/js/apps/maintenance/components/App.tsx @@ -17,21 +17,19 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ -import classNames from 'classnames'; +import styled from '@emotion/styled'; +import { ButtonPrimary, Link, Title, themeBorder } from 'design-system'; import * as React from 'react'; import { Helmet } from 'react-helmet-async'; import { FormattedMessage } from 'react-intl'; import { getMigrationStatus, getSystemStatus, migrateDatabase } from '../../../api/system'; -import DocLink from '../../../components/common/DocLink'; +import DocumentationLink from '../../../components/common/DocumentationLink'; import InstanceMessage from '../../../components/common/InstanceMessage'; -import Link from '../../../components/common/Link'; -import { Button } from '../../../components/controls/buttons'; import DateFromNow from '../../../components/intl/DateFromNow'; import TimeFormatter from '../../../components/intl/TimeFormatter'; import { translate } from '../../../helpers/l10n'; import { getBaseUrl } from '../../../helpers/system'; import { getReturnUrl } from '../../../helpers/urls'; -import '../styles.css'; interface Props { location: { query?: { return_to?: string } }; @@ -61,7 +59,7 @@ export default class App extends React.PureComponent<Props, State> { componentWillUnmount() { this.mounted = false; - if (this.interval) { + if (this.interval !== undefined) { window.clearInterval(this.interval); } } @@ -140,73 +138,68 @@ export default class App extends React.PureComponent<Props, State> { <> <Helmet defaultTitle={translate('maintenance.page')} defer={false} /> <div className="page-wrapper-simple" id="bd"> - <div - className={classNames('page-simple', { - 'panel-warning': state === 'MIGRATION_REQUIRED', - })} - id="nonav" - > + <MaintenanceContainer className="sw-body-sm sw-p-10" id="nonav"> {status === 'OFFLINE' && ( <> - <h1 className="maintenance-title text-danger"> + <MaintenanceTitle className="text-danger"> <InstanceMessage message={translate('maintenance.is_offline')} /> - </h1> - <p className="maintenance-text"> + </MaintenanceTitle> + <MaintenanceText> {translate('maintenance.sonarqube_is_offline.text')} - </p> - <p className="maintenance-text text-center"> - {/* We don't use <Link> here, as we want to fully refresh the page. */} - <a href={getBaseUrl() + '/'}>{translate('maintenance.try_again')}</a> - </p> + </MaintenanceText> + <div className="sw-text-center"> + <Link reloadDocument to={`${getBaseUrl()}/`}> + {translate('maintenance.try_again')} + </Link> + </div> </> )} {status === 'UP' && ( <> - <h1 className="maintenance-title"> + <MaintenanceTitle> <InstanceMessage message={translate('maintenance.is_up')} /> - </h1> - <p className="maintenance-text text-center"> + </MaintenanceTitle> + <MaintenanceText className="sw-text-center"> {translate('maintenance.all_systems_opetational')} - </p> - <p className="maintenance-text text-center"> + </MaintenanceText> + <div className="sw-text-center"> <Link to="/">{translate('layout.home')}</Link> - </p> + </div> </> )} {status === 'STARTING' && ( <> - <h1 className="maintenance-title"> + <MaintenanceTitle> <InstanceMessage message={translate('maintenance.is_starting')} /> - </h1> - <p className="maintenance-spinner"> + </MaintenanceTitle> + <MaintenanceSpinner> <i className="spinner" /> - </p> + </MaintenanceSpinner> </> )} {status === 'DOWN' && ( <> - <h1 className="maintenance-title text-danger"> + <MaintenanceTitle className="text-danger"> <InstanceMessage message={translate('maintenance.is_down')} /> - </h1> - <p className="maintenance-text"> - {translate('maintenance.sonarqube_is_down.text')} - </p> - <p className="maintenance-text text-center"> - {/* We don't use <Link> here, as we want to fully refresh the page. */} - <a href={getBaseUrl() + '/'}>{translate('maintenance.try_again')}</a> - </p> + </MaintenanceTitle> + <MaintenanceText>{translate('maintenance.sonarqube_is_down.text')}</MaintenanceText> + <MaintenanceText className="sw-text-center"> + <Link reloadDocument to={`${getBaseUrl()}/`}> + {translate('maintenance.try_again')} + </Link> + </MaintenanceText> </> )} {(status === 'DB_MIGRATION_NEEDED' || status === 'DB_MIGRATION_RUNNING') && ( <> - <h1 className="maintenance-title"> + <MaintenanceTitle> <InstanceMessage message={translate('maintenance.is_under_maintenance')} /> - </h1> - <p className="maintenance-text"> + </MaintenanceTitle> + <MaintenanceText> <FormattedMessage defaultMessage={translate('maintenance.sonarqube_is_under_maintenance.1')} id="maintenance.sonarqube_is_under_maintenance.1" @@ -221,101 +214,120 @@ export default class App extends React.PureComponent<Props, State> { ), }} /> - </p> - <p className="maintenance-text"> + </MaintenanceText> + <MaintenanceText> <FormattedMessage defaultMessage={translate('maintenance.sonarqube_is_under_maintenance.2')} id="maintenance.sonarqube_is_under_maintenance.2" values={{ link: ( - <DocLink to="/setup-and-upgrade/upgrade-the-server/upgrade-guide/"> + <DocumentationLink to="/setup-and-upgrade/upgrade-the-server/upgrade-guide/"> {translate('maintenance.sonarqube_is_under_maintenance_link.2')} - </DocLink> + </DocumentationLink> ), }} /> - </p> + </MaintenanceText> </> )} {state === 'NO_MIGRATION' && ( <> - <h1 className="maintenance-title"> + <MaintenanceTitle> {translate('maintenance.database_is_up_to_date')} - </h1> - <p className="maintenance-text text-center"> + </MaintenanceTitle> + <div className="sw-text-center"> <Link to="/">{translate('layout.home')}</Link> - </p> + </div> </> )} {state === 'MIGRATION_REQUIRED' && ( <> - <h1 className="maintenance-title">{translate('maintenance.upgrade_database')}</h1> - <p className="maintenance-text">{translate('maintenance.upgrade_database.1')}</p> - <p className="maintenance-text">{translate('maintenance.upgrade_database.2')}</p> - <p className="maintenance-text">{translate('maintenance.upgrade_database.3')}</p> - <div className="maintenance-spinner"> - <Button id="start-migration" onClick={this.handleMigrateClick}> + <MaintenanceTitle>{translate('maintenance.upgrade_database')}</MaintenanceTitle> + <MaintenanceText>{translate('maintenance.upgrade_database.1')}</MaintenanceText> + <MaintenanceText>{translate('maintenance.upgrade_database.2')}</MaintenanceText> + <MaintenanceText>{translate('maintenance.upgrade_database.3')}</MaintenanceText> + <MaintenanceSpinner> + <ButtonPrimary id="start-migration" onClick={this.handleMigrateClick}> {translate('maintenance.upgrade')} - </Button> - </div> + </ButtonPrimary> + </MaintenanceSpinner> </> )} {state === 'NOT_SUPPORTED' && ( <> - <h1 className="maintenance-title text-danger"> + <MaintenanceTitle className="text-danger"> {translate('maintenance.migration_not_supported')} - </h1> + </MaintenanceTitle> <p>{translate('maintenance.migration_not_supported.text')}</p> </> )} {state === 'MIGRATION_RUNNING' && ( <> - <h1 className="maintenance-title">{translate('maintenance.database_migration')}</h1> - {this.state.message && ( - <p className="maintenance-text text-center">{this.state.message}</p> + <MaintenanceTitle>{translate('maintenance.database_migration')}</MaintenanceTitle> + {this.state.message !== undefined && ( + <MaintenanceText className="sw-text-center">{this.state.message}</MaintenanceText> )} - {this.state.startedAt && ( - <p className="maintenance-text text-center"> + {this.state.startedAt !== undefined && ( + <MaintenanceText className="sw-text-center"> {translate('background_tasks.table.started')}{' '} <DateFromNow date={this.state.startedAt} /> <br /> <small className="text-muted"> <TimeFormatter date={this.state.startedAt} long /> </small> - </p> + </MaintenanceText> )} - <p className="maintenance-spinner"> + <MaintenanceSpinner> <i className="spinner" /> - </p> + </MaintenanceSpinner> </> )} {state === 'MIGRATION_SUCCEEDED' && ( <> - <h1 className="maintenance-title text-success"> + <MaintenanceTitle className="text-success"> {translate('maintenance.database_is_up_to_date')} - </h1> - <p className="maintenance-text text-center"> + </MaintenanceTitle> + <div className="sw-text-center"> <Link to="/">{translate('layout.home')}</Link> - </p> + </div> </> )} {state === 'MIGRATION_FAILED' && ( <> - <h1 className="maintenance-title text-danger"> + <MaintenanceTitle className="text-danger"> {translate('maintenance.upgrade_failed')} - </h1> - <p className="maintenance-text">{translate('maintenance.upgrade_failed.text')}</p> + </MaintenanceTitle> + <MaintenanceText>{translate('maintenance.upgrade_failed.text')}</MaintenanceText> </> )} - </div> + </MaintenanceContainer> </div> </> ); } } + +const MaintenanceContainer = styled.div` + border: ${themeBorder('default')}; + width: 400px; +`; + +const MaintenanceTitle = styled(Title)` + text-align: center; + margin-bottom: 2.5rem; +`; + +const MaintenanceText = styled.p` + margin-bottom: 1rem; +`; + +const MaintenanceSpinner = styled.div` + margin-top: 2.5rem; + text-align: center; +`; diff --git a/server/sonar-web/src/main/js/apps/maintenance/styles.css b/server/sonar-web/src/main/js/apps/maintenance/styles.css deleted file mode 100644 index 65754981e7a..00000000000 --- a/server/sonar-web/src/main/js/apps/maintenance/styles.css +++ /dev/null @@ -1,38 +0,0 @@ -/* - * SonarQube - * Copyright (C) 2009-2024 SonarSource SA - * mailto:info AT sonarsource DOT com - * - * This program is free software; you can redistribute it and/or - * modify it under the terms of the GNU Lesser General Public - * License as published by the Free Software Foundation; either - * version 3 of the License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU - * Lesser General Public License for more details. - * - * You should have received a copy of the GNU Lesser General Public License - * along with this program; if not, write to the Free Software Foundation, - * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. - */ -.maintenance-title { - margin-bottom: 40px; - line-height: 1.5; - font-size: 24px; - font-weight: 300; - text-align: center; -} - -.maintenance-text { - margin-bottom: 16px; - line-height: 1.5; - font-size: var(--bigFontSize); - font-weight: 300; -} - -.maintenance-spinner { - margin-top: 40px; - text-align: center; -} |