Skip to content

Commit

Permalink
feat: support vib 0.6.0 layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@mirkobrombin
mirkobrombin committed Apr 24, 2024
1 parent 91ad13e commit 61ebefe
Show file tree
Hide file tree
Showing 7 changed files with 168 additions and 139 deletions.
50 changes: 40 additions & 10 deletions src/components/RecipeDetails.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<div class="card-content">
<div class="content">
<span class="title is-1">
{{ recipe.modules.length }}
{{ getModulesCount(recipe.stages) }}
</span>
</div>
</div>
Expand Down Expand Up @@ -71,7 +71,7 @@
<div class="card-content">
<div class="content">
<span class="title is-1">
{{ recipe.runs.length }}
{{ getRunsCount(recipe.stages) }}
</span>
</div>
</div>
Expand All @@ -80,15 +80,16 @@
</div>


<div v-if="recipe.modules.length">
<div v-if="getModulesCount(recipe.stages) > 0">
<div class="block">
<h3 class="title is-3">Modules Usage</h3>
</div>

<div class="block">
<div class="bar-chart">
<div v-for="(moduleType, index) in chartData.labels" :key="index" class="bar-segment"
:style="{ height: getSegmentHeight(moduleType) + '%' }" :class="getSegmentUsageClass(moduleType)">
:style="{ height: getSegmentHeight(moduleType) + '%' }"
:class="getSegmentUsageClass(moduleType)">
<span>{{ moduleType }} ({{ chartData.datasets[0].data[index] }})</span>
</div>
</div>
Expand All @@ -111,9 +112,11 @@ export default defineComponent({
computed: {
chartData() {
const moduleTypesCount: Record<string, number> = {};
for (const module of this.recipe.modules) {
const moduleType = module.type;
moduleTypesCount[moduleType] = (moduleTypesCount[moduleType] || 0) + 1;
for (const stage of this.recipe.stages) {
for (const module of stage.modules) {
const moduleType = module.type;
moduleTypesCount[moduleType] = (moduleTypesCount[moduleType] || 0) + 1;
}
}
return {
labels: Object.keys(moduleTypesCount),
Expand All @@ -129,7 +132,7 @@ export default defineComponent({
methods: {
getSegmentHeight(moduleType: string) {
const moduleCount = this.chartData.datasets[0].data[this.chartData.labels.indexOf(moduleType)];
const totalModules = this.recipe.modules.length;
const totalModules = this.getAllModulesCount();
const res = (moduleCount / totalModules) * 100;
if (res < 9) {
return 9;
Expand All @@ -138,9 +141,9 @@ export default defineComponent({
},
getSegmentUsageClass(moduleType: string) {
const moduleCount = this.chartData.datasets[0].data[this.chartData.labels.indexOf(moduleType)];
const totalModules = this.recipe.modules.length;
const totalModules = this.getAllModulesCount();
const usage = (moduleCount / totalModules) * 100;
console.log(usage);
if (usage > 50) {
return "bar-segment--high";
}
Expand All @@ -151,7 +154,34 @@ export default defineComponent({
return "bar-segment--low";
}
return "bar-segment--very-low";
},
getModulesCount(stages: any[]) {
let result = 0;
stages.forEach((stage) => {
if (!stage.modules) return;
result += stage.modules.length;
});
return result;
},
getRunsCount(stages: any[]) {
let result = 0;
stages.forEach((stage) => {
if (!stage.runs) return;
result += stage.runs.length;
});
return result;
},
getAllModulesCount() {
let result = 0;
for (const stage of this.recipe.stages) {
if (!stage.modules) continue;
result += stage.modules.length;
}
return result;
},
},
});
Expand Down
115 changes: 57 additions & 58 deletions src/components/RecipeModules.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,53 +8,54 @@
<input class="input" type="search" v-model="searchQuery" placeholder="Search modules" />
</div>
</div>
<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
<thead>
<tr>
<th><abbr>Name</abbr></th>
<th><abbr>Type</abbr></th>
<th></th>
</tr>
</thead>
<tbody v-for="(module, index) in filteredModules" :key="index">
<tr :class="hasNestedModules(module) ? 'has-background-white-ter' : ''">
<td>
<div class="flex">
<span v-if="hasNestedModules(module)" @click="toggleNested(module)">
<i class="mdi material-icons click">
{{ isNestedExpanded(module) ? 'keyboard_arrow_down' : 'keyboard_arrow_right' }}
</i>
</span>
{{ module.name }}
</div>
</td>
<td>
<div class="badge">
<span class="mdi material-icons">{{ getModuleTypeClass(module.type) }}</span>
{{ module.type }}
</div>
</td>
<td>
<div class="buttons">
<button class="button" @click="showModuleDetails(module)" title="Show module details">
<span class="icon">
<i class="material-icons">list</i>

<div v-for="(group, groupIndex) in moduleGroups" :key="groupIndex">
<h2 class="title is-4" v-if="groupIndex != 'nested'">Stage "{{ groupIndex }}"</h2>
<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
<thead>
<tr>
<th><abbr>Name</abbr></th>
<th><abbr>Type</abbr></th>
<th></th>
</tr>
</thead>
<tbody v-for="(module, index) in group" :key="index">
<tr :class="hasNestedModules(module) ? 'has-background-white-ter' : ''">
<td>
<div class="flex">
<span v-if="hasNestedModules(module)" @click="toggleNested(module)">
<i class="mdi material-icons click">
{{ isNestedExpanded(module) ? 'keyboard_arrow_down' : 'keyboard_arrow_right' }}
</i>
</span>
</button>
<copy-btn :textToCopy="getRouteToModule(module)" title="Copy link to module"></copy-btn>
</div>
</td>
</tr>
<tr v-if="hasNestedModules(module) && isNestedExpanded(module)" class="has-background-light">
<td colspan=" 3">
<recipe-modules :recipe="module" :moduleDetails="moduleDetails"
@showModuleDetails="showModuleDetails" @closeModuleDetails="goBack"></recipe-modules>
</td>
</tr>
</tbody>
</table>
<div v-if="filteredModules.length === 0">
<td colspan="3">No modules found.</td>
{{ module.name }}
</div>
</td>
<td>
<div class="badge">
<span class="mdi material-icons">{{ getModuleTypeClass(module.type) }}</span>
{{ module.type }}
</div>
</td>
<td>
<div class="buttons">
<button class="button" @click="showModuleDetails(module)" title="Show module details">
<span class="icon">
<i class="material-icons">list</i>
</span>
</button>
<copy-btn :textToCopy="getRouteToModule(module)" title="Copy link to module"></copy-btn>
</div>
</td>
</tr>
<tr v-if="hasNestedModules(module) && isNestedExpanded(module)" class="has-background-light">
<td colspan=" 3">
<recipe-modules :recipe="module" :moduleDetails="moduleDetails"
@showModuleDetails="showModuleDetails" @closeModuleDetails="goBack"></recipe-modules>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div v-else>
Expand Down Expand Up @@ -147,7 +148,7 @@

<script lang="ts">
import atlasHelpers from "@/core/helpers";
import type { Module } from "@/core/models";
import type { Module, Stage } from "@/core/models";
import * as yaml from "js-yaml";
import { defineComponent } from "vue";
import CopyBtn from "./CopyBtn.vue";
Expand All @@ -171,19 +172,17 @@ export default defineComponent({
return {
searchQuery: "",
expandedModules: [] as Module[],
moduleGroups: {} as Record<string, Module[]>,
};
},
computed: {
filteredModules() {
const query = this.searchQuery.toLowerCase().trim();
if (!query) {
return this.recipe.modules;
}
return this.recipe.modules.filter(
(module: Module) =>
module.name.toLowerCase().includes(query) || module.type.toLowerCase().includes(query)
);
},
mounted() {
if (!this.recipe.stages) {
this.moduleGroups["nested"] = this.recipe.modules;
return;
}
this.recipe.stages.forEach((stage: Stage) => {
this.moduleGroups[stage.id] = stage.modules;
});
},
methods: {
showModuleDetails(module: any) {
Expand Down
13 changes: 8 additions & 5 deletions src/components/RecipeRuns.vue
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
<template>
<ul>
<li v-for="(value, index) in recipe.runs" :key="index">
<pre class="block" v-highlight:bash><code>{{ value }}</code></pre>
</li>
</ul>
<div v-for="(stage, index) in recipe.stages" :key="index">
<h2 class="title is-4">Stage "{{ stage.id }}"</h2>
<ul>
<li v-for="(value, index) in stage.runs" :key="index">
<pre class="block" v-highlight:bash><code>{{ value }}</code></pre>
</li>
</ul>
</div>
</template>

<script lang="ts">
Expand Down
78 changes: 25 additions & 53 deletions src/core/manager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,51 +46,32 @@ export default {
const recipeYaml = await this.fetchRecipeFromRepo(repo);
if (recipeYaml !== null) {
console.log(`Parsing recipe.yml from ${repo}`);
const recipeObject = yaml.load(recipeYaml) as VibRecipe;
recipeObject.repo = repo;
const modules: Module[] = [];

if (recipeObject.modules) {
for (const module of recipeObject.modules) {
const recipeData = yaml.load(recipeYaml) as VibRecipe;
recipeData.repo = repo;
// @ts-ignore
recipeData.stages = await Promise.all(recipeData.stages.map(async stage => {
const processedModules = stage.modules ? await Promise.all(stage.modules.map(async module => {
if (module.includes) {
console.log(
`Fetching and processing included modules for ${repo}`
);
for (const includePath of module.includes) {
const moduleContent = await this.fetchModuleContentFromRepo(
repo,
includePath
);
if (moduleContent) {
try {
const includedModule = yaml.load(
moduleContent
) as Module;
modules.push(includedModule);
} catch (error) {
console.error(
`Error parsing included module from ${repo}: ${(error as Error).message}`
);
}
}
}
} else {
modules.push(module);
console.log(`Fetching and processing included modules for ${repo}`);
return {
...module,
modules: await Promise.all(module.includes.map(async includePath => {
const moduleContent = await this.fetchModuleContentFromRepo(repo, includePath);
return moduleContent ? yaml.load(moduleContent) as Module : module;
}))
};
}
}
}

recipeObject.id = repo.replace("/", "-");
recipeObject.modules = modules;
vibRecipes.push(recipeObject);
return module;
})) : [];
return { ...stage, modules: processedModules };
}));
vibRecipes.push(recipeData);
}
});

await Promise.all(fetchPromises);
} catch (error) {
console.error(
`Error fetching or parsing recipes: ${(error as Error).message}`
);
console.error(`Error fetching or parsing recipes: ${(error as Error).message}`);
}

store.$patch({ vibRecipes: vibRecipes });
Expand All @@ -102,12 +83,7 @@ export default {

async getVibRecipe(id: string): Promise<VibRecipe | null> {
const vibRecipes = await this.getVibRecipes(false);
for (const recipe of vibRecipes) {
if (recipe.id === id) {
return recipe;
}
}
return null;
return vibRecipes.find(recipe => recipe.id === id) || null;
},

async getFetchDate(): Promise<Date | null> {
Expand All @@ -124,9 +100,7 @@ export default {
const response = await axios.get(url);
return response.data;
} catch (error) {
console.error(
`Error fetching recipe.yml from ${repo}: ${(error as Error).message}`
);
console.error(`Error fetching recipe.yml from ${repo}: ${(error as Error).message}`);
return null;
}
},
Expand All @@ -135,14 +109,12 @@ export default {
repo: string,
path: string
): Promise<string | null> {
const url = `${AtlasConfig.registry}/${repo}/main/${path}.yml`;
const url = `${AtlasConfig.registry}/${repo}/main/${path}`;
try {
const response = await axios.get(url);
return response.data;
} catch (error) {
console.error(
`Error fetching module content from ${url}: ${(error as Error).message}`
);
console.error(`Error fetching module content from ${url}: ${(error as Error).message}`);
return null;
}
},
Expand All @@ -155,9 +127,9 @@ export default {
},
};

// @ts-ignore
declare module "@vue/runtime-core" {
//Bind to `this` keyword
interface IAtlasManager {
interface ComponentCustomProperties {
$atlasManager: IAtlasManager;
}
}
Loading

0 comments on commit 61ebefe

Please sign in to comment.