npm - @eui/tools - Versions diffs - 6.5.5 → 6.6.0 - Mend

@eui/tools 6.5.5 → 6.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (239) hide show

package/scripts/app/public/package-init.html ADDED Viewed

@@ -0,0 +1,254 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <script src="https://unpkg.com/vue@2"></script>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" />
+    </head>
+    <body>
+        <div id="app" class="container-fluid">
+            <div class="row">
+                <div class="col-6 full-height-flex">
+                    <h3 class="mt-2 mb-4">CSDR package initialization</h3>
+                    <div class="d-flex align-items-center mt-2">
+                        <h5>Choose the package options:</h5>
+                        <div class="ms-auto me-2">
+                            <button class="btn btn-primary" @click="reset()">reset</button>
+                        </div>
+                    </div>
+                    <div class="row mt-3 mb-3">
+                        <label class="col-sm-4 col-form-label d-flex justify-content-end">Package type</label>
+                        <div class="col-sm-8">
+                            <select class="form-select" v-model="params.pkgType">
+                                <option v-for="pkgType in options.pkgTypes" :value="pkgType.value">{{ pkgType.label }}</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="row mt-3 mb-3">
+                        <label class="col-sm-4 col-form-label d-flex justify-content-end">Package scope</label>
+                        <div class="col-sm-8">
+                            <input type="text" class="form-control" placeholder="with @ prefix, f.e. : @cc" v-model="params.pkgScope" />
+                        </div>
+                    </div>
+                    <div class="row mt-3 mb-3">
+                        <label class="col-sm-4 col-form-label d-flex justify-content-end">Package name</label>
+                        <div class="col-sm-8">
+                            <input
+                                type="text"
+                                class="form-control"
+                                placeholder="in kebab case, f.e.: my-package"
+                                v-model="params.pkgName" />
+                        </div>
+                    </div>
+                    <div v-if="params.pkgType === 'frontend'">
+                        <div class="row mt-3 mb-3">
+                            <label class="col-sm-4 col-form-label d-flex justify-content-end">Frontend type</label>
+                            <div class="col-sm-8">
+                                <select class="form-select" v-model="params.pkgFrontendType">
+                                    <option v-for="pkgType in options.frontendTypes" :value="pkgType.value">{{ pkgType.label }}</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div class="row mt-3 mb-3">
+                            <label class="col-sm-4 col-form-label d-flex justify-content-end">eUI Version</label>
+                            <div class="col-sm-8">
+                                <select class="form-select" v-model="params.pkgFrontendVersion">
+                                    <option v-for="version in options.frontendVersions" :value="version.value">{{ version.label }}</option>
+                                </select>
+                            </div>
+                        </div>
+                        <div v-if="params.pkgFrontendType === 'default'">
+                            <div class="row mt-3 mb-3">
+                                <div class="col-sm-4">
+                                    <label class="form-check-label d-flex justify-content-end"> CSDR repository ? </label>
+                                </div>
+                                <div class="col-sm-8">
+                                    <div class="form-check form-switch">
+                                        <input class="form-check-input" type="checkbox" v-model="params.csdrRepo" />
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row mt-3 mb-3" v-if="!params.csdrRepo">
+                                <label class="col-sm-4 col-form-label d-flex justify-content-end">External repository project</label>
+                                <div class="col-sm-8">
+                                    <input
+                                        type="text"
+                                        class="form-control"
+                                        placeholder="Indicate the CITnet project key where the repository belongs to"
+                                        v-model="params.externalRepoName" />
+                                </div>
+                            </div>
+                        </div>
+                        <div v-if="params.pkgFrontendType === 'remote'">
+                            <div class="row mt-3 mb-1">
+                                <div class="col-sm-4 d-flex justify-content-end"><h6>Remote specific parameters</h6></div>
+                            </div>
+                            <div class="row mt-1 mb-3">
+                                <label class="col-sm-4 col-form-label d-flex justify-content-end">XLR release team name</label>
+                                <div class="col-sm-8">
+                                    <input
+                                        type="text"
+                                        class="form-control"
+                                        placeholder="Should be in the format : cc-TEAM-ui-rm"
+                                        v-model="params.remoteConfig.rmTeamName" />
+                                </div>
+                            </div>
+                            <div class="row mt-3 mb-1">
+                                <div class="col-sm-4 d-flex justify-content-end"><h6>Remote skeleton options</h6></div>
+                            </div>
+                            <div class="row mt-1 mb-3">
+                                <div class="col-sm-4">
+                                    <label class="form-check-label d-flex justify-content-end"> Participant? </label>
+                                </div>
+                                <div class="col-sm-8">
+                                    <div class="form-check form-switch">
+                                        <input class="form-check-input" type="checkbox" v-model="params.remoteConfig.options.participant" />
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row mt-3 mb-3">
+                                <div class="col-sm-4">
+                                    <label class="form-check-label d-flex justify-content-end"> Dynamic forms? </label>
+                                </div>
+                                <div class="col-sm-8">
+                                    <div class="form-check form-switch">
+                                        <input
+                                            class="form-check-input"
+                                            type="checkbox"
+                                            v-model="params.remoteConfig.options.dynamicForms" />
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row mt-3 mb-3">
+                                <div class="col-sm-4">
+                                    <label class="form-check-label d-flex justify-content-end"> Zipkin enabled? </label>
+                                </div>
+                                <div class="col-sm-8">
+                                    <div class="form-check form-switch">
+                                        <input class="form-check-input" type="checkbox" v-model="params.remoteConfig.options.zipkin" />
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row mt-3 mb-3">
+                                <div class="col-sm-4">
+                                    <label class="form-check-label d-flex justify-content-end"> User reducers? </label>
+                                </div>
+                                <div class="col-sm-8">
+                                    <div class="form-check form-switch">
+                                        <input
+                                            class="form-check-input"
+                                            type="checkbox"
+                                            v-model="params.remoteConfig.options.userReducers" />
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="row mt-3 mb-3">
+                                <div class="col-sm-4">
+                                    <label class="form-check-label d-flex justify-content-end"> Dynatrace activated? </label>
+                                </div>
+                                <div class="col-sm-8">
+                                    <div class="form-check form-switch">
+                                        <input class="form-check-input" type="checkbox" v-model="params.remoteConfig.options.dynatrace" />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div v-if="params.pkgType === 'backend'">
+                        <div class="row mt-3 mb-3">
+                            <label class="col-sm-4 col-form-label d-flex justify-content-end">Package maven groupId</label>
+                            <div class="col-sm-8">
+                                <input type="text" class="form-control" v-model="params.pkgGroupId" />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-6">
+                    <h5 class="mt-5 mb-3">Initialization parameters</h5>
+                    <pre>
+{{ paramsJson }}
+                    </pre>
+                    <div class="alert alert-danger" v-if="!isParamsValid">Some field are either empty or invalid</div>
+                    <div class="alert alert-info mt-2">
+                        <div v-if="params.pkgFrontendType === 'default' || params.pkgType === 'backend'">
+                            <strong>Setup procedure for :<span class="text-primary"> UI or BACKEND </span> package type</strong>
+                            <ul>
+                                <li>Ensure first that the root repository is correctly up-to-date, by pulling it</li>
+                                <li>Execute the initialization here providing the necessary parameters</li>
+                                <li>
+                                    Create the repository - default branch <strong>master</strong> according to the parameters provided :
+                                    <strong>scope-packageName-ui/backend</strong>,
+                                </li>
+                                <li>git commit and push <strong>/packages/PACKAGE_NAME</strong> with conv. message format</li>
+                                <li>Create the <strong>develop</strong> branch derived from the master branch just pushed</li>
+                                <li>
+                                    Commit the changes made on the
+                                    <strong>rooot repository/.csdr/.euirc-csdr-packages.json</strong> file
+                                </li>
+                                <li>Create the bamboo plan, cloning an existing UI package one, for develop branch / repository created</li>
+                                <li>Run the develop branch plan and check <strong>Slack</strong> pipeline output</li>
+                                <li>
+                                    Create the <strong>master branch plan</strong> once the develop branch plan build is completed and
+                                    succeeded
+                                </li>
+                            </ul>
+                        </div>
+                        <div v-if="params.pkgFrontendType === 'remote' && params.pkgType !== 'backend'">
+                            <strong
+                                >Setup procedure for :<span class="text-primary"> REMOTE </span> package type</strong
+                            >
+                            <ul>
+                                <li>Ensure first that the root repository is correctly up-to-date, by pulling it</li>
+                                <li>Execute the initialization here providing the necessary parameters</li>
+                                <li>
+                                    commit and push the changes in <strong>/packages/csdr-remotes-config</strong> - from a feature derived
+                                    from the <strong>master</strong> branch (conv. message format)
+                                </li>
+                                <li>
+                                    Commit the changes made on the
+                                    <strong>rooot repository/.csdr/.euirc-csdr-remotes.json</strong> file - from a feature branch derived
+                                    from the <strong>master</strong> branch
+                                </li>
+                                <li>Create a bamboo plan, cloning an existing <strong>app-remote-REMOTE_NAME_v_DEV</strong></li>
+                                <li>Create a bamboo plan, cloning an existing <strong>app-remote-REMOTE_NAME_v_TST</strong></li>
+                                <li>
+                                    Do not run the plan, it mostly probably not build successfully (until the root UI package is built
+                                    first) OR some adjustements will be needed in the remote configuration (in the case of a remote
+                                    participant f.e.)
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    <hr />
+                    <button class="btn btn-primary" type="button" :disabled="!isParamsValid" @click="save()">Initialize package</button>
+                    <div v-if="saveSubmitted" class="mt-2">
+                        <div v-if="saveOK" class="alert alert-success">
+                            Package initialized - check server log to ensure good completion
+                        </div>
+                        <div v-if="!saveOK" class="alert alert-danger">Error occured, check server log</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </body>
+    <script src="package-init.js"></script>
+</html>

package/scripts/app/public/package-init.js ADDED Viewed

@@ -0,0 +1,138 @@
+const getRequestBody = (items) => {
+    return {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify(items),
+    };
+};
+new Vue({
+    el: "#app",
+    data() {
+        return {
+            params: {},
+            isParamsValid: false,
+            options: {},
+            saveOK: false,
+            saveSubmitted: false,
+        };
+    },
+    created() {
+        this.params = this.getDefaultParams();
+        this.options = {
+            pkgTypes: [
+                { label: "Backend - springBoot micro-service", value: "backend" },
+                { label: "Frontend UI package or remote", value: "frontend" },
+            ],
+            frontendVersions: [{ label: "15.x", value: "15" }],
+            frontendTypes: [
+                { label: "default UI package", value: "default" },
+                { label: "Remote micro-frontend package", value: "remote" },
+            ],
+        };
+    },
+    methods: {
+        reset() {
+            this.params = this.getDefaultParams();
+        },
+        getDefaultParams() {
+            return {
+                pkgType: "frontend",
+                pkgFrontendVersion: "15",
+                pkgFrontendType: "default",
+                pkgScope: "@zzz",
+                pkgName: "my-package",
+                csdrRepo: true,
+                pkgGroupId: "eu.europa.ec.cc",
+                remoteConfig: {
+                    rmTeamName: "cc-digit-ui-rm",
+                    options: {},
+                },
+            };
+        },
+        validateParams(params) {
+            this.isParamsValid = false;
+            if (params.pkgType) {
+                if (params.pkgType === "backend") {
+                    if (params.pkgScope && params.pkgName && params.pkgGroupId) {
+                        this.isParamsValid = true;
+                    }
+                } else {
+                    if (
+                        params.pkgFrontendVersion &&
+                        params.pkgFrontendType &&
+                        params.pkgScope &&
+                        params.pkgName &&
+                        params.pkgScope.substr(0, 1) === "@"
+                    ) {
+                        this.isParamsValid = true;
+                    }
+                }
+            }
+        },
+        async save() {
+            this.saveSubmitted = false;
+            if (!this.isParamsValid) {
+                return;
+            }
+            const res = await fetch(
+                "http://localhost:3000/api/package-init",
+                getRequestBody({
+                    params: this.params,
+                })
+            );
+            if (res.status !== 200) {
+                this.saveOK = false;
+            } else {
+                this.saveOK = true;
+            }
+            this.saveSubmitted = true;
+            const finalRes = await res.json();
+            console.log(finalRes);
+        },
+    },
+    watch: {
+        params: {
+            handler: function (val) {
+                this.validateParams(val);
+                this.saveOK = false;
+                this.saveSubmitted = false;
+            },
+            deep: true,
+        },
+    },
+    computed: {
+        paramsJson: function (v) {
+            let params = {};
+            params.pkgType = this.params.pkgType;
+            params.pkgScope = this.params.pkgScope;
+            params.pkgName = this.params.pkgName;
+            if (this.params.pkgType === "backend") {
+                params.pkgGroupId = this.params.pkgGroupId;
+            } else {
+                params.pkgFrontendType = this.params.pkgFrontendType;
+                params.pkgFrontendVersion = this.params.pkgFrontendVersion;
+                if (this.params.pkgFrontendType === "default") {
+                    params.csdrRepo = this.params.csdrRepo;
+                    if (!params.csdrRepo) {
+                        params.externalRepoName = this.params.externalRepoName;
+                    }
+                } else {
+                    params.remoteConfig = this.params.remoteConfig;
+                }
+            }
+            return JSON.stringify(params, null, 2);
+        },
+    },
+});

package/scripts/app/public/stats.html CHANGED Viewed

@@ -5,9 +5,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <script src="https://unpkg.com/vue@2"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
-        <link
-            rel="stylesheet"
-            href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" />
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" />
         <style>
             .full-height-flex {
                 display: flex;
@@ -28,9 +26,6 @@
     <body>
         <div id="app" class="container-fluid">
             <div class="row">
                 <div class="col-4 full-height-flex">
                     <div class="header-flex">
@@ -49,9 +44,7 @@
                     <div class="body-flex" v-if="!allRemotesStats">
                         <h5 class="mt-3 mb-3">Select a remote:</h5>
-                        <table
-                            class="table table-striped"
-                            v-show="remotes.length !== 0">
+                        <table class="table table-striped" v-show="remotes.length !== 0">
                             <thead>
                                 <tr>
                                     <th scope="col">&nbsp;</th>
@@ -63,9 +56,7 @@
                             <tbody>
                                 <tr v-for="remote in remotes">
                                     <td>
-                                        <div
-                                            class="form-radio"
-                                            :key="remote.name">
+                                        <div class="form-radio" :key="remote.name">
                                             <input
                                                 class="form-radio-input"
                                                 type="radio"
@@ -77,14 +68,10 @@
                                     </td>
                                     <td>{{ remote.name }}</td>
                                     <td>
-                                        <div
-                                            :class="{ 'text-primary fw-bold': remote.participant }">
-                                            {{ remote.participant }}
-                                        </div>
+                                        <div :class="{ 'text-primary fw-bold': remote.participant }">{{ remote.participant }}</div>
                                     </td>
                                     <td>
-                                        <div
-                                            :class="{ 'text-success fw-bold': remote.fullSkeletonSources }">
+                                        <div :class="{ 'text-success fw-bold': remote.fullSkeletonSources }">
                                             {{ remote.fullSkeletonSources }}
                                         </div>
                                     </td>
@@ -96,9 +83,7 @@
                 <div class="col-8">
                     <div v-if="!allRemotesStats">
-                        <h5 class="mt-5 mb-3">
-                            Selected remote : {{ selectedRemotes }}
-                        </h5>
+                        <h5 class="mt-5 mb-3">Selected remote : {{ selectedRemotes }}</h5>
                         <div class="d-none">{{ remoteStats.versions }}</div>
                         <div style="height: 250px">
                             <canvas id="versions"></canvas>
@@ -106,114 +91,64 @@
                     </div>
                     <div v-if="allRemotesStats">
-                        <h5 class="mt-5 mb-3">
-                            Remotes stats per env
-                        </h5>
-                        <table class="table table-default table-sm">
-                            <thead>
-                                <th>Remotes</th>
-                                <th style="width: 5rem;">Total</th>
-                                <th style="width: 5rem;">DEV</th>
-                                <th style="width: 5rem;">TST</th>
-                                <th style="width: 5rem;">INT</th>
-                                <th style="width: 5rem;">ACC</th>
-                                <th style="width: 5rem;">TRN</th>
-                                <th style="width: 5rem;">PROD</th>
-                            </thead>
-                            <tr v-for="remote in remoteAllStats">
-                                <td>{{ remote.name }}</td>
-                                <td :class="{ 'table-danger': remote.summary.versionsCount === 0 }">{{ remote.summary.versionsCount }}</td>
-                                <td>{{ remote.summary.versionsCountEnvs.DEV }}</td>
-                                <td>{{ remote.summary.versionsCountEnvs.TST }}</td>
-                                <td>{{ remote.summary.versionsCountEnvs.INT }}</td>
-                                <td>{{ remote.summary.versionsCountEnvs.ACC }}</td>
-                                <td>{{ remote.summary.versionsCountEnvs.TRN }}</td>
-                                <td>{{ remote.summary.versionsCountEnvs.PROD }}</td>
-                            </tr>
-                        </table>
+                        <div v-if="!remoteAllStats.length">
+                            <h5 class="mt-5 mb-3">please wait... loading stats</h5>
+                            <div class="spinner-border"></div>
+                        </div>
+                        <div v-if="remoteAllStats.length">
+                            <h5 class="mt-5 mb-3">
+                                Remotes stats per env -
+                                <span class="text-primary">{{ remoteAllStats.length }} remotes</span>
+                            </h5>
+                            <table class="table table-default table-sm">
+                                <thead>
+                                    <th>Remotes</th>
+                                    <th style="width: 5rem">Total</th>
+                                    <th style="width: 5rem">DEV</th>
+                                    <th style="width: 5rem">TST</th>
+                                    <th style="width: 5rem">INT</th>
+                                    <th style="width: 5rem">ACC</th>
+                                    <th style="width: 5rem">TRN</th>
+                                    <th style="width: 5rem">PROD</th>
+                                    <th>Last build info</th>
+                                </thead>
+                                <tr v-for="remote in remoteAllStats">
+                                    <td>{{ remote.name }}</td>
+                                    <td :class="{ 'table-danger': remote.summary.versionsCount === 0 }">
+                                        {{ remote.summary.versionsCount }}
+                                    </td>
+                                    <td :class="{ 'table-success': remote.summary.versionsCountEnvs.DEV !== 0 }">
+                                        {{ remote.summary.versionsCountEnvs.DEV }}
+                                    </td>
+                                    <td :class="{ 'table-success': remote.summary.versionsCountEnvs.TST !== 0 }">
+                                        {{ remote.summary.versionsCountEnvs.TST }}
+                                    </td>
+                                    <td :class="{ 'table-success': remote.summary.versionsCountEnvs.INT !== 0 }">
+                                        {{ remote.summary.versionsCountEnvs.INT }}
+                                    </td>
+                                    <td :class="{ 'table-success': remote.summary.versionsCountEnvs.ACC !== 0 }">
+                                        {{ remote.summary.versionsCountEnvs.ACC }}
+                                    </td>
+                                    <td :class="{ 'table-success': remote.summary.versionsCountEnvs.TRN !== 0 }">
+                                        {{ remote.summary.versionsCountEnvs.TRN }}
+                                    </td>
+                                    <td :class="{ 'table-success': remote.summary.versionsCountEnvs.PROD !== 0 }">
+                                        {{ remote.summary.versionsCountEnvs.PROD }}
+                                    </td>
+                                    <td>
+                                        <strong>{{ remote.lastVersion.envTarget }}</strong>
+                                        - {{ remote.lastVersion.version }} - {{ remote.lastVersion.date }}
+                                    </td>
+                                </tr>
+                            </table>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
     </body>
-    <script>
-        const getRequestBody = (items) => {
-            return {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                body: JSON.stringify(items),
-            };
-        };
-        new Vue({
-            el: "#app",
-            data() {
-                return {
-                    allRemotesStats: true,
-                    remotes: [],
-                    selectedRemotes: [],
-                    remoteStats: {},
-                    remoteAllStats: {}
-                };
-            },
-            created() {
-                this.getRemotes();
-                this.getRemoteAllStats();
-            },
-            methods: {
-                changeStatsType(value) {
-                    this.allRemotesStats = value;
-                },
-                async getRemotes() {
-                    const res = await fetch(
-                        "http://localhost:3000/api/remotes"
-                    );
-                    const finalRes = await res.json();
-                    this.remotes = finalRes;
-                },
-                async getRemoteAllStats() {
-                    const res = await fetch(
-                        "http://localhost:3000/api/remotes/stats"
-                    );
-                    const finalRes = await res.json();
-                    this.remoteAllStats = finalRes.stats;
-                },
-                remoteSelected(event) {
-                    this.getRemoteStats();
-                },
-                async getRemoteStats() {
-                    const res = await fetch(
-                        "http://localhost:3000/api/remotes/stats",
-                        getRequestBody({ remote: this.selectedRemotes })
-                    );
-                    const finalRes = await res.json();
-                    this.remoteStats = finalRes;
-                    this.genVersionsChart();
-                },
-                genVersionsChart() {
-                    const ctx = document
-                        .getElementById("versions")
-                        .getContext("2d");
-                    var myChart = new Chart(ctx, {
-                        type: "line",
-                        data: {
-                            labels: this.remoteStats.versions.map(v => `${v.version} - ${v.date}`),
-                            datasets: [
-                                {
-                                    data: this.remoteStats.versions.map(v => v.duration),
-                                    label: "Duration",
-                                    borderColor: "#3e95cd",
-                                    backgroundColor: "#7bb6dd",
-                                    fill: false,
-                                },
-                            ],
-                        },
-                    });
-                },
-            },
-        });
-    </script>
+    <script src="stats.js"></script>
 </html>