+ {steps.map((step, index) => (
+
+ );
+};
+
+export default CaptureBreadcrumbs;
diff --git a/react-frontend/src/components/CaptureDataTable.tsx b/react-frontend/src/components/CaptureDataTable.tsx
new file mode 100644
index 00000000..28feba51
--- /dev/null
+++ b/react-frontend/src/components/CaptureDataTable.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+
+interface CaptureDataTableProps {
+ data: any;
+ onSelect: (selection: any) => void;
+ onDrillDown: (drilldownInfo: any) => void;
+}
+
+const CaptureDataTable: React.FC onSelect(index)}
+ >
+ {step.viewId}
+ {index < steps.length - 1 && /}
+
+ ))}
+ No data available
;
+ }
+
+ const columns = data.slices[0].columns || [];
+ const rows = data.slices[0].data || [];
+
+ return (
+
+
+
+
+
+ );
+};
+
+export default CaptureDataTable;
diff --git a/react-frontend/src/components/CaptureOverview.tsx b/react-frontend/src/components/CaptureOverview.tsx
new file mode 100644
index 00000000..8e221b78
--- /dev/null
+++ b/react-frontend/src/components/CaptureOverview.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Timeline } from '../store/slices/timelinesSlice';
+import { TimeWindow } from '../store/slices/captureSlice';
+
+interface CaptureOverviewProps {
+ filePath: string;
+ timelines: Timeline[];
+ timeWindow: TimeWindow;
+ filter: string | null;
+ drilldownInfoParam: string | null;
+ onToggleMetricTimeline: (metricId: string) => void;
+ onDrillDown: (drilldownInfo: any) => void;
+}
+
+const CaptureOverview: React.FC| + {column.name} + | + ))} +
|---|
| + {cell} + | + ))} +
+
+ );
+};
+
+export default CaptureOverview;
diff --git a/react-frontend/src/components/CapturePanel.tsx b/react-frontend/src/components/CapturePanel.tsx
new file mode 100644
index 00000000..7c7fb4f5
--- /dev/null
+++ b/react-frontend/src/components/CapturePanel.tsx
@@ -0,0 +1,178 @@
+/*
+Copyright (C) 2017 Draios inc.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License version 2 as
+published by the Free Software Foundation.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
+
+ Overview
+
+
+
+
+ onToggleMetricTimeline('cpu')}>
+ CPU Usage
+
+ onToggleMetricTimeline('memory')}>
+ Memory Usage
+
+ onToggleMetricTimeline('io')}>
+ I/O Activity
+
+ onToggleMetricTimeline('network')}>
+ Network Activity
+
+
+
+ );
+};
+
+export default CapturePanel;
diff --git a/react-frontend/src/components/CaptureView.tsx b/react-frontend/src/components/CaptureView.tsx
new file mode 100644
index 00000000..afaadeaa
--- /dev/null
+++ b/react-frontend/src/components/CaptureView.tsx
@@ -0,0 +1,89 @@
+/*
+Copyright (C) 2017 Draios inc.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License version 2 as
+published by the Free Software Foundation.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
+
+
+
+ console.log('Navigate to step:', index)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {isFilterActive && (
+
+
+ {children}
+
+
+
+ )}
+ {isSearchActive && (
+
+ {
+ if (e.key === 'Enter') {
+ handleApplyFilter(e.currentTarget.value);
+ }
+ }}
+ />
+
+
+
+
+ )}
+
+
+
+
+
+
+ {viewData && (
+
+
+ );
+};
+
+export default CaptureView;
diff --git a/react-frontend/src/components/Icon.tsx b/react-frontend/src/components/Icon.tsx
new file mode 100644
index 00000000..91c22e90
--- /dev/null
+++ b/react-frontend/src/components/Icon.tsx
@@ -0,0 +1,54 @@
+/*
+Copyright (C) 2017 Draios inc.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License version 2 as
+published by the Free Software Foundation.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
+ {timelines.length === 0 ? (
+
+ );
+};
+
+export default MetricTimelines;
diff --git a/react-frontend/src/components/PromiseWaitOverlay.tsx b/react-frontend/src/components/PromiseWaitOverlay.tsx
new file mode 100644
index 00000000..7625f04a
--- /dev/null
+++ b/react-frontend/src/components/PromiseWaitOverlay.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+
+interface PromiseWaitOverlayProps {
+ isLoading: boolean;
+ error: string | null;
+ children: React.ReactNode;
+}
+
+const PromiseWaitOverlay: React.FC
+ No timelines selected
+
+ ) : (
+
+ {timelines.map((timeline) => (
+
+ )}
+
+
+ ))}
+
+
+ {timeline.name}
+
+
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+
+ Loading...
+
+
+ );
+ }
+
+ return <>{children};
+};
+
+export default PromiseWaitOverlay;
diff --git a/react-frontend/src/components/SearchBox.tsx b/react-frontend/src/components/SearchBox.tsx
new file mode 100644
index 00000000..30ed388e
--- /dev/null
+++ b/react-frontend/src/components/SearchBox.tsx
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+
+interface SearchBoxProps {
+ name: string;
+ onSearch: (searchPattern: string) => void;
+ onCancel: () => void;
+}
+
+const SearchBox: React.FC
+
+ !
+ Error: {error}
+
+
+
+
+ );
+};
+
+export default SearchBox;
diff --git a/react-frontend/src/components/ViewList.tsx b/react-frontend/src/components/ViewList.tsx
new file mode 100644
index 00000000..ae318b0d
--- /dev/null
+++ b/react-frontend/src/components/ViewList.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+interface ViewListProps {
+ selectedViewId: string | null;
+ steps: any[];
+ onSelect: (viewId: string) => void;
+}
+
+const ViewList: React.FC
+
+ );
+};
+
+export default ViewList;
diff --git a/react-frontend/src/index.css b/react-frontend/src/index.css
new file mode 100644
index 00000000..ac380ab5
--- /dev/null
+++ b/react-frontend/src/index.css
@@ -0,0 +1 @@
+/* This file is intentionally empty. Styles are loaded from index.less */
diff --git a/react-frontend/src/index.tsx b/react-frontend/src/index.tsx
new file mode 100644
index 00000000..9dd1cc3b
--- /dev/null
+++ b/react-frontend/src/index.tsx
@@ -0,0 +1,38 @@
+/*
+Copyright (C) 2017 Draios inc.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License version 2 as
+published by the Free Software Foundation.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program. If not, see onSelect('overview')}
+ >
+ Overview
+
+ onSelect('dig')}
+ >
+ Dig
+
+ onSelect('echo')}
+ >
+ Echo
+
+
+
+
+
+ );
+};
+
+export default CapturePage;
diff --git a/react-frontend/src/pages/CaptureViewPage.tsx b/react-frontend/src/pages/CaptureViewPage.tsx
new file mode 100644
index 00000000..95337fa0
--- /dev/null
+++ b/react-frontend/src/pages/CaptureViewPage.tsx
@@ -0,0 +1,94 @@
+/*
+Copyright (C) 2017 Draios inc.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License version 2 as
+published by the Free Software Foundation.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
+
+ );
+};
+
+export default WelcomePage;
diff --git a/react-frontend/src/react-app-env.d.ts b/react-frontend/src/react-app-env.d.ts
new file mode 100644
index 00000000..c707ba9c
--- /dev/null
+++ b/react-frontend/src/react-app-env.d.ts
@@ -0,0 +1,11 @@
+///
+ 
+
+
+
+
+
+
+
+
+
+
+ Inspect
+
+
+ Sysdig Inspect works with trace files that have been collected by sysdig on a Linux system.
+
+
+ {isElectron() ? (
+
+ ) : (
+
+ )}
+
+
+ {isElectron() && (
+ or try one of the sample captures
+ )}
+
+