GeoNode Header Component

ee/app/assets/javascripts/geo_nodes/components/geo_node_header.vue

+<script>
+  import { s__ } from '~/locale';
+  import icon from '~/vue_shared/components/icon.vue';
+  import loadingIcon from '~/vue_shared/components/loading_icon.vue';
+  import tooltip from '~/vue_shared/directives/tooltip';
+
+  export default {
+    components: {
+      icon,
+      loadingIcon,
+    },
+    directives: {
+      tooltip,
+    },
+    props: {
+      node: {
+        type: Object,
+        required: true,
+      },
+      nodeDetails: {
+        type: Object,
+        required: true,
+      },
+      nodeDetailsLoading: {
+        type: Boolean,
+        required: true,
+      },
+      nodeDetailsFailed: {
+        type: Boolean,
+        required: true,
+      },
+    },
+    computed: {
+      isNodeHTTP() {
+        return this.node.url.startsWith('http://');
+      },
+      showNodeStatusIcon() {
+        if (this.nodeDetailsLoading) {
+          return false;
+        }
+
+        return this.isNodeHTTP || this.nodeDetailsFailed;
+      },
+      nodeStatusIconClass() {
+        const iconClasses = 'prepend-left-10 pull-left node-status-icon';
+        if (this.nodeDetailsFailed) {
+          return `${iconClasses} status-icon-failure`;
+        }
+        return `${iconClasses} status-icon-warning`;
+      },
+      nodeStatusIconName() {
+        if (this.nodeDetailsFailed) {
+          return 'status_failed_borderless';
+        }
+        return 'warning';
+      },
+      nodeStatusIconTooltip() {
+        if (this.nodeDetailsFailed) {
+          return '';
+        }
+        return s__('GeoNodes|You have configured Geo nodes using an insecure HTTP connection. We recommend the use of HTTPS.');
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="panel-heading">
+    <div class="row">
+      <div class="col-md-8 clearfix">
+        <strong class="node-url inline pull-left">
+          {{ node.url }}
+        </strong>
+        <loading-icon
+          v-if="nodeDetailsLoading || node.nodeActionActive"
+          class="node-details-loading prepend-left-10 pull-left inline"
+        />
+        <icon
+          v-tooltip
+          v-if="showNodeStatusIcon"
+          data-container="body"
+          data-placement="bottom"
+          :name="nodeStatusIconName"
+          :size="18"
+          :css-classes="nodeStatusIconClass"
+          :title="nodeStatusIconTooltip"
+        />
+        <span class="inline pull-left prepend-left-10">
+          <span
+            class="prepend-left-5 node-badge current-node"
+            v-if="node.current"
+          >
+            {{ s__('Current node') }}
+          </span>
+          <span
+            class="prepend-left-5 node-badge primary-node"
+            v-if="node.primary"
+          >
+            {{ s__('Primary') }}
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>

spec/javascripts/geo_nodes/components/geo_node_header_spec.js

+import Vue from 'vue';
+
+import GeoNodeHeaderComponent from 'ee/geo_nodes/components/geo_node_header.vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import { mockNode, mockNodeDetails } from '../mock_data';
+
+const createComponent = ({
+  node = Object.assign({}, mockNode),
+  nodeDetails = Object.assign({}, mockNodeDetails),
+  nodeDetailsLoading = false,
+  nodeDetailsFailed = false,
+}) => {
+  const Component = Vue.extend(GeoNodeHeaderComponent);
+
+  return mountComponent(Component, {
+    node,
+    nodeDetails,
+    nodeDetailsLoading,
+    nodeDetailsFailed,
+  });
+};
+
+describe('GeoNodeHeader', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponent({});
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('computed', () => {
+    describe('isNodeHTTP', () => {
+      it('returns `true` when Node URL protocol is non-HTTPS', () => {
+        expect(vm.isNodeHTTP).toBe(true);
+      });
+
+      it('returns `false` when Node URL protocol is HTTPS', (done) => {
+        vm.node.url = 'https://127.0.0.1:3001/';
+        Vue.nextTick()
+          .then(() => {
+            expect(vm.isNodeHTTP).toBe(false);
+          })
+          .then(done)
+          .catch(done.fail);
+      });
+    });
+
+    describe('showNodeStatusIcon', () => {
+      it('returns `false` when Node details are still loading', (done) => {
+        vm.nodeDetailsLoading = true;
+        Vue.nextTick()
+          .then(() => {
+            expect(vm.showNodeStatusIcon).toBe(false);
+          })
+          .then(done)
+          .catch(done.fail);
+      });
+
+      it('returns `true` when Node details failed to load', (done) => {
+        vm.nodeDetailsFailed = true;
+        Vue.nextTick()
+          .then(() => {
+            expect(vm.showNodeStatusIcon).toBe(true);
+          })
+          .then(done)
+          .catch(done.fail);
+      });
+
+      it('returns `true` when Node details loaded and Node URL is non-HTTPS', (done) => {
+        vm.nodeDetailsLoading = false;
+        vm.nodeDetailsFailed = false;
+        vm.node.url = mockNode.url;
+        Vue.nextTick()
+          .then(() => {
+            expect(vm.showNodeStatusIcon).toBe(true);
+          })
+          .then(done)
+          .catch(done.fail);
+      });
+
+      it('returns `false` when Node details loaded and Node URL is HTTPS', (done) => {
+        vm.node.url = 'https://127.0.0.1:3001/';
+        Vue.nextTick()
+          .then(() => {
+            expect(vm.showNodeStatusIcon).toBe(false);
+          })
+          .then(done)
+          .catch(done.fail);
+      });
+    });
+  });
+});