UNCLASSIFIED

Skip to content

GitLab

Commit 66d8f55c authored by Baban Faraj's avatar Baban Faraj Committed by graham.smith
Browse files

Removed confluence, jira, and latest pipeline icon until the links are sent... 

 Removed confluence, jira, and latest pipeline icon until the links are sent from the backend. It is currently not being sent thus its better not to display icons without href
parent b3f8835a
Hide whitespace changes
Inline Side-by-side
Showing with 375 additions and 2 deletions
src/components/ProjectsSummary.vue
View file @ 66d8f55c
...@@ -25,7 +25,13 @@ ...@@ -25,7 +25,13 @@
and star the projects that you are interested in.</v-card-text and star the projects that you are interested in.</v-card-text
> >
</v-card> </v-card>
<v-expansion-panels accordion multiple hover flat v-else> <v-expansion-panels
accordion
multiple
hover
flat
v-else-if="this.panelView === true"
>
<v-expansion-panel <v-expansion-panel
v-for="(project, index) in filteredProjects" v-for="(project, index) in filteredProjects"
:key="index" :key="index"
...@@ -231,6 +237,93 @@ ...@@ -231,6 +237,93 @@
</v-expansion-panel-content> </v-expansion-panel-content>
</v-expansion-panel> </v-expansion-panel>
</v-expansion-panels> </v-expansion-panels>
<v-row class="justify-content-center" v-else-if="this.cardView === true">
<v-col
v-for="(project, index) in filteredProjects"
lg="4"
:key="index"
:project="project"
:cols="12"
>
<v-card class="card">
<div
v-bind:class="{
'project-card-header-failed':
project.latestPipeline.status === 'failed',
'project-card-header-passed':
project.latestPipeline.status === 'passed',
}"
>
<v-card-title class="justify-content-center project-card-title">
<div>
<p>
{{ project.name }}
</p>
<v-row class="justify-content-center">
<v-tooltip top>
<template v-slot:activator="{ on, attrs }">
<v-btn
icon
:href="project.links.repo"
target="_blank"
v-bind="attrs"
v-on="on"
@click.native.stop
color="primary"
>
<v-icon small>$vuetify.icons.gitlab</v-icon>
</v-btn>
</template>
<span>GitLab repository</span>
</v-tooltip>
</v-row>
</div>
</v-card-title>
</div>
<v-card-actions>
<v-layout row justify-center class="project-card-detail">
<v-card-text v-if="project.latestPipeline">
<div class="project-card-pipeline-name">
Pipeline: {{ project.latestPipeline.name }}
</div>
</v-card-text>
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<span v-bind="attrs" v-on="on">
<GitLabIcon
v-if="
project.latestPipeline.status === 'running' ||
project.latestPipeline.status === 'pending'
"
class="status-icon"
:status="'running'"
/>
<GitLabIcon
v-if="project.latestPipeline.status === 'failed'"
class="status-icon"
:status="'failed'"
/> </span
></template>
<span>
Latest Pipeline: {{ project.latestPipeline.status }}
</span>
</v-tooltip>
<router-link
class="project-title"
target="_blank"
v-for="(
job, jIndex
) in retrieveFailedProjectJobsFromFailedPipeline(project)"
:key="jIndex"
:to="job.link"
>
<a :href="job.link" target="_blank">{{ job.name }}; </a>
</router-link>
</v-layout>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-skeleton-loader> </v-skeleton-loader>
</v-container> </v-container>
</template> </template>
...@@ -258,6 +351,8 @@ export default { ...@@ -258,6 +351,8 @@ export default {
}, },
data: () => ({ data: () => ({
loading: false, loading: false,
panelView: false,
cardView: true,
emptyString: false, emptyString: false,
error: false, error: false,
errorMessage: "", errorMessage: "",
...@@ -286,6 +381,7 @@ export default { ...@@ -286,6 +381,7 @@ export default {
this.emptyString = false; this.emptyString = false;
try { try {
const projects = await ProjectService.getProjectsSummary(); const projects = await ProjectService.getProjectsSummary();
this.failedProjectJobs = this.projects;
if (projects) { if (projects) {
this.setProjects(projects); this.setProjects(projects);
} }
...@@ -301,6 +397,21 @@ export default { ...@@ -301,6 +397,21 @@ export default {
this.setProjectLoading(false); this.setProjectLoading(false);
} }
}, },
setCardView() {
this.panelView = false;
this.cardView = true;
},
setPanelView() {
this.panelView = true;
this.cardView = false;
},
retrieveFailedProjectJobsFromFailedPipeline(project) {
if (project.latestPipeline.status === "failed") {
return (project.latestPipeline.jobs || []).filter(
(o) => o.status === "failed"
);
}
},
}, },
computed: { computed: {
filteredProjects() { filteredProjects() {
...@@ -330,6 +441,32 @@ export default { ...@@ -330,6 +441,32 @@ export default {
.status-icon { .status-icon {
width: 24px; width: 24px;
height: 24px; height: 24px;
margin-right: 10px;
}
.project-card-header-passed {
background-color: map-get($material-light, "background-accent-1");
color: map-get($material-light, "secondary-text-color");
fill: map-get($material-light, "secondary-text-color");
}
.project-card-header-failed {
background-color: #ff3838;
color: map-get($material-light, "secondary-text-color");
fill: map-get($material-light, "secondary-text-color");
}
.project-card-title {
padding-bottom: 20px;
}
.project-card-detail {
padding-top:30px;
padding-bottom: 45px;
padding-left:45px;
padding-right:45px;
}
.card {
min-height: 100%;
min-width: 100%;
max-width: 400px;
margin: auto;
} }
} }
</style> </style>
src/components/Section.vue
View file @ 66d8f55c
...@@ -20,6 +20,7 @@ ...@@ -20,6 +20,7 @@
</template> </template>
<span>Refresh</span> <span>Refresh</span>
</v-tooltip> </v-tooltip>
<slot name="header-bar-icons"> </slot>
<v-btn <v-btn
v-if="!hideCollapse && !hideCollapseButton" v-if="!hideCollapse && !hideCollapseButton"
icon icon
......
src/views/Projects.vue
View file @ 66d8f55c
...@@ -11,6 +11,38 @@ ...@@ -11,6 +11,38 @@
:loading="loadingProjectData" :loading="loadingProjectData"
:refreshClick="refreshProjectData" :refreshClick="refreshProjectData"
> >
<div
slot="header-bar-icons"
:cardViewProjects="cardViewProjects"
:panelViewProjects="panelViewProjects"
>
<v-tooltip top >
<template v-slot:activator="{ on, attrs }">
<v-btn
icon
v-bind="attrs"
v-on="on"
@click="cardViewProjects"
>
<v-icon>mdi-view-grid</v-icon>
</v-btn>
</template>
<span>Card View</span>
</v-tooltip>
<v-tooltip top >
<template v-slot:activator="{ on, attrs }">
<v-btn
icon
v-bind="attrs"
v-on="on"
@click="panelViewProjects"
>
<v-icon>mdi-reorder-horizontal</v-icon>
</v-btn>
</template>
<span>Panel View</span>
</v-tooltip>
</div>
<ProjectsSummary <ProjectsSummary
slot="content" slot="content"
ref="projectSummary" ref="projectSummary"
...@@ -41,6 +73,12 @@ export default { ...@@ -41,6 +73,12 @@ export default {
refreshProjectData() { refreshProjectData() {
this.$refs.projectSummary.refreshProjects(); this.$refs.projectSummary.refreshProjects();
}, },
cardViewProjects() {
this.$refs.projectSummary.setCardView();
},
panelViewProjects() {
this.$refs.projectSummary.setPanelView();
},
setProjectLoading(loading) { setProjectLoading(loading) {
this.loadingProjectData = loading; this.loadingProjectData = loading;
}, },
......
src/views/user/LaunchboardUser.vue
View file @ 66d8f55c
...@@ -59,6 +59,39 @@ ...@@ -59,6 +59,39 @@
:refreshClick="refreshProjectData" :refreshClick="refreshProjectData"
headerTitle="My Project Summary" headerTitle="My Project Summary"
> >
<div
class="align-items-center d-flex "
slot="header-bar-icons"
:cardViewProjects="cardViewProjects"
:panelViewProjects="panelViewProjects"
>
<v-tooltip top>
<template v-slot:activator="{ on, attrs }">
<v-btn
icon
v-bind="attrs"
v-on="on"
@click="cardViewProjects"
>
<v-icon>mdi-view-grid</v-icon>
</v-btn>
</template>
<span>Card View</span>
</v-tooltip>
<v-tooltip top>
<template v-slot:activator="{ on, attrs }">
<v-btn
icon
v-bind="attrs"
v-on="on"
@click="panelViewProjects"
>
<v-icon>mdi-reorder-horizontal</v-icon>
</v-btn>
</template>
<span>Panel View</span>
</v-tooltip>
</div>
<span slot="userinfo"> <span slot="userinfo">
<TutorialTooltip tooltipName="projects"> <TutorialTooltip tooltipName="projects">
<span id="projectsTutorialTooltip"></span> <span id="projectsTutorialTooltip"></span>
...@@ -135,6 +168,12 @@ export default { ...@@ -135,6 +168,12 @@ export default {
refreshProjectData() { refreshProjectData() {
this.$refs.projectSummary.refreshProjects(); this.$refs.projectSummary.refreshProjects();
}, },
cardViewProjects() {
this.$refs.projectSummary.setCardView();
},
panelViewProjects() {
this.$refs.projectSummary.setPanelView();
},
refreshCurriculumSchedule() { refreshCurriculumSchedule() {
this.$refs.curriculumSchedule.refreshCurriculumSchedule(); this.$refs.curriculumSchedule.refreshCurriculumSchedule();
}, },
......
tests/unit/components/ProjectsSummary.spec.js
View file @ 66d8f55c
...@@ -35,6 +35,101 @@ describe("ProjectsSummary", () => { ...@@ -35,6 +35,101 @@ describe("ProjectsSummary", () => {
expect(wrapper.find(".error").exists()).toBe(false); expect(wrapper.find(".error").exists()).toBe(false);
}); });
it("should set panelView true and cardView false", () => {
ProjectService.getProjectsSummary = jest.fn();
// render the component
const wrapper = shallowMount(ProjectsSummary, {
mocks: {
$store: {
state: {
error: {},
projects: {
list: [],
},
},
commit: jest.fn(),
},
},
data() {
return {
cardView: true,
panelView: false,
};
},
localVue,
vuetify,
});
wrapper.vm.setPanelView();
expect(
wrapper.vm.panelView === true && wrapper.vm.cardView === false
).toBeTruthy();
});
it("should set panelView false and cardView true", () => {
ProjectService.getProjectsSummary = jest.fn();
// render the component
const wrapper = shallowMount(ProjectsSummary, {
mocks: {
$store: {
state: {
error: {},
projects: {
list: [],
},
},
commit: jest.fn(),
},
},
data() {
return {
cardView: true,
panelView: false,
};
},
localVue,
vuetify,
});
wrapper.vm.setCardView();
expect(
wrapper.vm.panelView === false && wrapper.vm.cardView === true
).toBeTruthy();
});
it("should return only failed jobs from a failed pipeline given a project", () => {
ProjectService.getProjectsSummary = jest.fn();
// render the component
const wrapper = shallowMount(ProjectsSummary, {
mocks: {
$store: {
state: {
error: {},
projects: {
list: [],
},
},
commit: jest.fn(),
},
},
localVue,
vuetify,
});
const failedProjectJobs =
wrapper.vm.retrieveFailedProjectJobsFromFailedPipeline({
id: "1",
links: {},
latestPipeline: {
name: "testPipeline",
status: "failed",
latestPipeline: "",
message: "test",
jobs: [
{ name: "e2e-test", status: "failed", link: "" },
{ name: "e2e-test2", status: "passed", link: "" },
],
},
favorite: true,
});
expect(failedProjectJobs.length === 1).toBeTruthy();
});
it("should filter by favorited projects", () => { it("should filter by favorited projects", () => {
ProjectService.getProjectsSummary = jest.fn(); ProjectService.getProjectsSummary = jest.fn();
// render the component // render the component
......
tests/unit/views/Projects.spec.js
View file @ 66d8f55c
...@@ -27,6 +27,18 @@ describe("Projects", () => { ...@@ -27,6 +27,18 @@ describe("Projects", () => {
wrapper.vm.refreshProjectData(); wrapper.vm.refreshProjectData();
expect(wrapper.vm.$refs.projectSummary.refreshProjects).toHaveBeenCalled(); expect(wrapper.vm.$refs.projectSummary.refreshProjects).toHaveBeenCalled();
}); });
it("should call setCardView", async () => {
const wrapper = shallowMount(Projects, { store, localVue });
wrapper.vm.$refs.projectSummary.setCardView = jest.fn();
wrapper.vm.cardViewProjects();
expect(wrapper.vm.$refs.projectSummary.setCardView).toHaveBeenCalled();
});
it("should call setPanelView", async () => {
const wrapper = shallowMount(Projects, { store, localVue });
wrapper.vm.$refs.projectSummary.setPanelView = jest.fn();
wrapper.vm.panelViewProjects();
expect(wrapper.vm.$refs.projectSummary.setPanelView).toHaveBeenCalled();
});
it("should call setProjectLoading", async () => { it("should call setProjectLoading", async () => {
const wrapper = shallowMount(Projects, { store, localVue }); const wrapper = shallowMount(Projects, { store, localVue });
wrapper.vm.setProjectLoading(true); wrapper.vm.setProjectLoading(true);
......
tests/unit/views/user/LaunchboardUser.spec.js
View file @ 66d8f55c
...@@ -67,7 +67,58 @@ describe("LaunchboardUser", () => { ...@@ -67,7 +67,58 @@ describe("LaunchboardUser", () => {
}; };
expect(wrapper.vm.showWelcomeMessage).toBe(true); expect(wrapper.vm.showWelcomeMessage).toBe(true);
}); });
it("should call setCardView", async () => {
const store = new Vuex.Store({
state: {
user: {
user: { name: "mock user", permission: Permission.USER },
},
userPreferences: {
userPreference: {
darkMode: true,
welcomeMessage: true,
},
},
},
});
const wrapper = shallowMount(LaunchboardUser, {
mocks: {
$vuetify: { breakpoint: { xsOnly: true } },
},
vuetify,
store,
localVue,
});
wrapper.vm.$refs.projectSummary.setCardView = jest.fn();
wrapper.vm.cardViewProjects();
expect(wrapper.vm.$refs.projectSummary.setCardView).toHaveBeenCalled();
});
it("should call setPanelView", async () => {
const store = new Vuex.Store({
state: {
user: {
user: { name: "mock user", permission: Permission.USER },
},
userPreferences: {
userPreference: {
darkMode: true,
welcomeMessage: true,
},
},
},
});
const wrapper = shallowMount(LaunchboardUser, {
mocks: {
$vuetify: { breakpoint: { xsOnly: true } },
},
vuetify,
store,
localVue,
});
wrapper.vm.$refs.projectSummary.setPanelView = jest.fn();
wrapper.vm.panelViewProjects();
expect(wrapper.vm.$refs.projectSummary.setPanelView).toHaveBeenCalled();
});
it("should refresh project data", async () => { it("should refresh project data", async () => {
const store = new Vuex.Store({ const store = new Vuex.Store({
state: { state: {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

UNCLASSIFIED