docs: add development guide

add development guide

Change-Id: Id8fcac77eb5691e297f99cfe845c1b53bf1709bf
This commit is contained in:
yangshaoxue 2022-09-08 18:12:07 +08:00
parent 2f4eb2d36b
commit c069ce5aaf
4 changed files with 624 additions and 151 deletions

View File

@ -1,2 +1,346 @@
Catalog Introduction
~~~~~~~~~~~~~~~~~~~~
Introduction to the first-level directory
-----------------------------------------
- :guilabel:`Gruntfile.js`: Used to collect i18n
- :guilabel:`LICENSE`: This project uses Apache License
- :guilabel:`Makefile`
- :guilabel:`README.rst`: A brief description of the front-end startup,
please refer to the docs for details
- :guilabel:`config`: webpack configuration, which contains webpack
configuration in public, development environment, test environment,
and build environment
- :guilabel:`cypress.json`: E2E test configuration file
- :guilabel:`docker`: Contains the docker configuration used in the
development environment, generation environment, and test environment
- :guilabel:`docs`: Documentation introduction, including Chinese, English,
development documentation, testing documentation
- :guilabel:`jest.config.js`: Unit test configuration file
- :guilabel:`jsconfig.json`: javascript code configuration file
- :guilabel:`package.json`: Configuration files such as installation
packages and commands
- :guilabel:`yarn.lock`: The version lock file of the package
- :guilabel:`.babelrc`: Babel configuration file
- :guilabel:`.dockerignore`: File configuration ignored by docker
- :guilabel:`.eslintignore`: File configuration ignored by eslint
- :guilabel:`.eslint`: Eslint configuration
- :guilabel:`.gitignore`: File configuration ignored by git
- :guilabel:`.gitreview`: Gitreview configuration
- :guilabel:`.prettierignore`: File configuration ignored by prettier
- :guilabel:`.prettierrc`: Prettier configuration
- :guilabel:`src`: **The folder where the development code is located**
- :guilabel:`test`: **The folder where the test code is located,
contains e2e test code and basic code for unit testing**
- :guilabel:`tools`: Other tools folder, containing git tools
Catalog Introduction-Image Version
-----------------------------------
.. code-block:: text
.
├── Gruntfile.js (Used to collect i18n)
├── LICENSE
├── Makefile
├── README.rst
├── config
│   ├── theme.js
│   ├── webpack.common.js
│   ├── webpack.dev.js (Webpack configuration used during development)
│   ├── webpack.e2e.js (The webpack configuration used during e2e testing can generate a package for testing coverage)
│   └── webpack.prod.js (Webpack packaging configuration used by the generation environment)
├── cypress.json (E2E configuration)
├── docker
│   ├── dev.dockerfile
│   ├── nginx.conf
│   ├── prod.dockerfile
│   └── test.dockerfile
├── docs (Documents)
├── jest.config.js (Unit testing configuration)
├── jsconfig.json
├── package.json
├── src
│   ├── api (Api summary, not used yet)
│   ├── asset
│   │   ├── image (Images placement)
│   │   └── template
│   │   └── index.html
│   ├── components (Public components)
│   ├── containers
│   │   ├── Action
│   │   │   ├── ConfirmAction (Confirmed action base class)
│   │   │   ├── FormAction (Single page action base class)
│   │   │   ├── ModalAction (Pop-up action base class)
│   │   │   ├── StepAction (Multi-step single-page action, for example: create a cloud host)
│   │   │   └── index.jsx
│   │   ├── BaseDetail (Detail page base class with detailed information)
│   │   ├── List (The base class of the list page, for example: cloud host)
│   │   ├── TabDetail (The base class of the detail page with tab switching, for example: instance details)
│   │   └── TabList (List page with tab switch)
│   ├── core
│   │   ├── App.jsx
│   │   ├── i18n.js
│   │   ├── index.jsx (Entry)
│   │   └── routes.js (Routing configuration by module)
│   ├── layouts
│   │   ├── Base (Layout used after login)
│   │   ├── Blank (Blank layout)
│   │   ├── User (Layout used for login)
│   │   ├── admin-menu.jsx (Menu configuration used by the management platform)
│   │   └── menu.jsx (Menu configuration used by the console)
│   ├── locales (Translation)
│   │   ├── en.json
│   │   ├── index.js
│   │   └── zh.json
│   ├── pages (The page-directory structure is assigned according to: menu item-secondary menu, where the pages of the secondary menu are placed in the containers folder)
│   │   ├── base
│   │   │   ├── App.jsx
│   │   │   ├── containers
│   │   │   │   ├── 404 (404 page)
│   │   │   │   │   └── index.jsx
│   │   │   │   ├── AdminOverview (Management platform home page)
│   │   │   │   │   ├── components
│   │   │   │   │   │   ├── ComputeService.jsx
│   │   │   │   │   │   ├── NetworkService.jsx
│   │   │   │   │   │   ├── PlatformInfo.jsx
│   │   │   │   │   │   ├── ResourceOverview.jsx
│   │   │   │   │   │   └── VirtualResource.jsx
│   │   │   │   │   ├── index.jsx
│   │   │   │   │   └── style.less
│   │   │   │   └── Overview (Console home page)
│   │   │   │   ├── components
│   │   │   │   │   ├── ProjectInfo.jsx
│   │   │   │   │   ├── QuotaOverview.jsx
│   │   │   │   │   └── ResourceStatistic.jsx
│   │   │   │   ├── index.jsx
│   │   │   │   └── style.less
│   │   │   └── routes (Routing configuration)
│   │   │   └── index.js
│   │   ├── compute
│   │   │   ├── App.jsx
│   │   │   ├── containers
│   │   │   │   ├── BareMetalNode (Bare metal configuration)
│   │   │   │   ├── Flavor (Instance type)
│   │   │   │   ├── HostAggregate (Host Aggregate)
│   │   │   │   │   ├── Aggregate (Host Aggregate)
│   │   │   │   │   ├── AvailabilityZone (Availability zone)
│   │   │   │   │   └── index.jsx
│   │   │   │   ├── Hypervisors (Hypervisors management)
│   │   │   │   │   ├── ComputeHost (Compute host)
│   │   │   │   │   ├── Hypervisor (Hypervisor manager)
│   │   │   │   │   └── index.jsx
│   │   │   │   ├── Image (Image)
│   │   │   │   ├── Instance (Instance)
│   │   │   │   │   ├── Detail (Detail page)
│   │   │   │   │   │   ├── BaseDetail (Base info)
│   │   │   │   │   │   ├── SecurityGroup (Security group)
│   │   │   │   │   │   └── index.jsx
│   │   │   │   │   ├── actions (Actions)
│   │   │   │   │   │   ├── AssociateFip.jsx (Associate fip ip)
│   │   │   │   │   │   ├── AttachInterface.jsx (Attach interface)
│   │   │   │   │   │   ├── AttachIsoVolume.jsx (Attach iso volume)
│   │   │   │   │   │   ├── AttachVolume.jsx (Attach volume)
│   │   │   │   │   │   ├── ChangePassword.jsx (Change password)
│   │   │   │   │   │   ├── Console.jsx (Console)
│   │   │   │   │   │   ├── CreateImage.jsx (Create Image)
│   │   │   │   │   │   ├── CreateIronic (Create ironic-Step-by-step Form)
│   │   │   │   │   │   │   ├── BaseStep
│   │   │   │   │   │   │   │   └── index.jsx
│   │   │   │   │   │   │   ├── ConfirmStep
│   │   │   │   │   │   │   │   └── index.jsx
│   │   │   │   │   │   │   ├── NetworkStep
│   │   │   │   │   │   │   │   └── index.jsx
│   │   │   │   │   │   │   ├── SystemStep
│   │   │   │   │   │   │   │   └── index.jsx
│   │   │   │   │   │   │   ├── index.jsx
│   │   │   │   │   │   │   └── index.less
│   │   │   │   │   │   ├── CreateSnapshot.jsx (Create snapshot)
│   │   │   │   │   │   ├── Delete.jsx (Delete instance)
│   │   │   │   │   │   ├── DeleteIronic.jsx (Delete ironic)
│   │   │   │   │   │   ├── DetachInterface.jsx (Detach interface)
│   │   │   │   │   │   ├── DetachIsoVolume.jsx (Detach iso volume)
│   │   │   │   │   │   ├── DetachVolume.jsx (Detach volume)
│   │   │   │   │   │   ├── DisassociateFip.jsx (Disassociate fip iP)
│   │   │   │   │   │   ├── Edit.jsx (Edit instance)
│   │   │   │   │   │   ├── ExtendRootVolume.jsx (Expand the root disk)
│   │   │   │   │   │   ├── LiveMigrate.jsx (Live migrate)
│   │   │   │   │   │   ├── Lock.jsx (Lock instance)
│   │   │   │   │   │   ├── ManageSecurityGroup.jsx (Manage security group)
│   │   │   │   │   │   ├── Migrate.jsx (Migrate)
│   │   │   │   │   │   ├── Pause.jsx (Pause instance)
│   │   │   │   │   │   ├── Reboot.jsx (Reboot instance)
│   │   │   │   │   │   ├── Rebuild.jsx (Rebuild instance)
│   │   │   │   │   │   ├── RebuildSelect.jsx (Select the image to rebuild the instance)
│   │   │   │   │   │   ├── Resize.jsx (Change configuration)
│   │   │   │   │   │   ├── ResizeOnline.jsx (Modify configuration online)
│   │   │   │   │   │   ├── Resume.jsx (Resume instance)
│   │   │   │   │   │   ├── Shelve.jsx (Shelve instance)
│   │   │   │   │   │   ├── SoftDelete.jsx (Soft delete instance)
│   │   │   │   │   │   ├── SoftReboot.jsx (Soft reboot instance)
│   │   │   │   │   │   ├── Start.jsx (Start instance)
│   │   │   │   │   │   ├── StepCreate (Create a instance-step by step creation)
│   │   │   │   │   │   │   ├── BaseStep
│   │   │   │   │   │   │   │   └── index.jsx
│   │   │   │   │   │   │   ├── ConfirmStep
│   │   │   │   │   │   │   │   └── index.jsx
│   │   │   │   │   │   │   ├── NetworkStep
│   │   │   │   │   │   │   │   └── index.jsx
│   │   │   │   │   │   │   ├── SystemStep
│   │   │   │   │   │   │   │   └── index.jsx
│   │   │   │   │   │   │   ├── index.jsx
│   │   │   │   │   │   │   └── index.less
│   │   │   │   │   │   ├── Stop.jsx (Stop instance)
│   │   │   │   │   │   ├── Suspend.jsx (Suspend instance)
│   │   │   │   │   │   ├── Unlock.jsx (Unlock instance)
│   │   │   │   │   │   ├── Unpause.jsx (Unpause instance)
│   │   │   │   │   │   ├── Unshelve.jsx (Unshelve instance)
│   │   │   │   │   │   ├── index.jsx
│   │   │   │   │   │   └── index.less
│   │   │   │   │   ├── components (Component)
│   │   │   │   │   │   ├── FlavorSelectTable.jsx
│   │   │   │   │   │   └── index.less
│   │   │   │   │   ├── index.jsx
│   │   │   │   │   └── index.less
│   │   │   │   ├── Keypair (Key pair)
│   │   │   │   └── ServerGroup (Instance group)
│   │   │   └── routes (Routing configuration under the compute menu)
│   │   │   └── index.js
│   │   ├── configuration (Platform configuration)
│   │   │   ├── App.jsx
│   │   │   ├── containers
│   │   │   │   ├── Metadata (Metadata definition)
│   │   │   │   ├── Setting (System configuration)
│   │   │   │   └── SystemInfo (System info)
│   │   │   └── routes (Routing configuration under the platform configuration menu)
│   │   │   └── index.js
│   │   ├── heat (Resource orchestration)
│   │   │   ├── App.jsx
│   │   │   ├── containers
│   │   │   │   └── Stack (Stack)
│   │   │   └── routes (Routing configuration under the resource arrangement menu)
│   │   │   └── index.js
│   │   ├── identity (Identity management)
│   │   │   ├── App.jsx
│   │   │   ├── containers
│   │   │   │   ├── Domain (Domain)
│   │   │   │   ├── Project (Project)
│   │   │   │   ├── Role (Role)
│   │   │   │   ├── User (User)
│   │   │   │   └── UserGroup (User group)
│   │   │   └── routes (Routing configuration)
│   │   │   └── index.js
│   │   ├── management (Operation and maintenance management)
│   │   │   ├── App.jsx
│   │   │   ├── containers
│   │   │   │   └── RecycleBin (Recycle bin)
│   │   │   └── routes (Routing configuration)
│   │   │   └── index.js
│   │   ├── network (Network)
│   │   │   ├── App.jsx
│   │   │   ├── containers
│   │   │   │   ├── FloatingIp (Floating ip)
│   │   │   │   ├── LoadBalancers (Load balancing)
│   │   │   │   ├── Network (Network)
│   │   │   │   ├── QoSPolicy (Qos policy)
│   │   │   │   ├── Router (Routing)
│   │   │   │   ├── SecurityGroup (Security group)
│   │   │   │   ├── Topology (Network topology)
│   │   │   │   ├── VPN (VPN)
│   │   │   │   └── VirtualAdapter (Virtual Adapter)
│   │   │   └── routes (Routing configuration)
│   │   │   └── index.js
│   │   ├── storage (Storage)
│   │   │   ├── App.jsx
│   │   │   ├── containers
│   │   │   │   ├── Backup (Backup)
│   │   │   │   ├── Snapshot (Volume snapshot)
│   │   │   │   ├── Storage (Storage backend)
│   │   │   │   ├── Volume (Volume)
│   │   │   │   └── VolumeType (Volume type)
│   │   │   │   ├── QosSpec (QoS)
│   │   │   │   ├── VolumeType (Volume type)
│   │   │   │   └── index.jsx
│   │   │   └── routes ()
│   │   │   └── index.js
│   │   └── user (Login page)
│   │   ├── App.jsx
│   │   ├── containers
│   │   │   ├── ChangePassword (Change password-according to system configuration)
│   │   │   │   ├── index.jsx
│   │   │   │   └── index.less
│   │   │   └── Login (Login)
│   │   │   ├── index.jsx
│   │   │   └── index.less
│   │   └── routes (Routing configuration)
│   │   └── index.js
│   ├── resources (Store the public functions and status of each resource used by itself)
│   ├── stores (Data processing, divide folders by resource type)
│   │   ├── base-list.js (Base class for list data)
│   │   ├── base.js (Base class for data manipulation)
│   │   ├── cinder
│   │   ├── glance
│   │   ├── heat
│   │   ├── ironic
│   │   ├── keystone
│   │   ├── neutron
│   │   ├── nova
│   │   ├── octavia
│   │   ├── overview-admin.js
│   │   ├── project.js
│   │   ├── root.js
│   │   └── skyline
│   ├── styles (Public styles)
│   │   ├── base.less
│   │   ├── main.less
│   │   ├── reset.less
│   │   └── variables.less
│   └── utils (Public functions)
│   ├── RouterConfig.jsx
│   ├── constants.js
│   ├── cookie.js
│   ├── file.js
│   ├── file.spec.js
│   ├── index.js
│   ├── index.test.js (Unit testing)
│   ├── local-storage.js
│   ├── local-storage.spec.js (Unit testing)
│   ├── request.js
│   ├── table.jsx
│   ├── time.js
│   ├── time.spec.js
│   ├── translate.js
│   ├── translate.spec.js
│   ├── validate.js
│   ├── yaml.js
│   └── yaml.spec.js
├── test
│   ├── e2e (E2E testing)
│   └── unit (Unit testing)
├── tools
│   └── git_config
│   └── commit_message.txt
└── yarn.lock

View File

@ -1,2 +1,121 @@
Ready To Work
~~~~~~~~~~~~~~
For more information about installation, refer to the :ref:`source-install-ubuntu`
Preparation before development
------------------------------
- Node environment
- Requirement in package.json: ``"node": ">=10.22.0"``
- Verify nodejs version
.. code-block:: console
node -v
- Yarn
- Install yarn
.. code-block:: console
npm install -g yarn
- Install dependencies
- Execute in the project root directory, which is the same level as
``package.json``, and wait patiently for the installation to complete
.. code-block:: console
yarn install
- Prepare a usable backend
- Prepare an accessible backend, for example: ``https://172.20.154.250``
- Modify the corresponding configuration in ``config/webpack.dev.js``:
.. code-block:: javascript
if (API === 'mock' || API === 'dev') {
devServer.proxy = {
'/api': {
target: 'https://172.20.154.250',
changeOrigin: true,
secure: false,
},
};
}
- Configure access host and port
- Modify :guilabel:`devServer.host` and :guilabel:`devServer.port`
- Modify the corresponding configuration in ``config/webpack.dev.js``
.. code-block:: javascript
const devServer = {
host: '0.0.0.0',
// host: 'localhost',
port: 8088,
contentBase: root('dist'),
historyApiFallback: true,
compress: true,
hot: true,
inline: true,
disableHostCheck: true,
// progress: true
};
- Completed
- Execute in the project root directory, which is the same level
as ``package.json``
.. code-block:: console
yarn run dev
- Use the :guilabel:`host` and :guilabel:`port` configured in
``config/webpack.dev.js`` to access, such as ``http://localhost:8088``
- The front-end real-time update environment used for development is done.
Front-end package used in production environment
------------------------------------------------
Have the required ``nodejs`` and ``yarn``
Execute in the project root directory, which is the same level
as ``package.json``
.. code-block:: console
yarn run build
The packaged files are in the ``dist`` directory and handed over
to the deployment personnel.
Front-end package used for testing
-----------------------------------
Have the required ``nodejs`` and ``yarn``
Execute in the project root directory, which is the same level
as ``package.json``
.. code-block:: console
yarn run build:test
The packaged files are in the ``dist`` directory
.. note::
This test package is designed to measure code coverage
It is recommended to use nginx to complete the E2E test with code coverage

View File

@ -83,11 +83,11 @@ Catalog Introduction
├── setup-tests.js (setup uni test)
└── svg-mock.js (Mock of image loading)
#. E2E test code, stored in the ``test/e2e`` directory
E2E test code, stored in the ``test/e2e`` directory
- Other global configurations of E2E are stored in ``cypress.json``
#. The basic code of the unit test is stored in the ``test/unit`` directory
The basic code of the unit test is stored in the ``test/unit`` directory
- Other global configuration of unit test, stored in ``jest.config.js``

View File

@ -13,7 +13,8 @@ The following is an introduction, taking the instance use case
Generally, when testing the corresponding functions of a resource,
follow the following order
#. Prepare relevant variables in text
1. Prepare relevant variables in text
-------------------------------------
- Required parameters when creating a resource, such as: name, password
@ -32,7 +33,8 @@ follow the following order
const networkName = `e2e-network-for-instance-${uuid}`;
const routerName = `e2e-router-for-instance-${uuid}`;
#. Login before operation
2. Login before operation
-------------------------
- If you are operating console resources, please use :guilabel:`cy.login`
@ -48,7 +50,10 @@ follow the following order
cy.login(listUrl);
});
#. Create associated resources, use the resource creation function provided in
3. Create associated resources
------------------------------
Create associated resources, use the resource creation function provided in
``resource-commands.js``, take the test instance as an example
- Create a network for testing to create a instance, attach interface
@ -80,17 +85,21 @@ follow the following order
cy.createVolume(volumeName);
#. Write cases for creating resources
4. Write cases
--------------
#. Write use cases for accessing resource details
#. Write use cases corresponding to all operations of resources separately
- Write cases for creating resources
- Write use cases for accessing resource details
- Write use cases corresponding to all operations of resources separately
Generally, the use case of the :guilabel:`edit` operation is written later,
and then the use case of the :guilabel:`delete` operation is written,
so that you can test whether the editing is effective
#. To delete associated resources, use the resource-deleting function provided
5. delete associated resources
-------------------------------
To delete associated resources, use the resource-deleting function provided
in ``resource-commands.js``, this is to make the resources in the test
account as clean as possible after the test case is executed
@ -124,7 +133,8 @@ follow the following order
cy.deleteAllAvailableVolume();
The ``4``, ``5``, and ``6`` in the above steps are mainly used
Reference
----------
- The function operation form in ``test/e2e/support/form-commands.js``,
please refer to the detailed introduction