added list of os and configured the search bar and related checkbox

Signed-off-by: Apurv Sonawane <[email protected]>

react-frontend/src/components/Filter/DistroFilter.css

@@ -0,0 +1,40 @@
+.distro-filter-wrapper {
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+    gap: 15px;
+    justify-content: center;
+    position: relative;
+    width: 1181px;
+}
+
+.input_group {
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.input_group label {
+    padding-left: 10px;
+    font-weight: normal;
+    vertical-align: middle;
+}
+
+.input_group input[type="checkbox"] {
+    margin-right: 3px;
+}
+
+#chkAll {
+    margin-right: 2px;
+}
+
+.distro-filter-wrapper .input_group {
+    margin-bottom: 15px;
+}
+
+.distro-filter-wrapper input[type="text"] {
+    width: 100%;
+    padding: 8px;
+    margin-top: 5px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+}

react-frontend/src/components/Filter/DistroFilter.js

@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from 'react';
+import './DistroFilter.css';
+
+const DistroFilters = () => {
+    const [osList, setOsList] = useState([]);
+    const [selectedOS, setSelectedOS] = useState([]);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [searchDescription, setSearchDescription] = useState(false);
+    const [loading, setLoading] = useState(true); // New loading state
+
+    useEffect(() => {
+        const fetchOsList = async () => {
+            try {
+                const response = await fetch('https://sdt.openmainframeproject.org/sdt/getSupportedDistros');
+                if (!response.ok) {
+                    throw new Error('Failed to fetch OS list');
+                }
+                const data = await response.json();
+                const formattedOsList = Object.entries(data).map(([osName, versions]) => ({
+                    type: osName,
+                    description: Object.keys(versions).join(', ')
+                }));
+                setOsList(formattedOsList);
+                setLoading(false);
+            } catch (error) {
+                console.error('Error fetching OS list:', error);
+                setLoading(false);
+            }
+        };
+
+        fetchOsList();
+    }, []);
+
+    const toggleOS = (osName) => {
+        const index = selectedOS.indexOf(osName);
+        if (index === -1) {
+            setSelectedOS([...selectedOS, osName]);
+        } else {
+            setSelectedOS(selectedOS.filter(os => os !== osName));
+        }
+    };
+
+    const toggleAll = (event) => {
+        if (event.target.checked) {
+            const allOS = osList.map(os => os.type);
+            setSelectedOS(allOS);
+        } else {
+            setSelectedOS([]);
+        }
+    };
+
+    // Show loading indicator while fetching data
+    if (loading) {
+        return <div className="loading"><br/><br/></div>;
+    }
+
+    // Render component after data is loaded
+    return (
+        <div className="container distro-filter-wrapper">
+            <div className="row">
+                <div className="col-md-12">
+                    <div className="input_group">
+                        <div>Select Operating System:</div>
+                        <div>
+                            <label>
+                                <input
+                                    type="checkbox"
+                                    onChange={toggleAll}
+                                    checked={selectedOS.length === osList.length}
+                                    id="chkAll"
+                                />
+                                All
+                            </label>
+
+                            {osList.map((os, index) => (
+                                <label key={index}>
+                                    <input
+                                        type="checkbox"
+                                        onChange={() => toggleOS(os.type)}
+                                        checked={selectedOS.includes(os.type)}
+                                    />
+                                    {os.type}
+                                </label>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default DistroFilters;