diff --git a/frontend/public/locales/en/pipeline.json b/frontend/public/locales/en/pipeline.json index 3b0f7d8bda..f80f5ec772 100644 --- a/frontend/public/locales/en/pipeline.json +++ b/frontend/public/locales/en/pipeline.json @@ -5,6 +5,7 @@ "create": "Create", "reorder": "Reorder", "cancel": "Cancel", + "learn_more": "Learn more about pipelines", "reorder_pipeline": "Do you want to reorder pipeline?", "reorder_pipeline_description": "Logs are processed sequentially in processors and pipelines. Reordering it may change how data is processed by them.", "delete_pipeline": "Do you want to delete pipeline", diff --git a/frontend/src/container/PipelinePage/Layouts/Pipeline/CreatePipelineButton.tsx b/frontend/src/container/PipelinePage/Layouts/Pipeline/CreatePipelineButton.tsx index bcd4e2c2b2..c4884e735c 100644 --- a/frontend/src/container/PipelinePage/Layouts/Pipeline/CreatePipelineButton.tsx +++ b/frontend/src/container/PipelinePage/Layouts/Pipeline/CreatePipelineButton.tsx @@ -40,7 +40,10 @@ function CreatePipelineButton({ return ( - + {isAddNewPipelineVisible && ( } diff --git a/frontend/src/container/PipelinePage/Layouts/Pipeline/index.tsx b/frontend/src/container/PipelinePage/Layouts/Pipeline/index.tsx index 963196cb2d..f0d84bd475 100644 --- a/frontend/src/container/PipelinePage/Layouts/Pipeline/index.tsx +++ b/frontend/src/container/PipelinePage/Layouts/Pipeline/index.tsx @@ -3,7 +3,6 @@ import { Pipeline } from 'types/api/pipeline/def'; import PipelineListsView from '../../PipelineListsView'; import CreatePipelineButton from './CreatePipelineButton'; -import PipelinesSearchSection from './PipelinesSearchSection'; function PipelinePageLayout({ refetchPipelineLists, @@ -11,7 +10,6 @@ function PipelinePageLayout({ }: PipelinePageLayoutProps): JSX.Element { const [isActionType, setActionType] = useState(); const [isActionMode, setActionMode] = useState('viewing-mode'); - const [pipelineSearchValue, setPipelineSearchValue] = useState(''); return ( <> @@ -21,7 +19,6 @@ function PipelinePageLayout({ isActionMode={isActionMode} pipelineData={pipelineData} /> - ); diff --git a/frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx b/frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx index a9bf96d4dc..92bd0a40dc 100644 --- a/frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx +++ b/frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx @@ -1,5 +1,7 @@ +import './styles.scss'; + import { ExclamationCircleOutlined, PlusOutlined } from '@ant-design/icons'; -import { Modal, Table } from 'antd'; +import { Card, Modal, Table, Typography } from 'antd'; import { ExpandableConfig } from 'antd/es/table/interface'; import savePipeline from 'api/pipeline/post'; import { useNotifications } from 'hooks/useNotifications'; @@ -19,6 +21,7 @@ import { trackEvent } from 'utils/segmentAnalytics'; import { v4 } from 'uuid'; import { tableComponents } from '../config'; +import PipelinesSearchSection from '../Layouts/Pipeline/PipelinesSearchSection'; import AddNewPipeline from './AddNewPipeline'; import AddNewProcessor from './AddNewProcessor'; import { pipelineColumns } from './config'; @@ -44,6 +47,39 @@ import { getUpdatedRow, } from './utils'; +function PipelinesListEmptyState(): JSX.Element { + const { t } = useTranslation(['pipeline']); + return ( +
+ +
+