Fix: Enhance the project introduction (#725)

* Fix: Enhance the project introduction Signed-off-by: barnettZQG <barnett.zqg@gmail.com> * Fix: change the readme Signed-off-by: barnettZQG <barnett.zqg@gmail.com> --------- Signed-off-by: barnettZQG <barnett.zqg@gmail.com>
kubevela · Mar 28, 2023 · 93ecac2 · 93ecac2
1 parent f7f1236
commit 93ecac2
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 64 deletions.
diff --git a/.gitignore b/.gitignore
@@ -36,4 +36,6 @@ dist
 .yarn/unplugged
 .yarn/install-state.gz
 
-.pnp.*
+.pnp.*
+
+tsconfig.tsbuildinfo
diff --git a/README.md b/README.md
@@ -5,13 +5,21 @@
 
 ## Overview
 
-The [KubeVela](https://github.com/oam-dev/kubevela) User Experience (UX) Dashboard. Designed as an extensible, application-oriented delivery platform.
+[VelaUX](https://github.com/kubevela/velaux) is a web portal for KubeVela end users, and also functions as an opinionated application delivery platform. Additionally, it operates as a highly adaptable plugin framework, empowering developers to create bespoke plugins and smoothly integrate them into the KubeVela platform. This approach delivers unparalleled flexibility and customization options for scaling up the platform's capabilities.
+
+### Highlights
+
+*Customizable User Interface*: With VelaUX, enterprises can tailor the user interface to their specific needs for managing applications and infrastructure. This feature leads to a more intuitive and efficient user experience, resulting in increased productivity and better resource utilization.
+
+*Easy Integration*: VelaUX is designed for seamless integration with the KubeVela platform, simplifying the deployment and management of cloud-native atomic capabilities within the platform. This makes it easier for enterprises to build platforms that meet their needs for continuous application delivery, observability, security, and other requirements based on these cloud-native atomic capabilities.
+
+*Out-of-Box Platform*: VelaUX provides a comprehensive set of features that empower enterprises to deploy and monitor their applications effectively. These features include multi-cluster and multi-environment support, pipeline management, observability, and more. Additionally, VelaUX streamlines the complexities of Kubernetes, making it simpler for users to manage their deployments.
 
 ## Quick Start
 
 ### Users
 
-Please refer to: [https://kubevela.net/docs/install](https://kubevela.net/docs/install)
+Please refer to this guide to install: [https://kubevela.net/docs/install](https://kubevela.net/docs/install)
 
 ### Developers
 

diff --git a/packages/velaux-ui/src/components/WorkflowStudio/step-icon.tsx b/packages/velaux-ui/src/components/WorkflowStudio/step-icon.tsx
@@ -46,7 +46,7 @@ export const StepTypeIcon = (props: { type: string }) => {
     case 'webhook':
       return <SvgApi width="24px" height="24px" />;
     case 'suspend':
-      return <AiOutlineSafetyCertificate />;
+      return <AiOutlineSafetyCertificate size="24" />;
     case 'collect-service-endpoints':
       return (
         <SvgEp

diff --git a/packages/velaux-ui/src/components/WorkflowStudio/type-select.tsx b/packages/velaux-ui/src/components/WorkflowStudio/type-select.tsx
@@ -37,7 +37,7 @@ const defaultCategory: Record<string, DefinitionCategory> = {
     definitions: [],
     sort: 3,
   },
-  'Terraform': {
+  Terraform: {
     title: 'Terraform',
     description: 'Terraform workflow steps',
     definitions: [],
@@ -73,7 +73,7 @@ const defaultCategory: Record<string, DefinitionCategory> = {
     definitions: [],
     sort: 8,
   },
-  'Custom': {
+  Custom: {
     title: 'Custom',
     description: 'Custom Workflow or Pipeline steps',
     definitions: [],
@@ -83,7 +83,7 @@ const defaultCategory: Record<string, DefinitionCategory> = {
 
 const initDefinitionCategory = (defs: DefinitionBase[]) => {
   return defs.map((def) => {
-    if(!def.category || def.category==""){
+    if (!def.category || def.category == '') {
       def.category = 'Custom';
     }
     return def;
@@ -95,6 +95,9 @@ const buildDefinitionCategory = (defs: DefinitionBase[]) => {
   const categoryMap: Record<string, DefinitionCategory> = _.cloneDeep(defaultCategory);
   customDefs.map((def) => {
     const category = def.category;
+    if (!category) {
+      return;
+    }
     if (categoryMap[category]) {
       categoryMap[category].definitions.push(def);
     } else {
@@ -173,7 +176,12 @@ class TypeSelect extends React.Component<Props, State> {
               .filter((c) => c.definitions.length > 0)
               .map((category) => {
                 return (
-                  <Card title={category.title} contentHeight={'auto'} key={category.title} subTitle={category.description}>
+                  <Card
+                    title={category.title}
+                    contentHeight={'auto'}
+                    key={category.title}
+                    subTitle={category.description}
+                  >
                     <div className="def-items">
                       {category.definitions?.map((def) => {
                         const item = (

diff --git a/packages/velaux-ui/src/pages/ApplicationList/components/SelectSearch/index.tsx b/packages/velaux-ui/src/pages/ApplicationList/components/SelectSearch/index.tsx
@@ -77,15 +77,16 @@ class SelectSearch extends React.Component<Props, State> {
 
   handleChangeLabel(value: string[]) {
     const { setLabelValue } = this.props;
-    let label = value? value:[]
-    setLabelValue(label)
-    this.setState({
-      labelValue: label,
-    },
-    () => {
-      this.getApplications();
-    });
-
+    let label = value ? value : [];
+    setLabelValue(label);
+    this.setState(
+      {
+        labelValue: label,
+      },
+      () => {
+        this.getApplications();
+      }
+    );
   }
 
   onChangeEnv = (e: string) => {
@@ -105,7 +106,7 @@ class SelectSearch extends React.Component<Props, State> {
 
   getApplications = async () => {
     const { projectValue, inputValue, envValue, labelValue } = this.state;
-    const labelSelector = labelValue.join(",")
+    const labelSelector = labelValue.join(',');
     const params = {
       project: projectValue,
       query: inputValue,
@@ -144,7 +145,7 @@ class SelectSearch extends React.Component<Props, State> {
     });
     return (
       <Row className="app-select-wrapper border-radius-8" wrap={true}>
-        <Col xl={6} m={4} s={6} xxs={12} style={{ padding: '0 8px' }}>
+        <Col xl={4} m={4} s={6} xxs={12} style={{ padding: '0 8px' }}>
           <Select
             locale={locale().Select}
             mode="single"
@@ -157,7 +158,7 @@ class SelectSearch extends React.Component<Props, State> {
             value={projectValue}
           />
         </Col>
-        <Col xl={6} m={4} s={6} xxs={12} style={{ padding: '0 8px' }}>
+        <Col xl={4} m={4} s={6} xxs={12} style={{ padding: '0 8px' }}>
           <Select
             locale={locale().Select}
             mode="single"
@@ -170,7 +171,19 @@ class SelectSearch extends React.Component<Props, State> {
             value={envValue}
           />
         </Col>
-        <Col xl={6} m={8} s={12} xxs={24} style={{ padding: '0 8px' }}>
+        <Col xl={4} m={8} s={12} xxs={24} style={{ padding: '0 8px' }}>
+          <Input
+            innerAfter={<AiOutlineSearch onClick={this.handleClickSearch} style={{ margin: 4 }} />}
+            hasClear
+            size="large"
+            placeholder={appPlaceholder}
+            onChange={this.handleChangName}
+            onPressEnter={this.handleClickSearch}
+            value={inputValue}
+            className="item"
+          />
+        </Col>
+        <Col xl={8} m={8} s={12} xxs={24} style={{ padding: '0 8px' }}>
           <Select
             hasClear
             size="large"
@@ -183,20 +196,8 @@ class SelectSearch extends React.Component<Props, State> {
             dataSource={labelSource}
           />
         </Col>
-        <Col xl={6} m={8} s={12} xxs={24} style={{ padding: '0 8px' }}>
-          <Input
-            innerAfter={<AiOutlineSearch onClick={this.handleClickSearch} style={{ margin: 4 }} />}
-            hasClear
-            size="large"
-            placeholder={appPlaceholder}
-            onChange={this.handleChangName}
-            onPressEnter={this.handleClickSearch}
-            value={inputValue}
-            className="item"
-          />
-        </Col>
-        <Col xl={6} className="flexboth">
-          <div className="padding16">
+        <Col xl={4} className="flexboth">
+          <div className="padding16 show-mode">
             <Button type={'secondary'} onClick={() => this.getApplications()}>
               <Icon type="refresh" />
             </Button>

diff --git a/packages/velaux-ui/src/pages/PipelineStudio/index.tsx b/packages/velaux-ui/src/pages/PipelineStudio/index.tsx
@@ -184,8 +184,8 @@ class PipelineStudio extends React.Component<Props, State> {
           )}
           <Card contentHeight={'auto'}>
             <Row>
-              <Col span={11} />
-              <Col span={2}>
+              <Col span={10} />
+              <Col span={4}>
                 <ButtonGroup>
                   <Button
                     onClick={() => {
@@ -206,7 +206,7 @@ class PipelineStudio extends React.Component<Props, State> {
                 </ButtonGroup>
               </Col>
               <Col
-                span={11}
+                span={10}
                 style={{
                   display: 'flex',
                   justifyContent: 'end',

diff --git a/packages/velaux-ui/src/pages/ProjectApplications/components/SelectSearch/index.less b/packages/velaux-ui/src/pages/ProjectApplications/components/SelectSearch/index.less
@@ -5,10 +5,6 @@
     min-width: 100%;
     margin: 16px 0;
   }
-  .create-btn-wrapper {
-    float: right;
-    margin-top: 15px;
-  }
   .border-radius-8 {
     border-radius: 8px;
   }

diff --git a/packages/velaux-ui/src/pages/ProjectApplications/components/SelectSearch/index.tsx b/packages/velaux-ui/src/pages/ProjectApplications/components/SelectSearch/index.tsx
@@ -47,7 +47,7 @@ class SelectSearch extends React.Component<Props, State> {
       },
       () => {
         this.getApplications();
-      },
+      }
     );
   }
 
@@ -64,7 +64,7 @@ class SelectSearch extends React.Component<Props, State> {
       },
       () => {
         this.getApplications();
-      },
+      }
     );
   };
 
@@ -140,15 +140,9 @@ class SelectSearch extends React.Component<Props, State> {
               </Col>
               <Col xl={6} m={8} s={12} xxs={24} style={{ padding: '0 8px' }}>
                 <Input
-                  innerAfter={
-                    <Icon
-                      type="search"
-                      size="xs"
-                      onClick={this.handleClickSearch}
-                      style={{ margin: 4 }}
-                    />
-                  }
+                  innerAfter={<Icon type="search" size="xs" onClick={this.handleClickSearch} style={{ margin: 4 }} />}
                   hasClear
+                  size="large"
                   placeholder={i18n.t('Search by name and description etc')}
                   onChange={this.handleChangName}
                   onPressEnter={this.handleClickSearch}
@@ -177,18 +171,16 @@ class SelectSearch extends React.Component<Props, State> {
             </Row>
           </Col>
           <Col span="4">
-            <Permission
-              request={{ resource: `project:${projectName}/application:*`, action: 'create' }}
-              project={projectName}
-            >
-              <Button
-                className="create-btn-wrapper"
-                type="primary"
-                onClick={this.onCreateApplication}
+            <div className="show-mode">
+              <Permission
+                request={{ resource: `project:${projectName}/application:*`, action: 'create' }}
+                project={projectName}
               >
-                <Translation>New Application</Translation>
-              </Button>
-            </Permission>
+                <Button className="create-btn-wrapper" type="primary" onClick={this.onCreateApplication}>
+                  <Translation>New Application</Translation>
+                </Button>
+              </Permission>
+            </div>
           </Col>
         </Row>
       </Fragment>

diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo