Skip to content

Commit

Permalink
added new container type icons, added expander logic
Browse files Browse the repository at this point in the history
  • Loading branch information
Dirk Voß committed Jan 31, 2019
1 parent 2ec729d commit ddb8554
Show file tree
Hide file tree
Showing 4 changed files with 108 additions and 35 deletions.
74 changes: 52 additions & 22 deletions frontend/src/ReviewAppCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
Expand Down Expand Up @@ -73,36 +73,49 @@
<div v-for="container in reviewApp.containers"
:key="container.vhost"
class="ra-container">
<div class="ra-container__type">
<i v-if="container.vhost.endsWith( '-frontend' )" class="material-icons">web</i>
<i v-if="container.vhost.endsWith( '-service' )" class="material-icons">dns</i>
<i v-if="container.vhost.endsWith( '-api' )" class="material-icons">developer_board</i>

<div class="ra-container__type"
:class="{ 'is-expanded': expandedContainers[ container.vhost ] }"
@click="toggleContainer( container )">
<i v-if="expandedContainers[ container.vhost ]" class="ra-icon--expander ra-icons material-icons">keyboard_arrow_down</i>
<i v-else="expandedContainers[ container.vhost ]" class="ra-icon--expander ra-icons material-icons">keyboard_arrow_right</i>
<i v-if="container.vhost.endsWith( 'openid' )" class="ra-icons material-icons">security</i>
<i v-if="container.vhost.endsWith( '-proxy' )" class="ra-icons material-icons">call_split</i>
<i v-if="container.vhost.endsWith( '-frontend' )" class="ra-icons material-icons">web</i>
<i v-if="container.vhost.endsWith( '-service' )" class="ra-icons material-icons">dns</i>
<i v-if="container.vhost.endsWith( '-api' )" class="ra-icons material-icons">developer_board</i>
</div>

<div class="ra-container__infos">
<h5>
<a :href='container.url' target="_blank">{{ container.vhost }}</a>
</h5>
<div class="ra-build-infos">
<a v-if="container.swaggerUrl" :href="container.swaggerUrl" target="_blank">API Documentation</a>
<a v-if="container.logsUrl" :href="container.logsUrl" target="_blank">Logs</a>
</div>

<div v-if="container.version" class="ra-build-infos">
<span class="ra-build-infos__date">{{ container.version[ 'build.time' ] | date }}</span>,
<span class="ra-build-infos__time">{{ container.version[ 'build.time' ] | time }}</span>
<!-- only for layout -->
<!-- <span class="ra-build-infos__date">20.07.2018</span>,
<span class="ra-build-infos__time">07:54</span> -->
<div class="ra-build-infos__wrapper"
v-if="expandedContainers[ container.vhost ]">
<div class="ra-build-infos">
<a v-if="container.swaggerUrl" :href="container.swaggerUrl" target="_blank">API Documentation</a>
<a v-if="container.logsUrl" :href="container.logsUrl" target="_blank">Logs</a>
</div>

<div v-if="container.version" class="ra-build-infos">
<span class="ra-build-infos__date">{{ container.version[ 'build.time' ] | date }}</span>,
<span class="ra-build-infos__time">{{ container.version[ 'build.time' ] | time }}</span>
<!-- only for layout -->
<!-- <span class="ra-build-infos__date">20.07.2018</span>,
<span class="ra-build-infos__time">07:54</span> -->
</div>
<p v-if="!container.version && container.vhost.endsWith( '-service' )">
<font-awesome-icon icon="spinner" spin />
</p>
</div>
<p v-if="!container.version && container.vhost.endsWith( '-service' )">
<font-awesome-icon icon="spinner" spin />
</p>
</div>

<div class="ra-container__tags">
<span class="badge" :class="badgeClass( container.containerType )" v-tooltip="tooltip( container.containerType )">{{ container.containerType }}</span>
<span v-if="container.version && container.version[ 'git.revision' ]"
<span class="badge"
:class="badgeClass( container.containerType )"
v-tooltip="tooltip( container.containerType )">{{ container.containerType }}</span>
<span v-if="container.version && container.version[ 'git.revision' ] && expandedContainers[ container.vhost ]"
class="ra-build-infos ra-build-infos__hash text-right"
:title="container.version[ 'git.revision' ]">
{{ container.version[ 'git.revision' ].slice( 0, 7 ) }}…
Expand Down Expand Up @@ -137,7 +150,8 @@
export default {
data() {
return {
currentAppName: window.location.hash.slice(1)
currentAppName: window.location.hash.slice(1),
expandedContainers: {}
};
},
components: {
Expand All @@ -162,6 +176,18 @@
props: {
reviewApp: {type: Object}
},
watch: {
reviewApp: function( newValue ) {
const { containers } = newValue;
if( containers && containers.length ) {
containers.forEach( ( { vhost } ) => {
const expanded = vhost.endsWith( '-api' ) || vhost.endsWith( '-service' );
this.$set( this.expandedContainers, [ vhost ], expanded );
} );
}
}
},
computed: {
containerVersions() {
const res = {};
Expand Down Expand Up @@ -232,6 +258,10 @@
}
return '';
},
toggleContainer( container ) {
this.expandedContainers[ container.vhost ] =
!this.expandedContainers[ container.vhost ] ;
}
}
}
Expand Down
19 changes: 10 additions & 9 deletions frontend/src/scss/_card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
Expand All @@ -25,14 +25,16 @@
*/

.card {
height: 100%;

h4 {
margin-bottom: 0;
}

h5 {
font-size: 1rem;

margin-bottom: .5rem;
margin-bottom: 0;
}

.badge {
Expand All @@ -48,6 +50,11 @@
background-color: $pale-sky;
}

.badge-secondary {
color: $oxford-blue;
background-color: $silver;
}

.card-header {
padding: 1rem;

Expand All @@ -72,10 +79,4 @@

color: $pale-sky;
}

.material-icons {
font-size: 1.5rem;

opacity: .5;
}
}
5 changes: 3 additions & 2 deletions frontend/src/scss/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
Expand All @@ -28,6 +28,7 @@ $silver: #ccc;
$dusty-gray: #999;
$pale-sky: #6c757d;
$aqua-deep: #004a43;
$oxford-blue: #384754;

$jira-new: #f5598d;
$jira-concept: #54b0fc;
Expand Down
45 changes: 43 additions & 2 deletions frontend/src/scss/_review-app-card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
Expand Down Expand Up @@ -49,6 +49,8 @@
}

.ra-build-infos {
margin-top: .25rem;

color: $dusty-gray;

a:hover,
Expand All @@ -61,11 +63,50 @@
}
}


.ra-build-infos__wrapper {
margin-top: .5rem;
}

.ra-container__type {
position: relative;

width: 1.5rem;
height: 1.5rem;

flex-grow: 0;
flex-shrink: 0;

&:hover {
cursor: pointer;

.ra-icons {
opacity: 1;
}
}
}

.ra-icons {
font-size: 1.5rem;

opacity: .5;

transition: opacity .25s ease-out;
}

.ra-icon--expander {
font-size: 1rem;

position: absolute;
top: 50%;
left: -1rem;
transform: translateY(-50%);

display: flex;
align-items: center;

width: 1rem;
height: 1.5rem;
}

.ra-container__infos {
Expand Down

0 comments on commit ddb8554

Please sign in to comment.