diff --git a/ui_src/src/assets/images/backgroundTasks.svg b/ui_src/src/assets/images/backgroundTasks.svg new file mode 100644 index 000000000..6f09617ee --- /dev/null +++ b/ui_src/src/assets/images/backgroundTasks.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/ui_src/src/assets/images/backgroundTasksUI.svg b/ui_src/src/assets/images/backgroundTasksUI.svg new file mode 100644 index 000000000..eafa79449 --- /dev/null +++ b/ui_src/src/assets/images/backgroundTasksUI.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/ui_src/src/assets/images/bgTasksIcon.svg b/ui_src/src/assets/images/bgTasksIcon.svg new file mode 100644 index 000000000..c1a8a4299 --- /dev/null +++ b/ui_src/src/assets/images/bgTasksIcon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/ui_src/src/components/asyncTasks/index.js b/ui_src/src/components/asyncTasks/index.js index d5bf94b8c..1b76ab577 100644 --- a/ui_src/src/components/asyncTasks/index.js +++ b/ui_src/src/components/asyncTasks/index.js @@ -14,21 +14,21 @@ import './style.scss'; import React, { useContext, useEffect, useState } from 'react'; import { StringCodec, JSONCodec } from 'nats.ws'; -import { Divider, Popover } from 'antd'; +import { Divider, Popover, Badge } from 'antd'; import { parsingDate } from 'services/valueConvertor'; import { ApiEndpoints } from 'const/apiEndpoints'; -import { ReactComponent as AsyncIcon } from 'assets/images/asyncIcon.svg'; +import { ReactComponent as BgTasksIcon } from 'assets/images/bgTasksIcon.svg'; import { ReactComponent as TaskIcon } from 'assets/images/task.svg'; import { httpRequest } from 'services/http'; -import { ReactComponent as CollapseArrowIcon } from 'assets/images/collapseArrow.svg'; import { Context } from 'hooks/store'; import OverflowTip from 'components/tooltip/overflowtip'; -const AsyncTasks = ({ height, overView }) => { +const AsyncTasks = ({ overView, children }) => { const [state, dispatch] = useContext(Context); const [isOpen, setIsOpen] = useState(false); const [showMore, setShowMore] = useState(false); const [asyncTasks, setAsyncTasks] = useState([]); + const [runningTasks, setRunningTasks] = useState([]); useEffect(() => { getAsyncTasks(); @@ -90,6 +90,12 @@ const AsyncTasks = ({ height, overView }) => { }; }, [state.socket]); + useEffect(() => { + const running = asyncTasks?.filter((task) => task?.status === 'running'); + setRunningTasks(running); + dispatch({ type: 'SET_BACKGROUND_TASKS_COUNT', payload: running?.length || 0 }); + }, [asyncTasks]); + const getAsyncTasks = async () => { try { const data = await httpRequest('GET', ApiEndpoints.GET_ASYNC_TASKS); @@ -109,6 +115,11 @@ const AsyncTasks = ({ height, overView }) => { ((!showMore && index < 3) || showMore) && (
+ {task?.status === 'running' && ( + + + + )}
@@ -135,39 +146,37 @@ const AsyncTasks = ({ height, overView }) => { }; const getContent = () => { return ( -
-
- -

Async tasks

- - - -
-
{getItems()}
- {asyncTasks.length > 3 && ( -
setShowMore(!showMore)}> - + asyncTasks?.length > 0 && ( +
+
+ +

Background tasks

+ +
- )} -
+
{getItems()}
+ {asyncTasks.length > 3 && ( +
setShowMore(!showMore)}> + +
+ )} +
+ ) ); }; return ( - asyncTasks?.length > 0 && ( - -
-
- -
- - -
- + + {overView ? ( + 0 ? 'overview-tasks' : undefined}>{children} + ) : ( + runningTasks?.length > 0 && ( +
+
-
- - ) + ) + )} + ); }; export default AsyncTasks; diff --git a/ui_src/src/components/asyncTasks/style.scss b/ui_src/src/components/asyncTasks/style.scss index 7b5fddb58..d4a09d1c3 100644 --- a/ui_src/src/components/asyncTasks/style.scss +++ b/ui_src/src/components/asyncTasks/style.scss @@ -20,34 +20,26 @@ padding: 2px 5px; border-radius: 50%; } - .async-btn-container { - border-radius: 50px; - color: rgb(29, 29, 29); - background-color: rgb(255, 255, 255); - width: 200px; - height: 34px; - border-color: rgb(255, 255, 255); - font-size: 14px; - font-weight: bold; - font-family: Inter; - opacity: 1; - box-shadow: rgba(0, 0, 0, 0.21) 0px 1px 2px 0px; - line-height: 14px; + border-radius: 46px 0px 0px 46px; + background: linear-gradient(254deg, #ffc633 -44.11%, #61dfc6 17.78%, #6557ff 83.93%); + box-shadow: 0px 1.438px 2.875px 0px rgba(16, 24, 40, 0.05), 0px 2.875px 17.25px 0px rgba(0, 0, 0, 0.1); + width: 40px; + height: 40px; + position: absolute; + right: 0; + top: 120px; + z-index: 9999 !important; display: flex; align-items: center; justify-content: center; + padding: 10px 5px 10px 15px; + cursor: pointer; +} +.overview-tasks { cursor: pointer; - .async-btn { - display: flex; - align-items: center; - gap: 10px; - - img { - padding: 0px 10px; - } - } } + .async-title { color: #737373; margin-right: 5px; @@ -79,6 +71,12 @@ align-items: center; gap: 10px; padding: 20px; + position: relative; + .task-status { + position: absolute; + left: 8px; + top: 18px; + } p { margin-bottom: 0; } diff --git a/ui_src/src/components/datePicker/style.scss b/ui_src/src/components/datePicker/style.scss index 3eb3d7e6c..2ba76c360 100644 --- a/ui_src/src/components/datePicker/style.scss +++ b/ui_src/src/components/datePicker/style.scss @@ -38,7 +38,6 @@ z-index: 9999; } - -.ant-picker-cell-disabled::before { +.ant-picker-cell-disabled::before { background-color: white !important; -} \ No newline at end of file +} diff --git a/ui_src/src/components/loader/style.scss b/ui_src/src/components/loader/style.scss index 9330b5601..98ad6cd81 100644 --- a/ui_src/src/components/loader/style.scss +++ b/ui_src/src/components/loader/style.scss @@ -1,7 +1,6 @@ - -.loader-container{ +.loader-container { .gif-wrapper { - background-color: var(--white); + background-color: var(--white); position: fixed; z-index: 5; opacity: 0.5; @@ -10,13 +9,13 @@ } .memphis-gif { position: relative; - z-index: 999; - position: fixed; - top: 40%; - -ms-transform: translateY(-50%); - transform: translateY(-50%); - left: 50%; - -ms-transform: translateX(-50%); - transform: translateX(-50%); + z-index: 999; + position: fixed; + top: 40%; + -ms-transform: translateY(-50%); + transform: translateY(-50%); + left: 50%; + -ms-transform: translateX(-50%); + transform: translateX(-50%); } -} \ No newline at end of file +} diff --git a/ui_src/src/components/radioButton/style.scss b/ui_src/src/components/radioButton/style.scss index cb13b3900..8b28fa542 100644 --- a/ui_src/src/components/radioButton/style.scss +++ b/ui_src/src/components/radioButton/style.scss @@ -1,8 +1,8 @@ .radio-group { display: flex; - .radio-wrapper{ + .radio-wrapper { position: relative; - .cloud-only-tooltip{ + .cloud-only-tooltip { z-index: 3; right: 10px; top: -8px; @@ -45,7 +45,7 @@ font-size: 14px; color: #777777; } - .ant-radio-wrapper{ + .ant-radio-wrapper { width: 100%; height: 100%; padding: 10px; diff --git a/ui_src/src/components/searchInput/style.scss b/ui_src/src/components/searchInput/style.scss index bf3495b57..32f457e98 100644 --- a/ui_src/src/components/searchInput/style.scss +++ b/ui_src/src/components/searchInput/style.scss @@ -1,6 +1,6 @@ .search-input-container { position: relative; - z-index: 2; + // z-index: 2; align-self: stretch; } diff --git a/ui_src/src/components/sideBar/index.js b/ui_src/src/components/sideBar/index.js index adf504352..d05690f04 100644 --- a/ui_src/src/components/sideBar/index.js +++ b/ui_src/src/components/sideBar/index.js @@ -70,6 +70,7 @@ import Support from './support'; import LearnMore from 'components/learnMore'; import GetStarted from 'components/getStartedModal'; import Modal from 'components/modal'; +import AsyncTasks from 'components/asyncTasks'; import CreateStationForm from 'components/createStationForm'; import { ReactComponent as StationIcon } from 'assets/images/stationIcon.svg'; import CreateUserDetails from 'domain/users/createUserDetails'; @@ -463,6 +464,7 @@ function SideBar() { return (
+ {state.route !== 'overview' && }
*, + .station-name-overlow, + p { + color: initial; + } + + body { + filter: $color-invert-filter; + background-color: $color-background-dark; + color: $color-text-light; + + button, + .upgrade-button-wrapper, + .integration-name svg, + .memphis-gif svg, + .data-box svg, + .canvas-wrapper svg, + .circle-img svg, + .versions svg, + .logo-wrapper svg, + .schema-box-wrapper .is-used svg, + .station-meta svg, + .details-wrapper svg, + .item-wrap .icons svg, + .loader-uploading svg, + svg.lock-feature-icon, + .ant-modal-content button svg, + svg.icons-sidebar, + .station-overview-container svg, + .header-icon svg, + .header-img-container svg, + .integrate-header svg, + deatils downloads svg, + .git-repos-item .repo-item-icon-memphis, + .ant-drawer-header-title svg { + filter: $color-invert-filter-reverse; + background-color: initial; + color: initial; + } - .menu-item, .schema-name > *, .station-name-overlow, p { - color: initial; - } + svg.collapse-arrow-icon, + .collapse-arrow, + .messages-amount svg, + actions svg, + .ant-drawer-close svg { + filter: initial; + } - body { - filter: $color-invert-filter; - background-color: $color-background-dark; - color: $color-text-light; + .bottom-sidebar-icons .item-wrap svg path { + fill: $color-text-dark !important; + filter: $color-invert-filter !important; + } - button, .upgrade-button-wrapper, .integration-name svg, .memphis-gif svg, .data-box svg, - .canvas-wrapper svg, .circle-img svg, .versions svg, .logo-wrapper svg, .schema-box-wrapper .is-used svg, - .station-meta svg, .details-wrapper svg, .item-wrap .icons svg, .loader-uploading svg, - svg.lock-feature-icon, .ant-modal-content button svg, svg.icons-sidebar, .station-overview-container svg, - .header-icon svg, .header-img-container svg, .integrate-header svg, deatils downloads svg, - .git-repos-item .repo-item-icon-memphis, .ant-drawer-header-title svg { - filter: $color-invert-filter-reverse; - background-color: initial; - color: initial; - } + .cloud-modal .header .cloud-gradient, + .get-started-modal .title-wrapper .title span, + .new-function-modal .title-wrapper .title span { + background: -webkit-linear-gradient(249deg, #6557ff 39.68%, #6557ff 60.07%); + background-clip: text; + } - svg.collapse-arrow-icon, .collapse-arrow, .messages-amount svg, actions svg, .ant-drawer-close svg { - filter: initial; - } + button svg.lock-feature-icon { + filter: initial; + } - .bottom-sidebar-icons .item-wrap svg path, { - fill: $color-text-dark !important; - filter: $color-invert-filter !important; + .schema-box-wrapper .is-used .not-used, + actions button span svg { + filter: $color-invert-filter-reverse; + } } - .cloud-modal .header .cloud-gradient, .get-started-modal .title-wrapper .title span, - .new-function-modal .title-wrapper .title span { - background: -webkit-linear-gradient(249deg, #6557ff 39.68%, #6557ff 60.07%); - background-clip: text; + .ant-popover-inner, + .stream-lineage-container .title-wrapper .refresh-wrapper, + .stream-lineage-container .title-wrapper .actions-wrapper .close-wrapper, + .ant-picker-panel-container, + .softwate-updates-container .item-component, + .function-box-wrapper, + .MuiMenu-paper, + .async-btn-container, + .update-refresh .refresh-btn { + box-shadow: none; } - button svg.lock-feature-icon { - filter: initial; + .sidebar-container { + background-color: $color-background-light; + border-color: #cdcbc9; } - .schema-box-wrapper .is-used .not-used, actions button span svg { - filter: $color-invert-filter-reverse; + .app-container { + background-color: $color-background-light; } - } - - .ant-popover-inner, .stream-lineage-container .title-wrapper .refresh-wrapper, .stream-lineage-container .title-wrapper .actions-wrapper .close-wrapper, - .ant-picker-panel-container, .softwate-updates-container .item-component, .function-box-wrapper, .MuiMenu-paper, .async-btn-container, .update-refresh .refresh-btn { - box-shadow: none; - } - - .sidebar-container { - background-color: $color-background-light; - border-color: #CDCBC9; - } - .app-container { - background-color: $color-background-light; - } - - .overview-container .overview-wrapper .overview-components-wrapper, .station-box-container, .pubSub-list-container, .messages-container, - .station-overview-header .details .main-details, .station-overview-header .details .icons-wrapper, .station-overview-header .details .info-buttons { - background-color: $color-background-medium; - border: none; - box-shadow: none; - } - - .schema-container { - .schema-list { - .schema-box-wrapper { + .overview-container .overview-wrapper .overview-components-wrapper, + .station-box-container, + .pubSub-list-container, + .messages-container, + .station-overview-header .details .main-details, + .station-overview-header .details .icons-wrapper, + .station-overview-header .details .info-buttons { background-color: $color-background-medium; border: none; box-shadow: none; + } - & date { - border: none; - } - - header, type, tags { - border-color: $color-border-light; - } - - .field-wrapper div, .field-wrapper span { - color: $color-text-dark; + .schema-container { + .schema-list { + .schema-box-wrapper { + background-color: $color-background-medium; + border: none; + box-shadow: none; + + & date { + border: none; + } + + header, + type, + tags { + border-color: $color-border-light; + } + + .field-wrapper div, + .field-wrapper span { + color: $color-text-dark; + } + } } - } } - } - - .station-overview-container .pubSub-list-container .header, .ant-tabs-top > .ant-tabs-nav::before, .ant-tabs-bottom > .ant-tabs-nav::before, .ant-tabs-top > div > .ant-tabs-nav::before, .ant-tabs-bottom > div > .ant-tabs-nav::before, - .pubSub-list-container .coulmns-table, .station-overview-header .details .info-buttons .audit, { - border-color: $color-border-medium !important; - } - .configuration-list-container { - background-color: $color-background-light !important; - } - - .min-box span, { - color: $color-text-dark; - } - - .station-overview-container .waiting-placeholder .des { - color: $color-text-grey; - } - - .station-overview-container .waiting-placeholder .button-container span, { - color: $color-background-light !important; - } + .station-overview-container .pubSub-list-container .header, + .ant-tabs-top > .ant-tabs-nav::before, + .ant-tabs-bottom > .ant-tabs-nav::before, + .ant-tabs-top > div > .ant-tabs-nav::before, + .ant-tabs-bottom > div > .ant-tabs-nav::before, + .pubSub-list-container .coulmns-table, + .station-overview-header .details .info-buttons .audit { + border-color: $color-border-medium !important; + } - .station-function-overview .statistics-box-title, .main-header-h1 .length-list, { - color: $color-text-dark; - } + .configuration-list-container { + background-color: $color-background-light !important; + } - .data-box span { - color: $color-text-dark !important; - } + .min-box span { + color: $color-text-dark; + } - .messages-container .top-switcher-btn, .schema-box-wrapper, .ant-tooltip-inner, .ant-drawer-right > .ant-drawer-content-wrapper, - .function-container connectedRepos, .select-options, .ant-btn.ant-btn-primary { - box-shadow: none !important; - } + .station-overview-container .waiting-placeholder .des { + color: $color-text-grey; + } - .create-schema-wrapper { - .header span, .title-icon-img p.desc, .schema-type .des span { - color: $color-text-grey !important; + .station-overview-container .waiting-placeholder .button-container span { + color: $color-background-light !important; } - } - .generic-details-container .data-box svg circle { - fill: transparent; - } + .station-function-overview .statistics-box-title, + .main-header-h1 .length-list { + color: $color-text-dark; + } - .station-overview-header .bottomRow .average-title { - color: $color-text-grey !important; - } + .data-box span { + color: $color-text-dark !important; + } - svg.icons-sidebar { - fill: #fff !important; - } + .messages-container .top-switcher-btn, + .schema-box-wrapper, + .ant-tooltip-inner, + .ant-drawer-right > .ant-drawer-content-wrapper, + .function-container connectedRepos, + .select-options, + .ant-btn.ant-btn-primary { + box-shadow: none !important; + } - .tags-list-wrapper .edit-tags { - background-color: $color-border-medium !important; - } + .create-schema-wrapper { + .header span, + .title-icon-img p.desc, + .schema-type .des span { + color: $color-text-grey !important; + } + } - .function-container { - svg.attach-btn { - filter: $color-invert-filter-reverse; + .generic-details-container .data-box svg circle { + fill: transparent; } - label { - color: $color-text-dark; + .station-overview-header .bottomRow .average-title { + color: $color-text-grey !important; } - .ant-collapse-item { - background: transparent !important; + svg.icons-sidebar { + fill: #fff !important; } - } - .stream-lineage-container .title-wrapper .refresh-wrapper svg, .stream-lineage-container .title-wrapper .close-wrapper svg, { - color: $color-text-dark; - } + .tags-list-wrapper .edit-tags { + background-color: $color-border-medium !important; + } - .stations-container .err-stations-list .coulmns-table, .statistics-box, functions-header, .station-overview-container .details-wrapper.middle { - border-color: $color-border-medium !important; - } + .function-container { + svg.attach-btn { + filter: $color-invert-filter-reverse; + } - .overview-container .overview-wrapper .overview-components-wrapper .overview-components-header label, - .softwate-updates-container .item-component span, .sub-header-dls, .coulmns-table span, .created-by, - .retention-storage-box .description, .overview-components-header label, .logs-container, { - color: $color-text-grey !important; - } + label { + color: $color-text-dark; + } - .external-monitoring label, { - color: $color-text-grey; - } + .ant-collapse-item { + background: transparent !important; + } + } - .loader-container .gif-wrapper { - background: transparent !important; - } + .stream-lineage-container .title-wrapper .refresh-wrapper svg, + .stream-lineage-container .title-wrapper .close-wrapper svg { + color: $color-text-dark; + } - .ant-modal-content, .ant-modal-header, .search-input-container .ant-input-affix-wrapper, .ant-popover-content .ant-popover-inner, - .ant-drawer-content, .setting-items, .softwate-updates-container .item-component, .ant-popover-arrow-content, .ant-collapse-item, - .messages-container .top-switcher-btn.ms-active { - background-color: #E6EAE8 !important; - --antd-arrow-background-color: #E6EAE8 !important; - } + .stations-container .err-stations-list .coulmns-table, + .statistics-box, + functions-header, + .station-overview-container .details-wrapper.middle { + border-color: $color-border-medium !important; + } - .ant-drawer-body .type-created .capitalize, .ant-drawer-body .type-created .wrapper div, .ant-drawer-body .type-created .wrapper span { - color: $color-text-dark !important; - } + .overview-container .overview-wrapper .overview-components-wrapper .overview-components-header label, + .softwate-updates-container .item-component span, + .sub-header-dls, + .coulmns-table span, + .created-by, + .retention-storage-box .description, + .overview-components-header label, + .logs-container { + color: $color-text-grey !important; + } - .function-container { - .code-btn { - label { - color: #fff; - } + .external-monitoring label { + color: $color-text-grey; + } - img { - filter: brightness(100) invert(0); - } + .loader-container .gif-wrapper { + background: transparent !important; } - } + .ant-modal-content, + .ant-modal-header, + .search-input-container .ant-input-affix-wrapper, + .ant-popover-content .ant-popover-inner, + .ant-drawer-content, + .setting-items, + .softwate-updates-container .item-component, + .ant-popover-arrow-content, + .ant-collapse-item, + .messages-container .top-switcher-btn.ms-active { + background-color: #e6eae8 !important; + --antd-arrow-background-color: #e6eae8 !important; + } - .update-refresh .refresh-btn { - .refresh-icon-spin svg { - fill: #fff; + .ant-drawer-body .type-created .capitalize, + .ant-drawer-body .type-created .wrapper div, + .ant-drawer-body .type-created .wrapper span { + color: $color-text-dark !important; } - svg { - filter: $color-invert-filter-reverse; + .function-container { + .code-btn { + label { + color: #fff; + } - path { - stroke: #fff; - } + img { + filter: brightness(100) invert(0); + } + } } - } - .overview-container { - .stream-lineage-container { - background-color: $color-background-medium; + .update-refresh .refresh-btn { + .refresh-icon-spin svg { + fill: #fff; + } - .refresh-wrapper, .close-wrapper { - background: #E4E8E6; - } - } + svg { + filter: $color-invert-filter-reverse; - .play-pause-btn, .segment-button-wrapper, .overview-usage-container .usage-body .usageLeft-side .totalContainer { - background: #E4E8E6; + path { + stroke: #fff; + } + } } - } - - .create-schema-wrapper .create-schema-form .right-side, .functions-empty, .ant-table { - background: #E4E8E6; - } - .code-builder .ant-collapse-header { - background: darken(#E6EAE8, 1%); - } + .overview-container { + .stream-lineage-container { + background-color: $color-background-medium; - .function-box-wrapper { - background: $color-background-medium !important; - border-color: transparent; + .refresh-wrapper, + .close-wrapper { + background: #e4e8e6; + } + } - .button-container.uninstall-btn { - filter: $color-invert-filter-reverse; + .play-pause-btn, + .segment-button-wrapper, + .overview-usage-container .usage-body .usageLeft-side .totalContainer { + background: #e4e8e6; + } } - footer { - border-color: $color-border-medium; + .create-schema-wrapper .create-schema-form .right-side, + .functions-empty, + .ant-table { + background: #e4e8e6; } - .function-name > * { - color: $color-text-dark !important; + .code-builder .ant-collapse-header { + background: darken(#e6eae8, 1%); } - } - .cloud-modal-btns > * { - filter: $color-invert-filter !important; - } + .function-box-wrapper { + background: $color-background-medium !important; + border-color: transparent; - .softwate-updates-container .change-log label, .softwate-updates-container .delete-account-section button span { - color: #fff !important; - } - - .softwate-updates-container button.ant-btn.ant-btn-primary span { - color: #fff !important; - } - - .ant-modal-body .buttons .button-container:first-child, .new-function-modal .footer .button-container:first-child { - filter: $color-invert-filter !important; - } + .button-container.uninstall-btn { + filter: $color-invert-filter-reverse; + } - .station-box-container .data-labels { - color: lighten($color-text-dark, 30%); - } + footer { + border-color: $color-border-medium; + } - .schema-container .action-section .button-container:first-child, .schema-container .action-section .button-container:nth-child(n-1), - .right-side .button-container { - filter: $color-invert-filter !important; - } + .function-name > * { + color: $color-text-dark !important; + } + } - .right-side .button-container:last-child { - filter: initial!important; - } + .cloud-modal-btns > * { + filter: $color-invert-filter !important; + } - .video-player { - filter: $color-invert-filter-reverse !important; - } + .softwate-updates-container .change-log label, + .softwate-updates-container .delete-account-section button span { + color: #fff !important; + } - integ-item { - background: #D1CFCD; - } + .softwate-updates-container button.ant-btn.ant-btn-primary span { + color: #fff !important; + } - .stations-container .err-stations-list .rows-wrapper .even, .messages-container .list-wrapper .list .even .row-message, - .generic-list-wrapper .list .rows-wrapper .pubSub-row:nth-child(even), .messages-container .list-wrapper .even .row-message { - background: #D1CFCD; - } + .ant-modal-body .buttons .button-container:first-child, + .new-function-modal .footer .button-container:first-child { + filter: $color-invert-filter !important; + } - .stigg-plan-offering-container { - //background: lighten($color-background-dark, 80%); - } + .station-box-container .data-labels { + color: lighten($color-text-dark, 30%); + } - .message-wrapper .info-box { - background: #E4E8E6; - color: #000c17; - } + .schema-container .action-section .button-container:first-child, + .schema-container .action-section .button-container:nth-child(n-1), + .right-side .button-container { + filter: $color-invert-filter !important; + } - .retention-storage-box { - .header { - background: darken(#E6EAE8, 1%); + .right-side .button-container:last-child { + filter: initial !important; } - .content { - background: darken(#E6EAE8, 2%); + .video-player { + filter: $color-invert-filter-reverse !important; } - .selecte-check-box-wrapper .option-wrapper { - background: darken(#E6EAE8, 3%); - border: none; + integ-item { + background: #d1cfcd; } - .ant-radio-button-wrapper, .ant-input-number-handler-wrap { - background: darken(#E6EAE8, 1%); + .stations-container .err-stations-list .rows-wrapper .even, + .messages-container .list-wrapper .list .even .row-message, + .generic-list-wrapper .list .rows-wrapper .pubSub-row:nth-child(even), + .messages-container .list-wrapper .even .row-message { + background: #d1cfcd; } - } - .result-wrapper .result-container .result { - background: darken(#E6EAE8, 2%); - } + .stigg-plan-offering-container { + //background: lighten($color-background-dark, 80%); + } - .integration-guid-stepper .steps-content, .integration-guid-stepper .ant-collapse { - background: darken(#E6EAE8, 2%); - } + .message-wrapper .info-box { + background: #e4e8e6; + color: #000c17; + } - .stream-lineage-container .title-wrapper .actions-wrapper { - z-index: 9; - } + .retention-storage-box { + .header { + background: darken(#e6eae8, 1%); + } - .overview-components-header img { - filter: initial; - } + .content { + background: darken(#e6eae8, 2%); + } - .ms-function-card-inner, .station-function-overview functions-list .tab-functions-inner-add { - background: $color-background-light; - } + .selecte-check-box-wrapper .option-wrapper { + background: darken(#e6eae8, 3%); + border: none; + } - .connector-modal-wrapper .ant-select-selector { - img { - filter: initial; + .ant-radio-button-wrapper, + .ant-input-number-handler-wrap { + background: darken(#e6eae8, 1%); + } } - } - .select-options { - img { - filter: initial; + .result-wrapper .result-container .result { + background: darken(#e6eae8, 2%); } - background: darken(#E6EAE8, 2%); - } - - .badgeGreen { - background: #86e1ac; - } + .integration-guid-stepper .steps-content, + .integration-guid-stepper .ant-collapse { + background: darken(#e6eae8, 2%); + } - .badgeOrange { - background: #f5cfab; - } + .stream-lineage-container .title-wrapper .actions-wrapper { + z-index: 9; + } - .function-drawer-container { - .ant-tree { - background: transparent !important; + .overview-components-header img { + filter: initial; } - .drawer-header svg { - filter: $color-invert-filter-reverse; + .ms-function-card-inner, + .station-function-overview functions-list .tab-functions-inner-add { + background: $color-background-light; } - .action-section-btn .header-flex:nth-child(1), .action-section-btn .button-container:nth-child(2) button { - filter: none; + .connector-modal-wrapper .ant-select-selector { + img { + filter: initial; + } } - } - .users-container .user-action .button-container button { - filter: initial; - } + .select-options { + img { + filter: initial; + } - .ant-table-cell.ant-table-cell-row-hover { - background: darken(#E6EAE8, 3%) !important; - } + background: darken(#e6eae8, 2%); + } - .requests-container .usage-details .segment-data .tab-container, .stigg-customer-portal-subscriptions-overview, .stigg-payment-details-section-layout, - .stigg-invoices-section-layout { - background: darken(#E6EAE8, 2%) !important; - } + .badgeGreen { + background: #86e1ac; + } - .stigg-plan-offering-container, .stigg-period-picker-container { - background: darken(#E6EAE8, 2%); - } + .badgeOrange { + background: #f5cfab; + } - .pricing-plans-modal .emcdfp60 .stigg-plan-offering-container .stigg-plan-entitlements-container .stigg-plan-entitlements-title { - background: transparent !important; - } + .function-drawer-container { + .ant-tree { + background: transparent !important; + } - .pricing-plans-modal .emcdfp60 .stigg-plan-offering-container .stigg-header-wrapper .stigg-paywall-plan-button-layout button[disabled] { - filter: initial; - } + .drawer-header svg { + filter: $color-invert-filter-reverse; + } - .stream-lineage-container .title-wrapper .actions-wrapper .zoom-wrapper { - background: #E4E8E6; - box-shadow: none; - } + .action-section-btn .header-flex:nth-child(1), + .action-section-btn .button-container:nth-child(2) button { + filter: none; + } + } - .overview-integrations-container .integrations-list .integration-item { - border-color: $color-border-medium; - } + .users-container .user-action .button-container button { + filter: initial; + } - .ms-function-card-inner, .tab-functions-inner-add { - border-color: $color-border-light !important; - } + .ant-table-cell.ant-table-cell-row-hover { + background: darken(#e6eae8, 3%) !important; + } - .ant-form-item { - .ant-select-selector, input { - background-color: transparent !important; + .requests-container .usage-details .segment-data .tab-container, + .stigg-customer-portal-subscriptions-overview, + .stigg-payment-details-section-layout, + .stigg-invoices-section-layout { + background: darken(#e6eae8, 2%) !important; } - } - schema-details .footer .left-side .button-container:first-child, schema-details .header .button-container, .form-button .button-container:first-child, - .support-container .close-button .button-container:first-child { - filter: $color-invert-filter-reverse; - } + .stigg-plan-offering-container, + .stigg-period-picker-container { + background: darken(#e6eae8, 2%); + } - .anticon.anticon-close svg, .logs-wrapper .loader svg, .logs-wrapper .logs-loader svg { - filter: $color-invert-filter-reverse; - } + .pricing-plans-modal .emcdfp60 .stigg-plan-offering-container .stigg-plan-entitlements-container .stigg-plan-entitlements-title { + background: transparent !important; + } - .users-container .users-list-container .ant-table-thead .ant-table-cell { - background: #E6EAE8; - } + .pricing-plans-modal .emcdfp60 .stigg-plan-offering-container .stigg-header-wrapper .stigg-paywall-plan-button-layout button[disabled] { + filter: initial; + } - .logs-wrapper .placeholder p { - color: $color-text-grey !important; - } + .stream-lineage-container .title-wrapper .actions-wrapper .zoom-wrapper { + background: #e4e8e6; + box-shadow: none; + } - .log-content-wrapper log-header, .log-content-wrapper log-content { - border-color: $color-border-light !important; - } + .overview-integrations-container .integrations-list .integration-item { + border-color: $color-border-medium; + } - .logs-wrapper logs, .log-content-wrapper { - background: #D1CFCD; - box-shadow: none; - } + .ms-function-card-inner, + .tab-functions-inner-add { + border-color: $color-border-light !important; + } - .logs-wrapper .header-title-wrapper .button-container button, .collapse-footer .button-container:first-child button { - filter: none; - } + .ant-form-item { + .ant-select-selector, + input { + background-color: transparent !important; + } + } - .ant-form-item-control-input-content .button-container { - filter: none; - } + schema-details .footer .left-side .button-container:first-child, + schema-details .header .button-container, + .form-button .button-container:first-child, + .support-container .close-button .button-container:first-child { + filter: $color-invert-filter-reverse; + } - .logs-wrapper logs .logsl .even .log-payload { - background: $color-background-light; - } + .anticon.anticon-close svg, + .logs-wrapper .loader svg, + .logs-wrapper .logs-loader svg { + filter: $color-invert-filter-reverse; + } - .log-badge-container .badge.warn { - background-color: rgb(160 128 22); - } + .users-container .users-list-container .ant-table-thead .ant-table-cell { + background: #e6eae8; + } - .log-badge-container .badge.info { - background-color: #939595; - } + .logs-wrapper .placeholder p { + color: $color-text-grey !important; + } - .log-badge-container .error { - background-color: rgb(228 128 102); - } + .log-content-wrapper log-header, + .log-content-wrapper log-content { + border-color: $color-border-light !important; + } - input[type="text"], .ant-input-password, .ant-select.select, .install-copy { - border-color: $color-border-medium !important; - } + .logs-wrapper logs, + .log-content-wrapper { + background: #d1cfcd; + box-shadow: none; + } - .ant-form-item-control-input-content .button-container:first-child button { - filter: none; - } + .logs-wrapper .header-title-wrapper .button-container button, + .collapse-footer .button-container:first-child button { + filter: none; + } - .item-wrapper.ms-active .icon svg, .item-wrapper.item-wrapper-hovered .icon svg, { - filter: $color-invert-filter-reverse !important; - } + .ant-form-item-control-input-content .button-container { + filter: none; + } - .message-detail-item { - .ant-collapse-content-box { - background: darken(#E6EAE8, 2%); + .logs-wrapper logs .logsl .even .log-payload { + background: $color-background-light; } - label { - color: lighten($color-text-dark, 25%); + + .log-badge-container .badge.warn { + background-color: rgb(160 128 22); } - .content label:last-child { - color: $color-border-medium!important; + + .log-badge-container .badge.info { + background-color: #939595; } - } - .message-wrapper .message-detail-item .content { - color: lighten($color-text-dark, 25%); - } + .log-badge-container .error { + background-color: rgb(228 128 102); + } - .message-journey-container { - .canvas-wrapper svg { - filter: initial!important; + input[type='text'], + .ant-input-password, + .ant-select.select, + .install-copy { + border-color: $color-border-medium !important; } - .poison-producer, .poison-message, .consumer-group { - background: $color-background-medium; + + .ant-form-item-control-input-content .button-container:first-child button { + filter: none; } - .consumer-group .content-wrapper .details, .consumer-group .content-wrapper .consumers { - background: darken(#E6EAE8, 2%); + + .item-wrapper.ms-active .icon svg, + .item-wrapper.item-wrapper-hovered .icon svg { + filter: $color-invert-filter-reverse !important; } - .canvas-wrapper .producer { - stroke: rgba(101, 87, 255, 0.4); + + .message-detail-item { + .ant-collapse-content-box { + background: darken(#e6eae8, 2%); + } + label { + color: lighten($color-text-dark, 25%); + } + .content label:last-child { + color: $color-border-medium !important; + } } - .canvas-wrapper .consumer { - stroke: rgba(255, 54, 36, 0.4); + + .message-wrapper .message-detail-item .content { + color: lighten($color-text-dark, 25%); } - .consumer-group header { - background: #f18e85; + + .message-journey-container { + .canvas-wrapper svg { + filter: initial !important; + } + .poison-producer, + .poison-message, + .consumer-group { + background: $color-background-medium; + } + .consumer-group .content-wrapper .details, + .consumer-group .content-wrapper .consumers { + background: darken(#e6eae8, 2%); + } + .canvas-wrapper .producer { + stroke: rgba(101, 87, 255, 0.4); + } + .canvas-wrapper .consumer { + stroke: rgba(255, 54, 36, 0.4); + } + .consumer-group header { + background: #f18e85; + } } - } - .connector-name svg, .connector-options svg, .connector-options-selected svg, .ant-select-selection-item svg { - filter: initial!important; - } + .connector-name svg, + .connector-options svg, + .connector-options-selected svg, + .ant-select-selection-item svg { + filter: initial !important; + } - .ant-select-dropdown .ant-select-item-option-content .Memphis img { - filter: $color-invert-filter-reverse!important; - } + .ant-select-dropdown .ant-select-item-option-content .Memphis img { + filter: $color-invert-filter-reverse !important; + } - .overview-container .overview-components-wrapper .stations-row .lottie-cloud svg { - filter: $color-invert-filter-reverse; - } + .overview-container .overview-components-wrapper .stations-row .lottie-cloud svg { + filter: $color-invert-filter-reverse; + } - .scrollable-wrapper .used-stations .button-container button svg { - filter: $color-invert-filter-reverse!important; - } + .scrollable-wrapper .used-stations .button-container button svg { + filter: $color-invert-filter-reverse !important; + } - .setting-container .setting-items .tab-container.active .tab, .requests-container .usage-details .panel-container .requests-item .lavander { - background: rgb(101, 87, 255, .2)!important; - } + .setting-container .setting-items .tab-container.active .tab, + .requests-container .usage-details .panel-container .requests-item .lavander { + background: rgb(101, 87, 255, 0.2) !important; + } - .ant-input::placeholder, .ant-picker input::placeholder, .ant-select-selection-placeholder { - color: #939595; - } + .ant-input::placeholder, + .ant-picker input::placeholder, + .ant-select-selection-placeholder { + color: #939595; + } - .customSelect-add-user-button .button-container, .ant-picker-header { - filter: $color-invert-filter-reverse!important; - } + .customSelect-add-user-button .button-container, + .ant-picker-header { + filter: $color-invert-filter-reverse !important; + } - .ant-picker-header { - border-color: $color-text-grey!important; - } + .ant-picker-header { + border-color: $color-text-grey !important; + } - .ant-picker { - box-shadow: none!important; - input::placeholder { + .ant-picker { + box-shadow: none !important; + input::placeholder { + } } - } - .overview-container .graphview-section svg, .cloud-teaser { - filter: $color-invert-filter-reverse!important; - } + .overview-container .graphview-section svg, + .cloud-teaser { + filter: $color-invert-filter-reverse !important; + } - .stigg-customer-portal-subscriptions-overview { - .MuiBox-root button svg, .MuiBox-root button p { - filter: $color-invert-filter-reverse; + .stigg-customer-portal-subscriptions-overview { + .MuiBox-root button svg, + .MuiBox-root button p { + filter: $color-invert-filter-reverse; + } } - } - .message-wrapper .monaco-editor { - padding-top: 15px; - position: relative; - &:after { - position: absolute; - content: ''; - background: #fffffe; - height: 100%; - width: 15px; - right: 0; - top: 0; + .message-wrapper .monaco-editor { + padding-top: 15px; + position: relative; + &:after { + position: absolute; + content: ''; + background: #fffffe; + height: 100%; + width: 15px; + right: 0; + top: 0; + } } - } -} \ No newline at end of file + .async-btn-container { + filter: $color-invert-filter-reverse; + } +} diff --git a/ui_src/src/domain/functions/components/testFunctionModal/index.js b/ui_src/src/domain/functions/components/testFunctionModal/index.js index 1263e8499..6572015f5 100644 --- a/ui_src/src/domain/functions/components/testFunctionModal/index.js +++ b/ui_src/src/domain/functions/components/testFunctionModal/index.js @@ -162,6 +162,7 @@ const TestFunctionModal = ({ onCancel }) => { aria-haspopup="true" boxShadowStyle="float" disabled={isCheck?.length === 0} + isVisible={isCheck?.length !== 0} onClick={() => setIsDeleteModalOpen(true)} />
+ + +
+ +
+ Active background tasks + +

{state?.backgroundTasks?.toLocaleString() || 0}

+ + +
+
+
); diff --git a/ui_src/src/domain/overview/index.js b/ui_src/src/domain/overview/index.js index 15531de36..857298b70 100644 --- a/ui_src/src/domain/overview/index.js +++ b/ui_src/src/domain/overview/index.js @@ -47,7 +47,6 @@ import Button from 'components/button'; import LearnMore from 'components/learnMore'; import { Context } from 'hooks/store'; import Modal from 'components/modal'; -import AsyncTasks from 'components/asyncTasks'; import CloudModal from 'components/cloudModal'; import Throughput from './throughput'; import Copy from 'components/copy'; @@ -252,7 +251,6 @@ function OverView() {
- {!isCloud() && ( - +
diff --git a/ui_src/src/domain/schema/components/createSchema/style.scss b/ui_src/src/domain/schema/components/createSchema/style.scss index 7e9af50b5..826a009b4 100644 --- a/ui_src/src/domain/schema/components/createSchema/style.scss +++ b/ui_src/src/domain/schema/components/createSchema/style.scss @@ -1,6 +1,6 @@ .create-schema-wrapper { width: calc(100% - var(--main-container-sidebar-width)); - transition: .3s ease-in-out; + transition: 0.3s ease-in-out; position: absolute; min-width: 700px; height: 100%; @@ -117,6 +117,7 @@ } } .right-side { + z-index: 1; padding: 1vw; width: 55%; height: 100%; diff --git a/ui_src/src/domain/stationOverview/index.js b/ui_src/src/domain/stationOverview/index.js index 959a37d5c..ea7e20d44 100644 --- a/ui_src/src/domain/stationOverview/index.js +++ b/ui_src/src/domain/stationOverview/index.js @@ -44,7 +44,7 @@ const StationOverview = () => { const sortData = (data) => { data.audit_logs?.sort((a, b) => new Date(b.created_at) - new Date(a.created_at)); - data.messages?.sort((a, b) => new Date(b.created_at) - new Date(a.created_at)); + data.messages?.sort((a, b) => b.message_seq - a.message_seq); data.active_producers?.sort((a, b) => new Date(b.created_at) - new Date(a.created_at)); data.active_consumers?.sort((a, b) => new Date(b.created_at) - new Date(a.created_at)); data.destroyed_consumers?.sort((a, b) => new Date(b.created_at) - new Date(a.created_at)); diff --git a/ui_src/src/domain/stationOverview/stationObservabilty/messages/index.js b/ui_src/src/domain/stationOverview/stationObservabilty/messages/index.js index ea8359111..ece08ac45 100644 --- a/ui_src/src/domain/stationOverview/stationObservabilty/messages/index.js +++ b/ui_src/src/domain/stationOverview/stationObservabilty/messages/index.js @@ -460,7 +460,7 @@ const Messages = ({ referredFunction }) => { onClick={() => (isCheck.length === 0 ? modalPurgeFlip(true) : handleDrop())} /> )} - {tabValue === 'Dead-letter' && subTabValue === 'Unacked' && stationState?.stationSocketData?.poison_messages?.length > 0 && ( + {tabValue === 'Dead-letter' && subTabValue === 'Unacknowledged' && stationState?.stationSocketData?.poison_messages?.length > 0 && (