Feat(project-settings): add manual Events Grouping page in project settings

package.json

@@ -56,7 +56,8 @@
     "vue-template-compiler": "^2.6.11",
     "vue-unique-id": "^3.2.1",
     "vuex": "^3.1.2",
-    "vuex-persistedstate": "^3.0.1"
+    "vuex-persistedstate": "^3.0.1",
+    "safe-regex": "^2.1.0"
   },
   "devDependencies": {
     "@storybook/addon-actions": "^6.3.12",

src/api/projects/index.js

@@ -6,6 +6,9 @@ import {
   MUTATION_CREATE_PROJECT_NOTIFY_RULE,
   MUTATION_UPDATE_PROJECT_NOTIFY_RULE,
   MUTATION_REMOVE_PROJECT_NOTIFY_RULE,
+  MUTATION_CREATE_PROJECT_PATTERN,
+  MUTATION_UPDATE_PROJECT_PATTERN,
+  MUTATION_REMOVE_PROJECT_PATTERN,
   MUTATION_REMOVE_PROJECT,
   MUTATION_TOGGLE_ENABLED_STATE_OF_A_PROJECT_NOTIFY_RULE,
   QUERY_CHART_DATA, MUTATION_GENERATE_NEW_INTEGRATION_TOKEN
@@ -115,6 +118,54 @@ export async function updateProjectNotificationsRule(payload) {
   })).updateProjectNotificationsRule;
 }
 
+/**
+ * Send request for creation new project event grouping pattern
+ *
+ * @param {AddProjectEventGroupingPatternPayload} payload - add pattern payload
+ * @returns {Promise<ProjectEventGroupingPattern>} - created pattern
+ */
+export async function addEventGroupingPattern(payload) {
+  const response = (await api.call(MUTATION_CREATE_PROJECT_PATTERN, {
+    input: payload,
+  }));
+
+  const addedPattern = response.data.createProjectEventGroupingPattern;
+
+  return addedPattern;
+}
+
+/**
+ * Send request for updating specific project event grouping pattern
+ *
+ * @param {UpdateProjectEventGroupingPatternPayload} payload - update pattern payload
+ * @returns {Promise<ProjectEventGroupingPattern>} - updated pattern
+ */
+export async function updateEventGroupingPattern(payload) {
+  const response = await api.call(MUTATION_UPDATE_PROJECT_PATTERN, {
+    input: payload,
+  });
+
+  const updatedPattern = response.data.updateProjectEventGroupingPattern;
+
+  return updatedPattern;
+}
+
+/**
+ * Send request for removing specific project event grouping pattern
+ *
+ * @param {ProjectEventGroupingPatternPointer} payload - remove pattern payload
+ * @returns {Promise<ProjectEventGroupingPattern>} - removed pattern
+ */
+export async function removeEventGroupingPattern(payload) {
+  const response = await api.call(MUTATION_REMOVE_PROJECT_PATTERN, {
+    input: payload,
+  });
+
+  const removedPattern = response.data.removeProjectEventGroupingPattern;
+
+  return removedPattern;
+}
+
 /**
  * Send request for removing specific project notifications rule
  *

src/api/projects/queries.js

@@ -85,7 +85,7 @@ export const MUTATION_UPDATE_LAST_VISIT = `
 
 // language=GraphQL
 export const MUTATION_CREATE_PROJECT_NOTIFY_RULE = `
-  mutation ( $input: CreateProjectNotificationsRuleInput! ){
+  mutation createProjectNotificationsRule( $input: CreateProjectNotificationsRuleInput! ){
     createProjectNotificationsRule(
       input: $input
     ) {
@@ -98,7 +98,7 @@ export const MUTATION_CREATE_PROJECT_NOTIFY_RULE = `
 
 // language=GraphQL
 export const MUTATION_UPDATE_PROJECT_NOTIFY_RULE = `
-  mutation ( $input: UpdateProjectNotificationsRuleInput! ){
+  mutation updateProjectNotificationsRule( $input: UpdateProjectNotificationsRuleInput! ){
     updateProjectNotificationsRule(
       input: $input
     ) {
@@ -111,7 +111,7 @@ export const MUTATION_UPDATE_PROJECT_NOTIFY_RULE = `
 
 // language=GraphQL
 export const MUTATION_REMOVE_PROJECT_NOTIFY_RULE = `
-  mutation ( $input: ProjectNotificationRulePointer! ) {
+  mutation removeProjectNotificationsRule( $input: ProjectNotificationRulePointer! ) {
     deleteProjectNotificationsRule(
       input: $input
     ) {
@@ -122,6 +122,42 @@ export const MUTATION_REMOVE_PROJECT_NOTIFY_RULE = `
   ${PROJECT_NOTIFICATIONS_RULE_FRAGMENT}
 `;
 
+// language=GraphQL
+export const MUTATION_CREATE_PROJECT_PATTERN = `
+  mutation createProjectEventGroupingPattern( $input: CreateProjectEventGroupingPatternInput! ){
+    createProjectEventGroupingPattern(
+      input: $input
+    ) {
+      id
+      pattern
+    }
+  }
+`;
+
+// language=GraphQL
+export const MUTATION_UPDATE_PROJECT_PATTERN = `
+  mutation updateProjectEventGroupingPattern( $input: UpdateProjectEventGroupingPatternInput! ){
+    updateProjectEventGroupingPattern(
+      input: $input
+    ) {
+      id
+      pattern
+    }
+  }
+`;
+
+// language=GraphQL
+export const MUTATION_REMOVE_PROJECT_PATTERN = `
+  mutation removeProjectEventGroupingPattern( $input: RemoveProjectEventGroupingPatternInput! ){
+    removeProjectEventGroupingPattern(
+      input: $input
+    ) {
+      id
+      pattern
+    }
+  }
+`;
+
 // language=GraphQL
 export const MUTATION_REMOVE_PROJECT = `
   mutation removeProject($projectId: ID!) {
@@ -131,7 +167,7 @@ export const MUTATION_REMOVE_PROJECT = `
 
 // language=GraphQL
 export const MUTATION_TOGGLE_ENABLED_STATE_OF_A_PROJECT_NOTIFY_RULE = `
-  mutation ( $input: ProjectNotificationRulePointer! ){
+  mutation toggleProjectNotificationsRuleEnabledState( $input: ProjectNotificationRulePointer! ){
     toggleProjectNotificationsRuleEnabledState(
       input: $input
     ) {

src/api/workspaces/queries.ts

@@ -34,6 +34,10 @@ export const QUERY_ALL_WORKSPACES_WITH_PROJECTS = `
         notifications {
           ...ProjectNotificationsRule
         }
+        eventGroupingPatterns {
+          id
+          pattern
+        }
         recentEvents(limit: 1) {
           events {
             id

src/components/modals/ChooseTariffPlanPopup.vue

@@ -58,7 +58,6 @@
             </a>
           </div>
         </div>
-
       </div>
     </div>
   </PopupDialog>

src/components/modals/PaymentDetailsDialog.vue

@@ -681,10 +681,10 @@ export default Vue.extend({
 <style>
 .payment-details {
   width: 558px;
+  min-height: 470px;
   padding: 29px 21px 30px;
   color: var(--color-text-main);
   font-size: 14px;
-  min-height: 470px;
 
   &__header {
     margin: 0 159px 20px 0;
@@ -793,16 +793,16 @@ export default Vue.extend({
   }
 
   &__loading-text {
-    font-size: 16px;
     margin-top: 20px;
+    font-size: 16px;
   }
 
   &__spinner {
     width: 40px;
     height: 40px;
     border: 3px solid rgba(0, 0, 0, 0.1);
-    border-radius: 50%;
     border-top-color: var(--color-indicator-medium);
+    border-radius: 50%;
     animation: spinner 0.8s linear infinite;
   }