Skip to content

Enable Kafka main dashboard #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kkurzacz-intel wants to merge 4 commits into
base: creatone/kafka
Choose a base branch
from
Open

Enable Kafka main dashboard #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
91625e9
Enable Kafka main dashboard
kkurzacz-intel Nov 26, 2021
1739818
Enable Kafka creation tab
kkurzacz-intel Nov 27, 2021
c1f0a08
Refactor Kafka tab Create -> Service
kkurzacz-intel Nov 27, 2021
c85b821
Create Kafka service from yaml
kkurzacz-intel Nov 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions config/product/kafka.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,34 +12,34 @@ export function init(store) {
} = DSL(store, NAME);

product({
//TODO (Creatone): Add condition for Kafka.
//ifHave: IF_HAVE.V2_MONITORING, // possible RBAC issue here if mon turned on but user doesn't have view/read roles on pod monitors
// TODO (Creatone): Add condition for Kafka.
// ifHave: IF_HAVE.V2_MONITORING, // possible RBAC issue here if mon turned on but user doesn't have view/read roles on pod monitors
icon: 'kafka',
weight: 90,
weight: 89,
});

virtualType({
label: 'Kafka',
namespaced: false,
name: 'monitoring-overview',
name: 'kafka',
weight: 105,
route: { name: 'c-cluster-monitoring' },
route: { name: 'c-cluster-kafka' },
exact: true,
overview: true,
});

virtualType({
label: 'Create',
label: 'Service',
group: 'kafka',
name: 'create',
name: 'service',
icon: 'globe',
route: { name: 'c-cluster-kafka-create' }
route: { name: 'c-cluster-kafka-service' }
});

configureType('create', { showListMasthead: false });
configureType('service', { showListMasthead: false });

basicType([
'kafka',
'create',
'service',
]);
}
4 changes: 4 additions & 0 deletions config/types.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,10 @@ export const MONITORING = {
}
};

export const KAFKA = {
SERVICE: 'kafka.strimzi.io.kafka',
};

export const LONGHORN = {
ENGINES: 'longhorn.io.engine',
ENGINE_IMAGES: 'longhorn.io.engineimage',
Expand Down
13 changes: 13 additions & 0 deletions models/kafka.strimzi.io.kafka.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import SteveModel from '@/plugins/steve/steve-class';

export const PROVIDERS = [
{

name: 'kafka',
labelKey: 'kafkas.kafka.strimzi.io.kafka',
default: { },
},
];

export default class Kafka extends SteveModel {
}
23 changes: 23 additions & 0 deletions models/kafka.strimzi.io.service.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import SteveModel from '@/plugins/steve/steve-class';

export default class KafkaService extends SteveModel {
get _detailLocation() {
const id = this.id?.replace(/.*\//, '');

return {
name: 'c-cluster-kafka-service-namespace-id',
params: {
cluster: this.$rootGetters['clusterId'], id, namespace: this.metadata.namespace
},
query: { resource: this.type }
};
}

get doneOverride() {
return {
name: 'c-cluster-kafka-service',
params: { cluster: this.$rootGetters['clusterId'] },
query: { resource: this.type }
};
}
}
2 changes: 1 addition & 1 deletion pages/c/_cluster/kafka/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ export default {
<header class="row">
<div class="col span-12">
<h1>
<t k="monitoring.overview.title" />
Kafka dashboard
</h1>
<div>
<t k="monitoring.overview.subtitle" :raw="true" />
Expand Down
2 changes: 1 addition & 1 deletion pages/c/_cluster/kafka/create/index.vue → pages/c/_cluster/kafka/service/_id.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import ResourceDetail from '@/components/ResourceDetail';

export default {
name: 'RouteReceiverCreate',
name: 'KafkaService',

components: { ResourceDetail },

Expand Down
19 changes: 19 additions & 0 deletions pages/c/_cluster/kafka/service/create.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<script>
import ResourceDetail from '@/components/ResourceDetail';

export default {
name: 'KafkaService',

components: { ResourceDetail },

data() {
const { query:{ resource } } = this.$route;

return { resource };
}
};
</script>

<template>
<ResourceDetail :resource-override="resource" />
</template>
82 changes: 82 additions & 0 deletions pages/c/_cluster/kafka/service/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<script>
import Loading from '@/components/Loading';
import Tabbed from '@/components/Tabbed';
import Tab from '@/components/Tabbed/Tab';
import TypeDescription from '@/components/TypeDescription';

import ResourceTable from '@/components/ResourceTable';
import { MONITORING } from '@/config/types';
import { KAFKA } from '@/config/types';
import { allHash } from '@/utils/promise';
export default {
components: {
Loading, Tabbed, Tab, ResourceTable, TypeDescription
},

async fetch() {
this.kafkaService = this.$store.getters['cluster/schemaFor'](KAFKA.SERVICE);
this.serviceMonitorSchema = this.$store.getters['cluster/schemaFor'](MONITORING.SERVICEMONITOR);

const hash = await allHash( {
kafkaServices: this.$store.dispatch('cluster/findAll', { type: MONITORING.PODMONITOR } ),
serviceMonitors: this.$store.dispatch('cluster/findAll', { type: MONITORING.SERVICEMONITOR } )
});

this.kafkaServices = hash.kafkaServices;
this.serviceMonitors = hash.serviceMonitors;
},

data() {
const initTab = this.$route.query.resource || MONITORING.SPOOFED.PODMONITOR;

return {
kafkaServices: [], serviceMonitors: [], kafkaService: null, serviceMonitorSchema: null, initTab
};
},

computed: {
createRoute() {
const activeResource = this.$refs?.tabs?.activeTabName || this.routeSchema.id;

return {
name: 'c-cluster-kafka-service-create',
params: { cluster: this.$route.params.cluster },
query: { resource: activeResource }
};
},
}
};
</script>

<template>
<Loading v-if="$fetchState.pending" />
<div v-else>
<div class="row header mb-40">
<h1> Kafka creation</h1>
<div>
<button class="btn btn-lg role-primary float right" @click="$router.push(createRoute)">
{{ t('resourceList.head.createFromYaml') }}
</button>
</div>
</div>
<Tabbed ref="tabs" :default-tab="initTab">
<Tab :name="kafkaService.id" :label="$store.getters['type-map/labelFor'](kafkaService, 2)">
<TypeDescription :resource="kafkaService.id" />
<ResourceTable :schema="kafkaService" :rows="kafkaServices" />
</Tab>
<Tab :name="serviceMonitorSchema.id" :label="$store.getters['type-map/labelFor'](serviceMonitorSchema, 2)">
<TypeDescription :resource="serviceMonitorSchema.id" />
<ResourceTable :schema="serviceMonitorSchema" :rows="serviceMonitors" />
</Tab>
</Tabbed>
</div>
</template>

<style lang='scss' scoped>
.header{
display: flex;
H1{
flex: 1;
}
}
</style>