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
SigNoz · Nov 17, 2023 · 31b5635 · 31b5635
1 parent 75526c6
commit 31b5635
Show file tree

Hide file tree

Showing 6 changed files with 114 additions and 227 deletions.
diff --git 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
@@ -40,7 +40,10 @@ function CreatePipelineButton({
 
 	return (
 		<ButtonContainer>
-			<TextToolTip text={t('add_new_pipeline')} />
+			<TextToolTip
+				text={t('learn_more')}
+				url="https://signoz.io/docs/logs-pipelines/introduction/"
+			/>
 			{isAddNewPipelineVisible && (
 				<CustomButton
 					icon={<EditFilled />}

diff --git a/frontend/src/container/PipelinePage/Layouts/Pipeline/index.tsx b/frontend/src/container/PipelinePage/Layouts/Pipeline/index.tsx
@@ -3,15 +3,13 @@ import { Pipeline } from 'types/api/pipeline/def';
 
 import PipelineListsView from '../../PipelineListsView';
 import CreatePipelineButton from './CreatePipelineButton';
-import PipelinesSearchSection from './PipelinesSearchSection';
 
 function PipelinePageLayout({
 	refetchPipelineLists,
 	pipelineData,
 }: PipelinePageLayoutProps): JSX.Element {
 	const [isActionType, setActionType] = useState<string>();
 	const [isActionMode, setActionMode] = useState<string>('viewing-mode');
-	const [pipelineSearchValue, setPipelineSearchValue] = useState<string>('');
 
 	return (
 		<>
@@ -21,15 +19,13 @@ function PipelinePageLayout({
 				isActionMode={isActionMode}
 				pipelineData={pipelineData}
 			/>
-			<PipelinesSearchSection setPipelineSearchValue={setPipelineSearchValue} />
 			<PipelineListsView
 				isActionType={String(isActionType)}
 				setActionType={setActionType}
 				setActionMode={setActionMode}
 				isActionMode={isActionMode}
 				pipelineData={pipelineData}
 				refetchPipelineLists={refetchPipelineLists}
-				pipelineSearchValue={pipelineSearchValue}
 			/>
 		</>
 	);

diff --git 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,18 +47,51 @@ import {
 	getUpdatedRow,
 } from './utils';
 
+function PipelinesListEmptyState(): JSX.Element {
+	const { t } = useTranslation(['pipeline']);
+	return (
+		<div className="logs-pipelines-empty-state-centered-container">
+			<Card size="small">
+				<div className="logs-pipelines-empty-state-centered-container">
+					<iframe
+						className="logs-pipelines-empty-state-video-iframe"
+						sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
+						src="https://www.youtube.com/embed/OneENGNmLd0"
+						frameBorder="0"
+						allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+						allowFullScreen
+						title={t('learn_more')}
+					/>
+					<div>
+						<Typography>
+							{t('learn_more')}&nbsp;
+							<a
+								href="https://signoz.io/docs/logs-pipelines/introduction/"
+								target="_blank"
+								rel="noreferrer"
+							>
+								here
+							</a>
+						</Typography>
+					</div>
+				</div>
+			</Card>
+		</div>
+	);
+}
+
 function PipelineListsView({
 	isActionType,
 	setActionType,
 	isActionMode,
 	setActionMode,
 	pipelineData,
 	refetchPipelineLists,
-	pipelineSearchValue,
 }: PipelineListsViewProps): JSX.Element {
 	const { t } = useTranslation(['pipeline', 'common']);
 	const [modal, contextHolder] = Modal.useModal();
 	const { notifications } = useNotifications();
+	const [pipelineSearchValue, setPipelineSearchValue] = useState<string>('');
 	const [prevPipelineData, setPrevPipelineData] = useState<Array<PipelineData>>(
 		cloneDeep(pipelineData?.pipelines || []),
 	);
@@ -446,31 +482,40 @@ function PipelineListsView({
 				expandedPipelineData={expandedPipelineData()}
 				setExpandedPipelineData={setExpandedPipelineData}
 			/>
-			<Container>
-				<ModeAndConfiguration
-					isActionMode={isActionMode}
-					version={pipelineData?.version}
-				/>
-				<DndProvider backend={HTML5Backend}>
-					<Table
-						rowKey="id"
-						columns={columns}
-						expandedRowRender={expandedRowView}
-						expandable={expandableConfig}
-						components={tableComponents}
-						dataSource={visibleCurrPipelines}
-						onRow={onRowHandler}
-						footer={footer}
-						pagination={false}
-					/>
-				</DndProvider>
-				{showSaveButton && (
-					<SaveConfigButton
-						onSaveConfigurationHandler={onSaveConfigurationHandler}
-						onCancelConfigurationHandler={onCancelConfigurationHandler}
-					/>
-				)}
-			</Container>
+			{prevPipelineData?.length > 0 ? (
+				<>
+					<PipelinesSearchSection setPipelineSearchValue={setPipelineSearchValue} />
+					<Container>
+						<ModeAndConfiguration
+							isActionMode={isActionMode}
+							version={pipelineData?.version}
+						/>
+						<DndProvider backend={HTML5Backend}>
+							<Table
+								rowKey="id"
+								columns={columns}
+								expandedRowRender={expandedRowView}
+								expandable={expandableConfig}
+								components={tableComponents}
+								dataSource={visibleCurrPipelines}
+								onRow={onRowHandler}
+								footer={footer}
+								pagination={false}
+							/>
+						</DndProvider>
+						{showSaveButton && (
+							<SaveConfigButton
+								onSaveConfigurationHandler={onSaveConfigurationHandler}
+								onCancelConfigurationHandler={onCancelConfigurationHandler}
+							/>
+						)}
+					</Container>
+				</>
+			) : (
+				<Container>
+					<PipelinesListEmptyState />
+				</Container>
+			)}
 		</>
 	);
 }
@@ -482,7 +527,6 @@ interface PipelineListsViewProps {
 	setActionMode: (actionMode: ActionMode) => void;
 	pipelineData: Pipeline;
 	refetchPipelineLists: VoidFunction;
-	pipelineSearchValue: string;
 }
 
 interface ExpandRowConfig {

diff --git a/frontend/src/container/PipelinePage/PipelineListsView/styles.scss b/frontend/src/container/PipelinePage/PipelineListsView/styles.scss
@@ -0,0 +1,13 @@
+.logs-pipelines-empty-state-centered-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+
+.logs-pipelines-empty-state-video-iframe {
+  width: min(90vw, 640px);
+  height: min(68vw, 480px);
+  margin-bottom: 1em;
+}