Repository: ignite Updated Branches: refs/heads/master a30388c19 -> 5375042e9
IGNITE-9680 Web console: Added component for status output. Project: http://git-wip-us.apache.org/repos/asf/ignite/repo Commit: http://git-wip-us.apache.org/repos/asf/ignite/commit/5375042e Tree: http://git-wip-us.apache.org/repos/asf/ignite/tree/5375042e Diff: http://git-wip-us.apache.org/repos/asf/ignite/diff/5375042e Branch: refs/heads/master Commit: 5375042e987adc8d5cf489b24d6a4e09cdcf1714 Parents: a30388c Author: Ilya Borisov <klast...@gmail.com> Authored: Tue Oct 16 17:30:12 2018 +0700 Committer: Alexey Kuznetsov <akuznet...@apache.org> Committed: Tue Oct 16 17:30:12 2018 +0700 ---------------------------------------------------------------------- modules/web-console/frontend/app/app.js | 4 +- .../components/cell-status/index.js | 26 ---------- .../components/cell-status/index.ts | 31 ++++++++++++ .../components/cell-status/style.scss | 46 ----------------- .../components/cell-status/template.pug | 18 ------- .../components/list/column-defs.js | 2 +- .../app/components/ignite-status/index.js | 22 -------- .../app/components/ignite-status/style.scss | 27 ---------- .../app/components/status-output/component.ts | 31 ++++++++++++ .../status-output/componentFactory.ts | 30 +++++++++++ .../app/components/status-output/controller.ts | 53 ++++++++++++++++++++ .../app/components/status-output/index.ts | 40 +++++++++++++++ .../app/components/status-output/style.scss | 38 ++++++++++++++ .../components/status-output/template.tpl.pug | 18 +++++++ .../app/components/ui-grid/controller.js | 4 ++ 15 files changed, 248 insertions(+), 142 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/ignite/blob/5375042e/modules/web-console/frontend/app/app.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/app.js b/modules/web-console/frontend/app/app.js index 98792c4..c890fa4 100644 --- a/modules/web-console/frontend/app/app.js +++ b/modules/web-console/frontend/app/app.js @@ -148,7 +148,7 @@ import progressLine from './components/progress-line'; import formField from './components/form-field'; import igniteChart from './components/ignite-chart'; import igniteChartSelector from './components/ignite-chart-series-selector'; -import igniteStatus from './components/ignite-status'; +import statusOutput from './components/status-output'; import pageProfile from './components/page-profile'; import pagePasswordChanged from './components/page-password-changed'; @@ -258,7 +258,7 @@ export default angular.module('ignite-console', [ passwordVisibility.name, igniteChart.name, igniteChartSelector.name, - igniteStatus.name, + statusOutput.name, progressLine.name, formField.name ]) http://git-wip-us.apache.org/repos/asf/ignite/blob/5375042e/modules/web-console/frontend/app/components/connected-clusters-dialog/components/cell-status/index.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/connected-clusters-dialog/components/cell-status/index.js b/modules/web-console/frontend/app/components/connected-clusters-dialog/components/cell-status/index.js deleted file mode 100644 index 480fe54..0000000 --- a/modules/web-console/frontend/app/components/connected-clusters-dialog/components/cell-status/index.js +++ /dev/null @@ -1,26 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import './style.scss'; -import template from './template.pug'; - -export default { - template, - bindings: { - status: '<' - } -}; http://git-wip-us.apache.org/repos/asf/ignite/blob/5375042e/modules/web-console/frontend/app/components/connected-clusters-dialog/components/cell-status/index.ts ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/connected-clusters-dialog/components/cell-status/index.ts b/modules/web-console/frontend/app/components/connected-clusters-dialog/components/cell-status/index.ts new file mode 100644 index 0000000..c3f201f --- /dev/null +++ b/modules/web-console/frontend/app/components/connected-clusters-dialog/components/cell-status/index.ts @@ -0,0 +1,31 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {componentFactory, StatusLevel} from 'app/components/status-output'; + +export default componentFactory([ + { + level: StatusLevel.GREEN, + value: true, + label: 'Active' + }, + { + level: StatusLevel.RED, + value: false, + label: 'Not Active' + } +]); http://git-wip-us.apache.org/repos/asf/ignite/blob/5375042e/modules/web-console/frontend/app/components/connected-clusters-dialog/components/cell-status/style.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/connected-clusters-dialog/components/cell-status/style.scss b/modules/web-console/frontend/app/components/connected-clusters-dialog/components/cell-status/style.scss deleted file mode 100644 index 2f0c981..0000000 --- a/modules/web-console/frontend/app/components/connected-clusters-dialog/components/cell-status/style.scss +++ /dev/null @@ -1,46 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -connected-clusters-cell-status { - $color-active: #417505; - $color-not-active: #ee2b27; - - display: block; - - div { - display: flex; - - &:before { - content: 'â'; - - position: relative; - height: 16px; - margin-right: 10px; - - font-size: 24px; - line-height: 19px; - } - } - - .#{&}-active { - color: $color-active; - } - - .#{&}-not-active { - color: $color-not-active; - } -} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ignite/blob/5375042e/modules/web-console/frontend/app/components/connected-clusters-dialog/components/cell-status/template.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/connected-clusters-dialog/components/cell-status/template.pug b/modules/web-console/frontend/app/components/connected-clusters-dialog/components/cell-status/template.pug deleted file mode 100644 index e4f21b6..0000000 --- a/modules/web-console/frontend/app/components/connected-clusters-dialog/components/cell-status/template.pug +++ /dev/null @@ -1,18 +0,0 @@ -//- - Licensed to the Apache Software Foundation (ASF) under one or more - contributor license agreements. See the NOTICE file distributed with - this work for additional information regarding copyright ownership. - The ASF licenses this file to You under the Apache License, Version 2.0 - (the "License"); you may not use this file except in compliance with - the License. You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - - Unless required by applicable law or agreed to in writing, software - distributed under the License is distributed on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - See the License for the specific language governing permissions and - limitations under the License. - -div(ng-class='["connected-clusters-cell-status-"+($ctrl.status ? "active" : "not-active")]') - i {{ $ctrl.status ? 'Active' : 'Not Active' }} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/ignite/blob/5375042e/modules/web-console/frontend/app/components/connected-clusters-dialog/components/list/column-defs.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/connected-clusters-dialog/components/list/column-defs.js b/modules/web-console/frontend/app/components/connected-clusters-dialog/components/list/column-defs.js index ca5dc6b..6b25878 100644 --- a/modules/web-console/frontend/app/components/connected-clusters-dialog/components/list/column-defs.js +++ b/modules/web-console/frontend/app/components/connected-clusters-dialog/components/list/column-defs.js @@ -46,7 +46,7 @@ export default [ cellTemplate: ` <div class='ui-grid-cell-contents ui-grid-cell--status'> <connected-clusters-cell-status - status='COL_FIELD' + value='COL_FIELD' ></connected-clusters-cell-status> <connected-clusters-cell-logout ng-if='row.entity.secured && grid.appScope.$ctrl.agentMgr.hasCredentials(row.entity.id)' http://git-wip-us.apache.org/repos/asf/ignite/blob/5375042e/modules/web-console/frontend/app/components/ignite-status/index.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/ignite-status/index.js b/modules/web-console/frontend/app/components/ignite-status/index.js deleted file mode 100644 index a8520bc..0000000 --- a/modules/web-console/frontend/app/components/ignite-status/index.js +++ /dev/null @@ -1,22 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -import angular from 'angular'; -import './style.scss'; - -export default angular - .module('ignite-console.ignite-status', []); http://git-wip-us.apache.org/repos/asf/ignite/blob/5375042e/modules/web-console/frontend/app/components/ignite-status/style.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/ignite-status/style.scss b/modules/web-console/frontend/app/components/ignite-status/style.scss deleted file mode 100644 index d2877fc..0000000 --- a/modules/web-console/frontend/app/components/ignite-status/style.scss +++ /dev/null @@ -1,27 +0,0 @@ -/* - * Licensed to the Apache Software Foundation (ASF) under one or more - * contributor license agreements. See the NOTICE file distributed with - * this work for additional information regarding copyright ownership. - * The ASF licenses this file to You under the Apache License, Version 2.0 - * (the "License"); you may not use this file except in compliance with - * the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -@import "../../../public/stylesheets/variables"; - -// Statuses coloring -.ignite-status__active { - color: $ignite-status-active !important; -} - -.ignite-status__inactive { - color: $ignite-status-inactive; -} http://git-wip-us.apache.org/repos/asf/ignite/blob/5375042e/modules/web-console/frontend/app/components/status-output/component.ts ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/status-output/component.ts b/modules/web-console/frontend/app/components/status-output/component.ts new file mode 100644 index 0000000..fed8280 --- /dev/null +++ b/modules/web-console/frontend/app/components/status-output/component.ts @@ -0,0 +1,31 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {Status} from './controller'; +import templateUrl from './template.tpl.pug'; +import './style.scss'; + +const component: ng.IComponentOptions = { + templateUrl, + bindings: { + options: '<', + value: '<' + }, + controller: Status +}; + +export {component}; http://git-wip-us.apache.org/repos/asf/ignite/blob/5375042e/modules/web-console/frontend/app/components/status-output/componentFactory.ts ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/status-output/componentFactory.ts b/modules/web-console/frontend/app/components/status-output/componentFactory.ts new file mode 100644 index 0000000..192abb5 --- /dev/null +++ b/modules/web-console/frontend/app/components/status-output/componentFactory.ts @@ -0,0 +1,30 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {StatusOptions} from './index'; +import {Status} from './controller'; +import {component} from './component'; + +export const componentFactory = (options: StatusOptions) => ({ + ...component, + bindings: { + value: '<' + }, + controller: class extends Status { + options = options + } +}); http://git-wip-us.apache.org/repos/asf/ignite/blob/5375042e/modules/web-console/frontend/app/components/status-output/controller.ts ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/status-output/controller.ts b/modules/web-console/frontend/app/components/status-output/controller.ts new file mode 100644 index 0000000..e9baab1 --- /dev/null +++ b/modules/web-console/frontend/app/components/status-output/controller.ts @@ -0,0 +1,53 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {StatusOptions, StatusOption} from './index'; + +interface Changes extends ng.IOnChangesObject { + value: ng.IChangesObject<string>, + options: ng.IChangesObject<StatusOptions> +} + +const UNIVERSAL_CLASSNAME = 'status-output'; + +export class Status implements ng.IComponentController, ng.IOnChanges, ng.IPostLink, ng.IOnDestroy { + static $inject = ['$element']; + + value: string; + options: StatusOptions; + status: StatusOption | undefined; + statusClassName: string | undefined; + + constructor(private el: JQLite) {} + + $postLink() { + this.el[0].classList.add(UNIVERSAL_CLASSNAME); + } + + $onDestroy() { + delete this.el; + } + + $onChanges(changes: Changes) { + if ('value' in changes) { + this.status = this.options.find((option) => option.value === this.value); + + if (this.status) + this.statusClassName = `${UNIVERSAL_CLASSNAME}__${this.status.level.toLowerCase()}`; + } + } +} http://git-wip-us.apache.org/repos/asf/ignite/blob/5375042e/modules/web-console/frontend/app/components/status-output/index.ts ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/status-output/index.ts b/modules/web-console/frontend/app/components/status-output/index.ts new file mode 100644 index 0000000..c24d438 --- /dev/null +++ b/modules/web-console/frontend/app/components/status-output/index.ts @@ -0,0 +1,40 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import {component} from './component'; +export {componentFactory} from './componentFactory'; + +export interface StatusOption { + level: StatusLevel, + // Whether to show progress indicator or not + ongoing?: boolean, + value: string | boolean, + // What user will see + label: string +} + +export type StatusOptions = Array<StatusOption>; + +export enum StatusLevel { + NEUTRAL = 'NEUTRAL', + GREEN = 'GREEN', + RED = 'RED' +} + +export default angular + .module('ignite-console.components.status-output', []) + .component('statusOutput', component); http://git-wip-us.apache.org/repos/asf/ignite/blob/5375042e/modules/web-console/frontend/app/components/status-output/style.scss ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/status-output/style.scss b/modules/web-console/frontend/app/components/status-output/style.scss new file mode 100644 index 0000000..d49213f --- /dev/null +++ b/modules/web-console/frontend/app/components/status-output/style.scss @@ -0,0 +1,38 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +.status-output { + @import 'public/stylesheets/variables'; + + display: inline-flex; + + .spinner-circle { + margin-left: 5px; + } + + .status-output__neutral { + color: inherit; + } + + .status-output__green { + color: $ignite-status-active; + } + + .status-output__red { + color: $ignite-status-inactive; + } +} http://git-wip-us.apache.org/repos/asf/ignite/blob/5375042e/modules/web-console/frontend/app/components/status-output/template.tpl.pug ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/status-output/template.tpl.pug b/modules/web-console/frontend/app/components/status-output/template.tpl.pug new file mode 100644 index 0000000..a79035e --- /dev/null +++ b/modules/web-console/frontend/app/components/status-output/template.tpl.pug @@ -0,0 +1,18 @@ +//- + Licensed to the Apache Software Foundation (ASF) under one or more + contributor license agreements. See the NOTICE file distributed with + this work for additional information regarding copyright ownership. + The ASF licenses this file to You under the Apache License, Version 2.0 + (the "License"); you may not use this file except in compliance with + the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. + +span(translate='{{$ctrl.status.label}}' ng-class='$ctrl.statusClassName') +.spinner-circle(ng-if='$ctrl.status.ongoing') http://git-wip-us.apache.org/repos/asf/ignite/blob/5375042e/modules/web-console/frontend/app/components/ui-grid/controller.js ---------------------------------------------------------------------- diff --git a/modules/web-console/frontend/app/components/ui-grid/controller.js b/modules/web-console/frontend/app/components/ui-grid/controller.js index a640604..f53416b 100644 --- a/modules/web-console/frontend/app/components/ui-grid/controller.js +++ b/modules/web-console/frontend/app/components/ui-grid/controller.js @@ -19,6 +19,9 @@ import debounce from 'lodash/debounce'; import headerTemplate from 'app/primitives/ui-grid-header/index.tpl.pug'; export default class IgniteUiGrid { + /** @type {import('ui-grid').IGridOptions} */ + grid; + /** @type */ gridApi; @@ -75,6 +78,7 @@ export default class IgniteUiGrid { } this.grid = { + appScopeProvider: this.$scope.$parent, data: this.items, columnDefs: this.columnDefs, categories: this.categories,
