Skip to content

Commit

Permalink
Merge pull request #511 from jordojordo/main
Browse files Browse the repository at this point in the history
Refactor policy tracing tab and banner
  • Loading branch information
jordojordo authored Oct 18, 2023
2 parents e9a041f + 4cdbca6 commit 3426199
Show file tree
Hide file tree
Showing 24 changed files with 1,099 additions and 222 deletions.
15 changes: 7 additions & 8 deletions pkg/kubewarden/components/Dashboard/InstallView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -43,14 +43,13 @@ export default {
if ( !this.hasSchema ) {
const inStore = this.currentProduct.inStore;
const hash = [];
const listTypes = [SERVICE, CATALOG.CLUSTER_REPO];
if ( this.$store.getters[`${ inStore }/canList`](SERVICE) ) {
hash.push(this.$fetchType(SERVICE));
}
if ( this.$store.getters[`${ inStore }/canList`](CATALOG.CLUSTER_REPO) ) {
hash.push(this.$fetchType(CATALOG.CLUSTER_REPO));
}
listTypes.forEach((type) => {
if ( this.$store.getters[`${ inStore }/canList`](type) ) {
hash.push(this.$fetchType(type));
}
});
await allHash(hash);
Expand Down Expand Up @@ -318,7 +317,7 @@ export default {
</template>
<template #install>
<template v-if="!kubewardenRepo">
<template v-if="!kubewardenRepo && !controllerChart">
<h2 class="mt-20 mb-10" data-testid="kw-repo-title">
{{ t("kubewarden.dashboard.prerequisites.repository.title") }}
</h2>
Expand Down
21 changes: 19 additions & 2 deletions pkg/kubewarden/components/DefaultsBanner.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { mapGetters } from 'vuex';
import { CATALOG } from '@shell/config/types';
import { REPO_TYPE, REPO, CHART, VERSION } from '@shell/config/query-params';
import ResourceFetch from '@shell/mixins/resource-fetch';
import ResourceManager from '@shell/mixins/resource-manager';
import { Banner } from '@components/Banner';
Expand All @@ -14,7 +14,19 @@ import { handleGrowl } from '../utils/handle-growl';
export default {
components: { Banner },
mixins: [ResourceFetch],
mixins: [ResourceManager],
async fetch() {
this.secondaryResourceData = this.secondaryResourceDataConfig();
await this.resourceManagerFetchSecondaryResources(this.secondaryResourceData);
},
data() {
return {
apps: null,
secondaryResourceData: this.secondaryResourceDataConfig()
};
},
computed: {
...mapGetters(['currentCluster']),
Expand All @@ -25,6 +37,10 @@ export default {
},
methods: {
secondaryResourceDataConfig() {
return { data: { [CATALOG.APP]: { applyTo: [{ var: 'apps' }] } } };
},
async closeDefaultsBanner(retry = 0) {
const res = await this.$store.dispatch('kubewarden/updateHideBannerDefaults', true);
Expand Down Expand Up @@ -98,6 +114,7 @@ export default {
>
<span v-clean-html="t('kubewarden.policyServer.noDefaultsInstalled.description', {}, true)" />
<button
v-if="defaultsChart"
data-testid="kw-defaults-banner-button"
class="btn role-primary ml-10"
@click.prevent="chartRoute"
Expand Down
42 changes: 5 additions & 37 deletions pkg/kubewarden/components/Policies/PolicyDetail.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { monitoringStatus } from '@shell/utils/monitoring';
import { dashboardExists } from '@shell/utils/grafana';
import CreateEditView from '@shell/mixins/create-edit-view';
import { Banner } from '@components/Banner';
import DashboardMetrics from '@shell/components/DashboardMetrics';
import Loading from '@shell/components/Loading';
import ResourceTabs from '@shell/components/form/ResourceTabs';
Expand All @@ -23,7 +22,7 @@ export default {
name: 'PolicyDetail',
components: {
Banner, DashboardMetrics, Loading, MetricsBanner, ResourceTabs, RulesTable, Tab, TraceTable
DashboardMetrics, Loading, MetricsBanner, ResourceTabs, RulesTable, Tab, TraceTable
},
mixins: [CreateEditView],
Expand Down Expand Up @@ -58,21 +57,13 @@ export default {
console.error(`Error fetching Grafana service: ${ e }`); // eslint-disable-line no-console
}
}
this.jaegerService = await this.value.jaegerQueryService();
if ( this.jaegerService ) {
this.filteredValidations = await this.value.jaegerSpecificValidations({ service: this.jaegerService });
}
},
data() {
return {
jaegerService: null,
metricsProxy: null,
metricsService: null,
reloadRequired: false,
filteredValidations: null,
metricsProxy: null,
metricsService: null,
reloadRequired: false,
metricsType: METRICS_DASHBOARD.POLICY
};
Expand All @@ -86,14 +77,6 @@ export default {
return { policy_name: `clusterwide-${ this.value?.id }` };
},
emptyTraces() {
if ( isEmpty(this.filteredValidations) ) {
return true;
}
return false;
},
hasRelationships() {
return !!this.value.metadata?.relationships;
},
Expand All @@ -104,14 +87,6 @@ export default {
rulesRows() {
return this.value.spec?.rules;
},
tracesRows() {
if ( this.filteredValidations ) {
return this.value.traceTableRows(this.filteredValidations);
}
return [];
}
},
Expand Down Expand Up @@ -143,14 +118,7 @@ export default {
</Tab>
<Tab name="policy-tracing" label="Tracing" :weight="98">
<TraceTable data-testid="kw-policy-detail-trace-table" :rows="tracesRows">
<template #traceBanner>
<Banner v-if="emptyTraces" color="warning">
<span v-if="!jaegerService" v-clean-html="t('kubewarden.tracing.noJaeger', {}, true)" />
<span v-else>{{ t('kubewarden.tracing.noTraces') }}</span>
</Banner>
</template>
</TraceTable>
<TraceTable :resource="resource" :policy="value" data-testid="kw-policy-detail-trace-table" />
</Tab>
<Tab name="policy-metrics" label="Metrics" :weight="97">
Expand Down
35 changes: 0 additions & 35 deletions pkg/kubewarden/components/TraceBanner.vue

This file was deleted.

135 changes: 135 additions & 0 deletions pkg/kubewarden/components/TraceChecklist.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
<script>
import { mapGetters } from 'vuex';
import { CATALOG } from '@shell/config/labels-annotations';
import {
REPO_TYPE, REPO, CHART, NAME, VERSION, NAMESPACE
} from '@shell/config/query-params';
import { Banner } from '@components/Banner';
export default {
props: {
controllerChart: {
type: Object,
default: null
},
tracingConfiguration: {
type: Object,
default: null
},
jaegerQuerySvc: {
type: Object,
default: null
},
openTelSvc: {
type: Object,
default: null
}
},
components: { Banner },
computed: {
...mapGetters(['currentCluster']),
disableChartInstall() {
return !this.openTelSvc || !this.jaegerQuerySvc;
},
tracingEnabled() {
if ( this.tracingConfiguration ) {
return this.tracingConfiguration.enabled;
}
return null;
}
},
methods: {
chartRoute() {
if ( this.controllerChart ) {
const metadata = this.controllerChart.spec?.chart?.metadata;
const query = {
[NAMESPACE]: metadata?.annotations?.[CATALOG.NAMESPACE],
[NAME]: metadata?.annotations?.[CATALOG.RELEASE_NAME],
[VERSION]: metadata?.annotations?.['catalog.cattle.io/upstream-version'],
[REPO]: metadata?.annotations?.[CATALOG.SOURCE_REPO_NAME],
[REPO_TYPE]: metadata?.annotations?.[CATALOG.SOURCE_REPO_TYPE],
[CHART]: metadata?.name
};
this.$router.push({
name: 'c-cluster-apps-charts-install',
params: { cluster: this.currentCluster?.id || '_' },
query,
});
}
}
}
};
</script>
<template>
<div>
<p class="checklist__description mb-20" data-testid="kw-tracing-checklist-description">
{{ t('kubewarden.tracing.description') }}
</p>
<div class="checklist__prereq mb-20">
<h2>{{ t('kubewarden.tracing.prerequisites.label') }}</h2>
<p>{{ t('kubewarden.tracing.prerequisites.description') }}</p>
</div>
<Banner
color="warning"
:label="t('kubewarden.tracing.prerequisites.warning')"
/>
<div class="checklist__container mt-20 mb-20">
<div class="checklist__step mt-20 mb-20" data-testid="kw-tracing-checklist-step-open-tel">
<i class="icon mr-10" :class="{ 'icon-dot-open': !openTelSvc,'icon-checkmark': openTelSvc }" />
<p v-clean-html="t('kubewarden.tracing.openTelemetry', {}, true)" />
</div>
<div class="checklist__step mb-20" data-testid="kw-tracing-checklist-step-jaeger">
<i class="icon mr-10" :class="{ 'icon-dot-open': !jaegerQuerySvc,'icon-checkmark': jaegerQuerySvc }" />
<p v-clean-html="t('kubewarden.tracing.jaeger', {}, true)" p />
</div>
<div class="checklist__step mb-20" data-testid="kw-tracing-checklist-step-config">
<i class="icon mr-10" :class="{ 'icon-dot-open': !tracingEnabled,'icon-checkmark': tracingEnabled }" />
<div class="checklist__config">
<p v-clean-html="t('kubewarden.tracing.config.label', {}, true)" />
<button
data-testid="kw-tracing-checklist-step-config-button"
class="btn role-primary ml-10"
:disabled="disableChartInstall"
@click.prevent="chartRoute"
>
{{ t("kubewarden.tracing.config.link") }}
</button>
</div>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
.checklist {
&__container {
display: flex;
justify-content: center;
flex-direction: column;
border: 1px solid var(--border);
padding: 10px;
}
&__step, &__config {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
&__step {
min-height: 40px;
}
}
</style>
Loading

0 comments on commit 3426199

Please sign in to comment.