Merge pull request #38 from mitre/fix/styling-fixes

Styling fixes and others

src/components/abilities/AbilityChartStatus.vue

@@ -41,7 +41,9 @@ async function initChart() {
 function setChartOption() {
   chart.value.setOption({
     title: {
-      text: `${Object.keys(abilityStore.abilities).length} Abilities`,
+      text: `${Object.keys(abilityStore.abilities).length} ${
+        Object.keys(abilityStore.abilities).length == 1 ? "Ability" : "Abilities"
+      }`,
       textStyle: {
         color: "white",
       },

src/components/abilities/CreateEditAbility.vue

@@ -177,9 +177,9 @@ async function deleteAbility() {
                     .field.is-grouped.is-grouped-multiline
                         label.label Payloads
                         br
-                        .control(v-if="executor.payloads.length === 0")
+                        .control(v-if="executor.payloads.length === 0" class="ml-4")
                             span.tag.is-light No payloads
-                        .control(v-for="(payload, idx) in executor.payloads")
+                        .control(v-for="(payload, idx) in executor.payloads" class="ml-4")
                           .tags.has-addons
                             span.tag.is-primary {{ payload }}
                             a.tag.is-delete(@click="executor.payloads.splice(idx, 1)")

src/components/adversaries/AdversaryChartStatus.vue

@@ -41,7 +41,7 @@ async function initChart() {
 function setChartOption() {
   chart.value.setOption({
     title: {
-      text: `${Object.keys(adversaryStore.adversaries).length} Adversaries`,
+      text: `${Object.keys(adversaryStore.adversaries).length} ${Object.keys(adversaryStore.adversaries).length == 1 ? "Adversary" : "Adversaries"}`,
       textStyle: {
         color: "white",
       },

src/components/agents/AgentChartStatus.vue

@@ -42,7 +42,7 @@ async function initChart() {
 function setChartOption() {
   chart.value.setOption({
     title: {
-      text: `${agents.value.length} Agent${agents.value.length > 1 ? "s" : ""}`,
+      text: `${agents.value.length} Agent${agents.value.length == 1 ? "" : "s"}`,
       textStyle: {
         color: "white",
       },

src/components/operations/Graph.vue

@@ -239,14 +239,14 @@ const getAgentTooltipContent = (agent) => {
 .graph-wrapper(v-if="operationStore.selectedOperationID")
   .graph-header.is-fullwidth.is-flex.is-flex-direction-row.is-align-items-center.is-justify-content-space-between(@click="isGraphOpen = !isGraphOpen")
     .left-graph-header.is-flex.is-flex-direction-row.is-align-items-center.is-3
-      h3 Graph
+      h3 {{operationStore.currentOperation.name}}
       button.button.ml-4(type="button" @click="downloadGraphAsSvg")
         span Download Graph SVG
     span.icon(v-if="!isGraphOpen")
       font-awesome-icon(icon="fas fa-plus")
     span.icon(v-if="isGraphOpen")
       font-awesome-icon(icon="fas fa-minus")
-  .graph-container(:style="{height: isGraphOpen ? '30rem' : '0px'}")
+  .graph-container(:style="{height: isGraphOpen ? '34rem' : '0px'}")
     .tooltip-wrapper()
       v-network-graph.graph(ref="graph" :nodes="nodes" :edges="edges" :paths="paths" :event-handlers="eventHandlers" :configs="graphConfig" :layouts="layouts")
         defs
@@ -389,6 +389,8 @@ const getAgentTooltipContent = (agent) => {
 .sidebar {
   padding: 1rem;
   transition: width 0.5s;
+  display: flex;
+  flex-direction: column;
 }
 
 .sidebar-table {
@@ -397,6 +399,7 @@ const getAgentTooltipContent = (agent) => {
   border-radius: 8px;
   box-shadow: 0 0 5px #121212;
   width: 350px;
+  flex-grow: 1;
 }
 
 .sidebar-header {

src/components/operations/OperationChartStatus.vue

@@ -47,7 +47,7 @@ function setChartOption() {
   chart.value.setOption({
     title: {
       text: `${Object.keys(operationStore.operations).length} Operation${
-        Object.keys(operationStore.operations).length > 1 ? "s" : ""
+        Object.keys(operationStore.operations).length == 1 ? "" : "s"
       }`,
       textStyle: {
         color: "white",

src/main.js

@@ -25,7 +25,11 @@ app.use(router);
 app.use(VueScrollTo);
 app.use(FloatingVue);
 app.use(VNetworkGraph);
-
+app.directive('focus', {
+  mounted(el) {
+    el.focus();
+  }
+});
 // Font awesome icons, add more icons here as needed
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

src/views/LoginView.vue

@@ -17,14 +17,14 @@ async function handleLogin() {
 </script>
 
 <template lang="pug">
-#login.container.content.fullwh.is-flex.is-flex-direction-column.is-align-items-center.is-justify-content-center
+#login.container.content.fullwh.is-flex.is-flex-direction-column.is-align-items-center.is-justify-content-center()
     img(src="/src/assets/img/caldera-logo.png" alt="Caldera Logo")
     .p-6
         form
             .field
                 label.label Username
                 .control.has-icons-left
-                    input.input(v-model="username" type="text" placeholder="username")
+                    input.input(v-focus v-model="username" type="text" placeholder="username")
                     span.icon.is-small.is-left
                         font-awesome-icon(icon="fas fa-user")
             .field
@@ -33,7 +33,7 @@ async function handleLogin() {
                     input.input(v-model="password" type="password" placeholder="password")
                     span.icon.is-small.is-left
                         font-awesome-icon(icon="fas fa-lock")
-            button.button.fancy-button.is-fullwidth(type="button" @click="handleLogin()") Log In
+            button.button.fancy-button.is-fullwidth(type="submit" @click="handleLogin()") Log In
         .has-text-danger
             p {{ loginError }}
 </template>

src/views/OperationsView.vue

@@ -513,6 +513,7 @@ OutputModal(v-if="selectedOutputLink" :link="selectedOutputLink")
   top: 0;
   left: initial;
   right: 90%;
+  max-width: 75vw;
   max-height: 300px;
   border-radius: 8px;
   padding: 0;