feat: support to edit environments

Clivern · Sep 23, 2024 · 06e6e61 · 06e6e61
1 parent 57d75c0
commit 06e6e61
Show file tree

Hide file tree

Showing 10 changed files with 164 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -1,16 +1,16 @@
 <p align="center">
-    <img alt="Lynx Logo" src="/assets/img/logo.png?v=0.12.1" width="250" />
+    <img alt="Lynx Logo" src="/assets/img/logo.png?v=0.12.2" width="250" />
     <h3 align="center">Lynx</h3>
     <p align="center">A Fast, Secure and Reliable Terraform Backend, Set up in Minutes.</p>
     <p align="center">
         <a href="https://github.com/Clivern/Lynx/actions/workflows/ci.yml">
             <img src="https://github.com/Clivern/Lynx/actions/workflows/server_ci.yml/badge.svg"/>
         </a>
         <a href="https://github.com/Clivern/Lynx/releases">
-            <img src="https://img.shields.io/badge/Version-0.12.1-1abc9c.svg">
+            <img src="https://img.shields.io/badge/Version-0.12.2-1abc9c.svg">
         </a>
         <a href="https://hub.docker.com/r/clivern/lynx/tags">
-            <img src="https://img.shields.io/badge/Docker-0.12.1-1abc9c.svg">
+            <img src="https://img.shields.io/badge/Docker-0.12.2-1abc9c.svg">
         </a>
         <a href="https://github.com/Clivern/terraform-provider-lynx">
             <img src="https://img.shields.io/badge/Terraform-Provider-yellow.svg">

diff --git a/api.yml b/api.yml
@@ -7,7 +7,7 @@ info:
   license:
     name: MIT License
     url: https://github.com/Clivern/Lynx/blob/main/LICENSE
-  version: 0.12.1
+  version: 0.12.2
 externalDocs:
   description: Find out more about lynx
   url: https://github.com/Clivern/Lynx

diff --git a/docker-compose-cluster.yml b/docker-compose-cluster.yml
@@ -2,7 +2,7 @@ version: '3.8'
 
 services:
   app1:
-    image: clivern/lynx:0.12.1
+    image: clivern/lynx:0.12.2
     environment:
       APP_NAME: Lynx
       APP_PORT: 4001
@@ -27,7 +27,7 @@ services:
       - db
 
   app2:
-    image: clivern/lynx:0.12.1
+    image: clivern/lynx:0.12.2
     environment:
       APP_NAME: Lynx
       APP_PORT: 4002
@@ -52,7 +52,7 @@ services:
       - db
 
   app3:
-    image: clivern/lynx:0.12.1
+    image: clivern/lynx:0.12.2
     environment:
       APP_NAME: Lynx
       APP_PORT: 4003

diff --git a/docker-compose-nginx.yml b/docker-compose-nginx.yml
@@ -2,7 +2,7 @@ version: '3.8'
 
 services:
   app:
-    image: clivern/lynx:0.12.1
+    image: clivern/lynx:0.12.2
     environment:
       APP_NAME: Lynx
       APP_PORT: 4000

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -2,7 +2,7 @@ version: '3.8'
 
 services:
   app:
-    image: clivern/lynx:0.12.1
+    image: clivern/lynx:0.12.2
     environment:
       APP_NAME: Lynx
       APP_PORT: 4000

diff --git a/docs/index.md b/docs/index.md
@@ -21,8 +21,8 @@ hero:
       icon: edit
 
   download_link:
-    label: Latest Release v0.12.1
-    url: https://github.com/Clivern/Lynx/releases/tag/0.12.1
+    label: Latest Release v0.12.2
+    url: https://github.com/Clivern/Lynx/releases/tag/0.12.2
 
 features:
   rows:

diff --git a/lib/lynx_web/router.ex b/lib/lynx_web/router.ex
@@ -133,7 +133,7 @@ defmodule LynxWeb.Router do
 
   defp add_server_header(conn, _opts) do
     conn
-    |> put_resp_header("x-server-version", "lynx/0.12.1")
+    |> put_resp_header("x-server-version", "lynx/0.12.2")
   end
 
   # Enables LiveDashboard only for development

diff --git a/lib/lynx_web/templates/page/project.html.heex b/lib/lynx_web/templates/page/project.html.heex
@@ -2,6 +2,7 @@
   var _globals = {
     new_environment: '<%= gettext "Environment created successfully!" %>',
     delete_environment_message: '<%= gettext "Environment deleted successfully!" %>',
+    update_environment_message: '<%= gettext "Environment updated successfully!" %>',
     delete_environment_alert: '<%= gettext "You are trying to delete an environment! are you sure?" %>',
     delete_environment_endpoint: '<%= Routes.environment_path(@conn, :delete, @data.uuid, "UUID") %>',
     get_environment_endpoint: '<%= Routes.environment_path(@conn, :index, @data.uuid, "UUID") %>',
@@ -305,7 +306,7 @@
                                             <template v-if="environment.stateVersion != 'v0'">
                                                 <a target="_blank" @click="downloadEnvironmentStateAction(environment.id)" class="btn btn-dashed btn-sm text-warning-100 border-warning-100 hp-hover-text-color-warning-80 hp-hover-border-color-warning-80"><%= gettext "Download State" %></a>
                                             </template>
-                                            <!--<button @click="editEnvironmentAction(environment.id)" class="btn btn-dashed btn-sm text-black-100 border-black-100 hp-hover-text-color-black-80 hp-hover-border-color-black-80"><%= gettext "Edit" %></button>-->
+                                            <button @click="editEnvironmentAction(environment.id)" class="btn btn-dashed btn-sm text-black-100 border-black-100 hp-hover-text-color-black-80 hp-hover-border-color-black-80"  data-bs-toggle="modal" data-bs-target="#edit_environment_modal"><%= gettext "Edit" %></button>
                                             <button @click="deleteEnvironmentAction(environment.id)" class="btn btn-dashed btn-sm text-danger border-danger hp-hover-text-color-danger-2 hp-hover-border-color-danger-2"><%= gettext "Delete" %></button>
                                         </td>
                                       </tr>
@@ -372,6 +373,58 @@
             </div>
         </div>
 
+        <div class="modal fade" id="edit_environment_modal" tabindex="-1" aria-labelledby="editEnvironmentLabel" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered">
+                <div class="modal-content">
+                    <div class="modal-header py-16 px-24">
+                        <h5 class="modal-title" id="editEnvironmentLabel"><%= gettext "Edit Environment" %></h5>
+                        <button type="button" class="btn-close hp-bg-none d-flex align-items-center justify-content-center" data-bs-dismiss="modal" aria-label="Close">
+                            <i class="ri-close-line hp-text-color-dark-0 lh-1" style="font-size: 24px;"></i>
+                        </button>
+                    </div>
+                    <div class="divider m-0"></div>
+                    <form id="update_environment_form" action={Routes.environment_path(@conn, :update, @data.uuid, "UUID")} method="post" v-on:submit.prevent="updateEnvironmentAction">
+                        <input type="hidden" value="" name="uuid">
+                        <div class="modal-body">
+                            <div class="row gx-8">
+                                <div class="col-12">
+                                    <div class="mb-24">
+                                        <label class="form-label"><%= gettext "Name" %></label>
+                                        <input type="text" class="form-control" name="name" required="required" minlength="2" maxlength="60">
+                                    </div>
+                                </div>
+
+                                <div class="col-12">
+                                    <div class="mb-24">
+                                        <label class="form-label"><%= gettext "Slug" %></label>
+                                        <input type="text" class="form-control" name="slug" required="required" minlength="2" maxlength="60">
+                                    </div>
+                                </div>
+
+                                <div class="col-12">
+                                    <div class="mb-24">
+                                        <label class="form-label"><%= gettext "Username" %></label>
+                                        <input type="text" class="form-control" name="username" required="required" minlength="2" maxlength="60">
+                                    </div>
+                                </div>
+
+                                <div class="col-12">
+                                    <div class="mb-24">
+                                        <label class="form-label"><%= gettext "Secret" %></label>
+                                        <input type="text" class="form-control" name="secret" required="required" minlength="2" maxlength="60">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="modal-footer pt-0 px-24 pb-24">
+                            <div class="divider"></div>
+                            <button type="submit" class="m-0 btn btn-primary w-100" :disabled="isInProgress"><%= gettext "Submit" %></button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+
         <div class="modal fade" id="show_environment_modal" tabindex="-1" aria-labelledby="showEnvironmentLabel" aria-hidden="true">
             <div class="modal-dialog modal-lg modal-dialog-centered">
                 <div class="modal-content">

diff --git a/mix.exs b/mix.exs
@@ -5,7 +5,7 @@
 defmodule Lynx.MixProject do
   use Mix.Project
 
-  @version "0.12.1"
+  @version "0.12.2"
 
   def get_version, do: @version
 

diff --git a/priv/static/theme/app/backend.js b/priv/static/theme/app/backend.js
@@ -432,8 +432,14 @@ lynx_app.teams_list = (Vue, axios, $) => {
         },
         methods: {
             editTeamAction(id) {
-                $('input[name="uuid"]').val(id);
+                let current = $('form#update_team_form input[name="uuid"]').val()
+                if (current != "") {
+                    $('form#update_team_form').attr('action', function(i, val) {
+                        return val.replace(current, "UUID");
+                    });
+                }
 
+                $('form#update_team_form input[name="uuid"]').val(id);
                 $('form#update_team_form').attr('action', function(i, val) {
                     return val.replace('UUID', id);
                 });
@@ -602,7 +608,14 @@ lynx_app.users_list = (Vue, axios, $) => {
         },
         methods: {
             editUserAction(id) {
-                $('input[name="uuid"]').val(id);
+                let current = $('form#update_user_form input[name="uuid"]').val()
+                if (current != "") {
+                    $('form#update_user_form').attr('action', function(i, val) {
+                        return val.replace(current, "UUID");
+                    });
+                }
+
+                $('form#update_user_form input[name="uuid"]').val(id);
                 $('form#update_user_form').attr('action', function(i, val) {
                     return val.replace('UUID', id);
                 });
@@ -750,8 +763,14 @@ lynx_app.projects_list = (Vue, axios, $) => {
         },
         methods: {
             editProjectAction(id) {
-                $('form#update_project_form input[name="uuid"]').val(id);
+                let current = $('form#update_project_form input[name="uuid"]').val()
+                if (current != "") {
+                    $('form#update_project_form').attr('action', function(i, val) {
+                        return val.replace(current, "UUID");
+                    });
+                }
 
+                $('form#update_project_form input[name="uuid"]').val(id);
                 $('form#update_project_form').attr('action', function(i, val) {
                     return val.replace('UUID', id);
                 });
@@ -1046,7 +1065,30 @@ lynx_app.environments_list = (Vue, axios, $) => {
         },
         methods: {
             editEnvironmentAction(id) {
-                console.log("Edit environment with ID:", id);
+                let current = $('form#update_environment_form input[name="uuid"]').val()
+                if (current != "") {
+                    $('form#update_environment_form').attr('action', function(i, val) {
+                        return val.replace(current, "UUID");
+                    });
+                }
+
+                $('form#update_environment_form input[name="uuid"]').val(id);
+                $('form#update_environment_form').attr('action', function(i, val) {
+                    return val.replace('UUID', id);
+                });
+
+                axios.get($("#update_environment_form").attr("action"))
+                    .then((response) => {
+                        if (response.status >= 200) {
+                            $('form#update_environment_form input[name="name"]').val(response.data.name);
+                            $('form#update_environment_form input[name="slug"]').val(response.data.slug);
+                            $('form#update_environment_form input[name="username"]').val(response.data.username);
+                            $('form#update_environment_form input[name="secret"]').val(response.data.secret);
+                        }
+                    })
+                    .catch((error) => {
+                        show_notification(error.response.data.errorMessage);
+                    });
             },
 
             formatDatetime(datatime) {
@@ -1135,6 +1177,49 @@ lynx_app.environments_list = (Vue, axios, $) => {
     });
 }
 
+lynx_app.edit_environment_modal = (Vue, axios, $) => {
+
+    return new Vue({
+        delimiters: ['${', '}'],
+        el: '#edit_environment_modal',
+        data() {
+            return {
+                isInProgress: false
+            }
+        },
+        methods: {
+            updateEnvironmentAction(event) {
+                event.preventDefault();
+                this.isInProgress = true;
+
+                let inputs = {};
+                let _self = $(event.target);
+                let _form = _self.closest("form");
+
+                _form.serializeArray().map((item, index) => {
+                    inputs[item.name] = item.value;
+                });
+
+                axios.put(_form.attr('action'), inputs)
+                    .then((response) => {
+                        if (response.status >= 200) {
+                            show_notification(_globals.update_environment_message);
+
+                            setTimeout(() => {
+                                location.reload();
+                            }, 2000);
+                        }
+                    })
+                    .catch((error) => {
+                        this.isInProgress = false;
+                        // Show error
+                        show_notification(error.response.data.errorMessage);
+                    });
+            }
+        }
+    });
+}
+
 // Snapshots list
 lynx_app.snapshots_list = (Vue, axios, $) => {
 
@@ -1495,4 +1580,12 @@ $(document).ready(() => {
             $
         );
     }
+
+    if (document.getElementById("edit_environment_modal")) {
+        lynx_app.edit_environment_modal(
+            Vue,
+            axios,
+            $
+        );
+    }
 });