@@ -446,17 +447,17 @@ async function changeElementType(metricIndex) {
No details
-
{{ Object.keys(slotProps.data[1].measure.event)?.[0] }}
{{ Object.keys(Object.values(slotProps.data[1].measure.event)?.[0])?.[0] ? '→' : '' }}
-
{{ Object.keys(Object.values(slotProps.data[1].measure.event)?.[0])?.[0] }}
-
+
@@ -473,7 +474,7 @@ async function changeElementType(metricIndex) {
-
+
@@ -495,8 +496,8 @@ async function changeElementType(metricIndex) {
-
-
+
+
@@ -508,18 +509,18 @@ async function changeElementType(metricIndex) {
-
-
+
+
@@ -539,7 +540,6 @@ async function changeElementType(metricIndex) {
-
diff --git a/src/components/NavMenu.vue b/src/components/NavMenu.vue
new file mode 100644
index 0000000..74cae85
--- /dev/null
+++ b/src/components/NavMenu.vue
@@ -0,0 +1,343 @@
+
+
+
+
+
+
+
diff --git a/src/components/Scope.vue b/src/components/Scope.vue
index 40cf076..cb4dcf0 100644
--- a/src/components/Scope.vue
+++ b/src/components/Scope.vue
@@ -1,12 +1,13 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{slotProps.value}}
-
-
-
-
-
-
-
-
-
-
-
-
-
- You must select a course.
-
-
-
-
-
- You must select a project.
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/components/StepDisplay.vue b/src/components/StepDisplay.vue
index d32a0f0..614c066 100644
--- a/src/components/StepDisplay.vue
+++ b/src/components/StepDisplay.vue
@@ -7,7 +7,6 @@ import { useAppThemeStore } from '@/stores/appTheme';
import Tag from 'primevue/tag';
import Chips from 'primevue/chips';
-import Toast from 'primevue/toast';
import Button from 'primevue/button';
import Dropdown from 'primevue/dropdown';
import Fieldset from 'primevue/fieldset';
@@ -230,7 +229,7 @@ function moveStep(event, stepNumber, direction) {
Cache:
-
+
@@ -281,7 +280,7 @@ function moveStep(event, stepNumber, direction) {
Cache:
-
+
@@ -332,7 +331,6 @@ function moveStep(event, stepNumber, direction) {
-
diff --git a/src/components/TreeBrowser.vue b/src/components/TreeBrowser.vue
new file mode 100644
index 0000000..7ec0dde
--- /dev/null
+++ b/src/components/TreeBrowser.vue
@@ -0,0 +1,525 @@
+
+
+
+
+
+
+
+
+
+ {{ nodes[0].name }}
+
+
+
+
+
+ Show hidden courses:
+
+
+
+
+
+
+
+
+
+
+
+ {{ course.classId }}
+
+
+
+
+
+ Auto run
+
+
+
+
+
+
+
+
+
+
+ {{ project.name }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Identities
+
+ -
+
+
{{ key }}: {{ value }}
+
+
+
+
No data available
+
+
Credentials
+
+ -
+
+
{{ key }}: {{ value }}
+
+
+
+
No data available
+
+
+
Members
+
+
+ -
+
+
{{ key }}: {{ value }}
+
+
+
+ No data available
+
+
+
+
+
+
+
+
+
No projects available
+
+
+
+
+
+
+
+
+
+
diff --git a/src/main.js b/src/main.js
index 3da8296..eba8f70 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,26 +1,32 @@
-import { createApp, markRaw } from 'vue'
-import App from './App.vue'
-import router from './router'
+import { createApp, markRaw } from 'vue';
+import App from './App.vue';
+import router from './router';
import PrimeVue from 'primevue/config';
-import { createPinia } from 'pinia'
+import Tooltip from 'primevue/tooltip';
+import { createPinia } from 'pinia';
import ToastService from 'primevue/toastservice';
import ConfirmationService from 'primevue/confirmationservice';
-import Markdown from 'vue3-markdown-it';
-import '@/assets/main.css'
+
+import '@/assets/main.css';
import '@/assets/styles/layout.scss';
import 'primevue/resources/primevue.min.css';
-import 'primeicons/primeicons.css';
-import 'primeflex/primeflex.css'
+import 'primeicons/primeicons.css';
+import 'primeflex/primeflex.css';
+
+const pinia = createPinia();
+pinia.use(({ store }) => {
+ store.router = markRaw(router);
+});
+
+const app = createApp(App);
-const pinia = createPinia()
-pinia.use(({ store }) => { store.router = markRaw(router) });
+app.use(router)
+ .use(pinia)
+ .use(PrimeVue)
+ .use(ToastService)
+ .use(ConfirmationService)
+
+app.directive('tooltip', Tooltip);
-createApp(App)
- .use(router)
- .use(pinia)
- .use(PrimeVue)
- .use(ToastService)
- .use(ConfirmationService)
- .use(Markdown)
- .mount('#app');
+app.mount('#app');
diff --git a/src/router/index.js b/src/router/index.js
index 935868c..ba7f4bc 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,14 +8,14 @@ const routes = [
component: Home,
},
{
- path: "/visualization/:courseId?/:projectId?",
- name: "visualization",
- component: () => import("@/views/TpaDetails.vue"),
+ path: '/tpa-template/:templateId?',
+ name: 'tpa-template',
+ component: () => import('@/views/TPA-Template.vue'),
},
{
- path: "/edition/:courseId?/:projectId?",
- name: "edition",
- component: () => import("@/views/TpaDetails.vue"),
+ path: "/tpa/:classId?/:projectId?",
+ name: "tpa",
+ component: () => import("@/views/TPA.vue"),
},
{
path: "/catalogue",
@@ -27,10 +27,25 @@ const routes = [
name: "notFound",
component: () => import("@/views/NotFound.vue"),
},
+ {
+ path: '/templates-management',
+ name: 'templates-management',
+ component: () => import('@/views/TemplatesManagement.vue'),
+ },
+ {
+ path: "/new-course",
+ name: "new-course",
+ component: () => import("@/views/NewCourse.vue"),
+ },
+ {
+ path: "/tpa-list/:classId?",
+ name: "tpa-list",
+ component: () => import("@/views/TPA-list.vue"),
+ }
]
const router = createRouter({
- history: createWebHistory(), // Since this is a SPA, we need to manage this in the server by redirecting all the routes to index.html.
+ history: createWebHistory(),
routes,
})
diff --git a/src/stores/bluejayInfra.js b/src/stores/bluejayInfra.js
new file mode 100644
index 0000000..4352f27
--- /dev/null
+++ b/src/stores/bluejayInfra.js
@@ -0,0 +1,37 @@
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+
+export const bluejayInfraStore = defineStore("bluejayInfra", () => {
+ const REGISTRY_URL = ref(process.env.REGISTRY_URL || "http://localhost:5400");
+ const COLLECTOR_EVENTS_URL = ref(
+ process.env.COLLECTOR_EVENTS_URL || "http://localhost:5500"
+ );
+ const DASHBOARD_URL = ref(process.env.DASHBOARD_URL || "http://localhost:5600");
+ const REPORTER_URL = ref(process.env.REPORTER_URL || "http://localhost:5300");
+
+ const isProductionEnvironment = ref(localStorage.getItem("isProductionEnvironment") === "true");
+ const ASSETS_MANAGER_URL = computed(() => {
+ if (process.env.ASSETS_MANAGER_URL) {
+ return process.env.ASSETS_MANAGER_URL;
+ }
+ if (isProductionEnvironment.value) {
+ return "http://bluejay-assets-manager";
+ }
+ return "http://host.docker.internal:5200";
+ });
+
+ const SCOPE_MANAGER_URL = computed(() => {
+ if (process.env.SCOPE_MANAGER_URL) {
+ return process.env.SCOPE_MANAGER_URL;
+ }
+ if (isProductionEnvironment.value) {
+ return "http://bluejay-scope-manager";
+ }
+ return "http://host.docker.internal:5700";
+ });
+
+ return {REGISTRY_URL, COLLECTOR_EVENTS_URL, isProductionEnvironment, ASSETS_MANAGER_URL, SCOPE_MANAGER_URL, DASHBOARD_URL, REPORTER_URL,};
+});
+
+
+
diff --git a/src/stores/tpaEdition.js b/src/stores/tpaEdition.js
index 8c1bdf8..cb40c3d 100644
--- a/src/stores/tpaEdition.js
+++ b/src/stores/tpaEdition.js
@@ -1,173 +1,301 @@
-import _ from 'lodash'
-import axios from 'axios'
-import { ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
-import { defineStore } from 'pinia'
+import _ from "lodash";
+import axios from "axios";
+import { ref } from "vue";
+import { defineStore } from "pinia";
import * as prettier from "prettier";
-let prettierPluginGraphql;
+import { bluejayInfraStore } from "@/stores/bluejayInfra";
+import { useTPAMode } from "@/utils/tpaMode.js";
-if (process.env.NODE_ENV !== 'test') {
- import('https://unpkg.com/prettier@3.0.3/plugins/graphql.mjs').then((module) => {
- prettierPluginGraphql = module.default;
- });
-}
+let prettierPluginGraphql;
+const bluejayInfra = bluejayInfraStore();
+const { tpaEditMode } = useTPAMode();
-export const useTpaEditionStore = defineStore('tpaEdition', () => {
- const originalTpa = ref(null)
- const modifiedTpa = ref(null)
- const discardButtonClicked = ref(false)
- const REGISTRY_URL = process.env.REGISTRY_URL || 'http://localhost:5400'
- const COLLECTOR_EVENTS_URL = process.env.COLLECTOR_EVENTS_URL || 'http://localhost:5500'
- const isProductionEnvironment = ref(localStorage.getItem('isProductionEnvironment') === 'true')
- const ASSETS_MANAGER_URL = () => isProductionEnvironment.value ? "http://bluejay-assets-manager" : "http://host.docker.internal:5200"
- const SCOPE_MANAGER_URL = () => isProductionEnvironment.value ? "http://bluejay-scope-manager" : "http://host.docker.internal:5700"
-
- const route = useRoute();
- const isEditionMode = ref(route.path.includes('edition'))
+if (process.env.NODE_ENV !== "test") {
+ import("https://unpkg.com/prettier@3.0.3/plugins/graphql.mjs").then(
+ (module) => {
+ prettierPluginGraphql = module.default;
+ }
+ );
+}
- watch(() => route, (newRoute) => {
- isEditionMode.value = newRoute.path.includes('edition')
- }, { deep: true })
+export const useTpaEditionStore = defineStore("tpaEdition", () => {
+ const originalTpa = ref(null);
+ const modifiedTpa = ref(null);
+ const discardButtonClicked = ref(false);
+ const REGISTRY_URL = bluejayInfra.REGISTRY_URL;
+ const COLLECTOR_EVENTS_URL = bluejayInfra.COLLECTOR_EVENTS_URL;
+ const SCOPE_MANAGER_URL = bluejayInfra.SCOPE_MANAGER_URL;
+ const ASSETS_MANAGER_URL = bluejayInfra.ASSETS_MANAGER_URL;
+ const isProductionEnvironment = ref(
+ localStorage.getItem("isProductionEnvironment") === "true"
+ );
const BLOCK_TYPES = [
- 'correlated',
- 'divider-changer',
- 'divider-changer-github',
- 'divider-github',
- 'divider-github-states',
- 'gauge',
- 'gauge-notZero',
- 'gauge-period-time',
- 'gauge-period-time-correlation-notZero',
- 'gauge-period-time-correlation-notZero-member',
- 'gauge-time',
- 'gauge-time-correlation',
- 'gauge-time-correlation-notZero',
- 'gauge-time-notZero',
- 'time-gauge',
- 'time-gauge-notZero',
- 'time-graph',
- 'time-graph-count',
- 'time-graph-count-groupby',
- 'time-graph-notZero',
- 'time-graph2',
- 'time-graph2-member',
- 'time-graph2-member-groupby',
- 'time-graph2-member-notZero',
- 'time-graph2-notZero'
+ "correlated",
+ "divider-changer",
+ "divider-changer-github",
+ "divider-github",
+ "divider-github-states",
+ "gauge",
+ "gauge-notZero",
+ "gauge-period-time",
+ "gauge-period-time-correlation-notZero",
+ "gauge-period-time-correlation-notZero-member",
+ "gauge-time",
+ "gauge-time-correlation",
+ "gauge-time-correlation-notZero",
+ "gauge-time-notZero",
+ "time-gauge",
+ "time-gauge-notZero",
+ "time-graph",
+ "time-graph-count",
+ "time-graph-count-groupby",
+ "time-graph-notZero",
+ "time-graph2",
+ "time-graph2-member",
+ "time-graph2-member-groupby",
+ "time-graph2-member-notZero",
+ "time-graph2-notZero",
];
const COLLECTOR_ELEMENT_TYPES = [
{ label: "Number", value: "number" },
{ label: "Github GraphQL", value: "githubGQL" },
- { label: "JSON", value: "json" }
- ]
-
- const COLLECTOR_EVENT_SOURCES = ["github", "githubCI", "githubGQL", "gitlab", "ghwrapper", "pivotal", "heroku", "travis", "codeclimate", "redmine", "jira"]
+ { label: "JSON", value: "json" },
+ ];
+
+ const COLLECTOR_EVENT_SOURCES = [
+ "github",
+ "githubCI",
+ "githubGQL",
+ "gitlab",
+ "ghwrapper",
+ "pivotal",
+ "heroku",
+ "travis",
+ "codeclimate",
+ "redmine",
+ "jira",
+ ];
const COLLECTOR_EVENT_ENDPOINTS = {
- github: ["events", "mergedPR", "closedPR", "openPR", "allPR", "closedPRFiles"],
+ github: [
+ "events",
+ "mergedPR",
+ "closedPR",
+ "openPR",
+ "allPR",
+ "closedPRFiles",
+ ],
githubCI: ["builds"],
githubGQL: ["custom"],
- gitlab: ["events", "mergedMR", "closedMR", "allMR", "newBranches", "newBranchesAllRepos", "updatedBranches", "branchesUpdateRatioAllRepos", "closedBranches", "closedBranchesAllRepos", "commits", "releases"],
+ gitlab: [
+ "events",
+ "mergedMR",
+ "closedMR",
+ "allMR",
+ "newBranches",
+ "newBranchesAllRepos",
+ "updatedBranches",
+ "branchesUpdateRatioAllRepos",
+ "closedBranches",
+ "closedBranchesAllRepos",
+ "commits",
+ "releases",
+ ],
ghwrapper: ["events"],
pivotal: ["activity", "stories"],
heroku: ["releases", "builds"],
travis: ["builds_public", "builds_private"],
codeclimate: ["coverage"],
- redmine: ["newIssues", "inProgressIssues30Days", "updatedIssues", "inProgressIssuesByMember", "issuesMovedToInProgress", "inProgressIssuesClosed", "closedIssues", "closedIssues30Days", "closedIssuesOnePoint5Days"],
- jira: ["newIssues", "updatedIssues"]
- }
+ redmine: [
+ "newIssues",
+ "inProgressIssues30Days",
+ "updatedIssues",
+ "inProgressIssuesByMember",
+ "issuesMovedToInProgress",
+ "inProgressIssuesClosed",
+ "closedIssues",
+ "closedIssues30Days",
+ "closedIssuesOnePoint5Days",
+ ],
+ jira: ["newIssues", "updatedIssues"],
+ };
const STEP_TYPES = [
{ label: "GraphQL query", value: "queryGetObject" },
{ label: "Select data by path", value: "objectGetSubObjects" },
{ label: "Filter data", value: "objectsFilterObjects" },
{ label: "Execute custom function", value: "runScript" },
- ]
+ ];
const WINDOW_PERIOD_OPTIONS = [
- { label: 'Hourly', value: 'hourly' },
- { label: 'Daily', value: 'daily' },
- { label: 'Weekly', value: 'weekly' },
- { label: 'Biweekly', value: 'biweekly' },
- { label: 'Monthly', value: 'monthly' },
- { label: 'Bimonthly', value: 'bimonthly' },
- { label: 'Annually', value: 'annually'}
- ]
+ { label: "Hourly", value: "hourly" },
+ { label: "Daily", value: "daily" },
+ { label: "Weekly", value: "weekly" },
+ { label: "Biweekly", value: "biweekly" },
+ { label: "Monthly", value: "monthly" },
+ { label: "Bimonthly", value: "bimonthly" },
+ { label: "Annually", value: "annually" },
+ ];
function setInitialTpaData(tpa) {
- originalTpa.value = _.cloneDeep(tpa)
- modifiedTpa.value = _.cloneDeep(tpa)
+ originalTpa.value = _.cloneDeep(tpa);
+ modifiedTpa.value = _.cloneDeep(tpa);
}
-
- async function saveTpaChanges() {
+ async function saveTpaChanges(tpa_type) {
// Remove "member" from scope if checkbox is not checked
- if (modifiedTpa.value.context.definitions.scopes.development?.member?.default !== "*") {
- deleteTpaField('context.definitions.scopes.development.member')
+ if (
+ modifiedTpa.value.context.definitions.scopes.development?.member
+ ?.default !== "*"
+ ) {
+ deleteTpaField("context.definitions.scopes.development.member");
}
-
// Production or development environment transformation
- modifiedTpa.value = JSON.parse(JSON.stringify(modifiedTpa.value)
- .replace(/http:\/\/(host\.docker\.internal:5700|[^\/]+-scope-manager)/g, SCOPE_MANAGER_URL())
- .replace(/http:\/\/(host\.docker\.internal:5200|[^\/]+-assets-manager)/g, ASSETS_MANAGER_URL()))
-
+ modifiedTpa.value = JSON.parse(
+ JSON.stringify(modifiedTpa.value)
+ .replace(
+ /http:\/\/(host\.docker\.internal:5700|[^\/]+-scope-manager)/g,
+ SCOPE_MANAGER_URL
+ )
+ .replace(
+ /http:\/\/(host\.docker\.internal:5200|[^\/]+-assets-manager)/g,
+ ASSETS_MANAGER_URL
+ )
+ );
try {
- // If "Project ID" or "Course ID" are modified, replace in the TPA and reload the page to update the app values with the new ones
- const areIdsModified = originalTpa.value.context.definitions.scopes.development.project.default !== modifiedTpa.value.context.definitions.scopes.development.project.default
- || originalTpa.value.context.definitions.scopes.development.class.default !== modifiedTpa.value.context.definitions.scopes.development.class.default
-
- if (areIdsModified) {
- modifiedTpa.value.id = "tpa-" + modifiedTpa.value.context.definitions.scopes.development.project.default
- modifiedTpa.value = JSON.parse(JSON.stringify(modifiedTpa.value).replace(new RegExp('\"' + originalTpa.value.context.definitions.scopes.development.project.default + '\"', "g"), '\"' + modifiedTpa.value.context.definitions.scopes.development.project.default + '\"'))
- modifiedTpa.value = JSON.parse(JSON.stringify(modifiedTpa.value).replace(new RegExp('\"' + originalTpa.value.context.definitions.scopes.development.class.default + '\"', "g"), '\"' + modifiedTpa.value.context.definitions.scopes.development.class.default + '\"'))
+ if (tpa_type == "agreement") {
+ // Delete and create the TPA to update it
+ await axios
+ .delete(`${REGISTRY_URL}/api/v6/agreements/${originalTpa.value.id}`)
+ .catch((error) => console.log("Error deleting agreement: ", error));
+ await axios
+ .post(`${REGISTRY_URL}/api/v6/agreements`, modifiedTpa.value)
+ .catch((error) => console.log("Error creating agreement: ", error));
+ tpaEditMode.value = false;
}
-
- // Delete and create the TPA to update it
- await axios.delete(`${REGISTRY_URL}/api/v6/agreements/${originalTpa.value.id}`).catch(error => console.log("Error deleting agreement: ", error))
- await axios.post(`${REGISTRY_URL}/api/v6/agreements`, modifiedTpa.value).catch(error => console.log("Error creating agreement: ", error))
-
- if (areIdsModified) {
- this.router.push({ name: 'edition', params: { courseId: modifiedTpa.value.context.definitions.scopes.development.class.default, projectId: modifiedTpa.value.context.definitions.scopes.development.project.default } })
+ if (tpa_type == "template") {
+ // Delete and create the Template to update it
+ await axios
+ .delete(`${REGISTRY_URL}/api/v6/templates/${originalTpa.value.id}`)
+ .catch((error) => console.log("Error deleting template: ", error));
+ await axios
+ .post(`${REGISTRY_URL}/api/v6/templates`, modifiedTpa.value)
+ .catch((error) => console.log("Error creating template: ", error));
+ tpaEditMode.value = false;
+
}
+ } catch (error) {
+ console.log("Error when saving TPA or Template changes: ", error);
+ }
+ }
+ async function saveTpasChanges(newTemplateVersion, authorization) {
+ // Remove "member" from scope if checkbox is not checked
+ if (
+ modifiedTpa.value.context.definitions.scopes.development?.member
+ ?.default !== "*"
+ ) {
+ deleteTpaField("context.definitions.scopes.development.member");
+ }
+ // Production or development environment transformation
+ modifiedTpa.value = JSON.parse(
+ JSON.stringify(modifiedTpa.value)
+ .replace(
+ /http:\/\/(host\.docker\.internal:5700|[^\/]+-scope-manager)/g,
+ SCOPE_MANAGER_URL
+ )
+ .replace(
+ /http:\/\/(host\.docker\.internal:5200|[^\/]+-assets-manager)/g,
+ ASSETS_MANAGER_URL
+ )
+ );
+ // Create new template version
+ const course = modifiedTpa.value.context.definitions.scopes.development.class.default;
+ const newTemplate = { ...modifiedTpa.value };
+ delete newTemplate._id;
+ delete newTemplate.templateId;
+ newTemplate.type = "template";
+ newTemplate.id = newTemplateVersion;
+ newTemplate.context.definitions.scopes.development.project.default =
+ "1010101010";
+ newTemplate.context.definitions.scopes.development.class.default =
+ "2020202020";
+ await axios
+ .post(`${REGISTRY_URL}/api/v6/templates`, newTemplate)
+ .catch((error) => console.log("Error creating template: ", error));
+ // Update course templateId
+ try {
+ await axios.put(SCOPE_MANAGER_URL + `/api/v1/scopes/development/${course}`, { "templateId": newTemplateVersion },
+ {
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: authorization.value,
+ },
+ }
+ );
} catch (error) {
- console.log("Error when saving TPA changes: ", error)
+ console.log("Error updating course templateId: ", error);
+ }
+ console.log("Template created and course updated");
+ // Update agreements with new template
+ try{
+ const response_agreements = await axios.get(`${REGISTRY_URL}/api/v6/agreements`).catch((error) => console.log("Error getting agreements: ", error));
+ const filteredAgreements = response_agreements.data.filter(agreement => agreement.context?.definitions?.scopes?.development?.class?.default === course);
+ for (const agreement of filteredAgreements) {
+ const agreement_id = agreement.id;
+ const agreement_projectId = agreement.context.definitions.scopes.development.project.default;
+ const new_agreement = { ...newTemplate };
+ new_agreement.type = "agreement";
+ new_agreement.id = agreement_id;
+ new_agreement.templateId = newTemplateVersion;
+ new_agreement.context.definitions.scopes.development.project.default = agreement_projectId;
+ new_agreement.context.definitions.scopes.development.class.default = course;
+ await axios
+ .delete(`${REGISTRY_URL}/api/v6/agreements/${agreement.id}`)
+ .catch((error) => console.log("Error deleting agreement: ", error));
+ await axios
+ .post(`${REGISTRY_URL}/api/v6/agreements`, new_agreement)
+ .catch((error) => console.log("Error creating agreement: ", error));
+ }
+ }catch (error) {
+ console.log("Error changing TPAs", error);
}
+ tpaEditMode.value = false;
+ window.location.reload();
}
function discardTpaChanges() {
- discardButtonClicked.value = true
+ discardButtonClicked.value = true;
window.location.reload();
}
function getTpaField(fieldPath) {
- return _.get(modifiedTpa.value, fieldPath)
+ return _.get(modifiedTpa.value, fieldPath);
}
function updateTpaField(fieldPath, value) {
- _.set(modifiedTpa.value, fieldPath, value)
+ _.set(modifiedTpa.value, fieldPath, value);
}
function deleteTpaField(fieldPath) {
- _.unset(modifiedTpa.value, fieldPath)
+ _.unset(modifiedTpa.value, fieldPath);
}
function updateGuaranteeWithNewObjective(withPath, newObjective) {
const newWith = {};
- const tpaMetricsIds = Object.keys(modifiedTpa.value.terms.metrics)
+ const tpaMetricsIds = Object.keys(modifiedTpa.value.terms.metrics);
for (const metric of tpaMetricsIds) {
-
// If the metric is in the new objective, add it to the new "with" object
- if (newObjective.match(new RegExp(`\\b${metric}\\b`, 'g'))) {
+ if (newObjective.match(new RegExp(`\\b${metric}\\b`, "g"))) {
newWith[metric] = {};
}
}
- _.set(modifiedTpa.value, withPath, newWith)
+ _.set(modifiedTpa.value, withPath, newWith);
}
async function formatQueryGraphQL(query) {
@@ -177,17 +305,17 @@ export const useTpaEditionStore = defineStore('tpaEdition', () => {
plugins: [prettierPluginGraphql],
});
} catch (error) {
- console.error('Error formatting the GraphQL query:', error);
+ console.error("Error formatting the GraphQL query:", error);
throw error;
// return query; // Return the original query in case of an error
}
}
-
+
function unformatQueryGraphQL(query) {
try {
- return query.replace(/\s+/g, ' ').trim();;
+ return query.replace(/\s+/g, " ").trim();
} catch (error) {
- console.error('Error unformatting GraphQL query:', error);
+ console.error("Error unformatting GraphQL query:", error);
return query; // Return the original query in case of an error
}
}
@@ -201,17 +329,39 @@ export const useTpaEditionStore = defineStore('tpaEdition', () => {
event: metricData.measure.event,
scope: {
project: metricData.measure.scope.project.default,
- class: metricData.measure.scope.class.default
+ class: metricData.measure.scope.class.default,
},
- window
- }
- }
+ window,
+ },
+ };
- return axios.post(`${COLLECTOR_EVENTS_URL}/api/v2/computations`, requestBody)
+ return axios.post(
+ `${COLLECTOR_EVENTS_URL}/api/v2/computations`,
+ requestBody
+ );
}
- return {
- originalTpa, modifiedTpa, discardButtonClicked, isProductionEnvironment, isEditionMode, BLOCK_TYPES, COLLECTOR_EVENT_SOURCES, COLLECTOR_EVENT_ENDPOINTS, STEP_TYPES, WINDOW_PERIOD_OPTIONS, COLLECTOR_ELEMENT_TYPES,
- setInitialTpaData, saveTpaChanges, discardTpaChanges, getTpaField, updateTpaField, deleteTpaField, updateGuaranteeWithNewObjective, testMetric, formatQueryGraphQL, unformatQueryGraphQL
- }
-})
\ No newline at end of file
+ return {
+ originalTpa,
+ modifiedTpa,
+ discardButtonClicked,
+ isProductionEnvironment,
+ BLOCK_TYPES,
+ COLLECTOR_EVENT_SOURCES,
+ COLLECTOR_EVENT_ENDPOINTS,
+ STEP_TYPES,
+ WINDOW_PERIOD_OPTIONS,
+ COLLECTOR_ELEMENT_TYPES,
+ setInitialTpaData,
+ saveTpaChanges,
+ saveTpasChanges,
+ discardTpaChanges,
+ getTpaField,
+ updateTpaField,
+ deleteTpaField,
+ updateGuaranteeWithNewObjective,
+ testMetric,
+ formatQueryGraphQL,
+ unformatQueryGraphQL,
+ };
+});
diff --git a/src/utils/ViewTemplate.vue b/src/utils/ViewTemplate.vue
new file mode 100644
index 0000000..8df0199
--- /dev/null
+++ b/src/utils/ViewTemplate.vue
@@ -0,0 +1,33 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/utils/showHiddenCourses.js b/src/utils/showHiddenCourses.js
new file mode 100644
index 0000000..996da6e
--- /dev/null
+++ b/src/utils/showHiddenCourses.js
@@ -0,0 +1,7 @@
+import { ref } from 'vue';
+
+const showHiddenCourses = ref(false);
+
+export function changeShowHidden() {
+ return { showHiddenCourses };
+}
diff --git a/src/utils/tpaMode.js b/src/utils/tpaMode.js
new file mode 100644
index 0000000..1a01eb5
--- /dev/null
+++ b/src/utils/tpaMode.js
@@ -0,0 +1,7 @@
+import { ref } from 'vue';
+
+const tpaEditMode = ref(false);
+
+export function useTPAMode() {
+ return { tpaEditMode };
+}
diff --git a/src/views/Catalogue.vue b/src/views/Catalogue.vue
index 7c6ea0d..7e21ab8 100644
--- a/src/views/Catalogue.vue
+++ b/src/views/Catalogue.vue
@@ -1,21 +1,18 @@
+const scrollToGuarantees = () => {
+ document.getElementById("guaranteesSection").scrollIntoView({ behavior: 'smooth' });
+};
+
+
-
-
-
-
-
-
📖 TPs Catalogue
-
-
-
+
+
+
+
+
-
-
-
Metrics
-
-
-
-
{{ metric.name }}
-
{{ metric.description }}
-
{{metric.dsl}}
-
-
-
-
Guarantees
-
-
-
-
{{ guarantee.id }}
-
{{ guarantee.notes }}
-
{{ guarantee.description }}
-
{{ guarantee.objective }}
-
-
+
+
+
+
+
+
+
+
{{ metric.description }}
+
+
+
+
+ {{ JSON.stringify(metric.dsl, null, 2) }}
+
+
+
+
+
+
+
+
+
+
+
{{ guarantee.description }}
+
+
+
{{ JSON.stringify(guarantee.objective, null, 2) }}
+
+
+
-
-
-
-
+
+
+
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 0b7e362..c047ff0 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,113 +1,103 @@
-
-
-
-
Welcome to the TPA Designer!
- 
-
-
-
-
This is the TPA Designer, a tool designed to help you manage your Team Practices Agreements!
-
A TPA is a document that describes the practices a team should follow during the development of a project and it is comprised of several elements such as the following:
-
- - Guarantees: The guarantees that the team will provide to the client.
- - Metrics: The metrics that will be used to evaluate the fulfillment of those guarantees.
- - Dashboards: The dashboards that will be used to visualize the fulfillment of the guarantees.
- - Extra information: The extra information that will be used to complement the TPA (context, scopes, infrastructure settings...).
-
-
-
The TPA Designer allows you to create and edit TPAs in a visual way, and then export them to a JSON file that can be used by the Governify platform.
-
To get started, you can opt for one of the following options:
-
-
-
- Create a new TPA
-
- Delete an existing TPA
-
- View an existing TPA
-
- Edit an existing TPA
-
-
-
-
-
- Create a new TPA
-
- Delete an existing TPA
-
-
-
-
-
-
- View an existing TPA
-
- Edit an existing TPA
-
-
-
-
-
-
Governify also provides a catalogue of TPs
- and TPAs that can be used for reference as a starting point.
- This catalogue can also be consulted inside the TPA Designer by clicking the button below.
-
-
-
-
- This tool has been developed following the guidelines of the iAgree Syntax (version 5.2).
- Also, you can check out the documentation for more info on how TPAs are modeled.
-
+
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/views/NewCourse.vue b/src/views/NewCourse.vue
new file mode 100644
index 0000000..5edbdf8
--- /dev/null
+++ b/src/views/NewCourse.vue
@@ -0,0 +1,343 @@
+
+
+
+
+
+
+
+
+
+
+
+
{{ JSON.stringify(new_course, null, 2) }}
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/TPA-Template.vue b/src/views/TPA-Template.vue
new file mode 100644
index 0000000..3894dd7
--- /dev/null
+++ b/src/views/TPA-Template.vue
@@ -0,0 +1,344 @@
+
+
+
+
+
+
+
+
+
A TPA is a document that describes the practices a team should follow during the development of a
+ project
+ and it is comprised of several elements such as the following:
+
+ - Guarantees: The guarantees that the team will provide to the client.
+ - Metrics: The metrics that will be used to evaluate the fulfillment of those
+ guarantees.
+
+ - Dashboards: The dashboards that will be used to visualize the fulfillment of the
+ guarantees.
+
+ - Extra information: The extra information that will be used to complement the TPA
+ (context,
+ scopes, infrastructure settings...).
+
+
+
The TPA Designer allows you to create and edit TPAs in a visual way, and then export them to a
+ JSON
+ file
+ that can be used by the Governify
+ platform 
.
+
+
Governify also provides a catalogue
+ of TPs
+ and TPAs
+ that can be used for reference as a starting point.
+ This catalogue can also be consulted inside the TPA Designer by clicking the button below.
+
+
+
+
+ This tool has been developed following the guidelines of the iAgree Syntax (version
+ 5.2).
+ Also, you can check out the documentation for more info on how TPAs are modeled.
+
+
+
+
+
+
+
+
Change TPA Template id
+
Example id: template-my-string-example-v1-0-0
+
+
+
+
+
Dashboard blocks
+
+
+
+
+
+
+
+
+
Metrics
+
+
+
+
+
+
+
Guarantees
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/TPA-list.vue b/src/views/TPA-list.vue
new file mode 100644
index 0000000..0ade253
--- /dev/null
+++ b/src/views/TPA-list.vue
@@ -0,0 +1,221 @@
+
+
+
+
+
+
+
+
+
+
+
No agreements found
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/TPA.vue b/src/views/TPA.vue
new file mode 100644
index 0000000..e2b20ae
--- /dev/null
+++ b/src/views/TPA.vue
@@ -0,0 +1,408 @@
+
+
+
+
+
+
+
+
+
A TPA is a document that describes the practices a team should follow during the development of a
+ project
+ and it is comprised of several elements such as the following:
+
+ - Guarantees: The guarantees that the team will provide to the client.
+ - Metrics: The metrics that will be used to evaluate the fulfillment of those
+ guarantees.
+
+ - Dashboards: The dashboards that will be used to visualize the fulfillment of the
+ guarantees.
+
+ - Extra information: The extra information that will be used to complement the TPA
+ (context,
+ scopes, infrastructure settings...).
+
+
+
The TPA Designer allows you to create and edit TPAs in a visual way, and then export them to a
+ JSON
+ file
+ that can be used by the Governify
+ platform .
+
+
Governify also provides a catalogue
+ of TPs
+ and TPAs
+ that can be used for reference as a starting point.
+ This catalogue can also be consulted inside the TPA Designer by clicking the button below.
+
+
+
+
+ This tool has been developed following the guidelines of the iAgree Syntax (version
+ 5.2).
+ Also, you can check out the documentation for more info on how TPAs are modeled.
+
+
+
+
+
+
+
+
+
Scope
+
+
+
+
+
+
Dashboard blocks
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/TemplatesManagement.vue b/src/views/TemplatesManagement.vue
new file mode 100644
index 0000000..c57a8c5
--- /dev/null
+++ b/src/views/TemplatesManagement.vue
@@ -0,0 +1,433 @@
+
+
+
+
+
+
+
+
+
+
+
+
Check out some samples from our GitHub
+
+
+
+
+
+
+
+
In use
+ in these courses:
+
+
+ -
+ {{
+ course.classId }}
+
+
+
+
+
+
+
Not in use
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/views/TpaDetails.vue b/src/views/TpaDetails.vue
deleted file mode 100644
index 5cb2115..0000000
--- a/src/views/TpaDetails.vue
+++ /dev/null
@@ -1,146 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Scope
-
-
-
-
-
-
Dashboard blocks
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 9c7aa1a..d2f1bbb 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,23 +1,28 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
-import path from 'path';
+import path from 'path'
-// https://vitejs.dev/config/
-export default defineConfig({
- // vite config
- plugins: [vue()],
- resolve: {
- alias: {
- '@': path.resolve(__dirname, './src')
+export default ({ mode }) => {
+ // Take environment variables from .env files
+ const env = loadEnv(mode, process.cwd(), '')
+
+ return defineConfig({
+ plugins: [vue()],
+ resolve: {
+ alias: {
+ '@': path.resolve(__dirname, './src')
+ }
+ },
+ test: {
+ globals: true,
+ },
+ define: {
+ "process.env.ASSETS_MANAGER_URL": JSON.stringify(env.ASSETS_MANAGER_URL || 'http://localhost:5200'),
+ "process.env.REGISTRY_URL": JSON.stringify(env.REGISTRY_URL || 'http://localhost:5400'),
+ "process.env.COLLECTOR_EVENTS_URL": JSON.stringify(env.COLLECTOR_EVENTS_URL || 'http://localhost:5500'),
+ "process.env.SCOPE_MANAGER_URL": JSON.stringify(env.SCOPE_MANAGER_URL || 'http://localhost:5700'),
+ "process.env.DASHBOARD_URL": JSON.stringify(env.DASHBOARD_URL || 'http://localhost:5600'),
+ "process.env.REPORTER_URL": JSON.stringify(env.REPORTER_URL || 'http://localhost:5300'),
}
- },
- test: {
- globals: true,
- },
- define: {
- "process.env.ASSETS_MANAGER_URL": JSON.stringify(process.env.ASSETS_MANAGER_URL || 'http://localhost:5200'), // 'http://host.docker.internal:5200'
- "process.env.REGISTRY_URL": JSON.stringify(process.env.REGISTRY_URL || 'http://localhost:5400'), // 'http://host.docker.internal:5400'
- "process.env.COLLECTOR_EVENTS_URL": JSON.stringify(process.env.COLLECTOR_EVENTS_URL || 'http://localhost:5500'), // 'http://host.docker.internal:5500'
- "process.env.SCOPE_MANAGER_URL": JSON.stringify(process.env.SCOPE_MANAGER_URL || 'http://localhost:5700'), // 'http://host.docker.internal:5700'
- }
-})
\ No newline at end of file
+ })
+}