Commit 2c80a1c0 authored by Dylan Griffith's avatar Dylan Griffith Committed by Mike Greiling

Introduce Knative Serverless Tab

parent e80f8933
import ServerlessBundle from '~/serverless/serverless_bundle';
document.addEventListener('DOMContentLoaded', () => {
new ServerlessBundle(); // eslint-disable-line no-new
});
<script>
export default {
props: {
clustersPath: {
type: String,
required: true,
},
helpPath: {
type: String,
required: true,
},
},
};
</script>
<template>
<div class="row empty-state js-empty-state">
<div class="col-12">
<div class="text-content">
<h4 class="state-title text-center">
{{ s__('Serverless|Getting started with serverless') }}
</h4>
<p class="state-description">
{{
s__(`Serverless| In order to start using functions as a service,
you must first install Knative on your Kubernetes cluster.`)
}}
<a :href="helpPath"> {{ __('More information') }} </a>
</p>
<div class="text-center">
<a :href="clustersPath" class="btn btn-success">
{{ s__('Serverless|Install Knative') }}
</a>
</div>
</div>
</div>
</div>
</template>
<script>
import Timeago from '~/vue_shared/components/time_ago_tooltip.vue';
export default {
components: {
Timeago,
},
props: {
func: {
type: Object,
required: true,
},
},
computed: {
name() {
return this.func.name;
},
url() {
return this.func.url;
},
image() {
return this.func.image;
},
timestamp() {
return this.func.created_at;
},
},
};
</script>
<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>
<div class="table-section section-20">{{ image }}</div>
<div class="table-section section-10"><timeago :time="timestamp" /></div>
</div>
</template>
<script>
import { GlSkeletonLoading } from '@gitlab/ui';
import FunctionRow from './function_row.vue';
import EmptyState from './empty_state.vue';
export default {
components: {
FunctionRow,
EmptyState,
GlSkeletonLoading,
},
props: {
functions: {
type: Array,
required: true,
default: () => [],
},
installed: {
type: Boolean,
required: true,
},
clustersPath: {
type: String,
required: true,
},
helpPath: {
type: String,
required: true,
},
loadingData: {
type: Boolean,
required: false,
default: true,
},
hasFunctionData: {
type: Boolean,
required: false,
default: true,
},
},
};
</script>
<template>
<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-50" role="rowheader">
{{ s__('Serverless|Domain') }}
</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>
</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>
</div>
<div v-else class="empty-state js-empty-state">
<div class="text-content">
<h4 class="state-title text-center">{{ s__('Serverless|No functions available') }}</h4>
<p class="state-description">
{{
s__(`Serverless|There is currently no function data available from Knative.
This could be for a variety of reasons including:`)
}}
</p>
<ul>
<li>Your repository does not have a corresponding <code>serverless.yml</code> file.</li>
<li>Your <code>gitlab-ci.yml</code> file is not properly configured.</li>
<li>
The functions listed in the <code>serverless.yml</code> file don't match the namespace
of your cluster.
</li>
<li>The deploy job has not finished.</li>
</ul>
<p>
{{
s__(`Serverless|If you believe none of these apply, please check
back later as the function data may be in the process of becoming
available.`)
}}
</p>
<div class="text-center">
<a :href="helpPath" class="btn btn-success">
{{ s__('Serverless|Learn more about Serverless') }}
</a>
</div>
</div>
</div>
</div>
<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>
import Vue from 'vue';
export default new Vue();
import Visibility from 'visibilityjs';
import Vue from 'vue';
import { s__ } from '../locale';
import Flash from '../flash';
import Poll from '../lib/utils/poll';
import ServerlessStore from './stores/serverless_store';
import GetFunctionsService from './services/get_functions_service';
import Functions from './components/functions.vue';
export default class Serverless {
constructor() {
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();
}
}
initServerless() {
const { store } = this;
const el = document.querySelector('#js-serverless-functions');
this.functions = new Vue({
el,
data() {
return {
state: store.state,
};
},
render(createElement) {
return createElement(Functions, {
props: {
functions: this.state.functions,
installed: this.state.installed,
clustersPath: this.state.clustersPath,
helpPath: this.state.helpPath,
loadingData: this.state.loadingData,
hasFunctionData: this.state.hasFunctionData,
},
});
},
});
}
initPolling() {
this.poll = new Poll({
resource: this.service,
method: 'fetchData',
successCallback: data => this.handleSuccess(data),
errorCallback: () => this.handleError(),
});
if (!Visibility.hidden()) {
this.poll.makeRequest();
} else {
this.service
.fetchData()
.then(data => this.handleSuccess(data))
.catch(() => this.handleError());
}
Visibility.change(() => {
if (!Visibility.hidden() && !this.destroyed) {
this.poll.restart();
} else {
this.poll.stop();
}
});
}
handleSuccess(data) {
if (data.status === 200) {
this.store.updateFunctionsFromServer(data.data);
this.store.updateLoadingState(false);
} else if (data.status === 204) {
/* Time out after 3 attempts to retrieve data */
this.functionLoadCount += 1;
if (this.functionLoadCount === 3) {
this.poll.stop();
this.store.toggleNoFunctionData();
}
}
}
static handleError() {
Flash(s__('Serverless|An error occurred while retrieving serverless components'));
}
destroy() {
this.destroyed = true;
if (this.poll) {
this.poll.stop();
}
this.functions.$destroy();
}
}
import axios from '~/lib/utils/axios_utils';
export default class GetFunctionsService {
constructor(endpoint) {
this.endpoint = endpoint;
}
fetchData() {
return axios.get(this.endpoint);
}
}
export default class ServerlessStore {
constructor(knativeInstalled = false, clustersPath, helpPath) {
this.state = {
functions: [],
hasFunctionData: true,
loadingData: true,
installed: knativeInstalled,
clustersPath,
helpPath,
};
}
updateFunctionsFromServer(functions = []) {
this.state.functions = functions;
}
updateLoadingState(loadingData) {
this.state.loadingData = loadingData;
}
toggleNoFunctionData() {
this.state.hasFunctionData = false;
}
}
# frozen_string_literal: true
module Projects
module Serverless
class FunctionsController < Projects::ApplicationController
include ProjectUnauthorized
before_action :authorize_read_cluster!
INDEX_PRIMING_INTERVAL = 10_000
INDEX_POLLING_INTERVAL = 30_000
def index
finder = Projects::Serverless::FunctionsFinder.new(project.clusters)
respond_to do |format|
format.json do
functions = finder.execute
if functions.any?
Gitlab::PollingInterval.set_header(response, interval: INDEX_POLLING_INTERVAL)
render json: Projects::Serverless::ServiceSerializer.new(current_user: @current_user).represent(functions)
else
Gitlab::PollingInterval.set_header(response, interval: INDEX_PRIMING_INTERVAL)
head :no_content
end
end
format.html do
@installed = finder.installed?
render
end
end
end
end
end
end
# frozen_string_literal: true
module Projects
module Serverless
class FunctionsFinder
def initialize(clusters)
@clusters = clusters
end
def execute
knative_services.flatten.compact
end
def installed?
clusters_with_knative_installed.exists?
end
private
def knative_services
clusters_with_knative_installed.preload_knative.map do |cluster|
cluster.application_knative.services_for(ns: cluster.platform_kubernetes&.actual_namespace)
end
end
def clusters_with_knative_installed
@clusters.with_knative_installed
end
end
end
end
......@@ -307,6 +307,7 @@ module ProjectsHelper
settings: :admin_project,
builds: :read_build,
clusters: :read_cluster,
serverless: :read_cluster,
labels: :read_label,
issues: :read_issue,
project_members: :read_project_member,
......@@ -545,6 +546,7 @@ module ProjectsHelper
%w[
environments
clusters
functions
user
gcp
]
......
......@@ -15,6 +15,9 @@ module Clusters
include ::Clusters::Concerns::ApplicationVersion
include ::Clusters::Concerns::ApplicationData
include AfterCommitQueue
include ReactiveCaching
self.reactive_cache_key = ->(knative) { [knative.class.model_name.singular, knative.id] }
state_machine :status do
before_transition any => [:installed] do |application|
......@@ -29,6 +32,8 @@ module Clusters
validates :hostname, presence: true, hostname: true
scope :for_cluster, -> (cluster) { where(cluster: cluster) }
def chart
'knative/knative'
end
......@@ -55,12 +60,39 @@ module Clusters
ClusterWaitForIngressIpAddressWorker.perform_async(name, id)
end
def client
cluster.kubeclient.knative_client
end
def services
with_reactive_cache do |data|
data[:services]
end
end
def calculate_reactive_cache
{ services: read_services }
end
def ingress_service
cluster.kubeclient.get_service('knative-ingressgateway', 'istio-system')
end
def client
cluster.platform_kubernetes.kubeclient.knative_client
def services_for(ns: namespace)
return unless services
return [] unless ns
services.select do |service|
service.dig('metadata', 'namespace') == ns
end
end
private
def read_services
client.get_services.as_json
rescue Kubeclient::ResourceNotFoundError
[]
end
end
end
......
......@@ -93,6 +93,16 @@ module Clusters
where('NOT EXISTS (?)', subquery)
end
scope :with_knative_installed, -> { joins(:application_knative).merge(Clusters::Applications::Knative.installed) }
scope :preload_knative, -> {
preload(
:kubernetes_namespace,
:platform_kubernetes,
:application_knative
)
}
def self.ancestor_clusters_for_clusterable(clusterable, hierarchy_order: :asc)
hierarchy_groups = clusterable.ancestors_upto(hierarchy_order: hierarchy_order).eager_load(:clusters)
hierarchy_groups = hierarchy_groups.merge(current_scope) if current_scope
......
# frozen_string_literal: true
module Projects
module Serverless
class ServiceEntity < Grape::Entity
include RequestAwareEntity
expose :name do |service|
service.dig('metadata', 'name')
end
expose :namespace do |service|
service.dig('metadata', 'namespace')
end
expose :created_at do |service|
service.dig('metadata', 'creationTimestamp')
end
expose :url do |service|
"http://#{service.dig('status', 'domain')}"
end
expose :description do |service|
service.dig('spec', 'runLatest', 'configuration', 'revisionTemplate', 'metadata', 'annotations', 'Description')
end
expose :image do |service|
service.dig('spec', 'runLatest', 'configuration', 'build', 'template', 'name')
end
end
end
end
# frozen_string_literal: true
module Projects
module Serverless
class ServiceSerializer < BaseSerializer
entity Projects::Serverless::ServiceEntity
end
end
end
......@@ -222,6 +222,12 @@
%span
= _('Environments')
- if project_nav_tab? :serverless
= nav_link(controller: :functions) do
= link_to project_serverless_functions_path(@project), title: _('Serverless') do
%span
= _('Serverless')
- if project_nav_tab? :clusters
- show_cluster_hint = show_gke_cluster_integration_callout?(@project)
= nav_link(controller: [:clusters, :user, :gcp]) do
......
- @no_container = true
- @content_class = "limit-container-width" unless fluid_layout
- breadcrumb_title 'Serverless'
- page_title 'Serverless'
- status_path = project_serverless_functions_path(@project, format: :json)
- clusters_path = project_clusters_path(@project)
.serverless-functions-page.js-serverless-functions-page{ data: { status_path: status_path, installed: @installed, clusters_path: clusters_path, help_path: help_page_path('user/project/clusters/serverless/index') } }
%div{ class: [container_class, ('limit-container-width' unless fluid_layout)] }
.js-serverless-functions-notice
.flash-container
.top-area.adjust
.serverless-functions-table#js-serverless-functions
---
title: Introduce Knative and Serverless Components
merge_request: 23174
author: Chris Baumbauer
type: added
......@@ -245,6 +245,10 @@ constraints(::Constraints::ProjectUrlConstrainer.new) do
end
end
namespace :serverless do
resources :functions, only: [:index]
end
scope '-' do
get 'archive/*id', constraints: { format: Gitlab::PathRegex.archive_formats_regex, id: /.+?/ }, to: 'repositories#archive', as: 'archive'
......
......@@ -5815,6 +5815,45 @@ msgstr ""
msgid "Server version"
msgstr ""
msgid "Serverless"
msgstr ""
msgid "Serverless| In order to start using functions as a service, you must first install Knative on your Kubernetes cluster."
msgstr ""
msgid "Serverless|An error occurred while retrieving serverless components"
msgstr ""
msgid "Serverless|Domain"
msgstr ""
msgid "Serverless|Function"
msgstr ""
msgid "Serverless|Getting started with serverless"
msgstr ""
msgid "Serverless|If you believe none of these apply, please check back later as the function data may be in the process of becoming available."
msgstr ""
msgid "Serverless|Install Knative"
msgstr ""
msgid "Serverless|Last Update"
msgstr ""
msgid "Serverless|Learn more about Serverless"
msgstr ""
msgid "Serverless|No functions available"
msgstr ""
msgid "Serverless|Runtime"
msgstr ""
msgid "Serverless|There is currently no function data available from Knative. This could be for a variety of reasons including:"
msgstr ""
msgid "Service Templates"
msgstr ""
......
# frozen_string_literal: true
require 'spec_helper'
describe Projects::Serverless::FunctionsController do
include KubernetesHelpers
include ReactiveCachingHelpers
let(:user) { create(:user) }
let(:cluster) { create(:cluster, :project, :provided_by_gcp) }
let(:knative) { create(:clusters_applications_knative, :installed, cluster: cluster) }
let(:service) { cluster.platform_kubernetes }
let(:project) { cluster.project}
let(:namespace) do
create(:cluster_kubernetes_namespace,
cluster: cluster,
cluster_project: cluster.cluster_project,
project: cluster.cluster_project.project)
end
before do
project.add_maintainer(user)
sign_in(user)
end
def params(opts = {})
opts.reverse_merge(namespace_id: project.namespace.to_param,
project_id: project.to_param)
end
describe 'GET #index' do
context 'empty cache' do
it 'has no data' do
get :index, params({ format: :json })