diff options
Diffstat (limited to 'app/assets/javascripts/serverless')
6 files changed, 200 insertions, 19 deletions
diff --git a/app/assets/javascripts/serverless/components/function_details.vue b/app/assets/javascripts/serverless/components/function_details.vue new file mode 100644 index 00000000000..2b1c21f041b --- /dev/null +++ b/app/assets/javascripts/serverless/components/function_details.vue @@ -0,0 +1,73 @@ +<script> +import PodBox from './pod_box.vue'; +import ClipboardButton from '../../vue_shared/components/clipboard_button.vue'; +import Icon from '~/vue_shared/components/icon.vue'; + +export default { + components: { + Icon, + PodBox, + ClipboardButton, + }, + props: { + func: { + type: Object, + required: true, + }, + }, + computed: { + name() { + return this.func.name; + }, + description() { + return this.func.description; + }, + funcUrl() { + return this.func.url; + }, + podCount() { + return this.func.podcount || 0; + }, + }, +}; +</script> + +<template> + <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> + + <h4>{{ s__('ServerlessDetails|Kubernetes Pods') }}</h4> + <div v-if="podCount > 0"> + <p> + <b v-if="podCount == 1">{{ podCount }} {{ s__('ServerlessDetails|pod in use') }}</b> + <b v-else>{{ podCount }} {{ s__('ServerlessDetails|pods in use') }}</b> + </p> + <pod-box :count="podCount" /> + <p> + {{ + s__('ServerlessDetails|Number of Kubernetes pods in use over time based on necessity.') + }} + </p> + </div> + <div v-else><p>No pods loaded at this time.</p></div> + </section> +</template> diff --git a/app/assets/javascripts/serverless/components/function_row.vue b/app/assets/javascripts/serverless/components/function_row.vue index 31f5427c771..44bfae388cb 100644 --- a/app/assets/javascripts/serverless/components/function_row.vue +++ b/app/assets/javascripts/serverless/components/function_row.vue @@ -15,8 +15,14 @@ export default { name() { return this.func.name; }, - url() { - return this.func.url; + description() { + return this.func.description; + }, + detailUrl() { + return this.func.detail_url; + }, + environment() { + return this.func.environment_scope; }, image() { return this.func.image; @@ -30,11 +36,20 @@ export default { <template> <div class="gl-responsive-table-row"> - <div class="table-section section-20">{{ name }}</div> - <div class="table-section section-50"> - <a :href="url">{{ url }}</a> + <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> </div> <div class="table-section section-20">{{ image }}</div> <div class="table-section section-10"><timeago :time="timestamp" /></div> </div> </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 349e14670b1..9606a78410e 100644 --- a/app/assets/javascripts/serverless/components/functions.vue +++ b/app/assets/javascripts/serverless/components/functions.vue @@ -50,8 +50,11 @@ export default { <div class="table-section section-20" role="rowheader"> {{ s__('Serverless|Function') }} </div> - <div class="table-section section-50" role="rowheader"> - {{ s__('Serverless|Domain') }} + <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') }} diff --git a/app/assets/javascripts/serverless/components/pod_box.vue b/app/assets/javascripts/serverless/components/pod_box.vue new file mode 100644 index 00000000000..04d3641bce3 --- /dev/null +++ b/app/assets/javascripts/serverless/components/pod_box.vue @@ -0,0 +1,36 @@ +<script> +export default { + props: { + count: { + type: Number, + required: true, + }, + color: { + type: String, + required: false, + default: 'green', + }, + }, + methods: { + boxOffset(i) { + return 20 * (i - 1); + }, + }, +}; +</script> + +<template> + <svg :width="boxOffset(count + 1)" :height="20"> + <rect + v-for="i in count" + :key="i" + width="15" + height="15" + rx="5" + ry="5" + :fill="color" + :x="boxOffset(i)" + y="0" + /> + </svg> +</template> diff --git a/app/assets/javascripts/serverless/serverless_bundle.js b/app/assets/javascripts/serverless/serverless_bundle.js index 3e3b81ba247..47a510d5fb5 100644 --- a/app/assets/javascripts/serverless/serverless_bundle.js +++ b/app/assets/javascripts/serverless/serverless_bundle.js @@ -4,23 +4,65 @@ import { s__ } from '../locale'; import Flash from '../flash'; import Poll from '../lib/utils/poll'; import ServerlessStore from './stores/serverless_store'; +import ServerlessDetailsStore from './stores/serverless_details_store'; import GetFunctionsService from './services/get_functions_service'; import Functions from './components/functions.vue'; +import FunctionDetails from './components/function_details.vue'; export default class Serverless { constructor() { - const { statusPath, clustersPath, helpPath, installed } = document.querySelector( - '.js-serverless-functions-page', - ).dataset; + if (document.querySelector('.js-serverless-function-details-page') != null) { + const { + serviceName, + serviceDescription, + serviceEnvironment, + serviceUrl, + serviceNamespace, + servicePodcount, + } = document.querySelector('.js-serverless-function-details-page').dataset; + const el = document.querySelector('#js-serverless-function-details'); + this.store = new ServerlessDetailsStore(); + const { store } = this; - this.service = new GetFunctionsService(statusPath); - this.knativeInstalled = installed !== undefined; - this.store = new ServerlessStore(this.knativeInstalled, clustersPath, helpPath); - this.initServerless(); - this.functionLoadCount = 0; + const service = { + name: serviceName, + description: serviceDescription, + environment: serviceEnvironment, + url: serviceUrl, + namespace: serviceNamespace, + podcount: servicePodcount, + }; - if (statusPath && this.knativeInstalled) { - this.initPolling(); + this.store.updateDetailedFunction(service); + this.functionDetails = new Vue({ + el, + data() { + return { + state: store.state, + }; + }, + render(createElement) { + return createElement(FunctionDetails, { + props: { + func: this.state.functionDetail, + }, + }); + }, + }); + } else { + const { statusPath, clustersPath, helpPath, installed } = document.querySelector( + '.js-serverless-functions-page', + ).dataset; + + this.service = new GetFunctionsService(statusPath); + this.knativeInstalled = installed !== undefined; + this.store = new ServerlessStore(this.knativeInstalled, clustersPath, helpPath); + this.initServerless(); + this.functionLoadCount = 0; + + if (statusPath && this.knativeInstalled) { + this.initPolling(); + } } } @@ -55,7 +97,7 @@ export default class Serverless { resource: this.service, method: 'fetchData', successCallback: data => this.handleSuccess(data), - errorCallback: () => this.handleError(), + errorCallback: () => Serverless.handleError(), }); if (!Visibility.hidden()) { @@ -64,7 +106,7 @@ export default class Serverless { this.service .fetchData() .then(data => this.handleSuccess(data)) - .catch(() => this.handleError()); + .catch(() => Serverless.handleError()); } Visibility.change(() => { @@ -102,5 +144,6 @@ export default class Serverless { } this.functions.$destroy(); + this.functionDetails.$destroy(); } } diff --git a/app/assets/javascripts/serverless/stores/serverless_details_store.js b/app/assets/javascripts/serverless/stores/serverless_details_store.js new file mode 100644 index 00000000000..5394d2cded1 --- /dev/null +++ b/app/assets/javascripts/serverless/stores/serverless_details_store.js @@ -0,0 +1,11 @@ +export default class ServerlessDetailsStore { + constructor() { + this.state = { + functionDetail: {}, + }; + } + + updateDetailedFunction(func) { + this.state.functionDetail = func; + } +} |