Merge pull request #1105 from syucream/feature/webhook-verification-error-details

Enable to check verification error details on webhooks by users

Author: hinashi

apiclient/typescript-fetch/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dmm-com/airone-apiclient-typescript-fetch",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "AirOne APIv2 client in TypeScript",
   "main": "src/autogenerated/index.ts",
   "scripts": {

entity/api_v2/serializers.py

@@ -34,8 +34,17 @@ class WebhookSerializer(serializers.ModelSerializer):
 
     class Meta:
         model = Webhook
-        fields = ["id", "label", "url", "is_enabled", "is_verified", "headers", "is_deleted"]
-        read_only_fields = ["is_verified"]
+        fields = [
+            "id",
+            "label",
+            "url",
+            "is_enabled",
+            "is_verified",
+            "verification_error_details",
+            "headers",
+            "is_deleted",
+        ]
+        read_only_fields = ["is_verified", "verification_error_details"]
 
 
 class WebhookCreateUpdateSerializer(serializers.ModelSerializer):
@@ -291,6 +300,7 @@ def _update_or_create(
                 id=webhook_data.get("id", None), defaults={**webhook_data}
             )
             entity.webhooks.add(webhook)
+
             try:
                 resp = requests.post(
                     webhook.url,
@@ -300,11 +310,17 @@ def _update_or_create(
                 )
                 # The is_verified parameter will be set True,
                 # when requests received HTTP 200 from specifying endpoint.
-                webhook.is_verified = resp.ok
-            except ConnectionError:
+                if resp.ok:
+                    webhook.is_verified = True
+                    webhook.verification_error_details = None
+                else:
+                    webhook.is_verified = False
+                    webhook.verification_error_details = resp.reason
+            except ConnectionError as e:
                 webhook.is_verified = False
+                webhook.verification_error_details = str(e)
 
-            webhook.save(update_fields=["is_verified"])
+            webhook.save(update_fields=["is_verified", "verification_error_details"])
 
         # unset Editing MODE
         if is_created_entity:

entity/tests/test_api_v2.py

@@ -267,6 +267,7 @@ def test_retrieve_entity_with_webhook(self):
                     "url": "http://airone.com/",
                     "is_enabled": True,
                     "is_verified": True,
+                    "verification_error_details": None,
                     "label": "hoge",
                     "headers": [],
                 }
@@ -291,6 +292,7 @@ def test_retrieve_entity_with_webhook(self):
                     "url": "http://airone.com/",
                     "is_enabled": True,
                     "is_verified": True,
+                    "verification_error_details": None,
                     "label": "hoge",
                     "headers": [
                         {"header_key": "key1", "header_value": "value1"},

frontend/src/components/entity/entityForm/EntityFormSchema.ts

@@ -16,6 +16,7 @@ export const schema = z.object({
         label: z.string().default(""),
         isEnabled: z.boolean().default(false),
         isVerified: z.boolean().default(false).optional(),
+        verificationErrorDetails: z.string().nullable().optional(),
         headers: z
           .array(
             z.object({

frontend/src/components/entity/entityForm/WebhookFields.tsx

@@ -95,14 +95,23 @@ export const WebhookFields: FC<Props> = ({ control }) => {
                   <Controller
                     name={`webhooks.${index}.isVerified`}
                     control={control}
-                    render={({ field }) => {
-                      switch (field.value) {
+                    render={({ field: _field }) => {
+                      switch (_field.value) {
                         case undefined:
                           return <></>;
                         case true:
                           return <CheckCircleOutlineIcon color="success" />;
                         case false:
-                          return <ErrorOutlineIcon color="error" />;
+                          return (
+                            <ErrorOutlineIcon
+                              color="error"
+                              titleAccess={
+                                field.verificationErrorDetails
+                                  ? `エラーのため webhook が有効になっていません。詳細: ${field.verificationErrorDetails}`
+                                  : undefined
+                              }
+                            />
+                          );
                       }
                     }}
                   />

package-lock.json

@@ -78,7 +78,7 @@
     "zod": "^3.22.4"
   },
   "dependencies": {
-    "@dmm-com/airone-apiclient-typescript-fetch": "^0.0.10",
+    "@dmm-com/airone-apiclient-typescript-fetch": "^0.0.11",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@jest/globals": "^27.0.6",

package.json

@@ -90,6 +90,11 @@ <h5 class='d-flex align-items-center'>Webhooks</h5>
               </div>
             </div>
             <small>{{ webhook.label }}</small>
+            {% if not webhook.is_verified %}
+              <p class='text-danger small'>
+                エラーのため webhook が有効になっていません。詳細: {{ webhook.verification_error_details }}
+              </p>
+            {% endif %}
           </li>
           {% endfor %}
 

templates/list_webhooks.html

@@ -78,9 +78,15 @@ def set_webhook(request, entity_id, recv_data):
 
         # The is_verified parameter will be set True,
         # when requests received HTTP 200 from specifying endpoint.
-        webhook.is_verified = resp.ok
-    except ConnectionError:
+        if resp.ok:
+            webhook.is_verified = True
+            webhook.verification_error_details = None
+        else:
+            webhook.is_verified = False
+            webhook.verification_error_details = resp.reason
+    except ConnectionError as e:
         webhook.is_verified = False
+        webhook.verification_error_details = str(e)
 
     webhook.save()
 

webhook/api_v1/views.py

@@ -20,6 +20,9 @@ class Webhook(models.Model):
     # This is set by system when specified webhook_url is available
     is_verified = models.BooleanField(default=False)
 
+    # This is set by system when specified webhook_url is unavailable
+    verification_error_details = models.TextField(null=True, blank=True)
+
     # This contains HTTP headers when sending request to the specified URL
     # (e.g. authentication header if it's needed)
     # [{

webhook/models.py

@@ -17,6 +17,7 @@ def test_create_invalid_endpoint_webhook(self, mock_requests):
         # Declare requests mock that responds HTTP 400(ERROR)
         mock_resp = mock.Mock()
         mock_resp.ok = False
+        mock_resp.reason = "test-failure"
         mock_resp.text = "test-failure"
         mock_requests.post.return_value = mock_resp