Added images for empty pipeline previews

ylem-co · Oct 25, 2024 · 67efae8 · 67efae8
1 parent 55ffc13
commit 67efae8
Show file tree

Hide file tree

Showing 12 changed files with 12 additions and 6 deletions.
diff --git a/ui/public/images/template-previews/0.jpeg b/ui/public/images/template-previews/0.jpeg
diff --git a/ui/public/images/template-previews/1.jpeg b/ui/public/images/template-previews/1.jpeg
diff --git a/ui/public/images/template-previews/2.jpeg b/ui/public/images/template-previews/2.jpeg
diff --git a/ui/public/images/template-previews/3.jpeg b/ui/public/images/template-previews/3.jpeg
diff --git a/ui/public/images/template-previews/4.jpeg b/ui/public/images/template-previews/4.jpeg
diff --git a/ui/public/images/template-previews/5.jpeg b/ui/public/images/template-previews/5.jpeg
diff --git a/ui/public/images/template-previews/6.jpeg b/ui/public/images/template-previews/6.jpeg
diff --git a/ui/public/images/template-previews/7.jpeg b/ui/public/images/template-previews/7.jpeg
diff --git a/ui/public/images/template-previews/8.jpeg b/ui/public/images/template-previews/8.jpeg
diff --git a/ui/public/images/template-previews/9.jpeg b/ui/public/images/template-previews/9.jpeg
diff --git a/ui/src/components/pipelines/pipelineTemplates.component.js b/ui/src/components/pipelines/pipelineTemplates.component.js
@@ -212,7 +212,7 @@ class PipelineTemplates extends React.Component {
                     this.state.elements !== null ?
                         this.state.elements.length > 0 ?
                             <Row>
-                                {this.state.elements.map(value => (
+                                {this.state.elements.map((value, index) => (
                                     value.is_template === 1 &&
                                         <Col className="col-3 mb-4" key={value.uuid}>
                                             <Card 
@@ -239,8 +239,12 @@ class PipelineTemplates extends React.Component {
                                                                 {
                                                                     'src' in value ?
                                                                         value.src !== ""
-                                                                        ? <div className="pipelineInTheList"><img src={'data:image/jpeg;base64,' + value.src} className="pipelinePreview" alt={value.name} title={value.name}/></div>
-                                                                        : <div></div>
+                                                                        ? <div className="pipelineInTheList">
+                                                                            <img src={'data:image/jpeg;base64,' + value.src} className="pipelinePreview" alt={value.name} title={value.name}/>
+                                                                        </div>
+                                                                        : <div className="pipelineInTheList">
+                                                                            <img src={'/images/template-previews/' + index % 10 + '.jpeg'} className="pipelinePreview" alt={value.name} title={value.name}/>
+                                                                        </div>
                                                                     : <div className="text-center"><Spinner animation="grow" className="spinner-primary"/></div>
                                                                 }
                                                             </div>

diff --git a/ui/src/views/pages/pipelines/Pipelines.js b/ui/src/views/pages/pipelines/Pipelines.js
@@ -1172,7 +1172,7 @@ class Pipelines extends React.Component {
                                                         {
                                                             activeItem.src !== ""
                                                                 ? <img onClick={() => this.openForm(activeItem)} src={'data:image/jpeg;base64,' + activeItem.src} className="imgPreview" alt={"Edit:" + activeItem.name} title={"Edit:" + activeItem.name}/>
-                                                                : <div className="pipelinePreview emptyPreview" onClick={() => this.openForm(activeItem)}>Click to edit</div>
+                                                                : <img onClick={() => this.openForm(activeItem)} src="/images/template-previews/3.jpeg" className="imgPreview" alt={"Edit:" + activeItem.name} title={"Edit:" + activeItem.name}/>
                                                         }
                                                     </Col>
                                                     <Col xs={6}>
@@ -1397,7 +1397,7 @@ class Pipelines extends React.Component {
                             { this.state.view === VIEW_GRID
                                 ?
                             <Row>
-                            {this.state.pipelines.map(value => (
+                            {this.state.pipelines.map((value, index) => (
                                     <Col className="col-3 mb-4" key={value.uuid}>
                                         <Card 
                                             className="withHeader onHoverCard draggable"
@@ -1438,7 +1438,9 @@ class Pipelines extends React.Component {
                                                         'src' in value ?
                                                             value.src !== ""
                                                             ? <img src={'data:image/jpeg;base64,' + value.src} onClick={() => this.openPreview(value)} className="pipelinePreview" alt={value.name} title={value.name}/>
-                                                            : <div className="pipelinePreview" onClick={() => this.openPreview(value)}></div>
+                                                            : <div className="pipelinePreview" onClick={() => this.openPreview(value)}>
+                                                                <img onClick={() => this.openPreview(value)} src={'/images/template-previews/' + index % 10 + '.jpeg'} className="pipelinePreview" alt={value.name} title={value.name}/>
+                                                            </div>
                                                         : <div className="text-center"><Spinner animation="grow" className="spinner-primary"/></div>
                                                         )
                                                         :