Skip to content

Commit

Permalink
[Graph] Field manager (#45384) (#46451)
Browse files Browse the repository at this point in the history
  • Loading branch information
@flash1293
flash1293 committed Sep 24, 2019
1 parent c86e149 commit 91a2a12
Show file tree
Hide file tree
Showing 39 changed files with 1,115 additions and 424 deletions.
5 changes: 5 additions & 0 deletions x-pack/legacy/plugins/graph/public/_mixins.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@mixin gphFieldBadgeSize {
height: $euiSizeL;
// Subtract 2 for the border
line-height: $euiSizeL - 2px;
}
2 changes: 1 addition & 1 deletion x-pack/legacy/plugins/graph/public/angular/templates/_graph.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@
fill: $euiColorEmptyShade;
}

.gphGraph__menus, .gphGraph__bar {
.gphGraph__menus {
margin: $euiSizeS;
}

Expand Down
202 changes: 4 additions & 198 deletions x-pack/legacy/plugins/graph/public/angular/templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<graph-inspect ng-show="menus.showInspect"></graph-inspect>
</div>

<graph-search-bar
<graph-app
current-index-pattern="selectedIndex"
on-index-pattern-selected="uiSelectIndex"
on-query-submit="submit"
Expand All @@ -17,203 +17,9 @@
overlays="pluginDependencies.overlays"
is-loading="loading"
initial-query="initialQuery"
></graph-search-bar>

<div class="gphGraph__bar">
<div class="gphGraph__flexGroup">
<!-- Added fields. -->
<span
class="gphNoUserSelect"
ng-repeat="f in selectedFields"
ng-attr-tooltip="{{ ::'xpack.graph.topNavMenu.addedFieldTooltip' | i18n: {
defaultMessage: 'Shift + click to toggle if search returns {fName}',
values: { fName: f.name }
} }}"
>
<svg class="gphNode" width="30" height="30" ng-click="clickVertexFieldIcon(f, $event)" ng-class="{'gphNode-disabled':f.hopSize<=0}">
<circle class="gphNode__circle" r="13" cx="15" cy="15" ng-class="{selectedNode:currentlyDisplayedKey === 'fieldConfig'&&f === selectedFieldConfig}"
ng-attr-style="fill:{{f.color}}" />
<text ng-if="f.icon" class="gphNode__text fa" text-anchor="middle" x="15" y="20">
{{f.icon.code}}
</text>
</svg>
</span>

<!-- Add field button. -->
<span
class="gphNoUserSelect"
ng-attr-tooltip="{{ ::'xpack.graph.topNavMenu.addFieldButtonTooltip' | i18n: { defaultMessage: 'Add a field source for vertices' } }}"
>
<button
class="gphAddButton"
ng-disabled="selectedIndex === null"
aria-label="{{ ::'xpack.graph.topNavMenu.addFieldButtonAriaLabel' | i18n: { defaultMessage: 'Add a field' } }}"
id="addVertexFieldButton"
ng-class="{'gphAddButton-focus':selectedIndex !== null&&selectedFields.length === 0}"
ng-click="toggleShowAdvancedFieldsConfig()"
>
<span aria-hidden="true" class="kuiIcon fa-plus"></span>
</button>
</span>
</div>
</div>

<div class="config" ng-show="currentlyDisplayedKey === 'fields'" data-test-subj="fieldSelectionList">
<div class="config">
<div class="container-fluid">
<label
i18n-id="xpack.graph.queryConfig.addFieldLabel"
i18n-default-message="Add a field source for vertices"
></label>
<form>
<div class="input-group form-group" style="width:100%">
<span class="input-group-addon">
<span class="kuiIcon fa-search"></span>
</span>
<input
input-focus ng-model="fieldNamesFilterString"
placeholder="{{ ::'xpack.graph.queryConfig.filterPlaceholder' | i18n: { defaultMessage: 'Filter…' } }}"
ng-change="filterFieldsKeyDown()"
class="form-control"
name="filter"
type="text"
autocomplete="off" />
</div>
</form>

<select class="kuiVerticalRhythm gphFieldList" id="fieldList" size="7" ng-options="item as item.name for item in filteredFields"
ng-dblclick="addFieldToSelection()" ng-model="selectedField"></select>

<div class="kuiVerticalRhythm">
<!-- TODO look at the field chooser directive in Discover to give type icons etc to
field types. This may filter out indexed-only fields though? -->
<button
ng-disabled="!selectedField"
ng-click="addFieldToSelection()"
class="kuiButton kuiButton--primary"
i18n-id="xpack.graph.queryConfig.addFieldButtonLabel"
i18n-default-message="Add"
></button>
</div>
</div>

<button
class="kuiLocalDropdownCloseButton"
ng-click="kbnTopNav.close()"
aria-label="{{ ::'xpack.graph.queryConfig.closeConfigButtonAriaLabel' | i18n: { defaultMessage: 'Close' } }}"
>
<span class="kuiIcon fa-chevron-circle-up"></span>
</button>
</div>
</div>

<div class="config" ng-show="currentlyDisplayedKey === 'fieldConfig' && selectedFieldConfig">
<div class="config">
<div class="container-fluid">

<div>
<form class="form-horizontal">

<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<strong>{{selectedFieldConfig.name}}</strong>
</div>
</div>

<div class="form-group form-group-sm gphFormGroup--small">
<label
for="colorPicker"
class="col-sm-4 control-label"
i18n-id="xpack.graph.queryConfig.colorPickerLabel"
i18n-default-message="Color"
></label>
<div class="col-sm-6">
<span id="colorPicker">
<span ng-repeat="c in colors" ng-click="applyColor(selectedFieldConfig,c)" ng-class="c === selectedFieldConfig.color ? 'fa-circle-o' : 'fa-circle'"
ng-style="{color: c}" class="kuiIcon gphColorPicker__color">
</span>
</span>
</div>
</div>

<div class="form-group form-group-sm gphFormGroup--small">
<label
for="iconPicker"
class="col-sm-4 control-label"
i18n-id="xpack.graph.queryConfig.iconPickerLabel"
i18n-default-message="Icon"
></label>
<div class="col-sm-6">
<span class="gphIconPicker">
<span ng-repeat="i in iconChoices" ng-click="applyIcon(selectedFieldConfig,i)" ng-class="{selectedNode:i==selectedFieldConfig.icon}"
class="kuiIcon gphIconPicker__icon gphNoUserSelect">
{{i.code}}</span>
</span>
</div>
</div>

<div class="form-group form-group-sm gphFormGroup--small">
<label
for="qHopSize"
class="col-sm-4 control-label"
i18n-id="xpack.graph.queryConfig.maxTermsInputLabel"
i18n-default-message="Max terms per hop"
></label>
<div class="col-sm-6">
<input ng-change="selectedFieldConfigHopSizeChanged()" type="number" class="input-sm" min="0" max="100"
step="1" id="qHopSize" ng-model="selectedFieldConfig.hopSize">
<div class="help-block">
<div class="euiText">
<p
i18n-id="xpack.graph.queryConfig.maxTermsInputDescription"
i18n-default-message="Controls the number of terms returned each search step."
></p>
</div>

<div class="hintbox">
<span class="kuiIcon fa-info text-info"></span>
{{
::'xpack.graph.queryConfig.maxTermsHelpText' | i18n: {
defaultMessage: 'Shift-clicking the field icons in the menu bar provides a quick way to toggle this number to zero and back'
}
}}
</div>

</div>
</div>
</div>

<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<div>
<button
ng-click="removeVertexFieldSelection()"
class="kuiButton kuiButton--danger"
i18n-id="xpack.graph.queryConfig.removeFieldButtonLabel"
i18n-default-message="Remove"
></button>
</div>
</div>
</div>

</form>

</div>


</div>

<div
class="kuiLocalDropdownCloseButton"
aria-label="{{ ::'xpack.graph.queryConfig.closeAriaLabel' | i18n: { defaultMessage: 'close' } }}"
ng-click="kbnTopNav.close()"
>
<span class="kuiIcon fa-chevron-circle-up"></span>
</div>

</div>
</div>

state="reduxState"
dispatch="reduxDispatch"
></graph-app>

<div class="gphGraph__container" id="GraphSvgContainer">
<svg class="gphGraph" width="100%" height="100%" pointer-events="all" id="graphSvg" ng-click="hideAllConfigPanels()">
Expand Down
Loading

0 comments on commit 91a2a12

Please sign in to comment.