Merge branch 'feature-governor' into feat/add-governor-agent

Signed-off-by: harshsharma071988 <[email protected]>

.github/workflows/cypress.yml

@@ -0,0 +1,37 @@
+name: Cypress
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    types: [synchronize, opened, reopened]
+
+jobs:
+  cnsi_portal_e2e_test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node_version: [14.19.0]
+    container: cypress/base:${{ matrix.node_version }}
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: |
+          cd src/frontend
+          if [ -e yarn.lock ]; then
+          yarn install --frozen-lockfile
+          elif [ -e package-lock.json ]; then
+          npm ci
+          else
+          npm i
+          fi
+
+      - name: Cpyress run
+        uses: cypress-io/github-action@v5
+        with:
+          install: false
+          working-directory: src/frontend
+          start: npm run start
+          wait-on: 'http://localhost:4004'
+          wait-on-timeout: 120

.github/workflows/main.yml

@@ -47,3 +47,29 @@ jobs:
           fail_ci_if_error: true # optional (default = false)
           verbose: true # optional (default = false)
 
+  UI_UT:
+    env:
+      UI_UT: true
+    runs-on:
+      #- self-hosted
+      - ubuntu-latest
+    timeout-minutes: 100
+    steps:
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+      - uses: actions/checkout@v3
+        with:
+          path: ${{ github.repository }}
+      - name: script
+        run: |
+          pwd
+          cd ${{ github.repository }}/src
+          cd frontend
+          bash ./test/ui_unit.sh
+          df -h
+      - name: Codecov For UI
+        uses: codecov/codecov-action@v3
+        with:
+          file:  ${{ github.repository }}/src/frontend/coverage/icov.info
+          flags: unittests

CONTRIBUTING.md

@@ -2,13 +2,27 @@
 
 We welcome contributions from the community and first want to thank you for taking the time to contribute!
 
-Please familiarize yourself with the [Code of Conduct](https://github.com/vmware/.github/blob/main/CODE_OF_CONDUCT.md) before contributing.
-
-Before you start working with cloud-native-security-inspector, please read and sign our Contributor License Agreement [CLA](https://cla.vmware.com/cla/1/preview). If you wish to contribute code and you have not signed our contributor license agreement (CLA), our bot will prompt you to do so when you open a Pull Request. For any questions about the CLA process, please refer to our [FAQ]([https://cla.vmware.com/faq](https://cla.vmware.com/faq)).
+**Table of Contents**
+
+* [Code of Conduct](#code-of-conduct)
+* [Ways to Contribute](#ways-to-contribute)
+* [Sign a Contributor License](#sign-a-contributor-license)
+* [Getting Started](#getting-started)
+* [Contribution Flow](#contribution-flow)
+  * [Staying In Sync With Upstream](#staying-in-sync-with-upstream)
+  * [Updating pull requests](#updating-pull-requests)
+  * [Formatting Commit Messages](#formatting-commit-messages)
+  * [Pull Request Checklist](#pull-request-checklist)
+* [Reporting Bugs and Creating Issues](#reporting-bugs-and-creating-issues)
+* [Ask for Help](#ask-for-help)
+
+## Code of Conduct
+Please familiarize yourself with the [Code of Conduct](https://github.com/vmware/.github/blob/main/CODE_OF_CONDUCT.md)
+before contributing.
 
 ## Ways to contribute
 
-We welcome many different types of contributions and not all of them need a Pull request. Contributions may include:
+We welcome many types of contributions and not all of them need a Pull request. Contributions may include:
 
 * New features and proposals
 * Documentation
@@ -20,9 +34,33 @@ We welcome many different types of contributions and not all of them need a Pull
 
 ## Getting started
 
-Please refer to README to learn more about how to build the project from source and run.
+Please refer to [README](README.md) to learn more about how to build the project from source code and run.
+
+All todo items, are recorded on the issue [page](https://github.com/vmware-tanzu/cloud-native-security-inspector/issues).
+You can pick one of them by add comments below, then a maintainer can assign the feature to you.
+
+After picking the issue, before any code change, a design doc should be proposed first.
+Check the [template](docs/design/template.md) to see how to write a design doc.
+
+After the design doc is approved by two maintainers, you can start the implementation process.
+It would be nice if you can comment in the issue assigned to you about when is the feature expected to be finished,
+so that the maintainers can schedule the issue in the appropriate release in the future.
+
+## Sign a contributor license
 
+If you would like to contribute code to cloud-native-security-inspector, you must read and sign our
+Contributor License Agreement [CLA](https://cla.vmware.com/cla/1/preview). If you wish to contribute
+code and you have not signed our contributor license agreement (CLA), our bot will prompt you to do 
+so when you open a Pull Request. For any questions about the CLA process, please refer to our
+[FAQ]([https://cla.vmware.com/faq](https://cla.vmware.com/faq)).
 
+When you click the link for signing the CLA, please sign the individual CLA.
+
+<img src="docs/contributing-pictures/sign-cla.png">
+
+**Important: Make sure you provide all the information we ask you to provide, e.g., fill in each blank in below form.**
+
+<img src="docs/contributing-pictures/cla-information.png">
 
 ## Contribution Flow
 
@@ -35,7 +73,8 @@ This is a rough outline of what a contributor's workflow looks like:
 * Push your changes to the topic branch in your fork
 * Create a pull request containing that commit
 
-We follow the GitHub workflow and you can find more details on the [GitHub flow documentation](https://docs.github.com/en/get-started/quickstart/github-flow).
+We follow the GitHub workflow and you can find more details on the
+[GitHub flow documentation](https://docs.github.com/en/get-started/quickstart/github-flow).
 
 Example:
 ```shell
@@ -82,31 +121,23 @@ Be sure to include any related GitHub issue references in the commit message.  S
 [GFM syntax](https://guides.github.com/features/mastering-markdown/#GitHub-flavored-markdown) for referencing issues
 and commits.
 
-
-
-
 ### Pull Request Checklist
 
 Before submitting your pull request, we advise you to use the following:
 
-1. Check if your code changes will pass both code linting checks and unit tests.
+1. Make sure you code change brings no regression, e.g., you change must pass every github workflow item triggerred by your PR.
 2. Ensure your commit messages are descriptive. We follow the conventions on [How to Write a Git Commit Message](http://chris.beams.io/posts/git-commit/). Be sure to include any related GitHub issue references in the commit message. See [GFM syntax](https://guides.github.com/features/mastering-markdown/#GitHub-flavored-markdown) for referencing issues and commits.
 3. Check the commits and commits messages and ensure they are free from typos.
+4. Make sure you have involved new tests that can verify that your change does can solve the problem.
 
 ## Reporting Bugs and Creating Issues
 
 For specifics on what to include in your report, please follow the guidelines in the issue and pull request templates when available.
 When opening a new issue, try to roughly follow the commit message format conventions above.
 
-
-
 ## Ask for Help
 
 The best way to reach us with a question when contributing is to ask on:
 
 * The original GitHub issue
-* The developer mailing list
-
-
-
-
+* The developer mailing list: [email protected]

README.md

@@ -1,5 +1,6 @@
 # Cloud Native Security Inspector (Project Narrows)
 [![CodeQL](https://github.com/vmware-tanzu/cloud-native-security-inspector/actions/workflows/codeql.yml/badge.svg)](https://github.com/vmware-tanzu/cloud-native-security-inspector/actions/workflows/codeql.yml)
+[![Cypress](https://github.com/vmware-tanzu/cloud-native-security-inspector/actions/workflows/cypress.yml/badge.svg)](https://github.com/vmware-tanzu/cloud-native-security-inspector/actions/workflows/cypress.yml)
 
 
 Cloud Native Security Inspector is an open source cloud native runtime security tool. It allows end users to assess

docs/PORTAL-TEST.md

@@ -0,0 +1,161 @@
+# Cloud Native Security Inspector Front-End Developer Testing Guide
+This is a project based on Jasmine and Karma for unit testing and Cypress e2e for testing the front end.
+
+Unit test
+============
+
+1. [Jasmine](https://jasmine.github.io/tutorials/your_first_suite) learns to use official documents.
+
+2.  [Angular Testing](https://angular.io/guide/testing) Learning Documentation。
+
+3. When modifying components or creating new ones, synchronous unit testing of newly added code is required. The test code can be carried out according to the [policy component](../src/frontend/src/app/view/policy/policy.component.spec.ts) below.
+
+```ts
+describe('PolicyComponent', () => {
+  // The test content needs to be written into the modified function
+  let component: PolicyComponent;
+  let fixture: ComponentFixture<PolicyComponent>;
+  let policyService: PolicyService
+  // Define the results that the test needs to return in advance
+  const policyServiceStub = {
+    getInspectionpolicies() {
+      return of<InspectionPolicyType>({apiVersion: '',
+        items: [],
+        kind: '',
+        metadata: {
+          continue: '',
+          remainingItemCount: 0,
+          resourceVersion: '',
+          selfLink: ''
+        }});
+    },
+  }
+  // Inject the involved classes into the test unit, and instantiate
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PolicyComponent ],
+      imports: [ShardTestModule, RouterTestingModule],
+      providers: [PolicyService],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PolicyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  // Add the corresponding test code according to the newly added code
+  describe('getInspectionpolicies()', () => {
+    it('get inspectionpolicies', () => {
+      component.modifyPolicy()
+      component.deleteModalHandler('test')
+      component.deletePolicy()
+
+    });
+
+    it('getInspectionpolicies', fakeAsync(() => {
+      spyOn(policyService, 'getInspectionpolicies').and.returnValue(
+        policyServiceStub.getInspectionpolicies()
+      );
+      component.getInspectionpolicies();
+      fixture.detectChanges();
+      expect(policyService.getInspectionpolicies).toHaveBeenCalled();
+      tick(1500);
+      expect(policyService.getInspectionpolicies);
+    }));
+  });
+});
+
+```
+4. After the unit test code is completed, open the src/frontend terminal under the Cloud Native Security Inspector project directory
+```bash
+$ cd src/frontend 
+
+$ npm run test
+
+```
+5. You can view the test coverage of each file by modifying [karma.conf.js](../src/frontend/karma.conf.js) as follows。
+
+```js
+    coverageReporter: {
+      type: 'html',  // view via browser
+      ...
+    },
+    ...
+    singleRun: false, // Set singleRun to false to view via browser
+
+```
+
+6. Go to src/frontend/coverage/lcov-report under the Cloud Native Security Inspector project directory through Finder, and open index.html through a browser to view the test coverage of each file.
+![avatar](./pictures/portal-coverage.png)
+
+
+e2e test
+============
+1. [Cypress](https://docs.cypress.io/api/commands/and) learning and using official documents
+
+2. When modifying or creating a new UI page, it is necessary to perform synchronous automated testing on the newly added code. The test code can follow the [policy.cy.ts](../src/frontend/cypress/e2e/policy.cy.ts) below.
+
+```ts
+describe('Setting Test', () => {
+  beforeEach(() => {
+    Cypress.on('uncaught:exception', (err, runnable) => {
+      // returning false here prevents Cypress from
+      // failing the test
+      return false
+    })
+    // mock API
+    cy.intercept('GET', environment.api.goharbor + '/inspectionpolicies', { fixture: 'policy.json' })
+    cy.intercept('GET', '/proxy/apis/goharbor.goharbor.io/v1alpha1/settings', { fixture: 'settings.json' })
+    cy.intercept('POST', environment.api.goharbor + '/inspectionpolicies', {
+      statusCode: 201,
+      body: {
+        msg: 'created sussessful!',
+      },
+    })
+    // The page route ready to load
+    cy.visit('http://localhost:4004/policy')
+  })
+
+
+  it('new policy', () => {
+    // create policy
+    cy.intercept('GET', environment.api.goharbor + '/inspectionpolicies', { fixture: 'policy-list.json' })
+    // return policy create
+    cy.visit('http://localhost:4004/modify-policy/create')
+    // Populate page data
+    cy.get('[data-cy=name]').type('policy-test', {force: true})
+    cy.get('[data-cy=namespace]').type('cronjobs', {force: true})
+    cy.get('[data-cy=imagePullPolicy]').select('Always')
+    cy.get('[data-cy=settingsName]').select('sample-setting')
+
+
+    cy.get('[data-cy=next-one]').click()
+    cy.get('[data-cy=policySettingAddItem]').click()  
+
+    cy.get('[data-cy=key]').type('default', {force: true})
+    cy.get('[data-cy=value]').type('true', {force: true})
+
+    cy.get('[data-cy=next-two]').click()
+
+    // create policy
+    cy.get('[data-cy=created]').click()
+
+  })
+
+})
+
+```
+
+3. After the e2e test code is completed, open the src/frontend terminal under the Cloud Native Security Inspector project directory
+```bash
+$ cd src/frontend 
+
+# View the test results directly on the terminal
+$ npm run cypress:run
+#  or
+# View the test process and test results through the browser
+$ npm run cypress:open
+
+```