refactor: create components of the atest ui

[LinuxSuRen]

We highly recommend you read the contributor's documentation before starting the review process especially since this is your first contribution to this project.

It was updated on 2024/5/27

What type of PR is this?

What this PR does / why we need it:

Which issue(s) this PR fixes:

Fixes #

[github-actions]

There are 1 test cases, failed count 0:

Name	Average	Max	Min	Count	Error
	9.435735ms	10.428654ms	8.807265ms	3	0

Reported by api-testing.

[codacy-production]

Coverage summary from Codacy

See diff coverage on Codacy

Coverage variation	Diff coverage
✅ +0.47% (target: -1.00%)	❌ 73.33% (target: 80.00%)

Coverage variation details

	Coverable lines	Covered lines	Coverage
Common ancestor commit (3a9bde8)	17689	7320	41.38%
Head commit (70e9ede)	18157 (+468)	7599 (+279)	41.85% (+0.47%)

Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: <coverage of head commit> - <coverage of common ancestor commit>

Diff coverage details

	Coverable lines	Covered lines	Diff coverage
Pull request (#520)	15	11	73.33%

Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: <covered lines added or modified>/<coverable lines added or modified> * 100%

See your quality gate settings    Change summary preferences

_{Codacy stopped sending the deprecated coverage status on June 5th, 2024. Learn more}

[sonarqubecloud]

Quality Gate failed

Failed conditions
1 Security Hotspot

See analysis details on SonarCloud

[sonarqubecloud]

Quality Gate failed

Failed conditions
2 Security Hotspots

See analysis details on SonarCloud