Added support for filtering by url in ingress routes and displayed co…

…unt of rows in ingress routes (#206)
spacecloud-io · Oct 8, 2020 · 677c771 · 677c771
1 parent fa8f311
commit 677c771
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 8 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mission-control",
-  "version": "0.19.4",
+  "version": "0.19.5",
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.1.0",

diff --git a/src/components/ingress-routing/FilterForm.jsx b/src/components/ingress-routing/FilterForm.jsx
@@ -5,7 +5,7 @@ import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
 
 const { Option } = Select;
 
-const formInitialValues = { services: [], targetHosts: [], requestHosts: [] }
+const formInitialValues = { services: [], requestUrls: [], targetHosts: [], requestHosts: [] }
 
 const FilterForm = ({ handleCancel, handleSubmit, serviceNames = [], initialValues = formInitialValues }) => {
   const [form] = Form.useForm();
@@ -40,6 +40,47 @@ const FilterForm = ({ handleCancel, handleSubmit, serviceNames = [], initialValu
             {serviceNames.map(val => <Option key={val}>{val}</Option>)}
           </Select>
         </Form.Item>
+        <FormItemLabel name="Filter by request URLs" />
+        <Form.List name="requestUrls">
+          {(fields, { add, remove }) => {
+            return (
+              <div>
+                {fields.map((field) => (
+                  <Form.Item key={field.key} style={{ marginBottom: 8 }}>
+                    <Form.Item
+                      {...field}
+                      validateTrigger={['onChange', 'onBlur']}
+                      rules={[
+                        {
+                          required: true,
+                          message: "Please input a request URL/prefix",
+                        }
+                      ]}
+                      noStyle
+                    >
+                      <Input placeholder="Request URL/prefix" style={{ width: "90%" }} />
+                    </Form.Item>
+                    <DeleteOutlined
+                      style={{ marginLeft: 16 }}
+                      onClick={() => {
+                        remove(field.name);
+                      }}
+                    />
+                  </Form.Item>
+                ))}
+                <Form.Item>
+                  <Button onClick={() => {
+                    form.validateFields(fields.map(obj => ["targetHosts", obj.name]))
+                      .then(() => add())
+                      .catch(ex => console.log("Exception", ex))
+                  }}>
+                    <PlusOutlined /> Add request URL
+                  </Button>
+                </Form.Item>
+              </div>
+            );
+          }}
+        </Form.List>
         <FormItemLabel name="Filter by target hosts" />
         <Form.List name="targetHosts">
           {(fields, { add, remove }) => {

diff --git a/src/pages/routing/overview/Overview.jsx b/src/pages/routing/overview/Overview.jsx
@@ -21,12 +21,13 @@ const calculateRequestURL = (routeType, url) => {
   return routeType === "prefix" ? url + "*" : url;
 };
 
-const applyFilters = (data, projectId, filters = { services: [], targetHosts: [], requestHosts: [] }) => {
-  const { services, targetHosts, requestHosts } = filters
+const applyFilters = (data, projectId, filters = { services: [], requestUrls: [], targetHosts: [], requestHosts: [] }) => {
+  const { services, requestUrls, targetHosts, requestHosts } = filters
   const serviceHosts = services.map(serviceId => `${serviceId}.${projectId}.svc.cluster.local`)
   const dataFilteredByServices = services.length === 0 ? data : data.filter(obj => obj.targets.some(target => serviceHosts.some(host => host === target.host)))
-  const dataFilteredByTargetHosts = targetHosts.length === 0 ? dataFilteredByServices : dataFilteredByServices.filter(obj => obj.targets.some(target => targetHosts.some(host => host === target.host)))
-  const dataFilteredByRequestHosts = requestHosts.length === 0 ? dataFilteredByTargetHosts : dataFilteredByTargetHosts.filter(obj => obj.allowedHosts.some(allowedHost => requestHosts.some(host => allowedHost === "*" || allowedHost === host)))
+  const dataFilteredByRequestUrls = requestUrls.length === 0 ? dataFilteredByServices : dataFilteredByServices.filter(obj => requestUrls.some(url => obj.url.includes(url)))
+  const dataFilteredByTargetHosts = targetHosts.length === 0 ? dataFilteredByRequestUrls : dataFilteredByRequestUrls.filter(obj => obj.targets.some(target => targetHosts.some(host => host === target.host)))
+  const dataFilteredByRequestHosts = requestHosts.length === 0 ? dataFilteredByTargetHosts : dataFilteredByTargetHosts.filter(obj => !obj.allowedHosts || !obj.allowedHosts.length || obj.allowedHosts.some(allowedHost => requestHosts.some(host => allowedHost === "*" || allowedHost === host)))
   return dataFilteredByRequestHosts
 }
 
@@ -223,7 +224,7 @@ function RoutingOverview() {
                   justifyContent: "space-between"
                 }}
               >
-                Ingress Routing rules
+                Ingress routes {filteredData.length ? `(${filteredData.length})` : ""}
                 <span>
                   <Space>
                     <Button onClick={() => setFilterModalVisible(true)}>