From 31b5635339560d01bedb2a6f724f4ccddb91fb99 Mon Sep 17 00:00:00 2001 From: Raj Kamal Singh <1133322+raj-k-singh@users.noreply.github.com> Date: Fri, 17 Nov 2023 14:01:28 +0530 Subject: [PATCH 01/18] Chore: logs pipelines help in UI (#3971) * chore: logs pipelines: add help text with link to pipeline docs * chore: add logs pipelines list empty state with help video and link to docs * chore: minor cleanup * chore: update test snapshot * chore: dont show table & filter in pipeline lists empty state * chore: add sandbox constraints to logs pipelines empty state video iframe * chore: update test snapshot --- frontend/public/locales/en/pipeline.json | 1 + .../Layouts/Pipeline/CreatePipelineButton.tsx | 5 +- .../PipelinePage/Layouts/Pipeline/index.tsx | 4 - .../PipelineListsView/PipelineListsView.tsx | 100 +++++--- .../PipelineListsView/styles.scss | 13 + .../PipelinePageLayout.test.tsx.snap | 222 ++---------------- 6 files changed, 116 insertions(+), 229 deletions(-) create mode 100644 frontend/src/container/PipelinePage/PipelineListsView/styles.scss 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 ( +
+ +
+