skyline-console/docs/en/develop/2-catalog-introduction.md

English | Chinese

Introduction to the first-level directory

• Gruntfile.js：Used to collect i18n
• LICENSE: This project uses Apache License
• Makefile:
• README.md: A brief description of the front-end startup, please refer to the docs for details
• config: webpack configuration, which contains webpack configuration in public, development environment, test environment, and build environment
• cypress.json: E2E test configuration file
• docker: Contains the docker configuration used in the development environment, generation environment, and test environment
• docs: Documentation introduction, including Chinese, English, development documentation, testing documentation, the en documentation is temporarily missing
• jest.config.js: Unit test configuration file
• jsconfig.json: javascript code configuration file
• package.json: Configuration files such as installation packages and commands
• yarn.lock: The version lock file of the package
• .babelrc: Babel configuration file
• .dockerignore: File configuration ignored by docker
• .eslintignore: File configuration ignored by eslint
• .eslint: Eslint configuration
• .gitignore: File configuration ignored by git
• .gitreview: Gitreview configuration
• .prettierignore: File configuration ignored by prettier
• .prettierrc: Prettier configuration
• src: The folder where the development code is located! ! !
• test: The folder where the test code is located! ! ! Contains e2e test code and basic code for unit testing
• tools: Other tools folder, containing git tools

Directory Introduction for src

• src/components: Public component
• src/api: API, not used yet
• src/asset: Images, template and other static files
• src/containers:
  • Components with state
  • Basic class
    • BaseList
    • BaseDetail
    • BaseForm
    • BaseModalAction
    • BaseConfirmAction
    • BaseStepAction
• src/core:
  • index.js: Entry file
  • routes.js: Routing configuration by module
  • i18n.js
  • App.jsx
• src/layouts:
  • Define all the components of the overall page layout
    • Blank layout BlankLayout
    • Layout used for login page UserLayout
    • The layout used for the content page BaseLayout(Use of lists, details, forms, etc.)
  • menu.jsx: Menu configuration used by the console
  • admin-menu.jsx: Menu configuration used by the management platform
• src/locales: i18n
• src/resources:
  • Define the state/search items of each resource being shared
  • Define the table columns where each resource is shared
  • Define the reuse function of each resource
• src/stores:
  • Data acquisition and operation of resources, etc.
  • Name the resource name according to lowercase letters and hyphens
  • The directory is divided into two levels: for example nova/instances.js, cinder/volume.js
• src/utils:
  • Public function(time format、regexp、cookie、localStorage、......)
  • Corresponding unit test, ending with test.js or spec.js
• src/styles: Basic styles, common styles, style variables, etc.
• src/pages:
  • Progressively according to the page hierarchy (according to: menu item-secondary menu)
  • All directory names are lowercase and hyphenated. The directory contains two folders containers and routers, and one file App.js
  • Store pages corresponding to secondary directories under containers
  • routes is used to configure routing

Directory Introduction for src/pages

• Divide the directory with the first and second level menus, the first level menu is listed under src/pages, and the corresponding second level menu page is under src/pages/xxx/containers, take "Compute-Instance" as an example , "Compute" corresponds to the src/pages/compute directory, and "Instance" corresponds to the src/pages/compute/containers/Instance directory
• src/pages/compute/containers/Instance/index.jsx: Instance list page, inherited from BaseList component (with Tab Page, just inherit the TabBaseList component)
• src/pages/compute/containers/Instance/Detail
  • Instance detail page
  • index.jsxinherited fromBaseDetail Component
• src/pages/compute/containers/Instance/actions
  • Instance operation
  • Lock.jsx Lock the instance, inherited fromBaseConfirmAction
  • AttachInterface.jsx inherited fromBaseModalAction
  • StepCreate/index.jsxinherited fromBaseStepAction
• src/pages/compute/routes：
  • index.js Configure routing
  • It is agreed that whether the route contains "-admin" to determine whether it is the management platform or the console

Directory Introduction for test

English | Chinese

Catalog Introduction-Image Version

.
├── Gruntfile.js (Used to collect i18n)
├── LICENSE
├── Makefile
├── README.md
├── 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    (Intance)
│   │   │   │   │   ├── 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  (Domian)
│   │   │   │   ├── 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