Merge branch 'main' into remove_subscriptions

.dockerignore

@@ -6,6 +6,8 @@ README.md
 **/build/
 **/yarn-error.log
 **/.gitignore
+node_modules
+build
 
 # Envs
 **/.env.local

.env.schema

@@ -14,3 +14,5 @@ LAGOON_UI_DEPLOYMENTS_LIMIT=
 LAGOON_UI_TASKS_LIMIT=
 # How many backups to show in the UI. Use -1 to show all.
 LAGOON_UI_BACKUPS_LIMIT=
+# Full URL to the Webhook Handler
+WEBHOOK_URL=

.storybook/mocks/api.ts

@@ -1,6 +1,16 @@
 import { faker } from '@faker-js/faker';
 
-import { ProblemIdentifier, generateEnvironments } from './mocks';
+import {
+  ProblemIdentifier,
+  generateEnvironments,
+  organizationEmails,
+  organizationGroups,
+  organizationNotifications,
+  organizationOwners,
+  organizationProjects,
+} from './mocks';
+
+faker.setDefaultRefDate(new Date(`${new Date().getFullYear().toString()}-01-01`));
 
 export interface Project {
   id: string;
@@ -115,6 +125,7 @@ export const MockBulkDeployments = (seed: number) => {
       name: faker.lorem.slug({ min: 1, max: 5 }),
       created: faker.date.past().toDateString(),
       started: faker.date.past().toDateString(),
+      buildStep:faker.word.words(),
       completed: faker.date.past().toDateString(),
       buildLog: faker.word.words(),
       bulkId: faker.string.uuid(),
@@ -148,3 +159,37 @@ export const ProjectsProblems = (seed: number) => {
   });
   return allProblems;
 };
+
+export const getOrganization = () => {
+  faker.seed(123);
+
+  const projectQuota = faker.number.int({ min: 1, max: 10 });
+  const groupQuota = faker.number.int({ min: 1, max: 10 });
+
+  const { slack, rocketChat, teams, webhook } = organizationNotifications();
+
+  return {
+    id: 1,
+    name: 'Test Org',
+    description: 'An organization for testing',
+    quotaProject: projectQuota,
+    quotaGroup: groupQuota,
+    quotaNotification: 10,
+    __typename: 'Organization',
+    deployTargets: [
+      {
+        id: faker.number.int(),
+        name: 'ci-local-control-k8s',
+        __typename: 'Openshift',
+      },
+    ],
+    owners: organizationOwners(),
+    projects: organizationProjects(projectQuota),
+    groups: organizationGroups(groupQuota),
+    slacks: slack,
+    rocketchats: rocketChat,
+    teams,
+    webhook,
+    emails: organizationEmails(),
+  };
+};

.storybook/mocks/mocks.ts

@@ -31,6 +31,7 @@ interface Task {
     name?: string;
   };
 }
+faker.setDefaultRefDate(new Date(`${new Date().getFullYear().toString()}-01-01`));
 
 export const seed = (val = 123) => faker.seed(val);
 
@@ -65,8 +66,7 @@ export function createTask(): Task {
     `::group::${eventName}\n` +
     `::${status[Math.floor(faker.number.int({ min: 0, max: 1 }) * status.length)]}:: Job '${jobName}'\n` +
     `::step-start::${stepName}\n` +
-    `::${
-      status[Math.floor(faker.number.int({ min: 0, max: 1 }) * status.length)]
+    `::${status[Math.floor(faker.number.int({ min: 0, max: 1 }) * status.length)]
     }:: Job '${jobName}' step '${stepName}'\n` +
     `::step-end::${stepName}::${duration}\n` +
     `${generateLogMessage()}\n` +
@@ -143,12 +143,14 @@ export const Problem = (args: any) => {
   const links = `https://security-tracker.debian.org/tracker/${vuln_id}`;
   const severityScore = `0.${faker.number.int({ min: 1, max: 9 })}`;
   const data = JSON.stringify({ id: `${faker.number.int({ min: 1, max: 100 })}` }, null, '\t');
+  const service = faker.helpers.arrayElement(['cli', 'service1']);
   return {
     identifier: vuln_id,
     severity: args.hasOwnProperty('severity') ? args.severity : severity,
     source: args.hasOwnProperty('source') ? args.source : source,
     severityScore: severityScore,
     associatedPackage: associatedPackage,
+    service: service,
     description,
     links,
     data,
@@ -180,7 +182,7 @@ export const ProblemIdentifier = (val: number) => {
   };
 };
 
-const addTime = (originalDate: string, hoursLimit: number, seedVal?: number) => {
+const addTime = (originalDate: string, hoursLimit: number, seedVal: number) => {
   seed(seedVal);
   const date = new Date(originalDate);
   date.setTime(date.getTime() + faker.number.int(hoursLimit * 60 * 60 * 1000));
@@ -262,8 +264,8 @@ export const generateEnvironments = (args = Object.create(null)) => {
     deployHeadRef = 'source';
   }
   const created = faker.date.anytime().toDateString();
-  const updated = addTime(created, 4);
-  const deleted = addTime(updated, 2);
+  const updated = addTime(created, 4, args['seed']);
+  const deleted = addTime(updated, 2, args['seed']);
 
   const project: Project = { ...MockAllProjects(args['seed'])[0], factsUi: 1, problemsUi: 1, name: faker.lorem.slug() };
 
@@ -309,6 +311,7 @@ export const getDeployment = (seed: number) => {
     status: deployStatus(),
     created,
     started,
+    buildStep:faker.word.words(3),
     completed,
     environment: generateEnvironments({ seed }),
     remoteId: faker.number.int(),
@@ -404,3 +407,148 @@ export const generateInsight = (val: number) => {
     type: 'image',
   };
 };
+// organizations
+export const organizationOwners = () => {
+  seed();
+  const numberOfOwners = faker.number.int({ min: 1, max: 5 });
+  return Array.from({ length: numberOfOwners }, () => {
+    return {
+      email: faker.internet.email({ provider: 'org.com' }),
+      owner: faker.helpers.arrayElement([true, false]),
+      __typename: 'OrgUser',
+    };
+  });
+};
+
+export const organizationMembers = () => {
+  const numberOfMembers = faker.number.int({ min: 1, max: 10 });
+
+  return Array.from({ length: numberOfMembers }, (_, idx) => {
+    seed((idx + 1) * 5);
+    return {
+      role: faker.helpers.arrayElement(['OWNER', 'MAINTAINER', 'DEVELOPER', 'REPORTER', 'GUEST']),
+      user: {
+        email: faker.internet.email(),
+        comment: 'organization member',
+        __typename: 'User',
+      },
+      __typename: 'GroupMembership',
+    };
+  });
+};
+
+export const organizationGroups = (groupQuota?: number) => {
+  const numberOfGroups = groupQuota ? Math.floor(groupQuota / 2) : faker.number.int({ min: 1, max: 10 });
+  return Array.from({ length: numberOfGroups }, (_, idx) => {
+    seed(idx);
+    return {
+      id: faker.lorem.slug(),
+      name: `${faker.word.words(1)}-group`,
+      type: faker.helpers.arrayElement(['null', 'project-default-group']),
+      members: organizationMembers(),
+      memberCount: faker.number.int({ min: 1, max: 10 }),
+      __typename: 'Group',
+    };
+  });
+};
+
+export const organizationEmails = () => {
+  seed();
+
+  const numberOfEmails = faker.number.int({ min: 1, max: 3 });
+
+  return Array.from({ length: numberOfEmails }, (_, idx) => {
+    return {
+      __typename: 'NotificationEmail',
+      emailAddress: faker.internet.email(),
+      name: `email-${idx + 1}-test`,
+    };
+  });
+};
+
+export const organizationNotifications = () => {
+  seed();
+
+  type NotificationType =
+    | 'NotificationRocketChat'
+    | 'NotificationSlack'
+    | 'NotificationMicrosoftTeams'
+    | 'NotificationWebhook';
+
+  type Notification<T extends NotificationType> = {
+    __typename: T;
+    webhook: string;
+    name: string;
+    channel: string;
+  };
+  interface Notifications {
+    slack: Notification<'NotificationSlack'>[];
+    rocketChat: Notification<'NotificationRocketChat'>[];
+    teams: Notification<'NotificationMicrosoftTeams'>[];
+    webhook: Notification<'NotificationWebhook'>[];
+  }
+
+  const notifications: Notifications = {
+    slack: [],
+    rocketChat: [],
+    teams: [],
+    webhook: [],
+  };
+
+  const generateNotifications = (type: string, seedVal: number) => {
+    seed(seedVal);
+    // random number of notifications
+    const numberOfItems = faker.number.int({ min: 1, max: 3 });
+
+    const getTypename = (type: string) => {
+      switch (type) {
+        case 'slack':
+          return 'NotificationSlack';
+        case 'rocketChat':
+          return 'NotificationRocketChat';
+        case 'teams':
+          return 'NotificationMicrosoftTeams';
+        case 'webhook':
+          return 'NotificationWebhook';
+        default:
+          return null;
+      }
+    };
+
+    return Array.from({ length: numberOfItems }, (_, idx) => {
+      return {
+        __typename: getTypename(type),
+        webhook: `${type}.example.com/hooks/${idx + 1}`,
+        name: `${type}-notification-${idx + 1}`,
+        channel: faker.word.words(1),
+      };
+    });
+  };
+
+  Object.keys(notifications).forEach((key, idx) => {
+    notifications[key] = generateNotifications(key, idx - 1);
+  });
+
+  return notifications;
+};
+
+export const organizationProjects = (projectQuota: number) => {
+  seed();
+
+  const { slack, rocketChat, webhook } = organizationNotifications();
+
+  return Array.from({ length: Math.floor(projectQuota / 2) }, () => {
+    return {
+      id: faker.number.int({ max: 300 }),
+      name: `project-${faker.word.noun()}`,
+      __typename: 'OrgProject',
+      groups: organizationGroups(),
+      groupCount: organizationGroups().length,
+      notifications: [
+        { ...slack[0], type: 'SLACK' },
+        { ...rocketChat[0], type: 'ROCKETCHAT' },
+        { ...webhook[0], type: 'WEBHOOK' },
+      ],
+    };
+  });
+};

.storybook/preview.ts

@@ -29,8 +29,23 @@ const preview: Preview = {
   parameters: {
     options: {
       storySort: {
-        method: 'alphabetical',
-        order: ['Introduction', 'Components', 'Pages', '*'],
+        method: 'configure',
+        includeNames: true,
+        order: [
+          'Introduction',
+          'Components',
+          'Pages',
+          [
+            'Organizations/Overview',
+            'Organizations/Groups',
+            'Organizations/Group',
+            'Organizations/Projects',
+            'Organizations/Project',
+            'Organizations/Notifications',
+            'Organizations/AllOrganizations',
+          ],
+          '*',
+        ],
       },
     },
     actions: { argTypesRegex: '^on[A-Z].*' },

Dockerfile

@@ -18,9 +18,6 @@ COPY --from=builder /app/node_modules /app/node_modules
 # Copying files from ui service
 COPY . /app/
 
-# Making sure we run in production
-ENV NODE_ENV=production
-
 ARG KEYCLOAK_API
 ENV KEYCLOAK_API=$KEYCLOAK_API
 

docker-compose.yml

@@ -21,21 +21,15 @@ services:
       dockerfile: Dockerfile
     labels:
       lagoon.type: node
-    command: yarn run start
+    command: yarn run dev
     volumes:
       - ./src:/app/src
       - ./.env.defaults:/app/.env.defaults
       - ./.env.schema:/app/.env.schema
       - ./package.json:/app/package.json
     ports:
-      - '8888:3000'
       - '3003:3003'
     networks:
-      - amazeeio-network
       - default
     environment:
       <<: *default-environment
-
-networks:
-  amazeeio-network:
-    external: true

package.json

@@ -19,18 +19,22 @@
     "format-check": "yarn prettier --c ."
   },
   "dependencies": {
+    "@ant-design/cssinjs": "^1.17.0",
+    "@ant-design/icons": "^5.1.4",
     "@apollo/react-hooks": "^3.1.5",
     "@emotion/core": "^11.0.0",
     "@emotion/styled": "^11.10.6",
     "@storybook/jest": "^0.1.0",
     "@storybook/preview-api": "^7.0.18",
+    "antd": "^5.9.3",
     "apollo-cache-inmemory": "^1.3.9",
     "apollo-client": "^2.4.5",
     "apollo-link": "^1.2.3",
     "apollo-link-error": "^1.1.1",
     "apollo-link-http": "^1.5.5",
     "apollo-link-ws": "^1.0.10",
-    "babel-plugin-styled-components": "^2.1.1",
+    "babel-plugin-styled-components": "^2.0.7",
+    "bootstrap": "^5.2.3",
     "colors": "^1.4.0",
     "core-js": "^3.30.1",
     "crypto-js": "^4.1.1",
@@ -57,9 +61,9 @@
     "react": "18.2.0",
     "react-apollo": "^2.1.11",
     "react-beautiful-dnd": "^13.0.0",
+    "react-bootstrap": "^2.7.2",
     "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "18.2.0",
-    "react-hexgrid": "1.0.4",
     "react-highlight-words": "^0.20.0",
     "react-joyride": "^2.5.3",
     "react-loading-skeleton": "^3.2.1",