fix(ui): Rename outputs to actions (#411)

* feat(ui): Rename Outputs to Actions Fixes: #410 Signed-off-by: Simar <[email protected]> * feat(ui): Use port 8001 to avoid conflict Signed-off-by: Simar <[email protected]>
aquasecurity · Jul 5, 2022 · 5d167a7 · 5d167a7
1 parent 520a967
commit 5d167a7
Show file tree

Hide file tree

Showing 14 changed files with 77 additions and 77 deletions.
diff --git a/Dockerfile.ui b/Dockerfile.ui
@@ -14,7 +14,7 @@ RUN apk add git
 RUN go build -o posteeui
 
 FROM alpine:3.16.0
-EXPOSE 8000
+EXPOSE 8001
 
 RUN mkdir /uiserver
 RUN mkdir /uiserver/www

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -17,13 +17,13 @@ services:
             context: .
             dockerfile: Dockerfile.ui
         ports:
-            - 8000:8000
+            - 8001:8001
         volumes:
             - bolt:/server/database
             - config:/server
         environment:
             - "POSTEE_UI_CFG=/server/cfg.yaml"
-            - "POSTEE_UI_PORT=8000"
+            - "POSTEE_UI_PORT=8001"
             - "POSTEE_UI_UPDATE_URL=http://posteewebhook:8082"
 volumes:
   bolt:

diff --git a/ui/backend/uiserver/server.go b/ui/backend/uiserver/server.go
@@ -50,7 +50,7 @@ func Instance(webLocalPath, port, cfg, webhookUrl, admusr string, admpwd string)
 	server.router.HandleFunc("/api/config", server.updateConfig).Methods("POST")
 	server.router.HandleFunc("/api/config", server.getConfig).Methods("GET")
 	server.router.HandleFunc("/api/test", server.testSettings).Methods("POST")
-	server.router.HandleFunc("/api/outputs/stats", server.plgnStats).Methods("GET")
+	server.router.HandleFunc("/api/actions/stats", server.plgnStats).Methods("GET")
 	server.router.HandleFunc("/api/events", server.getEvents).Methods("GET")
 
 	server.router.HandleFunc("/ping", server.pingHandler).Methods("GET")

diff --git a/ui/frontend/src/App.vue b/ui/frontend/src/App.vue
@@ -11,7 +11,7 @@
             <li class="nav-item">
               <router-link
                 active-class="active"
-                :to="{ name: 'outputs' }"
+                :to="{ name: 'actions' }"
                 class="nav-link"
                 >Actions</router-link
               >
@@ -78,7 +78,7 @@ export default {
   watch: {
     $route(to) {
       this.$store.commit("error/clear");
-      if (["home", "outputs"].indexOf(to.name) >= 0 && !this.$store.state.flags.all.loaded) {
+      if (["home", "actions"].indexOf(to.name) >= 0 && !this.$store.state.flags.all.loaded) {
         this.startLoading();
       }
     },

diff --git a/ui/frontend/src/api.js b/ui/frontend/src/api.js
@@ -15,7 +15,7 @@ export default {
         return axios.get("/api/config", { transformResponse: transformYaml })
     },
     getStats: function () {
-        return axios.get("/api/outputs/stats")
+        return axios.get("/api/actions/stats")
     },
     getEvents: function() {
         return axios.get("/api/events")
@@ -44,7 +44,7 @@ export default {
     toApiPayload: function (context, modification) {
         const rootState = context.rootGetters.getAppState
         return {
-            outputs: rootState.outputs.all,
+            actions: rootState.actions.all,
             routes: rootState.routes.all,
             templates: rootState.templates.all,
             events: rootState.events.all,

diff --git a/ui/frontend/src/components/OutputCard.vue → ui/frontend/src/components/ActionCard.vue b/ui/frontend/src/components/OutputCard.vue → ui/frontend/src/components/ActionCard.vue
@@ -18,7 +18,7 @@
       </div>
       <div class="card-footer text-center">
         <router-link
-          :to="{ name: 'output', params: { name: name } }"
+          :to="{ name: 'action', params: { name: name } }"
           class="btn btn-link"
           >Edit</router-link
         >

diff --git a/ui/frontend/src/components/OutputDetails.vue → ui/frontend/src/components/ActionDetails.vue b/ui/frontend/src/components/OutputDetails.vue → ui/frontend/src/components/ActionDetails.vue
@@ -32,13 +32,13 @@
           <div class="row">
             <div class="col">
               <div class="form-group form-input">
-                <label for="outputType">Type</label>
+                <label for="actionType">Type</label>
                 <select
                   class="form-select form-control"
                   :value="formValues.type"
-                  id="outputType"
+                  id="actionType"
                   name="type"
-                  @input="updateOutputType"
+                  @input="updateActionType"
                 >
                   <option value="email">Email</option>
                   <option value="jira">Jira</option>
@@ -461,7 +461,7 @@ export default {
       isTestingInProgress: false,
       fields: {}, //required for mixins
       errors: {}, //required for mixins
-      outputType: "", //stored separately to track dependencies
+      actionType: "", //stored separately to track dependencies
       jiraAssigneeDescription:
         'Optional: comma separated list of users (emails) that will be assigned to ticket, e.g., ["[email protected]"]. To assign a ticket to the Application Owner email address (as defined in Aqua Application Scope, owner email field), specify ["<%application_scope_owner%>"] as the assignee value',
     };
@@ -474,41 +474,41 @@ export default {
   computed: {
     ...mapState({
       formValues(state) { //required for mixins
-        const found = state.outputs.all.filter(
+        const found = state.actions.all.filter(
           (item) => item.name === this.name
         );
 
         const result = found.length ? { ...found[0] } : { type: "email" };
 
-        this.outputType = result.type;
+        this.actionType = result.type;
         this.unknowns = {...result.unknowns}
 
         return result;
       },
     }),
     showUrl() {
-      return urlDescriptionByType[this.outputType] !== undefined;
+      return urlDescriptionByType[this.actionType] !== undefined;
     },
     getUrlDescription() {
-      return urlDescriptionByType[this.outputType];
+      return urlDescriptionByType[this.actionType];
     },
     isServiceNow() {
-      return this.outputType === "serviceNow";
+      return this.actionType === "serviceNow";
     },
     isSplunk() {
-      return this.outputType === "splunk";
+      return this.actionType === "splunk";
     },
     isEmail() {
-      return this.outputType === "email";
+      return this.actionType === "email";
     },
     isJira() {
-      return this.outputType === "jira";
+      return this.actionType === "jira";
     },
     isNexusIQ() {
-      return this.outputType === "nexusIq";
+      return this.actionType === "nexusIq";
     },
     showCredentials() {
-      return typesWithCredentials.indexOf(this.outputType) >= 0;
+      return typesWithCredentials.indexOf(this.actionType) >= 0;
     },
   },
   filters: {
@@ -525,7 +525,7 @@ export default {
       this.isTestingInProgress = true;
 
       this.$store
-        .dispatch("outputs/test", this.formValues)
+        .dispatch("actions/test", this.formValues)
         .then(() => {
           this.$bvToast.toast("Action is configured correctly", {
             title: "Success",
@@ -552,28 +552,28 @@ export default {
         this.formValues.unknowns={...this.unknowns}
       }
       if (this.name) {
-        this.$store.dispatch("outputs/update", {
+        this.$store.dispatch("actions/update", {
           value: this.formValues,
           name: this.name,
         });
       } else {
-        this.$store.dispatch("outputs/add", this.formValues);
+        this.$store.dispatch("actions/add", this.formValues);
       }
       this.$router.push({ name: "home" });
     },
-    updateOutputType(e) {
-      this.outputType = e.target.value;
+    updateActionType(e) {
+      this.actionType = e.target.value;
       this.updateField(e);
     },
     doRemove() {
-      this.$store.dispatch("outputs/remove", this.name);
+      this.$store.dispatch("actions/remove", this.name);
       this.$router.push({ name: "home" });
     },
     uniqueName(label, value) {
       if  (!value) {
         return `${label} is required`
       }
-      const found = this.$store.state.outputs.all.filter(
+      const found = this.$store.state.actions.all.filter(
         (item) => item.name === value
       );
 

diff --git a/ui/frontend/src/components/Outputs.vue → ui/frontend/src/components/Actions.vue b/ui/frontend/src/components/Outputs.vue → ui/frontend/src/components/Actions.vue
@@ -1,30 +1,30 @@
 <template>
 <div >
     <div class="row justify-content-end pb-3 pr-3">
-        <router-link :to="{name: 'add-output'}" class="btn btn-primary">Add Action</router-link>
+        <router-link :to="{name: 'add-action'}" class="btn btn-primary">Add Action</router-link>
     </div>
     <div class="row row-cols-1 row-cols-md-3">
-        <OutputCard v-for="(output, index) in outputs"
+        <ActionCard v-for="(action, index) in actions"
             :key="index"
-            :type="output.type"
-            :name="output.name"
-            :enable="output.enable">
-        </OutputCard>
+            :type="action.type"
+            :name="action.name"
+            :enable="action.enable">
+        </ActionCard>
     </div>
 </div>
 </template>
 <script>
-import OutputCard from './OutputCard.vue';
+import ActionCard from './ActionCard.vue';
 import { mapState} from 'vuex'
 
 export default {
     components: {
-        OutputCard
+        ActionCard
     },
     computed: {
         ...mapState({
-            outputs (state) {
-                return state.outputs.all
+            actions (state) {
+                return state.actions.all
             }
         })
     }

diff --git a/ui/frontend/src/components/RouteCard.vue b/ui/frontend/src/components/RouteCard.vue
@@ -12,7 +12,7 @@
         </div>
 
         <h6 class="card-subtitle text-muted">
-          {{ outputCnt }} actions configured
+          {{ actionCnt }} actions configured
         </h6>
       </div>
       <div class="card-footer text-center">
@@ -29,7 +29,7 @@
 <script>
 
 export default {
-  props: ["name", "outputCnt"],
+  props: ["name", "actionCnt"],
   data() {
     return {};
   }

diff --git a/ui/frontend/src/components/RouteDetails.vue b/ui/frontend/src/components/RouteDetails.vue
@@ -50,10 +50,10 @@
 
           <b-form-group label="Selected actions">
             <b-form-checkbox-group
-              id="outputs"
-              v-model="formValues.outputs"
-              :options="availableOutputs"
-              name="outputs"
+              id="actions"
+              v-model="formValues.actions"
+              :options="availableActions"
+              name="actions"
             ></b-form-checkbox-group>
             <small class="form-text text-muted">
               Select actions to route events to
@@ -183,14 +183,14 @@ export default {
 
         const result = found.length ? { ...found[0] } : {};
 
-        if (!result.output) {
-          result.output = [];
+        if (!result.action) {
+          result.action = [];
         }
 
         return result;
       },
-      availableOutputs(state) {
-        return state.outputs.all.map((item) => item.name);
+      availableActions(state) {
+        return state.actions.all.map((item) => item.name);
       },
       availableTemplates(state) {
         return state.templates.all.map((item) => item.name);

diff --git a/ui/frontend/src/components/Routes.vue b/ui/frontend/src/components/Routes.vue
@@ -4,7 +4,7 @@
         <router-link :to="{name: 'add-route'}" class="btn btn-primary">Add Route</router-link>
     </div>
     <div class="row row-cols-1 row-cols-md-3">
-        <RouteCard v-for="(route, index) in routes" :key="'route-' + index" :name="route.name" :outputCnt="outputCnt(route.outputs)"/>
+        <RouteCard v-for="(route, index) in routes" :key="'route-' + index" :name="route.name" :actionCnt="actionCnt(route.actions)"/>
     </div>
 </div>
 </template>
@@ -17,8 +17,8 @@ export default {
         RouteCard
     },
     methods: {
-        outputCnt(outputs) {
-            return outputs?outputs.length: 0
+        actionCnt(actions) {
+            return actions?actions.length: 0
         }
     },
     computed: {

diff --git a/ui/frontend/src/main.js b/ui/frontend/src/main.js
@@ -1,9 +1,9 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import App from './App.vue'
-import Outputs from './components/Outputs.vue'
+import Actions from './components/Actions.vue'
 import LoginForm from './components/LoginForm.vue'
-import OutputDetails from './components/OutputDetails.vue'
+import ActionDetails from './components/ActionDetails.vue'
 import RouteDetails from './components/RouteDetails.vue'
 import Routes from './components/Routes.vue'
 import TemplateDetails from './components/TemplateDetails.vue'
@@ -20,15 +20,15 @@ Vue.use(BootstrapVueIcons);
 Vue.use(VueRouter);
 
 const routes = [
-  { name: 'home', path: '/', redirect: '/outputs' },
-  { name: 'outputs', path: '/outputs', component: Outputs },
+  { name: 'home', path: '/', redirect: '/actions' },
+  { name: 'actions', path: '/actions', component: Actions },
   { name: 'routes', path: '/routes', component: Routes },
   { name: 'add-route', path: '/route', component: RouteDetails },
   { name: 'route', path: '/route/:name', component: RouteDetails },
   { name: 'settings', path: '/settings', component: Settings },
   { name: 'login', path: '/login', component: LoginForm },
-  { name: 'add-output', path: '/output', component: OutputDetails },
-  { name: 'output', path: '/output/:name', component: OutputDetails },
+  { name: 'add-action', path: '/action', component: ActionDetails },
+  { name: 'action', path: '/action/:name', component: ActionDetails },
   { name: 'events', path: '/events', component: Events },
 
   { name: 'templates', path: '/templates', component: Templates },