diff options
author | Chris Baumbauer <cab@cabnetworks.net> | 2019-01-22 03:00:16 +0300 |
---|---|---|
committer | Chris Baumbauer <cab@cabnetworks.net> | 2019-02-06 09:34:15 +0300 |
commit | 17bae7c797bbf0a78bf8b16e0423a40ee767bf21 (patch) | |
tree | 7972230c7b8a59661a9c0dd8e9b47ab3ee3bef0a /app/assets/javascripts/serverless | |
parent | d0187de202d94fa445a28c347b7a54dbf09a22a8 (diff) |
Modified Knative list view to provide more details
Diffstat (limited to 'app/assets/javascripts/serverless')
6 files changed, 169 insertions, 84 deletions
diff --git a/app/assets/javascripts/serverless/components/environment_row.vue b/app/assets/javascripts/serverless/components/environment_row.vue new file mode 100644 index 00000000000..4d18c5c4bdd --- /dev/null +++ b/app/assets/javascripts/serverless/components/environment_row.vue @@ -0,0 +1,65 @@ +<script> +import FunctionRow from './function_row.vue'; +import ItemCaret from '~/groups/components/item_caret.vue'; + +export default { + components: { + ItemCaret, + FunctionRow, + }, + props: { + env: { + type: Array, + required: true, + }, + envName: { + type: String, + required: true, + }, + }, + data() { + return { + isOpen: true, + }; + }, + computed: { + envId() { + if (this.envName === '*') { + return 'env-global'; + } + + return `env-${this.envName}`; + }, + isOpenClass() { + return { + 'is-open': this.isOpen, + }; + }, + }, + methods: { + toggleOpen() { + this.isOpen = !this.isOpen; + }, + }, +}; +</script> + +<template> + <li :id="envId" :class="isOpenClass" class="group-row has-children"> + <div + class="group-row-contents d-flex justify-content-end align-items-center" + role="button" + @click.stop="toggleOpen" + > + <div class="folder-toggle-wrap d-flex align-items-center"> + <item-caret :is-group-open="isOpen" /> + </div> + <div class="group-text flex-grow title namespace-title prepend-left-default"> + {{ envName }} + </div> + </div> + <ul v-if="isOpen" class="content-list group-list-tree"> + <function-row v-for="(f, index) in env" :key="f.name" :index="index" :func="f" /> + </ul> + </li> +</template> diff --git a/app/assets/javascripts/serverless/components/function_details.vue b/app/assets/javascripts/serverless/components/function_details.vue index 2b1c21f041b..4f89ad69129 100644 --- a/app/assets/javascripts/serverless/components/function_details.vue +++ b/app/assets/javascripts/serverless/components/function_details.vue @@ -1,13 +1,11 @@ <script> import PodBox from './pod_box.vue'; -import ClipboardButton from '../../vue_shared/components/clipboard_button.vue'; -import Icon from '~/vue_shared/components/icon.vue'; +import Url from './url.vue'; export default { components: { - Icon, PodBox, - ClipboardButton, + Url, }, props: { func: { @@ -36,24 +34,9 @@ export default { <section id="serverless-function-details"> <h3>{{ name }}</h3> <div class="append-bottom-default"> - <div v-for="line in description.split('\n')" :key="line">{{ line }}<br /></div> - </div> - <div class="clipboard-group append-bottom-default"> - <div class="label label-monospace">{{ funcUrl }}</div> - <clipboard-button - :text="String(funcUrl)" - :title="s__('ServerlessDetails|Copy URL to clipboard')" - class="input-group-text js-clipboard-btn" - /> - <a - :href="funcUrl" - target="_blank" - rel="noopener noreferrer nofollow" - class="input-group-text btn btn-default" - > - <icon name="external-link" /> - </a> + <div v-for="(line, index) in description.split('\n')" :key="index">{{ line }}</div> </div> + <url :uri="funcUrl" /> <h4>{{ s__('ServerlessDetails|Kubernetes Pods') }}</h4> <div v-if="podCount > 0"> diff --git a/app/assets/javascripts/serverless/components/function_row.vue b/app/assets/javascripts/serverless/components/function_row.vue index 44bfae388cb..773d18781fd 100644 --- a/app/assets/javascripts/serverless/components/function_row.vue +++ b/app/assets/javascripts/serverless/components/function_row.vue @@ -1,9 +1,12 @@ <script> import Timeago from '~/vue_shared/components/time_ago_tooltip.vue'; +import Url from './url.vue'; +import { visitUrl } from '~/lib/utils/url_utility'; export default { components: { Timeago, + Url, }, props: { func: { @@ -16,13 +19,18 @@ export default { return this.func.name; }, description() { - return this.func.description; + const desc = this.func.description.split('\n'); + if (desc.length > 1) { + return desc[1]; + } + + return desc[0]; }, detailUrl() { return this.func.detail_url; }, - environment() { - return this.func.environment_scope; + targetUrl() { + return this.func.url; }, image() { return this.func.image; @@ -31,25 +39,34 @@ export default { return this.func.created_at; }, }, + methods: { + checkClass(element) { + if (element.closest('.no-expand') === null) { + return true; + } + + return false; + }, + openDetails(e) { + if (this.checkClass(e.target)) { + visitUrl(this.detailUrl); + } + }, + }, }; </script> <template> - <div class="gl-responsive-table-row"> - <div class="table-section section-20 section-wrap"> - <a :href="detailUrl">{{ name }}</a> - </div> - <div class="table-section section-10">{{ environment }}</div> - <div class="table-section section-40 section-wrap"> - <span class="line-break">{{ description }}</span> + <li :id="name" class="group-row"> + <div class="group-row-contents" role="button" @click="openDetails"> + <p class="float-right text-right"> + <span>{{ image }}</span + ><br /> + <timeago :time="timestamp" /> + </p> + <b>{{ name }}</b> + <div v-for="line in description.split('\n')" :key="line">{{ line }}</div> + <url :uri="targetUrl" class="prepend-top-8 no-expand" /> </div> - <div class="table-section section-20">{{ image }}</div> - <div class="table-section section-10"><timeago :time="timestamp" /></div> - </div> + </li> </template> - -<style> -.line-break { - white-space: pre; -} -</style> diff --git a/app/assets/javascripts/serverless/components/functions.vue b/app/assets/javascripts/serverless/components/functions.vue index 9606a78410e..4bde409f906 100644 --- a/app/assets/javascripts/serverless/components/functions.vue +++ b/app/assets/javascripts/serverless/components/functions.vue @@ -1,19 +1,21 @@ <script> import { GlSkeletonLoading } from '@gitlab/ui'; import FunctionRow from './function_row.vue'; +import EnvironmentRow from './environment_row.vue'; import EmptyState from './empty_state.vue'; export default { components: { + EnvironmentRow, FunctionRow, EmptyState, GlSkeletonLoading, }, props: { functions: { - type: Array, + type: Object, required: true, - default: () => [], + default: () => ({}), }, installed: { type: Boolean, @@ -45,33 +47,21 @@ export default { <section id="serverless-functions"> <div v-if="installed"> <div v-if="hasFunctionData"> - <div class="ci-table js-services-list function-element"> - <div class="gl-responsive-table-row table-row-header" role="row"> - <div class="table-section section-20" role="rowheader"> - {{ s__('Serverless|Function') }} - </div> - <div class="table-section section-10" role="rowheader"> - {{ s__('Serverless|Cluster Env') }} - </div> - <div class="table-section section-40" role="rowheader"> - {{ s__('Serverless|Description') }} - </div> - <div class="table-section section-20" role="rowheader"> - {{ s__('Serverless|Runtime') }} - </div> - <div class="table-section section-10" role="rowheader"> - {{ s__('Serverless|Last Update') }} - </div> + <template v-if="loadingData"> + <div v-for="j in 3" :key="j" class="gl-responsive-table-row"><gl-skeleton-loading /></div> + </template> + <template v-else> + <div class="groups-list-tree-container"> + <ul class="content-list group-list-tree"> + <environment-row + v-for="(env, index) in functions" + :key="index" + :env="env" + :env-name="index" + /> + </ul> </div> - <template v-if="loadingData"> - <div v-for="j in 3" :key="j" class="gl-responsive-table-row"> - <gl-skeleton-loading /> - </div> - </template> - <template v-else> - <function-row v-for="f in functions" :key="f.name" :func="f" /> - </template> - </div> + </template> </div> <div v-else class="empty-state js-empty-state"> <div class="text-content"> @@ -111,16 +101,3 @@ export default { <empty-state v-else :clusters-path="clustersPath" :help-path="helpPath" /> </section> </template> - -<style> -.top-area { - border-bottom: 0; -} - -.function-element { - border-bottom: 1px solid #e5e5e5; - border-bottom-color: rgb(229, 229, 229); - border-bottom-style: solid; - border-bottom-width: 1px; -} -</style> diff --git a/app/assets/javascripts/serverless/components/url.vue b/app/assets/javascripts/serverless/components/url.vue new file mode 100644 index 00000000000..ca53bf6c52a --- /dev/null +++ b/app/assets/javascripts/serverless/components/url.vue @@ -0,0 +1,38 @@ +<script> +import { GlButton } from '@gitlab/ui'; +import ClipboardButton from '../../vue_shared/components/clipboard_button.vue'; +import Icon from '~/vue_shared/components/icon.vue'; + +export default { + components: { + Icon, + GlButton, + ClipboardButton, + }, + props: { + uri: { + type: String, + required: true, + }, + }, +}; +</script> + +<template> + <div class="clipboard-group"> + <div class="url-text-field label label-monospace">{{ uri }}</div> + <clipboard-button + :text="uri" + :title="s__('ServerlessURL|Copy URL to clipboard')" + class="input-group-text js-clipboard-btn" + /> + <gl-button + :href="uri" + target="_blank" + rel="noopener noreferrer nofollow" + class="input-group-text btn btn-default" + > + <icon name="external-link" /> + </gl-button> + </div> +</template> diff --git a/app/assets/javascripts/serverless/stores/serverless_store.js b/app/assets/javascripts/serverless/stores/serverless_store.js index 774c15b5b12..816d55a03f9 100644 --- a/app/assets/javascripts/serverless/stores/serverless_store.js +++ b/app/assets/javascripts/serverless/stores/serverless_store.js @@ -1,7 +1,7 @@ export default class ServerlessStore { constructor(knativeInstalled = false, clustersPath, helpPath) { this.state = { - functions: [], + functions: {}, hasFunctionData: true, loadingData: true, installed: knativeInstalled, @@ -10,8 +10,13 @@ export default class ServerlessStore { }; } - updateFunctionsFromServer(functions = []) { - this.state.functions = functions; + updateFunctionsFromServer(upstreamFunctions = []) { + this.state.functions = upstreamFunctions.reduce((rv, func) => { + const envs = rv; + envs[func.environment_scope] = (rv[func.environment_scope] || []).concat([func]); + + return envs; + }, {}); } updateLoadingState(loadingData) { |