You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@devlake.apache.org by kl...@apache.org on 2022/09/21 13:03:13 UTC
[incubator-devlake] branch main updated: refactor: update eslint configuration + run eslint (#3153)
This is an automated email from the ASF dual-hosted git repository.
klesh pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/incubator-devlake.git
The following commit(s) were added to refs/heads/main by this push:
new 2debaa32 refactor: update eslint configuration + run eslint (#3153)
2debaa32 is described below
commit 2debaa3295cad8da09e4b19691981f2cb36964b1
Author: Julien Chinapen <ju...@merico.dev>
AuthorDate: Wed Sep 21 09:03:08 2022 -0400
refactor: update eslint configuration + run eslint (#3153)
* refactor: update eslint and prettier configs
* refactor: set prettier print width to 80
* refactor: run eslint
* fix: resolve linter errors with jsx formatting
* fix: resolve linter errors with jsx formatting
* fix: resolve linter errors with jsx formatting
* refactor: delete unused v11 component files
* fix: resolve linter warnings
* chore: npm run lint
---
config-ui/.eslintrc | 20 +
config-ui/.prettierrc.js | 8 +-
config-ui/src/App.js | 14 +-
config-ui/src/components/Breadcrumbs.jsx | 13 +-
config-ui/src/components/ClearButton.jsx | 7 +-
config-ui/src/components/ErrorBoundary.jsx | 52 +-
config-ui/src/components/MigrationAlertDialog.jsx | 42 +-
config-ui/src/components/Nav.jsx | 43 +-
config-ui/src/components/NoData.jsx | 2 +-
config-ui/src/components/SaveAlert.jsx | 14 +-
config-ui/src/components/Sidebar.jsx | 13 +-
.../src/components/Sidebar/MenuConfiguration.jsx | 51 +-
config-ui/src/components/Sidebar/SidebarMenu.jsx | 75 +-
config-ui/src/components/Toast.jsx | 2 +-
config-ui/src/components/actions/DeleteAction.jsx | 11 +-
.../actions/DeleteConfirmationMessage.jsx | 4 +-
.../components/blueprints/AddBlueprintDialog.jsx | 106 +-
.../blueprints/BlueprintDataScopesDialog.jsx | 15 +-
.../src/components/blueprints/BlueprintDialog.jsx | 12 +-
.../components/blueprints/BlueprintNameCard.jsx | 3 +-
.../blueprints/BlueprintNavigationLinks.jsx | 24 +-
.../src/components/blueprints/BlueprintsGrid.jsx | 447 +++++--
.../src/components/blueprints/BoardsSelector.jsx | 45 +-
.../src/components/blueprints/ConnectionDialog.jsx | 45 +-
.../src/components/blueprints/ConnectionTabs.jsx | 19 +-
.../components/blueprints/ConnectionsSelector.jsx | 47 +-
.../components/blueprints/DataEntitiesSelector.jsx | 45 +-
.../src/components/blueprints/DataScopesGrid.jsx | 109 +-
.../src/components/blueprints/DeletePopover.jsx | 29 +-
.../blueprints/GitlabProjectsSelector.jsx | 71 +-
.../src/components/blueprints/PipelineTasks.jsx | 104 +-
.../blueprints/ProviderTransformationSettings.jsx | 2 +-
.../components/blueprints/StandardStackedList.jsx | 62 +-
.../src/components/blueprints/WorkflowActions.jsx | 38 +-
.../src/components/blueprints/WorkflowStepsBar.jsx | 2 +-
.../blueprints/create-workflow/AdvancedJSON.jsx | 47 +-
.../create-workflow/AdvancedJSONValidation.jsx | 15 +-
.../blueprints/create-workflow/DataConnections.jsx | 58 +-
.../blueprints/create-workflow/DataScopes.jsx | 86 +-
.../blueprints/create-workflow/DataSync.jsx | 97 +-
.../create-workflow/DataTransformations.jsx | 325 +++--
.../blueprints/transformations/CICD/Deployment.jsx | 140 +-
config-ui/src/components/loaders/ContentLoader.jsx | 23 +-
.../src/components/menus/PipelineConfigsMenu.jsx | 34 +-
.../src/components/menus/PipelinePresetsMenu.jsx | 89 +-
.../src/components/menus/RefDiffTasksMenu.jsx | 32 +-
.../components/messages/FormValidationErrors.jsx | 16 +-
.../src/components/pipelines/CodeInspector.jsx | 51 +-
.../src/components/pipelines/ProviderSettings.jsx | 190 ++-
config-ui/src/components/pipelines/StageLane.jsx | 130 +-
.../src/components/pipelines/StageLaneStatus.jsx | 31 +-
config-ui/src/components/pipelines/StagePanel.jsx | 109 +-
config-ui/src/components/pipelines/StageTask.jsx | 23 +-
.../src/components/pipelines/StageTaskCaption.jsx | 27 +-
.../components/pipelines/StageTaskIndicator.jsx | 2 +-
.../src/components/pipelines/StageTaskName.jsx | 215 ++-
.../src/components/pipelines/TaskActivity.jsx | 658 +++++----
.../pipelines/pipeline-settings/refdiff.jsx | 171 ++-
.../components/validation/InputValidationError.jsx | 6 +-
.../src/components/widgets/PipelineIndicator.jsx | 257 +++-
config-ui/src/config/environment.js | 4 +-
config-ui/src/config/gitlabApiProxy.js | 8 +-
config-ui/src/config/jiraApiProxy.js | 5 +-
config-ui/src/config/migration.js | 7 +-
config-ui/src/data/BlueprintWorkflow.js | 24 +-
config-ui/src/data/DataEntities.js | 4 +-
config-ui/src/data/DataScopes.js | 4 +-
config-ui/src/data/NullBlueprint.js | 14 +-
config-ui/src/data/NullBlueprintConnection.js | 9 +-
config-ui/src/data/NullConnection.js | 6 +-
config-ui/src/data/NullPipelineRun.js | 8 +-
config-ui/src/data/NullPipelineTask.js | 7 +-
config-ui/src/data/NullProvider.js | 8 +-
config-ui/src/data/NullSettings.js | 6 +-
config-ui/src/data/Providers.js | 80 +-
config-ui/src/data/Task.js | 10 +-
config-ui/src/data/TestBlueprintDetail.js | 111 +-
config-ui/src/data/collectionDefaults.js | 4 +-
config-ui/src/data/integrations.jsx | 74 +-
config-ui/src/data/pipeline-config-samples/dbt.js | 4 +-
.../src/data/pipeline-config-samples/default.js | 4 +-
.../src/data/pipeline-config-samples/feishu.js | 4 +-
.../data/pipeline-config-samples/gitextractor.js | 4 +-
.../src/data/pipeline-config-samples/github.js | 24 +-
.../src/data/pipeline-config-samples/gitlab.js | 22 +-
.../src/data/pipeline-config-samples/jenkins.js | 4 +-
config-ui/src/data/pipeline-config-samples/jira.js | 4 +-
.../src/data/pipeline-config-samples/refdiff.js | 4 +-
.../src/data/pipeline-config-samples/starrocks.js | 4 +-
config-ui/src/hooks/useBlueprintManager.jsx | 670 ++++++----
config-ui/src/hooks/useBlueprintValidation.jsx | 137 +-
config-ui/src/hooks/useConnectionManager.jsx | 435 +++---
config-ui/src/hooks/useConnectionValidation.jsx | 38 +-
config-ui/src/hooks/useDataScopesManager.jsx | 562 +++++---
config-ui/src/hooks/useDatabaseMigrations.jsx | 15 +-
config-ui/src/hooks/useGitlab.jsx | 70 +-
config-ui/src/hooks/useIntegrations.jsx | 7 +-
config-ui/src/hooks/useJIRA.jsx | 208 ++-
config-ui/src/hooks/useNetworkOfflineMode.jsx | 5 +-
config-ui/src/hooks/usePaginator.jsx | 89 +-
config-ui/src/hooks/usePipelineManager.jsx | 153 ++-
config-ui/src/hooks/usePipelineValidation.jsx | 32 +-
config-ui/src/hooks/useSettingsManager.jsx | 130 +-
config-ui/src/hooks/useWebhookManager.jsx | 32 +-
config-ui/src/index.js | 5 +-
config-ui/src/models/Connection.js | 8 +-
config-ui/src/models/ConnectionTest.js | 16 +-
config-ui/src/models/DataScopeConnection.js | 6 +-
config-ui/src/models/GithubProject.js | 11 +-
config-ui/src/models/GitlabProject.js | 8 +-
config-ui/src/models/JiraBoard.js | 28 +-
config-ui/src/models/ProviderListConnection.js | 6 +-
config-ui/src/models/TransformationSettings.js | 6 +-
config-ui/src/pages/api/getenv/[key].js | 2 +-
config-ui/src/pages/api/setenv/[key]/[value].js | 2 +-
config-ui/src/pages/api/triggers/pendings.js | 2 +-
config-ui/src/pages/api/triggers/task.js | 2 +-
.../src/pages/blueprints/blueprint-detail.jsx | 325 +++--
.../src/pages/blueprints/blueprint-settings.jsx | 728 +++++-----
.../src/pages/blueprints/create-blueprint.jsx | 388 +++---
config-ui/src/pages/blueprints/index.jsx | 244 ++--
.../pages/configure/connections/AddConnection.jsx | 50 +-
.../configure/connections/ConfigureConnection.jsx | 257 ++--
.../pages/configure/connections/ConnectionForm.jsx | 184 ++-
.../pages/configure/connections/EditConnection.jsx | 171 ---
.../configure/connections/GenerateTokenForm.jsx | 58 +-
config-ui/src/pages/configure/index.jsx | 193 ---
.../src/pages/configure/integration/index.jsx | 40 +-
.../src/pages/configure/integration/manage.jsx | 257 +++-
config-ui/src/pages/configure/mock-data/boards.jsx | 4 +-
.../src/pages/configure/mock-data/connections.jsx | 6 +-
config-ui/src/pages/configure/mock-data/epics.jsx | 6 +-
.../pages/configure/mock-data/granularities.jsx | 6 +-
.../src/pages/configure/mock-data/jira/fields.js | 50 +-
.../pages/configure/mock-data/jira/issueTypes.js | 6 +-
.../src/pages/configure/mock-data/projects.jsx | 6 +-
config-ui/src/pages/configure/settings/github.jsx | 362 +++--
config-ui/src/pages/configure/settings/gitlab.jsx | 10 +-
config-ui/src/pages/configure/settings/jenkins.jsx | 11 +-
config-ui/src/pages/configure/settings/jira.jsx | 708 +++++++---
.../pages/configure/settings/jira/MappingTag.jsx | 24 +-
config-ui/src/pages/configure/settings/tapd.jsx | 28 +-
config-ui/src/pages/connections/index.jsx | 6 +-
.../src/pages/connections/webhook/add-modal.jsx | 16 +-
config-ui/src/pages/connections/webhook/index.jsx | 39 +-
config-ui/src/pages/connections/webhook/styled.js | 3 +-
.../connections/webhook/view-or-edit-modal.jsx | 17 +-
config-ui/src/pages/offline/index.jsx | 391 ++++--
config-ui/src/pages/pipelines/activity.jsx | 813 ------------
config-ui/src/pages/pipelines/create.jsx | 1399 --------------------
config-ui/src/pages/pipelines/empty | 0
config-ui/src/pages/pipelines/index.jsx | 704 ----------
config-ui/src/pages/triggers/index.jsx | 249 ----
config-ui/src/utils/config.js | 4 +-
config-ui/src/utils/connectionsUtil.js | 4 +-
config-ui/src/utils/parseMapping.js | 2 +-
config-ui/src/utils/request.js | 73 +-
config-ui/src/utils/triggersUtil.js | 2 +-
158 files changed, 7686 insertions(+), 7742 deletions(-)
diff --git a/config-ui/.eslintrc b/config-ui/.eslintrc
index 09f9b104..98faab0e 100644
--- a/config-ui/.eslintrc
+++ b/config-ui/.eslintrc
@@ -25,6 +25,12 @@
"header",
"prettier"
],
+ "parserOptions": {
+ "ecmaVersion": 6,
+ "ecmaFeatures": {
+ "jsx": true
+ }
+ },
"settings": {
"import/resolver": {
"alias": {
@@ -49,8 +55,22 @@
"rules": {
"prettier/prettier": ["warn"],
"camelcase": "off",
+ "semi": ["error", "never"],
"max-len": [1, 140, 2],
+ "react-hooks/rules-of-hooks": "error",
+ "react-hooks/exhaustive-deps": "warn",
"react/jsx-indent": ["error", 2],
+ "react/jsx-wrap-multilines": 0,
+ "react/jsx-first-prop-new-line": [2, "multiline"],
+ "react/jsx-max-props-per-line": [
+ 2,
+ { "maximum": 1, "when": "multiline" }
+ ],
+ "react/jsx-indent-props": [2, 2],
+ "react/jsx-closing-bracket-location": [
+ 2,
+ "tag-aligned"
+ ],
"import/no-named-as-default": "off",
"comma-dangle": "off",
"react/prop-types": "off",
diff --git a/config-ui/.prettierrc.js b/config-ui/.prettierrc.js
index edcba14e..084bcd8e 100644
--- a/config-ui/.prettierrc.js
+++ b/config-ui/.prettierrc.js
@@ -17,9 +17,15 @@
*/
module.exports = {
- printWidth: 140,
+ printWidth: 80,
singleQuote: true,
+ singleAttributePerLine: false,
jsxSingleQuote: true,
trailingComma: 'none',
semi: false,
+ bracketSpacing: true,
+ useTabs: false,
+ tabWidth: 2,
+ bracketSameLine: false,
+ arrowParens: 'always'
}
diff --git a/config-ui/src/App.js b/config-ui/src/App.js
index ae50bfed..0ee04a5b 100644
--- a/config-ui/src/App.js
+++ b/config-ui/src/App.js
@@ -17,10 +17,7 @@
*/
import React, { useEffect, useState, useCallback } from 'react'
-import {
- BrowserRouter as Router,
- Route
-} from 'react-router-dom'
+import { BrowserRouter as Router, Route } from 'react-router-dom'
import 'normalize.css'
import '@/styles/app.scss'
@@ -35,17 +32,11 @@ import '@fontsource/inter/variable-full.css'
import useDatabaseMigrations from '@/hooks/useDatabaseMigrations'
import ErrorBoundary from '@/components/ErrorBoundary'
-// import Configure from './pages/configure/index'
import Integration from '@/pages/configure/integration/index'
import ManageIntegration from '@/pages/configure/integration/manage'
import AddConnection from '@/pages/configure/connections/AddConnection'
-// import EditConnection from '@/pages/configure/connections/EditConnection'
import ConfigureConnection from '@/pages/configure/connections/ConfigureConnection'
-// import Triggers from '@/pages/triggers/index'
import Offline from '@/pages/offline/index'
-// import Pipelines from '@/pages/pipelines/index'
-// import CreatePipeline from '@/pages/pipelines/create'
-// import PipelineActivity from '@/pages/pipelines/activity'
import Blueprints from '@/pages/blueprints/index'
import CreateBlueprint from '@/pages/blueprints/create-blueprint'
import BlueprintDetail from '@/pages/blueprints/blueprint-detail'
@@ -54,7 +45,7 @@ import Connections from '@/pages/connections/index'
import { Webhook as WebhookConnection } from '@/pages/connections/webhook'
import MigrationAlertDialog from '@/components/MigrationAlertDialog'
-function App (props) {
+function App(props) {
const {
isProcessing,
migrationWarning,
@@ -136,7 +127,6 @@ function App (props) {
hasFailed={hasMigrationFailed}
/>
</Router>
-
)
}
diff --git a/config-ui/src/components/Breadcrumbs.jsx b/config-ui/src/components/Breadcrumbs.jsx
index 14c4cf97..cb05ed57 100644
--- a/config-ui/src/components/Breadcrumbs.jsx
+++ b/config-ui/src/components/Breadcrumbs.jsx
@@ -16,12 +16,7 @@
*
*/
import React from 'react'
-import {
- Breadcrumbs,
- Breadcrumb,
- Icon,
- Colors,
-} from '@blueprintjs/core'
+import { Breadcrumbs, Breadcrumb, Icon, Colors } from '@blueprintjs/core'
import '@/styles/breadcrumbs.scss'
const AppCrumbs = (props) => {
@@ -32,7 +27,11 @@ const AppCrumbs = (props) => {
}
const renderCurrentBreadcrumb = ({ text, ...restProps }) => {
- return <Breadcrumb {...restProps}>{text} <Icon icon='symbol-circle' size={4} color={Colors.GREEN3} /></Breadcrumb>
+ return (
+ <Breadcrumb {...restProps}>
+ {text} <Icon icon='symbol-circle' size={4} color={Colors.GREEN3} />
+ </Breadcrumb>
+ )
}
return (
diff --git a/config-ui/src/components/ClearButton.jsx b/config-ui/src/components/ClearButton.jsx
index 1ef0acad..63c272c5 100644
--- a/config-ui/src/components/ClearButton.jsx
+++ b/config-ui/src/components/ClearButton.jsx
@@ -18,7 +18,12 @@
import React from 'react'
import { Button, Intent } from '@blueprintjs/core'
-const ClearButton = ({ onClick, minimal = true, intent = Intent.NONE, disabled = false }) => {
+const ClearButton = ({
+ onClick,
+ minimal = true,
+ intent = Intent.NONE,
+ disabled = false
+}) => {
return (
<Button
disabled={disabled}
diff --git a/config-ui/src/components/ErrorBoundary.jsx b/config-ui/src/components/ErrorBoundary.jsx
index daefc1a7..dca0ecf1 100644
--- a/config-ui/src/components/ErrorBoundary.jsx
+++ b/config-ui/src/components/ErrorBoundary.jsx
@@ -17,7 +17,14 @@
*/
import React, { Fragment } from 'react'
import { withRouter } from 'react-router-dom'
-import { Button, Intent, Icon, Colors, Elevation, Card } from '@blueprintjs/core'
+import {
+ Button,
+ Intent,
+ Icon,
+ Colors,
+ Elevation,
+ Card
+} from '@blueprintjs/core'
import Nav from '@/components/Nav'
import Sidebar from '@/components/Sidebar'
import AppCrumbs from '@/components/Breadcrumbs'
@@ -27,7 +34,7 @@ import { ReactComponent as Logo } from '@/images/devlake-logo.svg'
import { ReactComponent as LogoText } from '@/images/devlake-textmark.svg'
class ErrorBoundary extends React.Component {
- constructor (props) {
+ constructor(props) {
super(props)
this.state = {
hasError: false,
@@ -36,16 +43,16 @@ class ErrorBoundary extends React.Component {
}
}
- static getDerivedStateFromError (error) {
+ static getDerivedStateFromError(error) {
console.log('>>> DEVLAKE APP ERROR:', error)
return { hasError: true, error: error }
}
- componentDidCatch (error, errorInfo) {
+ componentDidCatch(error, errorInfo) {
console.log('>>> DEVLAKE ERROR STACKTRACE:', errorInfo, error)
}
- render () {
+ render() {
if (this.state.hasError) {
return (
<>
@@ -58,24 +65,45 @@ class ErrorBoundary extends React.Component {
<div>
<div className='devlake-logo' style={{ margin: 0 }}>
<Logo width={48} height={48} className='logo' />
- <LogoText width={100} height={13} className='logo-textmark' />
+ <LogoText
+ width={100}
+ height={13}
+ className='logo-textmark'
+ />
</div>
<h1 style={{ margin: 0, textAlign: 'center' }}>
Application Error
</h1>
- <Card elevation={Elevation.TWO} style={{ margin: '18px 0', maxWidth: '700px' }}>
+ <Card
+ elevation={Elevation.TWO}
+ style={{ margin: '18px 0', maxWidth: '700px' }}
+ >
<h2 style={{ margin: 0 }}>
- <span style={{ display: 'inline-block', marginRight: '10px' }}>
+ <span
+ style={{
+ display: 'inline-block',
+ marginRight: '10px'
+ }}
+ >
<Icon icon='error' color={Colors.RED5} size={16} />
</span>
{this.state.error?.toString() || 'Unknown Error'}
</h2>
<p style={{ margin: 0 }}>
- Please try again, if the problem persists include the above error message when filing a bug report on <strong>GitHub</strong>.
- You can also message us on <strong>Slack</strong> to engage with community members for solutions to common issues.
+ Please try again, if the problem persists include the
+ above error message when filing a bug report on{' '}
+ <strong>GitHub</strong>. You can also message us on{' '}
+ <strong>Slack</strong> to engage with community
+ members for solutions to common issues.
</p>
- <p style={{ margin: '18px 0 0 0', textAlign: 'center' }}>
- <Button onClick={() => this.props.history.push('/')} text='Continue' intent={Intent.PRIMARY} />
+ <p
+ style={{ margin: '18px 0 0 0', textAlign: 'center' }}
+ >
+ <Button
+ onClick={() => this.props.history.push('/')}
+ text='Continue'
+ intent={Intent.PRIMARY}
+ />
<a
href='https://github.com/apache/incubator-devlake'
className='bp3-button bp3-outlined'
diff --git a/config-ui/src/components/MigrationAlertDialog.jsx b/config-ui/src/components/MigrationAlertDialog.jsx
index ed1e1895..02837459 100644
--- a/config-ui/src/components/MigrationAlertDialog.jsx
+++ b/config-ui/src/components/MigrationAlertDialog.jsx
@@ -23,7 +23,7 @@ import {
Colors,
Dialog,
Intent,
- Elevation,
+ Elevation
} from '@blueprintjs/core'
import ContentLoader from '@/components/loaders/ContentLoader'
@@ -48,7 +48,9 @@ const MigrationAlertDialog = (props) => {
outlined: true
},
confirmButtonOpts = {
- text: props.hasFailed ? MigrationOptions.AlertDialog.confirmRetryBtnText : MigrationOptions.AlertDialog.confirmBtnText,
+ text: props.hasFailed
+ ? MigrationOptions.AlertDialog.confirmRetryBtnText
+ : MigrationOptions.AlertDialog.confirmBtnText,
intent: props.hasFailed ? Intent.WARNING : Intent.PRIMARY,
icon: props.hasFailed ? 'error' : null
},
@@ -56,7 +58,7 @@ const MigrationAlertDialog = (props) => {
icon: 'small-tick',
text: MigrationOptions.AlertDialog.continueBtnText,
intent: Intent.SUCCESS
- },
+ }
} = props
return (
@@ -74,15 +76,16 @@ const MigrationAlertDialog = (props) => {
>
<div className={Classes.DIALOG_BODY}>
{!isMigrating && hasFailed && (
- <>
- <p style={{ margin: 0, padding: 0, color: Colors.RED4 }}>
- <strong>Database Migration Failed!</strong>
- </p>
- <p style={{ margin: 0, padding: 0 }}>
- There was a problem running migrations, please check server logs for details.{' '}
- You may also try again, if the problem persists please file an issue on <strong>GitHub</strong>.
- </p>
- </>
+ <>
+ <p style={{ margin: 0, padding: 0, color: Colors.RED4 }}>
+ <strong>Database Migration Failed!</strong>
+ </p>
+ <p style={{ margin: 0, padding: 0 }}>
+ There was a problem running migrations, please check server logs
+ for details. You may also try again, if the problem persists
+ please file an issue on <strong>GitHub</strong>.
+ </p>
+ </>
)}
{!isMigrating && wasSuccessful ? (
<>
@@ -101,7 +104,11 @@ const MigrationAlertDialog = (props) => {
<ContentLoader
title='Running Migrations...'
elevation={Elevation.ZERO}
- cardStyleOverrides={{ backgroundColor: 'transparent', marginBottom: 0, fontSize: '12px' }}
+ cardStyleOverrides={{
+ backgroundColor: 'transparent',
+ marginBottom: 0,
+ fontSize: '12px'
+ }}
messageClasses={['bp3-ui-text']}
message={
<>
@@ -120,8 +127,8 @@ const MigrationAlertDialog = (props) => {
</p>
<p style={{ margin: 0, padding: 0 }}>
A Database migration is required to launch{' '}
- <strong>DevLake</strong>, to proceed, please send a request
- to{' '}
+ <strong>DevLake</strong>, to proceed, please send a
+ request to{' '}
<code style={{ backgroundColor: '#eeeeee' }}>
<config-ui-endpoint>/api/proceed-db-migration
</code>{' '}
@@ -142,10 +149,7 @@ const MigrationAlertDialog = (props) => {
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
{wasSuccessful ? (
<>
- <Button
- onClick={onClose}
- {...continueButtonOpts}
- />
+ <Button onClick={onClose} {...continueButtonOpts} />
</>
) : (
<>
diff --git a/config-ui/src/components/Nav.jsx b/config-ui/src/components/Nav.jsx
index 39983b50..403c9d7e 100644
--- a/config-ui/src/components/Nav.jsx
+++ b/config-ui/src/components/Nav.jsx
@@ -16,13 +16,7 @@
*
*/
import React from 'react'
-import {
- Alignment,
- Position,
- Popover,
- Navbar,
- Icon,
-} from '@blueprintjs/core'
+import { Alignment, Position, Popover, Navbar, Icon } from '@blueprintjs/core'
import '@/styles/nav.scss'
import { ReactComponent as SlackIcon } from '@/images/slack-mark-monochrome-black.svg'
import { ReactComponent as SlackLogo } from '@/images/slack-rgb.svg'
@@ -31,11 +25,21 @@ const Nav = () => {
return (
<Navbar className='navbar'>
<Navbar.Group align={Alignment.RIGHT}>
- <a href='https://github.com/apache/incubator-devlake' rel='noreferrer' target='_blank' className='navIconLink'>
+ <a
+ href='https://github.com/apache/incubator-devlake'
+ rel='noreferrer'
+ target='_blank'
+ className='navIconLink'
+ >
<Icon icon='git-branch' size={16} />
</a>
<Navbar.Divider />
- <a href='mailto:hello@merico.dev' rel='noreferrer' target='_blank' className='navIconLink'>
+ <a
+ href='mailto:hello@merico.dev'
+ rel='noreferrer'
+ target='_blank'
+ className='navIconLink'
+ >
<Icon icon='envelope' size={16} />
</a>
<Navbar.Divider />
@@ -45,12 +49,25 @@ const Nav = () => {
</a> */}
{/* SLACK: ENABLED (Primary) */}
<Popover position={Position.LEFT}>
- <SlackIcon className='slackIcon' width={16} height={16} style={{ cursor: 'pointer' }} />
+ <SlackIcon
+ className='slackIcon'
+ width={16}
+ height={16}
+ style={{ cursor: 'pointer' }}
+ />
<>
- <div style={{ maxWidth: '200px', padding: '10px', fontSize: '11px' }}>
- <SlackLogo width={131} height={49} style={{ display: 'block', margin: '0 auto' }} />
+ <div
+ style={{ maxWidth: '200px', padding: '10px', fontSize: '11px' }}
+ >
+ <SlackLogo
+ width={131}
+ height={49}
+ style={{ display: 'block', margin: '0 auto' }}
+ />
<p style={{ textAlign: 'center' }}>
- Want to interact with the <strong>Merico Community</strong>? Join us on our Slack Channel.<br />
+ Want to interact with the <strong>Merico Community</strong>?
+ Join us on our Slack Channel.
+ <br />
<a
href='https://join.slack.com/t/devlake-io/shared_invite/zt-17b6vuvps-x98pqseoUagM7EAmKC82xQ'
rel='noreferrer'
diff --git a/config-ui/src/components/NoData.jsx b/config-ui/src/components/NoData.jsx
index 88b4f183..a3fb1f48 100644
--- a/config-ui/src/components/NoData.jsx
+++ b/config-ui/src/components/NoData.jsx
@@ -25,7 +25,7 @@ const NoData = (props) => {
icon = 'offline',
iconSize = 32,
actionText = 'Go Back',
- onClick = () => {},
+ onClick = () => {}
} = props
return (
diff --git a/config-ui/src/components/SaveAlert.jsx b/config-ui/src/components/SaveAlert.jsx
index 424a1747..67941265 100644
--- a/config-ui/src/components/SaveAlert.jsx
+++ b/config-ui/src/components/SaveAlert.jsx
@@ -28,9 +28,12 @@ const SaveAlert = ({ alertOpen, onClose }) => {
onClose={onClose}
intent={Intent.PRIMARY}
>
- <h2 style={{ fontWeight: 'bold' }}><span style={{ fontWeight: 800 }}>API</span> Configuration Updated</h2>
+ <h2 style={{ fontWeight: 'bold' }}>
+ <span style={{ fontWeight: 800 }}>API</span> Configuration Updated
+ </h2>
<p style={{ fontSize: '16px', color: '#E8471C' }}>
- To apply new configuration, <strong>restart</strong> devlake by running <code>docker-compose up -d</code>.
+ To apply new configuration, <strong>restart</strong> devlake by running{' '}
+ <code>docker-compose up -d</code>.
</p>
<TextArea
readOnly
@@ -39,7 +42,8 @@ const SaveAlert = ({ alertOpen, onClose }) => {
style={{
fontSize: '13px',
resize: 'none',
- boxShadow: '0 0 0 1px #e8471c, 0 0 0 3px rgba(232, 71, 28, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2)'
+ boxShadow:
+ '0 0 0 1px #e8471c, 0 0 0 3px rgba(232, 71, 28, 0.3), inset 0 1px 1px rgba(16, 22, 26, 0.2)'
}}
growVertically={false}
autoFocus
@@ -47,8 +51,8 @@ const SaveAlert = ({ alertOpen, onClose }) => {
docker-compose up -d
</TextArea>
<p style={{ marginTop: '10px' }}>
- Click <strong>ESC</strong> or <strong>Continue</strong>
- when ready after running the command shown above.
+ Click <strong>ESC</strong> or <strong>Continue</strong> when ready
+ after running the command shown above.
</p>
</Alert>
)
diff --git a/config-ui/src/components/Sidebar.jsx b/config-ui/src/components/Sidebar.jsx
index cf4de233..496a4b4c 100644
--- a/config-ui/src/components/Sidebar.jsx
+++ b/config-ui/src/components/Sidebar.jsx
@@ -18,7 +18,7 @@
import React, { useEffect, useState } from 'react'
import {
// BrowserRouter as Router,
- useRouteMatch,
+ useRouteMatch
} from 'react-router-dom'
import { Card, Elevation } from '@blueprintjs/core'
import request from '@/utils/request'
@@ -44,7 +44,7 @@ const Sidebar = () => {
const fetchVersion = async () => {
try {
const versionUrl = `${DEVLAKE_ENDPOINT}/version`
- const res = await request.get(versionUrl).catch(e => {
+ const res = await request.get(versionUrl).catch((e) => {
console.log('>>> API VERSION ERROR...', e)
setVersionTag('')
})
@@ -57,7 +57,11 @@ const Sidebar = () => {
}, [])
return (
- <Card interactive={false} elevation={Elevation.ZERO} className='card sidebar-card'>
+ <Card
+ interactive={false}
+ elevation={Elevation.ZERO}
+ className='card sidebar-card'
+ >
<div className='devlake-logo'>
<Logo width={48} height={48} className='logo' />
<LogoText width={100} height={13} className='logo-textmark' />
@@ -82,7 +86,8 @@ const Sidebar = () => {
<SidebarMenu menu={menu} />
<span className='copyright-tag'>
{/* <span className='version-tag'>{versionTag || ''}</span><br /> */}
- <strong>Apache 2.0 License</strong><br />
+ <strong>Apache 2.0 License</strong>
+ <br />
</span>
</Card>
)
diff --git a/config-ui/src/components/Sidebar/MenuConfiguration.jsx b/config-ui/src/components/Sidebar/MenuConfiguration.jsx
index ea70c611..aed02bc0 100644
--- a/config-ui/src/components/Sidebar/MenuConfiguration.jsx
+++ b/config-ui/src/components/Sidebar/MenuConfiguration.jsx
@@ -25,7 +25,8 @@ const MenuConfiguration = (activeRoute) => {
id: 0,
label: 'Data Integrations',
route: '/integrations',
- active: activeRoute.url.startsWith('/integrations') || activeRoute.url === '/',
+ active:
+ activeRoute.url.startsWith('/integrations') || activeRoute.url === '/',
icon: 'data-connection',
classNames: [],
children: [
@@ -33,49 +34,61 @@ const MenuConfiguration = (activeRoute) => {
id: 0,
label: ProviderLabels.JIRA,
route: '/integrations/jira',
- active: activeRoute.url.endsWith('/integrations/jira') || activeRoute.url.endsWith('/jira'),
+ active:
+ activeRoute.url.endsWith('/integrations/jira') ||
+ activeRoute.url.endsWith('/jira'),
icon: 'layers',
- classNames: [],
+ classNames: []
},
{
id: 1,
label: ProviderLabels.GITHUB,
route: '/integrations/github',
- active: activeRoute.url.endsWith('/integrations/github') || activeRoute.url.endsWith('/github'),
+ active:
+ activeRoute.url.endsWith('/integrations/github') ||
+ activeRoute.url.endsWith('/github'),
icon: 'layers',
- classNames: [],
+ classNames: []
},
{
id: 2,
label: ProviderLabels.GITLAB,
route: '/integrations/gitlab',
- active: activeRoute.url.endsWith('/integrations/gitlab') || activeRoute.url.endsWith('/gitlab'),
+ active:
+ activeRoute.url.endsWith('/integrations/gitlab') ||
+ activeRoute.url.endsWith('/gitlab'),
icon: 'layers',
- classNames: [],
+ classNames: []
},
{
id: 3,
label: ProviderLabels.JENKINS,
route: '/integrations/jenkins',
- active: activeRoute.url.endsWith('/integrations/jenkins') || activeRoute.url.endsWith('/jenkins'),
+ active:
+ activeRoute.url.endsWith('/integrations/jenkins') ||
+ activeRoute.url.endsWith('/jenkins'),
icon: 'layers',
- classNames: [],
+ classNames: []
},
{
id: 4,
label: `${ProviderLabels.TAPD} (beta)`,
route: '/integrations/tapd',
- active: activeRoute.url.endsWith('/integrations/tapd') || activeRoute.url.endsWith('/tapd'),
+ active:
+ activeRoute.url.endsWith('/integrations/tapd') ||
+ activeRoute.url.endsWith('/tapd'),
icon: 'layers',
- classNames: [],
+ classNames: []
},
{
id: 5,
label: 'Webhook',
route: '/connections/webhook',
- active: activeRoute.url.endsWith('/connections/webhook') || activeRoute.url.endsWith('/webhook'),
+ active:
+ activeRoute.url.endsWith('/connections/webhook') ||
+ activeRoute.url.endsWith('/webhook'),
icon: 'layers',
- classNames: [],
+ classNames: []
}
]
},
@@ -93,8 +106,8 @@ const MenuConfiguration = (activeRoute) => {
route: '/blueprints/create',
active: activeRoute.url.endsWith('/blueprints/create'),
icon: 'git-pull',
- classNames: [],
- },
+ classNames: []
+ }
]
},
{
@@ -105,8 +118,7 @@ const MenuConfiguration = (activeRoute) => {
classNames: [],
route: '/connections',
active: activeRoute.url === '/connections',
- children: [
- ]
+ children: []
},
{
id: 2,
@@ -115,9 +127,8 @@ const MenuConfiguration = (activeRoute) => {
classNames: [],
route: GRAFANA_URL,
active: false,
- children: [
- ]
- },
+ children: []
+ }
// {
// id: 3,
// label: 'Pipelines',
diff --git a/config-ui/src/components/Sidebar/SidebarMenu.jsx b/config-ui/src/components/Sidebar/SidebarMenu.jsx
index af1b3fd4..6b1a38db 100644
--- a/config-ui/src/components/Sidebar/SidebarMenu.jsx
+++ b/config-ui/src/components/Sidebar/SidebarMenu.jsx
@@ -23,49 +23,46 @@ const SidebarMenu = (props) => {
const { menu } = props
// const activeRoute = useRouteMatch()
- useEffect(() => {
-
- }, [menu])
+ useEffect(() => {}, [menu])
return (
<>
<Menu className='sidebarMenu' style={{ marginTop: '10px' }}>
- {menu.map((m, mIdx) => (
- m.children.length === 0
- ? (
- <Menu.Item
- active={m.active}
- key={`menu-item-key${mIdx}`}
- icon={m.icon}
- text={m.label}
- href={m.route}
- target={m.target}
- disabled={m.disabled}
- />
- )
- : (
- <Menu.Item
- className='is-submenu has-children'
- active={m.active}
- key={`menu-item-key${mIdx}`}
- text={m.label}
- icon={m.icon}
- href={m.route}
- disabled={m.disabled}
- >
- {m.children.map((mS, mSidx) => (
- <Menu.Item
- active={mS.active}
- key={`submenu-${mIdx}-item-key${mSidx}`}
- href={mS.route}
- icon={mS.icon}
- text={mS.label}
- disabled={mS.disabled}
- // className={mS.classNames.join(' ')}
- />))}
- </Menu.Item>
- )
- ))}
+ {menu.map((m, mIdx) =>
+ m.children.length === 0 ? (
+ <Menu.Item
+ active={m.active}
+ key={`menu-item-key${mIdx}`}
+ icon={m.icon}
+ text={m.label}
+ href={m.route}
+ target={m.target}
+ disabled={m.disabled}
+ />
+ ) : (
+ <Menu.Item
+ className='is-submenu has-children'
+ active={m.active}
+ key={`menu-item-key${mIdx}`}
+ text={m.label}
+ icon={m.icon}
+ href={m.route}
+ disabled={m.disabled}
+ >
+ {m.children.map((mS, mSidx) => (
+ <Menu.Item
+ active={mS.active}
+ key={`submenu-${mIdx}-item-key${mSidx}`}
+ href={mS.route}
+ icon={mS.icon}
+ text={mS.label}
+ disabled={mS.disabled}
+ // className={mS.classNames.join(' ')}
+ />
+ ))}
+ </Menu.Item>
+ )
+ )}
<Menu.Divider />
</Menu>
</>
diff --git a/config-ui/src/components/Toast.jsx b/config-ui/src/components/Toast.jsx
index 4eeb640b..f3680fa3 100644
--- a/config-ui/src/components/Toast.jsx
+++ b/config-ui/src/components/Toast.jsx
@@ -19,5 +19,5 @@ import { Position, Toaster } from '@blueprintjs/core'
export const ToastNotification = Toaster.create({
className: 'default-toaster',
- position: Position.BOTTOM,
+ position: Position.BOTTOM
})
diff --git a/config-ui/src/components/actions/DeleteAction.jsx b/config-ui/src/components/actions/DeleteAction.jsx
index 730e3f2b..e8f02a07 100644
--- a/config-ui/src/components/actions/DeleteAction.jsx
+++ b/config-ui/src/components/actions/DeleteAction.jsx
@@ -18,7 +18,8 @@
import React, { Fragment } from 'react'
import {
- Button, Colors,
+ Button,
+ Colors,
Position,
Icon,
Intent,
@@ -63,7 +64,13 @@ const DeleteAction = (props) => {
<>
<div style={{ padding: '15px 20px 15px 15px' }}>
{children}
- <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 15 }}>
+ <div
+ style={{
+ display: 'flex',
+ justifyContent: 'flex-end',
+ marginTop: 15
+ }}
+ >
<Button
className={Classes.POPOVER2_DISMISS}
style={{ marginRight: 10 }}
diff --git a/config-ui/src/components/actions/DeleteConfirmationMessage.jsx b/config-ui/src/components/actions/DeleteConfirmationMessage.jsx
index 1b2f7c48..7ff45296 100644
--- a/config-ui/src/components/actions/DeleteConfirmationMessage.jsx
+++ b/config-ui/src/components/actions/DeleteConfirmationMessage.jsx
@@ -23,9 +23,7 @@ const DeleteConfirmationMessage = (props) => {
<>
<h3>{title}</h3>
<p className='confirmation-text'>
- <strong>
- Are you sure you want to continue?
- </strong>
+ <strong>Are you sure you want to continue?</strong>
This instance will be permanently deleted and cannot be restored.
</p>
</>
diff --git a/config-ui/src/components/blueprints/AddBlueprintDialog.jsx b/config-ui/src/components/blueprints/AddBlueprintDialog.jsx
index aed0fa21..de655ca1 100644
--- a/config-ui/src/components/blueprints/AddBlueprintDialog.jsx
+++ b/config-ui/src/components/blueprints/AddBlueprintDialog.jsx
@@ -35,7 +35,7 @@ import {
Radio,
RadioGroup,
Switch,
- Tooltip,
+ Tooltip
} from '@blueprintjs/core'
import { Select } from '@blueprintjs/select'
import InputValidationError from '@/components/validation/InputValidationError'
@@ -76,7 +76,7 @@ const AddBlueprintDialog = (props) => {
isValidBlueprint = false,
pipelines = [],
detectedProviders = [],
- tasksLocked = false,
+ tasksLocked = false
} = props
useEffect(() => {}, [enable, cronConfig, customCronConfig])
@@ -118,7 +118,7 @@ const AddBlueprintDialog = (props) => {
style={{
display: 'inline',
marginRight: 0,
- fontWeight: 'bold',
+ fontWeight: 'bold'
}}
>
Blueprint Name
@@ -146,27 +146,25 @@ const AddBlueprintDialog = (props) => {
lineHeight: '18px',
marginRight: 0,
marginBottom: 0,
- fontWeight: 'bold',
+ fontWeight: 'bold'
}}
>
Frequency
<span className='requiredStar'>*</span>
</Label>
- {getCronPresetByConfig(cronConfig)
- ? (
- <small
- style={{
- fontSize: '10px',
- color: Colors.GRAY2,
- display: 'block',
- }}
- >
- {getCronPresetByConfig(cronConfig).description}
- </small>
- )
- : (
- ''
- )}
+ {getCronPresetByConfig(cronConfig) ? (
+ <small
+ style={{
+ fontSize: '10px',
+ color: Colors.GRAY2,
+ display: 'block'
+ }}
+ >
+ {getCronPresetByConfig(cronConfig).description}
+ </small>
+ ) : (
+ ''
+ )}
<RadioGroup
inline={true}
label={false}
@@ -180,7 +178,7 @@ const AddBlueprintDialog = (props) => {
getCronPreset('hourly'),
getCronPreset('daily'),
getCronPreset('weekly'),
- getCronPreset('monthly'),
+ getCronPreset('monthly')
].map((preset, prIdx) => (
<Radio
key={`cron-preset-tooltip-key${prIdx}`}
@@ -201,7 +199,7 @@ const AddBlueprintDialog = (props) => {
cronConfig === preset.cronConfig
? 'bold'
: 'normal',
- outline: 'none !important',
+ outline: 'none !important'
}}
/>
))}
@@ -209,7 +207,7 @@ const AddBlueprintDialog = (props) => {
label='Custom'
value='custom'
style={{
- fontWeight: cronConfig === 'custom' ? 'bold' : 'normal',
+ fontWeight: cronConfig === 'custom' ? 'bold' : 'normal'
}}
/>
</RadioGroup>
@@ -228,7 +226,7 @@ const AddBlueprintDialog = (props) => {
style={{
display: 'inline',
marginRight: 0,
- fontWeight: 'bold',
+ fontWeight: 'bold'
}}
>
Custom Schedule
@@ -240,18 +238,16 @@ const AddBlueprintDialog = (props) => {
id='cron-custom'
readOnly={cronConfig !== 'custom'}
leftElement={
- cronConfig !== 'custom'
- ? (
- <Icon
- icon='lock'
- size={11}
- style={{
- alignSelf: 'center',
- margin: '4px 10px -2px 6px',
- }}
- />
- )
- : null
+ cronConfig !== 'custom' ? (
+ <Icon
+ icon='lock'
+ size={11}
+ style={{
+ alignSelf: 'center',
+ margin: '4px 10px -2px 6px'
+ }}
+ />
+ ) : null
}
rightElement={
<InputValidationError
@@ -295,14 +291,14 @@ const AddBlueprintDialog = (props) => {
textShadow: 'none',
fontSize: '12px',
padding: '12px',
- maxWidth: '300px',
+ maxWidth: '300px'
}}
>
<div
style={{
marginBottom: '10px',
fontWeight: 700,
- fontSize: '14px',
+ fontSize: '14px'
}}
>
<Icon
@@ -345,15 +341,13 @@ const AddBlueprintDialog = (props) => {
</strong>
}
labelInfo={
- tasksLocked
- ? (
- ''
- )
- : (
- <span style={{ display: 'block' }}>
- Choose Pipeline Run Template for task configuration
- </span>
- )
+ tasksLocked ? (
+ ''
+ ) : (
+ <span style={{ display: 'block' }}>
+ Choose Pipeline Run Template for task configuration
+ </span>
+ )
}
inline={false}
labelFor='blueprint-tasks'
@@ -370,7 +364,7 @@ const AddBlueprintDialog = (props) => {
popoverProps={{
usePortal: false,
popoverClassName: 'blueprint-tasks-popover',
- fill: true,
+ fill: true
}}
inline={true}
fill={true}
@@ -379,7 +373,8 @@ const AddBlueprintDialog = (props) => {
itemPredicate={(query, item) =>
item?.title
?.toLowerCase()
- .indexOf(query.toLowerCase()) >= 0}
+ .indexOf(query.toLowerCase()) >= 0
+ }
itemRenderer={(item, { handleClick, modifiers }) => (
<MenuItem
active={modifiers.active}
@@ -420,7 +415,7 @@ const AddBlueprintDialog = (props) => {
justifyContent: 'space-between',
minWidth: '300px',
maxWidth: '460px',
- whiteSpace: 'nowrap',
+ whiteSpace: 'nowrap'
}}
text={
selectedPipelineTemplate
@@ -444,7 +439,8 @@ const AddBlueprintDialog = (props) => {
disabled={isSaving}
onClick={() =>
setSelectedPipelineTemplate(null) |
- setBlueprintTasks([])}
+ setBlueprintTasks([])
+ }
/>
</ButtonGroup>
)}
@@ -455,7 +451,8 @@ const AddBlueprintDialog = (props) => {
{!tasksLocked && tasks.length > 0 && (
<Button
onClick={() =>
- setBlueprintTasks([]) | setSelectedPipelineTemplate(null)}
+ setBlueprintTasks([]) | setSelectedPipelineTemplate(null)
+ }
icon='eraser'
round
minimal
@@ -476,7 +473,7 @@ const AddBlueprintDialog = (props) => {
style={{
display: 'inline',
marginRight: 0,
- fontWeight: 'bold',
+ fontWeight: 'bold'
}}
>
Enable Blueprint?
@@ -498,7 +495,7 @@ const AddBlueprintDialog = (props) => {
style={{
display: 'inline',
marginRight: 0,
- marginBottom: 0,
+ marginBottom: 0
}}
>
Next Run Date
@@ -547,7 +544,8 @@ const AddBlueprintDialog = (props) => {
icon='cloud-upload'
intent={Intent.PRIMARY}
onClick={() =>
- saveBlueprint(draftBlueprint ? draftBlueprint.id : null)}
+ saveBlueprint(draftBlueprint ? draftBlueprint.id : null)
+ }
>
{draftBlueprint ? 'Modify Blueprint' : 'Save Blueprint'}
</Button>
diff --git a/config-ui/src/components/blueprints/BlueprintDataScopesDialog.jsx b/config-ui/src/components/blueprints/BlueprintDataScopesDialog.jsx
index 59a11b0b..ff7fc34b 100644
--- a/config-ui/src/components/blueprints/BlueprintDataScopesDialog.jsx
+++ b/config-ui/src/components/blueprints/BlueprintDataScopesDialog.jsx
@@ -31,7 +31,7 @@ import {
Intent,
Label,
MenuItem,
- Position,
+ Position
} from '@blueprintjs/core'
import { NullBlueprint } from '@/data/NullBlueprint'
@@ -40,16 +40,17 @@ import DataTransformations from '@/components/blueprints/create-workflow/DataTra
const Modes = {
CREATE: 'create',
- EDIT: 'edit',
+ EDIT: 'edit'
}
const DialogPanel = (props) => {
- const {
- children
- } = props
+ const { children } = props
return (
- <div className={classNames(Classes.DIALOG_BODY)} style={{ minHeight: '300px' }}>
+ <div
+ className={classNames(Classes.DIALOG_BODY)}
+ style={{ minHeight: '300px' }}
+ >
{children}
</div>
)
@@ -124,7 +125,7 @@ const BlueprintDataScopesDialog = (props) => {
intent: Intent.PRIMARY,
text: 'Next Step',
outlined: true,
- loading: isFetchingJIRA || isFetchingGitlab || isSaving,
+ loading: isFetchingJIRA || isFetchingGitlab || isSaving
},
finalButtonProps = {
disabled: !isValid,
diff --git a/config-ui/src/components/blueprints/BlueprintDialog.jsx b/config-ui/src/components/blueprints/BlueprintDialog.jsx
index bee2ca84..207600d4 100644
--- a/config-ui/src/components/blueprints/BlueprintDialog.jsx
+++ b/config-ui/src/components/blueprints/BlueprintDialog.jsx
@@ -26,14 +26,14 @@ import {
Icon,
Intent,
Label,
- MenuItem,
+ MenuItem
} from '@blueprintjs/core'
import { NullBlueprint } from '@/data/NullBlueprint'
const Modes = {
CREATE: 'create',
- EDIT: 'edit',
+ EDIT: 'edit'
}
const BlueprintDialog = (props) => {
@@ -53,9 +53,7 @@ const BlueprintDialog = (props) => {
errors = []
} = props
- useEffect(() => {
-
- }, [content])
+ useEffect(() => {}, [content])
return (
<>
@@ -69,9 +67,7 @@ const BlueprintDialog = (props) => {
canOutsideClickClose={canOutsideClickClose}
style={{ backgroundColor: '#ffffff' }}
>
- <div className={Classes.DIALOG_BODY}>
- {content}
- </div>
+ <div className={Classes.DIALOG_BODY}>{content}</div>
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button
diff --git a/config-ui/src/components/blueprints/BlueprintNameCard.jsx b/config-ui/src/components/blueprints/BlueprintNameCard.jsx
index bf297792..b4fcd2de 100644
--- a/config-ui/src/components/blueprints/BlueprintNameCard.jsx
+++ b/config-ui/src/components/blueprints/BlueprintNameCard.jsx
@@ -39,12 +39,11 @@ const BlueprintNameCard = (props) => {
elevation={elevation}
style={{ width: '100%', ...cardStyle }}
>
-
<h3>
{advancedMode ? 'Advanced' : ''} Blueprint Name{' '}
<span className='required-star'>*</span>
</h3>
- {enableDivider && (<Divider className='section-divider' />)}
+ {enableDivider && <Divider className='section-divider' />}
<p>
Give your Blueprint a unique name to help you identify it in the future.
</p>
diff --git a/config-ui/src/components/blueprints/BlueprintNavigationLinks.jsx b/config-ui/src/components/blueprints/BlueprintNavigationLinks.jsx
index eda92b24..df964d9f 100644
--- a/config-ui/src/components/blueprints/BlueprintNavigationLinks.jsx
+++ b/config-ui/src/components/blueprints/BlueprintNavigationLinks.jsx
@@ -37,14 +37,19 @@ const BlueprintNavigationLinks = (props) => {
name: 'status',
label: 'Settings',
route: `/blueprints/settings/${blueprint?.id}`,
- active: activeRoute?.url.endsWith(`/blueprints/settings/${blueprint?.id}`)
+ active: activeRoute?.url.endsWith(
+ `/blueprints/settings/${blueprint?.id}`
+ )
}
]
} = props
- const routeToLocation = useCallback((route) => {
- history.push(route)
- }, [history])
+ const routeToLocation = useCallback(
+ (route) => {
+ history.push(route)
+ },
+ [history]
+ )
return (
<div
@@ -52,14 +57,19 @@ const BlueprintNavigationLinks = (props) => {
style={{
alignSelf: 'center',
display: 'flex',
- margin: '20px auto',
+ margin: '20px auto'
}}
>
{links.map((link) => (
- <div key={`blueprint-nav-link-key-${link?.id}`} style={{ marginRight: '10px' }}>
+ <div
+ key={`blueprint-nav-link-key-${link?.id}`}
+ style={{ marginRight: '10px' }}
+ >
<a
href='#'
- className={`blueprint-navigation-link ${link?.active ? 'active' : ''}`}
+ className={`blueprint-navigation-link ${
+ link?.active ? 'active' : ''
+ }`}
onClick={() => routeToLocation(link?.route)}
>
{link.label}
diff --git a/config-ui/src/components/blueprints/BlueprintsGrid.jsx b/config-ui/src/components/blueprints/BlueprintsGrid.jsx
index 2b5d302b..7b698c5c 100644
--- a/config-ui/src/components/blueprints/BlueprintsGrid.jsx
+++ b/config-ui/src/components/blueprints/BlueprintsGrid.jsx
@@ -19,8 +19,11 @@ import React, { useEffect, useCallback } from 'react'
import dayjs from '@/utils/time'
import {
ButtonGroup,
- Button, Icon, Intent,
- Card, Elevation,
+ Button,
+ Icon,
+ Intent,
+ Card,
+ Elevation,
PopoverInteractionKind,
Popover,
Tooltip,
@@ -59,9 +62,12 @@ const BlueprintsGrid = (props) => {
} = props
// eslint-disable-next-line no-unused-vars
- const getCronPreset = useCallback((presetName) => {
- return cronPresets.find(p => p.name === presetName)
- }, [cronPresets])
+ const getCronPreset = useCallback(
+ (presetName) => {
+ return cronPresets.find((p) => p.name === presetName)
+ },
+ [cronPresets]
+ )
useEffect(() => {
console.log('>> FILTER BLUEPRINTS BY INTERVAL....', activeFilterStatus)
@@ -78,50 +84,66 @@ const BlueprintsGrid = (props) => {
alignContent: 'flex-start'
}}
>
- <ButtonGroup className='filter-status-group blueprints-filter-group' style={{ zIndex: 0 }}>
+ <ButtonGroup
+ className='filter-status-group blueprints-filter-group'
+ style={{ zIndex: 0 }}
+ >
<Button
intent={!activeFilterStatus ? Intent.PRIMARY : Intent.NONE}
active={!activeFilterStatus}
onClick={() => onFilter(null)}
- >All
+ >
+ All
</Button>
<Button
- intent={activeFilterStatus === 'hourly' ? Intent.PRIMARY : Intent.NONE}
+ intent={
+ activeFilterStatus === 'hourly' ? Intent.PRIMARY : Intent.NONE
+ }
active={activeFilterStatus === 'hourly'}
onClick={() => onFilter('hourly')}
>
Hourly
</Button>
<Button
- intent={activeFilterStatus === 'daily' ? Intent.PRIMARY : Intent.NONE}
+ intent={
+ activeFilterStatus === 'daily' ? Intent.PRIMARY : Intent.NONE
+ }
active={activeFilterStatus === 'daily'}
onClick={() => onFilter('daily')}
>
Daily
</Button>
<Button
- intent={activeFilterStatus === 'weekly' ? Intent.PRIMARY : Intent.NONE}
+ intent={
+ activeFilterStatus === 'weekly' ? Intent.PRIMARY : Intent.NONE
+ }
active={activeFilterStatus === 'weekly'}
onClick={() => onFilter('weekly')}
>
Weekly
</Button>
<Button
- intent={activeFilterStatus === 'monthly' ? Intent.PRIMARY : Intent.NONE}
+ intent={
+ activeFilterStatus === 'monthly' ? Intent.PRIMARY : Intent.NONE
+ }
active={activeFilterStatus === 'monthly'}
onClick={() => onFilter('monthly')}
>
Monthly
</Button>
<Button
- intent={activeFilterStatus === 'manual' ? Intent.PRIMARY : Intent.NONE}
+ intent={
+ activeFilterStatus === 'manual' ? Intent.PRIMARY : Intent.NONE
+ }
active={activeFilterStatus === 'manual'}
onClick={() => onFilter('manual')}
>
Manual
</Button>
<Button
- intent={activeFilterStatus === 'custom' ? Intent.PRIMARY : Intent.NONE}
+ intent={
+ activeFilterStatus === 'custom' ? Intent.PRIMARY : Intent.NONE
+ }
active={activeFilterStatus === 'custom'}
onClick={() => onFilter('custom')}
>
@@ -144,27 +166,32 @@ const BlueprintsGrid = (props) => {
}}
>
<div
- className='blueprints-list-grid' style={{
+ className='blueprints-list-grid'
+ style={{
display: 'flex',
flexDirection: 'column',
width: '100%',
minWidth: '830px'
}}
>
- {(blueprints).map((b, bIdx) => (
+ {blueprints.map((b, bIdx) => (
<div key={`blueprint-row-key-${bIdx}`}>
<div
style={{
display: 'flex',
width: '100%',
minHeight: '48px',
- borderBottom: isActiveBlueprint(b.id) && expandDetails ? 'none' : '1px solid #eee',
+ borderBottom:
+ isActiveBlueprint(b.id) && expandDetails
+ ? 'none'
+ : '1px solid #eee',
backgroundColor: !b.enable ? '#f8f8f8' : 'inherit',
- color: !b.enable ? '#555555' : 'inherit',
+ color: !b.enable ? '#555555' : 'inherit'
}}
>
<div
- className='blueprint-row' style={{
+ className='blueprint-row'
+ style={{
display: 'flex',
width: '100%',
justifyContent: 'space-between',
@@ -174,14 +201,18 @@ const BlueprintsGrid = (props) => {
position: 'relative'
}}
>
- <div className='blueprint-id' style={{ flex: 1, maxWidth: '100px' }}>
+ <div
+ className='blueprint-id'
+ style={{ flex: 1, maxWidth: '100px' }}
+ >
<div style={{ height: '24px', lineHeight: '24px' }}>
- <label style={{
- marginLeft: '25px',
- fontSize: '9px',
- fontWeight: '400',
- color: '#777777'
- }}
+ <label
+ style={{
+ marginLeft: '25px',
+ fontSize: '9px',
+ fontWeight: '400',
+ color: '#777777'
+ }}
>
ID
</label>
@@ -189,7 +220,9 @@ const BlueprintsGrid = (props) => {
<Button
className='bp-row-expand-trigger'
onClick={() => expandBlueprint(b)}
- small minimal style={{
+ small
+ minimal
+ style={{
minHeight: '20px',
minWidth: '20px',
marginTop: '-3px',
@@ -199,8 +232,17 @@ const BlueprintsGrid = (props) => {
}}
>
<Icon
- size={12} color={isActiveBlueprint(b.id) && expandDetails ? Colors.BLUE3 : Colors.GRAY2}
- icon={isActiveBlueprint(b.id) && expandDetails ? 'collapse-all' : 'expand-all'}
+ size={12}
+ color={
+ isActiveBlueprint(b.id) && expandDetails
+ ? Colors.BLUE3
+ : Colors.GRAY2
+ }
+ icon={
+ isActiveBlueprint(b.id) && expandDetails
+ ? 'collapse-all'
+ : 'expand-all'
+ }
style={{ margin: '0' }}
/>
</Button>
@@ -208,47 +250,63 @@ const BlueprintsGrid = (props) => {
</div>
<div
className='blueprint-name'
- style={{ flex: 2, minWidth: '176px', fontWeight: 800, cursor: 'pointer' }}
+ style={{
+ flex: 2,
+ minWidth: '176px',
+ fontWeight: 800,
+ cursor: 'pointer'
+ }}
onClick={() => expandBlueprint(b)}
>
<div style={{ height: '24px', lineHeight: '24px' }}>
- <label style={{
- fontSize: '9px',
- fontWeight: '400',
- color: '#777777'
- }}
+ <label
+ style={{
+ fontSize: '9px',
+ fontWeight: '400',
+ color: '#777777'
+ }}
>
Blueprint Name
</label>
</div>
{b.name}
</div>
- <div className='blueprint-interval' style={{ flex: 1, minWidth: '60px' }}>
+ <div
+ className='blueprint-interval'
+ style={{ flex: 1, minWidth: '60px' }}
+ >
<div style={{ height: '24px', lineHeight: '24px' }}>
- <label style={{
- fontSize: '9px',
- fontWeight: '400',
- color: '#777777'
- }}
+ <label
+ style={{
+ fontSize: '9px',
+ fontWeight: '400',
+ color: '#777777'
+ }}
>
Frequency
</label>
</div>
{b.interval}
</div>
- <div className='blueprint-next-rundate' style={{ flex: 1, whiteSpace: 'nowrap' }}>
+ <div
+ className='blueprint-next-rundate'
+ style={{ flex: 1, whiteSpace: 'nowrap' }}
+ >
<div style={{ height: '24px', lineHeight: '24px' }}>
- <label style={{
- fontSize: '9px',
- fontWeight: '400',
- color: '#777777'
- }}
+ <label
+ style={{
+ fontSize: '9px',
+ fontWeight: '400',
+ color: '#777777'
+ }}
>
Next Run Date
</label>
</div>
<div>
- {b.isManual ? 'Manual' : dayjs(getNextRunDate(b.cronConfig)).format('L LTS')}
+ {b.isManual
+ ? 'Manual'
+ : dayjs(getNextRunDate(b.cronConfig)).format('L LTS')}
</div>
{/* <div>
<span style={{ color: b.enable ? Colors.GREEN5 : Colors.GRAY3, position: 'absolute', bottom: '4px' }}>
@@ -256,19 +314,34 @@ const BlueprintsGrid = (props) => {
</span>
</div> */}
</div>
- <div className='blueprint-actions' style={{ flex: 1, textAlign: 'right' }}>
+ <div
+ className='blueprint-actions'
+ style={{ flex: 1, textAlign: 'right' }}
+ >
<div style={{ height: '24px', lineHeight: '24px' }}>
- <label style={{
- fontSize: '9px',
- fontWeight: '400',
- color: '#777777'
- }}
+ <label
+ style={{
+ fontSize: '9px',
+ fontWeight: '400',
+ color: '#777777'
+ }}
>
-
+
</label>
</div>
- <div style={{ display: 'flex', alignItems: 'center', justifySelf: 'flex-end' }}>
- <Button small minimal style={{ marginLeft: 'auto', marginRight: '10px' }} onClick={() => configureBlueprint(b)}>
+ <div
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ justifySelf: 'flex-end'
+ }}
+ >
+ <Button
+ small
+ minimal
+ style={{ marginLeft: 'auto', marginRight: '10px' }}
+ onClick={() => configureBlueprint(b)}
+ >
<Tooltip
content='Blueprint Status'
interactionKind={PopoverInteractionKind.HOVER}
@@ -279,7 +352,12 @@ const BlueprintsGrid = (props) => {
<Icon icon='pulse' size={16} color={Colors.GRAY3} />
</Tooltip>
</Button>
- <Button small minimal style={{ marginRight: '10px' }} onClick={() => configureBlueprintSettings(b)}>
+ <Button
+ small
+ minimal
+ style={{ marginRight: '10px' }}
+ onClick={() => configureBlueprintSettings(b)}
+ >
<Tooltip
content='Blueprint Settings'
interactionKind={PopoverInteractionKind.HOVER}
@@ -291,8 +369,17 @@ const BlueprintsGrid = (props) => {
</Tooltip>
</Button>
<Popover position={Position.LEFT} disabled>
- <Button disabled small minimal style={{ marginRight: '10px' }}>
- <Icon icon='trash' color={Colors.LIGHT_GRAY3} size={15} />
+ <Button
+ disabled
+ small
+ minimal
+ style={{ marginRight: '10px' }}
+ >
+ <Icon
+ icon='trash'
+ color={Colors.LIGHT_GRAY3}
+ size={15}
+ />
</Button>
<DeletePopover
activeBlueprint={b}
@@ -314,19 +401,53 @@ const BlueprintsGrid = (props) => {
</div>
<Collapse isOpen={expandDetails && activeBlueprint.id === b.id}>
<Card
- elevation={Elevation.TWO} style={{
+ elevation={Elevation.TWO}
+ style={{
padding: '0',
margin: '30px 30px',
minWidth: '860px',
backgroundColor: !b.enable ? '#f8f8f8' : 'initial'
}}
>
- <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: '0', padding: '10px' }}>
- <div style={{ letterSpacing: '1px', fontWeight: 800, whiteSpace: 'nowrap' }}>
- <Icon icon='bold' color={Colors.BLUE4} size={14} style={{ marginRight: '5px' }} /> BLUEPRINT ID {activeBlueprint?.id}
+ <div
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ margin: '0',
+ padding: '10px'
+ }}
+ >
+ <div
+ style={{
+ letterSpacing: '1px',
+ fontWeight: 800,
+ whiteSpace: 'nowrap'
+ }}
+ >
+ <Icon
+ icon='bold'
+ color={Colors.BLUE4}
+ size={14}
+ style={{ marginRight: '5px' }}
+ />{' '}
+ BLUEPRINT ID {activeBlueprint?.id}
{isLoading && (
- <span style={{ paddingLeft: '20px', fontWeight: 700, color: '#777777', fontSize: '11px' }}>
- <span style={{ display: 'inline-block', marginRight: '10px', marginTop: '2px' }}>
+ <span
+ style={{
+ paddingLeft: '20px',
+ fontWeight: 700,
+ color: '#777777',
+ fontSize: '11px'
+ }}
+ >
+ <span
+ style={{
+ display: 'inline-block',
+ marginRight: '10px',
+ marginTop: '2px'
+ }}
+ >
<Spinner size={12} />
</span>
LOADING ASSOCIATED PIPELINES...
@@ -339,7 +460,8 @@ const BlueprintsGrid = (props) => {
backgroundColor: b.enable
? Colors.GREEN3
: Colors.GRAY3
- }} round='true'
+ }}
+ round='true'
>
{b.enable ? 'ACTIVE' : 'INACTIVE'}
</Tag>
@@ -348,46 +470,87 @@ const BlueprintsGrid = (props) => {
<Divider style={{ marginRight: 0, marginLeft: 0 }} />
<div style={{ padding: '20px', display: 'flex' }}>
<div style={{ flex: 2, paddingRight: '30px' }}>
- <h3 style={{ margin: 0, textTransform: 'uppercase' }}>Run Schedule</h3>
+ <h3 style={{ margin: 0, textTransform: 'uppercase' }}>
+ Run Schedule
+ </h3>
<p style={{ margin: 0 }}>
Based on the current CRON settings, here are next{' '}
<strong>5</strong> expected data collection dates.
</p>
<div style={{ margin: '10px 0' }}>
- {activeBlueprint?.id && blueprintSchedule.map((s, sIdx) => (
- <div key={`run-schedule-event-key${sIdx}`} style={{ padding: '6px 4px', opacity: b.enable ? 1 : 0.5 }}>
- <Icon
- icon='calendar' size={14}
- color={b.enable ? Colors.BLUE4 : Colors.GRAY4}
- style={{ marginRight: '10px' }}
- />
- {dayjs(s).format('L LTS')}
- </div>
- ))}
+ {activeBlueprint?.id &&
+ blueprintSchedule.map((s, sIdx) => (
+ <div
+ key={`run-schedule-event-key${sIdx}`}
+ style={{
+ padding: '6px 4px',
+ opacity: b.enable ? 1 : 0.5
+ }}
+ >
+ <Icon
+ icon='calendar'
+ size={14}
+ color={b.enable ? Colors.BLUE4 : Colors.GRAY4}
+ style={{ marginRight: '10px' }}
+ />
+ {dayjs(s).format('L LTS')}
+ </div>
+ ))}
</div>
- <div className='related-pipelines-list' style={{ marginBottom: '20px' }}>
+ <div
+ className='related-pipelines-list'
+ style={{ marginBottom: '20px' }}
+ >
{!isLoading && (
- <h3 style={{ margin: '0 0 5px 0', textTransform: 'uppercase' }}>
- Historical Runs <small style={{ color: Colors.GRAY5 }}>(last 5)</small>
+ <h3
+ style={{
+ margin: '0 0 5px 0',
+ textTransform: 'uppercase'
+ }}
+ >
+ Historical Runs{' '}
+ <small style={{ color: Colors.GRAY5 }}>
+ (last 5)
+ </small>
</h3>
)}
- {!isLoading && pipelines.length === 0 && (<p>No Pipelines have been found for this blueprint.</p>)}
- {!isLoading && pipelines.slice(0, 5).map((p, pIdx) => (
- <div
- key={`pipeline-run-key-${pIdx}`}
- className='pipeline-run-entry'
- style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center', padding: '4px 0' }}
- >
+ {!isLoading && pipelines.length === 0 && (
+ <p>
+ No Pipelines have been found for this blueprint.
+ </p>
+ )}
+ {!isLoading &&
+ pipelines.slice(0, 5).map((p, pIdx) => (
<div
- className='pipeline-id'
- style={{ minWidth: '60px', paddingRight: '15px', fontWeight: 'bold' }}
+ key={`pipeline-run-key-${pIdx}`}
+ className='pipeline-run-entry'
+ style={{
+ display: 'flex',
+ justifyContent: 'flex-start',
+ alignItems: 'center',
+ padding: '4px 0'
+ }}
>
- #{p.id}
- </div>
- <div className='pipeline-created' style={{ minWidth: '180px', paddingRight: '15px' }}>
- {dayjs(p.createdAt).format('L LTS')}
- </div>
- {/* <div className='pipeline-name' style={{ flex: 1, paddingRight: '15px' }}>
+ <div
+ className='pipeline-id'
+ style={{
+ minWidth: '60px',
+ paddingRight: '15px',
+ fontWeight: 'bold'
+ }}
+ >
+ #{p.id}
+ </div>
+ <div
+ className='pipeline-created'
+ style={{
+ minWidth: '180px',
+ paddingRight: '15px'
+ }}
+ >
+ {dayjs(p.createdAt).format('L LTS')}
+ </div>
+ {/* <div className='pipeline-name' style={{ flex: 1, paddingRight: '15px' }}>
<span
style={{
display: 'block',
@@ -399,39 +562,61 @@ const BlueprintsGrid = (props) => {
>{p.name}
</span>
</div> */}
- <div style={{ paddingRight: '15px', color: Colors.GRAY2, whiteSpace: 'nowrap' }}>
- {p.status === 'TASK_RUNNING'
- ? dayjs(p.createdAt).toNow(true)
- : dayjs(p.updatedAt).from(p.createdAt, true)}
- </div>
- <div>{p.status?.replace('TASK_', '')}</div>
- <div style={{ padding: '0 15px' }}>
- {/* <Button
+ <div
+ style={{
+ paddingRight: '15px',
+ color: Colors.GRAY2,
+ whiteSpace: 'nowrap'
+ }}
+ >
+ {p.status === 'TASK_RUNNING'
+ ? dayjs(p.createdAt).toNow(true)
+ : dayjs(p.updatedAt).from(p.createdAt, true)}
+ </div>
+ <div>{p.status?.replace('TASK_', '')}</div>
+ <div style={{ padding: '0 15px' }}>
+ {/* <Button
onClick={() => onViewPipeline(b.blueprintId)}
icon='eye-open'
size={14}
color={Colors.GRAY3}
small minimal
/> */}
+ </div>
</div>
- </div>
- ))}
+ ))}
</div>
{!b.enable && (
<p style={{ marginTop: '10px 0 0 0', fontSize: '9px' }}>
- <Icon icon='warning-sign' size={11} color={Colors.ORANGE5} style={{ float: 'left', marginRight: '5px' }} />
- Blueprint is NOT Enabled / Active this schedule will not run.
+ <Icon
+ icon='warning-sign'
+ size={11}
+ color={Colors.ORANGE5}
+ style={{ float: 'left', marginRight: '5px' }}
+ />
+ Blueprint is NOT Enabled / Active this schedule will
+ not run.
</p>
)}
</div>
<div style={{ flex: 1 }}>
<label style={{ color: Colors.GRAY1 }}>Blueprint</label>
- <h3 style={{ marginTop: 0, fontSize: '16px', fontWeight: 800 }}>
+ <h3
+ style={{
+ marginTop: 0,
+ fontSize: '16px',
+ fontWeight: 800
+ }}
+ >
{b.name}
</h3>
- <label style={{ color: Colors.GRAY1 }}>Crontab Configuration</label>
- <h3 style={{ margin: '0 0 20px 0', fontSize: '16px' }}>{b.cronConfig}</h3>
+ <label style={{ color: Colors.GRAY1 }}>
+ Crontab Configuration
+ </label>
+ <h3 style={{ margin: '0 0 20px 0', fontSize: '16px' }}>
+ {b.cronConfig}
+ </h3>
<label style={{ color: Colors.GRAY1 }}>Next Run</label>
<h3 style={{ margin: '0 0 20px 0', fontSize: '16px' }}>
@@ -439,14 +624,15 @@ const BlueprintsGrid = (props) => {
</h3>
{/* <label style={{ color: Colors.GRAY3 }}>Operations</label> */}
- <div style={{
- marginTop: '5px',
- display: 'flex',
- justifySelf: 'flex-start',
- alignItems: 'center',
- justifyContent: 'left',
- fontSize: '10px'
- }}
+ <div
+ style={{
+ marginTop: '5px',
+ display: 'flex',
+ justifySelf: 'flex-start',
+ alignItems: 'center',
+ justifyContent: 'left',
+ fontSize: '10px'
+ }}
>
{/* <Button
intent={Intent.PRIMARY}
@@ -473,25 +659,26 @@ const BlueprintsGrid = (props) => {
/> */}
</div>
</div>
-
</div>
</Card>
-
</Collapse>
</div>
))}
- {(blueprints.length === 0) && (
+ {blueprints.length === 0 && (
<div style={{ padding: '12px' }}>
- <h3 style={{
- fontWeight: 800,
- letterSpacing: '2px',
- textTransform: 'uppercase',
- margin: 0,
- }}
- >0 Blueprints
+ <h3
+ style={{
+ fontWeight: 800,
+ letterSpacing: '2px',
+ textTransform: 'uppercase',
+ margin: 0
+ }}
+ >
+ 0 Blueprints
</h3>
- <p style={{ margin: 0 }}>There are no blueprints for the current status
- {' '}<strong>{activeFilterStatus}</strong>.
+ <p style={{ margin: 0 }}>
+ There are no blueprints for the current status{' '}
+ <strong>{activeFilterStatus}</strong>.
</p>
</div>
)}
diff --git a/config-ui/src/components/blueprints/BoardsSelector.jsx b/config-ui/src/components/blueprints/BoardsSelector.jsx
index 0b2edc9e..e64b7ceb 100644
--- a/config-ui/src/components/blueprints/BoardsSelector.jsx
+++ b/config-ui/src/components/blueprints/BoardsSelector.jsx
@@ -16,10 +16,7 @@
*
*/
import React, { useEffect, useMemo } from 'react'
-import {
- Intent,
- MenuItem,
-} from '@blueprintjs/core'
+import { Intent, MenuItem } from '@blueprintjs/core'
import { MultiSelect, Select } from '@blueprintjs/select'
const BoardsSelector = (props) => {
const {
@@ -40,32 +37,28 @@ const BoardsSelector = (props) => {
itemRenderer = (item, { handleClick, modifiers }) => (
<MenuItem
active={modifiers.active}
- disabled={
- selectedItems.find(i => i?.id === item?.id)
- }
+ disabled={selectedItems.find((i) => i?.id === item?.id)}
key={item.value}
// label=
onClick={handleClick}
text={
- selectedItems.find(i => i?.id === item?.id)
- ? (
- <>
- <input type='checkbox' checked readOnly /> {item?.title}
- </>
- )
- : (
- <span style={{ fontWeight: 700 }}>
- <input type='checkbox' readOnly /> {item?.title}
- </span>
- )
+ selectedItems.find((i) => i?.id === item?.id) ? (
+ <>
+ <input type='checkbox' checked readOnly /> {item?.title}
+ </>
+ ) : (
+ <span style={{ fontWeight: 700 }}>
+ <input type='checkbox' readOnly /> {item?.title}
+ </span>
+ )
}
style={{
marginBottom: '2px',
- fontWeight: items.includes(item) ? 700 : 'normal',
+ fontWeight: items.includes(item) ? 700 : 'normal'
}}
/>
),
- tagRenderer = (item) => item?.title,
+ tagRenderer = (item) => item?.title
} = props
return (
@@ -91,14 +84,15 @@ const BoardsSelector = (props) => {
selectedItems={selectedItems}
activeItem={activeItem}
itemPredicate={(query, item) =>
- item?.title?.toLowerCase().indexOf(query.toLowerCase()) >= 0}
+ item?.title?.toLowerCase().indexOf(query.toLowerCase()) >= 0
+ }
itemRenderer={itemRenderer}
tagRenderer={tagRenderer}
tagInputProps={{
tagProps: {
intent: Intent.PRIMARY,
minimal: true
- },
+ }
}}
noResults={<MenuItem disabled={true} text='No Boards Available.' />}
onRemove={(item) => {
@@ -107,7 +101,7 @@ const BoardsSelector = (props) => {
...rT,
[configuredConnection.id]: rT[configuredConnection.id].filter(
(t) => t?.id !== item.id
- ),
+ )
}
})
}}
@@ -118,15 +112,14 @@ const BoardsSelector = (props) => {
...rT,
[configuredConnection.id]: [
...rT[configuredConnection.id],
- item,
- ],
+ item
+ ]
}
: { ...rT }
})
}}
style={{ borderRight: 0 }}
/>
-
</div>
</div>
</>
diff --git a/config-ui/src/components/blueprints/ConnectionDialog.jsx b/config-ui/src/components/blueprints/ConnectionDialog.jsx
index 7daeb94b..43ddd8c5 100644
--- a/config-ui/src/components/blueprints/ConnectionDialog.jsx
+++ b/config-ui/src/components/blueprints/ConnectionDialog.jsx
@@ -27,7 +27,7 @@ import {
Icon,
Intent,
Label,
- MenuItem,
+ MenuItem
} from '@blueprintjs/core'
import { Select } from '@blueprintjs/select'
import {
@@ -36,7 +36,7 @@ import {
ProviderLabels,
ProviderFormLabels,
ProviderFormPlaceholders,
- ProviderConnectionLimits,
+ ProviderConnectionLimits
// ProviderIcons,
} from '@/data/Providers'
import { NullBlueprintConnection } from '@/data/NullBlueprintConnection'
@@ -46,7 +46,7 @@ import ConnectionForm from '@/pages/configure/connections/ConnectionForm'
const Modes = {
CREATE: 'create',
- EDIT: 'edit',
+ EDIT: 'edit'
}
// @todo: lift data sources list to configuration level, requires expansion when more providers are added..
@@ -55,32 +55,32 @@ const DATA_SOURCES_LIST = [
id: 1,
name: Providers.JIRA,
title: ProviderLabels[Providers.JIRA.toUpperCase()],
- value: Providers.JIRA,
+ value: Providers.JIRA
},
{
id: 2,
name: Providers.GITHUB,
title: ProviderLabels[Providers.GITHUB.toUpperCase()],
- value: Providers.GITHUB,
+ value: Providers.GITHUB
},
{
id: 3,
name: Providers.GITLAB,
title: ProviderLabels[Providers.GITLAB.toUpperCase()],
- value: Providers.GITLAB,
+ value: Providers.GITLAB
},
{
id: 4,
name: Providers.JENKINS,
title: ProviderLabels[Providers.JENKINS.toUpperCase()],
- value: Providers.JENKINS,
+ value: Providers.JENKINS
},
{
id: 5,
name: Providers.TAPD,
title: ProviderLabels[Providers.TAPD.toUpperCase()],
- value: Providers.TAPD,
- },
+ value: Providers.TAPD
+ }
]
const ConnectionDialog = (props) => {
@@ -127,7 +127,7 @@ const ConnectionDialog = (props) => {
allTestResponses,
errors = [],
validationErrors = [],
- canOutsideClickClose = false,
+ canOutsideClickClose = false
// authType,
// showLimitWarning = false
} = props
@@ -237,7 +237,8 @@ const ConnectionDialog = (props) => {
activeItem={datasource}
itemPredicate={(query, item) =>
item.title.toLowerCase().indexOf(query.toLowerCase()) >=
- 0}
+ 0
+ }
itemRenderer={(item, { handleClick, modifiers }) => (
<MenuItem
active={modifiers.active}
@@ -271,7 +272,7 @@ const ConnectionDialog = (props) => {
style={{
maxWidth: '260px',
display: 'flex',
- justifyContent: 'space-between',
+ justifyContent: 'space-between'
}}
/>
</Select>
@@ -340,17 +341,15 @@ const ConnectionDialog = (props) => {
>
{testResponse && (
<>
- {testResponse.success
- ? (
- <span style={{ color: Colors.GREEN5 }}>
- Successfully Connected!
- </span>
- )
- : (
- <span style={{ color: Colors.RED5 }}>
- Connection Failed
- </span>
- )}
+ {testResponse.success ? (
+ <span style={{ color: Colors.GREEN5 }}>
+ Successfully Connected!
+ </span>
+ ) : (
+ <span style={{ color: Colors.RED5 }}>
+ Connection Failed
+ </span>
+ )}
</>
)}
</div>
diff --git a/config-ui/src/components/blueprints/ConnectionTabs.jsx b/config-ui/src/components/blueprints/ConnectionTabs.jsx
index d0d7e5eb..de5616fe 100644
--- a/config-ui/src/components/blueprints/ConnectionTabs.jsx
+++ b/config-ui/src/components/blueprints/ConnectionTabs.jsx
@@ -23,7 +23,7 @@ import {
Icon,
Classes,
Tabs,
- Tab,
+ Tab
} from '@blueprintjs/core'
const ConnectionTabs = (props) => {
@@ -31,7 +31,7 @@ const ConnectionTabs = (props) => {
connections = [],
errors = [],
selectedTabId,
- onChange = () => {},
+ onChange = () => {}
} = props
return (
@@ -52,12 +52,15 @@ const ConnectionTabs = (props) => {
errors.some((e) => e.includes(c.name)) ? (
<>
{c.title}{' '}
- <span style={{ display: 'flex', alignItems: 'center', alignSelf: 'center', marginLeft: '10px' }}>
- <Icon
- icon='warning-sign'
- size={10}
- color={Colors.GRAY4}
- />
+ <span
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ alignSelf: 'center',
+ marginLeft: '10px'
+ }}
+ >
+ <Icon icon='warning-sign' size={10} color={Colors.GRAY4} />
</span>
</>
) : (
diff --git a/config-ui/src/components/blueprints/ConnectionsSelector.jsx b/config-ui/src/components/blueprints/ConnectionsSelector.jsx
index 71e9d5b6..f6438b68 100644
--- a/config-ui/src/components/blueprints/ConnectionsSelector.jsx
+++ b/config-ui/src/components/blueprints/ConnectionsSelector.jsx
@@ -47,40 +47,36 @@ const ConnectionsSelector = (props) => {
display: 'inline-block',
marginTop: '2px',
width: '14px',
- height: '14px',
+ height: '14px'
}}
>
- {ProviderIcons[item.provider]
- ? (
- ProviderIcons[item.provider](14, 14)
- )
- : (
- <></>
- )}
+ {ProviderIcons[item.provider] ? (
+ ProviderIcons[item.provider](14, 14)
+ ) : (
+ <></>
+ )}
</span>
</span>
}
onClick={handleClick}
text={
- selectedItems.find((i) => i.id === item.id)
- ? (
- <>
- <input type='checkbox' checked readOnly /> {item.title}
- </>
- )
- : (
- <span style={{ fontWeight: 700 }}>
- <input type='checkbox' readOnly /> {item.title}
- </span>
- )
+ selectedItems.find((i) => i.id === item.id) ? (
+ <>
+ <input type='checkbox' checked readOnly /> {item.title}
+ </>
+ ) : (
+ <span style={{ fontWeight: 700 }}>
+ <input type='checkbox' readOnly /> {item.title}
+ </span>
+ )
}
style={{
marginBottom: '2px',
- fontWeight: items.includes(item) ? 700 : 'normal',
+ fontWeight: items.includes(item) ? 700 : 'normal'
}}
/>
),
- tagRenderer = (item) => item.title,
+ tagRenderer = (item) => item.title
} = props
return (
<>
@@ -105,14 +101,15 @@ const ConnectionsSelector = (props) => {
selectedItems={selectedItems}
activeItem={activeItem}
itemPredicate={(query, item) =>
- item?.title?.toLowerCase().indexOf(query.toLowerCase()) >= 0}
+ item?.title?.toLowerCase().indexOf(query.toLowerCase()) >= 0
+ }
itemRenderer={itemRenderer}
tagRenderer={tagRenderer}
tagInputProps={{
tagProps: {
intent: Intent.PRIMARY,
- minimal: true,
- },
+ minimal: true
+ }
}}
noResults={<MenuItem disabled={true} text='No connections.' />}
onRemove={(item) => {
@@ -137,7 +134,7 @@ const ConnectionsSelector = (props) => {
borderLeft: 0,
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
- marginLeft: '-2px',
+ marginLeft: '-2px'
}}
/>
</div>
diff --git a/config-ui/src/components/blueprints/DataEntitiesSelector.jsx b/config-ui/src/components/blueprints/DataEntitiesSelector.jsx
index bc20eddc..218d2000 100644
--- a/config-ui/src/components/blueprints/DataEntitiesSelector.jsx
+++ b/config-ui/src/components/blueprints/DataEntitiesSelector.jsx
@@ -38,7 +38,7 @@ import {
MenuItem,
Position,
Colors,
- Tag,
+ Tag
} from '@blueprintjs/core'
import { MultiSelect, Select } from '@blueprintjs/select'
import InputValidationError from '@/components/validation/InputValidationError'
@@ -61,33 +61,29 @@ const DataEntitiesSelector = (props) => {
getFieldError = () => {},
itemRenderer = (item, { handleClick, modifiers }) => (
<MenuItem
- active={modifiers.active || selectedItems.find(i => i.id === item.id)}
- disabled={
- selectedItems.find(i => i.id === item.id)
- }
+ active={modifiers.active || selectedItems.find((i) => i.id === item.id)}
+ disabled={selectedItems.find((i) => i.id === item.id)}
key={item.value}
// label=
onClick={handleClick}
text={
- selectedItems.find(i => i.id === item.id)
- ? (
- <>
- <input type='checkbox' checked readOnly /> {item.title}
- </>
- )
- : (
- <span style={{ fontWeight: 700 }}>
- <input type='checkbox' readOnly /> {item.title}
- </span>
- )
+ selectedItems.find((i) => i.id === item.id) ? (
+ <>
+ <input type='checkbox' checked readOnly /> {item.title}
+ </>
+ ) : (
+ <span style={{ fontWeight: 700 }}>
+ <input type='checkbox' readOnly /> {item.title}
+ </span>
+ )
}
style={{
marginBottom: '2px',
- fontWeight: items.includes(item) ? 700 : 'normal',
+ fontWeight: items.includes(item) ? 700 : 'normal'
}}
/>
),
- tagRenderer = (item) => item.title,
+ tagRenderer = (item) => item.title
} = props
return (
<>
@@ -112,14 +108,15 @@ const DataEntitiesSelector = (props) => {
selectedItems={selectedItems}
activeItem={activeItem}
itemPredicate={(query, item) =>
- item?.title.toLowerCase().indexOf(query.toLowerCase()) >= 0}
+ item?.title.toLowerCase().indexOf(query.toLowerCase()) >= 0
+ }
itemRenderer={itemRenderer}
tagRenderer={tagRenderer}
tagInputProps={{
tagProps: {
intent: Intent.PRIMARY,
- minimal: true,
- },
+ minimal: true
+ }
}}
noResults={<MenuItem disabled={true} text='No Data Entities.' />}
onRemove={(item) => {
@@ -128,7 +125,7 @@ const DataEntitiesSelector = (props) => {
...rT,
[configuredConnection.id]: rT[configuredConnection.id].filter(
(t) => t.id !== item.id
- ),
+ )
}
})
}}
@@ -139,8 +136,8 @@ const DataEntitiesSelector = (props) => {
...rT,
[configuredConnection.id]: [
...rT[configuredConnection.id],
- item,
- ],
+ item
+ ]
}
: { ...rT }
})
diff --git a/config-ui/src/components/blueprints/DataScopesGrid.jsx b/config-ui/src/components/blueprints/DataScopesGrid.jsx
index 4424624a..9cc4f38a 100644
--- a/config-ui/src/components/blueprints/DataScopesGrid.jsx
+++ b/config-ui/src/components/blueprints/DataScopesGrid.jsx
@@ -16,13 +16,7 @@
*
*/
import React from 'react'
-import {
- Button,
- Intent,
- Card,
- Elevation,
- Tag,
-} from '@blueprintjs/core'
+import { Button, Intent, Card, Elevation, Tag } from '@blueprintjs/core'
import { Providers, ProviderLabels, ProviderIcons } from '@/data/Providers'
import { NullBlueprint, BlueprintMode } from '@/data/NullBlueprint'
@@ -42,23 +36,19 @@ const DataScopesGrid = (props) => {
display: 'flex',
flex: 1,
width: '100%',
- flexDirection: 'column',
+ flexDirection: 'column'
},
elevation = Elevation.TWO,
isLoading = false
} = props
return (
-
- <Card
- elevation={elevation}
- style={{ ...cardStyle }}
- >
+ <Card elevation={elevation} style={{ ...cardStyle }}>
<div
className={`simplegrid ${classNames.join(' ')}`}
style={{
...gridStyle,
- backgroundColor: !blueprint?.enable ? '#f8f8f8' : 'inherit',
+ backgroundColor: !blueprint?.enable ? '#f8f8f8' : 'inherit'
}}
>
<div
@@ -72,19 +62,13 @@ const DataScopesGrid = (props) => {
padding: '16px 20px',
fontWeight: 'bold',
borderBottom: '1px solid #BDCEFB',
- justfiyContent: 'space-evenly',
+ justfiyContent: 'space-evenly'
}}
>
- <div
- className='cell-header connections'
- style={{ flex: 1 }}
- >
+ <div className='cell-header connections' style={{ flex: 1 }}>
Data Connections
</div>
- <div
- className='cell-header entities'
- style={{ flex: 1 }}
- >
+ <div className='cell-header entities' style={{ flex: 1 }}>
Data Entities
</div>
<div className='cell-header scope' style={{ flex: 1 }}>
@@ -96,10 +80,7 @@ const DataScopesGrid = (props) => {
>
Transformation
</div>
- <div
- className='cell-header actions'
- style={{ minWidth: '100px' }}
- >
+ <div className='cell-header actions' style={{ minWidth: '100px' }}>
</div>
</div>
@@ -116,34 +97,52 @@ const DataScopesGrid = (props) => {
lineHeight: 'auto',
padding: '10px 20px',
borderBottom: '1px solid #BDCEFB',
- justfiyContent: 'space-evenly',
+ justfiyContent: 'space-evenly'
}}
>
- <div className='cell connections' style={{ display: 'flex', flex: 1, alignItems: 'center' }}>
+ <div
+ className='cell connections'
+ style={{ display: 'flex', flex: 1, alignItems: 'center' }}
+ >
<span style={{ marginBottom: '-5px', marginRight: '10px' }}>
{c.icon}
</span>
<span>{c.name}</span>
{mode === BlueprintMode.ADVANCED && (
- <Tag intent={Intent.PRIMARY} minimal style={{ marginLeft: '10px', fontSize: '10px' }}>STAGE {c.stage}</Tag>
+ <Tag
+ intent={Intent.PRIMARY}
+ minimal
+ style={{ marginLeft: '10px', fontSize: '10px' }}
+ >
+ STAGE {c.stage}
+ </Tag>
)}
</div>
- <div className='cell entities' style={{ display: 'flex', flex: 1, alignItems: 'center' }}>
+ <div
+ className='cell entities'
+ style={{ display: 'flex', flex: 1, alignItems: 'center' }}
+ >
<ul
style={{
listStyle: 'none',
margin: 0,
- padding: 0,
+ padding: 0
}}
>
{c.entities.map((entityLabel, eIdx) => (
- <li key={`list-item-key-${eIdx}`}>
- {entityLabel}
- </li>
+ <li key={`list-item-key-${eIdx}`}>{entityLabel}</li>
))}
</ul>
</div>
- <div className='cell scope' style={{ display: 'flex', flex: 1, alignItems: 'center', whiteSpace: 'nowrap' }}>
+ <div
+ className='cell scope'
+ style={{
+ display: 'flex',
+ flex: 1,
+ alignItems: 'center',
+ whiteSpace: 'nowrap'
+ }}
+ >
{[Providers.GITLAB, Providers.GITHUB].includes(
c.provider?.id
) && (
@@ -151,11 +150,14 @@ const DataScopesGrid = (props) => {
style={{
listStyle: 'none',
margin: 0,
- padding: 0,
+ padding: 0
}}
>
{c.projects.map((project, pIdx) => (
- <li key={`list-item-key-${pIdx}`} style={{ whiteSpace: 'break-spaces' }}>
+ <li
+ key={`list-item-key-${pIdx}`}
+ style={{ whiteSpace: 'break-spaces' }}
+ >
{project.title}
</li>
))}
@@ -166,7 +168,7 @@ const DataScopesGrid = (props) => {
style={{
listStyle: 'none',
margin: 0,
- padding: 0,
+ padding: 0
}}
>
{c.boards.map((board, bIdx) => (
@@ -177,17 +179,25 @@ const DataScopesGrid = (props) => {
</div>
<div
className='cell transformation'
- style={{ display: 'flex', flex: 1, alignItems: 'center', marginLeft: '40px' }}
+ style={{
+ display: 'flex',
+ flex: 1,
+ alignItems: 'center',
+ marginLeft: '40px'
+ }}
>
<ul
style={{
listStyle: 'none',
margin: 0,
- padding: 0,
+ padding: 0
}}
>
{c.transformationStates.map((state, sIdx) => (
- <li key={`list-item-key-${sIdx}`} style={{ minWidth: '80px' }}>
+ <li
+ key={`list-item-key-${sIdx}`}
+ style={{ minWidth: '80px' }}
+ >
{state}
</li>
))}
@@ -200,13 +210,21 @@ const DataScopesGrid = (props) => {
minWidth: '100px',
textAlign: 'right',
alignItems: 'center',
- justifyContent: 'flex-end',
+ justifyContent: 'flex-end'
}}
>
<Button
- disabled={mode === BlueprintMode.NORMAL && [Providers.TAPD].includes(c.providerId)}
+ disabled={
+ mode === BlueprintMode.NORMAL &&
+ [Providers.TAPD].includes(c.providerId)
+ }
icon='annotation'
- intent={mode === BlueprintMode.NORMAL && c.providerId === Providers.TAPD ? Intent.NONE : Intent.PRIMARY}
+ intent={
+ mode === BlueprintMode.NORMAL &&
+ c.providerId === Providers.TAPD
+ ? Intent.NONE
+ : Intent.PRIMARY
+ }
size={12}
small
minimal
@@ -218,7 +236,6 @@ const DataScopesGrid = (props) => {
))}
</div>
</Card>
-
)
}
diff --git a/config-ui/src/components/blueprints/DeletePopover.jsx b/config-ui/src/components/blueprints/DeletePopover.jsx
index e2f39b81..59c092c6 100644
--- a/config-ui/src/components/blueprints/DeletePopover.jsx
+++ b/config-ui/src/components/blueprints/DeletePopover.jsx
@@ -16,12 +16,7 @@
*
*/
import React from 'react'
-import {
- Button,
- Intent,
- Colors,
- Classes
-} from '@blueprintjs/core'
+import { Button, Intent, Colors, Classes } from '@blueprintjs/core'
const DeletePopover = (props) => {
const {
activeBlueprint,
@@ -32,18 +27,32 @@ const DeletePopover = (props) => {
return (
<>
<div style={{ padding: '10px', fontSize: '10px', maxWidth: '220px' }}>
- <h3 style={{ margin: '0 0 5px 0', color: Colors.RED3 }}>Delete {activeBlueprint?.name}?</h3>
- <p><strong>Are you sure? This Blueprint will be removed, all pipelines will be stopped.</strong></p>
+ <h3 style={{ margin: '0 0 5px 0', color: Colors.RED3 }}>
+ Delete {activeBlueprint?.name}?
+ </h3>
+ <p>
+ <strong>
+ Are you sure? This Blueprint will be removed, all pipelines will be
+ stopped.
+ </strong>
+ </p>
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
<Button
className={Classes.POPOVER_DISMISS}
intent={Intent.NONE}
text='CANCEL'
- small style={{ marginRight: '5px' }}
+ small
+ style={{ marginRight: '5px' }}
onClick={() => onCancel(activeBlueprint)}
disabled={isRunning}
/>
- <Button disabled={isRunning} intent={Intent.DANGER} text='YES' small onClick={() => onConfirm(activeBlueprint)} />
+ <Button
+ disabled={isRunning}
+ intent={Intent.DANGER}
+ text='YES'
+ small
+ onClick={() => onConfirm(activeBlueprint)}
+ />
</div>
</div>
</>
diff --git a/config-ui/src/components/blueprints/GitlabProjectsSelector.jsx b/config-ui/src/components/blueprints/GitlabProjectsSelector.jsx
index ab8d6e25..770ca24c 100644
--- a/config-ui/src/components/blueprints/GitlabProjectsSelector.jsx
+++ b/config-ui/src/components/blueprints/GitlabProjectsSelector.jsx
@@ -16,7 +16,13 @@
*
*/
import React, { useEffect, useState } from 'react'
-import { Checkbox, Intent, MenuItem, Position, Tooltip } from '@blueprintjs/core'
+import {
+ Checkbox,
+ Intent,
+ MenuItem,
+ Position,
+ Tooltip
+} from '@blueprintjs/core'
import { MultiSelect } from '@blueprintjs/select'
import GitlabProject from '@/models/GitlabProject'
@@ -38,32 +44,36 @@ const GitlabProjectsSelector = (props) => {
itemRenderer = (item, { handleClick, modifiers }) => (
<MenuItem
active={modifiers.active}
- disabled={
- selectedItems.find(i => i?.id === item?.id)
- }
+ disabled={selectedItems.find((i) => i?.id === item?.id)}
key={item.value}
onClick={handleClick}
text={
- selectedItems.find(i => i?.id === item?.id)
- ? (
- <>
- <input type='checkbox' checked readOnly /> {item?.title}
- </>
- )
- : (
- <span style={{ fontWeight: 700 }}>
- <input type='checkbox' readOnly /> {item?.title}
- </span>
- )
+ selectedItems.find((i) => i?.id === item?.id) ? (
+ <>
+ <input type='checkbox' checked readOnly /> {item?.title}
+ </>
+ ) : (
+ <span style={{ fontWeight: 700 }}>
+ <input type='checkbox' readOnly /> {item?.title}
+ </span>
+ )
}
style={{
marginBottom: '2px',
- fontWeight: items.includes(item) ? 700 : 'normal',
+ fontWeight: items.includes(item) ? 700 : 'normal'
}}
/>
),
// eslint-disable-next-line max-len
- tagRenderer = (item) => <Tooltip intent={Intent.PRIMARY} content={item?.title} position={Position.TOP}>{item.shortTitle || item.title}</Tooltip>
+ tagRenderer = (item) => (
+ <Tooltip
+ intent={Intent.PRIMARY}
+ content={item?.title}
+ position={Position.TOP}
+ >
+ {item.shortTitle || item.title}
+ </Tooltip>
+ )
} = props
const [query, setQuery] = useState('')
@@ -98,19 +108,25 @@ const GitlabProjectsSelector = (props) => {
items={items}
selectedItems={selectedItems}
activeItem={activeItem}
- onQueryChange={query => setQuery(query)}
+ onQueryChange={(query) => setQuery(query)}
itemRenderer={itemRenderer}
tagRenderer={tagRenderer}
tagInputProps={{
tagProps: {
intent: Intent.PRIMARY,
minimal: true
- },
+ }
}}
noResults={
- (query.length <= 2 && <MenuItem disabled={true} text='Please type more than 2 characters to search.' />) ||
- (isFetching && <MenuItem disabled={true} text='Fetching...' />) ||
- <MenuItem disabled={true} text='No Projects Available.' />
+ (query.length <= 2 && (
+ <MenuItem
+ disabled={true}
+ text='Please type more than 2 characters to search.'
+ />
+ )) ||
+ (isFetching && <MenuItem disabled={true} text='Fetching...' />) || (
+ <MenuItem disabled={true} text='No Projects Available.' />
+ )
}
onRemove={(item) => {
onRemove((rT) => {
@@ -118,7 +134,7 @@ const GitlabProjectsSelector = (props) => {
...rT,
[configuredConnection.id]: rT[configuredConnection.id].filter(
(t) => t?.id !== item.id
- ),
+ )
}
})
}}
@@ -129,8 +145,8 @@ const GitlabProjectsSelector = (props) => {
...rT,
[configuredConnection.id]: [
...rT[configuredConnection.id],
- new GitlabProject(item),
- ],
+ new GitlabProject(item)
+ ]
}
: { ...rT }
})
@@ -139,8 +155,9 @@ const GitlabProjectsSelector = (props) => {
/>
<Checkbox
- label='Only search my repositories' checked={onlyQueryMemberRepo}
- onChange={e => setOnlyQueryMemberRepo(!onlyQueryMemberRepo)}
+ label='Only search my repositories'
+ checked={onlyQueryMemberRepo}
+ onChange={(e) => setOnlyQueryMemberRepo(!onlyQueryMemberRepo)}
style={{ margin: '10px 0 0 6px' }}
/>
</div>
diff --git a/config-ui/src/components/blueprints/PipelineTasks.jsx b/config-ui/src/components/blueprints/PipelineTasks.jsx
index 9673f7c7..a326698f 100644
--- a/config-ui/src/components/blueprints/PipelineTasks.jsx
+++ b/config-ui/src/components/blueprints/PipelineTasks.jsx
@@ -16,56 +16,82 @@
*
*/
import React from 'react'
-import {
- Popover,
- Tag,
- Icon,
- Intent,
- Colors,
-} from '@blueprintjs/core'
+import { Popover, Tag, Icon, Intent, Colors } from '@blueprintjs/core'
import { ProviderLabels, ProviderIcons } from '@/data/Providers'
const PipelineTasks = (props) => {
- const {
- tasks = []
- } = props
+ const { tasks = [] } = props
const renderPluginTag = (providerTask, pIdx) => {
const provider = providerTask.Plugin || providerTask.plugin
- return provider && (
- <Popover key={`provider-popover-key-${pIdx}`} usePortal={true}>
- <Tag
- key={`provider-icon-key-${pIdx}`} intent={Intent.NONE} round='true' style={{
- backgroundColor: '#fff',
- border: '1px solid #aaa',
- margin: '0 5px 5px 0',
- boxShadow: '0px 0px 2px rgba(0, 0, 0, 0.45)',
- color: Colors.DARK_GRAY1
- }}
- >
- <span className='detected-provider-icon' style={{ margin: '2px 3px 0 0px', float: 'left' }}>
- {ProviderIcons[provider] ? ProviderIcons[provider](20, 20) : <></>}
- </span>
- <span style={{ display: 'flex', marginTop: '3px', fontWeight: 800 }}>
- {ProviderLabels[provider?.toUpperCase()] ? ProviderLabels[provider?.toUpperCase()] : 'Data Provider'}
- </span>
- </Tag>
- <div style={{ padding: '10px', maxWidth: '340px', overflow: 'hidden', overflowX: 'auto' }}>
- <div style={{ marginBottom: '10px', fontWeight: 700, fontSize: '14px' }}>
- <Icon icon='layers' size={16} /> {ProviderLabels[provider?.toUpperCase()] ? ProviderLabels[provider?.toUpperCase()] : 'Plugin'}
+ return (
+ provider && (
+ <Popover key={`provider-popover-key-${pIdx}`} usePortal={true}>
+ <Tag
+ key={`provider-icon-key-${pIdx}`}
+ intent={Intent.NONE}
+ round='true'
+ style={{
+ backgroundColor: '#fff',
+ border: '1px solid #aaa',
+ margin: '0 5px 5px 0',
+ boxShadow: '0px 0px 2px rgba(0, 0, 0, 0.45)',
+ color: Colors.DARK_GRAY1
+ }}
+ >
+ <span
+ className='detected-provider-icon'
+ style={{ margin: '2px 3px 0 0px', float: 'left' }}
+ >
+ {ProviderIcons[provider] ? (
+ ProviderIcons[provider](20, 20)
+ ) : (
+ <></>
+ )}
+ </span>
+ <span
+ style={{ display: 'flex', marginTop: '3px', fontWeight: 800 }}
+ >
+ {ProviderLabels[provider?.toUpperCase()]
+ ? ProviderLabels[provider?.toUpperCase()]
+ : 'Data Provider'}
+ </span>
+ </Tag>
+ <div
+ style={{
+ padding: '10px',
+ maxWidth: '340px',
+ overflow: 'hidden',
+ overflowX: 'auto'
+ }}
+ >
+ <div
+ style={{
+ marginBottom: '10px',
+ fontWeight: 700,
+ fontSize: '14px'
+ }}
+ >
+ <Icon icon='layers' size={16} />{' '}
+ {ProviderLabels[provider?.toUpperCase()]
+ ? ProviderLabels[provider?.toUpperCase()]
+ : 'Plugin'}
+ </div>
+ <code>
+ {JSON.stringify(
+ tasks
+ .flat()
+ .find((t) => t.Plugin === provider || t.plugin === provider)
+ )}
+ </code>
</div>
- <code>
- {JSON.stringify(tasks.flat().find(t => t.Plugin === provider || t.plugin === provider))}
- </code>
- </div>
- </Popover>
+ </Popover>
+ )
)
}
return (
<>
- {tasks.map((providerTask, pIdx) => (
- renderPluginTag(providerTask, pIdx)
- ))}
+ {tasks.map((providerTask, pIdx) => renderPluginTag(providerTask, pIdx))}
</>
)
}
diff --git a/config-ui/src/components/blueprints/ProviderTransformationSettings.jsx b/config-ui/src/components/blueprints/ProviderTransformationSettings.jsx
index c17e43e4..5ecf56be 100644
--- a/config-ui/src/components/blueprints/ProviderTransformationSettings.jsx
+++ b/config-ui/src/components/blueprints/ProviderTransformationSettings.jsx
@@ -17,7 +17,7 @@
*/
import React, { useEffect } from 'react'
import {
- Providers,
+ Providers
// ProviderTypes,
// ProviderIcons,
// ConnectionStatus,
diff --git a/config-ui/src/components/blueprints/StandardStackedList.jsx b/config-ui/src/components/blueprints/StandardStackedList.jsx
index 02c523a6..fd21d415 100644
--- a/config-ui/src/components/blueprints/StandardStackedList.jsx
+++ b/config-ui/src/components/blueprints/StandardStackedList.jsx
@@ -24,7 +24,7 @@ import {
Card,
Colors,
Popover,
- PopoverInteractionKind,
+ PopoverInteractionKind
} from '@blueprintjs/core'
const StandardStackedList = (props) => {
@@ -39,7 +39,7 @@ const StandardStackedList = (props) => {
onAdd = () => {},
onChange = () => {},
isEditing = () => {},
- style = { padding: 0, marginTop: '10px' },
+ style = { padding: 0, marginTop: '10px' }
} = props
return (
@@ -60,7 +60,7 @@ const StandardStackedList = (props) => {
padding: '8px 12px',
borderBottom: '1px solid #f0f0f0',
backgroundColor:
- activeItem === item ? 'rgba(116, 151, 247, 0.2)' : '#fff',
+ activeItem === item ? 'rgba(116, 151, 247, 0.2)' : '#fff'
}}
>
<div>
@@ -69,29 +69,49 @@ const StandardStackedList = (props) => {
onClick={() => onAdd(item)}
style={{ cursor: 'pointer' }}
>
- {item.shortTitle || item.icon
- ? (
- <Popover
- className='docs-popover-portal-example-popover'
- interactionKind={PopoverInteractionKind.HOVER_TARGET_ONLY}
- content={
- <div style={{ padding: '5px', justifyContent: 'center', display: 'flex' }}>
- {item.icon && <img src={item.icon} style={{ maxWidth: '100%', overflow: 'hidden', width: '14px', height: '14px', borderRadius: '50%', marginRight: '2px' }} />}
- {item.title}
- </div>
- }
- >
- {item.shortTitle || item.title}
- </Popover>
- )
- : item.title}
+ {item.shortTitle || item.icon ? (
+ <Popover
+ className='docs-popover-portal-example-popover'
+ interactionKind={
+ PopoverInteractionKind.HOVER_TARGET_ONLY
+ }
+ content={
+ <div
+ style={{
+ padding: '5px',
+ justifyContent: 'center',
+ display: 'flex'
+ }}
+ >
+ {item.icon && (
+ <img
+ src={item.icon}
+ style={{
+ maxWidth: '100%',
+ overflow: 'hidden',
+ width: '14px',
+ height: '14px',
+ borderRadius: '50%',
+ marginRight: '2px'
+ }}
+ />
+ )}
+ {item.title}
+ </div>
+ }
+ >
+ {item.shortTitle || item.title}
+ </Popover>
+ ) : (
+ item.title
+ )}
</label>
</div>
</div>
<div
style={{
display: 'flex',
- alignContent: 'center',
+ alignContent: 'center'
}}
>
<div className='item-actions' style={{ paddingLeft: '20px' }}>
@@ -106,7 +126,7 @@ const StandardStackedList = (props) => {
style={{
minWidth: '18px',
minHeight: '18px',
- fontSize: '11px',
+ fontSize: '11px'
}}
onClick={() => onAdd(item)}
/>
diff --git a/config-ui/src/components/blueprints/WorkflowActions.jsx b/config-ui/src/components/blueprints/WorkflowActions.jsx
index 2582d589..f8fbbd7f 100644
--- a/config-ui/src/components/blueprints/WorkflowActions.jsx
+++ b/config-ui/src/components/blueprints/WorkflowActions.jsx
@@ -26,7 +26,7 @@ import {
Elevation,
Popover,
Card,
- Colors,
+ Colors
} from '@blueprintjs/core'
import FormValidationErrors from '@/components/messages/FormValidationErrors'
@@ -97,25 +97,23 @@ const WorkflowActions = (props) => {
text='Next Step'
onClick={onNext}
rightIcon={
- validationErrors.length > 0
- ? (
- <Popover
- interactionKind={PopoverInteractionKind.HOVER_TARGET_ONLY}
- defaultIsOpen={true}
- enforceFocus={false}
- >
- <Icon
- icon='warning-sign'
- size={12}
- color={Colors.ORANGE5}
- style={{ outline: 'none', margin: '0 3px 2px 3px' }}
- />
- <div style={{ padding: '5px' }}>
- <FormValidationErrors errors={validationErrors} />
- </div>
- </Popover>
- )
- : null
+ validationErrors.length > 0 ? (
+ <Popover
+ interactionKind={PopoverInteractionKind.HOVER_TARGET_ONLY}
+ defaultIsOpen={true}
+ enforceFocus={false}
+ >
+ <Icon
+ icon='warning-sign'
+ size={12}
+ color={Colors.ORANGE5}
+ style={{ outline: 'none', margin: '0 3px 2px 3px' }}
+ />
+ <div style={{ padding: '5px' }}>
+ <FormValidationErrors errors={validationErrors} />
+ </div>
+ </Popover>
+ ) : null
}
/>
</div>
diff --git a/config-ui/src/components/blueprints/WorkflowStepsBar.jsx b/config-ui/src/components/blueprints/WorkflowStepsBar.jsx
index 5f2b19de..651c6c89 100644
--- a/config-ui/src/components/blueprints/WorkflowStepsBar.jsx
+++ b/config-ui/src/components/blueprints/WorkflowStepsBar.jsx
@@ -23,7 +23,7 @@ import {
Intent,
Elevation,
Card,
- Colors,
+ Colors
} from '@blueprintjs/core'
import { WorkflowSteps } from '@/data/BlueprintWorkflow'
diff --git a/config-ui/src/components/blueprints/create-workflow/AdvancedJSON.jsx b/config-ui/src/components/blueprints/create-workflow/AdvancedJSON.jsx
index 9bf0076c..2845268b 100644
--- a/config-ui/src/components/blueprints/create-workflow/AdvancedJSON.jsx
+++ b/config-ui/src/components/blueprints/create-workflow/AdvancedJSON.jsx
@@ -28,7 +28,7 @@ import {
Divider,
Elevation,
Card,
- Colors,
+ Colors
} from '@blueprintjs/core'
import PipelineConfigsMenu from '@/components/menus/PipelineConfigsMenu'
import BlueprintNameCard from '@/components/blueprints/BlueprintNameCard'
@@ -65,7 +65,10 @@ const AdvancedJSON = (props) => {
} = props
return (
- <div className='workflow-step workflow-step-advanced-json' data-step={activeStep?.id}>
+ <div
+ className='workflow-step workflow-step-advanced-json'
+ data-step={activeStep?.id}
+ >
{useBlueprintName && (
<BlueprintNameCard
activeStep={activeStep}
@@ -87,7 +90,14 @@ const AdvancedJSON = (props) => {
<>
<h3>
{title}
- {validationAdvancedError && <Icon icon='warning-sign' size={15} color={Colors.ORANGE5} style={{ marginLeft: '6px', marginBottom: '2px' }} />}
+ {validationAdvancedError && (
+ <Icon
+ icon='warning-sign'
+ size={15}
+ color={Colors.ORANGE5}
+ style={{ marginLeft: '6px', marginBottom: '2px' }}
+ />
+ )}
</h3>
<Divider className='section-divider' />
</>
@@ -100,13 +110,23 @@ const AdvancedJSON = (props) => {
className='code-editor-card'
interactive={false}
elevation={Elevation.ZERO}
- style={{ padding: '2px', minWidth: '320px', width: '100%', maxWidth: '100%', marginBottom: '20px', ...cardStyle }}
+ style={{
+ padding: '2px',
+ minWidth: '320px',
+ width: '100%',
+ maxWidth: '100%',
+ marginBottom: '20px',
+ ...cardStyle
+ }}
>
<TextArea
growVertically={false}
fill={true}
className='codeArea'
- style={{ minHeight: '240px', backgroundColor: validationAdvancedError ? '#fff9e9' : '#f9f9f9' }}
+ style={{
+ minHeight: '240px',
+ backgroundColor: validationAdvancedError ? '#fff9e9' : '#f9f9f9'
+ }}
value={rawConfiguration}
onChange={(e) => setRawConfiguration(e.target.value)}
/>
@@ -123,13 +143,15 @@ const AdvancedJSON = (props) => {
<ButtonGroup
intent={Intent.PRIMARY}
minimal
- className='code-editor-controls' style={{
- borderRadius: '3px',
+ className='code-editor-controls'
+ style={{
+ borderRadius: '3px'
// boxShadow: '0px 0px 2px rgba(0, 0, 0, 0.30)'
}}
>
<Button
- small text='Reset'
+ small
+ text='Reset'
icon='eraser'
onClick={() => setRawConfiguration('[[]]')}
/>
@@ -165,15 +187,18 @@ const AdvancedJSON = (props) => {
</ButtonGroup>
</div>
</Card>
-
</Card>
{showModeNotice && (
<div className='mode-notice normal-mode-notice'>
- <p>To visually define blueprint tasks, please use <a href='#' rel='noreferrer' onClick={() => onAdvancedMode(false)}>Normal Mode</a></p>
+ <p>
+ To visually define blueprint tasks, please use{' '}
+ <a href='#' rel='noreferrer' onClick={() => onAdvancedMode(false)}>
+ Normal Mode
+ </a>
+ </p>
</div>
)}
-
</div>
)
}
diff --git a/config-ui/src/components/blueprints/create-workflow/AdvancedJSONValidation.jsx b/config-ui/src/components/blueprints/create-workflow/AdvancedJSONValidation.jsx
index e434026d..b2d18e46 100644
--- a/config-ui/src/components/blueprints/create-workflow/AdvancedJSONValidation.jsx
+++ b/config-ui/src/components/blueprints/create-workflow/AdvancedJSONValidation.jsx
@@ -16,12 +16,7 @@
*
*/
import React from 'react'
-import {
- Divider,
- Elevation,
- Card,
- Colors,
-} from '@blueprintjs/core'
+import { Divider, Elevation, Card, Colors } from '@blueprintjs/core'
const AdvancedJSONValidation = (props) => {
const {
@@ -42,7 +37,7 @@ const AdvancedJSONValidation = (props) => {
// isRunning = false,
isValidConfiguration = false,
// advancedMode = false,
- validationAdvancedError = null,
+ validationAdvancedError = null
// validationErrors = [],
} = props
@@ -71,7 +66,7 @@ const AdvancedJSONValidation = (props) => {
style={{
// color: '#7497F7',
marginTop: '5px',
- display: 'inline-block',
+ display: 'inline-block'
}}
>
Find out more
@@ -88,7 +83,7 @@ const AdvancedJSONValidation = (props) => {
rel='noreferrer'
style={{
marginTop: '5px',
- display: 'inline-block',
+ display: 'inline-block'
}}
onClick={onPrev}
>
@@ -102,7 +97,7 @@ const AdvancedJSONValidation = (props) => {
style={{
borderRadius: '8px',
backgroundColor: '#f0f0f0',
- padding: '10px',
+ padding: '10px'
}}
>
{rawConfiguration}
diff --git a/config-ui/src/components/blueprints/create-workflow/DataConnections.jsx b/config-ui/src/components/blueprints/create-workflow/DataConnections.jsx
index 1aa6c24f..99bbe02d 100644
--- a/config-ui/src/components/blueprints/create-workflow/DataConnections.jsx
+++ b/config-ui/src/components/blueprints/create-workflow/DataConnections.jsx
@@ -25,7 +25,7 @@ import {
Spinner,
Elevation,
Card,
- Colors,
+ Colors
} from '@blueprintjs/core'
import BlueprintNameCard from '../BlueprintNameCard'
@@ -66,7 +66,10 @@ const DataConnections = (props) => {
}, [])
return (
- <div className='workflow-step workflow-step-data-connections' data-step={activeStep?.id}>
+ <div
+ className='workflow-step workflow-step-data-connections'
+ data-step={activeStep?.id}
+ >
<BlueprintNameCard
advancedMode={advancedMode}
activeStep={activeStep}
@@ -84,7 +87,7 @@ const DataConnections = (props) => {
<div
style={{
display: 'flex',
- justifyContent: 'space-between',
+ justifyContent: 'space-between'
}}
>
<h3 style={{ margin: 0 }}>
@@ -132,11 +135,18 @@ const DataConnections = (props) => {
justifyContent: 'space-between',
// margin: '8px 0',
padding: '8px 12px',
- borderBottom: '1px solid #f0f0f0',
+ borderBottom: '1px solid #f0f0f0'
}}
>
<div>
- <div className='connection-name' style={{ display: 'flex', alignItems: 'center', fontWeight: 600 }}>
+ <div
+ className='connection-name'
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ fontWeight: 600
+ }}
+ >
{bC.title}
</div>
</div>
@@ -151,7 +161,23 @@ const DataConnections = (props) => {
className='connection-status'
style={{ textTransform: 'capitalize' }}
>
- {(bC.statusResponse && displayOnlineStatus(bC.statusResponse)) || <><span style={{ display: 'inline-block', marginRight: '5px', width: '12px', height: '12px', float: 'left' }}><Spinner size={12} color={Colors.GRAY3} /></span> Testing</>}
+ {(bC.statusResponse &&
+ displayOnlineStatus(bC.statusResponse)) || (
+ <>
+ <span
+ style={{
+ display: 'inline-block',
+ marginRight: '5px',
+ width: '12px',
+ height: '12px',
+ float: 'left'
+ }}
+ >
+ <Spinner size={12} color={Colors.GRAY3} />
+ </span>{' '}
+ Testing
+ </>
+ )}
</div>
<div
className='connection-actions'
@@ -172,7 +198,7 @@ const DataConnections = (props) => {
minimal
style={{
minWidth: '18px',
- minHeight: '18px',
+ minHeight: '18px'
}}
/>
</div>
@@ -180,17 +206,23 @@ const DataConnections = (props) => {
</div>
))}
</Card>
- {blueprintConnections.some(c => c.status !== 200) && !isTesting && (
- <p style={{ margin: '10px 0', color: Colors.RED4 }}>
- Please fix the offline connection.
- </p>
- )}
+ {blueprintConnections.some((c) => c.status !== 200) &&
+ !isTesting && (
+ <p style={{ margin: '10px 0', color: Colors.RED4 }}>
+ Please fix the offline connection.
+ </p>
+ )}
</>
)}
</Card>
<div className='mode-notice advanced-mode-notice'>
- <p>To customize how tasks are executed in the blueprint, please use <a href='#' rel='noreferrer' onClick={() => onAdvancedMode(true)}>Advanced Mode</a></p>
+ <p>
+ To customize how tasks are executed in the blueprint, please use{' '}
+ <a href='#' rel='noreferrer' onClick={() => onAdvancedMode(true)}>
+ Advanced Mode
+ </a>
+ </p>
</div>
</div>
)
diff --git a/config-ui/src/components/blueprints/create-workflow/DataScopes.jsx b/config-ui/src/components/blueprints/create-workflow/DataScopes.jsx
index c2b65f4e..eea5d9b2 100644
--- a/config-ui/src/components/blueprints/create-workflow/DataScopes.jsx
+++ b/config-ui/src/components/blueprints/create-workflow/DataScopes.jsx
@@ -16,8 +16,15 @@
*
*/
import React, { useEffect, useMemo } from 'react'
-import { Button, Card, Divider, Elevation, Intent, TagInput, } from '@blueprintjs/core'
-import { ProviderIcons, Providers, } from '@/data/Providers'
+import {
+ Button,
+ Card,
+ Divider,
+ Elevation,
+ Intent,
+ TagInput
+} from '@blueprintjs/core'
+import { ProviderIcons, Providers } from '@/data/Providers'
import ConnectionTabs from '@/components/blueprints/ConnectionTabs'
import BoardsSelector from '@/components/blueprints/BoardsSelector'
import DataEntitiesSelector from '@/components/blueprints/DataEntitiesSelector'
@@ -55,8 +62,14 @@ const DataScopes = (props) => {
cardStyle = {}
} = props
- const selectedBoards = useMemo(() => boards[configuredConnection.id], [boards, configuredConnection?.id])
- const selectedProjects = useMemo(() => projects[configuredConnection.id], [projects, configuredConnection?.id])
+ const selectedBoards = useMemo(
+ () => boards[configuredConnection.id],
+ [boards, configuredConnection?.id]
+ )
+ const selectedProjects = useMemo(
+ () => projects[configuredConnection.id],
+ [projects, configuredConnection?.id]
+ )
useEffect(() => {
console.log('>> OVER HERE!!!', selectedBoards)
@@ -67,7 +80,10 @@ const DataScopes = (props) => {
}, [selectedProjects])
return (
- <div className='workflow-step workflow-step-data-scope' data-step={activeStep?.id}>
+ <div
+ className='workflow-step workflow-step-data-scope'
+ data-step={activeStep?.id}
+ >
{blueprintConnections.length > 0 && (
<div style={{ display: 'flex' }}>
{enableConnectionTabs && (
@@ -102,13 +118,11 @@ const DataScopes = (props) => {
<>
<h3>
<span style={{ float: 'left', marginRight: '8px' }}>
- {ProviderIcons[configuredConnection.provider]
- ? (
- ProviderIcons[configuredConnection.provider](24, 24)
- )
- : (
- <></>
- )}
+ {ProviderIcons[configuredConnection.provider] ? (
+ ProviderIcons[configuredConnection.provider](24, 24)
+ ) : (
+ <></>
+ )}
</span>{' '}
{configuredConnection.title}
</h3>
@@ -124,19 +138,29 @@ const DataScopes = (props) => {
id='project-id'
disabled={isRunning}
placeholder='username/repo, username/another-repo'
- values={projects[configuredConnection.id]?.map(p => p.value) || []}
+ values={
+ projects[configuredConnection.id]?.map(
+ (p) => p.value
+ ) || []
+ }
fill={true}
onChange={(values) =>
setProjects((p) => ({
...p,
- [configuredConnection.id]: [...values.map((v, vIdx) => new GitHubProject({
- id: v,
- key: v,
- title: v,
- value: v,
- type: 'string'
- }))],
- }))}
+ [configuredConnection.id]: [
+ ...values.map(
+ (v, vIdx) =>
+ new GitHubProject({
+ id: v,
+ key: v,
+ title: v,
+ value: v,
+ type: 'string'
+ })
+ )
+ ]
+ }))
+ }
addOnPaste={true}
addOnBlur={true}
rightElement={
@@ -147,15 +171,21 @@ const DataScopes = (props) => {
onClick={() =>
setProjects((p) => ({
...p,
- [configuredConnection.id]: [],
- }))}
+ [configuredConnection.id]: []
+ }))
+ }
/>
}
onKeyDown={(e) =>
- e.key === 'Enter' && e.preventDefault()}
+ e.key === 'Enter' && e.preventDefault()
+ }
tagProps={{
- intent: validationErrors.some(e => e.startsWith('Projects:')) ? Intent.WARNING : Intent.PRIMARY,
- minimal: true,
+ intent: validationErrors.some((e) =>
+ e.startsWith('Projects:')
+ )
+ ? Intent.WARNING
+ : Intent.PRIMARY,
+ minimal: true
}}
className='input-project-id tagInput'
/>
@@ -179,7 +209,9 @@ const DataScopes = (props) => {
</>
)}
- {[Providers.GITLAB].includes(configuredConnection.provider) && (
+ {[Providers.GITLAB].includes(
+ configuredConnection.provider
+ ) && (
<>
<h4>Projects *</h4>
<p>Select the project you would like to sync.</p>
diff --git a/config-ui/src/components/blueprints/create-workflow/DataSync.jsx b/config-ui/src/components/blueprints/create-workflow/DataSync.jsx
index 33f8c8f9..488ce0ca 100644
--- a/config-ui/src/components/blueprints/create-workflow/DataSync.jsx
+++ b/config-ui/src/components/blueprints/create-workflow/DataSync.jsx
@@ -31,14 +31,14 @@ import {
Divider,
Elevation,
Card,
- Colors,
+ Colors
} from '@blueprintjs/core'
import {
Providers,
ProviderTypes,
ProviderIcons,
ConnectionStatus,
- ConnectionStatusLabels,
+ ConnectionStatusLabels
} from '@/data/Providers'
import InputValidationError from '@/components/validation/InputValidationError'
@@ -64,33 +64,38 @@ const DataSync = (props) => {
} = props
return (
- <div className='workflow-step workflow-step-set-sync-frequency' data-step={activeStep?.id}>
- <Card className='workflow-card' elevation={elevation} style={{ ...cardStyle }}>
+ <div
+ className='workflow-step workflow-step-set-sync-frequency'
+ data-step={activeStep?.id}
+ >
+ <Card
+ className='workflow-card'
+ elevation={elevation}
+ style={{ ...cardStyle }}
+ >
{enableHeader && (
<>
<h3 style={{ marginBottom: '8px' }}>Set Sync Frequency</h3>
- {getCronPresetByConfig(cronConfig)
- ? (
- <p
- style={{
- display: 'block',
- }}
- >
- <strong>Automated</strong> —{' '}
- {getCronPresetByConfig(cronConfig).description}
- </p>
- )
- : (
- <small
- style={{
- fontSize: '10px',
- color: Colors.GRAY2,
- textTransform: 'uppercase',
- }}
- >
- {cronConfig}
- </small>
- )}
+ {getCronPresetByConfig(cronConfig) ? (
+ <p
+ style={{
+ display: 'block'
+ }}
+ >
+ <strong>Automated</strong> —{' '}
+ {getCronPresetByConfig(cronConfig).description}
+ </p>
+ ) : (
+ <small
+ style={{
+ fontSize: '10px',
+ color: Colors.GRAY2,
+ textTransform: 'uppercase'
+ }}
+ >
+ {cronConfig}
+ </small>
+ )}
<Divider className='section-divider' />
</>
)}
@@ -110,7 +115,7 @@ const DataSync = (props) => {
label='Manual'
value='manual'
style={{
- fontWeight: cronConfig === 'manual' ? 'bold' : 'normal',
+ fontWeight: cronConfig === 'manual' ? 'bold' : 'normal'
}}
/>
{/* Dynamic Presets from Connection Manager */}
@@ -118,7 +123,7 @@ const DataSync = (props) => {
getCronPreset('hourly'),
getCronPreset('daily'),
getCronPreset('weekly'),
- getCronPreset('monthly'),
+ getCronPreset('monthly')
].map((preset, prIdx) => (
<Radio
key={`cron-preset-tooltip-key${prIdx}`}
@@ -137,7 +142,7 @@ const DataSync = (props) => {
style={{
fontWeight:
cronConfig === preset.cronConfig ? 'bold' : 'normal',
- outline: 'none !important',
+ outline: 'none !important'
}}
/>
))}
@@ -145,13 +150,13 @@ const DataSync = (props) => {
label='Custom'
value='custom'
style={{
- fontWeight: cronConfig === 'custom' ? 'bold' : 'normal',
+ fontWeight: cronConfig === 'custom' ? 'bold' : 'normal'
}}
/>
</RadioGroup>
<div
style={{
- display: cronConfig === 'custom' ? 'flex' : 'none',
+ display: cronConfig === 'custom' ? 'flex' : 'none'
}}
>
<FormGroup
@@ -170,18 +175,16 @@ const DataSync = (props) => {
fill={false}
readOnly={cronConfig !== 'custom'}
leftElement={
- cronConfig !== 'custom'
- ? (
- <Icon
- icon='lock'
- size={11}
- style={{
- alignSelf: 'center',
- margin: '4px 10px -2px 6px',
- }}
- />
- )
- : null
+ cronConfig !== 'custom' ? (
+ <Icon
+ icon='lock'
+ size={11}
+ style={{
+ alignSelf: 'center',
+ margin: '4px 10px -2px 6px'
+ }}
+ />
+ ) : null
}
rightElement={
<>
@@ -203,7 +206,7 @@ const DataSync = (props) => {
style={{
display: 'inline',
marginTop: 'auto',
- paddingBottom: '15px',
+ paddingBottom: '15px'
}}
>
<Popover
@@ -227,14 +230,14 @@ const DataSync = (props) => {
textShadow: 'none',
fontSize: '12px',
padding: '12px',
- maxWidth: '300px',
+ maxWidth: '300px'
}}
>
<div
style={{
marginBottom: '10px',
fontWeight: 700,
- fontSize: '14px',
+ fontSize: '14px'
}}
>
<Icon
@@ -262,7 +265,7 @@ const DataSync = (props) => {
style={{
border: 0,
margin: 0,
- maxWidth: '100%',
+ maxWidth: '100%'
}}
/>
</div>
diff --git a/config-ui/src/components/blueprints/create-workflow/DataTransformations.jsx b/config-ui/src/components/blueprints/create-workflow/DataTransformations.jsx
index ff3c9adf..8e1c35ee 100644
--- a/config-ui/src/components/blueprints/create-workflow/DataTransformations.jsx
+++ b/config-ui/src/components/blueprints/create-workflow/DataTransformations.jsx
@@ -15,11 +15,36 @@
* limitations under the License.
*
*/
-import React, { Fragment, useEffect, useState, useCallback, useMemo } from 'react'
-import { Button, Icon, Intent, InputGroup, MenuItem, Divider, Elevation, Card, Colors, Spinner, Tooltip, Position } from '@blueprintjs/core'
+import React, {
+ Fragment,
+ useEffect,
+ useState,
+ useCallback,
+ useMemo
+} from 'react'
+import {
+ Button,
+ Icon,
+ Intent,
+ InputGroup,
+ MenuItem,
+ Divider,
+ Elevation,
+ Card,
+ Colors,
+ Spinner,
+ Tooltip,
+ Position
+} from '@blueprintjs/core'
import { Select } from '@blueprintjs/select'
import { integrationsData } from '@/data/integrations'
-import { Providers, ProviderTypes, ProviderIcons, ConnectionStatus, ConnectionStatusLabels } from '@/data/Providers'
+import {
+ Providers,
+ ProviderTypes,
+ ProviderIcons,
+ ConnectionStatus,
+ ConnectionStatusLabels
+} from '@/data/Providers'
import { DataEntities, DataEntityTypes } from '@/data/DataEntities'
import { DEFAULT_DATA_ENTITIES } from '@/data/BlueprintWorkflow'
@@ -68,16 +93,36 @@ const DataTransformations = (props) => {
useDropdownSelector = false,
enableGoBack = true,
elevation = Elevation.TWO,
- cardStyle = {},
+ cardStyle = {}
} = props
- // lifted to dsm hook
- // const entityIdKey = useMemo(() => provider?.id === Providers.JENKINS ? `C#${configuredConnection?.id}` : (configuredProject?.id || configuredBoard?.id), [provider?.id, configuredConnection?.id, configuredProject?.id, configuredBoard?.id])
+ const isTransformationSupported = useMemo(
+ () =>
+ configuredProject ||
+ configuredBoard ||
+ (configuredConnection?.provider === Providers.JENKINS &&
+ configuredConnection),
+ [configuredProject, configuredBoard, configuredConnection]
+ )
+
+ const noTransformationsAvailable = useMemo(
+ () =>
+ [Providers.TAPD].includes(configuredConnection?.provider) ||
+ ([Providers.GITLAB].includes(configuredConnection?.provider) &&
+ dataEntities[configuredConnection?.id].every(
+ (e) => e.value !== DataEntityTypes.DEVOPS
+ )),
+ [configuredConnection?.provider, configuredConnection?.id, dataEntities]
+ )
const boardsAndProjects = useMemo(
() => [
- ...(Array.isArray(boards[configuredConnection?.id]) ? boards[configuredConnection?.id] : []),
- ...(Array.isArray(projects[configuredConnection?.id]) ? projects[configuredConnection?.id] : []),
+ ...(Array.isArray(boards[configuredConnection?.id])
+ ? boards[configuredConnection?.id]
+ : []),
+ ...(Array.isArray(projects[configuredConnection?.id])
+ ? projects[configuredConnection?.id]
+ : [])
],
[projects, boards, configuredConnection?.id]
)
@@ -88,7 +133,7 @@ const DataTransformations = (props) => {
value: e?.value,
title: e?.title,
entity: e,
- type: e.variant,
+ type: e.variant
}))
)
const [activeEntity, setActiveEntity] = useState()
@@ -96,7 +141,10 @@ const DataTransformations = (props) => {
const transformationHasProperties = useCallback(
(item) => {
const storedTransform = transformations[item?.id]
- return storedTransform && Object.values(storedTransform).some((v) => v && v.length > 0)
+ return (
+ storedTransform &&
+ Object.values(storedTransform).some((v) => v && v.length > 0)
+ )
},
[transformations]
)
@@ -118,17 +166,29 @@ const DataTransformations = (props) => {
break
}
}
- }, [activeEntity, addBoardTransformation, addProjectTransformation, useDropdownSelector])
+ }, [
+ activeEntity,
+ addBoardTransformation,
+ addProjectTransformation,
+ useDropdownSelector
+ ])
useEffect(() => {
- console.log('>>> DATA TRANSFORMATIONS: DSM $configurationKey', configurationKey)
+ console.log(
+ '>>> DATA TRANSFORMATIONS: DSM $configurationKey',
+ configurationKey
+ )
}, [configurationKey])
return (
- <div className='workflow-step workflow-step-add-transformation' data-step={activeStep?.id}>
+ <div
+ className='workflow-step workflow-step-add-transformation'
+ data-step={activeStep?.id}
+ >
{enableNoticeAlert && (
<p className='alert neutral'>
- Set transformation rules for your selected data to view more complex metrics in the dashboards.
+ Set transformation rules for your selected data to view more complex
+ metrics in the dashboards.
<br />
<a
href='#'
@@ -137,7 +197,7 @@ const DataTransformations = (props) => {
style={{
// color: '#7497F7',
marginTop: '5px',
- display: 'inline-block',
+ display: 'inline-block'
}}
>
Find out more
@@ -147,8 +207,15 @@ const DataTransformations = (props) => {
{blueprintConnections.length > 0 && (
<div style={{ display: 'flex' }}>
{enableConnectionTabs && (
- <div className='connection-tab-selector' style={{ minWidth: '200px' }}>
- <Card className='workflow-card connection-tabs-card' elevation={Elevation.TWO} style={{ padding: '10px' }}>
+ <div
+ className='connection-tab-selector'
+ style={{ minWidth: '200px' }}
+ >
+ <Card
+ className='workflow-card connection-tabs-card'
+ elevation={Elevation.TWO}
+ style={{ padding: '10px' }}
+ >
<ConnectionTabs
connections={blueprintConnections}
onChange={handleConnectionTabChange}
@@ -157,13 +224,24 @@ const DataTransformations = (props) => {
</Card>
</div>
)}
- <div className='connection-transformation' style={{ marginLeft: '10px', width: '100%' }}>
- <Card className='workflow-card workflow-panel-card' elevation={elevation} style={{ ...cardStyle }}>
+ <div
+ className='connection-transformation'
+ style={{ marginLeft: '10px', width: '100%' }}
+ >
+ <Card
+ className='workflow-card workflow-panel-card'
+ elevation={elevation}
+ style={{ ...cardStyle }}
+ >
{configuredConnection && (
<>
<h3>
<span style={{ float: 'left', marginRight: '8px' }}>
- {ProviderIcons[configuredConnection.provider] ? ProviderIcons[configuredConnection.provider](24, 24) : <></>}
+ {ProviderIcons[configuredConnection.provider] ? (
+ ProviderIcons[configuredConnection.provider](24, 24)
+ ) : (
+ <></>
+ )}
</span>{' '}
{configuredConnection.title}
</h3>
@@ -171,11 +249,24 @@ const DataTransformations = (props) => {
{useDropdownSelector &&
entityList &&
- [Providers.JIRA, Providers.GITHUB, Providers.GITLAB].includes(configuredConnection.provider) && (
- <div className='project-or-board-select' style={{ marginBottom: '20px' }}>
- <h4>{configuredConnection.provider === Providers.JIRA ? 'Board' : 'Project'}</h4>
+ [
+ Providers.JIRA,
+ Providers.GITHUB,
+ Providers.GITLAB
+ ].includes(configuredConnection.provider) && (
+ <div
+ className='project-or-board-select'
+ style={{ marginBottom: '20px' }}
+ >
+ <h4>
+ {configuredConnection.provider === Providers.JIRA
+ ? 'Board'
+ : 'Project'}
+ </h4>
<Select
- disabled={configuredConnection.provider === Providers.JENKINS}
+ disabled={
+ configuredConnection.provider === Providers.JENKINS
+ }
popoverProps={{ usePortal: false }}
className='selector-entity'
id='selector-entity'
@@ -183,7 +274,12 @@ const DataTransformations = (props) => {
fill={true}
items={entityList}
activeItem={activeEntity}
- itemPredicate={(query, item) => item?.title?.toString().toLowerCase().indexOf(query.toLowerCase()) >= 0}
+ itemPredicate={(query, item) =>
+ item?.title
+ ?.toString()
+ .toLowerCase()
+ .indexOf(query.toLowerCase()) >= 0
+ }
itemRenderer={(item, { handleClick, modifiers }) => (
<MenuItem
active={modifiers.active}
@@ -193,30 +289,46 @@ const DataTransformations = (props) => {
text={item.title}
/>
)}
- noResults={<MenuItem disabled={true} text='No projects or boards.' />}
+ noResults={
+ <MenuItem
+ disabled={true}
+ text='No projects or boards.'
+ />
+ }
onItemSelect={(item) => {
setActiveEntity(item)
}}
>
<Button
- disabled={configuredConnection.provider === Providers.JENKINS}
+ disabled={
+ configuredConnection.provider ===
+ Providers.JENKINS
+ }
className='btn-select-entity'
intent={Intent.PRIMARY}
outlined
- text={activeEntity ? `${activeEntity?.title || '- None Available -'}` : '< Select Project / Board >'}
+ text={
+ activeEntity
+ ? `${
+ activeEntity?.title || '- None Available -'
+ }`
+ : '< Select Project / Board >'
+ }
rightIcon='caret-down'
fill
style={{
maxWidth: '100%',
display: 'flex',
- justifyContent: 'space-between',
+ justifyContent: 'space-between'
}}
/>
</Select>
</div>
)}
- {[Providers.GITLAB, Providers.GITHUB].includes(configuredConnection.provider) &&
+ {[Providers.GITLAB, Providers.GITHUB].includes(
+ configuredConnection.provider
+ ) &&
!useDropdownSelector &&
!configuredProject && (
<>
@@ -241,68 +353,66 @@ const DataTransformations = (props) => {
</>
)}
- {[Providers.JIRA].includes(configuredConnection.provider) && !useDropdownSelector && !configuredBoard && (
- <>
- <StandardStackedList
- items={boards}
- transformations={transformations}
- className='selected-items-list selected-boards-list'
- connection={configuredConnection}
- activeItem={configuredBoard}
- onAdd={addBoardTransformation}
- onChange={addBoardTransformation}
- isEditing={transformationHasProperties}
- />
- {boards[configuredConnection.id].length === 0 && (
- <NoData
- title='No Boards Selected'
- icon='th'
- message='Please select specify at least one board.'
- onClick={prevStep}
+ {[Providers.JIRA].includes(configuredConnection.provider) &&
+ !useDropdownSelector &&
+ !configuredBoard && (
+ <>
+ <StandardStackedList
+ items={boards}
+ transformations={transformations}
+ className='selected-items-list selected-boards-list'
+ connection={configuredConnection}
+ activeItem={configuredBoard}
+ onAdd={addBoardTransformation}
+ onChange={addBoardTransformation}
+ isEditing={transformationHasProperties}
/>
- )}
- </>
- )}
+ {boards[configuredConnection.id].length === 0 && (
+ <NoData
+ title='No Boards Selected'
+ icon='th'
+ message='Please select specify at least one board.'
+ onClick={prevStep}
+ />
+ )}
+ </>
+ )}
- {(configuredProject ||
- configuredBoard ||
- (configuredConnection?.provider === Providers.JENKINS && configuredConnection)) && (
+ {isTransformationSupported && (
<div>
- {!useDropdownSelector && (configuredProject || configuredBoard) && (
- <>
- <h4>Project</h4>
- <p style={{ color: '#292B3F' }}>{configuredProject?.title || configuredBoard?.title || '< select a project >'}</p>
- </>
- )}
+ {!useDropdownSelector &&
+ (configuredProject || configuredBoard) && (
+ <>
+ <h4>Project</h4>
+ <p style={{ color: '#292B3F' }}>
+ {configuredProject?.title ||
+ configuredBoard?.title ||
+ '< select a project >'}
+ </p>
+ </>
+ )}
<div
style={{
display: 'flex',
justifyContent: 'space-between',
- alignItems: 'center',
+ alignItems: 'center'
}}
>
<h4 style={{ margin: 0 }}>Data Transformation Rules</h4>
- <div>
- {/* @todo: reactivate clear all functionality */}
- {/* <Button
- minimal
- small
- text='Clear All'
- intent={Intent.NONE}
- href='#'
- onClick={clearTransformation}
- style={{ float: 'right' }}
- disabled={Object.keys(activeTransformation || {}).length === 0}
- /> */}
- </div>
+ <div />
</div>
{!dataEntities[configuredConnection.id] ||
- (dataEntities[configuredConnection.id]?.length === 0 && <p>(No Data Entities Selected)</p>)}
+ (dataEntities[configuredConnection.id]?.length ===
+ 0 && <p>(No Data Entities Selected)</p>)}
- {dataEntities[configuredConnection.id]?.find((e) => DEFAULT_DATA_ENTITIES.some((dE) => dE.value === e.value)) && (
+ {dataEntities[configuredConnection.id]?.find((e) =>
+ DEFAULT_DATA_ENTITIES.some((dE) => dE.value === e.value)
+ ) && (
<ProviderTransformationSettings
- provider={integrationsData.find((i) => i.id === configuredConnection?.provider)}
+ provider={integrationsData.find(
+ (i) => i.id === configuredConnection?.provider
+ )}
blueprint={blueprint}
connection={configuredConnection}
configuredProject={configuredProject}
@@ -323,44 +433,34 @@ const DataTransformations = (props) => {
/>
)}
- <div className='transformation-actions' style={{ display: 'flex', justifyContent: 'flex-end' }}>
- {/* <Button
- text='Cancel'
- small
- outlined
- onClick={onCancel}
- />
- <Button
- text='Save'
- intent={Intent.PRIMARY}
- small
- outlined
- onClick={() => onSave(newTransformation[configuredBoard?.id], configuredBoard?.id)}
- disabled={[Providers.GITLAB].includes(configuredConnection?.provider)}
- style={{ marginLeft: '5px' }}
- /> */}
- {enableGoBack && (configuredProject || configuredBoard) && (
- <Tooltip position={Position.TOP} intent={Intent.PRIMARY} content='Close Editor to Continue'>
- <Button
- text='Go Back'
+ <div
+ className='transformation-actions'
+ style={{ display: 'flex', justifyContent: 'flex-end' }}
+ >
+ {enableGoBack &&
+ (configuredProject || configuredBoard) && (
+ <Tooltip
+ position={Position.TOP}
intent={Intent.PRIMARY}
- small
- outlined
- onClick={() => onSave()}
- // disabled={[Providers.GITLAB].includes(configuredConnection?.provider)}
- style={{ marginLeft: '5px' }}
- />
- </Tooltip>
- )}
+ content='Close Editor to Continue'
+ >
+ <Button
+ text='Go Back'
+ intent={Intent.PRIMARY}
+ small
+ outlined
+ onClick={() => onSave()}
+ style={{ marginLeft: '5px' }}
+ />
+ </Tooltip>
+ )}
</div>
</div>
)}
</>
)}
- {([Providers.TAPD].includes(configuredConnection.provider) ||
- ([Providers.GITLAB].includes(configuredConnection.provider) &&
- dataEntities[configuredConnection.id].every((e) => e.value !== DataEntityTypes.DEVOPS))) && (
+ {noTransformationsAvailable && (
<>
<div className='bp3-non-ideal-state'>
<div className='bp3-non-ideal-state-visual'>
@@ -370,7 +470,9 @@ const DataTransformations = (props) => {
<h4 className='bp3-heading' style={{ margin: 0 }}>
No Data Transformations
</h4>
- <div>No additional settings are available at this time.</div>
+ <div>
+ No additional settings are available at this time.
+ </div>
</div>
</div>
</>
@@ -391,7 +493,10 @@ const DataTransformations = (props) => {
</h4>
<div>Please select at least one connection source.</div>
</div>
- <button className='bp3-button bp4-intent-primary' onClick={prevStep}>
+ <button
+ className='bp3-button bp4-intent-primary'
+ onClick={prevStep}
+ >
Go Back
</button>
</div>
diff --git a/config-ui/src/components/blueprints/transformations/CICD/Deployment.jsx b/config-ui/src/components/blueprints/transformations/CICD/Deployment.jsx
index 74ea0f98..f54dbf4d 100644
--- a/config-ui/src/components/blueprints/transformations/CICD/Deployment.jsx
+++ b/config-ui/src/components/blueprints/transformations/CICD/Deployment.jsx
@@ -38,34 +38,53 @@ const Deployment = (props) => {
entityIdKey,
entities = [],
isSaving = false,
- onSettingsChange = () => {},
+ onSettingsChange = () => {}
} = props
- const [deployTag, setDeployTag] = useState(transformation?.productionPattern || '')
- const [enableDeployTag, setEnableDeployTag] = useState([
- transformation?.productionPattern,
- // transformation?.stagingPattern,
- // transformation?.testingPattern
- ].some(t => t && t !== '') ? 1 : 0)
+ const [deployTag, setDeployTag] = useState(
+ transformation?.productionPattern || ''
+ )
+ const [enableDeployTag, setEnableDeployTag] = useState(
+ [
+ transformation?.productionPattern
+ // transformation?.stagingPattern,
+ // transformation?.testingPattern
+ ].some((t) => t && t !== '')
+ ? 1
+ : 0
+ )
+ const isDeployTagEmpty = useMemo(
+ () =>
+ enableDeployTag &&
+ (transformation?.productionPattern === '' ||
+ !transformation?.productionPattern),
+ [enableDeployTag, transformation?.productionPattern]
+ )
- const clearDeploymentTags = useCallback((deploymentOption) => {
- if (entityIdKey && deploymentOption === 0) {
- onSettingsChange({ productionPattern: '' }, entityIdKey)
- // onSettingsChange({ stagingPattern: '' }, entityIdKey)
- // onSettingsChange({ testingPattern: '' }, entityIdKey)
- }
- }, [entityIdKey, onSettingsChange])
+ const clearDeploymentTags = useCallback(
+ (deploymentOption) => {
+ if (entityIdKey && deploymentOption === 0) {
+ onSettingsChange({ productionPattern: '' }, entityIdKey)
+ // onSettingsChange({ stagingPattern: '' }, entityIdKey)
+ // onSettingsChange({ testingPattern: '' }, entityIdKey)
+ }
+ },
+ [entityIdKey, onSettingsChange]
+ )
- const handleDeploymentPreference = useCallback((deployOptionState) => {
- setEnableDeployTag(deployOptionState)
- switch (deployOptionState) {
- case 0:
- clearDeploymentTags(deployOptionState)
- break
- case 1:
- break
- }
- }, [clearDeploymentTags])
+ const handleDeploymentPreference = useCallback(
+ (deployOptionState) => {
+ setEnableDeployTag(deployOptionState)
+ switch (deployOptionState) {
+ case 0:
+ clearDeploymentTags(deployOptionState)
+ break
+ case 1:
+ break
+ }
+ },
+ [clearDeploymentTags]
+ )
// @todo: check w/ product team about using standard message and avoid customized hints
const getDeployTagHint = (providerId, providerName = 'Plugin') => {
@@ -79,7 +98,7 @@ const Deployment = (props) => {
case Providers.GITLAB:
case 'default':
// eslint-disable-next-line max-len
- tagHint = 'A CI job/build with a name that matches the given regEx is considered as an deployment. You can define your Deployments for three environments: Production, Staging and Testing.'
+ tagHint = `A CI job/build with a name that matches the given regEx is considered as an deployment. You can define your Deployments for three environments: Production, Staging and Testing.`
break
}
return tagHint
@@ -107,16 +126,24 @@ const Deployment = (props) => {
useEffect(() => {
console.log('>>> CI/CD Deployment: TRANSFORMATION OBJECT!', transformation)
setEnableDeployTag(
- [transformation?.productionPattern,
- // transformation?.stagingPattern,
- // transformation?.testingPattern
- ].some(t => t && t !== '') ? 1 : 0
+ [
+ transformation?.productionPattern
+ // transformation?.stagingPattern,
+ // transformation?.testingPattern
+ ].some((t) => t && t !== '')
+ ? 1
+ : 0
)
}, [transformation, transformation?.productionPattern])
return (
<>
- <h5>CI/CD <Tag className='bp3-form-helper-text' minimal>RegExp</Tag></h5>
+ <h5>
+ CI/CD{' '}
+ <Tag className='bp3-form-helper-text' minimal>
+ RegExp
+ </Tag>
+ </h5>
<p>Define deployment using one of the followng options</p>
<p style={{ color: '#292B3F' }}>
<strong>What is a deployment?</strong>{' '}
@@ -134,22 +161,40 @@ const Deployment = (props) => {
required
>
<Radio
- label={getDeployOptionLabel(provider?.id, ProviderLabels[provider?.id?.toUpperCase()])}
+ label={getDeployOptionLabel(
+ provider?.id,
+ ProviderLabels[provider?.id?.toUpperCase()]
+ )}
value={1}
/>
{enableDeployTag === 1 && (
<>
<div
className='bp3-form-helper-text'
- style={{ display: 'block', textAlign: 'left', color: '#94959F', marginBottom: '5px' }}
+ style={{
+ display: 'block',
+ textAlign: 'left',
+ color: '#94959F',
+ marginBottom: '5px'
+ }}
>
- {getDeployTagHint(provider?.id, ProviderLabels[provider?.id?.toUpperCase()])}
+ {getDeployTagHint(
+ provider?.id,
+ ProviderLabels[provider?.id?.toUpperCase()]
+ )}
</div>
<div className='formContainer'>
<FormGroup
disabled={isSaving}
inline={true}
- label={<label className='bp3-label' style={{ minWidth: '150px', marginRight: '10px' }}>Deployment (Production)</label>}
+ label={
+ <label
+ className='bp3-label'
+ style={{ minWidth: '150px', marginRight: '10px' }}
+ >
+ Deployment (Production)
+ </label>
+ }
labelFor='deploy-tag-production'
className='formGroup'
contentClassName='formGroupContent'
@@ -158,18 +203,29 @@ const Deployment = (props) => {
id='deploy-tag-production'
placeholder='(?i)deploy'
value={transformation?.productionPattern}
- onChange={(e) => onSettingsChange({ productionPattern: e.target.value }, entityIdKey)}
+ onChange={(e) =>
+ onSettingsChange(
+ { productionPattern: e.target.value },
+ entityIdKey
+ )
+ }
disabled={isSaving}
className='input'
maxLength={255}
rightElement={
- enableDeployTag && (transformation?.productionPattern === '' || !transformation?.productionPattern)
- ? (
- <Tooltip intent={Intent.PRIMARY} content='Deployment Tag RegEx required'>
- <Icon icon='warning-sign' color={Colors.GRAY3} size={12} style={{ margin: '8px' }} />
- </Tooltip>
- )
- : null
+ isDeployTagEmpty ? (
+ <Tooltip
+ intent={Intent.PRIMARY}
+ content='Deployment Tag RegEx required'
+ >
+ <Icon
+ icon='warning-sign'
+ color={Colors.GRAY3}
+ size={12}
+ style={{ margin: '8px' }}
+ />
+ </Tooltip>
+ ) : null
}
required
/>
diff --git a/config-ui/src/components/loaders/ContentLoader.jsx b/config-ui/src/components/loaders/ContentLoader.jsx
index 4e5384af..949013a0 100644
--- a/config-ui/src/components/loaders/ContentLoader.jsx
+++ b/config-ui/src/components/loaders/ContentLoader.jsx
@@ -16,12 +16,7 @@
*
*/
import React, { useEffect } from 'react'
-import {
- Card,
- Elevation,
- Intent,
- Spinner
-} from '@blueprintjs/core'
+import { Card, Elevation, Intent, Spinner } from '@blueprintjs/core'
const ContentLoader = (props) => {
const {
title = 'Loading ...',
@@ -29,17 +24,23 @@ const ContentLoader = (props) => {
spinnerSize = 24,
spinnerIntent = Intent.PRIMARY,
elevation = Elevation.TWO,
- cardStyle = { width: '100%', marginBottom: '20px', boxShadow: elevation === Elevation.ZERO ? 'none' : 'initial' },
+ cardStyle = {
+ width: '100%',
+ marginBottom: '20px',
+ boxShadow: elevation === Elevation.ZERO ? 'none' : 'initial'
+ },
cardStyleOverrides = {},
messageClasses = ['bp3-ui-text', 'bp3-text-large']
} = props
- useEffect(() => {
-
- }, [title, message, spinnerSize])
+ useEffect(() => {}, [title, message, spinnerSize])
return (
- <Card interactive={false} elevation={elevation} style={{ ...cardStyle, ...cardStyleOverrides }}>
+ <Card
+ interactive={false}
+ elevation={elevation}
+ style={{ ...cardStyle, ...cardStyleOverrides }}
+ >
<div style={{}}>
<div style={{ display: 'flex' }}>
<Spinner intent={spinnerIntent} size={spinnerSize} />
diff --git a/config-ui/src/components/menus/PipelineConfigsMenu.jsx b/config-ui/src/components/menus/PipelineConfigsMenu.jsx
index 50a224d1..d45a4312 100644
--- a/config-ui/src/components/menus/PipelineConfigsMenu.jsx
+++ b/config-ui/src/components/menus/PipelineConfigsMenu.jsx
@@ -31,7 +31,7 @@ import { starRocksConfig as sampleStarRocksConfigPipelineConfig } from '@/data/p
const PipelineConfigsMenu = (props) => {
const {
setRawConfiguration = () => {},
- showTitle = false,
+ showTitle = false
// advancedMode = false
} = props
return (
@@ -43,7 +43,7 @@ const PipelineConfigsMenu = (props) => {
fontWeight: 800,
textTransform: 'uppercase',
padding: '6px 8px',
- display: 'block',
+ display: 'block'
}}
>
SAMPLE PIPELINE CONFIGURATIONS
@@ -53,7 +53,8 @@ const PipelineConfigsMenu = (props) => {
icon='code'
text='Load General Configuration'
onClick={() =>
- setRawConfiguration(JSON.stringify(samplePipelineConfig, null, ' '))}
+ setRawConfiguration(JSON.stringify(samplePipelineConfig, null, ' '))
+ }
/>
<Menu.Item
icon='code'
@@ -61,7 +62,8 @@ const PipelineConfigsMenu = (props) => {
onClick={() =>
setRawConfiguration(
JSON.stringify(sampleRefdiffPipelineConfig, null, ' ')
- )}
+ )
+ }
/>
<Menu.Item
icon='code'
@@ -69,7 +71,8 @@ const PipelineConfigsMenu = (props) => {
onClick={() =>
setRawConfiguration(
JSON.stringify(sampleGitextractorPipelineConfig, null, ' ')
- )}
+ )
+ }
/>
<Menu.Item
icon='code'
@@ -77,7 +80,8 @@ const PipelineConfigsMenu = (props) => {
onClick={() =>
setRawConfiguration(
JSON.stringify(sampleGithubPipelineConfig, null, ' ')
- )}
+ )
+ }
/>
<Menu.Item
icon='code'
@@ -85,7 +89,8 @@ const PipelineConfigsMenu = (props) => {
onClick={() =>
setRawConfiguration(
JSON.stringify(sampleGitlabPipelineConfig, null, ' ')
- )}
+ )
+ }
/>
<Menu.Item
icon='code'
@@ -93,7 +98,8 @@ const PipelineConfigsMenu = (props) => {
onClick={() =>
setRawConfiguration(
JSON.stringify(sampleJiraPipelineConfig, null, ' ')
- )}
+ )
+ }
/>
<Menu.Item
icon='code'
@@ -101,7 +107,8 @@ const PipelineConfigsMenu = (props) => {
onClick={() =>
setRawConfiguration(
JSON.stringify(sampleJenkinsPipelineConfig, null, ' ')
- )}
+ )
+ }
/>
<Menu.Item
icon='code'
@@ -109,7 +116,8 @@ const PipelineConfigsMenu = (props) => {
onClick={() =>
setRawConfiguration(
JSON.stringify(sampleFeishuPipelineConfig, null, ' ')
- )}
+ )
+ }
/>
<Menu.Item
icon='code'
@@ -117,7 +125,8 @@ const PipelineConfigsMenu = (props) => {
onClick={() =>
setRawConfiguration(
JSON.stringify(sampleDbtPipelineConfig, null, ' ')
- )}
+ )
+ }
/>
<Menu.Item
icon='code'
@@ -125,7 +134,8 @@ const PipelineConfigsMenu = (props) => {
onClick={() =>
setRawConfiguration(
JSON.stringify(sampleStarRocksConfigPipelineConfig, null, ' ')
- )}
+ )
+ }
/>
</Menu>
)
diff --git a/config-ui/src/components/menus/PipelinePresetsMenu.jsx b/config-ui/src/components/menus/PipelinePresetsMenu.jsx
index 341e1344..11c54c68 100644
--- a/config-ui/src/components/menus/PipelinePresetsMenu.jsx
+++ b/config-ui/src/components/menus/PipelinePresetsMenu.jsx
@@ -30,68 +30,105 @@ const PipelinePresetsMenu = (props) => {
} = props
return (
<Menu className='pipeline-presets-menu'>
- <label style={{
- fontSize: '10px',
- fontWeight: 800,
- textTransform: 'uppercase',
- padding: '6px 8px',
- display: 'block'
- }}
- >Preset Naming Options
+ <label
+ style={{
+ fontSize: '10px',
+ fontWeight: 800,
+ textTransform: 'uppercase',
+ padding: '6px 8px',
+ display: 'block'
+ }}
+ >
+ Preset Naming Options
</label>
<Menu.Item text='COLLECTION ...' active={namePrefix === 'COLLECT'}>
<Menu.Item
icon='key-option'
text='COLLECT [UNIXTIME]'
- onClick={() => setNamePrefix('COLLECT') | setNameSuffix(pipelineSuffixes[0])}
+ onClick={() =>
+ setNamePrefix('COLLECT') | setNameSuffix(pipelineSuffixes[0])
+ }
/>
<Menu.Item
icon='key-option'
- text='COLLECT [YYYYMMDDHHMMSS]' onClick={() => setNamePrefix('COLLECT') | setNameSuffix(pipelineSuffixes[3])}
+ text='COLLECT [YYYYMMDDHHMMSS]'
+ onClick={() =>
+ setNamePrefix('COLLECT') | setNameSuffix(pipelineSuffixes[3])
+ }
/>
<Menu.Item
- icon='key-option' text='COLLECT [ISO]'
- onClick={() => setNamePrefix('COLLECT') | setNameSuffix(pipelineSuffixes[2])}
+ icon='key-option'
+ text='COLLECT [ISO]'
+ onClick={() =>
+ setNamePrefix('COLLECT') | setNameSuffix(pipelineSuffixes[2])
+ }
+ />
+ <Menu.Item
+ icon='key-option'
+ text='COLLECT [UTC]'
+ onClick={() =>
+ setNamePrefix('COLLECT') | setNameSuffix(pipelineSuffixes[4])
+ }
/>
- <Menu.Item icon='key-option' text='COLLECT [UTC]' onClick={() => setNamePrefix('COLLECT') | setNameSuffix(pipelineSuffixes[4])} />
</Menu.Item>
<Menu.Item text='SYNCHRONIZE ...' active={namePrefix === 'SYNC'}>
<Menu.Item
- icon='key-option' text='SYNC [UNIXTIME]'
- onClick={() => setNamePrefix('SYNC') | setNameSuffix(pipelineSuffixes[0])}
+ icon='key-option'
+ text='SYNC [UNIXTIME]'
+ onClick={() =>
+ setNamePrefix('SYNC') | setNameSuffix(pipelineSuffixes[0])
+ }
/>
<Menu.Item
- icon='key-option' text='SYNC [YYYYMMDDHHMMSS]'
- onClick={() => setNamePrefix('SYNC') | setNameSuffix(pipelineSuffixes[3])}
+ icon='key-option'
+ text='SYNC [YYYYMMDDHHMMSS]'
+ onClick={() =>
+ setNamePrefix('SYNC') | setNameSuffix(pipelineSuffixes[3])
+ }
/>
<Menu.Item
- icon='key-option' text='SYNC [ISO]'
- onClick={() => setNamePrefix('SYNC') | setNameSuffix(pipelineSuffixes[2])}
+ icon='key-option'
+ text='SYNC [ISO]'
+ onClick={() =>
+ setNamePrefix('SYNC') | setNameSuffix(pipelineSuffixes[2])
+ }
/>
<Menu.Item
- icon='key-option' text='SYNC [UTC]'
- onClick={() => setNamePrefix('SYNC') | setNameSuffix(pipelineSuffixes[4])}
+ icon='key-option'
+ text='SYNC [UTC]'
+ onClick={() =>
+ setNamePrefix('SYNC') | setNameSuffix(pipelineSuffixes[4])
+ }
/>
</Menu.Item>
<Menu.Item text='RUN ...' active={namePrefix === 'RUN'}>
<Menu.Item
icon='key-option'
text='RUN [UNIXTIME]'
- onClick={() => setNamePrefix('RUN') | setNameSuffix(pipelineSuffixes[0])}
+ onClick={() =>
+ setNamePrefix('RUN') | setNameSuffix(pipelineSuffixes[0])
+ }
/>
<Menu.Item
- icon='key-option' text='RUN [YYYYMMDDHHMMSS]'
- onClick={() => setNamePrefix('RUN') | setNameSuffix(pipelineSuffixes[3])}
+ icon='key-option'
+ text='RUN [YYYYMMDDHHMMSS]'
+ onClick={() =>
+ setNamePrefix('RUN') | setNameSuffix(pipelineSuffixes[3])
+ }
/>
<Menu.Item
icon='key-option'
text='RUN [ISO]'
- onClick={() => setNamePrefix('RUN') | setNameSuffix(pipelineSuffixes[2])}
+ onClick={() =>
+ setNamePrefix('RUN') | setNameSuffix(pipelineSuffixes[2])
+ }
/>
<Menu.Item
icon='key-option'
text='RUN [UTC]'
- onClick={() => setNamePrefix('RUN') | setNameSuffix(pipelineSuffixes[4])}
+ onClick={() =>
+ setNamePrefix('RUN') | setNameSuffix(pipelineSuffixes[4])
+ }
/>
</Menu.Item>
<Menu.Divider />
diff --git a/config-ui/src/components/menus/RefDiffTasksMenu.jsx b/config-ui/src/components/menus/RefDiffTasksMenu.jsx
index ee062587..2efc2ff2 100644
--- a/config-ui/src/components/menus/RefDiffTasksMenu.jsx
+++ b/config-ui/src/components/menus/RefDiffTasksMenu.jsx
@@ -16,31 +16,29 @@
*
*/
import React from 'react'
-import {
- Menu,
- MenuItem,
- Checkbox,
- Intent
-} from '@blueprintjs/core'
+import { Menu, MenuItem, Checkbox, Intent } from '@blueprintjs/core'
const RefDiffTasksMenu = (props) => {
const {
tasks = [
{ task: 'calculateCommitsDiff', label: 'Calculate Commits Diff' },
- { task: 'calculateIssuesDiff', label: 'Calculate Issues Diff' }],
+ { task: 'calculateIssuesDiff', label: 'Calculate Issues Diff' }
+ ],
selected = [],
onSelect = () => {}
} = props
return (
<Menu className='tasks-menu refdiff-tasks-menu' minimal='true'>
- <label style={{
- fontSize: '10px',
- fontWeight: 800,
- textTransform: 'uppercase',
- padding: '6px 8px',
- display: 'block'
- }}
- >AVAILABLE PLUGIN TASKS
+ <label
+ style={{
+ fontSize: '10px',
+ fontWeight: 800,
+ textTransform: 'uppercase',
+ padding: '6px 8px',
+ display: 'block'
+ }}
+ >
+ AVAILABLE PLUGIN TASKS
</label>
{tasks.map((t, tIdx) => (
<MenuItem
@@ -50,7 +48,7 @@ const RefDiffTasksMenu = (props) => {
active={Boolean(selected.includes(t.task))}
// onClick={(e) => e.preventDefault()}
data-task={t}
- text={(
+ text={
<>
<Checkbox
intent={Intent.WARNING}
@@ -59,7 +57,7 @@ const RefDiffTasksMenu = (props) => {
onChange={(e) => onSelect(e, t)}
/>
</>
- )}
+ }
/>
))}
</Menu>
diff --git a/config-ui/src/components/messages/FormValidationErrors.jsx b/config-ui/src/components/messages/FormValidationErrors.jsx
index 55a1928f..6a6c1e1e 100644
--- a/config-ui/src/components/messages/FormValidationErrors.jsx
+++ b/config-ui/src/components/messages/FormValidationErrors.jsx
@@ -16,10 +16,7 @@
*
*/
import React, { Fragment } from 'react'
-import {
- Icon,
- Colors
-} from '@blueprintjs/core'
+import { Icon, Colors } from '@blueprintjs/core'
const FormValidationErrors = (props) => {
const { errors = [], textAlign = 'right', styles = {} } = props
@@ -28,10 +25,13 @@ const FormValidationErrors = (props) => {
{errors.length > 0 && (
<div className='validation-errors'>
<p style={{ margin: '5px 0 5px 0', textAlign: textAlign, ...styles }}>
- <Icon icon='warning-sign' size={13} color={Colors.ORANGE4} style={{ marginRight: '6px', marginBottom: '2px' }} />
- <span>
- {errors[0]}
- </span>
+ <Icon
+ icon='warning-sign'
+ size={13}
+ color={Colors.ORANGE4}
+ style={{ marginRight: '6px', marginBottom: '2px' }}
+ />
+ <span>{errors[0]}</span>
</p>
</div>
)}
diff --git a/config-ui/src/components/pipelines/CodeInspector.jsx b/config-ui/src/components/pipelines/CodeInspector.jsx
index 9800ad43..972c1e5d 100644
--- a/config-ui/src/components/pipelines/CodeInspector.jsx
+++ b/config-ui/src/components/pipelines/CodeInspector.jsx
@@ -29,7 +29,15 @@ import {
} from '@blueprintjs/core'
const CodeInspector = (props) => {
- const { activePipeline, isOpen, onClose, titleIcon = 'code', title = `Inspect RUN #${activePipeline.id}`, subtitle = 'JSON RESPONSE', hasBackdrop = true } = props
+ const {
+ activePipeline,
+ isOpen,
+ onClose,
+ titleIcon = 'code',
+ title = `Inspect RUN #${activePipeline.id}`,
+ subtitle = 'JSON RESPONSE',
+ hasBackdrop = true
+ } = props
return (
<Drawer
@@ -49,21 +57,33 @@ const CodeInspector = (props) => {
>
<div className={Classes.DRAWER_BODY}>
<div className={Classes.DIALOG_BODY}>
- <h3 className='no-user-select' style={{ margin: 0, padding: '8px 0' }}>
- <span style={{ float: 'right', fontSize: '9px', color: '#aaaaaa' }}>application/json</span> {subtitle}
+ <h3
+ className='no-user-select'
+ style={{ margin: 0, padding: '8px 0' }}
+ >
+ <span style={{ float: 'right', fontSize: '9px', color: '#aaaaaa' }}>
+ application/json
+ </span>{' '}
+ {subtitle}
</h3>
<p className='no-user-select'>
- If you are submitting a
- <strong> Bug-Report</strong> regarding a Pipeline Run, include the output below for better debugging.
+ If you are submitting a<strong> Bug-Report</strong> regarding a
+ Pipeline Run, include the output below for better debugging.
</p>
<div className='formContainer'>
<Card
className='code-inspector-card'
interactive={false}
elevation={Elevation.ZERO}
- style={{ padding: '6px 12px', minWidth: '320px', width: '100%', maxWidth: '601px', marginBottom: '20px', overflow: 'auto' }}
+ style={{
+ padding: '6px 12px',
+ minWidth: '320px',
+ width: '100%',
+ maxWidth: '601px',
+ marginBottom: '20px',
+ overflow: 'auto'
+ }}
>
-
<code>
<pre style={{ fontSize: '10px' }}>
{JSON.stringify(activePipeline, null, ' ')}
@@ -72,16 +92,21 @@ const CodeInspector = (props) => {
</Card>
</div>
<p style={{ fontSize: '10px', lineHeight: '120%', opacity: 0.6 }}>
- <Icon icon='info-sign' color={Colors.GRAY5} size={12} style={{ marginRight: '4px' }} />
- <strong>Pipelines</strong> —
- {' '}For a project with 10k commits and 5k Issues, this can take up to 20 minutes for collecting JIRA, GitLab, and Jenkins data.
- {' '}Collection will take longer for GitHub due to rate limits.
- {' '}You can accelerate the process by configuring multiple tokens.
+ <Icon
+ icon='info-sign'
+ color={Colors.GRAY5}
+ size={12}
+ style={{ marginRight: '4px' }}
+ />
+ <strong>Pipelines</strong> — For a project with 10k commits
+ and 5k Issues, this can take up to 20 minutes for collecting JIRA,
+ GitLab, and Jenkins data. Collection will take longer for GitHub due
+ to rate limits. You can accelerate the process by configuring
+ multiple tokens.
</p>
</div>
</div>
</Drawer>
-
)
}
diff --git a/config-ui/src/components/pipelines/ProviderSettings.jsx b/config-ui/src/components/pipelines/ProviderSettings.jsx
index 9f08a715..569462c7 100644
--- a/config-ui/src/components/pipelines/ProviderSettings.jsx
+++ b/config-ui/src/components/pipelines/ProviderSettings.jsx
@@ -16,8 +16,17 @@
*
*/
import React from 'react'
-import { Providers, } from '@/data/Providers'
-import { Button, ButtonGroup, Colors, FormGroup, InputGroup, Intent, MenuItem, TagInput, } from '@blueprintjs/core'
+import { Providers } from '@/data/Providers'
+import {
+ Button,
+ ButtonGroup,
+ Colors,
+ FormGroup,
+ InputGroup,
+ Intent,
+ MenuItem,
+ TagInput
+} from '@blueprintjs/core'
import { Select } from '@blueprintjs/select'
import RefDiffSettings from '@/components/pipelines/pipeline-settings/refdiff'
@@ -51,7 +60,7 @@ const ProviderSettings = (props) => {
setRefDiffPairs = () => {},
setRefDiffTasks = () => {},
isEnabled = () => {},
- isRunning = false,
+ isRunning = false
// onReset = () => {}
} = props
@@ -59,15 +68,29 @@ const ProviderSettings = (props) => {
switch (providerId) {
case Providers.JENKINS:
- providerSettings = <p><strong style={{ fontWeight: 900 }}>AUTO-CONFIGURED</strong><br />No Additional Settings</p>
+ providerSettings = (
+ <p>
+ <strong style={{ fontWeight: 900 }}>AUTO-CONFIGURED</strong>
+ <br />
+ No Additional Settings
+ </p>
+ )
break
case Providers.JIRA:
providerSettings = (
<>
<FormGroup
disabled={isRunning || !isEnabled(providerId)}
- label={<strong>Connection ID<span className='requiredStar'>*</span></strong>}
- labelInfo={<span style={{ display: 'block' }}>Choose Connection Instance ID</span>}
+ label={
+ <strong>
+ Connection ID<span className='requiredStar'>*</span>
+ </strong>
+ }
+ labelInfo={
+ <span style={{ display: 'block' }}>
+ Choose Connection Instance ID
+ </span>
+ }
inline={false}
labelFor='source-id'
className=''
@@ -85,7 +108,9 @@ const ProviderSettings = (props) => {
fill={true}
items={connections}
activeItem={selectedConnection}
- itemPredicate={(query, item) => item?.title?.toLowerCase().indexOf(query.toLowerCase()) >= 0}
+ itemPredicate={(query, item) =>
+ item?.title?.toLowerCase().indexOf(query.toLowerCase()) >= 0
+ }
itemRenderer={(item, { handleClick, modifiers }) => (
<MenuItem
active={modifiers.active}
@@ -103,8 +128,17 @@ const ProviderSettings = (props) => {
<Button
className='btn-connection-id-selector'
disabled={isRunning || !isEnabled(providerId)}
- style={{ justifyContent: 'space-between', minWidth: '206px', maxWidth: '290px', whiteSpace: 'nowrap' }}
- text={selectedConnection ? `${selectedConnection.title} [${selectedConnection.value}]` : 'Select Instance'}
+ style={{
+ justifyContent: 'space-between',
+ minWidth: '206px',
+ maxWidth: '290px',
+ whiteSpace: 'nowrap'
+ }}
+ text={
+ selectedConnection
+ ? `${selectedConnection.title} [${selectedConnection.value}]`
+ : 'Select Instance'
+ }
rightIcon='double-caret-vertical'
fill
/>
@@ -120,17 +154,21 @@ const ProviderSettings = (props) => {
<FormGroup
disabled={isRunning || !isEnabled(providerId)}
label={
- <strong style={{ marginTop: '10px', display: 'inline-block' }}>Board ID<span className='requiredStar'>*</span>
+ <strong style={{ marginTop: '10px', display: 'inline-block' }}>
+ Board ID<span className='requiredStar'>*</span>
<span
className='badge-count'
style={{
opacity: isEnabled(providerId) ? 0.5 : 0.1
}}
- >{boardId.length}
+ >
+ {boardId.length}
</span>
</strong>
- }
- labelInfo={<span style={{ display: 'block' }}>Enter JIRA Board ID.</span>}
+ }
+ labelInfo={
+ <span style={{ display: 'block' }}>Enter JIRA Board ID.</span>
+ }
inline={false}
labelFor='board-id'
className=''
@@ -154,8 +192,8 @@ const ProviderSettings = (props) => {
minimal
onClick={() => setBoardId([])}
/>
- }
- onKeyDown={e => e.key === 'Enter' && e.preventDefault()}
+ }
+ onKeyDown={(e) => e.key === 'Enter' && e.preventDefault()}
className='input-board-id tagInput'
/>
</div>
@@ -168,8 +206,14 @@ const ProviderSettings = (props) => {
<>
<FormGroup
disabled={isRunning || !isEnabled(providerId)}
- label={<strong>Owner<span className='requiredStar'>*</span></strong>}
- labelInfo={<span style={{ display: 'block' }}>Enter Project Owner</span>}
+ label={
+ <strong>
+ Owner<span className='requiredStar'>*</span>
+ </strong>
+ }
+ labelInfo={
+ <span style={{ display: 'block' }}>Enter Project Owner</span>
+ }
inline={false}
labelFor='owner'
className=''
@@ -188,8 +232,14 @@ const ProviderSettings = (props) => {
</FormGroup>
<FormGroup
disabled={isRunning || !isEnabled(providerId)}
- label={<strong>Repository Name<span className='requiredStar'>*</span></strong>}
- labelInfo={<span style={{ display: 'block' }}>Enter Git repository</span>}
+ label={
+ <strong>
+ Repository Name<span className='requiredStar'>*</span>
+ </strong>
+ }
+ labelInfo={
+ <span style={{ display: 'block' }}>Enter Git repository</span>
+ }
inline={false}
labelFor='repository-name'
className=''
@@ -216,8 +266,16 @@ const ProviderSettings = (props) => {
<>
<FormGroup
disabled={isRunning || !isEnabled(providerId)}
- label={<strong>Connection ID<span className='requiredStar'>*</span></strong>}
- labelInfo={<span style={{ display: 'block' }}>Choose Connection Instance ID</span>}
+ label={
+ <strong>
+ Connection ID<span className='requiredStar'>*</span>
+ </strong>
+ }
+ labelInfo={
+ <span style={{ display: 'block' }}>
+ Choose Connection Instance ID
+ </span>
+ }
inline={false}
labelFor='source-id'
className=''
@@ -235,7 +293,9 @@ const ProviderSettings = (props) => {
fill={true}
items={connections}
activeItem={selectedConnection}
- itemPredicate={(query, item) => item?.title?.toLowerCase().indexOf(query.toLowerCase()) >= 0}
+ itemPredicate={(query, item) =>
+ item?.title?.toLowerCase().indexOf(query.toLowerCase()) >= 0
+ }
itemRenderer={(item, { handleClick, modifiers }) => (
<MenuItem
active={modifiers.active}
@@ -253,8 +313,17 @@ const ProviderSettings = (props) => {
<Button
className='btn-connection-id-selector'
disabled={isRunning || !isEnabled(providerId)}
- style={{ justifyContent: 'space-between', minWidth: '206px', maxWidth: '290px', whiteSpace: 'nowrap' }}
- text={selectedConnection ? `${selectedConnection.title} [${selectedConnection.value}]` : 'Select Instance'}
+ style={{
+ justifyContent: 'space-between',
+ minWidth: '206px',
+ maxWidth: '290px',
+ whiteSpace: 'nowrap'
+ }}
+ text={
+ selectedConnection
+ ? `${selectedConnection.title} [${selectedConnection.value}]`
+ : 'Select Instance'
+ }
rightIcon='double-caret-vertical'
fill
/>
@@ -270,17 +339,21 @@ const ProviderSettings = (props) => {
<FormGroup
disabled={isRunning || !isEnabled(providerId)}
label={
- <strong>Project ID<span className='requiredStar'>*</span>
+ <strong>
+ Project ID<span className='requiredStar'>*</span>
<span
className='badge-count'
style={{
opacity: isEnabled(providerId) ? 0.5 : 0.1
}}
- >{projectId.length}
+ >
+ {projectId.length}
</span>
</strong>
- }
- labelInfo={<span style={{ display: 'block' }}>Enter GitLab Project ID.</span>}
+ }
+ labelInfo={
+ <span style={{ display: 'block' }}>Enter GitLab Project ID.</span>
+ }
inline={false}
labelFor='project-id'
className=''
@@ -303,8 +376,8 @@ const ProviderSettings = (props) => {
minimal
onClick={() => setProjectId([])}
/>
- }
- onKeyDown={e => e.key === 'Enter' && e.preventDefault()}
+ }
+ onKeyDown={(e) => e.key === 'Enter' && e.preventDefault()}
className='input-project-id tagInput'
/>
</div>
@@ -317,8 +390,14 @@ const ProviderSettings = (props) => {
<>
<FormGroup
disabled={isRunning || !isEnabled(providerId)}
- label={<strong>Git URL<span className='requiredStar'>*</span></strong>}
- labelInfo={<span style={{ display: 'block' }}>Enter Repository URL</span>}
+ label={
+ <strong>
+ Git URL<span className='requiredStar'>*</span>
+ </strong>
+ }
+ labelInfo={
+ <span style={{ display: 'block' }}>Enter Repository URL</span>
+ }
inline={false}
labelFor='git-url'
className=''
@@ -338,8 +417,14 @@ const ProviderSettings = (props) => {
</FormGroup>
<FormGroup
disabled={isRunning || !isEnabled(providerId)}
- label={<strong style={{ marginTop: '10px', display: 'inline-block' }}>Repository ID<span className='requiredStar'>*</span></strong>}
- labelInfo={<span style={{ display: 'block' }}>Choose Repo Column ID</span>}
+ label={
+ <strong style={{ marginTop: '10px', display: 'inline-block' }}>
+ Repository ID<span className='requiredStar'>*</span>
+ </strong>
+ }
+ labelInfo={
+ <span style={{ display: 'block' }}>Choose Repo Column ID</span>
+ }
inline={false}
labelFor='gitextractor-repo-id'
className=''
@@ -360,15 +445,23 @@ const ProviderSettings = (props) => {
/> */}
<ButtonGroup>
<Select
- disabled={isRunning || !isEnabled(providerId) || repositories.length === 0}
+ disabled={
+ isRunning ||
+ !isEnabled(providerId) ||
+ repositories.length === 0
+ }
className='selector-gitextractor-repo-id'
- popoverProps={{ popoverClassName: 'gitextractor-repo-id-popover' }}
+ popoverProps={{
+ popoverClassName: 'gitextractor-repo-id-popover'
+ }}
multiple
inline={true}
fill={true}
items={repositories}
activeItem={selectedGithubRepo}
- itemPredicate={(query, item) => item?.title?.toLowerCase().indexOf(query.toLowerCase()) >= 0}
+ itemPredicate={(query, item) =>
+ item?.title?.toLowerCase().indexOf(query.toLowerCase()) >= 0
+ }
itemRenderer={(item, { handleClick, modifiers }) => (
<MenuItem
active={modifiers.active}
@@ -386,11 +479,24 @@ const ProviderSettings = (props) => {
<Button
className='btn-gitextractor-repo-id-selector'
disabled={isRunning || !isEnabled(providerId)}
- style={{ justifyContent: 'space-between', minWidth: '220px', maxWidth: '420px', whiteSpace: 'nowrap' }}
- text={(
- selectedGithubRepo
- ? <>{selectedGithubRepo.title} <span style={{ fontSize: '10px', color: Colors.GRAY3 }}>[{selectedGithubRepo.value}]</span></>
- : 'Select Repository')}
+ style={{
+ justifyContent: 'space-between',
+ minWidth: '220px',
+ maxWidth: '420px',
+ whiteSpace: 'nowrap'
+ }}
+ text={
+ selectedGithubRepo ? (
+ <>
+ {selectedGithubRepo.title}{' '}
+ <span style={{ fontSize: '10px', color: Colors.GRAY3 }}>
+ [{selectedGithubRepo.value}]
+ </span>
+ </>
+ ) : (
+ 'Select Repository'
+ )
+ }
rightIcon='double-caret-vertical'
fill
/>
diff --git a/config-ui/src/components/pipelines/StageLane.jsx b/config-ui/src/components/pipelines/StageLane.jsx
index 1b1581e6..c9ce26ad 100644
--- a/config-ui/src/components/pipelines/StageLane.jsx
+++ b/config-ui/src/components/pipelines/StageLane.jsx
@@ -17,13 +17,7 @@
*/
import React, { useState, useEffect } from 'react'
import { CSSTransition } from 'react-transition-group'
-import {
- Icon,
- Colors,
- H4,
- Spinner,
- Intent,
-} from '@blueprintjs/core'
+import { Icon, Colors, H4, Spinner, Intent } from '@blueprintjs/core'
import dayjs from '@/utils/time'
import StageTask from '@/components/pipelines/StageTask'
import StageLaneStatus from '@/components/pipelines/StageLaneStatus'
@@ -35,19 +29,22 @@ const StageLane = (props) => {
const [readyStageModules, setReadyStageModules] = useState([])
const isStageActive = (stageId) => {
- return stages[stageId].some(s => s.status === 'TASK_RUNNING')
+ return stages[stageId].some((s) => s.status === 'TASK_RUNNING')
}
const isStageCompleted = (stageId) => {
- return stages[stageId].every(s => s.status === 'TASK_COMPLETED')
+ return stages[stageId].every((s) => s.status === 'TASK_COMPLETED')
}
const isStageFailed = (stageId) => {
- return !isStageActive(stageId) && stages[stageId].some(s => s.status === 'TASK_FAILED')
+ return (
+ !isStageActive(stageId) &&
+ stages[stageId].some((s) => s.status === 'TASK_FAILED')
+ )
}
const isStagePending = (stageId) => {
- return stages[stageId].every(s => s.status === 'TASK_CREATED')
+ return stages[stageId].every((s) => s.status === 'TASK_CREATED')
}
const generateStageCssClasses = (stageId) => {
@@ -68,39 +65,63 @@ const StageLane = (props) => {
}
const calculateStageLaneProgress = (stageTasks) => {
- const completed = stageTasks.filter(s => s.status === 'TASK_COMPLETED')
- const remaining = stageTasks.filter(s => s.status !== 'TASK_COMPLETED')
+ const completed = stageTasks.filter((s) => s.status === 'TASK_COMPLETED')
+ const remaining = stageTasks.filter((s) => s.status !== 'TASK_COMPLETED')
const minProgressValue = 0.05
let progress = completed.length / (remaining.length + completed.length)
- console.log('>>> STAGE LANE PROGRESS = ', completed, remaining, completed.length / remaining.length)
+ console.log(
+ '>>> STAGE LANE PROGRESS = ',
+ completed,
+ remaining,
+ completed.length / remaining.length
+ )
if (stageTasks.length === 1) {
progress = Math.max(minProgressValue, stageTasks[0].progress)
}
if (completed.length === 0 && remaining.length === stageTasks.length) {
- progress = stageTasks.reduce((pV, cV) => pV + cV.progress, minProgressValue)
+ progress = stageTasks.reduce(
+ (pV, cV) => pV + cV.progress,
+ minProgressValue
+ )
}
return progress
}
- const calculateStageLaneDuration = (stageTasks, unit = 'minute', parallelMode = true) => {
+ const calculateStageLaneDuration = (
+ stageTasks,
+ unit = 'minute',
+ parallelMode = true
+ ) => {
let duration = 0
const now = dayjs()
- const diffDuration = (pV, cV) => pV + dayjs(cV.status === 'TASK_RUNNING'
- ? now
- : (cV.status === 'TASK_FAILED' ? cV.finishedAt == null : cV.updatedAt || cV.finishedAt)).diff(dayjs(cV.beganAt), unit)
- const filterParallel = (pV, cV) => !pV.some(t => t.createdAt.split('.')[0] === cV.createdAt.split('.')[0]) ? [...pV, cV] : [...pV]
+ const diffDuration = (pV, cV) =>
+ pV +
+ dayjs(
+ cV.status === 'TASK_RUNNING'
+ ? now
+ : cV.status === 'TASK_FAILED'
+ ? cV.finishedAt == null
+ : cV.updatedAt || cV.finishedAt
+ ).diff(dayjs(cV.beganAt), unit)
+ const filterParallel = (pV, cV) =>
+ !pV.some((t) => t.createdAt.split('.')[0] === cV.createdAt.split('.')[0])
+ ? [...pV, cV]
+ : [...pV]
const parallelTasks = stageTasks.reduce(filterParallel, [])
- duration = parallelMode && !isStageFailed(sK) ? parallelTasks.reduce(diffDuration, 0) : stageTasks.reduce(diffDuration, 0)
+ duration =
+ parallelMode && !isStageFailed(sK)
+ ? parallelTasks.reduce(diffDuration, 0)
+ : stageTasks.reduce(diffDuration, 0)
// console.log('>> CALCULATED DURATION =', stageTasks, duration)
return duration
}
const getRunningTaskCount = (stageTasks) => {
- return stageTasks.filter(s => s.status === 'TASK_RUNNING').length
+ return stageTasks.filter((s) => s.status === 'TASK_RUNNING').length
}
const getCompletedTaskCount = (stageTasks) => {
- return stageTasks.filter(s => s.status === 'TASK_COMPLETED').length
+ return stageTasks.filter((s) => s.status === 'TASK_COMPLETED').length
}
const getTotalTasksCount = (stageTasks) => {
@@ -116,20 +137,20 @@ const StageLane = (props) => {
if (activeStage.length > 0) {
activeStage.forEach((s, sIdx) => {
setTimeout(() => {
- setReadyStageModules(rS => [...rS, sIdx])
+ setReadyStageModules((rS) => [...rS, sIdx])
}, sIdx * 150)
})
}
- return () => {
-
- }
+ return () => {}
}, [activeStage])
return (
<>
<div
// key={`stage-lane-key-${sIdx}`}
- className={`stage-lane ${generateStageCssClasses(sK)} ${isStageActive(sK) ? '' : ''}`}
+ className={`stage-lane ${generateStageCssClasses(sK)} ${
+ isStageActive(sK) ? '' : ''
+ }`}
style={{
position: 'relative',
display: 'flex',
@@ -142,7 +163,14 @@ const StageLane = (props) => {
}}
>
{isStageActive(sK) && (
- <span style={{ position: 'absolute', display: 'inline-block', right: '8px', top: '8px' }}>
+ <span
+ style={{
+ position: 'absolute',
+ display: 'inline-block',
+ right: '8px',
+ top: '8px'
+ }}
+ >
<Spinner size={14} intent={Intent.PRIMARY} />
</span>
)}
@@ -151,7 +179,12 @@ const StageLane = (props) => {
icon='error'
color={Colors.RED5}
size={14}
- style={{ position: 'absolute', display: 'inline-block', right: '8px', top: '8px' }}
+ style={{
+ position: 'absolute',
+ display: 'inline-block',
+ right: '8px',
+ top: '8px'
+ }}
/>
)}
{isStageCompleted(sK) && (
@@ -159,29 +192,30 @@ const StageLane = (props) => {
icon='tick'
color={Colors.GREEN5}
size={14}
- style={{ position: 'absolute', display: 'inline-block', right: '8px', top: '8px' }}
+ style={{
+ position: 'absolute',
+ display: 'inline-block',
+ right: '8px',
+ top: '8px'
+ }}
/>
)}
- <H4
- className='stage-title'
- style={{
-
- }}
- >
+ <H4 className='stage-title' style={{}}>
Stage {sIdx + 1}
</H4>
{/* {sIdx} */}
- {showStageTasks && stages[sK].map((t, tIdx) => (
- <CSSTransition
- key={`fx-key-stage-task-${tIdx}`}
- in={readyStageModules.includes(tIdx)}
- timeout={350}
- classNames='pipeline-task-fx'
- // unmountOnExit
- >
- <StageTask task={t} key={`stage-task-key-${tIdx}`} />
- </CSSTransition>
- ))}
+ {showStageTasks &&
+ stages[sK].map((t, tIdx) => (
+ <CSSTransition
+ key={`fx-key-stage-task-${tIdx}`}
+ in={readyStageModules.includes(tIdx)}
+ timeout={350}
+ classNames='pipeline-task-fx'
+ // unmountOnExit
+ >
+ <StageTask task={t} key={`stage-task-key-${tIdx}`} />
+ </CSSTransition>
+ ))}
{/* <StageLaneStatus
sK={sK}
stage={activeStage}
diff --git a/config-ui/src/components/pipelines/StageLaneStatus.jsx b/config-ui/src/components/pipelines/StageLaneStatus.jsx
index b145d30e..1e9c4d20 100644
--- a/config-ui/src/components/pipelines/StageLaneStatus.jsx
+++ b/config-ui/src/components/pipelines/StageLaneStatus.jsx
@@ -36,7 +36,8 @@ const StageLaneStatus = (props) => {
return (
<>
<div
- className='stage-footer' style={{
+ className='stage-footer'
+ style={{
padding: '5px 10px',
marginBottom: '4px',
alignSelf: 'flex-end',
@@ -56,13 +57,29 @@ const StageLaneStatus = (props) => {
color: isStageCompleted(sK) ? Colors.GREEN5 : Colors.GRAY5
}}
>
- {isStageActive(sK) && <span style={{ color: Colors.BLACK }}> ACTIVE</span>}
- {isStageCompleted(sK) && <span style={{ color: Colors.GREEN5 }}>COMPLETED</span>}
- {isStageFailed(sK) && <span style={{ color: Colors.RED5 }}>FAILED</span>}
+ {isStageActive(sK) && (
+ <span style={{ color: Colors.BLACK }}> ACTIVE</span>
+ )}
+ {isStageCompleted(sK) && (
+ <span style={{ color: Colors.GREEN5 }}>COMPLETED</span>
+ )}
+ {isStageFailed(sK) && (
+ <span style={{ color: Colors.RED5 }}>FAILED</span>
+ )}
{isStagePending(sK) && <>WAITING</>}
- <span style={{ fontWeight: 500, color: isStageActive(sK) ? '#000' : 'inherit', opacity: 0.6 }}>
- {' '}·{' '}
- {isStageCompleted(sK) ? getCompletedTaskCount(stage) : getRunningTaskCount(stage)}/{getTotalTasksCount(stage)}
+ <span
+ style={{
+ fontWeight: 500,
+ color: isStageActive(sK) ? '#000' : 'inherit',
+ opacity: 0.6
+ }}
+ >
+ {' '}
+ ·{' '}
+ {isStageCompleted(sK)
+ ? getCompletedTaskCount(stage)
+ : getRunningTaskCount(stage)}
+ /{getTotalTasksCount(stage)}
</span>
</div>
{/* <div className='stage-caption'>
diff --git a/config-ui/src/components/pipelines/StagePanel.jsx b/config-ui/src/components/pipelines/StagePanel.jsx
index ee29b356..3a634ee4 100644
--- a/config-ui/src/components/pipelines/StagePanel.jsx
+++ b/config-ui/src/components/pipelines/StagePanel.jsx
@@ -19,7 +19,8 @@ import React from 'react'
// import { CSSTransition } from 'react-transition-group'
import {
Card,
- Button, Icon,
+ Button,
+ Icon,
ButtonGroup,
Elevation,
Colors,
@@ -32,7 +33,9 @@ const StagePanel = (props) => {
const {
activePipeline,
// pipelineReady = false,
- stages, activeStageId = 1, isLoading = false
+ stages,
+ activeStageId = 1,
+ isLoading = false
} = props
const getActiveStageDisplayColor = (status) => {
@@ -41,7 +44,7 @@ const StagePanel = (props) => {
case 'TASK_COMPLETED':
color = Colors.GREEN4
break
- case 'TASK_FAILED' :
+ case 'TASK_FAILED':
color = Colors.RED4
break
case 'TASK_CREATED':
@@ -73,54 +76,53 @@ const StagePanel = (props) => {
justifySelf: 'flex-start',
marginBottom: '8px',
padding: 0,
- backgroundColor: activePipeline.status === 'TASK_COMPLETED' ? 'rgba(245, 255, 250, 0.99)' : 'inherit',
+ backgroundColor:
+ activePipeline.status === 'TASK_COMPLETED'
+ ? 'rgba(245, 255, 250, 0.99)'
+ : 'inherit',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis'
}}
>
-
<ButtonGroup style={{ backgroundColor: 'transparent', zIndex: '-1' }}>
- <Button minimal active style={{ width: '32px', backgroundColor: '#eeeeee', padding: 0 }}>
- <div style={{
- margin: 0,
- display: 'flex',
- position: 'relative',
- justifyContent: 'center',
- alignItems: 'center',
- alignContent: 'center'
- }}
+ <Button
+ minimal
+ active
+ style={{ width: '32px', backgroundColor: '#eeeeee', padding: 0 }}
+ >
+ <div
+ style={{
+ margin: 0,
+ display: 'flex',
+ position: 'relative',
+ justifyContent: 'center',
+ alignItems: 'center',
+ alignContent: 'center'
+ }}
>
{isLoading && (
- <span style={{
- position: 'absolute',
- width: '24px',
- height: '24px',
- marginLeft: '4px',
- display: 'flex',
- justifyContent: 'center'
- }}
+ <span
+ style={{
+ position: 'absolute',
+ width: '24px',
+ height: '24px',
+ marginLeft: '4px',
+ display: 'flex',
+ justifyContent: 'center'
+ }}
>
<Spinner size={20} intent={Intent.PRIMARY} />
- </span>)}
+ </span>
+ )}
{(() => {
let statusIcon = null
switch (activePipeline.status) {
case 'TASK_COMPLETED':
- statusIcon = (
- <Icon
- icon='tick-circle'
- size={24}
- />
- )
+ statusIcon = <Icon icon='tick-circle' size={24} />
break
case 'TASK_FAILED':
- statusIcon = (
- <Icon
- icon='error'
- size={24}
- />
- )
+ statusIcon = <Icon icon='error' size={24} />
break
case 'TASK_RUNNING':
default:
@@ -133,7 +135,20 @@ const StagePanel = (props) => {
)
break
}
- return !isLoading && (<span style={{ position: 'absolute', marginLeft: '3px', width: '24px', height: '24px' }}>{statusIcon}</span>)
+ return (
+ !isLoading && (
+ <span
+ style={{
+ position: 'absolute',
+ marginLeft: '3px',
+ width: '24px',
+ height: '24px'
+ }}
+ >
+ {statusIcon}
+ </span>
+ )
+ )
})()}
</div>
</Button>
@@ -142,7 +157,7 @@ const StagePanel = (props) => {
style={{
position: 'relative',
backgroundColor: '#eeeeee',
- paddingRight: '20px',
+ paddingRight: '20px'
}}
>
<h3
@@ -189,7 +204,7 @@ const StagePanel = (props) => {
style={{
position: 'relative',
backgroundColor: '#eeeeee',
- paddingRight: '50px',
+ paddingRight: '50px'
}}
>
<h3
@@ -214,7 +229,6 @@ const StagePanel = (props) => {
}}
/>
</>
-
)}
</ButtonGroup>
<div style={{ display: 'flex', marginLeft: 'auto', padding: '0 10px' }}>
@@ -229,8 +243,21 @@ const StagePanel = (props) => {
letterSpacing: '2px',
justifySelf: 'flex-end'
}}
- >Finished Tasks · <span style={{ color: Colors.GREEN5 }}>{activePipeline.finishedTasks}</span>
- <em style={{ color: '#dddddd', padding: '0 4px', textTransform: 'lowercase' }}>/</em>{activePipeline.totalTasks}
+ >
+ Finished Tasks ·{' '}
+ <span style={{ color: Colors.GREEN5 }}>
+ {activePipeline.finishedTasks}
+ </span>
+ <em
+ style={{
+ color: '#dddddd',
+ padding: '0 4px',
+ textTransform: 'lowercase'
+ }}
+ >
+ /
+ </em>
+ {activePipeline.totalTasks}
</h3>
{/* <span style={{fontSize: '16px', fontWeight: 700, marginLeft: 'auto', lineHeight: '33px'}} /> */}
{/* {Number((activePipeline.finishedTasks / activePipeline.totalTasks) * 100).toFixed(1)}% */}
diff --git a/config-ui/src/components/pipelines/StageTask.jsx b/config-ui/src/components/pipelines/StageTask.jsx
index 857b9f08..21d3a010 100644
--- a/config-ui/src/components/pipelines/StageTask.jsx
+++ b/config-ui/src/components/pipelines/StageTask.jsx
@@ -16,7 +16,7 @@
*
*/
import React, { useState } from 'react'
-import { Card, Elevation, } from '@blueprintjs/core'
+import { Card, Elevation } from '@blueprintjs/core'
import StageTaskName from '@/components/pipelines/StageTaskName'
import StageTaskIndicator from '@/components/pipelines/StageTaskIndicator'
import StageTaskCaption from '@/components/pipelines/StageTaskCaption'
@@ -24,7 +24,7 @@ import StageTaskCaption from '@/components/pipelines/StageTaskCaption'
const StageTask = (props) => {
const {
// stages = [],
- task,
+ task
// sK,
// sIdx,
} = props
@@ -32,7 +32,9 @@ const StageTask = (props) => {
const [taskModuleOpened, setTaskModuleOpened] = useState(null)
const generateStageTaskCssClasses = () => {
- return `pipeline-task-module task-${task.status.split('_')[1].toLowerCase()} ${task.ID === taskModuleOpened?.ID ? 'active' : ''}`
+ return `pipeline-task-module task-${task.status
+ .split('_')[1]
+ .toLowerCase()} ${task.ID === taskModuleOpened?.ID ? 'active' : ''}`
}
const determineCardElevation = (status, isElevated = false) => {
@@ -52,12 +54,13 @@ const StageTask = (props) => {
return (
<>
<Card
- elevation={determineCardElevation(task.status, taskModuleOpened !== null)}
+ elevation={determineCardElevation(
+ task.status,
+ taskModuleOpened !== null
+ )}
className={generateStageTaskCssClasses()}
onClick={() => setTaskModuleOpened(task)}
- style={{
-
- }}
+ style={{}}
>
<StageTaskIndicator task={task} />
<div
@@ -67,7 +70,11 @@ const StageTask = (props) => {
}}
>
<div style={{ padding: '4px 2px 4px 0', width: '100%' }}>
- <StageTaskName task={task} showDetails={taskModuleOpened} onClose={() => setTaskModuleOpened(null)} />
+ <StageTaskName
+ task={task}
+ showDetails={taskModuleOpened}
+ onClose={() => setTaskModuleOpened(null)}
+ />
<StageTaskCaption task={task} options={task.options} />
</div>
</div>
diff --git a/config-ui/src/components/pipelines/StageTaskCaption.jsx b/config-ui/src/components/pipelines/StageTaskCaption.jsx
index 436d331d..c1b5fae9 100644
--- a/config-ui/src/components/pipelines/StageTaskCaption.jsx
+++ b/config-ui/src/components/pipelines/StageTaskCaption.jsx
@@ -41,12 +41,29 @@ const StageTaskCaption = (props) => {
{task.status === 'TASK_RUNNING'
? dayjs(task.beganAt).toNow(true)
: dayjs(task.beganAt).from(task.finishedAt || task.updatedAt, true)}
- </span>)}
- {task.status === 'TASK_RUNNING' && <span>Subtask {task?.progressDetail?.finishedSubTasks} / {task?.progressDetail?.totalSubTasks}</span>}
- {task.status === 'TASK_COMPLETED' && <span>{task?.progressDetail?.finishedSubTasks || 'All'} Subtasks completed</span>}
- {task.status === 'TASK_COMPLETED' && <span>{task?.progressDetail?.finishedRecords}</span>}
+ </span>
+ )}
+ {task.status === 'TASK_RUNNING' && (
+ <span>
+ Subtask {task?.progressDetail?.finishedSubTasks} /{' '}
+ {task?.progressDetail?.totalSubTasks}
+ </span>
+ )}
+ {task.status === 'TASK_COMPLETED' && (
+ <span>
+ {task?.progressDetail?.finishedSubTasks || 'All'} Subtasks completed
+ </span>
+ )}
+ {task.status === 'TASK_COMPLETED' && (
+ <span>{task?.progressDetail?.finishedRecords}</span>
+ )}
{task.status === 'TASK_CREATED' && <span>Records Pending</span>}
- {task.status === 'TASK_FAILED' && <span style={{ color: Colors.RED3 }}>Task failed — <strong>{task?.failedSubTask || task?.message}</strong></span>}
+ {task.status === 'TASK_FAILED' && (
+ <span style={{ color: Colors.RED3 }}>
+ Task failed —{' '}
+ <strong>{task?.failedSubTask || task?.message}</strong>
+ </span>
+ )}
</span>
)
}
diff --git a/config-ui/src/components/pipelines/StageTaskIndicator.jsx b/config-ui/src/components/pipelines/StageTaskIndicator.jsx
index 3f27e811..a9945f2b 100644
--- a/config-ui/src/components/pipelines/StageTaskIndicator.jsx
+++ b/config-ui/src/components/pipelines/StageTaskIndicator.jsx
@@ -22,7 +22,7 @@ import {
Colors,
Tooltip,
Position,
- Intent,
+ Intent
} from '@blueprintjs/core'
import { ProviderIcons } from '@/data/Providers'
diff --git a/config-ui/src/components/pipelines/StageTaskName.jsx b/config-ui/src/components/pipelines/StageTaskName.jsx
index ee722e2e..c2b7201c 100644
--- a/config-ui/src/components/pipelines/StageTaskName.jsx
+++ b/config-ui/src/components/pipelines/StageTaskName.jsx
@@ -16,11 +16,7 @@
*
*/
import React, { useEffect, useRef } from 'react'
-import {
- Providers,
- ProviderLabels,
- ProviderIcons
-} from '@/data/Providers'
+import { Providers, ProviderLabels, ProviderIcons } from '@/data/Providers'
import {
Icon,
Colors,
@@ -34,11 +30,7 @@ import {
import dayjs from '@/utils/time'
const StageTaskName = (props) => {
- const {
- task,
- showDetails = null,
- onClose = () => {}
- } = props
+ const { task, showDetails = null, onClose = () => {} } = props
const popoverTriggerRef = useRef()
@@ -61,96 +53,171 @@ const StageTaskName = (props) => {
usePortal={true}
// disabled
>
- <span className='task-plugin-text' ref={popoverTriggerRef} style={{ display: 'block', margin: '5px 0 5px 0' }}>
- <strong>Task ID {task.id}</strong> {' '} {ProviderLabels[task?.plugin?.toUpperCase()]}{' '}
- {task.plugin === Providers.GITHUB && task.plugin !== Providers.JENKINS && (<>@{task.options.owner}/{task.options.repo}</>)}
- {task.plugin === Providers.JIRA && (<>Board ID {task.options.boardId}</>)}
- {task.plugin === Providers.GITLAB && (<>Project ID {task.options.projectId}</>)}
- {task.plugin === Providers.GITEXTRACTOR && (<>{task.options.repoId}</>)}
+ <span
+ className='task-plugin-text'
+ ref={popoverTriggerRef}
+ style={{ display: 'block', margin: '5px 0 5px 0' }}
+ >
+ <strong>Task ID {task.id}</strong>{' '}
+ {ProviderLabels[task?.plugin?.toUpperCase()]}{' '}
+ {task.plugin === Providers.GITHUB &&
+ task.plugin !== Providers.JENKINS && (
+ <>
+ @{task.options.owner}/{task.options.repo}
+ </>
+ )}
+ {task.plugin === Providers.JIRA && (
+ <>Board ID {task.options.boardId}</>
+ )}
+ {task.plugin === Providers.GITLAB && (
+ <>Project ID {task.options.projectId}</>
+ )}
+ {task.plugin === Providers.GITEXTRACTOR && <>{task.options.repoId}</>}
</span>
<>
- <div style={{ textShadow: 'none', fontSize: '12px', padding: '12px', maxWidth: '400px' }}>
+ <div
+ style={{
+ textShadow: 'none',
+ fontSize: '12px',
+ padding: '12px',
+ maxWidth: '400px'
+ }}
+ >
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
- <div style={{
- marginBottom: '10px',
- color: Colors.GRAY2,
- fontWeight: 700,
- fontSize: '14px',
- maxWidth: '60%'
- }}
- >
- <H3 style={{
- margin: 0,
- fontSize: '18px',
- color: Colors.BLACK,
- textOverflow: 'ellipsis',
- overflow: 'hidden',
- whiteSpace: 'nowrap',
+ <div
+ style={{
+ marginBottom: '10px',
+ color: Colors.GRAY2,
+ fontWeight: 700,
+ fontSize: '14px',
+ maxWidth: '60%'
}}
+ >
+ <H3
+ style={{
+ margin: 0,
+ fontSize: '18px',
+ color: Colors.BLACK,
+ textOverflow: 'ellipsis',
+ overflow: 'hidden',
+ whiteSpace: 'nowrap'
+ }}
>
- {task.plugin === Providers.REFDIFF && (<>{ProviderLabels.REFDIFF}</>)}
- {task.plugin === Providers.GITEXTRACTOR && (<>{ProviderLabels.GITEXTRACTOR}</>)}
- {task.plugin === Providers.FEISHU && (<>{ProviderLabels.FEISHU}</>)}
- {task.plugin === Providers.JENKINS && (<>{ProviderLabels.JENKINS}</>)}
- {task.plugin === Providers.TAPD && (<>{ProviderLabels.TAPD}</>)}
- {task.plugin === Providers.JIRA && (<>Board ID {task.options.boardId}</>)}
- {task.plugin === Providers.GITLAB && (<>Project ID {task.options.projectId}</>)}
- {task.plugin === Providers.GITHUB && task.plugin !== Providers.JENKINS && (<>@{task.options.owner}/{task.options.repo}</>)}
+ {task.plugin === Providers.REFDIFF && (
+ <>{ProviderLabels.REFDIFF}</>
+ )}
+ {task.plugin === Providers.GITEXTRACTOR && (
+ <>{ProviderLabels.GITEXTRACTOR}</>
+ )}
+ {task.plugin === Providers.FEISHU && (
+ <>{ProviderLabels.FEISHU}</>
+ )}
+ {task.plugin === Providers.JENKINS && (
+ <>{ProviderLabels.JENKINS}</>
+ )}
+ {task.plugin === Providers.TAPD && <>{ProviderLabels.TAPD}</>}
+ {task.plugin === Providers.JIRA && (
+ <>Board ID {task.options.boardId}</>
+ )}
+ {task.plugin === Providers.GITLAB && (
+ <>Project ID {task.options.projectId}</>
+ )}
+ {task.plugin === Providers.GITHUB &&
+ task.plugin !== Providers.JENKINS && (
+ <>
+ @{task.options.owner}/{task.options.repo}
+ </>
+ )}
</H3>
- {![Providers.JENKINS, Providers.REFDIFF, Providers.GITEXTRACTOR].includes(task.plugin) && (
- <>{ProviderLabels[task.plugin?.toUpperCase()] || 'System Task'}<br /></>
+ {![
+ Providers.JENKINS,
+ Providers.REFDIFF,
+ Providers.GITEXTRACTOR
+ ].includes(task.plugin) && (
+ <>
+ {ProviderLabels[task.plugin?.toUpperCase()] ||
+ 'System Task'}
+ <br />
+ </>
)}
</div>
- <div style={{
- fontWeight: 800,
- displays: 'flex',
- alignItems: 'center',
- justifyContent: 'flex-start',
- alignSelf: 'flex-start',
- padding: '0 0 0 40px',
- fontSize: '18px',
- marginLeft: 'auto'
- }}
+ <div
+ style={{
+ fontWeight: 800,
+ displays: 'flex',
+ alignItems: 'center',
+ justifyContent: 'flex-start',
+ alignSelf: 'flex-start',
+ padding: '0 0 0 40px',
+ fontSize: '18px',
+ marginLeft: 'auto'
+ }}
>
- {Number(task.status === 'TASK_COMPLETED' ? 100 : (task.progress / 1) * 100).toFixed(0)}%
+ {Number(
+ task.status === 'TASK_COMPLETED'
+ ? 100
+ : (task.progress / 1) * 100
+ ).toFixed(0)}
+ %
</div>
<div style={{ padding: '0 0 10px 20px' }}>
- {ProviderIcons[task.plugin?.toLowerCase()] ? ProviderIcons[task.plugin?.toLowerCase()](24, 24) : null}
+ {ProviderIcons[task.plugin?.toLowerCase()]
+ ? ProviderIcons[task.plugin?.toLowerCase()](24, 24)
+ : null}
</div>
</div>
{task.status === 'TASK_CREATED' && (
<div style={{ fontSize: '10px' }}>
<p style={{ fontSize: '12px' }}>
- Task #{task.id} is <strong>pending</strong> and has not yet started.
+ Task #{task.id} is <strong>pending</strong> and has not yet
+ started.
</p>
</div>
)}
{task.status !== 'TASK_CREATED' && (
<div style={{ fontSize: '10px' }}>
- <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
+ <div
+ style={{
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'space-between'
+ }}
+ >
<div>
- <label style={{ color: Colors.GRAY2 }}>ID</label><br />
+ <label style={{ color: Colors.GRAY2 }}>ID</label>
+ <br />
<span>{task.id}</span>
</div>
<div style={{ marginLeft: '20px' }}>
- <label style={{ color: Colors.GRAY2 }}>Created</label><br />
+ <label style={{ color: Colors.GRAY2 }}>Created</label>
+ <br />
<span>{dayjs(task.createdAt).format('L LT')}</span>
</div>
{task.finishedAt && (
<div style={{ marginLeft: '20px' }}>
- <label style={{ color: Colors.GRAY2 }}>Finished</label><br />
+ <label style={{ color: Colors.GRAY2 }}>Finished</label>
+ <br />
<span>{dayjs(task.finishedAt).format('L LT')}</span>
</div>
)}
</div>
<div style={{ marginTop: '6px' }}>
- <label style={{ color: Colors.GRAY2 }}>Status</label><br />
+ <label style={{ color: Colors.GRAY2 }}>Status</label>
+ <br />
<strong>{task.status}</strong>{' '}
</div>
{task.message !== '' && (
<div style={{ marginTop: '6px' }}>
- <label style={{ color: Colors.DARK_GRAY1 }}>Message</label><br />
- <span style={{ color: task.status === 'TASK_FAILED' ? Colors.RED3 : Colors.BLACK }}>
+ <label style={{ color: Colors.DARK_GRAY1 }}>Message</label>
+ <br />
+ <span
+ style={{
+ color:
+ task.status === 'TASK_FAILED'
+ ? Colors.RED3
+ : Colors.BLACK
+ }}
+ >
{task.status === 'TASK_FAILED' && (
<Icon
icon='warning-sign'
@@ -164,13 +231,29 @@ const StageTaskName = (props) => {
</div>
)}
<div style={{ marginTop: '6px' }}>
- <label style={{ color: Colors.GRAY2 }}>Updated</label><br />
- <span>{task.updatedAt ? dayjs(task.updatedAt).format('L LT') : '-'}</span>
+ <label style={{ color: Colors.GRAY2 }}>Updated</label>
+ <br />
+ <span>
+ {task.updatedAt
+ ? dayjs(task.updatedAt).format('L LT')
+ : '-'}
+ </span>
</div>
</div>
)}
- <div style={{ marginTop: '10px', display: 'flex', justifyContent: 'flex-end' }}>
- <Button className={Classes.POPOVER_DISMISS} text='OK' intent='primary' small />
+ <div
+ style={{
+ marginTop: '10px',
+ display: 'flex',
+ justifyContent: 'flex-end'
+ }}
+ >
+ <Button
+ className={Classes.POPOVER_DISMISS}
+ text='OK'
+ intent='primary'
+ small
+ />
</div>
</div>
</>
diff --git a/config-ui/src/components/pipelines/TaskActivity.jsx b/config-ui/src/components/pipelines/TaskActivity.jsx
index ecf8194b..57d2438c 100644
--- a/config-ui/src/components/pipelines/TaskActivity.jsx
+++ b/config-ui/src/components/pipelines/TaskActivity.jsx
@@ -48,14 +48,16 @@ const TaskActivity = (props) => {
})
const getActiveTask = (tasks = []) => {
- return tasks.find(t => t.status === 'TASK_RUNNING')
+ return tasks.find((t) => t.status === 'TASK_RUNNING')
}
useEffect(() => {
- setProgressDetail(initialDetail => getActiveTask(activePipeline.plan)
- ? getActiveTask(activePipeline.plan).progressDetail
- : initialDetail)
- setActiveTask(activePipeline.plan.find(t => t.status === 'TASK_RUNNING'))
+ setProgressDetail((initialDetail) =>
+ getActiveTask(activePipeline.plan)
+ ? getActiveTask(activePipeline.plan).progressDetail
+ : initialDetail
+ )
+ setActiveTask(activePipeline.plan.find((t) => t.status === 'TASK_RUNNING'))
}, [activePipeline])
useEffect(() => {
@@ -64,9 +66,9 @@ const TaskActivity = (props) => {
return (
<>
-
<div
- className='pipeline-task-activity' style={{
+ className='pipeline-task-activity'
+ style={{
// padding: '20px',
padding: Object.keys(stages).length === 1 ? '0' : 0,
overflow: 'hidden',
@@ -74,274 +76,472 @@ const TaskActivity = (props) => {
}}
>
{Object.keys(stages).length > 1 && (
- <div
- className='pipeline-multistage-activity'
- >
+ <div className='pipeline-multistage-activity'>
{Object.keys(stages).map((sK, sIdx) => (
- <StageLane key={`stage-lane-key-${sIdx}`} stages={stages} sK={sK} sIdx={sIdx} />
+ <StageLane
+ key={`stage-lane-key-${sIdx}`}
+ stages={stages}
+ sK={sK}
+ sIdx={sIdx}
+ />
))}
</div>
)}
- {Object.keys(stages).length === 1 && activePipeline?.ID && activePipeline.plan && activePipeline.plan.map((t, tIdx) => (
- <div className='pipeline-task-block' key={`pipeline-task-key-${tIdx}`}>
+ {Object.keys(stages).length === 1 &&
+ activePipeline?.ID &&
+ activePipeline.plan &&
+ activePipeline.plan.map((t, tIdx) => (
<div
- className='pipeline-task-row'
- // key={`pipeline-task-key-${tIdx}`}
- style={{
- display: 'flex',
- padding: '6px 10px',
- justifyContent: 'space-between',
- fontSize: '12px',
- opacity: t.status === 'TASK_CREATED' ? 0.7 : 1
- }}
+ className='pipeline-task-block'
+ key={`pipeline-task-key-${tIdx}`}
>
- <div style={{ display: 'flex', justifyContent: 'center', paddingRight: '8px', width: '32px', minWidth: '32px' }}>
- {t.status === 'TASK_COMPLETED' && (
- <Tooltip content={`Task Complete [STAGE ${t.pipelineRow}]`} position={Position.TOP} intent={Intent.SUCCESS}>
- <Icon icon='small-tick' size={18} color={Colors.GREEN5} style={{ marginLeft: '0' }} />
- </Tooltip>
- )}
- {t.status === 'TASK_FAILED' && (
- <Tooltip content={`Task Failed [STAGE ${t.pipelineRow}]`} position={Position.TOP} intent={Intent.PRIMARY}>
- <Icon icon='warning-sign' size={14} color={Colors.RED5} style={{ marginLeft: '0', marginBottom: '3px' }} />
- </Tooltip>
- )}
- {t.status === 'TASK_RUNNING' && (
- <Tooltip content={`Task Running [STAGE ${t.pipelineRow}]`} position={Position.TOP}>
- <Spinner
- className='task-spinner'
- size={14}
- intent={t.status === 'TASK_COMPLETED' ? 'success' : 'warning'}
- value={t.status === 'TASK_COMPLETED' ? 1 : t.progress}
- style={{ marginBottom: '-3px' }}
- />
- </Tooltip>
- )}
- {t.status === 'TASK_CREATED' && (
- <Tooltip content={`Task Created (Pending) [STAGE ${t.pipelineRow}]`} position={Position.TOP}>
- <Icon icon='pause' size={14} color={Colors.GRAY3} style={{ marginLeft: '0', marginBottom: '3px' }} />
- </Tooltip>
- )}
- </div>
<div
- className='pipeline-task-cell-name'
- style={{ padding: '0 8px', minWidth: '130px', display: 'flex', justifyContent: 'space-between' }}
+ className='pipeline-task-row'
+ // key={`pipeline-task-key-${tIdx}`}
+ style={{
+ display: 'flex',
+ padding: '6px 10px',
+ justifyContent: 'space-between',
+ fontSize: '12px',
+ opacity: t.status === 'TASK_CREATED' ? 0.7 : 1
+ }}
>
<div
- className='task-plugin-name'
- style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+ style={{
+ display: 'flex',
+ justifyContent: 'center',
+ paddingRight: '8px',
+ width: '32px',
+ minWidth: '32px'
+ }}
>
- {t.status === 'TASK_RUNNING'
- ? (
+ {t.status === 'TASK_COMPLETED' && (
+ <Tooltip
+ content={`Task Complete [STAGE ${t.pipelineRow}]`}
+ position={Position.TOP}
+ intent={Intent.SUCCESS}
+ >
+ <Icon
+ icon='small-tick'
+ size={18}
+ color={Colors.GREEN5}
+ style={{ marginLeft: '0' }}
+ />
+ </Tooltip>
+ )}
+ {t.status === 'TASK_FAILED' && (
+ <Tooltip
+ content={`Task Failed [STAGE ${t.pipelineRow}]`}
+ position={Position.TOP}
+ intent={Intent.PRIMARY}
+ >
+ <Icon
+ icon='warning-sign'
+ size={14}
+ color={Colors.RED5}
+ style={{ marginLeft: '0', marginBottom: '3px' }}
+ />
+ </Tooltip>
+ )}
+ {t.status === 'TASK_RUNNING' && (
+ <Tooltip
+ content={`Task Running [STAGE ${t.pipelineRow}]`}
+ position={Position.TOP}
+ >
+ <Spinner
+ className='task-spinner'
+ size={14}
+ intent={
+ t.status === 'TASK_COMPLETED' ? 'success' : 'warning'
+ }
+ value={t.status === 'TASK_COMPLETED' ? 1 : t.progress}
+ style={{ marginBottom: '-3px' }}
+ />
+ </Tooltip>
+ )}
+ {t.status === 'TASK_CREATED' && (
+ <Tooltip
+ content={`Task Created (Pending) [STAGE ${t.pipelineRow}]`}
+ position={Position.TOP}
+ >
+ <Icon
+ icon='pause'
+ size={14}
+ color={Colors.GRAY3}
+ style={{ marginLeft: '0', marginBottom: '3px' }}
+ />
+ </Tooltip>
+ )}
+ </div>
+ <div
+ className='pipeline-task-cell-name'
+ style={{
+ padding: '0 8px',
+ minWidth: '130px',
+ display: 'flex',
+ justifyContent: 'space-between'
+ }}
+ >
+ <div
+ className='task-plugin-name'
+ style={{
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap'
+ }}
+ >
+ {t.status === 'TASK_RUNNING' ? (
<Button
className='pipeline-taskrow-expand-trigger'
- onClick={() => setExpandedTask(eT => eT ? null : t)}
- icon={(
+ onClick={() => setExpandedTask((eT) => (eT ? null : t))}
+ icon={
<Icon
- size={12} color={Colors.GRAY2}
- icon={expandedTask?.id === t.id ? 'collapse-all' : 'expand-all'}
+ size={12}
+ color={Colors.GRAY2}
+ icon={
+ expandedTask?.id === t.id
+ ? 'collapse-all'
+ : 'expand-all'
+ }
style={{ margin: '0 6px 0 0' }}
/>
- )}
+ }
small
style={{
minHeight: '20px',
minWidth: '20px',
padding: '0 5px',
- marginRight: '5px',
+ marginRight: '5px'
}}
>
<strong>{t.plugin}</strong>
</Button>
- )
- : (
+ ) : (
<strong>{t.plugin}</strong>
- )}
- </div>
- </div>
- <div
- className='pipeline-task-cell-settings'
- style={{
- padding: '0 8px',
- display: 'flex',
- width: '25%',
- minWidth: '25%',
- // whiteSpace: 'nowrap',
- justifyContent: 'flex-start',
- // overflow: 'hidden',
- // textOverflow: 'ellipsis',
- flexGrow: 1
- }}
- >
- {t.plugin !== Providers.JENKINS && t.plugin !== 'refdiff' && (
- <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'flex', justifyContent: 'flex-start' }}>
- <span style={{ color: Colors.GRAY2 }}>
- <Icon icon='link' size={8} style={{ marginBottom: '3px', alignSelf: 'flex-start' }} />{' '}
- {t.options.projectId || t.options.boardId || t.options.owner || t.options.projectName}
- </span>
- {t.plugin === Providers.GITHUB && (
- <span style={{ fontWeight: 600 }}>/{t.options.repositoryName || t.options.repo || '(Repository)'}</span>
- )}
- {t.plugin === Providers.GITEXTRACTOR && (
- <div style={{ paddingLeft: '12px', display: 'inline-block' }}>
- <span>{t.options.url}</span><br />
- <strong>{t.options.repoId}</strong>
- </div>
- )}
- {t.plugin === Providers.DBT && (
- <span style={{ fontWeight: 600 }}> {t.options.projectPath}</span>
)}
</div>
- )}
- </div>
- <div
- className='pipeline-task-cell-duration'
- style={{
- padding: '0',
- minWidth: '80px',
- // whiteSpace: 'nowrap',
- textAlign: 'right'
- }}
- >
- <span style={{ whiteSpace: 'nowrap' }}>
- {(() => {
- let statusRelativeTime = dayjs(t.CreatedAt).toNow(true)
- switch (t.status) {
- case 'TASK_COMPLETED':
- case 'TASK_FAILED':
- statusRelativeTime = t.finishedAt == null ? 'N/A' : dayjs(t.finishedAt).from(t.beganAt, true)
- break
- case 'TASK_RUNNING':
- default:
- statusRelativeTime = dayjs(t.beganAt).toNow(true)
- break
- }
- return statusRelativeTime
- })()}
- </span>
- </div>
- <div
- className='pipeline-task-cell-progress'
- style={{
- padding: '0 8px',
- minWidth: '100px',
- textAlign: 'right'
- }}
- >
- <span style={{ fontWeight: t.status === 'TASK_COMPLETED' ? 800 : 600 }}>
- {Number(t.status === 'TASK_COMPLETED' ? 100 : (t.progress / 1) * 100).toFixed(2)}%
- </span>
- </div>
- <div
- className='pipeline-task-cell-message'
- style={{ display: 'flex', flexGrow: 1, width: '60%' }}
- >
- {t.message && (
- <div style={{ width: '98%', whiteSpace: 'wrap', overflow: 'hidden', textOverflow: 'ellipsis', paddingLeft: '10px' }}>
- <span style={{ color: t.status === 'TASK_FAILED' ? Colors.RED4 : Colors.GRAY3 }}>
- {t.message.length > 255
- ? (
- <Popover><>`${t.message.slice(0, 255)}...`</>
- <div style={{
- maxWidth:
- '300px',
- maxHeight: '300px',
- padding: '10px',
- overflow: 'auto',
- backgroundColor: '#f8f8f8'
- }}
+ </div>
+ <div
+ className='pipeline-task-cell-settings'
+ style={{
+ padding: '0 8px',
+ display: 'flex',
+ width: '25%',
+ minWidth: '25%',
+ // whiteSpace: 'nowrap',
+ justifyContent: 'flex-start',
+ // overflow: 'hidden',
+ // textOverflow: 'ellipsis',
+ flexGrow: 1
+ }}
+ >
+ {t.plugin !== Providers.JENKINS && t.plugin !== 'refdiff' && (
+ <div
+ style={{
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap',
+ display: 'flex',
+ justifyContent: 'flex-start'
+ }}
+ >
+ <span style={{ color: Colors.GRAY2 }}>
+ <Icon
+ icon='link'
+ size={8}
+ style={{
+ marginBottom: '3px',
+ alignSelf: 'flex-start'
+ }}
+ />{' '}
+ {t.options.projectId ||
+ t.options.boardId ||
+ t.options.owner ||
+ t.options.projectName}
+ </span>
+ {t.plugin === Providers.GITHUB && (
+ <span style={{ fontWeight: 600 }}>
+ /
+ {t.options.repositoryName ||
+ t.options.repo ||
+ '(Repository)'}
+ </span>
+ )}
+ {t.plugin === Providers.GITEXTRACTOR && (
+ <div
+ style={{
+ paddingLeft: '12px',
+ display: 'inline-block'
+ }}
+ >
+ <span>{t.options.url}</span>
+ <br />
+ <strong>{t.options.repoId}</strong>
+ </div>
+ )}
+ {t.plugin === Providers.DBT && (
+ <span style={{ fontWeight: 600 }}>
+ {t.options.projectPath}
+ </span>
+ )}
+ </div>
+ )}
+ </div>
+ <div
+ className='pipeline-task-cell-duration'
+ style={{
+ padding: '0',
+ minWidth: '80px',
+ // whiteSpace: 'nowrap',
+ textAlign: 'right'
+ }}
+ >
+ <span style={{ whiteSpace: 'nowrap' }}>
+ {(() => {
+ let statusRelativeTime = dayjs(t.CreatedAt).toNow(true)
+ switch (t.status) {
+ case 'TASK_COMPLETED':
+ case 'TASK_FAILED':
+ statusRelativeTime =
+ t.finishedAt == null
+ ? 'N/A'
+ : dayjs(t.finishedAt).from(t.beganAt, true)
+ break
+ case 'TASK_RUNNING':
+ default:
+ statusRelativeTime = dayjs(t.beganAt).toNow(true)
+ break
+ }
+ return statusRelativeTime
+ })()}
+ </span>
+ </div>
+ <div
+ className='pipeline-task-cell-progress'
+ style={{
+ padding: '0 8px',
+ minWidth: '100px',
+ textAlign: 'right'
+ }}
+ >
+ <span
+ style={{
+ fontWeight: t.status === 'TASK_COMPLETED' ? 800 : 600
+ }}
+ >
+ {Number(
+ t.status === 'TASK_COMPLETED'
+ ? 100
+ : (t.progress / 1) * 100
+ ).toFixed(2)}
+ %
+ </span>
+ </div>
+ <div
+ className='pipeline-task-cell-message'
+ style={{ display: 'flex', flexGrow: 1, width: '60%' }}
+ >
+ {t.message && (
+ <div
+ style={{
+ width: '98%',
+ whiteSpace: 'wrap',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ paddingLeft: '10px'
+ }}
+ >
+ <span
+ style={{
+ color:
+ t.status === 'TASK_FAILED'
+ ? Colors.RED4
+ : Colors.GRAY3
+ }}
+ >
+ {t.message.length > 255 ? (
+ <Popover>
+ <>`${t.message.slice(0, 255)}...`</>
+ <div
+ style={{
+ maxWidth: '300px',
+ maxHeight: '300px',
+ padding: '10px',
+ overflow: 'auto',
+ backgroundColor: '#f8f8f8'
+ }}
>
- <h3 style={{ margin: '5px 0', color: Colors.RED5 }}>
+ <h3
+ style={{ margin: '5px 0', color: Colors.RED5 }}
+ >
<Icon
icon='warning-sign'
size={14}
- color={Colors.RED5} style={{ float: 'left', margin: '2px 4px 0 0' }}
+ color={Colors.RED5}
+ style={{
+ float: 'left',
+ margin: '2px 4px 0 0'
+ }}
/>
- ERROR MESSAGE <small style={{ color: Colors.GRAY3 }}> (Extended) </small>
+ ERROR MESSAGE{' '}
+ <small style={{ color: Colors.GRAY3 }}>
+ {' '}
+ (Extended){' '}
+ </small>
</h3>
{t.message}
- <p style={{ margin: '10px 0', color: Colors.GRAY3 }}> > Please check the console log for more details... </p>
+ <p
+ style={{
+ margin: '10px 0',
+ color: Colors.GRAY3
+ }}
+ >
+ {' '}
+ > Please check the console log for more
+ details...{' '}
+ </p>
</div>
</Popover>
- )
- : t.message}
- </span>
- </div>
- )}
+ ) : (
+ t.message
+ )}
+ </span>
+ </div>
+ )}
+ </div>
</div>
+ <Collapse
+ isOpen={
+ expandedTask &&
+ expandedTask.id === t.id &&
+ expandedTask.progressDetail !== null
+ }
+ >
+ {t.status === 'TASK_RUNNING' &&
+ t.progressDetail &&
+ t.progressDetail.subTaskName !== null && (
+ <div
+ className='pipeline-progress-detail'
+ style={{
+ backgroundColor: 'rgb(235, 243, 255)',
+ padding: '0',
+ borderTop: '1px solid rgb(0, 102, 255)'
+ }}
+ >
+ <h2
+ className='headline'
+ style={{
+ margin: '10px 20px 10px 10px',
+ fontSize: '14px'
+ }}
+ >
+ <span
+ style={{
+ display: 'inline-block',
+ margin: '0 10px 0 0',
+ float: 'right'
+ }}
+ >
+ <Spinner
+ className='task-details-spinner'
+ size={14}
+ intent={Intent.NONE}
+ value={null}
+ />
+ </span>
+ <span
+ style={{
+ display: 'inline-block',
+ margin: '0 5px',
+ float: 'left'
+ }}
+ >
+ {activeTask &&
+ ProviderIcons[activeTask?.plugin.toLowerCase()](
+ 16,
+ 16
+ )}
+ </span>
+ TASK DETAILS{' '}
+ <span style={{ color: Colors.GRAY3 }}>
+ ({ProviderLabels[activeTask?.plugin.toUpperCase()]})
+ </span>
+ </h2>
+ <table
+ className='bp3-html-table striped bordered'
+ style={{ width: '100%' }}
+ >
+ <thead>
+ <tr>
+ <th style={{ paddingLeft: '20px' }}>Subtasks</th>
+ <th>Records</th>
+ <th>Subtask ID & Name</th>
+ <th />
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td style={{ paddingLeft: '20px' }}>
+ <span
+ style={{
+ color: 'rgb(0, 102, 255)',
+ fontWeight: 'bold'
+ }}
+ >
+ {t.progressDetail.finishedSubTasks}
+ </span>{' '}
+ / {t.progressDetail.totalSubTasks}
+ </td>
+ <td>
+ <span
+ style={{
+ color: 'rgb(0, 102, 255)',
+ fontWeight: 'bold'
+ }}
+ >
+ {t.progressDetail.finishedRecords}
+ </span>{' '}
+ /{' '}
+ <span>
+ {t.progressDetail.totalRecords === -1
+ ? '∞'
+ : t.progressDetail.totalRecords}
+ </span>
+ </td>
+ <td>
+ {t.progressDetail.subTaskNumber}:
+ <span
+ style={{
+ color: 'rgb(0, 102, 255)',
+ fontWeight: 'bold'
+ }}
+ >
+ {t.progressDetail.subTaskName}
+ </span>
+ </td>
+ <td />
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ )}
+ </Collapse>
</div>
- <Collapse isOpen={expandedTask && expandedTask.id === t.id && expandedTask.progressDetail !== null}>
- {t.status === 'TASK_RUNNING' && t.progressDetail && t.progressDetail.subTaskName !== null && (
- <div
- className='pipeline-progress-detail' style={{
- backgroundColor: 'rgb(235, 243, 255)',
- padding: '0',
- borderTop: '1px solid rgb(0, 102, 255)'
- }}
- >
- <h2 className='headline' style={{ margin: '10px 20px 10px 10px', fontSize: '14px' }}>
- <span style={{ display: 'inline-block', margin: '0 10px 0 0', float: 'right' }}>
- <Spinner
- className='task-details-spinner'
- size={14}
- intent={Intent.NONE}
- value={null}
- />
- </span>
- <span style={{ display: 'inline-block', margin: '0 5px', float: 'left' }}>
- {activeTask && ProviderIcons[activeTask?.plugin.toLowerCase()](16, 16)}
- </span>
- TASK DETAILS <span style={{ color: Colors.GRAY3 }}>({ProviderLabels[activeTask?.plugin.toUpperCase()]})</span>
- </h2>
- <table className='bp3-html-table striped bordered' style={{ width: '100%' }}>
- <thead>
- <tr>
- <th style={{ paddingLeft: '20px' }}>Subtasks</th>
- <th>Records</th>
- <th>Subtask ID & Name</th>
- <th />
- </tr>
- </thead>
- <tbody>
- <tr>
- <td style={{ paddingLeft: '20px' }}>
- <span style={{ color: 'rgb(0, 102, 255)', fontWeight: 'bold' }}>
- {t.progressDetail.finishedSubTasks}
- </span> / {t.progressDetail.totalSubTasks}
- </td>
- <td>
- <span style={{ color: 'rgb(0, 102, 255)', fontWeight: 'bold' }}>
- {t.progressDetail.finishedRecords}
- </span> /{' '}
- <span>
- {t.progressDetail.totalRecords === -1
- ? '∞'
- : t.progressDetail.totalRecords}
- </span>
- </td>
- <td>{t.progressDetail.subTaskNumber}:
- <span style={{ color: 'rgb(0, 102, 255)', fontWeight: 'bold' }}>{t.progressDetail.subTaskName}</span>
- </td>
- <td />
- </tr>
- </tbody>
- </table>
- </div>
- )}
- </Collapse>
- </div>
- ))}
+ ))}
{(!activePipeline.plan || activePipeline.plan.length === 0) && (
<>
<div style={{ display: 'flex' }}>
<Icon
icon='warning-sign'
size={12}
- color={Colors.ORANGE5} style={{ float: 'left', margin: '0 4px 0 0' }}
+ color={Colors.ORANGE5}
+ style={{ float: 'left', margin: '0 4px 0 0' }}
/>
<p>
- <strong>Missing Configuration</strong>, this pipeline has no tasks.
- <br />Please create a new pipeline with a valid configuration.
+ <strong>Missing Configuration</strong>, this pipeline has no
+ tasks.
+ <br />
+ Please create a new pipeline with a valid configuration.
</p>
</div>
</>
diff --git a/config-ui/src/components/pipelines/pipeline-settings/refdiff.jsx b/config-ui/src/components/pipelines/pipeline-settings/refdiff.jsx
index c3e06f34..32ee6fbc 100644
--- a/config-ui/src/components/pipelines/pipeline-settings/refdiff.jsx
+++ b/config-ui/src/components/pipelines/pipeline-settings/refdiff.jsx
@@ -25,7 +25,7 @@ import {
Intent,
Tag,
Tooltip,
- Colors,
+ Colors
} from '@blueprintjs/core'
import RefDiffTasksMenu from '@/components/menus/RefDiffTasksMenu'
@@ -39,16 +39,18 @@ const RefDiffSettings = (props) => {
isEnabled,
setRepoId = () => {},
setTasks = () => {},
- setPairs = () => {},
+ setPairs = () => {}
} = props
const [refDiffOldTag, setOldTag] = useState('')
const [refDiffNewTag, setNewTag] = useState('')
const handleRefDiffTaskSelect = (e, task) => {
- setTasks(t => t.includes(task.task)
- ? t.filter(t2 => t2 !== task.task)
- : [...new Set([...t, task.task])])
+ setTasks((t) =>
+ t.includes(task.task)
+ ? t.filter((t2) => t2 !== task.task)
+ : [...new Set([...t, task.task])]
+ )
}
// eslint-disable-next-line no-unused-vars
@@ -60,28 +62,42 @@ const RefDiffSettings = (props) => {
}
const addRefDiffPairObject = (oldRef, newRef) => {
- setPairs(pairs => (!pairs.some(p => p.oldRef === oldRef && p.newRef === newRef))
- ? [...pairs, { oldRef, newRef }]
- : [...pairs])
+ setPairs((pairs) =>
+ !pairs.some((p) => p.oldRef === oldRef && p.newRef === newRef)
+ ? [...pairs, { oldRef, newRef }]
+ : [...pairs]
+ )
setNewTag('')
setOldTag('')
}
const removeRefDiffPairObject = (oldRef, newRef) => {
- setPairs(pairs => pairs.filter(p => !(p.oldRef === oldRef && p.newRef === newRef)))
+ setPairs((pairs) =>
+ pairs.filter((p) => !(p.oldRef === oldRef && p.newRef === newRef))
+ )
}
return (
<>
<FormGroup
disabled={isRunning || !isEnabled(providerId)}
- label={<strong>Repository ID<span className='requiredStar'>*</span></strong>}
- labelInfo={<span style={{ display: 'block' }}>Enter Repo Column ID</span>}
+ label={
+ <strong>
+ Repository ID<span className='requiredStar'>*</span>
+ </strong>
+ }
+ labelInfo={
+ <span style={{ display: 'block' }}>Enter Repo Column ID</span>
+ }
inline={false}
labelFor='refdiff-repo-id'
className=''
contentClassName=''
- style={{ minWidth: '280px', marginBottom: 'auto', whiteSpace: 'nowrap' }}
+ style={{
+ minWidth: '280px',
+ marginBottom: 'auto',
+ whiteSpace: 'nowrap'
+ }}
fill
>
<InputGroup
@@ -98,46 +114,73 @@ const RefDiffSettings = (props) => {
</FormGroup>
<FormGroup
disabled={isRunning || !isEnabled(providerId)}
- label={(
- <strong>Tasks<span className='requiredStar'>*</span>
+ label={
+ <strong>
+ Tasks<span className='requiredStar'>*</span>
<span
className='badge-count'
style={{
opacity: isEnabled(providerId) ? 0.5 : 0.1
}}
- >{tasks.length}
+ >
+ {tasks.length}
</span>
</strong>
- )}
- labelInfo={<span style={{ display: 'block' }}>Select Tasks to Execute</span>}
+ }
+ labelInfo={
+ <span style={{ display: 'block' }}>Select Tasks to Execute</span>
+ }
inline={false}
labelFor='refdiff-tasks'
className=''
contentClassName=''
- style={{ marginLeft: '12px', marginRight: '12px', marginBottom: 'auto', whiteSpace: 'nowrap' }}
+ style={{
+ marginLeft: '12px',
+ marginRight: '12px',
+ marginBottom: 'auto',
+ whiteSpace: 'nowrap'
+ }}
fill
>
-
<Popover
className='provider-tasks-popover'
disabled={isRunning || !isEnabled(providerId)}
- content={(
- <RefDiffTasksMenu onSelect={handleRefDiffTaskSelect} selected={tasks} />
- )}
+ content={
+ <RefDiffTasksMenu
+ onSelect={handleRefDiffTaskSelect}
+ selected={tasks}
+ />
+ }
placement='top-center'
>
<ButtonGroup disabled={isRunning || !isEnabled(providerId)}>
<Button
disabled={isRunning || !isEnabled(providerId)}
icon='menu'
- text={tasks.length > 0
- ? <>Choose Tasks <Tag intent={Intent.PRIMARY} round>{tasks.length}</Tag></>
- : <>Choose Tasks <Tag intent={Intent.PRIMARY} round>None</Tag></>}
+ text={
+ tasks.length > 0 ? (
+ <>
+ Choose Tasks{' '}
+ <Tag intent={Intent.PRIMARY} round>
+ {tasks.length}
+ </Tag>
+ </>
+ ) : (
+ <>
+ Choose Tasks{' '}
+ <Tag intent={Intent.PRIMARY} round>
+ None
+ </Tag>
+ </>
+ )
+ }
/>
<Button
icon='eraser'
intent={Intent.WARNING}
- disabled={isRunning || !isEnabled(providerId) || tasks.length === 0}
+ disabled={
+ isRunning || !isEnabled(providerId) || tasks.length === 0
+ }
onClick={() => setTasks([])}
/>
</ButtonGroup>
@@ -146,18 +189,22 @@ const RefDiffSettings = (props) => {
<div style={{ display: 'flex', flex: 1, width: '100%' }}>
<FormGroup
disabled={isRunning || !isEnabled(providerId)}
- label={(
- <strong>Tags<span className='requiredStar'>*</span>
+ label={
+ <strong>
+ Tags<span className='requiredStar'>*</span>
<span
className='badge-count'
style={{
opacity: isEnabled(providerId) ? 0.5 : 0.1
}}
- >{pairs.length}
+ >
+ {pairs.length}
</span>
</strong>
- )}
- labelInfo={<span style={{ display: 'block' }}>Specify tag Ref Pairs</span>}
+ }
+ labelInfo={
+ <span style={{ display: 'block' }}>Specify tag Ref Pairs</span>
+ }
inline={false}
labelFor='refdiff-pair-newref'
className=''
@@ -169,14 +216,16 @@ const RefDiffSettings = (props) => {
<div>
<InputGroup
id='refdiff-pair-newref'
- leftElement={(
+ leftElement={
<Tag
- intent={Intent.WARNING} style={{
+ intent={Intent.WARNING}
+ style={{
opacity: isEnabled(providerId) ? 1 : 0.3
}}
- >New Ref
+ >
+ New Ref
</Tag>
- )}
+ }
inline={true}
disabled={isRunning || !isEnabled(providerId)}
placeholder='eg. refs/tags/v0.6.0'
@@ -189,14 +238,15 @@ const RefDiffSettings = (props) => {
<div style={{ marginLeft: '10px', marginRight: 0 }}>
<InputGroup
id='refdiff-pair-oldref'
- leftElement={(
+ leftElement={
<Tag
style={{
opacity: isEnabled(providerId) ? 1 : 0.3
}}
- >Old Ref
+ >
+ Old Ref
</Tag>
- )}
+ }
inline={true}
disabled={isRunning || !isEnabled(providerId)}
placeholder='eg. refs/tags/v0.5.0'
@@ -204,18 +254,24 @@ const RefDiffSettings = (props) => {
onChange={(e) => setOldTag(e.target.value)}
autoComplete='off'
fill={false}
- rightElement={(
+ rightElement={
<Tooltip content='Add Tag Pair'>
<Button
className='btn-add-tagpair'
intent={Intent.PRIMARY}
- disabled={!refDiffOldTag || !refDiffNewTag || refDiffOldTag === refDiffNewTag}
+ disabled={
+ !refDiffOldTag ||
+ !refDiffNewTag ||
+ refDiffOldTag === refDiffNewTag
+ }
icon='plus'
style={{}}
- onClick={() => addRefDiffPairObject(refDiffOldTag, refDiffNewTag)}
+ onClick={() =>
+ addRefDiffPairObject(refDiffOldTag, refDiffNewTag)
+ }
/>
</Tooltip>
- )}
+ }
/>
</div>
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
@@ -238,12 +294,23 @@ const RefDiffSettings = (props) => {
}}
>
{pairs.map((pair, pairIdx) => (
- <div key={`refdiff-added-pairs-itemkey-$${pairIdx}`} style={{ display: 'flex' }}>
+ <div
+ key={`refdiff-added-pairs-itemkey-$${pairIdx}`}
+ style={{ display: 'flex' }}
+ >
<div style={{ flex: 1 }}>
- <Tag intent={Intent.WARNING} round='false' small>new</Tag> {pair.newRef}
+ <Tag intent={Intent.WARNING} round='false' small>
+ new
+ </Tag>{' '}
+ {pair.newRef}
</div>
- <div style={{ flex: 1, marginLeft: '10px', marginRight: '10px' }}>
- <Tag round='false' small>old</Tag> {pair.oldRef}
+ <div
+ style={{ flex: 1, marginLeft: '10px', marginRight: '10px' }}
+ >
+ <Tag round='false' small>
+ old
+ </Tag>{' '}
+ {pair.oldRef}
</div>
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
<Button
@@ -252,12 +319,20 @@ const RefDiffSettings = (props) => {
minimal
small='true'
style={{ marginTop: 'auto', alignSelf: 'center' }}
- onClick={() => removeRefDiffPairObject(pair.oldRef, pair.newRef)}
+ onClick={() =>
+ removeRefDiffPairObject(pair.oldRef, pair.newRef)
+ }
/>
</div>
</div>
))}
- {pairs.length === 0 && <><span style={{ color: Colors.GRAY3 }}>( No Tag Pairs Added)</span></>}
+ {pairs.length === 0 && (
+ <>
+ <span style={{ color: Colors.GRAY3 }}>
+ ( No Tag Pairs Added)
+ </span>
+ </>
+ )}
</div>
</FormGroup>
</div>
diff --git a/config-ui/src/components/validation/InputValidationError.jsx b/config-ui/src/components/validation/InputValidationError.jsx
index 8110f867..22610434 100644
--- a/config-ui/src/components/validation/InputValidationError.jsx
+++ b/config-ui/src/components/validation/InputValidationError.jsx
@@ -22,7 +22,7 @@ import {
Popover,
PopoverInteractionKind,
Intent,
- Position,
+ Position
} from '@blueprintjs/core'
const InputValidationError = (props) => {
@@ -34,7 +34,7 @@ const InputValidationError = (props) => {
elementRef,
onError = () => {},
onSuccess = () => {},
- interactionKind = PopoverInteractionKind.HOVER_TARGET_ONLY,
+ interactionKind = PopoverInteractionKind.HOVER_TARGET_ONLY
} = props
const [elementIsFocused, setElementIsFocused] = useState(false)
@@ -133,7 +133,7 @@ const InputValidationError = (props) => {
style={{
outline: 'none',
padding: '5px',
- borderTop: `2px solid ${Colors.RED5}`,
+ borderTop: `2px solid ${Colors.RED5}`
}}
>
{error}
diff --git a/config-ui/src/components/widgets/PipelineIndicator.jsx b/config-ui/src/components/widgets/PipelineIndicator.jsx
index b907317b..54862a9c 100644
--- a/config-ui/src/components/widgets/PipelineIndicator.jsx
+++ b/config-ui/src/components/widgets/PipelineIndicator.jsx
@@ -25,7 +25,7 @@ import {
Classes,
Popover,
Spinner,
- Position,
+ Position
} from '@blueprintjs/core'
const PipelineIndicator = (props) => {
@@ -66,14 +66,15 @@ const PipelineIndicator = (props) => {
cursor: 'pointer'
}}
>
- <div style={{
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'center',
- width: '40px',
- height: '40px',
- position: 'relative'
- }}
+ <div
+ style={{
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ width: '40px',
+ height: '40px',
+ position: 'relative'
+ }}
>
<Popover
key='popover-lastrun-info'
@@ -90,35 +91,23 @@ const PipelineIndicator = (props) => {
<Spinner
value={pipeline.status === 'TASK_COMPLETED' ? 100 : null}
className='lastrun-spinner'
- intent={pipeline.status === 'TASK_COMPLETED' ? Intent.WARNING : Intent.PRIMARY}
- size={40} style={{
-
- }}
+ intent={
+ pipeline.status === 'TASK_COMPLETED'
+ ? Intent.WARNING
+ : Intent.PRIMARY
+ }
+ size={40}
+ style={{}}
/>
{(() => {
switch (pipeline.status) {
case 'TASK_COMPLETED':
- return (
- <Icon
- icon='tick-circle'
- size={40}
- />
- )
+ return <Icon icon='tick-circle' size={40} />
case 'TASK_FAILED':
- return (
- <Icon
- icon='error'
- size={40}
- />
- )
+ return <Icon icon='error' size={40} />
case 'TASK_RUNNING':
default:
- return (
- <Icon
- icon='refresh'
- size={40}
- />
- )
+ return <Icon icon='refresh' size={40} />
}
})()}
{/* <Icon
@@ -129,10 +118,21 @@ const PipelineIndicator = (props) => {
/> */}
</>
<>
- <div style={{ fontSize: '12px', padding: '12px', minWidth: '420px', maxWidth: '420px', maxHeight: '400px', overflow: 'hidden', overflowY: 'auto' }}>
+ <div
+ style={{
+ fontSize: '12px',
+ padding: '12px',
+ minWidth: '420px',
+ maxWidth: '420px',
+ maxHeight: '400px',
+ overflow: 'hidden',
+ overflowY: 'auto'
+ }}
+ >
<h3
onClick={() => onView(pipeline.ID)}
- className='group-header' style={{
+ className='group-header'
+ style={{
marginTop: '0',
marginBottom: '6px',
textOverflow: 'ellipsis',
@@ -140,40 +140,88 @@ const PipelineIndicator = (props) => {
whiteSpace: 'nowrap'
}}
>
- <Icon icon={pipeline.status === 'TASK_FAILED' ? 'warning-sign' : 'help'} size={16} style={{ marginRight: '5px' }} /> {pipeline.name || 'Last Pipeline Run'}
+ <Icon
+ icon={
+ pipeline.status === 'TASK_FAILED'
+ ? 'warning-sign'
+ : 'help'
+ }
+ size={16}
+ style={{ marginRight: '5px' }}
+ />{' '}
+ {pipeline.name || 'Last Pipeline Run'}
</h3>
- <p style={{ fontSize: '11px', color: pipeline.status === 'TASK_FAILED' ? Colors.RED4 : Colors.DARK_GRAY4 }}>
- {pipeline.message.length > 150 ? `${pipeline.message.slice(0, 150)}...` : pipeline.message}
+ <p
+ style={{
+ fontSize: '11px',
+ color:
+ pipeline.status === 'TASK_FAILED'
+ ? Colors.RED4
+ : Colors.DARK_GRAY4
+ }}
+ >
+ {pipeline.message.length > 150
+ ? `${pipeline.message.slice(0, 150)}...`
+ : pipeline.message}
</p>
- <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between' }}>
+ <div
+ style={{
+ display: 'flex',
+ width: '100%',
+ justifyContent: 'space-between'
+ }}
+ >
<div>
- <label><strong>Pipeline ID</strong></label>
- <div style={{ fontSize: '13px', fontWeight: 800 }}>{pipeline.ID}</div>
+ <label>
+ <strong>Pipeline ID</strong>
+ </label>
+ <div style={{ fontSize: '13px', fontWeight: 800 }}>
+ {pipeline.ID}
+ </div>
</div>
<div style={{ padding: '0 12px' }}>
- <label><strong>Tasks</strong></label>
- <div style={{ fontSize: '13px' }}>{pipeline.finishedTasks}/{pipeline.totalTasks}</div>
+ <label>
+ <strong>Tasks</strong>
+ </label>
+ <div style={{ fontSize: '13px' }}>
+ {pipeline.finishedTasks}/{pipeline.totalTasks}
+ </div>
</div>
<div>
- <label><strong>Status</strong></label>
+ <label>
+ <strong>Status</strong>
+ </label>
<div style={{ fontSize: '13px' }}>{pipeline.status}</div>
</div>
- <div style={{ paddingLeft: '10px', justifyContent: 'flex-end', alignSelf: 'flex-end' }}>
+ <div
+ style={{
+ paddingLeft: '10px',
+ justifyContent: 'flex-end',
+ alignSelf: 'flex-end'
+ }}
+ >
{pipeline.status === 'TASK_COMPLETED' && (
<a
className='bp3-button bp3-intent-primary bp3-small'
href={graphsUrl}
target='_blank'
rel='noreferrer'
- style={{ backgroundColor: '#3bd477', color: '#ffffff' }}
+ style={{
+ backgroundColor: '#3bd477',
+ color: '#ffffff'
+ }}
>
- <Icon icon='doughnut-chart' size={13} /> <span className='bp3-button-text'>Graphs</span>
+ <Icon icon='doughnut-chart' size={13} />{' '}
+ <span className='bp3-button-text'>Graphs</span>
</a>
)}
{pipeline.status === 'TASK_RUNNING' && (
<Button
className={`btn-cancel-pipeline ${Classes.POPOVER_DISMISS}`}
- small icon='stop' text='CANCEL' intent='primary'
+ small
+ icon='stop'
+ text='CANCEL'
+ intent='primary'
onClick={() => onCancel(pipeline.ID)}
/>
)}
@@ -181,7 +229,8 @@ const PipelineIndicator = (props) => {
<Button
className={`btn-retry-pipeline ${Classes.POPOVER_DISMISS}`}
intent='danger'
- icon='reset' text='RETRY'
+ icon='reset'
+ text='RETRY'
style={{ color: '#ffffff' }}
onClick={() => onRetry(pipeline)}
small
@@ -190,34 +239,104 @@ const PipelineIndicator = (props) => {
<Button
minimal
className={`btn-ok ${Classes.POPOVER_DISMISS}`}
- small text='OK'
+ small
+ text='OK'
style={{ marginLeft: '3px' }}
/>
</div>
</div>
- <div style={{
- paddingTop: '7px',
- borderTop: '1px solid #f5f5f5',
- marginTop: '14px',
- }}
+ <div
+ style={{
+ paddingTop: '7px',
+ borderTop: '1px solid #f5f5f5',
+ marginTop: '14px'
+ }}
>
- {pipeline?.tasks && pipeline.tasks.map((t, tIdx) => (
- <div
- className='pipeline-task-'
- key={`pipeline-task-key-${tIdx}`}
- style={{ display: 'flex', padding: '4px 6px', justifyContent: 'space-between' }}
- >
- <div style={{ paddingRight: '8px' }}><Spinner className='mini-task-spinner' size={14} intent={t.status === 'TASK_COMPLETED' ? 'success' : 'warning'} value={t.status === 'TASK_COMPLETED' ? 1 : t.progress} /></div>
- <div style={{ padding: '0 8px', width: '100%' }}>
- <strong style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.plugin}</strong>
- {t.status === 'TASK_COMPLETED' && (<Icon icon='small-tick' size={14} color={Colors.GREEN5} style={{ marginLeft: '5px' }} />)}
- {t.status === 'TASK_FAILED' && (<Icon icon='warning-sign' size={11} color={Colors.RED5} style={{ marginLeft: '5px', marginBottom: '3px' }} />)}
+ {pipeline?.tasks &&
+ pipeline.tasks.map((t, tIdx) => (
+ <div
+ className='pipeline-task-'
+ key={`pipeline-task-key-${tIdx}`}
+ style={{
+ display: 'flex',
+ padding: '4px 6px',
+ justifyContent: 'space-between'
+ }}
+ >
+ <div style={{ paddingRight: '8px' }}>
+ <Spinner
+ className='mini-task-spinner'
+ size={14}
+ intent={
+ t.status === 'TASK_COMPLETED'
+ ? 'success'
+ : 'warning'
+ }
+ value={
+ t.status === 'TASK_COMPLETED' ? 1 : t.progress
+ }
+ />
+ </div>
+ <div style={{ padding: '0 8px', width: '100%' }}>
+ <strong
+ style={{
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap'
+ }}
+ >
+ {t.plugin}
+ </strong>
+ {t.status === 'TASK_COMPLETED' && (
+ <Icon
+ icon='small-tick'
+ size={14}
+ color={Colors.GREEN5}
+ style={{ marginLeft: '5px' }}
+ />
+ )}
+ {t.status === 'TASK_FAILED' && (
+ <Icon
+ icon='warning-sign'
+ size={11}
+ color={Colors.RED5}
+ style={{
+ marginLeft: '5px',
+ marginBottom: '3px'
+ }}
+ />
+ )}
+ </div>
+ <div
+ style={{
+ padding: '0',
+ minWidth: '80px',
+ textAlign: 'right'
+ }}
+ >
+ <strong>
+ {Number(t.spentSeconds / 60).toFixed(2)}mins
+ </strong>
+ </div>
+ <div
+ style={{
+ padding: '0 8px',
+ minWidth: '100px',
+ textAlign: 'right'
+ }}
+ >
+ <span color={Colors.GRAY5}>
+ {Number(
+ t.status === 'TASK_COMPLETED'
+ ? 100
+ : (t.progress / 1) * 100
+ ).toFixed(2)}
+ %
+ </span>
+ </div>
+ <div />
</div>
- <div style={{ padding: '0', minWidth: '80px', textAlign: 'right' }}><strong>{Number(t.spentSeconds / 60).toFixed(2)}mins</strong></div>
- <div style={{ padding: '0 8px', minWidth: '100px', textAlign: 'right' }}><span color={Colors.GRAY5}>{Number(t.status === 'TASK_COMPLETED' ? 100 : (t.progress / 1) * 100).toFixed(2)}%</span></div>
- <div />
- </div>
- ))}
+ ))}
</div>
</div>
</>
diff --git a/config-ui/src/config/environment.js b/config-ui/src/config/environment.js
index 772576d5..84a2a040 100644
--- a/config-ui/src/config/environment.js
+++ b/config-ui/src/config/environment.js
@@ -17,6 +17,4 @@
*/
const ENVIRONMENT = process.env.NODE_ENV
-export {
- ENVIRONMENT
-}
+export { ENVIRONMENT }
diff --git a/config-ui/src/config/gitlabApiProxy.js b/config-ui/src/config/gitlabApiProxy.js
index edcfbe27..a6721825 100644
--- a/config-ui/src/config/gitlabApiProxy.js
+++ b/config-ui/src/config/gitlabApiProxy.js
@@ -16,10 +16,8 @@
*
*/
// @todo: add string replacer for [:connectionId] or refactor this const
-const GITLAB_API_PROXY_ENDPOINT = '/api/plugins/gitlab/connections/[:connectionId:]/proxy/rest'
+const GITLAB_API_PROXY_ENDPOINT =
+ '/api/plugins/gitlab/connections/[:connectionId:]/proxy/rest'
const PROJECTS_ENDPOINT = `${GITLAB_API_PROXY_ENDPOINT}/projects?search=[:search:]&membership=[:membership:]`
-export {
- GITLAB_API_PROXY_ENDPOINT,
- PROJECTS_ENDPOINT,
-}
+export { GITLAB_API_PROXY_ENDPOINT, PROJECTS_ENDPOINT }
diff --git a/config-ui/src/config/jiraApiProxy.js b/config-ui/src/config/jiraApiProxy.js
index 3c0ac201..b00616db 100644
--- a/config-ui/src/config/jiraApiProxy.js
+++ b/config-ui/src/config/jiraApiProxy.js
@@ -17,7 +17,8 @@
*/
const JIRA_API_VERSION = 2
// @todo: add string replacer for [:connectionId] or refactor this const
-const JIRA_API_PROXY_ENDPOINT = '/api/plugins/jira/connections/[:connectionId:]/proxy/rest'
+const JIRA_API_PROXY_ENDPOINT =
+ '/api/plugins/jira/connections/[:connectionId:]/proxy/rest'
const ISSUE_TYPES_ENDPOINT = `${JIRA_API_PROXY_ENDPOINT}/api/${JIRA_API_VERSION}/issuetype`
const ISSUE_FIELDS_ENDPOINT = `${JIRA_API_PROXY_ENDPOINT}/api/${JIRA_API_VERSION}/field`
const BOARDS_ENDPOINT = `${JIRA_API_PROXY_ENDPOINT}/agile/1.0/board`
@@ -27,5 +28,5 @@ export {
JIRA_API_PROXY_ENDPOINT,
ISSUE_TYPES_ENDPOINT,
ISSUE_FIELDS_ENDPOINT,
- BOARDS_ENDPOINT,
+ BOARDS_ENDPOINT
}
diff --git a/config-ui/src/config/migration.js b/config-ui/src/config/migration.js
index a25e592d..527fc45e 100644
--- a/config-ui/src/config/migration.js
+++ b/config-ui/src/config/migration.js
@@ -22,7 +22,8 @@ const MigrationOptions = {
apiCancelEndpoint: null,
apiStatusCode: 428, // API Response Code for Migration Required
warningId: 'DEVLAKE__MIGRATION_WARNING', // Local Storage Warning ID Key
- cancelToastMessage: 'Migration Halted - Please downgrade manually, you will continue to receive a warning unless you proceed with migration or rollback.',
+ cancelToastMessage:
+ 'Migration Halted - Please downgrade manually, you will continue to receive a warning unless you proceed with migration or rollback.',
failedToastMessage: 'Database Migration Failed! (Check Network Console)',
AlertDialog: {
title: 'New Migration Scripts Detected',
@@ -33,6 +34,4 @@ const MigrationOptions = {
}
}
-export {
- MigrationOptions
-}
+export { MigrationOptions }
diff --git a/config-ui/src/data/BlueprintWorkflow.js b/config-ui/src/data/BlueprintWorkflow.js
index cb065880..9a2de9e8 100644
--- a/config-ui/src/data/BlueprintWorkflow.js
+++ b/config-ui/src/data/BlueprintWorkflow.js
@@ -53,7 +53,7 @@ const WorkflowSteps = [
complete: false,
icon: null,
errors: []
- },
+ }
]
const WorkflowAdvancedSteps = [
@@ -83,7 +83,7 @@ const WorkflowAdvancedSteps = [
complete: false,
icon: null,
errors: []
- },
+ }
]
const DEFAULT_DATA_ENTITIES = [
@@ -91,30 +91,34 @@ const DEFAULT_DATA_ENTITIES = [
id: 1,
name: 'source-code-management',
title: 'Source Code Management',
- value: DataEntityTypes.CODE,
+ value: DataEntityTypes.CODE
},
{
id: 2,
name: 'issue-tracking',
title: 'Issue Tracking',
- value: DataEntityTypes.TICKET,
+ value: DataEntityTypes.TICKET
},
{
id: 3,
name: 'code-review',
title: 'Code Review',
- value: DataEntityTypes.CODE_REVIEW,
+ value: DataEntityTypes.CODE_REVIEW
},
{
id: 4,
name: 'cross-domain',
title: 'Crossdomain',
- value: DataEntityTypes.CROSSDOMAIN,
+ value: DataEntityTypes.CROSSDOMAIN
},
- { id: 5, name: 'ci-cd', title: 'CI/CD', value: DataEntityTypes.DEVOPS },
+ { id: 5, name: 'ci-cd', title: 'CI/CD', value: DataEntityTypes.DEVOPS }
]
-const DEFAULT_BOARDS = [
-]
+const DEFAULT_BOARDS = []
-export { WorkflowSteps, WorkflowAdvancedSteps, DEFAULT_DATA_ENTITIES, DEFAULT_BOARDS }
+export {
+ WorkflowSteps,
+ WorkflowAdvancedSteps,
+ DEFAULT_DATA_ENTITIES,
+ DEFAULT_BOARDS
+}
diff --git a/config-ui/src/data/DataEntities.js b/config-ui/src/data/DataEntities.js
index 80205770..bc4300b7 100644
--- a/config-ui/src/data/DataEntities.js
+++ b/config-ui/src/data/DataEntities.js
@@ -21,7 +21,7 @@ const DataEntityTypes = {
TICKET: 'TICKET',
CODE_REVIEW: 'CODEREVIEW',
CROSSDOMAIN: 'CROSS',
- DEVOPS: 'CICD',
+ DEVOPS: 'CICD'
// USER: 'user',
}
@@ -30,7 +30,7 @@ const DataEntities = [
DataEntityTypes.TICKET,
DataEntityTypes.CODE_REVIEW,
DataEntityTypes.CROSSDOMAIN,
- DataEntityTypes.DEVOPS,
+ DataEntityTypes.DEVOPS
// DataEntityTypes.USER,
]
diff --git a/config-ui/src/data/DataScopes.js b/config-ui/src/data/DataScopes.js
index 0aa84b66..7b740172 100644
--- a/config-ui/src/data/DataScopes.js
+++ b/config-ui/src/data/DataScopes.js
@@ -21,6 +21,4 @@ const DataScopeModes = {
EDIT: 'edit'
}
-export {
- DataScopeModes
-}
+export { DataScopeModes }
diff --git a/config-ui/src/data/NullBlueprint.js b/config-ui/src/data/NullBlueprint.js
index d4896e95..bc161d8e 100644
--- a/config-ui/src/data/NullBlueprint.js
+++ b/config-ui/src/data/NullBlueprint.js
@@ -32,12 +32,8 @@ const NullBlueprint = {
name: null,
// Advanced mode uses tasks
// @todo sort out which key is to be used
- tasks: [
- []
- ],
- plan: [
- []
- ],
+ tasks: [[]],
+ plan: [[]],
// Normal mode uses settings
settings: {
version: '1.0.0',
@@ -51,8 +47,4 @@ const NullBlueprint = {
isManual: false
}
-export {
- NullBlueprint,
- BlueprintMode,
- BlueprintStatus
-}
+export { NullBlueprint, BlueprintMode, BlueprintStatus }
diff --git a/config-ui/src/data/NullBlueprintConnection.js b/config-ui/src/data/NullBlueprintConnection.js
index 4a05d1fa..32a2ded4 100644
--- a/config-ui/src/data/NullBlueprintConnection.js
+++ b/config-ui/src/data/NullBlueprintConnection.js
@@ -24,11 +24,10 @@ const NullBlueprintConnection = {
repo: null,
options: null,
boardId: null,
- transformation: {
- },
- entities: [],
- },
- ],
+ transformation: {},
+ entities: []
+ }
+ ]
}
export { NullBlueprintConnection }
diff --git a/config-ui/src/data/NullConnection.js b/config-ui/src/data/NullConnection.js
index 02b003ed..6d174295 100644
--- a/config-ui/src/data/NullConnection.js
+++ b/config-ui/src/data/NullConnection.js
@@ -25,9 +25,7 @@ const NullConnection = {
username: null,
password: null,
createdAt: null,
- updatedAt: null,
+ updatedAt: null
}
-export {
- NullConnection
-}
+export { NullConnection }
diff --git a/config-ui/src/data/NullPipelineRun.js b/config-ui/src/data/NullPipelineRun.js
index 30114e68..51f2d731 100644
--- a/config-ui/src/data/NullPipelineRun.js
+++ b/config-ui/src/data/NullPipelineRun.js
@@ -22,9 +22,7 @@ const NullPipelineRun = {
updatedAt: null,
name: null,
blueprintId: 0,
- plan: [
- []
- ],
+ plan: [[]],
totalTasks: 0,
finishedTasks: 0,
beganAt: null,
@@ -35,6 +33,4 @@ const NullPipelineRun = {
stage: 1
}
-export {
- NullPipelineRun
-}
+export { NullPipelineRun }
diff --git a/config-ui/src/data/NullPipelineTask.js b/config-ui/src/data/NullPipelineTask.js
index 1fb871f6..371d72aa 100644
--- a/config-ui/src/data/NullPipelineTask.js
+++ b/config-ui/src/data/NullPipelineTask.js
@@ -21,8 +21,7 @@ const NullPipelineTask = {
createdAt: null,
updatedAt: null,
plugin: null,
- options: {
- },
+ options: {},
status: 'TASK_CREATED',
message: '',
progress: 0,
@@ -34,6 +33,4 @@ const NullPipelineTask = {
spentSeconds: 0
}
-export {
- NullPipelineTask
-}
+export { NullPipelineTask }
diff --git a/config-ui/src/data/NullProvider.js b/config-ui/src/data/NullProvider.js
index 6a4cb002..0c20822a 100644
--- a/config-ui/src/data/NullProvider.js
+++ b/config-ui/src/data/NullProvider.js
@@ -27,9 +27,9 @@ const NullProvider = {
// eslint-disable-next-line max-len
icon: <Icon icon='box' size={30} />, // Provider Icon
iconDashboard: <Icon icon='box' size={42} />, // Provider Icon on INTEGRATIONS Dashboard
- settings: ({ activeProvider, activeConnection, isSaving, setSettings }) => (<></>) // REACT Settings Component for Render
+ settings: ({ activeProvider, activeConnection, isSaving, setSettings }) => (
+ <></>
+ ) // REACT Settings Component for Render
}
-export {
- NullProvider
-}
+export { NullProvider }
diff --git a/config-ui/src/data/NullSettings.js b/config-ui/src/data/NullSettings.js
index 7d62f5be..5b58cec3 100644
--- a/config-ui/src/data/NullSettings.js
+++ b/config-ui/src/data/NullSettings.js
@@ -20,9 +20,7 @@ const NullSettings = {
JIRA_ISSUE_EPIC_KEY_FIELD: null,
JIRA_ISSUE_TYPE_MAPPING: null,
JIRA_ISSUE_STORYPOINT_FIELD: null,
- JIRA_BOARD_GITLAB_PROJECTS: null,
+ JIRA_BOARD_GITLAB_PROJECTS: null
}
-export {
- NullSettings
-}
+export { NullSettings }
diff --git a/config-ui/src/data/Providers.js b/config-ui/src/data/Providers.js
index daf1b57e..e26c1c3f 100644
--- a/config-ui/src/data/Providers.js
+++ b/config-ui/src/data/Providers.js
@@ -40,7 +40,7 @@ const Providers = {
AE: 'ae',
DBT: 'dbt',
STARROCKS: 'starrocks',
- TAPD: 'tapd',
+ TAPD: 'tapd'
}
const ProviderTypes = {
@@ -61,7 +61,7 @@ const ProviderLabels = {
AE: 'Analysis Engine (AE)',
DBT: 'Data Build Tool (DBT)',
STARROCKS: 'StarRocks',
- TAPD: 'TAPD',
+ TAPD: 'TAPD'
}
const ProviderConnectionLimits = {
@@ -91,7 +91,11 @@ const ProviderFormLabels = {
token: 'Access Token',
username: 'Username',
password: 'Password',
- rateLimitPerHour: <>Rate Limit <sup>(per hour)</sup></>
+ rateLimitPerHour: (
+ <>
+ Rate Limit <sup>(per hour)</sup>
+ </>
+ )
},
jenkins: {
name: 'Connection Name',
@@ -100,7 +104,11 @@ const ProviderFormLabels = {
token: 'Basic Auth Token',
username: 'Username',
password: 'Password',
- rateLimitPerHour: <>Rate Limit <sup>(per hour)</sup></>
+ rateLimitPerHour: (
+ <>
+ Rate Limit <sup>(per hour)</sup>
+ </>
+ )
},
tapd: {
name: 'Connection Name',
@@ -109,7 +117,11 @@ const ProviderFormLabels = {
token: 'Basic Auth Token',
username: 'Username',
password: 'Password',
- rateLimitPerHour: <>Rate Limit <sup>(per hour)</sup></>
+ rateLimitPerHour: (
+ <>
+ Rate Limit <sup>(per hour)</sup>
+ </>
+ )
},
jira: {
name: 'Connection Name',
@@ -121,7 +133,12 @@ const ProviderFormLabels = {
<>
Password
<Tooltip
- content={(<span>If you are using JIRA Cloud or JIRA Server, <br />your API Token should be used as password.</span>)}
+ content={
+ <span>
+ If you are using JIRA Cloud or JIRA Server, <br />
+ your API Token should be used as password.
+ </span>
+ }
intent='primary'
>
<Icon
@@ -137,8 +154,13 @@ const ProviderFormLabels = {
}}
/>
</Tooltip>
- </>),
- rateLimitPerHour: <>Rate Limit <sup>(per hour)</sup></>
+ </>
+ ),
+ rateLimitPerHour: (
+ <>
+ Rate Limit <sup>(per hour)</sup>
+ </>
+ )
},
github: {
name: 'Connection Name',
@@ -148,7 +170,12 @@ const ProviderFormLabels = {
<>
Auth Token(s)
<Tooltip
- content={(<span>Due to Github's rate limit, input more tokens, <br />comma separated, to accelerate data collection.</span>)}
+ content={
+ <span>
+ Due to Github's rate limit, input more tokens, <br />
+ comma separated, to accelerate data collection.
+ </span>
+ }
intent='primary'
>
<Icon
@@ -164,10 +191,15 @@ const ProviderFormLabels = {
}}
/>
</Tooltip>
- </>),
+ </>
+ ),
username: 'Username',
password: 'Password',
- rateLimitPerHour: <>Rate Limit <sup>(per hour)</sup></>
+ rateLimitPerHour: (
+ <>
+ Rate Limit <sup>(per hour)</sup>
+ </>
+ )
}
}
@@ -229,16 +261,28 @@ const ProviderFormPlaceholders = {
}
const ProviderIcons = {
- [Providers.GITLAB]: (w, h) => <GitlabProviderIcon width={w || 24} height={h || 24} />,
- [Providers.JENKINS]: (w, h) => <JenkinsProviderIcon width={w || 24} height={h || 24} />,
- [Providers.TAPD]: (w, h) => <TapdProviderIcon width={w || 24} height={h || 24} />,
- [Providers.JIRA]: (w, h) => <JiraProviderIcon width={w || 24} height={h || 24} />,
- [Providers.GITHUB]: (w, h) => <GitHubProviderIcon width={w || 24} height={h || 24} />,
+ [Providers.GITLAB]: (w, h) => (
+ <GitlabProviderIcon width={w || 24} height={h || 24} />
+ ),
+ [Providers.JENKINS]: (w, h) => (
+ <JenkinsProviderIcon width={w || 24} height={h || 24} />
+ ),
+ [Providers.TAPD]: (w, h) => (
+ <TapdProviderIcon width={w || 24} height={h || 24} />
+ ),
+ [Providers.JIRA]: (w, h) => (
+ <JiraProviderIcon width={w || 24} height={h || 24} />
+ ),
+ [Providers.GITHUB]: (w, h) => (
+ <GitHubProviderIcon width={w || 24} height={h || 24} />
+ ),
[Providers.REFDIFF]: (w, h) => <Icon icon='box' size={w || 24} />,
[Providers.GITEXTRACTOR]: (w, h) => <Icon icon='box' size={w || 24} />,
- [Providers.FEISHU]: (w, h) => <img src={FeishuIcon} width={w || 24} height={h || 24} />,
+ [Providers.FEISHU]: (w, h) => (
+ <img src={FeishuIcon} width={w || 24} height={h || 24} />
+ ),
[Providers.AE]: (w, h) => <Icon icon='box' size={w || 24} />,
- [Providers.DBT]: (w, h) => <Icon icon='box' size={w || 24} />,
+ [Providers.DBT]: (w, h) => <Icon icon='box' size={w || 24} />
}
const ConnectionStatus = {
diff --git a/config-ui/src/data/Task.js b/config-ui/src/data/Task.js
index 0564f743..89556c02 100644
--- a/config-ui/src/data/Task.js
+++ b/config-ui/src/data/Task.js
@@ -20,7 +20,7 @@ const StageStatus = {
PENDING: 'Pending',
COMPLETE: 'Complete',
FAILED: 'Failed',
- ACTIVE: 'In Progress',
+ ACTIVE: 'In Progress'
}
const TaskStatus = {
@@ -30,7 +30,7 @@ const TaskStatus = {
RUNNING: 'TASK_RUNNING',
CREATED: 'TASK_CREATED',
PENDING: 'TASK_CREATED',
- CANCELLED: 'TASK_CANCELLED',
+ CANCELLED: 'TASK_CANCELLED'
}
const TaskStatusLabels = {
@@ -40,21 +40,21 @@ const TaskStatusLabels = {
[TaskStatus.RUNNING]: 'In Progress',
[TaskStatus.CREATED]: 'Created (Pending)',
[TaskStatus.PENDING]: 'Created (Pending)',
- [TaskStatus.CANCELLED]: 'Cancelled',
+ [TaskStatus.CANCELLED]: 'Cancelled'
}
const StatusColors = {
PENDING: '#292B3F',
COMPLETE: '#4DB764',
FAILED: '#E34040',
- ACTIVE: '#7497F7',
+ ACTIVE: '#7497F7'
}
const StatusBgColors = {
PENDING: 'transparent',
COMPLETE: '#EDFBF0',
FAILED: '#FEEFEF',
- ACTIVE: '#F0F4FE',
+ ACTIVE: '#F0F4FE'
}
export {
diff --git a/config-ui/src/data/TestBlueprintDetail.js b/config-ui/src/data/TestBlueprintDetail.js
index 451943fe..72c6b4e1 100644
--- a/config-ui/src/data/TestBlueprintDetail.js
+++ b/config-ui/src/data/TestBlueprintDetail.js
@@ -16,16 +16,17 @@
*
*/
import React from 'react'
-import {
- Intent,
- Icon,
- Colors,
- Spinner
-} from '@blueprintjs/core'
+import { Intent, Icon, Colors, Spinner } from '@blueprintjs/core'
import { NullBlueprint } from '@/data/NullBlueprint'
import { Providers, ProviderIcons } from '@/data/Providers'
-import { StageStatus, TaskStatus, TaskStatusLabels, StatusColors, StatusBgColors } from '@/data/Task'
+import {
+ StageStatus,
+ TaskStatus,
+ TaskStatusLabels,
+ StatusColors,
+ StatusBgColors
+} from '@/data/Task'
const EMPTY_RUN = {
id: null,
@@ -37,7 +38,7 @@ const EMPTY_RUN = {
stage: 'Stage 1',
tasksTotal: 0,
tasksFinished: 0,
- error: null,
+ error: null
}
const TEST_BLUEPRINT = {
@@ -45,7 +46,7 @@ const TEST_BLUEPRINT = {
id: 1,
name: 'DevLake Daily Blueprint',
createdAt: new Date().toLocaleString(),
- updatedAt: new Date().toLocaleString(),
+ updatedAt: new Date().toLocaleString()
}
const TEST_CONNECTIONS = [
@@ -54,15 +55,15 @@ const TEST_CONNECTIONS = [
provider: Providers.GITHUB,
name: 'Merico GitHub',
dataScope: 'merico-dev/ake, merico-dev/lake-website',
- dataEntities: ['code', 'ticket', 'user'],
+ dataEntities: ['code', 'ticket', 'user']
},
{
id: 0,
provider: Providers.JIRA,
name: 'Merico JIRA',
dataScope: 'Sprint Dev Board, DevLake Sync Board ',
- dataEntities: ['ticket'],
- },
+ dataEntities: ['ticket']
+ }
]
// eslint-disable-next-line no-unused-vars
@@ -102,7 +103,7 @@ const TEST_BLUEPRINT_API_RESPONSE = {
'convertPullRequestLabels',
'convertPullRequestIssues',
'convertIssueComments',
- 'convertPullRequestComments',
+ 'convertPullRequestComments'
],
options: {
connectionId: 1,
@@ -116,18 +117,18 @@ const TEST_BLUEPRINT_API_RESPONSE = {
issueTypeIncident: '',
issueTypeRequirement: '',
prComponent: '',
- prType: '',
- },
- },
+ prType: ''
+ }
+ }
},
{
plugin: 'gitextractor',
subtasks: null,
options: {
repoId: 'github:GithubRepo:1:506830252',
- url: 'https://git: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@github.com/e2corporation/incubator-devlake.git',
- },
- },
+ url: 'https://git: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@github.com/e2corporation/incubator-devlake.git'
+ }
+ }
],
[
{
@@ -136,10 +137,10 @@ const TEST_BLUEPRINT_API_RESPONSE = {
options: {
tagsLimit: 10,
tagsOrder: '',
- tagsPattern: '',
- },
- },
- ],
+ tagsPattern: ''
+ }
+ }
+ ]
],
enable: true,
cronConfig: '0 0 * * *',
@@ -155,7 +156,7 @@ const TEST_BLUEPRINT_API_RESPONSE = {
entities: ['CODE', 'TICKET'],
options: {
owner: 'e2corporation',
- repo: 'incubator-devlake',
+ repo: 'incubator-devlake'
},
transformation: {
prType: '',
@@ -169,17 +170,17 @@ const TEST_BLUEPRINT_API_RESPONSE = {
refdiff: {
tagsOrder: '',
tagsPattern: '',
- tagsLimit: 10,
- },
- },
- },
- ],
- },
- ],
+ tagsLimit: 10
+ }
+ }
+ }
+ ]
+ }
+ ]
},
id: 1,
createdAt: '2022-07-11T10:23:38.908-04:00',
- updatedAt: '2022-07-11T10:23:38.908-04:00',
+ updatedAt: '2022-07-11T10:23:38.908-04:00'
}
const TEST_STAGES = [
@@ -200,7 +201,7 @@ const TEST_STAGES = [
subTasksCompleted: 25,
recordsFinished: 1234,
message: 'All 25 subtasks completed',
- status: TaskStatus.COMPLETE,
+ status: TaskStatus.COMPLETE
},
{
id: 0,
@@ -212,10 +213,10 @@ const TEST_STAGES = [
subTasksCompleted: 25,
recordsFinished: 1234,
message: 'All 25 subtasks completed',
- status: TaskStatus.COMPLETE,
- },
+ status: TaskStatus.COMPLETE
+ }
],
- stageHeaderClassName: 'complete',
+ stageHeaderClassName: 'complete'
},
{
id: 2,
@@ -234,7 +235,7 @@ const TEST_STAGES = [
subTasksCompleted: 25,
recordsFinished: 1234,
message: 'Subtask 5/25: Extracting Issues',
- status: TaskStatus.ACTIVE,
+ status: TaskStatus.ACTIVE
},
{
id: 0,
@@ -246,10 +247,10 @@ const TEST_STAGES = [
subTasksCompleted: 0,
recordsFinished: 0,
message: 'Invalid Board ID',
- status: TaskStatus.FAILED,
- },
+ status: TaskStatus.FAILED
+ }
],
- stageHeaderClassName: 'active',
+ stageHeaderClassName: 'active'
},
{
id: 3,
@@ -268,10 +269,10 @@ const TEST_STAGES = [
subTasksCompleted: 0,
recordsFinished: 0,
message: 'Subtasks pending',
- status: TaskStatus.CREATED,
- },
+ status: TaskStatus.CREATED
+ }
],
- stageHeaderClassName: 'pending',
+ stageHeaderClassName: 'pending'
},
{
id: 4,
@@ -290,11 +291,11 @@ const TEST_STAGES = [
subTasksCompleted: 0,
recordsFinished: 0,
message: 'Subtasks pending',
- status: TaskStatus.CREATED,
- },
+ status: TaskStatus.CREATED
+ }
],
- stageHeaderClassName: 'pending',
- },
+ stageHeaderClassName: 'pending'
+ }
]
const TEST_HISTORICAL_RUNS = [
@@ -305,7 +306,7 @@ const TEST_HISTORICAL_RUNS = [
statusIcon: <Icon icon='tick-circle' size={14} color={Colors.GREEN5} />,
startedAt: '05/25/2022 0:00 AM',
completedAt: '05/25/2022 0:15 AM',
- duration: '15 min',
+ duration: '15 min'
},
{
id: 1,
@@ -314,7 +315,7 @@ const TEST_HISTORICAL_RUNS = [
statusIcon: <Icon icon='tick-circle' size={14} color={Colors.GREEN5} />,
startedAt: '05/25/2022 0:00 AM',
completedAt: '05/25/2022 0:15 AM',
- duration: '15 min',
+ duration: '15 min'
},
{
id: 2,
@@ -323,7 +324,7 @@ const TEST_HISTORICAL_RUNS = [
statusIcon: <Icon icon='delete' size={14} color={Colors.RED5} />,
startedAt: '05/25/2022 0:00 AM',
completedAt: '05/25/2022 0:00 AM',
- duration: '0 min',
+ duration: '0 min'
},
{
id: 3,
@@ -332,7 +333,7 @@ const TEST_HISTORICAL_RUNS = [
statusIcon: <Icon icon='tick-circle' size={14} color={Colors.GREEN5} />,
startedAt: '05/25/2022 0:00 AM',
completedAt: '05/25/2022 0:15 AM',
- duration: '15 min',
+ duration: '15 min'
},
{
id: 4,
@@ -341,7 +342,7 @@ const TEST_HISTORICAL_RUNS = [
statusIcon: <Icon icon='tick-circle' size={14} color={Colors.GREEN5} />,
startedAt: '05/25/2022 0:00 AM',
completedAt: '05/25/2022 0:15 AM',
- duration: '15 min',
+ duration: '15 min'
},
{
id: 5,
@@ -350,8 +351,8 @@ const TEST_HISTORICAL_RUNS = [
statusIcon: <Icon icon='delete' size={14} color={Colors.RED5} />,
startedAt: '05/25/2022 0:00 AM',
completedAt: '05/25/2022 0:00 AM',
- duration: '0 min',
- },
+ duration: '0 min'
+ }
]
const TEST_RUN = {
@@ -365,7 +366,7 @@ const TEST_RUN = {
tasksTotal: 5,
tasksFinished: 8,
// totalTasks: 13,
- error: null,
+ error: null
}
export {
diff --git a/config-ui/src/data/collectionDefaults.js b/config-ui/src/data/collectionDefaults.js
index ffd3349c..e3925ca9 100644
--- a/config-ui/src/data/collectionDefaults.js
+++ b/config-ui/src/data/collectionDefaults.js
@@ -30,12 +30,12 @@ const collectionDefaults = {
jira: {
options: {
boardId: 8,
- connectionId: 1,
+ connectionId: 1
}
},
jenkins: {
options: {}
- },
+ }
}
module.exports = collectionDefaults
diff --git a/config-ui/src/data/integrations.jsx b/config-ui/src/data/integrations.jsx
index d4b35feb..78abcbd1 100644
--- a/config-ui/src/data/integrations.jsx
+++ b/config-ui/src/data/integrations.jsx
@@ -42,8 +42,17 @@ const integrationsData = [
multiConnection: true,
isBeta: false,
name: ProviderLabels.GITLAB,
- icon: <GitlabProvider className='providerIconSvg' width='30' height='30' style={{ float: 'left', marginTop: '5px' }} />,
- iconDashboard: <GitlabProvider className='providerIconSvg' width='40' height='40' />,
+ icon: (
+ <GitlabProvider
+ className='providerIconSvg'
+ width='30'
+ height='30'
+ style={{ float: 'left', marginTop: '5px' }}
+ />
+ ),
+ iconDashboard: (
+ <GitlabProvider className='providerIconSvg' width='40' height='40' />
+ ),
// @todo: relocated to ProviderTransformationSettings since v0.12.0
settings: {}
},
@@ -54,8 +63,17 @@ const integrationsData = [
multiConnection: true,
isBeta: false,
name: ProviderLabels.JENKINS,
- icon: <JenkinsProvider className='providerIconSvg' width='30' height='30' style={{ float: 'left', marginTop: '5px' }} />,
- iconDashboard: <JenkinsProvider className='providerIconSvg' width='40' height='40' />,
+ icon: (
+ <JenkinsProvider
+ className='providerIconSvg'
+ width='30'
+ height='30'
+ style={{ float: 'left', marginTop: '5px' }}
+ />
+ ),
+ iconDashboard: (
+ <JenkinsProvider className='providerIconSvg' width='40' height='40' />
+ ),
// @todo: relocated to ProviderTransformationSettings since v0.12.0
settings: {}
},
@@ -66,8 +84,17 @@ const integrationsData = [
multiConnection: true,
isBeta: true,
name: ProviderLabels.TAPD,
- icon: <TapdProvider className='providerIconSvg' width='30' height='30' style={{ float: 'left', marginTop: '5px' }} />,
- iconDashboard: <TapdProvider className='providerIconSvg' width='40' height='40' />,
+ icon: (
+ <TapdProvider
+ className='providerIconSvg'
+ width='30'
+ height='30'
+ style={{ float: 'left', marginTop: '5px' }}
+ />
+ ),
+ iconDashboard: (
+ <TapdProvider className='providerIconSvg' width='40' height='40' />
+ ),
// relocated to ProviderTransformationSettings since v0.12.0
settings: {}
},
@@ -78,8 +105,17 @@ const integrationsData = [
multiConnection: true,
isBeta: false,
name: ProviderLabels.JIRA,
- icon: <JiraProvider className='providerIconSvg' width='30' height='30' style={{ float: 'left', marginTop: '5px' }} />,
- iconDashboard: <JiraProvider className='providerIconSvg' width='40' height='40' />,
+ icon: (
+ <JiraProvider
+ className='providerIconSvg'
+ width='30'
+ height='30'
+ style={{ float: 'left', marginTop: '5px' }}
+ />
+ ),
+ iconDashboard: (
+ <JiraProvider className='providerIconSvg' width='40' height='40' />
+ ),
// relocated to ProviderTransformationSettings since v0.12.0
settings: {}
},
@@ -90,11 +126,20 @@ const integrationsData = [
multiConnection: true,
isBeta: false,
name: ProviderLabels.GITHUB,
- icon: <GitHubProvider className='providerIconSvg' width='30' height='30' style={{ float: 'left', marginTop: '5px' }} />,
- iconDashboard: <GitHubProvider className='providerIconSvg' width='40' height='40' />,
+ icon: (
+ <GitHubProvider
+ className='providerIconSvg'
+ width='30'
+ height='30'
+ style={{ float: 'left', marginTop: '5px' }}
+ />
+ ),
+ iconDashboard: (
+ <GitHubProvider className='providerIconSvg' width='40' height='40' />
+ ),
// relocated to ProviderTransformationSettings since v0.12.0
settings: {}
- },
+ }
]
const pluginsData = [
@@ -119,10 +164,7 @@ const pluginsData = [
iconDashboard: <Icon icon='box' size={32} />,
// relocated to ProviderTransformationSettings since v0.12.0
settings: {}
- },
+ }
]
-export {
- integrationsData,
- pluginsData
-}
+export { integrationsData, pluginsData }
diff --git a/config-ui/src/data/pipeline-config-samples/dbt.js b/config-ui/src/data/pipeline-config-samples/dbt.js
index 025e17f4..292a46d2 100644
--- a/config-ui/src/data/pipeline-config-samples/dbt.js
+++ b/config-ui/src/data/pipeline-config-samples/dbt.js
@@ -33,6 +33,4 @@ const dbtConfig = [
]
]
-export {
- dbtConfig
-}
+export { dbtConfig }
diff --git a/config-ui/src/data/pipeline-config-samples/default.js b/config-ui/src/data/pipeline-config-samples/default.js
index 3d34d317..2160caa1 100644
--- a/config-ui/src/data/pipeline-config-samples/default.js
+++ b/config-ui/src/data/pipeline-config-samples/default.js
@@ -48,6 +48,4 @@ const defaultConfig = [
]
]
-export {
- defaultConfig
-}
+export { defaultConfig }
diff --git a/config-ui/src/data/pipeline-config-samples/feishu.js b/config-ui/src/data/pipeline-config-samples/feishu.js
index 877b38fa..2fea6a30 100644
--- a/config-ui/src/data/pipeline-config-samples/feishu.js
+++ b/config-ui/src/data/pipeline-config-samples/feishu.js
@@ -24,6 +24,4 @@ const feishuConfig = [
]
]
-export {
- feishuConfig
-}
+export { feishuConfig }
diff --git a/config-ui/src/data/pipeline-config-samples/gitextractor.js b/config-ui/src/data/pipeline-config-samples/gitextractor.js
index 25448473..50f20ca0 100644
--- a/config-ui/src/data/pipeline-config-samples/gitextractor.js
+++ b/config-ui/src/data/pipeline-config-samples/gitextractor.js
@@ -27,6 +27,4 @@ const gitextractorConfig = [
]
]
-export {
- gitextractorConfig
-}
+export { gitextractorConfig }
diff --git a/config-ui/src/data/pipeline-config-samples/github.js b/config-ui/src/data/pipeline-config-samples/github.js
index 528009e2..b2bcc0d1 100644
--- a/config-ui/src/data/pipeline-config-samples/github.js
+++ b/config-ui/src/data/pipeline-config-samples/github.js
@@ -15,15 +15,17 @@
* limitations under the License.
*
*/
-const githubConfig = [[{
- plugin: 'github',
- options: {
- repo: 'lake',
- owner: 'merico-dev',
- connectionId: 1
- }
-}]]
+const githubConfig = [
+ [
+ {
+ plugin: 'github',
+ options: {
+ repo: 'lake',
+ owner: 'merico-dev',
+ connectionId: 1
+ }
+ }
+ ]
+]
-export {
- githubConfig
-}
+export { githubConfig }
diff --git a/config-ui/src/data/pipeline-config-samples/gitlab.js b/config-ui/src/data/pipeline-config-samples/gitlab.js
index e93c66cd..bfef619d 100644
--- a/config-ui/src/data/pipeline-config-samples/gitlab.js
+++ b/config-ui/src/data/pipeline-config-samples/gitlab.js
@@ -15,14 +15,16 @@
* limitations under the License.
*
*/
-const gitlabConfig = [[{
- plugin: 'gitlab',
- options: {
- projectId: 278964,
- connectionId: 1
- }
-}]]
+const gitlabConfig = [
+ [
+ {
+ plugin: 'gitlab',
+ options: {
+ projectId: 278964,
+ connectionId: 1
+ }
+ }
+ ]
+]
-export {
- gitlabConfig
-}
+export { gitlabConfig }
diff --git a/config-ui/src/data/pipeline-config-samples/jenkins.js b/config-ui/src/data/pipeline-config-samples/jenkins.js
index d6d98b57..5d409696 100644
--- a/config-ui/src/data/pipeline-config-samples/jenkins.js
+++ b/config-ui/src/data/pipeline-config-samples/jenkins.js
@@ -26,6 +26,4 @@ const jenkinsConfig = [
]
]
-export {
- jenkinsConfig
-}
+export { jenkinsConfig }
diff --git a/config-ui/src/data/pipeline-config-samples/jira.js b/config-ui/src/data/pipeline-config-samples/jira.js
index 511499fc..bb7a6ea2 100644
--- a/config-ui/src/data/pipeline-config-samples/jira.js
+++ b/config-ui/src/data/pipeline-config-samples/jira.js
@@ -28,6 +28,4 @@ const jiraConfig = [
]
]
-export {
- jiraConfig
-}
+export { jiraConfig }
diff --git a/config-ui/src/data/pipeline-config-samples/refdiff.js b/config-ui/src/data/pipeline-config-samples/refdiff.js
index 678a645e..21e79c0d 100644
--- a/config-ui/src/data/pipeline-config-samples/refdiff.js
+++ b/config-ui/src/data/pipeline-config-samples/refdiff.js
@@ -30,6 +30,4 @@ const refdiffConfig = [
]
]
-export {
- refdiffConfig
-}
+export { refdiffConfig }
diff --git a/config-ui/src/data/pipeline-config-samples/starrocks.js b/config-ui/src/data/pipeline-config-samples/starrocks.js
index dc8cde08..150e0efc 100644
--- a/config-ui/src/data/pipeline-config-samples/starrocks.js
+++ b/config-ui/src/data/pipeline-config-samples/starrocks.js
@@ -38,6 +38,4 @@ const starRocksConfig = [
]
]
-export {
- starRocksConfig
-}
+export { starRocksConfig }
diff --git a/config-ui/src/hooks/useBlueprintManager.jsx b/config-ui/src/hooks/useBlueprintManager.jsx
index aba30e5a..bb48d640 100644
--- a/config-ui/src/hooks/useBlueprintManager.jsx
+++ b/config-ui/src/hooks/useBlueprintManager.jsx
@@ -24,7 +24,10 @@ import cron from 'cron-validate'
import parser from 'cron-parser'
import { Intent } from '@blueprintjs/core'
-function useBlueprintManager (blueprintName = `BLUEPRINT WEEKLY ${Date.now()}`, initialConfiguration = {}) {
+function useBlueprintManager(
+ blueprintName = `BLUEPRINT WEEKLY ${Date.now()}`,
+ initialConfiguration = {}
+) {
const [isFetching, setIsFetching] = useState(false)
const [isSaving, setIsSaving] = useState(false)
const [isDeleting, setIsDeleting] = useState(false)
@@ -52,191 +55,262 @@ function useBlueprintManager (blueprintName = `BLUEPRINT WEEKLY ${Date.now()}`,
const [cronPresets, setCronPresets] = useState([
// eslint-disable-next-line max-len
- { id: 0, name: 'hourly', label: 'Hourly', cronConfig: '59 * * * *', description: 'At minute 59 on every day-of-week from Monday through Sunday.' },
+ {
+ id: 0,
+ name: 'hourly',
+ label: 'Hourly',
+ cronConfig: '59 * * * *',
+ description:
+ 'At minute 59 on every day-of-week from Monday through Sunday.'
+ },
// eslint-disable-next-line max-len
- { id: 1, name: 'daily', label: 'Daily', cronConfig: '0 0 * * *', description: 'At 00:00 (Midnight) on every day-of-week from Monday through Sunday.' },
- { id: 2, name: 'weekly', label: 'Weekly', cronConfig: '0 0 * * 1', description: 'At 00:00 (Midnight) on Monday.' },
- { id: 3, name: 'monthly', label: 'Monthly', cronConfig: '0 0 1 * *', description: 'At 00:00 (Midnight) on day-of-month 1.' },
+ {
+ id: 1,
+ name: 'daily',
+ label: 'Daily',
+ cronConfig: '0 0 * * *',
+ description:
+ 'At 00:00 (Midnight) on every day-of-week from Monday through Sunday.'
+ },
+ {
+ id: 2,
+ name: 'weekly',
+ label: 'Weekly',
+ cronConfig: '0 0 * * 1',
+ description: 'At 00:00 (Midnight) on Monday.'
+ },
+ {
+ id: 3,
+ name: 'monthly',
+ label: 'Monthly',
+ cronConfig: '0 0 1 * *',
+ description: 'At 00:00 (Midnight) on day-of-month 1.'
+ }
])
const [saveComplete, setSaveComplete] = useState(false)
const [deleteComplete, setDeleteComplete] = useState(false)
- const parseCronExpression = useCallback((expression, utc = true, additionalOptions = {}) => {
- if (expression.toLowerCase() === 'manual') {
- return {
- next: () => 'manual',
- prev: () => 'manual',
- }
- }
- return parser.parseExpression(expression, { utc, ...additionalOptions })
- }, [])
-
- const detectCronInterval = useCallback((cronConfig) => {
- if (cronConfig === 'manual') {
- return 'Manual'
- }
- return cronPresets.find(p => p.cronConfig === cronConfig)
- ? cronPresets.find(p => p.cronConfig === cronConfig).label
- : 'Custom'
- }, [cronPresets])
-
- const fetchAllBlueprints = useCallback(async (notify = false) => {
- try {
- setIsFetching(true)
- setErrors([])
- ToastNotification.clear()
- console.log('>> FETCHING ALL BLUEPRINTS')
- const b = await request.get(`${DEVLAKE_ENDPOINT}/blueprints`)
- console.log('>> RAW ALL BLUEPRINTS DATA FROM API...', b.data)
- const blueprints = [].concat(Array.isArray(b.data.blueprints) ? b.data.blueprints : []).map((blueprint, idx) => {
+ const parseCronExpression = useCallback(
+ (expression, utc = true, additionalOptions = {}) => {
+ if (expression.toLowerCase() === 'manual') {
return {
- ...blueprint,
- id: blueprint.id,
- enable: blueprint.enable,
- status: 0,
- nextRunAt: null, // @todo: calculate next run date
- interval: detectCronInterval(blueprint.cronConfig)
+ next: () => 'manual',
+ prev: () => 'manual'
}
- })
- if (notify) {
- ToastNotification.show({ message: 'Loaded all blueprints.', intent: 'success', icon: 'small-tick' })
}
- setBlueprints(blueprints)
- setBlueprintCount(b.data.count || blueprints.length)
- setIsFetching(false)
- } catch (e) {
- console.log('>> FAILED TO FETCH ALL CONNECTIONS', e)
- ToastNotification.show({ message: `Failed to Load Blueprints - ${e.message}`, intent: 'danger', icon: 'error' })
- setIsFetching(false)
- setBlueprints([])
- setBlueprintCount(0)
- setErrors([e.message])
- }
- }, [detectCronInterval])
+ return parser.parseExpression(expression, { utc, ...additionalOptions })
+ },
+ []
+ )
- const fetchBlueprint = useCallback((blueprintId = null) => {
- console.log('>> FETCHING BLUEPRINT....')
- try {
- setIsFetching(true)
- setErrors([])
- ToastNotification.clear()
- console.log('>> FETCHING BLUEPRINT #', blueprintId)
- const fetch = async () => {
- const b = await request.get(`${DEVLAKE_ENDPOINT}/blueprints/${blueprintId}`)
- const blueprintData = b.data
- console.log('>> RAW BLUEPRINT DATA FROM API...', b)
- setBlueprint(B => (b?.status === 200 ? {
- ...B,
- ...blueprintData,
- id: blueprintData.id,
- enable: blueprintData.enable,
- status: 0,
- nextRunAt: null, // @todo: calculate next run date
- interval: detectCronInterval(blueprintData.cronConfig)
- } : NullBlueprint))
- setErrors(b.status !== 200 ? [b.data] : [])
- setTimeout(() => {
- setIsFetching(false)
- }, 500)
+ const detectCronInterval = useCallback(
+ (cronConfig) => {
+ if (cronConfig === 'manual') {
+ return 'Manual'
}
- fetch()
- } catch (e) {
- setIsFetching(false)
- setBlueprint(null)
- setErrors([e.message])
- ToastNotification.show({ message: `${e}`, intent: 'danger', icon: 'error' })
- console.log('>> FAILED TO FETCH BLUEPRINT', e)
- }
- }, [detectCronInterval])
+ return cronPresets.find((p) => p.cronConfig === cronConfig)
+ ? cronPresets.find((p) => p.cronConfig === cronConfig).label
+ : 'Custom'
+ },
+ [cronPresets]
+ )
- const saveBlueprint = useCallback((blueprintId = null) => {
- console.log('>> SAVING BLUEPRINT....')
- try {
- setIsSaving(true)
- setErrors([])
- ToastNotification.clear()
- const detectCronConfig = () => {
- if (cronConfig === 'custom') {
- return customCronConfig
- // For "Manual" frequency, we'll save cronConfig as daily to comply with BE API expectation of valid cron
- // Once user re-enables an automated frequency, this will get overwritten
- } else if (cronConfig === 'manual') {
- return '0 0 * * *'
- } else {
- return cronConfig
+ const fetchAllBlueprints = useCallback(
+ async (notify = false) => {
+ try {
+ setIsFetching(true)
+ setErrors([])
+ ToastNotification.clear()
+ console.log('>> FETCHING ALL BLUEPRINTS')
+ const b = await request.get(`${DEVLAKE_ENDPOINT}/blueprints`)
+ console.log('>> RAW ALL BLUEPRINTS DATA FROM API...', b.data)
+ const blueprints = []
+ .concat(Array.isArray(b.data.blueprints) ? b.data.blueprints : [])
+ .map((blueprint, idx) => {
+ return {
+ ...blueprint,
+ id: blueprint.id,
+ enable: blueprint.enable,
+ status: 0,
+ nextRunAt: null, // @todo: calculate next run date
+ interval: detectCronInterval(blueprint.cronConfig)
+ }
+ })
+ if (notify) {
+ ToastNotification.show({
+ message: 'Loaded all blueprints.',
+ intent: 'success',
+ icon: 'small-tick'
+ })
}
+ setBlueprints(blueprints)
+ setBlueprintCount(b.data.count || blueprints.length)
+ setIsFetching(false)
+ } catch (e) {
+ console.log('>> FAILED TO FETCH ALL CONNECTIONS', e)
+ ToastNotification.show({
+ message: `Failed to Load Blueprints - ${e.message}`,
+ intent: 'danger',
+ icon: 'error'
+ })
+ setIsFetching(false)
+ setBlueprints([])
+ setBlueprintCount(0)
+ setErrors([e.message])
}
- const blueprintPayload = {
- name,
- cronConfig: detectCronConfig(),
- // @todo: refactor tasks ===> plan at higher levels
- plan: tasks,
- settings,
- enable: enable,
- mode,
- isManual
+ },
+ [detectCronInterval]
+ )
+
+ const fetchBlueprint = useCallback(
+ (blueprintId = null) => {
+ console.log('>> FETCHING BLUEPRINT....')
+ try {
+ setIsFetching(true)
+ setErrors([])
+ ToastNotification.clear()
+ console.log('>> FETCHING BLUEPRINT #', blueprintId)
+ const fetch = async () => {
+ const b = await request.get(
+ `${DEVLAKE_ENDPOINT}/blueprints/${blueprintId}`
+ )
+ const blueprintData = b.data
+ console.log('>> RAW BLUEPRINT DATA FROM API...', b)
+ setBlueprint((B) =>
+ b?.status === 200
+ ? {
+ ...B,
+ ...blueprintData,
+ id: blueprintData.id,
+ enable: blueprintData.enable,
+ status: 0,
+ nextRunAt: null, // @todo: calculate next run date
+ interval: detectCronInterval(blueprintData.cronConfig)
+ }
+ : NullBlueprint
+ )
+ setErrors(b.status !== 200 ? [b.data] : [])
+ setTimeout(() => {
+ setIsFetching(false)
+ }, 500)
+ }
+ fetch()
+ } catch (e) {
+ setIsFetching(false)
+ setBlueprint(null)
+ setErrors([e.message])
+ ToastNotification.show({
+ message: `${e}`,
+ intent: 'danger',
+ icon: 'error'
+ })
+ console.log('>> FAILED TO FETCH BLUEPRINT', e)
}
- console.log('>> DISPATCHING BLUEPRINT SAVE REQUEST', blueprintPayload)
- const run = async () => {
- // eslint-disable-next-line max-len
- // const b = await request.post(`${DEVLAKE_ENDPOINT}/blueprints`, blueprintPayload)
- const b = blueprintId
- ? await request.patch(`${DEVLAKE_ENDPOINT}/blueprints/${blueprintId}`, blueprintPayload)
- : await request.post(`${DEVLAKE_ENDPOINT}/blueprints`, blueprintPayload)
- console.log('>> RAW BLUEPRINT DATA FROM API...', b.data)
- const blueprintObject = {
- ...b.data,
- id: b.data?.id,
- enable: b.data?.enable,
- status: 0,
- nextRunAt: null,
- interval: detectCronInterval(b.data?.cronConfig)
+ },
+ [detectCronInterval]
+ )
+
+ const saveBlueprint = useCallback(
+ (blueprintId = null) => {
+ console.log('>> SAVING BLUEPRINT....')
+ try {
+ setIsSaving(true)
+ setErrors([])
+ ToastNotification.clear()
+ const detectCronConfig = () => {
+ if (cronConfig === 'custom') {
+ return customCronConfig
+ // For "Manual" frequency, we'll save cronConfig as daily to comply with BE API expectation of valid cron
+ // Once user re-enables an automated frequency, this will get overwritten
+ } else if (cronConfig === 'manual') {
+ return '0 0 * * *'
+ } else {
+ return cronConfig
+ }
}
- setBlueprint(blueprintObject)
- setSaveComplete(blueprintObject)
- if ([200, 201].includes(b.status)) {
- ToastNotification.show({
- message: `${blueprintId ? 'Updated' : 'Created'} Blueprint - ${name}.`,
- intent: Intent.SUCCESS,
- icon: 'small-tick'
- })
- } else {
- ToastNotification.show({
- message: `Blueprint Failure - ${b.message}`,
- intent: Intent.NONE,
- icon: 'error'
- })
+ const blueprintPayload = {
+ name,
+ cronConfig: detectCronConfig(),
+ // @todo: refactor tasks ===> plan at higher levels
+ plan: tasks,
+ settings,
+ enable: enable,
+ mode,
+ isManual
+ }
+ console.log('>> DISPATCHING BLUEPRINT SAVE REQUEST', blueprintPayload)
+ const run = async () => {
+ // eslint-disable-next-line max-len
+ // const b = await request.post(`${DEVLAKE_ENDPOINT}/blueprints`, blueprintPayload)
+ const b = blueprintId
+ ? await request.patch(
+ `${DEVLAKE_ENDPOINT}/blueprints/${blueprintId}`,
+ blueprintPayload
+ )
+ : await request.post(
+ `${DEVLAKE_ENDPOINT}/blueprints`,
+ blueprintPayload
+ )
+ console.log('>> RAW BLUEPRINT DATA FROM API...', b.data)
+ const blueprintObject = {
+ ...b.data,
+ id: b.data?.id,
+ enable: b.data?.enable,
+ status: 0,
+ nextRunAt: null,
+ interval: detectCronInterval(b.data?.cronConfig)
+ }
+ setBlueprint(blueprintObject)
+ setSaveComplete(blueprintObject)
+ if ([200, 201].includes(b.status)) {
+ ToastNotification.show({
+ message: `${
+ blueprintId ? 'Updated' : 'Created'
+ } Blueprint - ${name}.`,
+ intent: Intent.SUCCESS,
+ icon: 'small-tick'
+ })
+ } else {
+ ToastNotification.show({
+ message: `Blueprint Failure - ${b.message}`,
+ intent: Intent.NONE,
+ icon: 'error'
+ })
+ }
+ setTimeout(() => {
+ setIsSaving(false)
+ }, 500)
}
- setTimeout(() => {
- setIsSaving(false)
- }, 500)
+ run()
+ } catch (e) {
+ setIsSaving(false)
+ setErrors([e.message])
+ setSaveComplete(false)
+ console.log('>> FAILED TO SAVE BLUEPRINT!!', e)
}
- run()
- } catch (e) {
- setIsSaving(false)
- setErrors([e.message])
- setSaveComplete(false)
- console.log('>> FAILED TO SAVE BLUEPRINT!!', e)
- }
- }, [
- name,
- mode,
- settings,
- cronConfig,
- customCronConfig,
- tasks,
- enable,
- isManual,
- detectCronInterval
- ])
+ },
+ [
+ name,
+ mode,
+ settings,
+ cronConfig,
+ customCronConfig,
+ tasks,
+ enable,
+ isManual,
+ detectCronInterval
+ ]
+ )
const deleteBlueprint = useCallback(async (blueprint) => {
try {
setIsDeleting(true)
setErrors([])
console.log('>> TRYING TO DELETE BLUEPRINT...', blueprint)
- const d = await request.delete(`${DEVLAKE_ENDPOINT}/blueprints/${blueprint.id}`)
+ const d = await request.delete(
+ `${DEVLAKE_ENDPOINT}/blueprints/${blueprint.id}`
+ )
console.log('>> BLUEPRINT DELETED...', d)
setIsDeleting(false)
setDeleteComplete({ status: d.status, data: d.data || null })
@@ -259,120 +333,184 @@ function useBlueprintManager (blueprintName = `BLUEPRINT WEEKLY ${Date.now()}`,
return newCron
}
- const patchBlueprint = useCallback(async (blueprint, settings = {}, callback = () => {}) => {
- try {
- setIsSaving(true)
- setErrors([])
- console.log('>> TRYING TO PATCH BLUEPRINT...', blueprint)
- const p = await request.patch(`${DEVLAKE_ENDPOINT}/blueprints/${blueprint.id}`, settings)
- console.log('>> BLUEPRINT PATCHED...', p)
- setBlueprint(b => ({ ...b, ...p?.data, interval: detectCronInterval(p?.data?.cronConfig) }))
- setIsSaving(false)
- setSaveComplete({ status: p.status, data: p.data || null })
- callback(p)
- } catch (e) {
- setIsSaving(false)
- setSaveComplete(null)
- setErrors([e.message])
- callback(e)
- console.log('>> FAILED TO PATCH BLUEPRINT', e)
- }
- }, [detectCronInterval])
+ const patchBlueprint = useCallback(
+ async (blueprint, settings = {}, callback = () => {}) => {
+ try {
+ setIsSaving(true)
+ setErrors([])
+ console.log('>> TRYING TO PATCH BLUEPRINT...', blueprint)
+ const p = await request.patch(
+ `${DEVLAKE_ENDPOINT}/blueprints/${blueprint.id}`,
+ settings
+ )
+ console.log('>> BLUEPRINT PATCHED...', p)
+ setBlueprint((b) => ({
+ ...b,
+ ...p?.data,
+ interval: detectCronInterval(p?.data?.cronConfig)
+ }))
+ setIsSaving(false)
+ setSaveComplete({ status: p.status, data: p.data || null })
+ callback(p)
+ } catch (e) {
+ setIsSaving(false)
+ setSaveComplete(null)
+ setErrors([e.message])
+ callback(e)
+ console.log('>> FAILED TO PATCH BLUEPRINT', e)
+ }
+ },
+ [detectCronInterval]
+ )
- const getCronSchedule = useCallback((cronExpression, events = 5) => {
- let schedule = []
- try {
- const cS = cron(cronExpression).isValid() ? parseCronExpression(cronExpression) : parseCronExpression('0 0 * * *')
- schedule = cS ? new Array(events).fill(cS, 0, events).map(interval => interval.next().toString()) : []
- console.log('>>> NEW CRON SCHEDULE= ', schedule)
- } catch (e) {
- console.log('>> INVALID CRON SCHEDULE!', e)
- }
- return schedule
- }, [parseCronExpression])
+ const getCronSchedule = useCallback(
+ (cronExpression, events = 5) => {
+ let schedule = []
+ try {
+ const cS = cron(cronExpression).isValid()
+ ? parseCronExpression(cronExpression)
+ : parseCronExpression('0 0 * * *')
+ schedule = cS
+ ? new Array(events)
+ .fill(cS, 0, events)
+ .map((interval) => interval.next().toString())
+ : []
+ console.log('>>> NEW CRON SCHEDULE= ', schedule)
+ } catch (e) {
+ console.log('>> INVALID CRON SCHEDULE!', e)
+ }
+ return schedule
+ },
+ [parseCronExpression]
+ )
- const getNextRunDate = useCallback((cronExpression) => {
- return cronExpression && parseCronExpression(cronExpression).next().toString()
- }, [parseCronExpression])
+ const getNextRunDate = useCallback(
+ (cronExpression) => {
+ return (
+ cronExpression && parseCronExpression(cronExpression).next().toString()
+ )
+ },
+ [parseCronExpression]
+ )
- const getCronPreset = useCallback((presetName) => {
- return cronPresets.find(p => p.name === presetName)
- }, [cronPresets])
+ const getCronPreset = useCallback(
+ (presetName) => {
+ return cronPresets.find((p) => p.name === presetName)
+ },
+ [cronPresets]
+ )
- const getCronPresetByConfig = useCallback((cronConfig) => {
- return cronPresets.find(p => p.cronConfig === cronConfig)
- }, [cronPresets])
+ const getCronPresetByConfig = useCallback(
+ (cronConfig) => {
+ return cronPresets.find((p) => p.cronConfig === cronConfig)
+ },
+ [cronPresets]
+ )
- const activateBlueprint = useCallback((blueprint) => {
- console.log('>> ACTIVATING BLUEPRINT....')
- try {
- setIsSaving(true)
- setErrors([])
- ToastNotification.clear()
- const blueprintPayload = {
- name: blueprint.name,
- enable: true
- }
- console.log('>> DISPATCHING BLUEPRINT ACTIVATION REQUEST', blueprintPayload)
- const run = async () => {
- // eslint-disable-next-line max-len
- const activateB = await request.patch(`${DEVLAKE_ENDPOINT}/blueprints/${blueprint.id}`, blueprintPayload)
- console.log('>> RAW BLUEPRINT DATA FROM API...', activateB.data)
- // eslint-disable-next-line no-unused-vars
- const updatedBlueprint = activateB.data
- if (activateB.status === 200) {
- setBlueprint(b => ({ ...b, ...updatedBlueprint }))
- ToastNotification.show({ message: `Activated Blueprint - ${blueprint.name}.`, intent: Intent.SUCCESS, icon: 'small-tick' })
- } else {
- ToastNotification.show({ message: `Activation Failed ${activateB?.message || ''}`, intent: 'danger', icon: 'error' })
+ const activateBlueprint = useCallback(
+ (blueprint) => {
+ console.log('>> ACTIVATING BLUEPRINT....')
+ try {
+ setIsSaving(true)
+ setErrors([])
+ ToastNotification.clear()
+ const blueprintPayload = {
+ name: blueprint.name,
+ enable: true
+ }
+ console.log(
+ '>> DISPATCHING BLUEPRINT ACTIVATION REQUEST',
+ blueprintPayload
+ )
+ const run = async () => {
+ // eslint-disable-next-line max-len
+ const activateB = await request.patch(
+ `${DEVLAKE_ENDPOINT}/blueprints/${blueprint.id}`,
+ blueprintPayload
+ )
+ console.log('>> RAW BLUEPRINT DATA FROM API...', activateB.data)
+ // eslint-disable-next-line no-unused-vars
+ const updatedBlueprint = activateB.data
+ if (activateB.status === 200) {
+ setBlueprint((b) => ({ ...b, ...updatedBlueprint }))
+ ToastNotification.show({
+ message: `Activated Blueprint - ${blueprint.name}.`,
+ intent: Intent.SUCCESS,
+ icon: 'small-tick'
+ })
+ } else {
+ ToastNotification.show({
+ message: `Activation Failed ${activateB?.message || ''}`,
+ intent: 'danger',
+ icon: 'error'
+ })
+ }
+ setTimeout(() => {
+ setIsSaving(false)
+ fetchAllBlueprints()
+ }, 500)
}
- setTimeout(() => {
- setIsSaving(false)
- fetchAllBlueprints()
- }, 500)
+ run()
+ } catch (e) {
+ setIsSaving(false)
+ setErrors([e.message])
+ console.log('>> FAILED TO ACTIVATE BLUEPRINT!!', e)
}
- run()
- } catch (e) {
- setIsSaving(false)
- setErrors([e.message])
- console.log('>> FAILED TO ACTIVATE BLUEPRINT!!', e)
- }
- }, [fetchAllBlueprints])
+ },
+ [fetchAllBlueprints]
+ )
- const deactivateBlueprint = useCallback((blueprint) => {
- console.log('>> DEACTIVATING BLUEPRINT....')
- try {
- setIsSaving(true)
- setErrors([])
- ToastNotification.clear()
- const blueprintPayload = {
- enable: false
- }
- console.log('>> DISPATCHING BLUEPRINT ACTIVATION REQUEST', blueprintPayload)
- const run = async () => {
- // eslint-disable-next-line max-len
- const deactivateB = await request.patch(`${DEVLAKE_ENDPOINT}/blueprints/${blueprint.id}`, blueprintPayload)
- console.log('>> RAW BLUEPRINT DATA FROM API...', deactivateB.data)
- // eslint-disable-next-line no-unused-vars
- const updatedBlueprint = deactivateB.data
- if (deactivateB.status === 200) {
- setBlueprint(b => ({ ...b, ...updatedBlueprint }))
- ToastNotification.show({ message: `Deactivated Blueprint - ${blueprint.name}.`, intent: Intent.SUCCESS, icon: 'small-tick' })
- } else {
- ToastNotification.show({ message: `Deactivation Failed ${deactivateB?.message || ''}`, intent: 'danger', icon: 'error' })
+ const deactivateBlueprint = useCallback(
+ (blueprint) => {
+ console.log('>> DEACTIVATING BLUEPRINT....')
+ try {
+ setIsSaving(true)
+ setErrors([])
+ ToastNotification.clear()
+ const blueprintPayload = {
+ enable: false
}
- setTimeout(() => {
- setIsSaving(false)
- fetchAllBlueprints()
- }, 500)
+ console.log(
+ '>> DISPATCHING BLUEPRINT ACTIVATION REQUEST',
+ blueprintPayload
+ )
+ const run = async () => {
+ // eslint-disable-next-line max-len
+ const deactivateB = await request.patch(
+ `${DEVLAKE_ENDPOINT}/blueprints/${blueprint.id}`,
+ blueprintPayload
+ )
+ console.log('>> RAW BLUEPRINT DATA FROM API...', deactivateB.data)
+ // eslint-disable-next-line no-unused-vars
+ const updatedBlueprint = deactivateB.data
+ if (deactivateB.status === 200) {
+ setBlueprint((b) => ({ ...b, ...updatedBlueprint }))
+ ToastNotification.show({
+ message: `Deactivated Blueprint - ${blueprint.name}.`,
+ intent: Intent.SUCCESS,
+ icon: 'small-tick'
+ })
+ } else {
+ ToastNotification.show({
+ message: `Deactivation Failed ${deactivateB?.message || ''}`,
+ intent: 'danger',
+ icon: 'error'
+ })
+ }
+ setTimeout(() => {
+ setIsSaving(false)
+ fetchAllBlueprints()
+ }, 500)
+ }
+ run()
+ } catch (e) {
+ setIsSaving(false)
+ setErrors([e.message])
+ console.log('>> FAILED TO DEACTIVATE BLUEPRINT!!', e)
}
- run()
- } catch (e) {
- setIsSaving(false)
- setErrors([e.message])
- console.log('>> FAILED TO DEACTIVATE BLUEPRINT!!', e)
- }
- }, [fetchAllBlueprints])
+ },
+ [fetchAllBlueprints]
+ )
return {
blueprint,
diff --git a/config-ui/src/hooks/useBlueprintValidation.jsx b/config-ui/src/hooks/useBlueprintValidation.jsx
index b15c5de9..9bcb9a69 100644
--- a/config-ui/src/hooks/useBlueprintValidation.jsx
+++ b/config-ui/src/hooks/useBlueprintValidation.jsx
@@ -20,7 +20,7 @@ import parser from 'cron-parser'
import { BlueprintMode } from '@/data/NullBlueprint'
import { Providers } from '@/data/Providers'
-function useBlueprintValidation ({
+function useBlueprintValidation({
name,
cronConfig,
customCronConfig,
@@ -65,28 +65,31 @@ function useBlueprintValidation ({
}
}, [])
- const isValidJSON = useCallback((rawConfiguration) => {
- let isValid = false
- try {
- const parsedCode = parseJSON(rawConfiguration)
- isValid = parsedCode !== false
- // setValidationAdvancedError(null)
- } catch (e) {
- console.log('>> FORMAT CODE: Invalid Code Format!', e)
- isValid = false
- // setValidationAdvancedError(e.message)
- }
- // setIsValidConfiguration(isValid)
- return isValid
- }, [parseJSON])
+ const isValidJSON = useCallback(
+ (rawConfiguration) => {
+ let isValid = false
+ try {
+ const parsedCode = parseJSON(rawConfiguration)
+ isValid = parsedCode !== false
+ // setValidationAdvancedError(null)
+ } catch (e) {
+ console.log('>> FORMAT CODE: Invalid Code Format!', e)
+ isValid = false
+ // setValidationAdvancedError(e.message)
+ }
+ // setIsValidConfiguration(isValid)
+ return isValid
+ },
+ [parseJSON]
+ )
const validateNumericSet = useCallback((set = []) => {
- return Array.isArray(set) ? set.every(i => !isNaN(i)) : false
+ return Array.isArray(set) ? set.every((i) => !isNaN(i)) : false
}, [])
const validateRepositoryName = useCallback((projects = []) => {
const repoRegExp = /([a-z0-9_-]){2,}\/([a-z0-9_-]){2,}$/gi
- return projects.every(p => p.value.match(repoRegExp))
+ return projects.every((p) => p.value.match(repoRegExp))
}, [])
const valiateNonEmptySet = useCallback((set = []) => {
@@ -94,7 +97,7 @@ function useBlueprintValidation ({
}, [])
const validateUniqueObjectSet = useCallback((set = []) => {
- return [...new Set(set.map(o => JSON.stringify(o)))].length === set.length
+ return [...new Set(set.map((o) => JSON.stringify(o)))].length === set.length
}, [])
const validateBlueprintName = useCallback((name = '') => {
@@ -112,7 +115,10 @@ function useBlueprintValidation ({
errs.push('Blueprint Name: Name too short, 3 chars minimum.')
}
- if (mode !== null && ![BlueprintMode.NORMAL, BlueprintMode.ADVANCED].includes(mode)) {
+ if (
+ mode !== null &&
+ ![BlueprintMode.NORMAL, BlueprintMode.ADVANCED].includes(mode)
+ ) {
errs.push('Invalid / Unsupported Blueprint Mode Detected!')
}
@@ -121,12 +127,20 @@ function useBlueprintValidation ({
errs.push('Blueprint Cron: No Crontab schedule defined.')
}
- if (cronConfig && !['custom', 'manual'].includes(cronConfig) && !isValidCronExpression(cronConfig)) {
- errs.push('Blueprint Cron: Invalid Crontab Expression, unable to parse.')
+ if (
+ cronConfig &&
+ !['custom', 'manual'].includes(cronConfig) &&
+ !isValidCronExpression(cronConfig)
+ ) {
+ errs.push(
+ 'Blueprint Cron: Invalid Crontab Expression, unable to parse.'
+ )
}
if (cronConfig === 'custom' && !isValidCronExpression(customCronConfig)) {
- errs.push(`Blueprint Cron: Invalid Custom Expression, unable to parse. [${customCronConfig}]`)
+ errs.push(
+ `Blueprint Cron: Invalid Custom Expression, unable to parse. [${customCronConfig}]`
+ )
}
if (enable && tasks?.length === 0) {
@@ -140,42 +154,76 @@ function useBlueprintValidation ({
}
break
case 2:
- if (activeProvider?.id === Providers.JIRA && boards[activeConnection?.id]?.length === 0) {
+ if (
+ activeProvider?.id === Providers.JIRA &&
+ boards[activeConnection?.id]?.length === 0
+ ) {
errs.push('Boards: No Boards selected.')
}
- if (activeProvider?.id === Providers.GITHUB && projects[activeConnection?.id]?.length === 0) {
+ if (
+ activeProvider?.id === Providers.GITHUB &&
+ projects[activeConnection?.id]?.length === 0
+ ) {
errs.push('Projects: No Project Repsitories entered.')
}
- if (activeProvider?.id === Providers.GITHUB && !validateRepositoryName(projects[activeConnection?.id])) {
- errs.push('Projects: Only Git Repository Names are supported (username/repo).')
+ if (
+ activeProvider?.id === Providers.GITHUB &&
+ !validateRepositoryName(projects[activeConnection?.id])
+ ) {
+ errs.push(
+ 'Projects: Only Git Repository Names are supported (username/repo).'
+ )
}
- if (activeProvider?.id === Providers.GITHUB && !validateRepositoryName(projects[activeConnection?.id])) {
- errs.push('Projects: Only Git Repository Names are supported (username/repo).')
+ if (
+ activeProvider?.id === Providers.GITHUB &&
+ !validateRepositoryName(projects[activeConnection?.id])
+ ) {
+ errs.push(
+ 'Projects: Only Git Repository Names are supported (username/repo).'
+ )
}
- if (activeProvider?.id === Providers.GITHUB && !validateUniqueObjectSet(projects[activeConnection?.id])) {
+ if (
+ activeProvider?.id === Providers.GITHUB &&
+ !validateUniqueObjectSet(projects[activeConnection?.id])
+ ) {
errs.push('Projects: Duplicate project detected.')
}
if (entities[activeConnection?.id]?.length === 0) {
errs.push('Data Entities: No Data Entities selected.')
}
- if (activeProvider?.id === Providers.GITLAB && projects[activeConnection?.id]?.length === 0) {
+ if (
+ activeProvider?.id === Providers.GITLAB &&
+ projects[activeConnection?.id]?.length === 0
+ ) {
errs.push('Projects: No Project IDs entered.')
}
- if (activeProvider?.id === Providers.GITLAB && !validateUniqueObjectSet(projects[activeConnection?.id])) {
+ if (
+ activeProvider?.id === Providers.GITLAB &&
+ !validateUniqueObjectSet(projects[activeConnection?.id])
+ ) {
errs.push('Projects: Duplicate project detected.')
}
- connections.forEach(c => {
+ connections.forEach((c) => {
if (c.provider === Providers.JIRA && boards[c?.id]?.length === 0) {
errs.push(`${c.name} requires a Board`)
}
- if (c.provider === Providers.GITHUB && projects[c?.id]?.length === 0) {
+ if (
+ c.provider === Providers.GITHUB &&
+ projects[c?.id]?.length === 0
+ ) {
errs.push(`${c.name} requires Project Names`)
}
- if (c.provider === Providers.GITHUB && !validateRepositoryName(projects[c?.id])) {
+ if (
+ c.provider === Providers.GITHUB &&
+ !validateRepositoryName(projects[c?.id])
+ ) {
errs.push(`${c.name} has Invalid Project Repository`)
}
- if (c.provider === Providers.GITLAB && projects[c?.id]?.length === 0) {
+ if (
+ c.provider === Providers.GITLAB &&
+ projects[c?.id]?.length === 0
+ ) {
errs.push(`${c.name} requires Project IDs`)
}
if (entities[c?.id]?.length === 0) {
@@ -188,6 +236,7 @@ function useBlueprintValidation ({
}
setErrors(errs)
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [
name,
cronConfig,
@@ -208,13 +257,19 @@ function useBlueprintValidation ({
validateUniqueObjectSet
])
- const fieldHasError = useCallback((fieldId) => {
- return errors.some(e => e.includes(fieldId))
- }, [errors])
+ const fieldHasError = useCallback(
+ (fieldId) => {
+ return errors.some((e) => e.includes(fieldId))
+ },
+ [errors]
+ )
- const getFieldError = useCallback((fieldId) => {
- return errors.find(e => e.includes(fieldId))
- }, [errors])
+ const getFieldError = useCallback(
+ (fieldId) => {
+ return errors.find((e) => e.includes(fieldId))
+ },
+ [errors]
+ )
useEffect(() => {
// console.log('>>> BLUEPRINT FORM ERRORS...', errors)
diff --git a/config-ui/src/hooks/useConnectionManager.jsx b/config-ui/src/hooks/useConnectionManager.jsx
index b00cdd57..250391e5 100644
--- a/config-ui/src/hooks/useConnectionManager.jsx
+++ b/config-ui/src/hooks/useConnectionManager.jsx
@@ -31,11 +31,8 @@ import {
import useNetworkOfflineMode from '@/hooks/useNetworkOfflineMode'
-function useConnectionManager (
- {
- activeProvider,
- connectionId,
- },
+function useConnectionManager(
+ { activeProvider, connectionId },
updateMode = false
) {
const history = useHistory()
@@ -72,30 +69,38 @@ function useConnectionManager (
const [domainRepositories, setDomainRepositories] = useState([])
const [testedConnections, setTestedConnections] = useState([])
const connectionCount = useMemo(() => allConnections.length, [allConnections])
- const connectionLimitReached = useMemo(() =>
- sourceLimits[provider?.id] && connectionCount >= sourceLimits[provider?.id],
- [provider?.id, sourceLimits, connectionCount],
+ const connectionLimitReached = useMemo(
+ () =>
+ sourceLimits[provider?.id] &&
+ connectionCount >= sourceLimits[provider?.id],
+ [provider?.id, sourceLimits, connectionCount]
)
const [connectionsList, setConnectionsList] = useState([])
const [saveComplete, setSaveComplete] = useState(false)
const [deleteComplete, setDeleteComplete] = useState(false)
- const connectionTestPayload = useMemo(() => ({
- endpoint: endpointUrl,
- username,
- password,
- token,
- proxy
- }), [endpointUrl, password, proxy, token, username])
- const connectionSavePayload = useMemo(() => ({
- name,
- endpoint: endpointUrl,
- username,
- password,
- token,
- proxy,
- rateLimitPerHour,
- }), [name, endpointUrl, username, password, token, proxy, rateLimitPerHour])
+ const connectionTestPayload = useMemo(
+ () => ({
+ endpoint: endpointUrl,
+ username,
+ password,
+ token,
+ proxy
+ }),
+ [endpointUrl, password, proxy, token, username]
+ )
+ const connectionSavePayload = useMemo(
+ () => ({
+ name,
+ endpoint: endpointUrl,
+ username,
+ password,
+ token,
+ proxy,
+ rateLimitPerHour
+ }),
+ [name, endpointUrl, username, password, token, proxy, rateLimitPerHour]
+ )
const testConnection = useCallback(
(
@@ -110,7 +115,10 @@ function useConnectionManager (
setTestResponse(null)
const runTest = async () => {
- const payload = Object.keys(manualPayload).length > 0 ? manualPayload : connectionTestPayload
+ const payload =
+ Object.keys(manualPayload).length > 0
+ ? manualPayload
+ : connectionTestPayload
const testUrl = `${DEVLAKE_ENDPOINT}/plugins/${provider.id}/test`
console.log(
'INFO >>> Endpoint URL & Payload for testing: ',
@@ -120,8 +128,14 @@ function useConnectionManager (
const res = await request.post(testUrl, payload)
setTestResponse(res.data)
if ([Providers.GITHUB].includes(provider.id)) {
- console.log('>>> SETTING TOKEN TEST RESPONSE FOR TOKEN >>>', manualPayload?.token || connectionTestPayload.token)
- setAllTestResponses(tRs => ({ ...tRs, [manualPayload?.token]: res.data }))
+ console.log(
+ '>>> SETTING TOKEN TEST RESPONSE FOR TOKEN >>>',
+ manualPayload?.token || connectionTestPayload.token
+ )
+ setAllTestResponses((tRs) => ({
+ ...tRs,
+ [manualPayload?.token]: res.data
+ }))
}
if (res.data?.success && res.status === 200) {
setIsTesting(false)
@@ -130,7 +144,7 @@ function useConnectionManager (
ToastNotification.show({
message: `Connection test OK. ${payload.endpoint}`,
intent: 'success',
- icon: 'small-tick',
+ icon: 'small-tick'
})
}
onSuccess(res)
@@ -143,7 +157,7 @@ function useConnectionManager (
ToastNotification.show({
message: errorMessage,
intent: 'danger',
- icon: 'error',
+ icon: 'error'
})
}
onFail(res)
@@ -154,21 +168,27 @@ function useConnectionManager (
[provider?.id, connectionTestPayload]
)
- const notifyConnectionSaveSuccess = useCallback((message = 'Connection saved successfully.') => {
- ToastNotification.show({
- message: message,
- intent: 'success',
- icon: 'small-tick',
- })
- }, [])
+ const notifyConnectionSaveSuccess = useCallback(
+ (message = 'Connection saved successfully.') => {
+ ToastNotification.show({
+ message: message,
+ intent: 'success',
+ icon: 'small-tick'
+ })
+ },
+ []
+ )
- const notifyConnectionSaveFailure = useCallback((message = 'Connection failed to save, please try again.') => {
- ToastNotification.show({
- message: message,
- intent: 'danger',
- icon: 'error',
- })
- }, [])
+ const notifyConnectionSaveFailure = useCallback(
+ (message = 'Connection failed to save, please try again.') => {
+ ToastNotification.show({
+ message: message,
+ intent: 'danger',
+ icon: 'error'
+ })
+ },
+ []
+ )
const fetchConnection = useCallback(
(silent = false, notify = false, cId = null) => {
@@ -179,13 +199,17 @@ function useConnectionManager (
console.log('>> FETCHING CONNECTION SOURCE')
const fetch = async () => {
const f = await request.get(
- `${DEVLAKE_ENDPOINT}/plugins/${provider?.id}/connections/${cId || connectionId}`
+ `${DEVLAKE_ENDPOINT}/plugins/${provider?.id}/connections/${
+ cId || connectionId
+ }`
)
const connectionData = f.data
console.log('>> RAW CONNECTION DATA FROM API...', connectionData)
- setActiveConnection(new Connection({
- ...connectionData
- }))
... 13591 lines suppressed ...