Add status field to Stream output rule list and form (#19882)

* handle filter status

* add StatusCell

graylog2-web-interface/src/components/streams/StreamDetails/output-filter/Constants.ts

@@ -21,12 +21,13 @@ export const DEFAULT_LAYOUT = {
   entityTableId: 'streamOuputFilter',
   defaultPageSize: 20,
   defaultSort: { attributeId: 'title', direction: 'asc' } as Sort,
-  defaultDisplayedAttributes: ['title', 'description'],
+  defaultDisplayedAttributes: ['title', 'description', 'status'],
 };
 
-export const COLUMNS_ORDER = ['title', 'description'];
+export const COLUMNS_ORDER = ['title', 'description', 'status'];
 
 export const ADDITIONAL_ATTRIBUTES: Array<Attribute> = [
   { id: 'title', title: 'Rule' },
   { id: 'description', title: 'Description' },
+  { id: 'status', title: 'Status' },
 ];

graylog2-web-interface/src/components/streams/StreamDetails/output-filter/FilterRuleForm.tsx

@@ -15,11 +15,11 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import * as React from 'react';
-import { Formik } from 'formik';
+import { Formik, Field } from 'formik';
 
-import { BootstrapModalWrapper, Modal } from 'components/bootstrap';
+import { BootstrapModalWrapper, Input, Modal } from 'components/bootstrap';
 import { FormikInput, ModalSubmit } from 'components/common';
-import { formHasErrors } from 'util/FormsUtils';
+import { formHasErrors, getValueFromInput } from 'util/FormsUtils';
 import type { StreamOutputFilterRule } from 'components/streams/StreamDetails/output-filter/Types';
 import FilterRulesFields from 'components/streams/StreamDetails/output-filter/FilterRulesFields';
 
@@ -57,6 +57,7 @@ const FilterRuleForm = ({ title, filterRule, onCancel, handleSubmit, destination
         ...filterRule,
         destination_type: destinationType,
         ...(!filterRule?.id && {
+          status: 'enabled',
           rule: {
             operator: 'AND',
             conditions: [],
@@ -68,7 +69,7 @@ const FilterRuleForm = ({ title, filterRule, onCancel, handleSubmit, destination
                                             validateOnBlur
                                             validateOnChange
                                             onSubmit={() => {}}>
-        {({ isSubmitting, values, isValid, errors, validateForm }) => {
+        {({ isSubmitting, values, isValid, errors, validateForm, setFieldValue }) => {
           const onSubmit = () => {
             validateForm().then((errorsList) => {
               if (!formHasErrors(errorsList)) {
@@ -77,6 +78,11 @@ const FilterRuleForm = ({ title, filterRule, onCancel, handleSubmit, destination
             });
           };
 
+          const onStatusChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+            const isChecked = getValueFromInput(event.target);
+            setFieldValue('status', isChecked ? 'enabled' : 'disabled');
+          };
+
           return (
             <>
               <Modal.Header closeButton>
@@ -93,6 +99,17 @@ const FilterRuleForm = ({ title, filterRule, onCancel, handleSubmit, destination
                              name="description"
                              label="Description"
                              help="Rule description" />
+                <Field name="status">
+                  {({ field: { name, value }, meta }) => (
+                    <Input id={name}
+                           error={meta?.error}
+                           label="Enabled"
+                           type="checkbox"
+                           onChange={onStatusChange}
+                           checked={value === 'enabled'}
+                           value={value === 'enabled'} />
+                  )}
+                </Field>
                 <label htmlFor="rule_builder">Rule Builder</label>
                 {errors?.rule && (<p className="text-danger">{errors.rule as React.ReactNode}</p>)}
                 <FilterRulesFields type="condition" />

graylog2-web-interface/src/components/streams/StreamDetails/output-filter/FilterRuleList.tsx

@@ -18,6 +18,7 @@ import * as React from 'react';
 import { useCallback } from 'react';
 import styled from 'styled-components';
 
+import type { ColumnRenderers } from 'components/common/EntityDataTable/types';
 import type { SearchParams } from 'stores/PaginationTypes';
 import SectionComponent from 'components/common/Section/SectionComponent';
 import { IfPermitted, PaginatedEntityTable, QueryHelper } from 'components/common';
@@ -27,6 +28,8 @@ import type { StreamOutputFilterRule } from 'components/streams/StreamDetails/ou
 import FilterRuleEditButton from 'components/streams/StreamDetails/output-filter/FilterRuleEditButton';
 import { keyFn, fetchStreamOutputFilters } from 'components/streams/hooks/useStreamOutputFilters';
 
+import FilterStatusCell from './FilterStatusCell';
+
 export const StyledSectionComponent = styled(SectionComponent)`
   &.content {
     background-color: transparent;
@@ -43,6 +46,14 @@ const FilterRulesList = ({ streamId, destinationType }: Props) => {
   const _keyFn = useCallback((searchParams: SearchParams) => keyFn(streamId, destinationType, searchParams), [streamId, destinationType]);
   const _fetchStreamOutputFilters = useCallback((searchParams: SearchParams) => fetchStreamOutputFilters(streamId, { ...searchParams, query: `destination_type:${destinationType}` }), [streamId, destinationType]);
 
+  const customColumnRenderers = (): ColumnRenderers<StreamOutputFilterRule> => ({
+    attributes: {
+      status: {
+        renderCell: (_title: string, filterOutputRule) => <FilterStatusCell filterOutputRule={filterOutputRule} />,
+      },
+    },
+  });
+
   return (
     <StyledSectionComponent title="Filter Rule"
                             headerActions={(
@@ -59,7 +70,7 @@ const FilterRulesList = ({ streamId, destinationType }: Props) => {
                                                     entityActions={entityActions}
                                                     tableLayout={DEFAULT_LAYOUT}
                                                     fetchEntities={_fetchStreamOutputFilters}
-                                                    columnRenderers={{}}
+                                                    columnRenderers={customColumnRenderers()}
                                                     keyFn={_keyFn}
                                                     entityAttributesAreCamelCase={false} />
 

graylog2-web-interface/src/components/streams/StreamDetails/output-filter/FilterStatusCell.tsx

@@ -0,0 +1,50 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * 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
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import * as React from 'react';
+import styled, { css } from 'styled-components';
+
+import { Label } from 'components/bootstrap';
+
+import type { StreamOutputFilterRule } from './Types';
+
+const StatusLabel = styled(Label)<{ $clickable: boolean }>(({ $clickable }) => css`
+  cursor: ${$clickable ? 'pointer' : 'default'};
+  display: inline-flex;
+  justify-content: center;
+  gap: 4px;
+`);
+
+type Props = {
+  filterOutputRule: StreamOutputFilterRule,
+};
+
+const FilterStatusCell = ({ filterOutputRule }: Props) => {
+  const isEnabled = filterOutputRule.status === 'enabled';
+  const title = isEnabled ? 'Enabled' : 'Disabled';
+
+  return (
+    <StatusLabel bsStyle={isEnabled ? 'success' : 'warning'}
+                 title={title}
+                 aria-label={title}
+                 role="button"
+                 $clickable={false}>
+      {title}
+    </StatusLabel>
+  );
+};
+
+export default FilterStatusCell;

graylog2-web-interface/src/components/streams/StreamDetails/output-filter/Types.ts

@@ -22,6 +22,6 @@ export type StreamOutputFilterRule = {
   destination_type: string
   title: string
   description: string
-  status: string
+  status: 'enabled'| 'disabled'
   rule: RuleBuilderType,
 }