Merge pull request #371 from Hibe7/add-trigger-delivery-policies-page

Add trigger policy editor

cypress/integration/sidebar_test.js

@@ -29,6 +29,8 @@ describe('Sidebar tests', () => {
           .as('interfaces')
           .next('.nav-link')
           .as('triggers')
+          .next('.nav-link')
+          .as('trigger-delivery-policies')
           .next('.nav-item')
           .next('.nav-link')
           .as('devices')
@@ -54,6 +56,9 @@ describe('Sidebar tests', () => {
         cy.get('@home').should('have.attr', 'href', '/').contains('Home');
         cy.get('@interfaces').should('have.attr', 'href', '/interfaces').contains('Interfaces');
         cy.get('@triggers').should('have.attr', 'href', '/triggers').contains('Triggers');
+        cy.get('@trigger-delivery-policies')
+          .should('have.attr', 'href', '/trigger-delivery-policies')
+          .contains('Delivery Policies');
         cy.get('@devices').should('have.attr', 'href', '/devices').contains('Devices');
         cy.get('@groups').should('have.attr', 'href', '/groups').contains('Groups');
         cy.get('@flows').should('have.attr', 'href', '/flows').contains('Flows');

src/App.tsx

@@ -65,6 +65,7 @@ const DashboardSidebar = () => {
         <Sidebar.Separator />
         <Sidebar.Item label="Interfaces" link="/interfaces" icon="interfaces" />
         <Sidebar.Item label="Triggers" link="/triggers" icon="triggers" />
+        <Sidebar.Item label="Delivery Policies" link="/trigger-delivery-policies" icon="policy" />
         <Sidebar.Separator />
         <Sidebar.Item label="Devices" link="/devices" icon="devices" />
         <Sidebar.Item label="Groups" link="/groups" icon="groups" />

src/NewTriggerDeliveryPolicyPage.tsx

@@ -0,0 +1,117 @@
+/*
+This file is part of Astarte.
+
+Copyright 2023 SECO Mind Srl
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+/* eslint-disable camelcase */
+
+import React, { useCallback, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button, Container, Row, Spinner } from 'react-bootstrap';
+import { AstarteTriggerDeliveryPolicyDTO } from 'astarte-client/types/dto';
+
+import { AlertsBanner, useAlerts } from './AlertManager';
+import { useAstarte } from './AstarteManager';
+import BackButton from './ui/BackButton';
+import TriggerDeliveryPolicyEditor from './components/TriggerDeliveryPolicyEditor';
+
+const parsedErrorMessage = (status: number): string => {
+  switch (status) {
+    case 400:
+      return 'Bad request';
+    case 401:
+      return 'Authorization information is missing or invalid.';
+    case 403:
+      return 'Authorization failed for the resource. This could also result from unexisting resources.';
+    case 409:
+      return 'A trigger delivery policy with this name already exists.';
+    case 422:
+      return 'The provided trigger delivery policy is not valid.';
+    default:
+      return 'Not found';
+  }
+};
+
+export default (): React.ReactElement => {
+  const [policyDraft, setPolicyDraft] = useState<AstarteTriggerDeliveryPolicyDTO>();
+  const [isValidPolicy, setIsValidPolicy] = useState(false);
+  const [isInstallingPolicy, setIsInstallingPolicy] = useState(false);
+  const [isSourceVisible, setIsSourceVisible] = useState(true);
+  const [installationAlerts, installationAlertsController] = useAlerts();
+  const astarte = useAstarte();
+  const navigate = useNavigate();
+
+  const handleToggleSourceVisibility = useCallback(() => {
+    setIsSourceVisible((isVisible) => !isVisible);
+  }, []);
+
+  const handlePolicyChange = useCallback(
+    (updatedPolicy: AstarteTriggerDeliveryPolicyDTO, isValid: boolean) => {
+      setPolicyDraft(updatedPolicy);
+      setIsValidPolicy(isValid);
+    },
+    [],
+  );
+
+  const handleInstallPolicy = useCallback(() => {
+    if (policyDraft == null || isInstallingPolicy) {
+      return;
+    }
+    setIsInstallingPolicy(true);
+    astarte.client
+      .installTriggerDeliveryPolicy(policyDraft)
+      .then(() => {
+        navigate({ pathname: '/trigger-delivery-policies' });
+      })
+      .catch((err) => {
+        installationAlertsController.showError(
+          `Could not install policy: ${parsedErrorMessage(err.response.status)}`,
+        );
+        setIsInstallingPolicy(false);
+      });
+  }, [astarte.client, policyDraft, isInstallingPolicy, navigate, installationAlertsController]);
+
+  return (
+    <Container fluid className="p-3">
+      <h2>
+        <BackButton href="/trigger-delivery-policies" />
+        Trigger Delivery Policy Editor
+      </h2>
+      <TriggerDeliveryPolicyEditor
+        isSourceVisible={isSourceVisible}
+        onChange={handlePolicyChange}
+        isReadOnly={false}
+      />
+      <div className="mt-4">
+        <AlertsBanner alerts={installationAlerts} />
+        <Row className="justify-content-end m-0 mt-3">
+          <Button variant="secondary" className="mr-2" onClick={handleToggleSourceVisibility}>
+            {isSourceVisible ? 'Hide' : 'Show'} source
+          </Button>
+          <Button
+            variant="primary"
+            onClick={handleInstallPolicy}
+            disabled={isInstallingPolicy || !isValidPolicy}
+          >
+            {isInstallingPolicy && (
+              <Spinner as="span" size="sm" animation="border" role="status" className="mr-2" />
+            )}
+            Install Trigger Delivery Policy
+          </Button>
+        </Row>
+      </div>
+    </Container>
+  );
+};

src/Router.tsx

@@ -46,6 +46,9 @@ import DeviceStatusPage from './DeviceStatusPage';
 import DeviceInterfaceValues from './DeviceInterfaceValues';
 import { useConfig } from './ConfigManager';
 import { useAstarte } from './AstarteManager';
+import TriggerPoliciesPage from './TriggerDeliveryPoliciesPage';
+import NewPolicyPage from './NewTriggerDeliveryPolicyPage';
+import TriggerDeliveryPolicyPage from './TriggerDeliveryPolicyPage';
 
 function AttemptLogin(): React.ReactElement {
   const { search, hash } = useLocation();
@@ -106,6 +109,9 @@ const privateRoutes: RouteObject[] = [
   { path: 'triggers', element: <TriggersPage /> },
   { path: 'triggers/new', element: <NewTriggerPage /> },
   { path: 'triggers/:triggerName/edit', element: <TriggerPage /> },
+  { path: 'trigger-delivery-policies', element: <TriggerPoliciesPage /> },
+  { path: 'trigger-delivery-policies/new', element: <NewPolicyPage /> },
+  { path: 'trigger-delivery-policies/:policyName/edit', element: <TriggerDeliveryPolicyPage /> },
   { path: 'interfaces', element: <InterfacesPage /> },
   { path: 'interfaces/new', element: <NewInterfacePage /> },
   { path: 'interfaces/:interfaceName/:interfaceMajor/edit', element: <InterfacePage /> },

src/TriggerDeliveryPoliciesPage.tsx

@@ -0,0 +1,116 @@
+/*
+   This file is part of Astarte.
+
+   Copyright 2023 SECO Mind Srl
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+*/
+
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button, Col, Container, ListGroup, Row, Spinner } from 'react-bootstrap';
+
+import { useAstarte } from './AstarteManager';
+import Empty from './components/Empty';
+import Icon from './components/Icon';
+import WaitForData from './components/WaitForData';
+import useFetch from './hooks/useFetch';
+import useInterval from './hooks/useInterval';
+
+interface TriggerPolicyRowProps {
+  name: string;
+  onClick: () => void;
+}
+
+const TriggerPolicyRow = ({ name, onClick }: TriggerPolicyRowProps): React.ReactElement => (
+  <ListGroup.Item>
+    <Button variant="link" className="p-0" onClick={onClick}>
+      <Icon icon="policy" className="mr-2" />
+      {name}
+    </Button>
+  </ListGroup.Item>
+);
+
+const LoadingRow = (): React.ReactElement => (
+  <ListGroup.Item>
+    <Container fluid className="text-center">
+      <Spinner animation="border" role="status" />
+    </Container>
+  </ListGroup.Item>
+);
+
+interface ErrorRowProps {
+  onRetry: () => void;
+}
+
+const ErrorRow = ({ onRetry }: ErrorRowProps): React.ReactElement => (
+  <ListGroup.Item>
+    <Empty title="Couldn't load available delivery policies" onRetry={onRetry} />
+  </ListGroup.Item>
+);
+
+export default (): React.ReactElement => {
+  const astarte = useAstarte();
+  const navigate = useNavigate();
+  const policiesFetcher = useFetch(astarte.client.getTriggerDeliveryPolicyNames);
+
+  useInterval(policiesFetcher.refresh, 30000);
+
+  return (
+    <Container fluid className="p-3" data-testid="policies-page">
+      <Row>
+        <Col>
+          <h2>Trigger Delivery Policies</h2>
+        </Col>
+      </Row>
+      <Row className="mt-3">
+        <Col sm={12}>
+          <ListGroup>
+            <ListGroup.Item>
+              <Button
+                variant="link"
+                className="p-0"
+                onClick={() => {
+                  navigate('/trigger-delivery-policies/new');
+                }}
+              >
+                <Icon icon="add" className="mr-2" />
+                Install a new trigger delivery policy...
+              </Button>
+            </ListGroup.Item>
+            <WaitForData
+              data={policiesFetcher.value}
+              status={policiesFetcher.status}
+              fallback={<LoadingRow />}
+              errorFallback={<ErrorRow onRetry={policiesFetcher.refresh} />}
+            >
+              {(policies) => (
+                <>
+                  {policies.map((policy) => (
+                    <TriggerPolicyRow
+                      key={policy}
+                      name={policy}
+                      onClick={() => {
+                        navigate(`/trigger-delivery-policies/${policy}/edit`);
+                      }}
+                    />
+                  ))}
+                </>
+              )}
+            </WaitForData>
+          </ListGroup>
+        </Col>
+      </Row>
+    </Container>
+  );
+};