@rancher/shell 0.1.0

package/cloud-credential/vmwarevsphere.vue

@@ -0,0 +1,99 @@
+<script>
+import CreateEditView from '@shell/mixins/create-edit-view';
+import LabeledInput from '@shell/components/form/LabeledInput';
+import { NORMAN } from '@shell/config/types';
+
+export default {
+  components: { LabeledInput },
+  mixins:     [CreateEditView],
+
+  watch: {
+    value: {
+      deep: true,
+      handler(neu) {
+        this.$emit('validationChanged', !!neu);
+      }
+    }
+  },
+
+  methods: {
+    async test() {
+      // The vsphere apis require that an existing cloudCredentialId be passed in order to use the API.
+      // We create a temporary credential and attempt to invoke one of the basic APIs to authenticate the user.
+      // We then delete the temporary credential since the existing system will create one after we authenticate.
+      const temporaryCredential = await this.$store.dispatch('rancher/create', {
+        type:                          NORMAN.CLOUD_CREDENTIAL,
+        vmwarevspherecredentialConfig: this.value.decodedData
+      });
+
+      try {
+        await temporaryCredential.save();
+
+        await this.$store.dispatch('management/request', {
+          url:                  `/meta/vsphere/data-centers?cloudCredentialId=${ temporaryCredential.id }`,
+          redirectUnauthorized: false,
+        }, { root: true });
+      } catch (ex) {
+        return false;
+      } finally {
+        await temporaryCredential.remove();
+      }
+
+      return true;
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <div class="row mb-10">
+      <div class="col span-6">
+        <LabeledInput
+          :value="value.decodedData.vcenter"
+          label-key="cluster.credential.vmwarevsphere.server.label"
+          placeholder-key="cluster.credential.vmwarevsphere.server.placeholder"
+          :required="true"
+          :mode="mode"
+          @input="value.setData('vcenter', $event);"
+        />
+      </div>
+      <div class="col span-6">
+        <LabeledInput
+          :value="value.decodedData.vcenterPort"
+          label-key="cluster.credential.vmwarevsphere.port.label"
+          :required="true"
+          type="number"
+          min="1"
+          max="65535"
+          :mode="mode"
+          @input="value.setData('vcenterPort', $event);"
+        />
+      </div>
+    </div>
+    <div class="row mb-10">
+      <div class="col span-6">
+        <LabeledInput
+          :value="value.decodedData.username"
+          label-key="cluster.credential.vmwarevsphere.username.label"
+          :required="true"
+          :mode="mode"
+          @input="value.setData('username', $event);"
+        />
+      </div>
+      <div class="col span-6">
+        <LabeledInput
+          :value="value.decodedData.password"
+          label-key="cluster.credential.vmwarevsphere.password.label"
+          :required="true"
+          type="password"
+          :mode="mode"
+          @input="value.setData('password', $event);"
+        />
+      </div>
+    </div>
+    <p class="text-muted">
+      {{ t('cluster.credential.vmwarevsphere.note', {}, true) }}
+    </p>
+  </div>
+</template>

package/components/ActionDropdown.vue

@@ -0,0 +1,249 @@
+<script>
+export default {
+  name: 'ActionDropdown',
+
+  props: {
+    size: {
+      type:    String,
+      default: '' // possible values are xs, sm, lg. empty is default .btn
+    },
+    // whether this is a button and dropdown (default) or dropdown that looks like a button/dropdown
+    dualAction: {
+      type:    Boolean,
+      default: true
+    },
+
+    disableButton: {
+      type:    Boolean,
+      default: false
+    }
+  },
+
+  computed: {
+    buttonSize() {
+      const { size } = this;
+      let out;
+
+      switch (size) {
+      case '':
+        out = 'btn';
+        break;
+      case 'xs':
+        out = 'btn btn-xs';
+        break;
+      case 'sm':
+        out = 'btn btn-sm';
+        break;
+      case 'lg':
+        out = 'btn btn-lg';
+        break;
+      default:
+      }
+
+      return out;
+    }
+  },
+
+  methods: {
+    hasSlot(name = 'default') {
+      return !!this.$slots[name] || !!this.$scopedSlots[name];
+    },
+
+    // allows parent components to programmatically open the dropdown
+    togglePopover() {
+      // this.$refs.popoverButton.click();
+    },
+  }
+};
+</script>
+<template>
+  <div class="dropdown-button-group">
+    <div
+      class="dropdown-button bg-primary"
+      :class="{'one-action':!dualAction, [buttonSize]:true, 'disabled': disableButton}"
+    >
+      <v-popover
+        placement="bottom"
+        :container="false"
+        :disabled="disableButton"
+        :popper-options="{modifiers: { flip: { enabled: false } } }"
+      >
+        <slot name="button-content" :buttonSize="buttonSize">
+          <button
+            ref="popoverButton"
+            class="icon-container bg-primary no-left-border-radius"
+            :class="buttonSize"
+            :disabled="disableButton"
+            type="button"
+          >
+            Button <i class="icon icon-chevron-down" />
+          </button>
+        </slot>
+        <template #popover>
+          <slot name="popover-content" />
+        </template>
+      </v-popover>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+// load here instead of component so SSR render isn't all wonky
+.dropdown-button-group {
+  $xs-padding: 2px 3px;
+
+  .no-left-border-radius {
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+
+  .no-right-border-radius {
+    border-top-right-radius: 0px;
+    border-bottom-right-radius: 0px;
+  }
+
+  .btn {
+    line-height: normal;
+    border: 0px;
+  }
+
+  .btn-xs,
+  .btn-group-xs > .btn,
+  .btn-xs .btn-label {
+      padding: $xs-padding;
+      font-size: 13px;
+  }
+
+  // this matches the top/bottom padding of the default button
+  $trigger-padding: 15px 10px 15px 10px;
+  $xs-trigger-padding: 2px 4px 4px 4px;
+  $sm-trigger-padding: 10px 10px 10px 10px;
+  $lg-trigger-padding: 18px 10px 10px 10px;
+
+  .v-popover {
+    .text-right {
+      margin-top: 5px;
+    }
+    .trigger {
+      height: 100%;
+      .icon-container {
+        height: 100%;
+        padding: 10px 10px 10px 10px;
+        i {
+          transform: scale(1);
+        }
+        &.btn-xs {
+          padding: $xs-trigger-padding;
+        }
+        &.btn-sm {
+          padding: $sm-trigger-padding;
+        }
+        &.btn-lg {
+          padding: $lg-trigger-padding;
+        }
+        &:focus {
+          outline-style: none;
+          box-shadow: none;
+          border-color: transparent;
+        }
+      }
+    }
+  }
+
+  .dropdown-button {
+    background: var(--tooltip-bg);
+    color: var(--link-text);
+    padding: 0;
+    display: inline-flex;
+
+    .wrapper-content {
+      button {
+        border-right: 0px;
+      }
+    }
+
+    &>*, .icon-chevron-down {
+      color: var(--primary);
+      background-color: rgba(0,0,0,0);
+    }
+
+    &.bg-primary:hover {
+      background: var(--accent-btn-hover);
+    }
+
+    &.one-action {
+      position: relative;
+      &>.btn {
+        padding: 15px 35px 15px 15px;
+      }
+      .v-popover{
+        .trigger{
+          position: absolute;
+          top: 0px;
+          right: 0px;
+          left: 0px;
+          bottom: 0px;
+          BUTTON {
+            position: absolute;
+            right: 0px;
+          }
+        }
+      }
+    }
+  }
+  .popover {
+    border: none;
+  }
+  .tooltip {
+    margin-top: 0px;
+
+    &[x-placement^="bottom"] {
+      .tooltip-arrow {
+        border-bottom-color: var(--dropdown-border);
+
+        &:after {
+          border-bottom-color: var(--dropdown-bg);
+        }
+      }
+    }
+
+    .tooltip-inner {
+      color: var(--dropdown-text);
+      background-color: var(--dropdown-bg);
+      border: 1px solid var(--dropdown-border);
+      padding: 0px;
+      text-align: left;
+
+      LI {
+        padding: 10px;
+
+        &.divider {
+          padding-top: 0px;
+          padding-bottom: 0px;
+
+          > .divider-inner {
+            padding: 0;
+            border-bottom: 1px solid var(--dropdown-divider);
+            width: 125%;
+            margin: 0 auto;
+          }
+        }
+
+        &:not(.divider):hover {
+          background-color: var(--dropdown-hover-bg);
+          color: var(--dropdown-hover-text);
+          cursor: pointer;
+        }
+      }
+
+    }
+  }
+
+  //header
+  .user-info {
+    border-bottom: 1px solid var(--border);
+    display: block;
+  }
+}
+
+</style>

package/components/ActionMenu.vue

@@ -0,0 +1,312 @@
+<script>
+import { mapGetters } from 'vuex';
+import $ from 'jquery';
+import { AUTO, CENTER, fitOnScreen } from '@shell/utils/position';
+import { isAlternate } from '@shell/utils/platform';
+
+const HIDDEN = 'hide';
+const CALC = 'calculate';
+const SHOW = 'show';
+
+export default {
+  name: 'ActionMenu',
+
+  props: {
+    customActions: {
+      // Custom actions can be used if you need the action
+      // menu to work for something that is not a Kubernetes
+      // resource, for example, a receiver within an
+      // AlertmanagerConfig.
+
+      // This prop can also be used to avoid
+      // a dependency on Vuex. For now, this component can have
+      // its state controlled by either props OR by Vuex, but if it
+      // gets unwieldy, it could later be split into two components,
+      // one with the dependency on Vuex and one without.
+      type:    Array,
+      default: () => {
+        return [];
+      }
+    },
+    open: {
+      // Use this prop to show and hide the action menu if
+      // you want to avoid an unnecessary dependency on Vuex.
+
+      // Note: There are known issues with performance if this component
+      // is included with every row of a table, so don't do that.
+      // Instead the ActionMenu component can be included once on a page,
+      // and then if you click on a list item, that can change
+      // the menu's target so that it can open in different locations.
+      type:    Boolean,
+      default: false
+    },
+    useCustomTargetElement: {
+      // The custom target element can be a
+      // variable in the component state of a list or detail page
+      // if you don't want a dependency on Vuex.
+      // Then when an action menu button is clicked, it can emit an event
+      // that triggers the target to be set to the clicked element,
+      // so that the dropdown menu can open where the context menu
+      // was clicked.
+      // This flag tells the component to look for and use the
+      // custom target element.
+      type:    Boolean,
+      default: false
+    },
+    customTargetElement: {
+      type:    HTMLElement,
+      default: null
+    },
+    customTargetEvent: {
+      // The event details from the user's click can be used
+      // for positioning the menu on the page.
+      type:    PointerEvent,
+      default: null
+    },
+  },
+
+  data() {
+    return { phase: HIDDEN, style: {} };
+  },
+
+  computed: {
+    ...mapGetters({
+      // Use either these Vuex getters
+      // OR the props to set the action menu state,
+      // but don't use both.
+      targetElem:  'action-menu/elem',
+      targetEvent: 'action-menu/event',
+      shouldShow:  'action-menu/showing',
+      options:     'action-menu/options'
+    }),
+
+    showing() {
+      return this.phase !== HIDDEN;
+    },
+    menuOptions() {
+      if (this.customActions.length > 0) {
+        return this.customActions;
+      }
+
+      return this.options;
+    },
+  },
+
+  watch: {
+    shouldShow: {
+      handler(show) {
+        if ( show ) {
+          this.phase = CALC;
+          this.updateStyle();
+          this.$nextTick(() => {
+            if ( this.phase === CALC ) {
+              this.phase = SHOW;
+              this.updateStyle();
+            }
+          });
+        } else {
+          this.phase = HIDDEN;
+        }
+      },
+    },
+
+    open() {
+      // This component has a timing issue where the
+      // mounted size of the expanded menu is used to
+      // calculate where its position should be. That means
+      // it won't work if the style is a computed property,
+      // so we put a watcher here to update the style instead.
+      this.updateStyle();
+    },
+
+    '$route.path'(val, old) {
+      this.hide();
+    }
+  },
+
+  methods: {
+    hide() {
+      if (this.useCustomTargetElement) {
+        // If the show/hide state is controlled
+        // by props, emit an event to close the menu.
+        this.$emit('close');
+      } else {
+        // If the show/hide state is controlled
+        // by Vuex, mutate the store to close the menu.
+        this.$store.commit('action-menu/hide');
+      }
+    },
+
+    updateStyle() {
+      if ( this.phase === SHOW && !this.useCustomTargetElement) {
+        const menu = $('.menu', this.$el)[0];
+        const event = this.targetEvent;
+        const elem = this.targetElem;
+
+        // If the action menu state is controlled with Vuex,
+        // use the target element and the target event
+        // to position the menu.
+        this.style = fitOnScreen(menu, event || elem, {
+          overlapX:  true,
+          fudgeX:    elem ? 4 : 0,
+          fudgeY:    elem ? 4 : 0,
+          positionX: (elem ? AUTO : CENTER),
+          positionY: AUTO,
+        });
+        this.style.visibility = 'visible';
+
+        return;
+      }
+
+      if ( this.open && this.useCustomTargetElement) {
+        const menu = $('.menu', this.$el)[0];
+        const elem = this.customTargetElement;
+
+        // If the action menu state is controlled with
+        // props, use the target element to position the menu.
+        this.style = fitOnScreen(menu, elem, {
+          overlapX:  true,
+          fudgeX:    elem ? 4 : 0,
+          fudgeY:    elem ? 4 : 0,
+          positionX: (elem ? AUTO : CENTER),
+          positionY: AUTO,
+        }, true );
+
+        this.style.visibility = 'visible';
+
+        return;
+      }
+
+      this.style = {};
+    },
+
+    execute(action, event, args) {
+      if (action.disabled) {
+        return;
+      }
+
+      if (this.useCustomTargetElement) {
+        // If the state of this component is controlled
+        // by props instead of Vuex, we assume you wouldn't want
+        // the mutation to have a dependency on Vuex either.
+        // So in that case we use events to execute actions instead.
+        // If an action list item is clicked, this
+        // component emits that event, then we assume the parent
+        // component will execute the action.
+        this.$emit(action.action, {
+          action,
+          event,
+          ...args,
+          route: this.$route
+        });
+      } else {
+        // If the state of this component is controlled
+        // by Vuex, mutate the store when an action is clicked.
+        const opts = { alt: isAlternate(event) };
+
+        this.$store.dispatch('action-menu/execute', {
+          action, args, opts
+        });
+      }
+
+      this.hide();
+    },
+
+    hasOptions(options) {
+      return options.length !== undefined ? options.length : Object.keys(options).length > 0;
+    }
+  },
+};
+</script>
+
+<template>
+  <div v-if="showing || open">
+    <div class="background" @click="hide" @contextmenu.prevent></div>
+    <ul class="list-unstyled menu" :style="style">
+      <li
+        v-for="opt in menuOptions"
+        :key="opt.action"
+        :disabled="opt.disabled"
+        :class="{divider: opt.divider}"
+        @click="execute(opt, $event)"
+      >
+        <i v-if="opt.icon" :class="{icon: true, [opt.icon]: true}" />
+        <span v-html="opt.label" />
+      </li>
+      <li v-if="!hasOptions(menuOptions)" class="no-actions">
+        <span v-t="'sortableTable.noActions'" />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .root {
+    position: absolute;
+  }
+
+  .menu {
+    position: absolute;
+    visibility: hidden;
+    top: 0;
+    left: 0;
+    z-index: z-index('dropdownContent');
+    min-width: 145px;
+
+    color: var(--dropdown-text);
+    background-color: var(--dropdown-bg);
+    border: 1px solid var(--dropdown-border);
+    border-radius: 5px;
+    box-shadow: 0 5px 20px var(--shadow);
+
+    LI {
+      align-items: center;
+      display: flex;
+      padding: 8px 10px;
+      margin: 0;
+
+      &[disabled] {
+        cursor: not-allowed  !important;
+        color: var(--disabled-text);
+      }
+
+      &.divider {
+        padding: 0;
+        border-bottom: 1px solid var(--dropdown-divider);
+      }
+
+      &:not(.divider):hover {
+        background-color: var(--dropdown-hover-bg);
+        color: var(--dropdown-hover-text);
+        cursor: pointer;
+      }
+
+      .icon {
+        display: unset;
+        width: 14px;
+        text-align: center;
+        margin-right: 8px;
+      }
+
+      &.no-actions {
+        color: var(--disabled-text);
+      }
+
+      &.no-actions:hover {
+        background-color: initial;
+        color: var(--disabled-text);
+        cursor: default;
+      }
+    }
+  }
+
+  .background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    opacity: 0;
+    z-index: z-index('dropdownOverlay');
+  }
+</style>

package/components/AdvancedSection.vue

@@ -0,0 +1,28 @@
+<script>
+export default {
+  props: {
+    mode: {
+      type:     String,
+      required: true,
+    },
+  },
+
+  data() {
+    return { show: false };
+  },
+
+  methods: {
+    toggle() {
+      this.show = !this.show;
+    },
+  }
+};
+</script>
+
+<template>
+  <div class="mt-20">
+    <a v-t="show ? 'generic.hideAdvanced' : 'generic.showAdvanced'" class="hand block" :class="{'mb-10': show}" @click="toggle" />
+
+    <slot v-if="show" />
+  </div>
+</template>