@rancher/shell 0.1.0

package/components/ResourceDetail/index.vue

@@ -0,0 +1,386 @@
+<script>
+import CreateEditView from '@shell/mixins/create-edit-view/impl';
+import Loading from '@shell/components/Loading';
+import ResourceYaml from '@shell/components/ResourceYaml';
+import {
+  _VIEW, _EDIT, _CLONE, _IMPORT, _STAGE, _CREATE,
+  AS, _YAML, _DETAIL, _CONFIG, PREVIEW, MODE,
+} from '@shell/config/query-params';
+import { SCHEMA } from '@shell/config/types';
+import { createYaml } from '@shell/utils/create-yaml';
+import Masthead from '@shell/components/ResourceDetail/Masthead';
+import DetailTop from '@shell/components/DetailTop';
+import { clone, diff } from '@shell/utils/object';
+import IconMessage from '@shell/components/IconMessage';
+
+function modeFor(route) {
+  if ( route.query?.mode === _IMPORT ) {
+    return _IMPORT;
+  }
+
+  if ( route.params?.id ) {
+    return route.query.mode || _VIEW;
+  } else {
+    return _CREATE;
+  }
+}
+
+async function getYaml(model) {
+  let yaml;
+  const opt = { headers: { accept: 'application/yaml' } };
+
+  if ( model.hasLink('view') ) {
+    yaml = (await model.followLink('view', opt)).data;
+  }
+
+  return yaml;
+}
+
+export default {
+  components: {
+    Loading,
+    DetailTop,
+    ResourceYaml,
+    Masthead,
+    IconMessage,
+  },
+
+  mixins: [CreateEditView],
+
+  props: {
+    storeOverride: {
+      type:    String,
+      default: null,
+    },
+
+    resourceOverride: {
+      type:    String,
+      default: null,
+    },
+
+    parentRouteOverride: {
+      type:    String,
+      default: null,
+    },
+
+    flexContent: {
+      type:    Boolean,
+      default: false,
+    }
+  },
+  async fetch() {
+    const store = this.$store;
+    const route = this.$route;
+    const params = route.params;
+    const inStore = this.storeOverride || store.getters['currentStore'](params.resource);
+    const realMode = this.realMode;
+
+    // eslint-disable-next-line prefer-const
+    let { namespace, id } = params;
+    let resource = this.resourceOverride || params.resource;
+
+    // There are 6 "real" modes that can be put into the query string
+    // These are mapped down to the 3 regular page "mode"s that create-edit-view components
+    // know about:  view, edit, create (stage, import and clone become "create")
+    const mode = ([_CLONE, _IMPORT, _STAGE].includes(realMode) ? _CREATE : realMode);
+
+    const hasCustomDetail = store.getters['type-map/hasCustomDetail'](resource, id);
+    const hasCustomEdit = store.getters['type-map/hasCustomEdit'](resource, id);
+    const schemas = store.getters[`${ inStore }/all`](SCHEMA);
+
+    // As determines what component will be rendered
+    const requested = route.query[AS];
+    let as;
+    let notFound = false;
+
+    if ( mode === _VIEW && hasCustomDetail && (!requested || requested === _DETAIL) ) {
+      as = _DETAIL;
+    } else if ( hasCustomEdit && (!requested || requested === _CONFIG) ) {
+      as = _CONFIG;
+    } else {
+      as = _YAML;
+    }
+
+    this.as = as;
+
+    const options = store.getters[`type-map/optionsFor`](resource);
+
+    this.showMasthead = [_CREATE, _EDIT].includes(mode) ? options.resourceEditMasthead : true;
+    const canViewYaml = options.canYaml;
+
+    if ( options.resource ) {
+      resource = options.resource;
+    }
+
+    const schema = store.getters[`${ inStore }/schemaFor`](resource);
+    let model, initialModel, liveModel, yaml;
+
+    if ( realMode === _CREATE || realMode === _IMPORT ) {
+      if ( !namespace ) {
+        namespace = store.getters['defaultNamespace'];
+      }
+
+      const data = { type: resource };
+
+      if ( schema?.attributes?.namespaced ) {
+        data.metadata = { namespace };
+      }
+
+      liveModel = await store.dispatch(`${ inStore }/create`, data);
+      initialModel = await store.dispatch(`${ inStore }/clone`, { resource: liveModel });
+      model = await store.dispatch(`${ inStore }/clone`, { resource: liveModel });
+
+      if ( as === _YAML ) {
+        yaml = createYaml(schemas, resource, data);
+      }
+    } else {
+      let fqid = id;
+
+      if ( schema.attributes?.namespaced && namespace ) {
+        fqid = `${ namespace }/${ fqid }`;
+      }
+
+      try {
+        liveModel = await store.dispatch(`${ inStore }/find`, {
+          type: resource,
+          id:   fqid,
+          opt:  { watch: true }
+        });
+      } catch (e) {
+        liveModel = {};
+        notFound = fqid;
+      }
+
+      if (realMode === _VIEW) {
+        model = liveModel;
+      } else {
+        model = await store.dispatch(`${ inStore }/clone`, { resource: liveModel });
+      }
+
+      initialModel = await store.dispatch(`${ inStore }/clone`, { resource: liveModel });
+
+      if ( as === _YAML ) {
+        yaml = await getYaml(liveModel);
+      }
+
+      if ( [_CLONE, _IMPORT, _STAGE].includes(realMode) ) {
+        model.cleanForNew();
+        yaml = model.cleanYaml(yaml, realMode);
+      }
+    }
+
+    // Ensure common properties exists
+    model = await store.dispatch(`${ inStore }/cleanForDetail`, model);
+
+    const out = {
+      hasCustomDetail,
+      hasCustomEdit,
+      canViewYaml,
+      resource,
+      as,
+      yaml,
+      initialModel,
+      liveModel,
+      mode,
+      value: model,
+      notFound,
+    };
+
+    for ( const key in out ) {
+      this[key] = out[key];
+    }
+
+    if ( this.mode === _CREATE ) {
+      this.value.applyDefaults(this, realMode);
+    }
+  },
+
+  data() {
+    return {
+      resourceSubtype: null,
+
+      // Set by fetch
+      hasCustomDetail: null,
+      hasCustomEdit:   null,
+      resource:        null,
+      asYaml:          null,
+      yaml:            null,
+      liveModel:       null,
+      initialModel:    null,
+      mode:            null,
+      as:              null,
+      value:           null,
+      model:           null,
+      notFound:        null,
+    };
+  },
+
+  computed: {
+    realMode() {
+      // There are 5 "real" modes that you can start in: view, edit, create, stage, clone
+      const realMode = modeFor(this.$route);
+
+      return realMode;
+    },
+
+    isView() {
+      return this.mode === _VIEW;
+    },
+
+    isYaml() {
+      return this.as === _YAML;
+    },
+
+    isDetail() {
+      return this.as === _DETAIL;
+    },
+
+    offerPreview() {
+      return this.as === _YAML && [_EDIT, _CLONE, _IMPORT, _STAGE].includes(this.mode);
+    },
+
+    showComponent() {
+      switch ( this.as ) {
+      case _DETAIL: return this.detailComponent;
+      case _CONFIG: return this.editComponent;
+      }
+
+      return null;
+    },
+  },
+
+  watch: {
+    '$route.query'(inNeu, inOld) {
+      const neu = clone(inNeu);
+      const old = clone(inOld);
+
+      delete neu[PREVIEW];
+      delete old[PREVIEW];
+
+      if ( !this.isView ) {
+        delete neu[AS];
+        delete old[AS];
+      }
+
+      const queryDiff = Object.keys(diff(neu, old));
+
+      if ( queryDiff.includes(MODE) || queryDiff.includes(AS)) {
+        this.$fetch();
+      }
+    },
+
+    // Auto refresh YAML when the model changes
+    async 'value.metadata.resourceVersion'(a, b) {
+      if ( this.mode === _VIEW && this.as === _YAML && a && b && a !== b) {
+        this.yaml = await getYaml(this.liveModel);
+      }
+    }
+  },
+
+  created() {
+    // eslint-disable-next-line prefer-const
+    const id = this.$route.params.id;
+    const resource = this.resourceOverride || this.$route.params.resource;
+    const options = this.$store.getters[`type-map/optionsFor`](resource);
+
+    const detailResource = options.resourceDetail || options.resource || resource;
+    const editResource = options.resourceEdit || options.resource || resource;
+
+    // FIXME: These aren't right... signature is (rawType, subType).. not (rawType, resourceId)
+    // Remove id? How does subtype get in (cluster/node)
+    this.detailComponent = this.$store.getters['type-map/importDetail'](detailResource, id);
+    this.editComponent = this.$store.getters['type-map/importEdit'](editResource, id);
+  },
+
+  methods: {
+    setSubtype(subtype) {
+      this.resourceSubtype = subtype;
+    },
+
+    keyAction(act) {
+      const m = this.liveModel;
+
+      if ( m?.[act] ) {
+        m[act]();
+      }
+    },
+  }
+};
+</script>
+
+<template>
+  <Loading v-if="$fetchState.pending" />
+  <div v-else-if="notFound">
+    <IconMessage icon="icon-warning">
+      <template v-slot:message>
+        {{ t('generic.notFound') }}
+        <div>
+          <div>{{ t('generic.type') }}: {{ resource }}</div>
+          <div>{{ t('generic.id') }}: {{ notFound }}</div>
+        </div>
+      </template>
+    </IconMessage>
+  </div>
+  <div v-else>
+    <Masthead
+      v-if="showMasthead"
+      :resource="resource"
+      :value="liveModel"
+      :mode="mode"
+      :real-mode="realMode"
+      :as="as"
+      :has-detail="hasCustomDetail"
+      :has-edit="hasCustomEdit"
+      :can-view-yaml="canViewYaml"
+      :resource-subtype="resourceSubtype"
+      :parent-route-override="parentRouteOverride"
+      :store-override="storeOverride"
+    >
+      <DetailTop
+        v-if="isView && isDetail"
+        :value="liveModel"
+      />
+    </Masthead>
+
+    <ResourceYaml
+      v-if="isYaml"
+      ref="resourceyaml"
+      v-model="value"
+      :mode="mode"
+      :yaml="yaml"
+      :offer-preview="offerPreview"
+      :done-route="doneRoute"
+      :done-override="value.doneOverride"
+      :class="{'flex-content': flexContent}"
+    />
+
+    <component
+      :is="showComponent"
+      v-else
+      ref="comp"
+      v-model="value"
+      v-bind="_data"
+      :done-params="doneParams"
+      :done-route="doneRoute"
+      :mode="mode"
+      :initial-value="initialModel"
+      :live-value="liveModel"
+      :real-mode="realMode"
+      :class="{'flex-content': flexContent}"
+      @set-subtype="setSubtype"
+    />
+
+    <button v-if="isView" v-shortkey.once="['d']" class="hide" @shortkey="keyAction('goToDetail')" />
+    <button v-if="isView" v-shortkey.once="['c']" class="hide" @shortkey="keyAction('goToViewConfig')" />
+    <button v-if="isView" v-shortkey.once="['y']" class="hide" @shortkey="keyAction('goToViewYaml')" />
+    <button v-if="isView" v-shortkey.once="['e']" class="hide" @shortkey="keyAction('goToEdit')" />
+  </div>
+</template>
+
+<style lang='scss' scoped>
+.flex-content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+</style>

package/components/ResourceList/Masthead.vue

@@ -0,0 +1,176 @@
+<script>
+import { mapGetters } from 'vuex';
+import Favorite from '@shell/components/nav/Favorite';
+import TypeDescription from '@shell/components/TypeDescription';
+import { get } from '@shell/utils/object';
+import { AS, _YAML } from '@shell/config/query-params';
+
+/**
+ * Resource List Masthead component.
+ */
+export default {
+
+  name: 'MastheadResourceList',
+
+  components: {
+    Favorite,
+    TypeDescription,
+  },
+  props: {
+    resource: {
+      type:     String,
+      required: true,
+    },
+    favoriteResource: {
+      type:     String,
+      default: null
+    },
+    schema: {
+      type:    Object,
+      default: null,
+    },
+    typeDisplay: {
+      type:    String,
+      default: null,
+    },
+    isCreatable: {
+      type:    Boolean,
+      default: null,
+    },
+    isYamlCreatable: {
+      type:    Boolean,
+      default: null,
+    },
+    createLocation: {
+      type:    Object,
+      default: null,
+    },
+    yamlCreateLocation: {
+      type:    Object,
+      default: null,
+    },
+    createButtonLabel: {
+      type:    String,
+      default: null
+    }
+  },
+
+  data() {
+    const params = { ...this.$route.params };
+
+    const formRoute = { name: `${ this.$route.name }-create`, params };
+
+    const hasEditComponent = this.$store.getters['type-map/hasCustomEdit'](this.resource);
+
+    const yamlRoute = {
+      name:  `${ this.$route.name }-create`,
+      params,
+      query: { [AS]: _YAML },
+    };
+
+    return {
+      formRoute,
+      yamlRoute,
+      hasEditComponent,
+    };
+  },
+
+  computed: {
+    get,
+    ...mapGetters(['isExplorer']),
+
+    resourceName() {
+      if (this.schema) {
+        return this.$store.getters['type-map/labelFor'](this.schema);
+      }
+
+      return this.resource;
+    },
+
+    _typeDisplay() {
+      if ( this.typeDisplay !== null) {
+        return this.typeDisplay;
+      }
+
+      if ( !this.schema ) {
+        return '?';
+      }
+
+      return this.$store.getters['type-map/labelFor'](this.schema, 99);
+    },
+
+    _isYamlCreatable() {
+      if ( this.isYamlCreatable !== null) {
+        return this.isYamlCreatable;
+      }
+
+      return this.schema && this._isCreatable && this.$store.getters['type-map/optionsFor'](this.resource).canYaml;
+    },
+
+    _isCreatable() {
+      // Does not take into account hasEditComponent, such that _isYamlCreatable works
+      if ( this.isCreatable !== null) {
+        return this.isCreatable;
+      }
+
+      // blocked-post means you can post through norman, but not through steve.
+      if ( this.schema && !this.schema?.collectionMethods.find(x => ['blocked-post', 'post'].includes(x.toLowerCase())) ) {
+        return false;
+      }
+
+      return this.$store.getters['type-map/optionsFor'](this.resource).isCreatable;
+    },
+
+    _createLocation() {
+      return this.createLocation || this.formRoute;
+    },
+
+    _yamlCreateLocation() {
+      return this.yamlCreateLocation || this.yamlRoute;
+    },
+
+    _createButtonlabel() {
+      return this.createButtonLabel || this.t('resourceList.head.create');
+    }
+
+  },
+};
+</script>
+
+<template>
+  <header>
+    <slot name="typeDescription">
+      <TypeDescription :resource="resource" />
+    </slot>
+    <div class="title">
+      <h1 class="m-0">
+        {{ _typeDisplay }} <Favorite v-if="isExplorer" :resource="favoriteResource || resource" />
+      </h1>
+    </div>
+    <div class="actions-container">
+      <slot name="actions">
+        <div class="actions">
+          <slot name="extraActions">
+          </slot>
+
+          <slot name="createButton">
+            <n-link
+              v-if="hasEditComponent && _isCreatable"
+              :to="_createLocation"
+              class="btn role-primary"
+            >
+              {{ _createButtonlabel }}
+            </n-link>
+            <n-link
+              v-else-if="_isYamlCreatable"
+              :to="_yamlCreateLocation"
+              class="btn role-primary"
+            >
+              {{ t("resourceList.head.createFromYaml") }}
+            </n-link>
+          </slot>
+        </div>
+      </slot>
+    </div>
+  </header>
+</template>

package/components/ResourceList/index.vue

@@ -0,0 +1,149 @@
+<script>
+import ResourceTable from '@shell/components/ResourceTable';
+import Loading from '@shell/components/Loading';
+import Masthead from './Masthead';
+
+export default {
+  components: {
+    Loading,
+    ResourceTable,
+    Masthead
+  },
+
+  async fetch() {
+    const store = this.$store;
+    const resource = this.resource;
+
+    let hasFetch = false;
+
+    const inStore = store.getters['currentStore'](resource);
+
+    const schema = store.getters[`${ inStore }/schemaFor`](resource);
+
+    if ( this.hasListComponent ) {
+      // If you provide your own list then call its asyncData
+      const importer = store.getters['type-map/importList'](resource);
+      const component = (await importer())?.default;
+
+      if ( component?.typeDisplay ) {
+        this.customTypeDisplay = component.typeDisplay.apply(this);
+      }
+
+      // If your list page has a fetch then it's responsible for populating rows itself
+      if ( component?.fetch ) {
+        hasFetch = true;
+      }
+    }
+
+    if ( !hasFetch ) {
+      if ( !schema ) {
+        store.dispatch('loadingError', `Type ${ resource } not found`);
+
+        return;
+      }
+
+      this.rows = await store.dispatch(`${ inStore }/findAll`, { type: resource });
+    }
+  },
+
+  data() {
+    const getters = this.$store.getters;
+    const params = { ...this.$route.params };
+    const resource = params.resource;
+
+    const hasListComponent = getters['type-map/hasCustomList'](resource);
+
+    const inStore = getters['currentStore'](resource);
+    const schema = getters[`${ inStore }/schemaFor`](resource);
+
+    const showMasthead = getters[`type-map/optionsFor`](resource).showListMasthead;
+
+    const existingData = getters[`${ inStore }/all`](resource) || [];
+
+    return {
+      schema,
+      hasListComponent,
+      hasData:      existingData.length > 0,
+      showMasthead: showMasthead === undefined ? true : showMasthead,
+      resource,
+
+      // Provided by fetch later
+      rows:              [],
+      customTypeDisplay: null,
+    };
+  },
+
+  computed: {
+    headers() {
+      if ( this.hasListComponent || !this.schema ) {
+        // Custom lists figure out their own headers
+        return [];
+      }
+
+      return this.$store.getters['type-map/headersFor'](this.schema);
+    },
+
+    groupBy() {
+      return this.$store.getters['type-map/groupByFor'](this.schema);
+    },
+
+    loading() {
+      return this.hasData ? false : this.$fetchState.pending;
+    }
+  },
+
+  created() {
+    let listComponent = false;
+
+    const resource = this.$route.params.resource;
+    const hasListComponent = this.$store.getters['type-map/hasCustomList'](resource);
+
+    if ( hasListComponent ) {
+      listComponent = this.$store.getters['type-map/importList'](resource);
+    }
+
+    this.listComponent = listComponent;
+  },
+};
+</script>
+
+<template>
+  <div>
+    <Masthead
+      v-if="showMasthead"
+      :type-display="customTypeDisplay"
+      :schema="schema"
+      :resource="resource"
+    />
+
+    <div v-if="hasListComponent">
+      <component
+        :is="listComponent"
+        v-bind="$data"
+      />
+    </div>
+    <ResourceTable
+      v-else
+      :schema="schema"
+      :rows="rows"
+      :loading="loading"
+      :headers="headers"
+      :group-by="groupBy"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  .header {
+    position: relative;
+  }
+  H2 {
+    position: relative;
+    margin: 0 0 20px 0;
+  }
+  .right-action {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+</style>