record.buildId}
+ columns={getColumns({ cancelBuild, rerunBuild, currentTime })}
+ dataSource={builds}
+ expandable={{
+ defaultExpandedRowKeys: isOpenFirstLog ? [builds[0].buildId] : [],
+ expandedRowRender,
+ expandIcon,
+ }}
+ />
+ );
+};
+
+Builds.propTypes = {
+ // TODO: detail the props
+ // eslint-disable-next-line
+ builds: PropTypes.array,
+ isOpenFirstLog: PropTypes.bool,
+};
+
+export default React.memo(Builds);
diff --git a/src/Routes/Tables/Marketplaces/Tabs/index.js b/src/Routes/Tables/Marketplaces/Tabs/index.js
new file mode 100644
index 000000000..093db9e83
--- /dev/null
+++ b/src/Routes/Tables/Marketplaces/Tabs/index.js
@@ -0,0 +1,256 @@
+import React, {
+ useCallback,
+ useEffect,
+ useState,
+ useMemo,
+ useRef,
+} from 'react';
+import { CheckOutlined, RedoOutlined } from '@ant-design/icons';
+import { ReactComponent as IconCompare } from 'images/compare.svg';
+import { Button, Checkbox, Modal } from 'antd';
+import Text from 'antd/lib/typography/Text';
+import {
+ Card,
+ JsonSwitch,
+ MdEditor,
+ Tabs,
+ JsonDiffTable,
+} from 'components/common';
+import { useReadme, useVersions } from 'hooks';
+import PropTypes from 'prop-types';
+import { OVERVIEW_TABS as TABS } from 'const';
+import { VersionsTable, AuditTrailTable } from 'components';
+import AlgorithmBuildsTable from './Builds';
+import usePath from '../usePath';
+
+const AlgorithmsTabs = ({ algorithm }) => {
+ const isFirstRender = useRef(true);
+ const { tabKey: activeKey, goTo } = usePath();
+ const setActiveKey = useCallback(
+ tab => goTo.overview({ nextTabKey: tab }),
+ [goTo]
+ );
+
+ const [versionsCompare, setVersionsCompare] = useState([]);
+ const [readme, setReadme] = useState();
+ const [isCompareVisible, setCompareVisible] = useState(false);
+ const [compareJsonPair, setCompareJsonPair] = useState({
+ json1: null,
+ json2: null,
+ });
+
+ const [isBuildFirstFail] = useState(
+ algorithm?.builds?.length > 0 && algorithm?.builds[0]?.status === 'failed'
+ );
+
+ const { asyncFetch, post } = useReadme(useReadme.TYPES.ALGORITHM);
+
+ const confirmPopupForceVersion = (
+ resError,
+ name,
+ version,
+ applyVersionCallback
+ ) => {
+ let isForce = false;
+ Modal.confirm({
+ title: 'WARNING : Version not upgrade',
+ content: (
+ <>
+
+ {resError.error.message}
+
+ {
+ isForce = e.target.checked;
+ }}>
+ Stop running algorithms.
+
+
+ ),
+ okText: 'Try again',
+ okType: 'danger',
+ cancelText: 'Cancel',
+ onCancel() {},
+ onOk() {
+ setTimeout(() => {
+ applyVersionCallback({ name, version, force: isForce });
+ }, 100);
+ },
+ });
+ };
+
+ const { dataSource, onApply, onDelete, onSaveAs, fetch } = useVersions({
+ nameId: algorithm.name,
+ confirmPopupForceVersion,
+ isFetch: true,
+ urlRestData: 'algorithms',
+ });
+
+ const onApplyApplyMarkdown = useCallback(() => {
+ post({ name: algorithm.name, readme });
+ }, [post, algorithm, readme]);
+
+ useEffect(() => {
+ if (activeKey !== TABS.DESCRIPTION) return;
+ asyncFetch({ name: algorithm.name }).then(setReadme);
+ }, [asyncFetch, algorithm, activeKey]);
+
+ const CompareJson = () => {
+ if (versionsCompare.length !== 2) {
+ Modal.warning({
+ title: 'Please select exactly 2 versions to compare',
+ });
+ return;
+ }
+
+ let json1 = dataSource.find(item => item.version === versionsCompare[0]);
+ let json2 = dataSource.find(item => item.version === versionsCompare[1]);
+
+ if (!json1 || !json2) {
+ Modal.error({
+ title: 'Error finding selected versions',
+ content: 'Could not locate both selected versions in dataSource.',
+ });
+ return;
+ }
+
+ if (json1?.algorithm?.modified > json2?.algorithm?.modified) {
+ [json1, json2] = [json2, json1];
+ }
+
+ setCompareJsonPair({ json1, json2 });
+ setCompareVisible(true);
+ };
+
+ const extra =
+ activeKey === TABS.DESCRIPTION ? (
+ false && (
+ }>
+ Apply Markdown
+
+ )
+ ) : activeKey === TABS.VERSIONS ? (
+ <>
+ }>
+ Refresh
+ {' '}
+ }>
+ Compare
+
+
+ ) : null;
+
+ useEffect(() => {
+ if (isFirstRender.current && isBuildFirstFail) {
+ isFirstRender.current = false;
+ setActiveKey(TABS.BUILDS);
+ }
+ }, [isBuildFirstFail, setActiveKey]);
+
+ const TabsItemsJson = useMemo(
+ () => [
+ {
+ label: TABS.VERSIONS,
+ key: TABS.VERSIONS,
+ children: (
+
+ ),
+ },
+ {
+ label: TABS.BUILDS,
+ key: TABS.BUILDS,
+ children: (
+
+ ),
+ },
+
+ {
+ label: TABS.INFO,
+ key: TABS.INFO,
+ forceRender: true,
+ children: ,
+ },
+ {
+ label: TABS.VERSIONSTIMETABLE,
+ key: TABS.VERSIONSTIMETABLE,
+ children: ,
+ },
+ {
+ label: TABS.DESCRIPTION,
+ key: TABS.DESCRIPTION,
+ children: ,
+ },
+ ],
+ [
+ activeKey,
+ algorithm,
+ dataSource,
+ isBuildFirstFail,
+ isFirstRender,
+ onApply,
+ onDelete,
+ onSaveAs,
+ readme,
+ ]
+ );
+
+ return (
+ <>
+
+
+
+
+ setCompareVisible(false)}
+ footer={[
+ ,
+ ]}
+ width={900}>
+
+ {compareJsonPair.json1 && compareJsonPair.json2 && (
+
+ )}
+
+
+
+ );
+};
+
+AlgorithmsTabs.propTypes = {
+ algorithm: PropTypes.shape({
+ name: PropTypes.string.isRequired,
+ builds: PropTypes.arrayOf(PropTypes.object),
+ version: PropTypes.string.isRequired,
+ auditTrail: PropTypes.arrayOf(PropTypes.object),
+ }).isRequired,
+};
+
+export default React.memo(AlgorithmsTabs);
diff --git a/src/Routes/Tables/Marketplaces/columns.js b/src/Routes/Tables/Marketplaces/columns.js
new file mode 100644
index 000000000..db7d43798
--- /dev/null
+++ b/src/Routes/Tables/Marketplaces/columns.js
@@ -0,0 +1,141 @@
+import React from 'react';
+import { WarningOutlined, SettingOutlined } from '@ant-design/icons';
+import { Tag, Tooltip, Typography } from 'antd';
+import { sorter } from 'utils/stringHelper';
+import { copyToClipboard } from 'utils';
+import { errorsCode } from '@hkube/consts';
+import AuditTrailAvatar from '../../../components/AuditTrailAvatar';
+import AlgorithmActions from './AlgorithmActions.react';
+/*
+
+import AlgorithmBuildStats from './AlgorithmBuildStats.react';
+import LastModified from './LastModified';
+*/
+
+// eslint-disable-next-line react/prop-types, no-unused-vars
+const HotWorkers = ({ minHotWorkers }) => {minHotWorkers};
+const Memory = mem => {mem || 'No Memory Specified'};
+const Cpu = cpu => {cpu || 'No CPU Assigned'};
+
+const Image = algorithmImage =>
+ algorithmImage ? (
+
+ copyToClipboard(algorithmImage)}>
+ {algorithmImage}
+
+
+ ) : (
+ No Image
+ );
+
+const Name = (name, record) =>
+ record?.unscheduledReason ? (
+
+ {name}
+
+ ) : (
+
+
+ copyToClipboard(name)}>
+ {name}
+
+
+
+ {record?.errors?.includes(errorsCode.NOT_LAST_VERSION_ALGORITHM) && (
+
+
+
+ )}
+ {record?.options?.devMode && (
+
+ {' '}
+
+ )}
+
+
+ );
+
+// const BuildStats = builds => ;
+const renderAction = (_, record) => ;
+
+const sortByName = (a, b) => sorter(a.name, b.name);
+const filterByImage = (value, record) => record.algorithmImage.includes(value);
+const sortByImage = (a, b) => sorter(a.algorithmImage, b.algorithmImage);
+const sortByMinHotWorkers = (a, b) => sorter(a.minHotWorkers, b.minHotWorkers);
+// const sortByLastModified = (a, b) => sorter(a.modified, b.modified);
+
+export default [
+ {
+ title: ``,
+ dataIndex: [`auditTrail`],
+ key: `auditTrail`,
+ width: `2%`,
+ render: auditTrail => ,
+ },
+ {
+ width: '12%',
+ title: 'App Name',
+ dataIndex: ['name'],
+ key: 'name',
+ sorter: sortByName,
+ render: Name,
+ },
+ {
+ width: '40%',
+ title: 'App Image',
+ dataIndex: ['algorithmImage'],
+ key: 'algorithmImage',
+ onFilter: filterByImage,
+ sorter: sortByImage,
+ render: Image,
+ },
+ /* {
+ width: '7%',
+ title: 'Builds Stats',
+ dataIndex: ['buildStats'],
+ key: 'builds',
+ render: BuildStats,
+ }, */
+ {
+ width: '5%',
+ title: 'CPU',
+ dataIndex: ['cpu'],
+ key: 'cpu',
+ render: Cpu,
+ },
+ {
+ width: '5%',
+ title: 'Mem',
+ dataIndex: ['mem'],
+ key: 'mem',
+ render: Memory,
+ },
+ {
+ width: '7%',
+ title: 'Min Hot Workers',
+ key: 'minHotWorkers',
+ sorter: sortByMinHotWorkers,
+ render: HotWorkers,
+ },
+ /* {
+ width: '10%',
+ title: 'Last modified',
+ // dataIndex: ['modified'],
+ key: 'modified',
+ sorter: sortByLastModified,
+ render: record => (
+
+ ),
+ }, */
+ {
+ width: '14%',
+ title: 'Action',
+ dataIndex: ['action'],
+ key: 'action',
+ render: renderAction,
+ },
+];
diff --git a/src/Routes/Tables/Marketplaces/index.js b/src/Routes/Tables/Marketplaces/index.js
new file mode 100644
index 000000000..5e93fb821
--- /dev/null
+++ b/src/Routes/Tables/Marketplaces/index.js
@@ -0,0 +1,131 @@
+import React, { useMemo } from 'react';
+import { selectors } from 'reducers';
+import { useSelector } from 'react-redux';
+import { SkeletonLoader } from 'components/common';
+import { Route, Routes } from 'react-router-dom';
+import { Table } from 'components';
+import { usePolling } from 'hooks';
+import { useQuery, useReactiveVar } from '@apollo/client';
+import { Space, Empty } from 'antd';
+import { instanceFiltersVar } from 'cache'; // algorithmsListVar
+import { ALGORITHMS_QUERY } from 'graphql/queries';
+import styled from 'styled-components';
+import OverviewDrawer from './OverviewDrawer';
+// import usePath from './usePath';
+import EditDrawer from './EditDrawer';
+import algorithmColumns from './columns';
+import AlgorithmsQueryTable from './AlgorithmsQueryTable';
+
+const rowKey = ({ name }) => `algorithm-${name}`;
+const TableAlgorithms = styled(Table)`
+ .ant-table-body {
+ min-height: 75vh;
+ }
+`;
+const MarketplacesTable = () => {
+ // const { goTo } = usePath();
+ /* const onRow = ({ name }) => ({
+ onDoubleClick: () => goTo.overview({ nextAlgorithmId: name }),
+ }); */
+
+ // const algorithmsList = useReactiveVar(algorithmsListVar);
+ const instanceFilter = useReactiveVar(instanceFiltersVar);
+ const { keycloakEnable } = useSelector(selectors.connection);
+
+ const query = useQuery(ALGORITHMS_QUERY);
+ usePolling(query, 3000);
+
+ /* const onSubmitFilter = useCallback(
+ values => {
+ if (!query.loading) {
+ if (values?.qAlgorithmName) {
+ const filterAlgorithm = query.data?.algorithms?.list.filter(item =>
+ item.name.includes(values.qAlgorithmName)
+ );
+ const list = [...filterAlgorithm];
+ algorithmsListVar(list);
+ } else {
+ const list = [...query.data?.algorithms?.list];
+
+ algorithmsListVar(
+ list.sort((x, y) => (x.modified < y.modified ? 1 : -1))
+ );
+ }
+ }
+ },
+ [query.data?.algorithms?.list]
+ );
+ */
+ const onSubmitFilter = () => {};
+
+ const getList = useMemo(() => {
+ const filterValue = instanceFilter.algorithms.qAlgorithmName;
+
+ let list = query.data?.algorithms?.list || [];
+
+ if (filterValue) {
+ list = list.filter(item => item.name.includes(filterValue));
+ }
+
+ list = list.filter(item => item.name.toLowerCase().startsWith('mark'));
+
+ return [...list].sort((x, y) => {
+ if (x.unscheduledReason && !y.unscheduledReason) return -1;
+ if (!x.unscheduledReason && y.unscheduledReason) return 1;
+ return x.modified < y.modified ? 1 : -1;
+ });
+ }, [instanceFilter.algorithms.qAlgorithmName, query.data]);
+
+ // if have keycloak remove avatar from columns job
+ const algorithmColumnsView = useMemo(() => {
+ if (!keycloakEnable) {
+ return algorithmColumns.slice(1);
+ }
+ return algorithmColumns;
+ }, [keycloakEnable]);
+
+ if (query.loading && query.data === undefined) return ;
+ if (query.error) return `Error! ${query.error.message}`;
+
+ return (
+ <>
+
+
+
+ No results match your search criteria}
+ />
+ ),
+ }}
+ />
+
+
+ }
+ />
+ } />
+
+
+ );
+};
+
+export default React.memo(MarketplacesTable);
diff --git a/src/Routes/Tables/Marketplaces/useActiveAlgorithm.js b/src/Routes/Tables/Marketplaces/useActiveAlgorithm.js
new file mode 100644
index 000000000..db4486c12
--- /dev/null
+++ b/src/Routes/Tables/Marketplaces/useActiveAlgorithm.js
@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+import {
+ ALGORITHM_BY_NAME_QUERY,
+ ALGORITHM_BUILDS_FRAGMENTS,
+} from 'graphql/queries';
+import { useQuery } from '@apollo/client';
+import { usePolling } from 'hooks';
+import usePath from './usePath';
+
+export default () => {
+ const { algorithmId } = usePath();
+
+ const queryAlgorithmsByName = useQuery(ALGORITHM_BY_NAME_QUERY, {
+ variables: {
+ name: algorithmId,
+ },
+ });
+ usePolling(queryAlgorithmsByName, 3000);
+
+ const algorithmBase = queryAlgorithmsByName.data?.algorithmsByName;
+ const queryAlgorithmBuilds = useQuery(ALGORITHM_BUILDS_FRAGMENTS, {
+ variables: {
+ algorithmName: algorithmId,
+ },
+ });
+ usePolling(queryAlgorithmBuilds, 3000);
+
+ const algorithmBuild = queryAlgorithmBuilds.data?.algorithmBuilds;
+
+ const activeAlgorithm = useMemo(
+ () => (algorithmBase ? { ...algorithmBase, builds: algorithmBuild } : null),
+ [algorithmBase, algorithmBuild]
+ );
+
+ return {
+ activeAlgorithm,
+ algorithmId,
+ };
+};
diff --git a/src/Routes/Tables/Marketplaces/usePath.js b/src/Routes/Tables/Marketplaces/usePath.js
new file mode 100644
index 000000000..6ed2de133
--- /dev/null
+++ b/src/Routes/Tables/Marketplaces/usePath.js
@@ -0,0 +1,49 @@
+import { useMemo } from 'react';
+import { useNavigate, useLocation, useParams } from 'react-router';
+import { OVERVIEW_TABS } from 'const';
+
+export default () => {
+ const { algorithmId, tabKey } = useParams();
+
+ const navigate = useNavigate();
+ const location = useLocation();
+ const paths = useMemo(
+ () => ({
+ root: '/marketplace',
+ overview: ({
+ nextAlgorithmId = algorithmId,
+ nextTabKey = OVERVIEW_TABS.VERSIONS,
+ } = {}) => `/marketplace/${nextAlgorithmId}/overview/${nextTabKey}`,
+ edit: ({ nextAlgorithmId = algorithmId } = {}) =>
+ `/marketplace/${nextAlgorithmId}/edit`,
+ }),
+ [algorithmId]
+ );
+
+ const goTo = useMemo(
+ () => ({
+ root: () => navigate({ pathname: paths.root, search: location.search }),
+ overview: ({
+ nextAlgorithmId = algorithmId,
+ nextTabKey = OVERVIEW_TABS.VERSIONS,
+ } = {}) =>
+ navigate({
+ pathname: paths.overview({ nextAlgorithmId, nextTabKey }),
+ search: location.search,
+ }),
+ edit: ({ nextAlgorithmId = algorithmId } = {}) =>
+ navigate({
+ pathname: paths.edit({ nextAlgorithmId }),
+ search: location.search,
+ }),
+ }),
+ [navigate, paths, algorithmId, location]
+ );
+
+ return {
+ algorithmId,
+ goTo,
+ paths,
+ tabKey,
+ };
+};
diff --git a/src/Routes/Tables/index.js b/src/Routes/Tables/index.js
index e26c36655..8f7e904de 100644
--- a/src/Routes/Tables/index.js
+++ b/src/Routes/Tables/index.js
@@ -5,6 +5,7 @@ import { useReactiveVar } from '@apollo/client';
import Jobs from './Jobs';
import QueueOrderJobsV2 from './QueueOrderJobsV2';
import AlgorithmsTable from './Algorithms';
+import MarketplacesTable from './Marketplaces';
import DriversTable from './Drivers';
import PipelinesTable from './Pipelines';
import WorkersTable from './Workers';
@@ -45,6 +46,10 @@ const Body = () => {
+ }>
+
+
+
} />
} />
diff --git a/src/const/drawer-info.js b/src/const/drawer-info.js
index 9c01093eb..c85427783 100644
--- a/src/const/drawer-info.js
+++ b/src/const/drawer-info.js
@@ -3,6 +3,7 @@ export const DRAWER_TITLES = {
DRIVERS: 'Drivers',
ADD_PIPELINE: 'Pipeline Wizard',
ADD_ALGORITHM: 'Algorithm Wizard',
+ ADD_MARKETPLACE: 'Marketplace Wizard',
ADD_DATASOURCE: ' Datasource wizard',
EDIT_DATASOURCE: ' Datasource editor',
RUN_RAW_PIPELINE: 'Run Pipeline',
@@ -15,6 +16,7 @@ export const DRAWER_TITLES = {
ALGORITHM_INFO: 'Algorithm Overview',
PIPELINE_INFO: 'Pipeline Overview',
ALGORITHM_EDIT: ' Algorithm editor',
+ MARKETPLACE_EDIT: ' Marketplace editor',
EDIT_PIPELINE: ' Pipeline editor',
PIPELINE_EXECUTE: 'Run Pipeline',
TF_RUN: 'TF Run',
diff --git a/src/const/drawer-size.js b/src/const/drawer-size.js
index 404fec41d..fdf63ef0b 100644
--- a/src/const/drawer-size.js
+++ b/src/const/drawer-size.js
@@ -1,6 +1,7 @@
export default {
ADD_PIPELINE: '85vw',
ADD_ALGORITHM: '160ch',
+ ADD_MARKETPLACE: '160ch',
ADD_DATASOURCE: '40vw',
EDIT_DATASOURCE: '50vw',
RUN_RAW_PIPELINE: '40vw',
diff --git a/src/const/sidebar-names.js b/src/const/sidebar-names.js
index 29591691a..11bd10c95 100644
--- a/src/const/sidebar-names.js
+++ b/src/const/sidebar-names.js
@@ -1,11 +1,13 @@
export const NEW_ITEM_PAGE = {
PIPELINE: 'pipelines',
ALGORITHM: 'algorithms',
+ MARKETPLACE: 'marketplace',
DATASOURCE: 'datasources',
};
export const NEW_ITEM = {
pipelines: 'Pipeline',
algorithms: 'Algorithm',
+ marketplace: '',
datasources: 'Datasource',
};
@@ -14,6 +16,7 @@ export const LEFT_SIDEBAR_NAMES = {
QUEUE: 'queue',
PIPELINES: 'pipelines',
ALGORITHMS: 'algorithms',
+ MARKETPLACE: 'marketplace',
WORKERS: 'workers',
DRIVERS: 'drivers',
DATASOURCES: 'datasources',
@@ -22,6 +25,7 @@ export const LEFT_SIDEBAR_NAMES = {
export const RIGHT_SIDEBAR_NAMES = {
ADD_PIPELINE: 'add-pipeline',
ADD_ALGORITHM: 'add-algorithm',
+ ADD_MARKETPLACE: 'add-marketplace',
ADD_DATASOURCE: 'add-datasource',
RUN_RAW_PIPELINE: 'run-raw-pipeline',
diff --git a/src/images/marketplace.svg b/src/images/marketplace.svg
new file mode 100644
index 000000000..8841dfa5a
--- /dev/null
+++ b/src/images/marketplace.svg
@@ -0,0 +1 @@
+